mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2026-03-16 22:28:41 +00:00
(docs) Moved Fuse Components and Other Components into UI for better visibility and better categorization
This commit is contained in:
sercan
File diff suppressed because it is too large
Load Diff
@@ -1,62 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FuseAlertService } from '@fuse/components/alert';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'alert',
|
||||
templateUrl: './alert.component.html',
|
||||
styles : [
|
||||
`
|
||||
fuse-alert {
|
||||
margin: 16px 0;
|
||||
}
|
||||
`
|
||||
]
|
||||
})
|
||||
export class AlertComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _fuseAlertService: FuseAlertService,
|
||||
private _coreFeaturesComponent: CoreFeaturesComponent
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Dismiss the alert via the service
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
dismiss(name: string): void
|
||||
{
|
||||
// Dismiss
|
||||
this._fuseAlertService.dismiss(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the alert via the service
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
show(name: string): void
|
||||
{
|
||||
// Show
|
||||
this._fuseAlertService.show(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,413 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Card
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-card</strong> is a basic card component to show any kind of information or content with features like flipping and expanding.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseCard</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseCardModule } from '@fuse/components/card';
|
||||
</textarea>
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>flippable: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the card is flippable.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">false</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
expand(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Expands the expansion of the card.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
collapse(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Collapses the expansion of the card.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
toggleExpanded(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Toggles the expanded status of the expansion.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
flip(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Flip the card.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Just wrap the content or the information with <code>fuse-card</code> to show them within the card. <strong>fuse-card</strong> doesn't apply any kind of style to its
|
||||
content to make customization simpler:
|
||||
</p>
|
||||
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<div class="bg-gray-100 p-4">
|
||||
<div class="mx-auto max-w-80">
|
||||
<fuse-card>
|
||||
This content is in the card and it doesn't have any style applied to it!
|
||||
</fuse-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<fuse-card>
|
||||
This content is in the card and it doesn't have any style applied to it!
|
||||
</fuse-card>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Expandable</h3>
|
||||
<p>
|
||||
Expandable <strong>fuse-card</strong> holds an extra content or information hidden in its expandable area which can be toggled by accessing the component itself
|
||||
via a template reference:
|
||||
</p>
|
||||
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<div class="bg-gray-100 p-4">
|
||||
<div class="mx-auto max-w-80">
|
||||
|
||||
<fuse-card
|
||||
class="flex flex-col px-8 py-6 pb-4"
|
||||
#fuseCard>
|
||||
<div class="text-lg font-bold">Title of the card</div>
|
||||
<div class="mt-2">
|
||||
A paragraph, an image, a form or simply anything can go here to create the content of the card.
|
||||
</div>
|
||||
<div class="mt-3 -mx-3">
|
||||
<button
|
||||
class="px-3"
|
||||
mat-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.expanded = !fuseCard.expanded">
|
||||
<span class="mr-1">Details</span>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
*ngIf="!fuseCard.expanded"
|
||||
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
*ngIf="fuseCard.expanded"
|
||||
[svgIcon]="'heroicons_solid:chevron-up'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expansion -->
|
||||
<ng-container fuseCardExpansion>
|
||||
<div class="my-2">
|
||||
This is the expansion and holds an extra information!
|
||||
</div>
|
||||
</ng-container>
|
||||
</fuse-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<fuse-card
|
||||
class="flex flex-col px-8 py-6 pb-4"
|
||||
#fuseCard>
|
||||
<div class="text-lg font-bold">Title of the card</div>
|
||||
<div class="mt-2">
|
||||
A paragraph, an image, a form or simply anything can go here to create the content of the card.
|
||||
</div>
|
||||
<div class="mt-3 -mx-3">
|
||||
<button
|
||||
class="px-3"
|
||||
mat-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.expanded = !fuseCard.expanded">
|
||||
<span class="mr-1">Details</span>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
*ngIf="!fuseCard.expanded"
|
||||
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
*ngIf="fuseCard.expanded"
|
||||
[svgIcon]="'heroicons_solid:chevron-up'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Expansion -->
|
||||
<ng-container fuseCardExpansion>
|
||||
<div class="my-2">
|
||||
This is the expansion and holds an extra information!
|
||||
</div>
|
||||
</ng-container>
|
||||
</fuse-card>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Flippable</h3>
|
||||
<p>
|
||||
Flippable card holds content or information on both sides and can be flipped by accessing the component itself via a template reference. The only limitation with
|
||||
this type of cards is that the <em>back</em> of the card will share the same height as the <em>front</em> of the card. If the <em>back</em> side has more content,
|
||||
scrollbar will appear.
|
||||
</p>
|
||||
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<div class="bg-gray-100 p-4">
|
||||
<div class="mx-auto max-w-80">
|
||||
|
||||
<fuse-card
|
||||
class="flex flex-col"
|
||||
[flippable]="true"
|
||||
#fuseCard>
|
||||
<!-- Front -->
|
||||
<ng-container fuseCardFront>
|
||||
<div class="flex flex-col px-8 py-6 pb-3">
|
||||
<div class="text-lg font-bold">Title of the card</div>
|
||||
<div class="mt-2">
|
||||
A paragraph, an image, a form or simply anything can go here to create the content of the card.
|
||||
</div>
|
||||
<div class="mt-3 -mx-3 self-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.face = 'back'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Back -->
|
||||
<ng-container fuseCardBack>
|
||||
<div class="flex flex-col flex-auto px-8 py-6 pt-3">
|
||||
<div class="mb-2 -mx-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.face = 'front'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-secondary">
|
||||
This is the back of the card and holds an extra information!
|
||||
</p>
|
||||
<p class="text-secondary">
|
||||
Also, the <em>back</em> side of the card holds more information than the <em>front</em> of the card which causes scrollbars to
|
||||
appear.
|
||||
</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</fuse-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<fuse-card
|
||||
class="flex flex-col"
|
||||
[flippable]="true"
|
||||
#fuseCard>
|
||||
<!-- Front -->
|
||||
<ng-container fuseCardFront>
|
||||
<div class="flex flex-col px-8 py-6 pb-3">
|
||||
<div class="text-lg font-bold">Title of the card</div>
|
||||
<div class="mt-2">
|
||||
A paragraph, an image, a form or simply anything can go here to create the content of the card.
|
||||
</div>
|
||||
<div class="mt-3 -mx-3 self-end">
|
||||
<button
|
||||
mat-icon-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.face = 'back'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Back -->
|
||||
<ng-container fuseCardBack>
|
||||
<div class="flex flex-col flex-auto px-8 py-6 pt-3">
|
||||
<div class="mb-2 -mx-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
[color]="'primary'"
|
||||
(click)="fuseCard.face = 'front'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:arrow-left'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-secondary">
|
||||
This is the back of the card and holds an extra information!
|
||||
</p>
|
||||
<p class="text-secondary">
|
||||
Also, the <em>back</em> side of the card holds more information than the <em>front</em> of the card
|
||||
which causes scrollbars to appear.
|
||||
</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</fuse-card>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'card',
|
||||
templateUrl: './card.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class CardComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Date Range
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-date-range</strong> is a date-time range selector component. It can be programmed to provide date or date-time ranges. It has full
|
||||
<strong>ngModel</strong> and <strong>reactive form</strong> support and built to works with <strong>moment.js</strong>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseDateRange</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseDateRangeModule } from '@fuse/components/date-range';
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuse-date-range</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<fuse-date-range [formControlName]="'range'"
|
||||
[dateFormat]="settings.dateFormat"
|
||||
[timeRange]="!eventForm.get('allDay').value"
|
||||
[timeFormat]="settings.timeFormat"></fuse-date-range>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>dateFormat: string</div>
|
||||
</td>
|
||||
<td>
|
||||
Moment.js date format string to format output date.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">DD/MM/YYYY</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>timeFormat: string</div>
|
||||
</td>
|
||||
<td>
|
||||
<strong>12</strong> for 12-hour, <strong>24</strong> for 24-hour format.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">12</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>timeRange: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to enable time range.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">true</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>range: any</div>
|
||||
</td>
|
||||
<td>
|
||||
Date range input <code>{{'{'}} start: string, end: string {{'}'}}</code>. If you are using <strong>ngModel</strong> or <strong>Reactive
|
||||
forms</strong>, you shouldn't use this input!
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">true</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Range</h2>
|
||||
<p>
|
||||
The input of the range must be in the following format. The <strong>start</strong> and <strong>end</strong> date strings must be moment compatible strings as they
|
||||
will be immediately parsed with MomentJS.
|
||||
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
// Input format
|
||||
{
|
||||
start: string,
|
||||
end : string
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
The outputted range object will be in the following format. The <strong>date</strong> and <strong>time</strong> fields will be formatted based on the
|
||||
<em>dateFormat</em> and <em>timeFormat</em> inputs.
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
// Output format
|
||||
{
|
||||
startDate: string,
|
||||
startTime: null | string,
|
||||
endDate : string,
|
||||
endTime : null | string
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'date-range',
|
||||
templateUrl: './date-range.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class DateRangeComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,358 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Drawer
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-drawer</strong> is a simple drawer component that can be programmed in various ways. The main difference between Angular Material's
|
||||
<strong>mat-drawer</strong> component is that the <strong>fuse-drawer</strong> can be placed anywhere on the DOM and it doesn't have to wrap the content like
|
||||
<strong>mat-drawer</strong>.
|
||||
</p>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
Since fuse-drawer works with <em>absolute</em> positioning by default, the parent of the drawer must have
|
||||
<code>position: relative</code> and <code>overflow-x: hidden</code> properties otherwise the drawer won't be able to work correctly.
|
||||
</fuse-alert>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseDrawer</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseDrawerModule } from '@fuse/components/drawer';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuse-drawer</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<fuse-drawer
|
||||
[fixed]="true"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'rightDrawer'"
|
||||
[opened]="!isScreenSmall"
|
||||
[position]="'right'"
|
||||
[transparentOverlay]="false">
|
||||
</fuse-drawer>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>fixed: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the position of the drawer is <em>fixed</em> or <em>absolute</em>.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">false</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>mode: FuseDrawerMode</div>
|
||||
</td>
|
||||
<td>
|
||||
<strong>over</strong> mode can be used to place the drawer on top of the content and <strong>side</strong> mode can be used to push the content and
|
||||
place the drawer next to it.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">side</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
|
||||
<div>@Input()</div>
|
||||
<div>name: string</div>
|
||||
</td>
|
||||
<td>
|
||||
Unique name of the drawer. Required for drawer to work correctly.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>opened: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the drawer is opened. Only works with <strong>over</strong> mode.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">false</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>position: FuseDrawerPosition</div>
|
||||
</td>
|
||||
<td>
|
||||
Position of the drawer.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">left</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>transparentOverlay: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the overlay of the drawer is transparent. Only works with <strong>over</strong> mode.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">false</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Output()</div>
|
||||
<div>modeChanged: FuseNavigationMode</div>
|
||||
</td>
|
||||
<td>
|
||||
An event emitted after the mode of the navigation changed.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Output()</div>
|
||||
<div>openedChanged: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
An event emitted after the opened status of the drawer changed.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Output()</div>
|
||||
<div>positionChanged: FuseNavigationPosition</div>
|
||||
</td>
|
||||
<td>
|
||||
An event emitted after the position of the drawer changed.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Type aliases</h2>
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
export type FuseDrawerMode =
|
||||
| 'over'
|
||||
| 'side';
|
||||
</textarea>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
export type FuseDrawerPosition =
|
||||
| 'left'
|
||||
| 'right';
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Service</h2>
|
||||
<p>
|
||||
The <code>FuseDrawerService</code> can be used to remotely accessing to drawers using their <strong>name</strong> properties to control them:
|
||||
</p>
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="toggleDrawerMode('leftDrawer');">
|
||||
Toggle drawer mode
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="toggleDrawerOpen('leftDrawer');">
|
||||
Toggle drawer open
|
||||
</button>
|
||||
|
||||
<div class="relative flex overflow-hidden border mt-8 min-h-80">
|
||||
|
||||
<fuse-drawer
|
||||
[name]="'leftDrawer'"
|
||||
[opened]="true"
|
||||
[mode]="'side'"
|
||||
#drawer>
|
||||
<div class="p-4">
|
||||
Left drawer
|
||||
<div>Current mode: {{drawer.mode}}</div>
|
||||
</div>
|
||||
</fuse-drawer>
|
||||
|
||||
<div class="flex-auto bg-gray-100 p-4">
|
||||
Some content
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="toggleDrawerMode('leftDrawer');">
|
||||
Toggle drawer mode
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="toggleDrawerOpen('leftDrawer');">
|
||||
Toggle drawer open
|
||||
</button>
|
||||
|
||||
<div class="relative flex overflow-hidden border mt-8 min-h-80">
|
||||
<fuse-drawer
|
||||
[name]="'leftDrawer'"
|
||||
[opened]="true"
|
||||
[mode]="'side'">
|
||||
<div class="p-4">
|
||||
Left drawer
|
||||
</div>
|
||||
</fuse-drawer>
|
||||
|
||||
<div class="flex-auto bg-gray-100 p-4">
|
||||
Some content
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Typescript">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
[lang]="'typescript'">
|
||||
|
||||
/**
|
||||
* Toggle the drawer mode
|
||||
*
|
||||
* @param drawerName
|
||||
*/
|
||||
toggleDrawerMode(drawerName): void
|
||||
{
|
||||
const drawer = this._fuseDrawerService.getComponent(drawerName);
|
||||
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer open
|
||||
*
|
||||
* @param drawerName
|
||||
*/
|
||||
toggleDrawerOpen(drawerName): void
|
||||
{
|
||||
const drawer = this._fuseDrawerService.getComponent(drawerName);
|
||||
drawer.toggle();
|
||||
}
|
||||
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,68 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FuseDrawerMode, FuseDrawerService } from '@fuse/components/drawer';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'drawer',
|
||||
templateUrl: './drawer.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class DrawerComponent
|
||||
{
|
||||
drawerMode: FuseDrawerMode;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _fuseDrawerService: FuseDrawerService,
|
||||
private _coreFeaturesComponent: CoreFeaturesComponent
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.drawerMode = 'side';
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer mode
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
toggleDrawerMode(name: string): void
|
||||
{
|
||||
const drawer = this._fuseDrawerService.getComponent(name);
|
||||
|
||||
if ( drawer )
|
||||
{
|
||||
drawer.mode = drawer.mode === 'side' ? 'over' : 'side';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer open
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
toggleDrawerOpen(name: string): void
|
||||
{
|
||||
const drawer = this._fuseDrawerService.getComponent(name);
|
||||
|
||||
if ( drawer )
|
||||
{
|
||||
drawer.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Fullscreen
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-fullscreen</strong> is a small component that toggles the fullscreen on and off.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseFullscreen</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuse-fullscreen</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>iconTpl: TemplateRef<any></div>
|
||||
</td>
|
||||
<td>
|
||||
Template reference for the icon.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>tooltip: string</div>
|
||||
</td>
|
||||
<td>
|
||||
Tooltip of the toggle button.
|
||||
</td>
|
||||
<td>
|
||||
'Toggle Fullscreen'
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'fullscreen',
|
||||
templateUrl: './fullscreen.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class FullscreenComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Highlight
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-highlight</strong> is a syntax highlighter component to display syntax highlighted codes within the content. Internally, it uses <em>highlight.js</em>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseHighlight</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuse-highlight</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<div>Some HTML code to highlight</div>
|
||||
</textarea>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
<code>fuse-highlight</code> doesn't have its own selector and cannot be used like any other components. It must be used with a <code><textarea></code>.
|
||||
</p>
|
||||
<p>
|
||||
The main reason of this is that the Angular parses the templates before binding and running components. Because of this mechanic, anything you place into templates
|
||||
will be taken as a literal content and parsed by Angular. Only the contents of a <code><textarea></code> can be preserved as is.
|
||||
</p>
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>code: string</div>
|
||||
</td>
|
||||
<td>
|
||||
Piece of code to highlight. If <strong>code</strong> input is not provided, the actual content of the <strong>textarea</strong> will be used.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>lang: string</div>
|
||||
</td>
|
||||
<td>
|
||||
Which language to highlight the code. See:
|
||||
<a
|
||||
href="https://highlightjs.org/usage/"
|
||||
rel="noreferrer"
|
||||
target="_blank">https://highlightjs.org/usage/
|
||||
</a>
|
||||
for full list of supported languages.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Service</h2>
|
||||
<p>
|
||||
The <code>FuseHighlightService</code> can also be used to format and highlight code:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseHighlightService } from '@fuse/components/highlight';
|
||||
|
||||
code = '<div> Some code to highlight </div>'
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseHighlightService: FuseHighlightService)
|
||||
{
|
||||
const highlightedCode = this._fuseHighlightService.highlight(code, 'html');
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'highlight',
|
||||
templateUrl: './highlight.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class HighlightComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,334 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Components</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Masonry
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuse-masonry</strong> is a basic Masonry layout component to show items in Masonry grid layout. Since it doesn't use any other third party library or complex calculations to
|
||||
keep everything smooth and fast;
|
||||
</p>
|
||||
<ul>
|
||||
<li>It does NOT work with elements with different widths
|
||||
<li>It does NOT sort items based on their heights (This here is the real performance killer)</li>
|
||||
</ul>
|
||||
<p>
|
||||
If you don't need to mix and match different width items and don't need to sort items based on their heights, <strong>fuse-masonry</strong> will do the job for you and it will do it very smoothly.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseMasonry</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseMasonry } from '@fuse/components/masonry';
|
||||
</textarea>
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>columnsTemplate: TemplateRef</div>
|
||||
</td>
|
||||
<td>
|
||||
Column template for masonry component to lay out.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">undefined</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>columns: number</div>
|
||||
</td>
|
||||
<td>
|
||||
Number of columns to create
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">undefined</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>items: any[]</div>
|
||||
</td>
|
||||
<td>
|
||||
Items to distribute into columns
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">[]</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>This component doesn't have any public methods.</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
<strong>fuse-masonry</strong> doesn't provide a default template or styling to the items. You can think of it as a helper function but in a component form:
|
||||
</p>
|
||||
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<div class="bg-gray-100 p-4">
|
||||
<div class="mx-auto max-w-80">
|
||||
<fuse-masonry
|
||||
class="-mx-2"
|
||||
[items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
||||
[columns]="4"
|
||||
[columnsTemplate]="columnsTemplate">
|
||||
</fuse-masonry>
|
||||
<ng-template
|
||||
#columnsTemplate
|
||||
let-columns>
|
||||
<ng-container *ngFor="let column of columns">
|
||||
<!-- Column -->
|
||||
<div class="flex-1 mx-2 p-2 border rounded space-y-2">
|
||||
<ng-container *ngFor="let item of column.items">
|
||||
<!-- Item -->
|
||||
<div class="p-2 text-center rounded bg-primary text-on-primary">
|
||||
{{item}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<fuse-masonry
|
||||
class="-mx-2"
|
||||
[items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
||||
[columns]="4"
|
||||
[columnsTemplate]="columnsTemplate">
|
||||
</fuse-masonry>
|
||||
|
||||
<ng-template
|
||||
#columnsTemplate
|
||||
let-columns>
|
||||
<ng-container *ngFor="let column of columns">
|
||||
<!-- Column -->
|
||||
<div class="flex-1 mx-2 p-2 border rounded space-y-2">
|
||||
<ng-container *ngFor="let item of column.items">
|
||||
<!-- Item -->
|
||||
<div class="p-2 text-center rounded bg-primary text-on-primary">
|
||||
ITEM CONTENT
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Responsive</h3>
|
||||
<p>
|
||||
<strong>fuse-masonry</strong> doesn't provide a way of changing the column count depending on breakpoints but this can easily be handled by
|
||||
combining <code>fuse-masonry</code> with <code>FuseMediaWatcherService</code>:
|
||||
</p>
|
||||
|
||||
<div class="example-viewer">
|
||||
|
||||
<div class="title">
|
||||
<h6>Example</h6>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [animationDuration]="'0ms'">
|
||||
|
||||
<mat-tab label="Preview">
|
||||
|
||||
<ng-template matTabContent>
|
||||
|
||||
<div class="bg-gray-100 p-4">
|
||||
<div class="mx-auto max-w-80">
|
||||
|
||||
<fuse-masonry
|
||||
class="-mx-2"
|
||||
[items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
|
||||
[columns]="columns"
|
||||
[columnsTemplate]="columnsTemplate">
|
||||
</fuse-masonry>
|
||||
<ng-template
|
||||
#columnsTemplate
|
||||
let-columns>
|
||||
<ng-container *ngFor="let column of columns">
|
||||
<!-- Column -->
|
||||
<div class="flex-1 mx-2 p-2 border rounded space-y-2">
|
||||
<ng-container *ngFor="let item of column.items">
|
||||
<!-- Item -->
|
||||
<div class="p-2 text-center rounded bg-primary text-on-primary">
|
||||
{{item}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="HTML">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'html'">
|
||||
<fuse-masonry
|
||||
class="-mx-2"
|
||||
[items]="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
|
||||
[columns]="columns"
|
||||
[columnsTemplate]="columnsTemplate">
|
||||
</fuse-masonry>
|
||||
|
||||
<ng-template
|
||||
#columnsTemplate
|
||||
let-columns>
|
||||
<ng-container *ngFor="let column of columns">
|
||||
<!-- Column -->
|
||||
<div class="flex-1 mx-2 p-2 border rounded space-y-2">
|
||||
<ng-container *ngFor="let item of column.items">
|
||||
<!-- Item -->
|
||||
<div class="p-2 text-center rounded bg-primary text-on-primary">
|
||||
ITEM CONTENT
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="TypeScript">
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
[lang]="'ts'">
|
||||
columns: number = 4;
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the masonry columns
|
||||
//
|
||||
// This if block structured in a way so that only the
|
||||
// biggest matching alias will be used to set the column
|
||||
// count.
|
||||
if ( matchingAliases.includes('xl') )
|
||||
{
|
||||
this.columns = 5;
|
||||
}
|
||||
else if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.columns = 4;
|
||||
}
|
||||
else if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.columns = 3;
|
||||
}
|
||||
else if ( matchingAliases.includes('sm') )
|
||||
{
|
||||
this.columns = 2;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.columns = 1;
|
||||
}
|
||||
});
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,81 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
import { Subject } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector : 'masonry',
|
||||
templateUrl: './masonry.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class MasonryComponent implements OnInit
|
||||
{
|
||||
columns: number = 4;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _coreFeaturesComponent: CoreFeaturesComponent,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the masonry columns
|
||||
//
|
||||
// This if block structured in a way so that only the
|
||||
// biggest matching alias will be used to set the column
|
||||
// count.
|
||||
if ( matchingAliases.includes('xl') )
|
||||
{
|
||||
this.columns = 5;
|
||||
}
|
||||
else if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.columns = 4;
|
||||
}
|
||||
else if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.columns = 3;
|
||||
}
|
||||
else if ( matchingAliases.includes('sm') )
|
||||
{
|
||||
this.columns = 2;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.columns = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,184 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FuseNavigationItem, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'navigation',
|
||||
templateUrl: './navigation.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class NavigationComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _coreFeaturesComponent: CoreFeaturesComponent
|
||||
)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get navigation item
|
||||
*
|
||||
* @param itemId
|
||||
* @param navigationName
|
||||
*/
|
||||
getNavItem(itemId, navigationName): FuseNavigationItem | null
|
||||
{
|
||||
// Get the component -> navigation data -> item
|
||||
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);
|
||||
|
||||
// Return if the navigation component does not exist
|
||||
if ( !navComponent )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the navigation item
|
||||
const navigation = navComponent.navigation;
|
||||
const item = this._fuseNavigationService.getItem(itemId, navigation);
|
||||
console.log(item);
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update badge title
|
||||
*
|
||||
* @param itemId
|
||||
* @param navigationName
|
||||
* @param title
|
||||
*/
|
||||
updateBadgeTitle(itemId, navigationName, title): void
|
||||
{
|
||||
// Get the component -> navigation data -> item
|
||||
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);
|
||||
|
||||
// Return if the navigation component does not exist
|
||||
if ( !navComponent )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the navigation item, update the badge and refresh the component
|
||||
const navigation = navComponent.navigation;
|
||||
const item = this._fuseNavigationService.getItem(itemId, navigation);
|
||||
item.badge.title = title;
|
||||
navComponent.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle disabled status
|
||||
*
|
||||
* @param itemId
|
||||
* @param navigationName
|
||||
*/
|
||||
toggleDisabled(itemId, navigationName): void
|
||||
{
|
||||
// Get the component -> navigation data -> item
|
||||
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);
|
||||
|
||||
// Return if the navigation component does not exist
|
||||
if ( !navComponent )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
// Get the navigation item, update the badge and refresh the component
|
||||
const navigation = navComponent.navigation;
|
||||
const item = this._fuseNavigationService.getItem(itemId, navigation);
|
||||
item.disabled = !item.disabled;
|
||||
navComponent.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* Swap navigation data
|
||||
*
|
||||
* @param navigationName
|
||||
*/
|
||||
swapNavigationData(navigationName): void
|
||||
{
|
||||
// Get the component -> navigation data -> item
|
||||
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(navigationName);
|
||||
|
||||
// Return if the navigation component does not exist
|
||||
if ( !navComponent )
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
// A navigation data to replace with
|
||||
const newNavigation: FuseNavigationItem[] = [
|
||||
{
|
||||
id : 'supported-components',
|
||||
title : 'Supported components',
|
||||
subtitle: 'Compatible third party components',
|
||||
type : 'group',
|
||||
icon : 'memory',
|
||||
children: [
|
||||
{
|
||||
id : 'supported-components.apex-charts',
|
||||
title: 'ApexCharts',
|
||||
type : 'basic',
|
||||
icon : 'insert_chart',
|
||||
link : '/supported-components/apex-charts'
|
||||
},
|
||||
{
|
||||
id : 'supported-components.full-calendar',
|
||||
title: 'FullCalendar',
|
||||
type : 'basic',
|
||||
icon : 'today',
|
||||
link : '/supported-components/full-calendar'
|
||||
},
|
||||
{
|
||||
id : 'supported-components.google-maps',
|
||||
title: 'Google Maps',
|
||||
type : 'basic',
|
||||
icon : 'map',
|
||||
link : '/supported-components/google-maps'
|
||||
},
|
||||
{
|
||||
id : 'supported-components.ngx-markdown',
|
||||
title: 'ngx-markdown',
|
||||
type : 'basic',
|
||||
icon : 'text_format',
|
||||
link : '/supported-components/ngx-markdown'
|
||||
},
|
||||
{
|
||||
id : 'supported-components.quill-editor',
|
||||
title: 'Quill editor',
|
||||
type : 'basic',
|
||||
icon : 'font_download',
|
||||
link : '/supported-components/quill-editor'
|
||||
},
|
||||
{
|
||||
id : 'supported-components.youtube-player',
|
||||
title: 'Youtube player',
|
||||
type : 'basic',
|
||||
icon : 'play_circle_filled',
|
||||
link : '/supported-components/youtube-player'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Replace the navigation data
|
||||
navComponent.navigation = newNavigation;
|
||||
navComponent.refresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto h-full">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-60 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#matDrawer>
|
||||
<fuse-vertical-navigation
|
||||
[navigation]="menuData"
|
||||
[inner]="true"
|
||||
[mode]="'side'"
|
||||
[name]="'docs-core-features-navigation'"
|
||||
[opened]="true"></fuse-vertical-navigation>
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content
|
||||
class="flex flex-col"
|
||||
fuseScrollReset>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex-auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
core-features {
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,213 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject } from 'rxjs';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector : 'core-features',
|
||||
templateUrl : './core-features.component.html',
|
||||
styleUrls : ['./core-features.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class CoreFeaturesComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
|
||||
drawerMode: 'side' | 'over';
|
||||
drawerOpened: boolean;
|
||||
menuData: FuseNavigationItem[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
this.menuData = [
|
||||
{
|
||||
id : 'core-features.libraries',
|
||||
title : 'Libraries',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.libraries.mock-api',
|
||||
title: 'MockAPI',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/libraries/mock-api'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'core-features.components',
|
||||
title : 'Components',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.components.alert',
|
||||
title: 'Alert',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/alert'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.card',
|
||||
title: 'Card',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/card'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.date-range',
|
||||
title: 'DateRange',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/date-range'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.drawer',
|
||||
title: 'Drawer',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/drawer'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.fullscreen',
|
||||
title: 'Fullscreen',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/fullscreen'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.highlight',
|
||||
title: 'Highlight',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/highlight'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.masonry',
|
||||
title: 'Masonry',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/masonry'
|
||||
},
|
||||
{
|
||||
id : 'core-features.components.navigation',
|
||||
title: 'Navigation',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/components/navigation'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'core-features.directives',
|
||||
title : 'Directives',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.directives.scrollbar',
|
||||
title: 'Scrollbar',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/directives/scrollbar'
|
||||
},
|
||||
{
|
||||
id : 'core-features.directives.scroll-reset',
|
||||
title: 'ScrollReset',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/directives/scroll-reset'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'core-features.services',
|
||||
title : 'Services',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.services.config',
|
||||
title: 'Config',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/services/config'
|
||||
},
|
||||
{
|
||||
id : 'core-features.services.splash-screen',
|
||||
title: 'SplashScreen',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/services/splash-screen'
|
||||
},
|
||||
{
|
||||
id : 'core-features.services.media-watcher',
|
||||
title: 'MediaWatcher',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/services/media-watcher'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'core-features.pipes',
|
||||
title : 'Pipes',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.pipes.find-by-key',
|
||||
title: 'FindByKey',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/pipes/find-by-key'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'core-features.validators',
|
||||
title : 'Validators',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'core-features.validators.must-match',
|
||||
title: 'MustMatch',
|
||||
type : 'basic',
|
||||
link : '/docs/core-features/validators/must-match'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to media query change
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened
|
||||
if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTreeModule } from '@angular/material/tree';
|
||||
import { FuseCardModule } from '@fuse/components/card';
|
||||
import { FuseDateRangeModule } from '@fuse/components/date-range';
|
||||
import { FuseDrawerModule } from '@fuse/components/drawer';
|
||||
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||
import { FuseAlertModule } from '@fuse/components/alert';
|
||||
import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
|
||||
import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
|
||||
import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
|
||||
import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
|
||||
import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
|
||||
import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
|
||||
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
|
||||
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
|
||||
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
|
||||
import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
|
||||
import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
|
||||
import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
|
||||
import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
|
||||
import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
|
||||
import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
|
||||
import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.component';
|
||||
import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-features.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
CoreFeaturesComponent,
|
||||
MockApiComponent,
|
||||
AlertComponent,
|
||||
CardComponent,
|
||||
DateRangeComponent,
|
||||
DrawerComponent,
|
||||
FullscreenComponent,
|
||||
HighlightComponent,
|
||||
MasonryComponent,
|
||||
NavigationComponent,
|
||||
ScrollbarComponent,
|
||||
ScrollResetComponent,
|
||||
ConfigComponent,
|
||||
SplashScreenComponent,
|
||||
MediaWatcherComponent,
|
||||
FindByKeyComponent,
|
||||
MustMatchComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(coreFeaturesRoutes),
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatSidenavModule,
|
||||
MatTabsModule,
|
||||
MatTreeModule,
|
||||
FuseAlertModule,
|
||||
FuseCardModule,
|
||||
FuseDateRangeModule,
|
||||
FuseDrawerModule,
|
||||
FuseHighlightModule,
|
||||
FuseMasonryModule,
|
||||
FuseNavigationModule,
|
||||
FuseScrollResetModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class CoreFeaturesModule
|
||||
{
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
|
||||
import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
|
||||
import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
|
||||
import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
|
||||
import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
|
||||
import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
|
||||
import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
|
||||
import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
|
||||
import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
|
||||
import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
|
||||
import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
|
||||
import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
|
||||
import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
|
||||
import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
|
||||
import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
|
||||
import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.component';
|
||||
|
||||
export const coreFeaturesRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: CoreFeaturesComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'libraries/mock-api'
|
||||
},
|
||||
{
|
||||
path : 'libraries',
|
||||
children: [
|
||||
{
|
||||
path : 'mock-api',
|
||||
component: MockApiComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'components',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'alert'
|
||||
},
|
||||
{
|
||||
path : 'alert',
|
||||
component: AlertComponent
|
||||
},
|
||||
{
|
||||
path : 'card',
|
||||
component: CardComponent
|
||||
},
|
||||
{
|
||||
path : 'date-range',
|
||||
component: DateRangeComponent
|
||||
},
|
||||
{
|
||||
path : 'drawer',
|
||||
component: DrawerComponent
|
||||
},
|
||||
{
|
||||
path : 'fullscreen',
|
||||
component: FullscreenComponent
|
||||
},
|
||||
{
|
||||
path : 'highlight',
|
||||
component: HighlightComponent
|
||||
},
|
||||
{
|
||||
path : 'masonry',
|
||||
component: MasonryComponent
|
||||
},
|
||||
{
|
||||
path : 'navigation',
|
||||
component: NavigationComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'directives',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'scrollbar'
|
||||
},
|
||||
{
|
||||
path : 'scrollbar',
|
||||
component: ScrollbarComponent
|
||||
},
|
||||
{
|
||||
path : 'scroll-reset',
|
||||
component: ScrollResetComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'services',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'config'
|
||||
},
|
||||
{
|
||||
path : 'config',
|
||||
component: ConfigComponent
|
||||
},
|
||||
{
|
||||
path : 'splash-screen',
|
||||
component: SplashScreenComponent
|
||||
},
|
||||
{
|
||||
path : 'media-watcher',
|
||||
component: MediaWatcherComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'pipes',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'find-by-key'
|
||||
},
|
||||
{
|
||||
path : 'find-by-key',
|
||||
component: FindByKeyComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'validators',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'must-match'
|
||||
},
|
||||
{
|
||||
path : 'must-match',
|
||||
component: MustMatchComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,88 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Directives</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
ScrollReset
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuseScrollReset</strong> is a helper directive to reset the given element's scroll position to the top on route changes.
|
||||
</p>
|
||||
<p>
|
||||
This directive is especially useful in situations like having a <code>router-outlet</code> inside a scrollable area such as
|
||||
<code>mat-drawer-content</code>, <code>mat-sidenav-content</code> or a custom scrollable element.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseScrollReset</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here are some of the basic usages of the <code>fuseScrollReset</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<mat-drawer-content fuseScrollReset>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-drawer-content>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea class="mt-8"
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<div class="mail">
|
||||
<div
|
||||
class="threads"
|
||||
fuseScrollReset>
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'scroll-reset',
|
||||
templateUrl: './scroll-reset.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class ScrollResetComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,255 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Directives</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Scrollbar
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuseScrollbar</strong> is a wrapper directive for
|
||||
<a
|
||||
href="https://github.com/mdbootstrap/perfect-scrollbar"
|
||||
rel="noreferrer"
|
||||
target="_blank">Perfect Scrollbar
|
||||
</a>
|
||||
plugin.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Exported as: </strong><code>fuseScrollbar</code>
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the <code>fuseScrollbar</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<div fuseScrollbar
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}">
|
||||
A very long content to add scrollbars.
|
||||
</div>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>fuseScrollbar: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to enable or disable the custom scrollbars.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">''</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>fuseScrollbarOptions: any</div>
|
||||
</td>
|
||||
<td>
|
||||
Perfect Scrollbar options
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">{{'{}'}}</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
It's possible to access the methods of this directive using a <em>@ViewChild</em> or <em>@ViewChildren</em>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<!-- Content #1 with custom scrollbar -->
|
||||
<div fuseScrollbar>
|
||||
A very long content to add scrollbars.
|
||||
</div>
|
||||
|
||||
<!-- Content #2 with custom scrollbar -->
|
||||
<div fuseScrollbar>
|
||||
Another long content to add scrollbars.
|
||||
</div>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
|
||||
|
||||
@ViewChildren(FuseScrollbarDirective)
|
||||
private _fuseScrollbarDirectives: QueryList<FuseScrollbarDirective>
|
||||
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// Iterate through the directives and update all of them
|
||||
fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
|
||||
fuseScrollbarDirective.update();
|
||||
});
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<p>
|
||||
Here's the list of all available methods:
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
update(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Updates the scrollbar.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
destroy(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Destroy the custom scrollbar instance.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
geometry(prefix: string = 'scroll'): ScrollbarGeometry
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Returns the geometry of the scrollable element (scrollLeft, scrollTop, scrollHeight, scrollWidth etc.)
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
position(absolute: boolean = false): ScrollbarPosition
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Returns the position of the scrollable element (scrollLeft, scrollTop)
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollTo(x: number, y?: number, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to given position.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToX(x: number, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to given position on X axis.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToY(y: number, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to given position on Y axis.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToTop(offset: number = 0, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to top.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToBottom(offset: number = 0, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to bottom.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToLeft(offset: number = 0, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to left.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToRight(offset: number = 0, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to right.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Scrolls to found element based on the given <strong>QuerySelector</strong>. If <code>ignoreVisible</code> is <strong>true</strong> then scroll won't
|
||||
be triggered if the element is already inside the current viewport.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'scrollbar',
|
||||
templateUrl: './scrollbar.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class ScrollbarComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,496 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Libraries</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Mock API
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>MockAPI</strong> is a helper library developed specifically for Fuse to mock API endpoints and provide data to your app without having to create an
|
||||
actual backend application. This way, you can focus on your frontend app and once you finish with the frontend, you can create your backend application to provide
|
||||
real API endpoints with real data.
|
||||
</p>
|
||||
<p>
|
||||
This not only makes you progress faster and put together your app very quickly but you will also know exactly what you will be needing from your API.
|
||||
</p>
|
||||
<p>
|
||||
While <strong>MockAPI</strong> is not suitable for every use case or for every project, there are some cases that using it would make your life easier. These cases
|
||||
are but not limited to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>If you want to focus on the frontend first</li>
|
||||
<li>If you want to create a mockup of your idea to see if it's going to work or not</li>
|
||||
<li>If you want to create a small side project for yourself or for your colleagues/company</li>
|
||||
<li>If you need to present your idea to your client or to your boss without spending many hours and resources</li>
|
||||
</ul>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
[type]="'warning'">
|
||||
MockAPI is NOT a database or a backend replacement! It works on memory. As soon as you reload your app, all the changes you have made using Mock
|
||||
API endpoints will go away and replaced with defaults.
|
||||
</fuse-alert>
|
||||
|
||||
<h2>How it works?</h2>
|
||||
<p>
|
||||
<strong>MockAPI</strong> module provides an <em>HttpInterceptor</em> which intercepts all outgoing http requests to return a mock response based on user provided
|
||||
callback functions. While it intercepts all requests, if the <strong>MockAPI</strong> module cannot find a callback function for the request type and url, it will
|
||||
let the request to pass through. This way, you can use the <strong>MockAPI</strong> along with your real API endpoints.
|
||||
</p>
|
||||
|
||||
<h2>FuseMockApiService</h2>
|
||||
<p>
|
||||
The <code>FuseMockApiService</code> is the core of the <em>MockAPI</em> module. This singleton service is used to register API endpoints and callbacks. This is the
|
||||
only thing you will need to mock API endpoints.
|
||||
</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<p>
|
||||
All methods return an instance of <code>FuseMockApiHandler</code>.
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.onGet(url: string, delay?: number): FuseMockApiHandler
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Registers a url for <em>GET</em> requests. <em>Delay (milliseconds)</em> can be set to delay the response.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.onPatch(url: string, delay?: number): FuseMockApiHandler
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Registers a url for <em>PATCH</em> requests. <em>Delay (milliseconds)</em> can be set to delay the response.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.onPost(url: string, delay?: number): FuseMockApiHandler
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Registers a url for <em>POST</em> requests. <em>Delay (milliseconds)</em> can be set to delay the response.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.onPut(url: string, delay?: number): FuseMockApiHandler
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Registers a url for <em>PUT</em> requests. <em>Delay (milliseconds)</em> can be set to delay the response.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.onDelete(url: string, delay?: number): FuseMockApiHandler
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Registers a url for <em>DELETE</em> requests. <em>Delay (milliseconds)</em> can be set to delay the response.
|
||||
</div>
|
||||
</div>
|
||||
<h3>FuseMockApiHandler</h3>
|
||||
<p>
|
||||
This is the return type of all methods from the service. This class instance is not directly accessible. It can only be accessed through the
|
||||
<code>FuseMockApiService</code> allowing method chaining. It has 2 methods:
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4 mb-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.reply(callback: FuseMockApiReplyCallback): void
|
||||
</div>
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
.replyCount(count: number): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p>
|
||||
These methods can be used to register the callback function for the request. The <em>callback</em> has an access to the outgoing <em>HttpRequest</em> which
|
||||
can be used to access anything from the request such as form data and headers.
|
||||
</p>
|
||||
<p>
|
||||
You can limit the reply by chaining the <code>.replyCount</code> and providing the number of times this request should be handled. After the
|
||||
limit has reached, the request handler will throw an error and won't let the request to pass through. It can be useful for creating one-time-use
|
||||
endpoints to test "Reset Password" links or testing an unreachable API endpoints and etc.
|
||||
</p>
|
||||
<p>
|
||||
The callbacks must return either an array <code>[number, any | string]</code> or an observable that returns the said array. The <code>number</code>
|
||||
represents the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes"
|
||||
rel="noreferrer"
|
||||
target="_blank">HTTP status code
|
||||
</a>
|
||||
of the response while the <code>any | string</code> represents the actual response.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Basic usage</h3>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
this.fuseMockApiService
|
||||
.onPut('api/navigation')
|
||||
.reply(({request: HttpRequest<any>}) => {
|
||||
|
||||
// Get the body from the request
|
||||
const body = request.body;
|
||||
|
||||
// Do something with your data
|
||||
|
||||
// Return a success code along with some data
|
||||
return [200, { newNavigation }];
|
||||
})
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
this.fuseMockApiService
|
||||
.onGet('api/navigation')
|
||||
.reply(() => {
|
||||
|
||||
// Do something with your data
|
||||
|
||||
// Return an observable with success code and data
|
||||
return of(someFunctionToCall()).pipe(map((response) => {
|
||||
|
||||
// Do some stuff with the response from 'someFunctionToCall()'
|
||||
|
||||
// Return a success code along with some data
|
||||
return [200, { newNavigation }];
|
||||
});
|
||||
});
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Step by step guide to start using FuseMockApi</h2>
|
||||
<p>
|
||||
It's pretty easy and straightforward to setup the <strong>MockAPI</strong> module for mocking API endpoints and their responses. Once you understand the underlying
|
||||
mechanic, you will be able to mock API endpoints in no time.
|
||||
</p>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
Please keep in mind that the following step-by-step guide assumes you are doing everything from scratch for the <em>MockAPI</em> like creating directories, adding
|
||||
files, exporting via barrels etc. Majority of these already setup in both Demo and Starter apps for you so it's a bit easier to start working with the
|
||||
<em>MockAPI</em>.
|
||||
</fuse-alert>
|
||||
|
||||
<h3>1. Prepare the files</h3>
|
||||
<p>
|
||||
Choose a location to store your mocks. By default the Demo app uses <code>src/app/mock-api/</code> directory. You can use the same directory or choose another one.
|
||||
For this guide, we will assume you are going to use the default directory.
|
||||
</p>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
It's important to keep all mock related files in the same directory because we will create a barrel file that exports all the mock classes and provide that to the
|
||||
<code>FuseMockApiModule</code> so it can register and use them.
|
||||
</fuse-alert>
|
||||
<p>
|
||||
After choosing the location, create a sub-directory relevant to your endpoint and create 2 files in it; one for the mock class and one for the data json:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<p class="bg-card p-6 mt-6 rounded shadow font-mono text-secondary">
|
||||
src/app/mock-api/<br>
|
||||
└─ navigation/<br>
|
||||
└─ data.ts<br>
|
||||
└─ api.ts
|
||||
</p>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>2. Create the class</h3>
|
||||
<p>
|
||||
Edit the <code>api.ts</code> file and inside create an injectable class.
|
||||
</p>
|
||||
<p>
|
||||
The <code>FuseMockApi</code> requires one public method called <code>registerHandlers()</code> and it must be implemented. It also needs to be called within the
|
||||
<code>constructor</code> of your mock class:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavigationMockApi
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMockApiService: FuseMockApiService)
|
||||
{
|
||||
// Register Mock API handlers
|
||||
this.registerHandlers();
|
||||
}
|
||||
|
||||
/**
|
||||
* Register Mock API handlers
|
||||
*/
|
||||
registerHandlers(): void
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>3. Create the data</h3>
|
||||
<p>
|
||||
Edit the <code>data.ts</code> file and add your default data as an <strong>exported const</strong> value. You can have more than one <code>const</code> per file,
|
||||
just remember to export all of them:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
// An array of navigation items for compact layout
|
||||
export const compactNavigation = [ ]
|
||||
|
||||
// An array of navigation items for default layout
|
||||
export const defaultNavigation = [ ]
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>3. Import the data into the Mock class</h3>
|
||||
<p>
|
||||
Return back to <code>api.ts</code> file, import your data and set them as class properties so they can be accessible within the class:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api';
|
||||
import { compactNavigation, defaultNavigation } from 'app/mock-api/navigation/data';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavigationMockApi
|
||||
{
|
||||
private readonly _compactNavigation: any[];
|
||||
private readonly _defaultNavigation: any[];
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMockApiService: FuseMockApiService)
|
||||
{
|
||||
// Set the data
|
||||
this._compactNavigation = compactNavigation;
|
||||
this._defaultNavigation = defaultNavigation;
|
||||
|
||||
// Register Mock API handlers
|
||||
this.registerHandlers();
|
||||
}
|
||||
|
||||
/**
|
||||
* Register Mock API handlers
|
||||
*/
|
||||
registerHandlers(): void
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>4. Register the endpoints and callbacks</h3>
|
||||
<p>
|
||||
Inside the <code>registerHandlers()</code> method, define your endpoints and callbacks to provide data:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { Injectable } from '@angular/core';
|
||||
import { cloneDeep } 'lodash-es';
|
||||
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
|
||||
import { compactNavigation, defaultNavigation } from 'app/mock-api/navigation/data';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavigationMockApi
|
||||
{
|
||||
...
|
||||
|
||||
/**
|
||||
* Register Mock API handlers
|
||||
*/
|
||||
registerHandlers(): void
|
||||
{
|
||||
// Navigation - GET
|
||||
this._fuseMockApiService
|
||||
.onGet('api/navigation')
|
||||
.reply(() => {
|
||||
|
||||
// Clone the data to preserve the originals
|
||||
const compactNavigation = cloneDeep(this._compactNavigation);
|
||||
const defaultNavigation = cloneDeep(this._defaultNavigation);
|
||||
|
||||
// Do some stuff with your data
|
||||
|
||||
// Return
|
||||
return [200, {
|
||||
compact: compactNavigation,
|
||||
default: defaultNavigation,
|
||||
}];
|
||||
})
|
||||
|
||||
// Navigation - PUT
|
||||
this._fuseMockApiService
|
||||
.onPut('api/navigation')
|
||||
.reply(({request}) => {
|
||||
|
||||
// Save the new navigation item
|
||||
const newNavigationItem = cloneDeep(request.body.navigationItem);
|
||||
newNavigationItem.id = FuseMockApiUtils.guid();
|
||||
this._defaultNavigation.unshift(newNavigationItem);
|
||||
|
||||
// Return
|
||||
return [200, newNavigationItem];
|
||||
});
|
||||
}
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>5. Create a barrel file and import FuseMockApiModule</h3>
|
||||
<p>
|
||||
Navigate back to the root of your mock data directory, by default it's the <code>src/app/mock-api/</code> directory, and create an <strong>index.ts</strong> file.
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<p class="bg-card p-6 mt-6 rounded shadow font-mono text-secondary">
|
||||
src/app/mock-api/<br>
|
||||
└─ auth/<br>
|
||||
└─ navigation/<br>
|
||||
└─ user/<br>
|
||||
└─ <strong>index.ts</strong><br>
|
||||
</p>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
Edit the <code>index.ts</code> file to create a barrel from the services. Only import the services and not the data files, create an array from them and then export
|
||||
that array:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { AuthMockApi } from 'app/mock-api/auth';
|
||||
import { NavigationMockApi } from 'app/mock-api/navigation';
|
||||
import { UserMockApi } from 'app/mock-api/user';
|
||||
|
||||
export const mockApiServices = [
|
||||
AuthMockApi,
|
||||
NavigationMockApi,
|
||||
UserMockApi
|
||||
];
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
After that, head to the <code>app.module.ts</code> file, import the <code>FuseMockApiModule</code> and supply the array of services you have exported:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
...
|
||||
import { FuseMockApiModule } from '@fuse/lib/mock-api';
|
||||
import { mockApiServices } from 'app/mock-api';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports : [
|
||||
...
|
||||
FuseMockApiModule.forRoot(mockApiServices),
|
||||
...
|
||||
]
|
||||
})
|
||||
...
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>6. (Optional) Set a global delay</h3>
|
||||
<p>
|
||||
You can also set a global delay (ms) to all of your Mock API endpoints to simulate a slow connection, a server that's under attack or failing, some kind
|
||||
of service interruption and etc.
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
...
|
||||
import { FuseMockApiModule } from '@fuse/lib/mock-api';
|
||||
import { mockApiServices } from 'app/mock-api';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports : [
|
||||
...
|
||||
FuseMockApiModule.forRoot(mockApiServices, {delay: 2500}),
|
||||
...
|
||||
]
|
||||
})
|
||||
...
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>7. Consume the mock API endpoints</h3>
|
||||
<p>
|
||||
Now you can consume your mock API endpoints anywhere from your app using Angular's <em>HttpClient</em> and the <strong>MockAPI</strong> module will catch the
|
||||
requests. If there is a matching url and a request type, the <strong>MockAPI</strong> will provide the response from the provided callback. If there isn't one, then
|
||||
the <strong>MockAPI</strong> will let the request to pass through allowing you to use a real API endpoints along with the mocked ones.
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
/**
|
||||
* Get navigation
|
||||
*/
|
||||
getNavigation(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<any[]>('api/navigation').pipe(
|
||||
tap((response: any) => {
|
||||
this._navigation.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'mock-api',
|
||||
templateUrl: './mock-api.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class MockApiComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,197 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Pipes</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
findByKey
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>fuseFindByKey</strong> is a helper pipe that finds entries from an object using given key-source set.
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipe/find-by-key';
|
||||
</textarea>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
value | fuseFindByKey:key:source
|
||||
</textarea>
|
||||
<p>
|
||||
Consider this array of objects representing the <em>tags</em> and <em>tasks</em> data stored on the backend:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
const tags = [
|
||||
{
|
||||
id : 'tag-00',
|
||||
title: 'Api',
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
id : 'tag-01',
|
||||
title: 'Frontend',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
id : 'tag-02',
|
||||
title: 'Bug',
|
||||
color: 'green'
|
||||
}
|
||||
];
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
id : 'task-00',
|
||||
title: 'Company internal application v2.0.0',
|
||||
tags : [
|
||||
'tag-00',
|
||||
'tag-01'
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'task-01',
|
||||
title: 'Create the landing/marketing page and host it on the beta channel',
|
||||
tags : [
|
||||
'tag-02'
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'task-01',
|
||||
title: 'Move dependency system to Yarn for easier package management',
|
||||
tags : [
|
||||
'tag-00',
|
||||
'tag-01',
|
||||
'tag-02'
|
||||
]
|
||||
}
|
||||
]
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
Normally, you would <em>join</em> these two data together in the backend before sending it to the frontend so you can access tags of a task right from the task
|
||||
itself:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
const tasksWithTags = [
|
||||
{
|
||||
id : 'task-00',
|
||||
title: 'Company internal application v2.0.0',
|
||||
tags : [
|
||||
{
|
||||
id : 'tag-00',
|
||||
title: 'Api',
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
id : 'tag-01',
|
||||
title: 'Frontend',
|
||||
color: 'blue'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'task-01',
|
||||
title: 'Create the landing/marketing page and host it on the beta channel',
|
||||
tags : [
|
||||
{
|
||||
id : 'tag-02',
|
||||
title: 'Bug',
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'task-01',
|
||||
title: 'Move dependency system to Yarn for easier package management',
|
||||
tags : [
|
||||
{
|
||||
id : 'tag-00',
|
||||
title: 'Api',
|
||||
color: 'red'
|
||||
},
|
||||
{
|
||||
id : 'tag-01',
|
||||
title: 'Frontend',
|
||||
color: 'blue'
|
||||
},
|
||||
{
|
||||
id : 'tag-02',
|
||||
title: 'Bug',
|
||||
color: 'green'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
But, let's say you cannot <em>join</em> them. You have no access to the backend app or you cannot make any changes to it and you have to work with what you have. In
|
||||
this case, you can use the <code>fuseFindByKey</code> pipe to get the tags of a task without joining the two data using javascript:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<!-- Iterate through the tasks -->
|
||||
<ng-container *ngFor="let task of tasks">
|
||||
|
||||
<!-- Iterate through the tags of the task but rather than returning
|
||||
the tag id, use that id to find the actual tag object from 'tags'
|
||||
so we can access the properties like title and color of the tag -->
|
||||
<ng-container *ngFor="let tag of (task.tags | fuseFindByKey:'id':tags);">
|
||||
<div>{{'{'}}{{'{'}}tag.title{{'}'}}{{'}'}}</div>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
The above code will iterate through the tasks, and for each task, it will also iterate the task's tags.
|
||||
</p>
|
||||
<p>
|
||||
<code>task.tags</code> array normally holds the <em>ids</em> of the assigned tags. But using <code>fuseFindByKey</code> pipe, we can use those <em>ids</em> to
|
||||
extract the actual tag object from the <em>tags</em> array.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'find-by-key',
|
||||
templateUrl: './find-by-key.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class FindByKeyComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Services</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Config
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>FuseConfigService</strong> is a singleton service to store and access an application wide configuration object. It can be used to store any kind of data and
|
||||
can be accessed from anywhere within your application.
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseConfigModule } from '@fuse/services/config';
|
||||
</textarea>
|
||||
|
||||
<h2>Default configuration</h2>
|
||||
<p>
|
||||
By default, the application wide configuration is stored in <code>src/app/core/config/app.config.ts</code> file and it includes the <strong>layout style</strong> as
|
||||
well as the <strong>color theme</strong> configurations:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { Layout } from 'app/layout/layout.types';
|
||||
|
||||
// Types
|
||||
export type Scheme = 'auto' | 'dark' | 'light';
|
||||
export type Theme = 'default' | string;
|
||||
|
||||
/**
|
||||
* AppConfig interface. Update this interface to strictly type your config
|
||||
* object.
|
||||
*/
|
||||
export interface AppConfig
|
||||
{
|
||||
layout: Layout;
|
||||
scheme: Scheme;
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default configuration for the entire application. This object is used by
|
||||
* FuseConfigService to set the default configuration.
|
||||
*
|
||||
* If you need to store global configuration for your app, you can use this
|
||||
* object to set the defaults. To access, update and reset the config, use
|
||||
* FuseConfigService and its methods.
|
||||
*/
|
||||
export const appConfig: AppConfig = {
|
||||
layout: 'classy',
|
||||
scheme: 'light',
|
||||
theme : 'default'
|
||||
};
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
The default configuration is supplied to the <strong>FuseConfigService</strong> using the <code>FuseConfigModule.forRoot()</code> in <strong>AppModule</strong>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { appConfig } from 'app/core/config/app.config';
|
||||
|
||||
...
|
||||
|
||||
imports: [
|
||||
FuseConfigModule.forRoot(appConfig)
|
||||
...
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
To set a configuration use <code>config</code> setter on <strong>FuseConfigService</strong>. The setter will intelligently merge the configuration by replacing only
|
||||
the given options if they exist while preserving others. If the supplied option does not exist on the configuration, it will be added:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseConfigService: FuseConfigService)
|
||||
{
|
||||
this._fuseConfigService.config = {layout: 'classy'};
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
To get the configuration use <code>config$</code> getter on <strong>FuseConfigService</strong> which returns an <code>Observable</code> of the configuration object:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
import { FuseConfigService } from '@fuse/services/config';
|
||||
import { AppConfig } from 'app/core/config/app.config';
|
||||
|
||||
config: AppConfig;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseConfigService: FuseConfigService)
|
||||
{
|
||||
this._fuseConfigService.config$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config: AppConfig) => {
|
||||
this.config = config;
|
||||
}
|
||||
});
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'config',
|
||||
templateUrl: './config.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class ConfigComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Services</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Media Watcher
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>FuseMediaWatcherService</strong> is a singleton service to watch media changes. It automatically registers the breakpoints from TailwindCSS configuration, so
|
||||
you can use the service without needing to configure it first.
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher';
|
||||
</textarea>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<p>
|
||||
To watch changes on registered breakpoints, you can use the <strong>onMediaChange$</strong> getter:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
import { FuseMediaWatcherService } from '@fuse/services/config';
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Check if the breakpoint is 'md' and up
|
||||
this.isScreenSmall = matchingAliases.includes('md');
|
||||
});
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
You can also listen for custom media queries using <code>onMediaQueryChange$(query: string)</code> method:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight lang="typescript">
|
||||
import { FuseMediaWatcherService } from '@fuse/services/config';
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((state) => {
|
||||
|
||||
// Calculate the drawer mode
|
||||
this.drawerMode = state.matches ? 'side' : 'over';
|
||||
});
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'media-watcher',
|
||||
templateUrl: './media-watcher.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class MediaWatcherComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Services</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Splash Screen
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<strong>FuseSplashScreenService</strong> is a singleton service to control the splash screen. By default, the splash screen goes away automatically as soon as
|
||||
Angular loads for the first time but, you can still show or hide it using the service afterwards.
|
||||
</p>
|
||||
|
||||
<h2>Module</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseSplashScreenModule } from '@fuse/services/splash-screen';
|
||||
</textarea>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
show(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Shows the splash screen.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
hide(): void
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Hides the splash screen.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'splash-screen',
|
||||
templateUrl: './splash-screen.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class SplashScreenComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Core Features</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Validators</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
mustMatch
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
The <code>mustMatch</code> validator can be used to check if two different form fields has the same value. For example, a <strong>Confirm password</strong> should
|
||||
have the same value with the <strong>Password</strong> field. To validate that, the <code>mustMatch</code> validator can be used.
|
||||
</p>
|
||||
|
||||
<h3>Usage</h3>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
FuseValidators.mustMatch(controlPath, matchingControlPath)
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<h3>Parameters</h3>
|
||||
<div class="bg-card py-3 px-6 mb-4 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>controlPath: string</div>
|
||||
</td>
|
||||
<td>
|
||||
A dot-delimited string values that define the path to the control.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>matchingControlPath: string</div>
|
||||
</td>
|
||||
<td>
|
||||
A dot-delimited string values that define the path to the matching control.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
Because the <code>mustMatch</code> validator requires parameters, it must be used within the <code>validators</code> option of the form builder:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
import { FuseValidators } from '@fuse/validators';
|
||||
|
||||
// Create the reset password form
|
||||
this.resetPasswordForm = this._formBuilder.group(
|
||||
{
|
||||
password : ['', Validators.required],
|
||||
passwordConfirm: ['', Validators.required]
|
||||
},
|
||||
{
|
||||
validators: FuseValidators.mustMatch('password', 'passwordConfirm')
|
||||
}
|
||||
);
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<p>
|
||||
To show an error message on the field, the <code>mat-error</code> element can be used within the <code>mat-form-field</code>:
|
||||
</p>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="html">
|
||||
<mat-error *ngIf="resetPasswordForm.get('passwordConfirm').hasError('mustMatch')">
|
||||
Passwords must match
|
||||
</mat-error>
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
|
||||
|
||||
@Component({
|
||||
selector : 'must-match',
|
||||
templateUrl: './must-match.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class MustMatchComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._coreFeaturesComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -51,8 +51,8 @@
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
More detailed information about <code>FuseConfigService</code> can be found in the
|
||||
<a [routerLink]="['../../../core-features/services/config']">Core features > Services >
|
||||
Config
|
||||
<a [routerLink]="['/ui/fuse-components/services/config']">
|
||||
Fuse Components > Services > Config
|
||||
</a>
|
||||
section of this documentation.
|
||||
</fuse-alert>
|
||||
|
||||
@@ -195,7 +195,7 @@
|
||||
<p>
|
||||
This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found
|
||||
in the
|
||||
<a [routerLink]="['../../../core-features/libraries/mock-api']">Core features > Libraries > MockAPI</a>
|
||||
<a [routerLink]="['/ui/fuse-components/libraries/mock-api']">Fuse Components > Libraries > MockAPI</a>
|
||||
section of this documentation.
|
||||
</p>
|
||||
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Languages
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used for changing the language and managing the side effects of changing the active language such as updating the navigation.
|
||||
</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the component:
|
||||
</p>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<language></language>
|
||||
</textarea>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'languages',
|
||||
templateUrl: './languages.component.html'
|
||||
})
|
||||
export class LanguagesComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Messages
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used to show latest messages in a custom made panel. These messages can be either system wide messages or messages that sent to the currently
|
||||
logged in user from other users.
|
||||
</p>
|
||||
<p>
|
||||
It has some basic features including
|
||||
</p>
|
||||
<ul>
|
||||
<li>marking all messages as read</li>
|
||||
<li>marking individual messages as read</li>
|
||||
<li>removing individual messages from the list</li>
|
||||
</ul>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<messages></messages>
|
||||
</textarea>
|
||||
|
||||
<h2>Message</h2>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
export interface Message
|
||||
{
|
||||
id: string;
|
||||
icon?: string;
|
||||
image?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
time: string;
|
||||
link?: string;
|
||||
useRouter?: boolean;
|
||||
read: boolean;
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<div class="bg-card py-3 px-6 mt-2 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>id</div>
|
||||
</td>
|
||||
<td>
|
||||
Unique id of the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>icon</div>
|
||||
</td>
|
||||
<td>
|
||||
Icon name for the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>image</div>
|
||||
</td>
|
||||
<td>
|
||||
Image for the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>title</div>
|
||||
</td>
|
||||
<td>
|
||||
Title of the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>description</div>
|
||||
</td>
|
||||
<td>
|
||||
Description of the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>time</div>
|
||||
</td>
|
||||
<td>
|
||||
String representation of the time of the message (like ISO string).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>link</div>
|
||||
</td>
|
||||
<td>
|
||||
Link of the message.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>useRouter</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to use the Router to parse the link.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>read</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the message marked as read.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Messages Service</h2>
|
||||
<p>
|
||||
The <code>MessagesService</code> can be used to control the messages outside of the <strong>Messages</strong> component. This is particularly useful to control the
|
||||
messages from other components for actions like creating, updating or deleting them.
|
||||
</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<p>
|
||||
Here's the list of all available methods from <code>MessagesService</code>:
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
messages$: Observable<Message[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Getter for messages.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
getAll(): Observable<Message[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Get all messages from the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
create(message: Message): Observable<Message>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Create a new message on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
update(id: string, message: Message): Observable<Message>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Update the message on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
delete(id: string): Observable<boolean>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Delete the message on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
markAllAsRead(): Observable<boolean>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Mark all messages as read.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'messages',
|
||||
templateUrl: './messages.component.html',
|
||||
})
|
||||
export class MessagesComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Notifications
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used to show latest notifications in a custom made panel. These notifications can be either system wide or applications that sent to the
|
||||
currently logged in user from other users.
|
||||
</p>
|
||||
<p>
|
||||
It has some basic features including
|
||||
</p>
|
||||
<ul>
|
||||
<li>marking all notification as read</li>
|
||||
<li>marking individual notifications as read</li>
|
||||
<li>removing individual notifications from the list</li>
|
||||
</ul>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<notifications></notifications>
|
||||
</textarea>
|
||||
|
||||
<h2>Notification</h2>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
export interface Notification
|
||||
{
|
||||
id: string;
|
||||
icon?: string;
|
||||
image?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
time: string;
|
||||
link?: string;
|
||||
useRouter?: boolean;
|
||||
read: boolean;
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<div class="bg-card py-3 px-6 mt-2 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>id</div>
|
||||
</td>
|
||||
<td>
|
||||
Unique id of the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>icon</div>
|
||||
</td>
|
||||
<td>
|
||||
Icon name for the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>image</div>
|
||||
</td>
|
||||
<td>
|
||||
Image for the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>title</div>
|
||||
</td>
|
||||
<td>
|
||||
Title of the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>description</div>
|
||||
</td>
|
||||
<td>
|
||||
Description of the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>time</div>
|
||||
</td>
|
||||
<td>
|
||||
String representation of the time of the notification (like ISO string).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>link</div>
|
||||
</td>
|
||||
<td>
|
||||
Link of the notification.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>useRouter</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to use the Router to parse the link.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>read</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether the notification marked as read.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Notifications Service</h2>
|
||||
<p>
|
||||
The <code>NotificationsService</code> can be used to control the notifications outside of the <strong>Notifications</strong> component. This is particularly useful
|
||||
to control the notifications from other components for actions like creating, updating or deleting them.
|
||||
</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<p>
|
||||
Here's the list of all available methods from <code>NotificationsService</code>:
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
notifications$: Observable<Notification[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Getter for notifications.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
getAll(): Observable<Notification[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Get all notifications from the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
create(notification: Notification): Observable<Notification>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Create a new notification on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
update(id: string, notification: Notification): Observable<Notification>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Update the notification on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
delete(id: string): Observable<boolean>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Delete the notification on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
markAllAsRead(): Observable<boolean>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Mark all notifications as read.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'notifications',
|
||||
templateUrl: './notifications.component.html',
|
||||
})
|
||||
export class NotificationsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Overview
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
Common components are custom made components that could require heavy modifications depending on the project. These components are mostly related with the layout
|
||||
therefore they are located in the <code>src/app/layout/common/</code> directory. You can modify them without touching the <code>@fuse</code> directory.
|
||||
</p>
|
||||
<fuse-alert
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
These components are not very complex and they only provide some basic features. If you wish them to do more, you have to customize them, and that's exactly why
|
||||
they are not located in the <code>@fuse</code> directory like other components.
|
||||
</fuse-alert>
|
||||
<fuse-alert
|
||||
class="mt-4"
|
||||
[appearance]="'border'"
|
||||
[type]="'info'">
|
||||
We may add more features and more custom components in the future if they will be beneficial for everyone. Components that are too specific to a project won't be
|
||||
included as custom components into Fuse!
|
||||
</fuse-alert>
|
||||
<p>
|
||||
Currently, there are five common components;
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Messages</strong></p>
|
||||
<p>A panel to show latest messages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Notifications</strong></p>
|
||||
<p>A panel to show latest notifications.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Search</strong></p>
|
||||
<p>An autocomplete search box with proper API endpoint setup.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Shortcuts</strong></p>
|
||||
<p>A user customizable panel to show shortcuts to internal/external pages.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>User</strong></p>
|
||||
<p>A user avatar and menu component to show user related information and actions.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'overview',
|
||||
templateUrl: './overview.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class OverviewComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Search
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used for searching. It will make API calls as you start typing the search query into the search field and show the results in the
|
||||
<em>Autocomplete</em> panel.
|
||||
</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the component:
|
||||
</p>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<search [appearance]="'bar'"></search>
|
||||
</textarea>
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>appearance: 'basic' | 'bar'</div>
|
||||
</td>
|
||||
<td>
|
||||
Appearance of the search. <strong>basic</strong> will show a simple search field. <strong>bar</strong> will show a dropdown bar that covers the
|
||||
header.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">bar</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>debounce: number</div>
|
||||
</td>
|
||||
<td>
|
||||
Number of milliseconds to debounce the API calls.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">300</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>minLength: number</div>
|
||||
</td>
|
||||
<td>
|
||||
Minimum length of the search value required before making API calls.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">2</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Output()</div>
|
||||
<div>search: EventEmitter</div>
|
||||
</td>
|
||||
<td>
|
||||
An event emitted after search happened.
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'search',
|
||||
templateUrl: './search.component.html'
|
||||
})
|
||||
export class SearchComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Shortcuts
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used to show shortcuts to applications, pages or external sources. It can be controlled by the user and any changes will be persisted to the
|
||||
backend if setup correctly.
|
||||
</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<shortcuts></shortcuts>
|
||||
</textarea>
|
||||
|
||||
<h2>Message</h2>
|
||||
<!-- @formatter:off -->
|
||||
<textarea fuse-highlight
|
||||
lang="typescript">
|
||||
export interface Shortcut
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
useRouter: boolean;
|
||||
}
|
||||
</textarea>
|
||||
<!-- @formatter:on -->
|
||||
<div class="bg-card py-3 px-6 mt-2 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>id</div>
|
||||
</td>
|
||||
<td>
|
||||
Unique id of the shortcut.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>label</div>
|
||||
</td>
|
||||
<td>
|
||||
Label of the shortcut.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>description</div>
|
||||
</td>
|
||||
<td>
|
||||
Description of the shortcut.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>icon</div>
|
||||
</td>
|
||||
<td>
|
||||
Icon name for the shortcut.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>link</div>
|
||||
</td>
|
||||
<td>
|
||||
Link of the shortcut.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>useRouter</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to use the Router to parse the link.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Shortcuts Service</h2>
|
||||
<p>
|
||||
The <code>ShortcutsService</code> can be used to control the shortcuts outside of the <strong>Shortcuts</strong> component. This is particularly useful to control
|
||||
the shortcuts from other components for actions like creating, updating or deleting them.
|
||||
</p>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<p>
|
||||
Here's the list of all available methods from <code>ShortcutsService</code>:
|
||||
</p>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
shortcuts$: Observable<Shortcut[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Getter for shortcuts.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
getAll(): Observable<Shortcut[]>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Get all shortcuts from the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
create(shortcut: Shortcut): Observable<Shortcut>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Create a new shortcut on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
update(id: string, shortcut: Shortcut): Observable<Shortcut>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Update the shortcut on the server.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-card rounded shadow mt-4">
|
||||
<div class="px-6 py-3 font-mono text-secondary border-b">
|
||||
delete(id: string): Observable<boolean>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
Delete the shortcut on the server.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'shortcuts',
|
||||
templateUrl: './shortcuts.component.html',
|
||||
})
|
||||
export class ShortcutsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Common</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
User
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
This component can be used for showing information and actions related to the currently logged in user.
|
||||
</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>
|
||||
Here's the basic usage of the component:
|
||||
</p>
|
||||
<textarea
|
||||
fuse-highlight
|
||||
lang="html">
|
||||
<user></user>
|
||||
</textarea>
|
||||
|
||||
<h2>Properties</h2>
|
||||
<div class="bg-card py-3 px-6 rounded shadow">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-mono text-md text-secondary">
|
||||
<div>@Input()</div>
|
||||
<div>showAvatar: boolean</div>
|
||||
</td>
|
||||
<td>
|
||||
Whether to show avatar of the user. If set to <code>false</code>, a generic icon will be shown.
|
||||
</td>
|
||||
<td>
|
||||
<code class="whitespace-nowrap">true</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'user',
|
||||
templateUrl: './user.component.html'
|
||||
})
|
||||
export class UserComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto h-full">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-60 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#matDrawer>
|
||||
|
||||
<fuse-vertical-navigation
|
||||
[navigation]="menuData"
|
||||
[inner]="true"
|
||||
[mode]="'side'"
|
||||
[name]="'docs-common-components-navigation'"
|
||||
[opened]="true"></fuse-vertical-navigation>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content
|
||||
class="flex flex-col"
|
||||
fuseScrollReset>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex-auto">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
other-components {
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
|
||||
@Component({
|
||||
selector : 'other-components',
|
||||
templateUrl : './other-components.component.html',
|
||||
styleUrls : ['./other-components.component.scss'],
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class OtherComponentsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
|
||||
drawerMode: 'side' | 'over';
|
||||
drawerOpened: boolean;
|
||||
menuData: FuseNavigationItem[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
this.menuData = [
|
||||
{
|
||||
id : 'common',
|
||||
title : 'Common',
|
||||
subtitle: 'Custom made high-level components',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'common.overview',
|
||||
title: 'Overview',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/overview'
|
||||
},
|
||||
{
|
||||
id : 'common.languages',
|
||||
title: 'Languages',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/languages'
|
||||
},
|
||||
{
|
||||
id : 'common.messages',
|
||||
title: 'Messages',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/messages'
|
||||
},
|
||||
{
|
||||
id : 'common.notifications',
|
||||
title: 'Notifications',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/notifications'
|
||||
},
|
||||
{
|
||||
id : 'common.search',
|
||||
title: 'Search',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/search'
|
||||
},
|
||||
{
|
||||
id : 'common.shortcuts',
|
||||
title: 'Shortcuts',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/shortcuts'
|
||||
},
|
||||
{
|
||||
id : 'common.user',
|
||||
title: 'User',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/common/user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id : 'divider-1',
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
id : 'third-party',
|
||||
title : 'Third party',
|
||||
subtitle: 'Supported components',
|
||||
type : 'group',
|
||||
children: [
|
||||
{
|
||||
id : 'third-party.apex-charts',
|
||||
title: 'ApexCharts',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/third-party/apex-charts'
|
||||
},
|
||||
{
|
||||
id : 'third-party.full-calendar',
|
||||
title: 'FullCalendar',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/third-party/full-calendar'
|
||||
},
|
||||
{
|
||||
id : 'third-party.ngx-markdown',
|
||||
title: 'ngx-markdown',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/third-party/ngx-markdown'
|
||||
},
|
||||
{
|
||||
id : 'third-party.quill-editor',
|
||||
title: 'Quill editor',
|
||||
type : 'basic',
|
||||
link : '/docs/other-components/third-party/quill-editor'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to media query change
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened
|
||||
if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { FuseHighlightModule } from '@fuse/components/highlight';
|
||||
import { FuseAlertModule } from '@fuse/components/alert';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
|
||||
import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
|
||||
import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
|
||||
import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
|
||||
import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
|
||||
import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
|
||||
import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
|
||||
import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
|
||||
import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
|
||||
import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
|
||||
import { QuillEditorComponent } from 'app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component';
|
||||
import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/other-components.routing';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
OtherComponentsComponent,
|
||||
OverviewComponent,
|
||||
LanguagesComponent,
|
||||
MessagesComponent,
|
||||
NotificationsComponent,
|
||||
SearchComponent,
|
||||
ShortcutsComponent,
|
||||
UserComponent,
|
||||
ApexChartsComponent,
|
||||
FullCalendarComponent,
|
||||
NgxMarkdownComponent,
|
||||
QuillEditorComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(otherComponentsRoutes),
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatSidenavModule,
|
||||
FuseHighlightModule,
|
||||
FuseAlertModule,
|
||||
FuseNavigationModule,
|
||||
FuseScrollResetModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class OtherComponentsModule
|
||||
{
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
|
||||
import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
|
||||
import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
|
||||
import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
|
||||
import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
|
||||
import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
|
||||
import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
|
||||
import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
|
||||
import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
|
||||
import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
|
||||
import { QuillEditorComponent } from 'app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component';
|
||||
|
||||
export const otherComponentsRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: OtherComponentsComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'common/overview'
|
||||
},
|
||||
{
|
||||
path : 'common',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'overview'
|
||||
},
|
||||
{
|
||||
path : 'overview',
|
||||
component: OverviewComponent
|
||||
},
|
||||
{
|
||||
path : 'languages',
|
||||
component: LanguagesComponent
|
||||
},
|
||||
{
|
||||
path : 'messages',
|
||||
component: MessagesComponent
|
||||
},
|
||||
{
|
||||
path : 'notifications',
|
||||
component: NotificationsComponent
|
||||
},
|
||||
{
|
||||
path : 'search',
|
||||
component: SearchComponent
|
||||
},
|
||||
{
|
||||
path : 'shortcuts',
|
||||
component: ShortcutsComponent
|
||||
},
|
||||
{
|
||||
path : 'user',
|
||||
component: UserComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path : 'third-party',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'apex-charts'
|
||||
},
|
||||
{
|
||||
path : 'apex-charts',
|
||||
component: ApexChartsComponent
|
||||
},
|
||||
{
|
||||
path : 'full-calendar',
|
||||
component: FullCalendarComponent
|
||||
},
|
||||
{
|
||||
path : 'ngx-markdown',
|
||||
component: NgxMarkdownComponent
|
||||
},
|
||||
{
|
||||
path : 'quill-editor',
|
||||
component: QuillEditorComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,61 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Third Party</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Apex Charts
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<a
|
||||
href="https://apexcharts.com/"
|
||||
rel="noreferrer"
|
||||
target="_blank">ApexCharts
|
||||
</a>
|
||||
is a modern and interactive open-source charts library. Fuse supports ApexCharts through official
|
||||
<a
|
||||
href="https://github.com/apexcharts/ng-apexcharts"
|
||||
rel="noreferrer"
|
||||
target="_blank">ng-apexcharts
|
||||
</a>
|
||||
component.
|
||||
</p>
|
||||
<p>
|
||||
All charts in the Demo app built using <em>ApexCharts</em>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'apex-charts',
|
||||
templateUrl: './apex-charts.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class ApexChartsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Third Party</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
FullCalendar
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<a
|
||||
href="https://fullcalendar.io/"
|
||||
rel="noreferrer"
|
||||
target="_blank">FullCalendar
|
||||
</a>
|
||||
is the most popular full-sized Javascript calendar library. Fuse supports FullCalendar through official
|
||||
<a
|
||||
href="https://github.com/fullcalendar/fullcalendar-angular"
|
||||
rel="noreferrer"
|
||||
target="_blank">fullcalendar-angular
|
||||
</a>
|
||||
component.
|
||||
</p>
|
||||
<p>
|
||||
The <strong>Calendar</strong> demo application is built using <em>FullCalendar</em>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'full-calendar',
|
||||
templateUrl: './full-calendar.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class FullCalendarComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Third Party</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
ngxMarkdown
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/jfcere/ngx-markdown"
|
||||
rel="noreferrer"
|
||||
target="_blank">ngxMarkdown
|
||||
</a>
|
||||
is an Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to html with syntax highlight.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'ngx-markdown',
|
||||
templateUrl: './ngx-markdown.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class NgxMarkdownComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex flex-wrap items-center font-medium">
|
||||
<div>
|
||||
<a class="whitespace-nowrap text-primary-500">Documentation</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<a class="ml-1 text-primary-500">Other Components</a>
|
||||
</div>
|
||||
<div class="flex items-center ml-1 whitespace-nowrap">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-secondary"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
<span class="ml-1 text-secondary">Third Party</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div class="mt-2">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||
Quill Editor
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
|
||||
mat-icon-button
|
||||
(click)="toggleDrawer()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
|
||||
|
||||
<p>
|
||||
<a
|
||||
href="https://quilljs.com/"
|
||||
rel="noreferrer"
|
||||
target="_blank">Quill
|
||||
</a>
|
||||
is a free, open source WYSIWYG editor built for the modern web. Fuse supports Quill editor through
|
||||
<a
|
||||
href="https://github.com/KillerCodeMonkey/ngx-quill"
|
||||
rel="noreferrer"
|
||||
target="_blank">ngx-quill
|
||||
</a>
|
||||
component.
|
||||
</p>
|
||||
<p>
|
||||
The <strong>Compose</strong> dialog from <strong>Mail</strong> app includes the <em>Quill</em> editor.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
|
||||
|
||||
@Component({
|
||||
selector : 'quill-editor',
|
||||
templateUrl: './quill-editor.component.html',
|
||||
styles : ['']
|
||||
})
|
||||
export class QuillEditorComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _otherComponentsComponent: OtherComponentsComponent)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle the drawer
|
||||
*/
|
||||
toggleDrawer(): void
|
||||
{
|
||||
// Toggle the drawer
|
||||
this._otherComponentsComponent.matDrawer.toggle();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user