mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 04:37:08 +00:00
Compare commits
19 Commits
v13.3.0
...
v13.0.3-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
6c7201b77a | ||
|
|
90f869e7b9 | ||
|
|
2d2db97416 | ||
|
|
5daa2260e6 | ||
|
|
af984fcba1 | ||
|
|
97d3662417 | ||
|
|
d897a244c8 | ||
|
|
d146a92c79 | ||
|
|
27b6858b76 | ||
|
|
fcfba4c9e4 | ||
|
|
40894e0aa3 | ||
|
|
8dcf21cb1a | ||
|
|
d917f03883 | ||
|
|
0f2ddbda83 | ||
|
|
fa0d74504b | ||
|
|
ad2b19a07a | ||
|
|
4bf11591a2 | ||
|
|
f45a605b4e | ||
|
|
c150a8902c |
@@ -26,7 +26,7 @@ module.exports = function (config)
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter : {
|
||||
dir : require('path').join(__dirname, './coverage/fuse'),
|
||||
dir : require('path').join(__dirname, './coverage/angular12'),
|
||||
subdir : '.',
|
||||
reporters: [
|
||||
{type: 'html'},
|
||||
|
||||
4552
package-lock.json
generated
4552
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
86
package.json
86
package.json
@@ -1,8 +1,6 @@
|
||||
{
|
||||
"name": "@fuse/demo",
|
||||
"version": "13.3.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"version": "13.0.3",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -10,20 +8,21 @@
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint"
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "12.1.2",
|
||||
"@angular/cdk": "12.1.2",
|
||||
"@angular/common": "12.1.2",
|
||||
"@angular/compiler": "12.1.2",
|
||||
"@angular/core": "12.1.2",
|
||||
"@angular/forms": "12.1.2",
|
||||
"@angular/material": "12.1.2",
|
||||
"@angular/material-moment-adapter": "12.1.2",
|
||||
"@angular/platform-browser": "12.1.2",
|
||||
"@angular/platform-browser-dynamic": "12.1.2",
|
||||
"@angular/router": "12.1.2",
|
||||
"@angular/animations": "12.0.2",
|
||||
"@angular/cdk": "12.0.2",
|
||||
"@angular/common": "12.0.2",
|
||||
"@angular/compiler": "12.0.2",
|
||||
"@angular/core": "12.0.2",
|
||||
"@angular/forms": "12.0.2",
|
||||
"@angular/material": "12.0.2",
|
||||
"@angular/material-moment-adapter": "12.0.2",
|
||||
"@angular/platform-browser": "12.0.2",
|
||||
"@angular/platform-browser-dynamic": "12.0.2",
|
||||
"@angular/router": "12.0.2",
|
||||
"@fullcalendar/angular": "4.4.5-beta",
|
||||
"@fullcalendar/core": "4.4.2",
|
||||
"@fullcalendar/daygrid": "4.4.2",
|
||||
@@ -32,59 +31,60 @@
|
||||
"@fullcalendar/moment": "4.4.2",
|
||||
"@fullcalendar/rrule": "4.4.2",
|
||||
"@fullcalendar/timegrid": "4.4.2",
|
||||
"@ngneat/transloco": "2.22.0",
|
||||
"apexcharts": "3.27.2",
|
||||
"@ngneat/transloco": "2.21.0",
|
||||
"apexcharts": "3.26.3",
|
||||
"crypto-js": "3.3.0",
|
||||
"highlight.js": "11.1.0",
|
||||
"highlight.js": "11.0.0",
|
||||
"lodash-es": "4.17.21",
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.12",
|
||||
"ng-apexcharts": "1.5.10",
|
||||
"ngx-markdown": "12.0.1",
|
||||
"ngx-quill": "14.1.2",
|
||||
"ngx-quill": "14.0.0",
|
||||
"perfect-scrollbar": "1.5.1",
|
||||
"quill": "1.3.7",
|
||||
"rrule": "2.6.8",
|
||||
"rxjs": "6.6.7",
|
||||
"tslib": "2.3.0",
|
||||
"tslib": "2.2.0",
|
||||
"web-animations-js": "2.3.2",
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "12.1.2",
|
||||
"@angular-eslint/builder": "12.3.1",
|
||||
"@angular-eslint/eslint-plugin": "12.3.1",
|
||||
"@angular-eslint/eslint-plugin-template": "12.3.1",
|
||||
"@angular-eslint/schematics": "12.3.1",
|
||||
"@angular-eslint/template-parser": "12.3.1",
|
||||
"@angular/cli": "12.1.2",
|
||||
"@angular/compiler-cli": "12.1.2",
|
||||
"@angular-devkit/build-angular": "12.0.2",
|
||||
"@angular-eslint/builder": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.1.0",
|
||||
"@angular-eslint/schematics": "12.1.0",
|
||||
"@angular-eslint/template-parser": "12.1.0",
|
||||
"@angular/cli": "12.0.2",
|
||||
"@angular/compiler-cli": "12.0.2",
|
||||
"@angular/language-service": "12.0.2",
|
||||
"@tailwindcss/aspect-ratio": "0.2.1",
|
||||
"@tailwindcss/line-clamp": "0.2.1",
|
||||
"@tailwindcss/typography": "0.4.1",
|
||||
"@types/chroma-js": "2.1.3",
|
||||
"@types/crypto-js": "3.1.47",
|
||||
"@types/highlight.js": "10.1.0",
|
||||
"@types/jasmine": "3.8.1",
|
||||
"@types/lodash": "4.14.171",
|
||||
"@types/jasmine": "3.6.11",
|
||||
"@types/lodash": "4.14.170",
|
||||
"@types/lodash-es": "4.17.4",
|
||||
"@types/node": "12.20.16",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.3",
|
||||
"@typescript-eslint/parser": "4.28.3",
|
||||
"autoprefixer": "10.3.1",
|
||||
"@types/node": "12.20.14",
|
||||
"@typescript-eslint/eslint-plugin": "4.26.0",
|
||||
"@typescript-eslint/parser": "4.26.0",
|
||||
"autoprefixer": "10.2.6",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.30.0",
|
||||
"eslint": "7.27.0",
|
||||
"eslint-plugin-import": "2.23.4",
|
||||
"eslint-plugin-jsdoc": "35.4.3",
|
||||
"eslint-plugin-jsdoc": "35.1.2",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.8.0",
|
||||
"karma": "6.3.4",
|
||||
"jasmine-core": "3.7.1",
|
||||
"karma": "6.3.3",
|
||||
"karma-chrome-launcher": "3.1.0",
|
||||
"karma-coverage": "2.0.3",
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.7.0",
|
||||
"karma-jasmine-html-reporter": "1.6.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.3.5",
|
||||
"tailwindcss": "2.2.4",
|
||||
"typescript": "4.3.5"
|
||||
"postcss": "8.3.0",
|
||||
"tailwindcss": "2.1.4",
|
||||
"typescript": "4.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,13 +341,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||
]).create(this._overlay);
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// Destroy the player
|
||||
this._player.destroy();
|
||||
});
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
@@ -380,9 +373,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// Destroy the player
|
||||
this._player.destroy();
|
||||
|
||||
// If the backdrop still exists...
|
||||
if ( this._overlay )
|
||||
{
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
<!-- Button -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matTooltip]="tooltip || 'Toggle Fullscreen'"
|
||||
[matTooltip]="'Toggle Fullscreen'"
|
||||
(click)="toggleFullscreen()">
|
||||
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
|
||||
</button>
|
||||
|
||||
<!-- Default icon -->
|
||||
<ng-template #defaultIconTpl>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
|
||||
</ng-template>
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
|
||||
|
||||
@@ -11,8 +11,6 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
|
||||
})
|
||||
export class FuseFullscreenComponent implements OnInit
|
||||
{
|
||||
@Input() iconTpl: TemplateRef<any>;
|
||||
@Input() tooltip: string;
|
||||
private _fsDoc: FSDocument;
|
||||
private _fsDocEl: FSDocumentElement;
|
||||
private _isFullscreen: boolean = false;
|
||||
|
||||
@@ -3,17 +3,15 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseFullscreenComponent
|
||||
],
|
||||
imports: [
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
CommonModule
|
||||
MatTooltipModule
|
||||
],
|
||||
exports : [
|
||||
FuseFullscreenComponent
|
||||
|
||||
@@ -5,83 +5,69 @@
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
|
||||
[href]="item.link">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a function -->
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
|
||||
*ngIf="item.disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -89,12 +75,11 @@
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
@@ -103,24 +88,24 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@@ -1,63 +1,59 @@
|
||||
<ng-container *ngIf="!child">
|
||||
<div
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
<div
|
||||
*ngIf="!child"
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active}"
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
|
||||
<mat-menu
|
||||
class="fuse-horizontal-navigation-menu-panel"
|
||||
[overlapTrigger]="false"
|
||||
#matMenu="matMenu">
|
||||
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'divider'"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -78,16 +74,14 @@
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
@@ -96,25 +90,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -81,15 +81,4 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,30 @@
|
||||
<div class="fuse-horizontal-navigation-wrapper">
|
||||
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</ng-container>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
</ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
</ng-container>
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -15,15 +15,8 @@ export interface FuseNavigationItem
|
||||
hidden?: (item: FuseNavigationItem) => boolean;
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
tooltip?: string;
|
||||
link?: string;
|
||||
externalLink?: boolean;
|
||||
target?:
|
||||
| '_blank'
|
||||
| '_self'
|
||||
| '_parent'
|
||||
| '_top'
|
||||
| string;
|
||||
exactMatch?: boolean;
|
||||
isActiveMatchOptions?: IsActiveMatchOptions;
|
||||
function?: (item: FuseNavigationItem) => void;
|
||||
|
||||
@@ -7,16 +7,14 @@
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active': active,
|
||||
'fuse-vertical-navigation-item-disabled': item.disabled,
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}">
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -25,25 +23,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -59,40 +57,35 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -5,84 +5,68 @@
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
|
||||
[href]="item.link">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a function -->
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="!item.link && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="!item.link && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
|
||||
*ngIf="item.disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -90,12 +74,11 @@
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -104,24 +87,24 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@@ -6,16 +6,14 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="toggleCollapsable()">
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -24,25 +22,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<mat-icon
|
||||
@@ -64,40 +62,35 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -7,12 +7,11 @@
|
||||
<div class="fuse-vertical-navigation-item">
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -21,25 +20,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -51,40 +50,35 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -335,7 +335,6 @@ fuse-vertical-navigation {
|
||||
}
|
||||
|
||||
> .fuse-vertical-navigation-item-children {
|
||||
margin-top: 6px;
|
||||
|
||||
> *:last-child {
|
||||
padding-bottom: 6px;
|
||||
|
||||
@@ -24,52 +24,46 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
<ng-container *ngIf="item.type === 'aside'">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[activeItemId]="activeAsideItemId"
|
||||
[autoCollapse]="autoCollapse"
|
||||
[skipChildren]="true"
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-aside-item
|
||||
*ngIf="item.type === 'aside'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[activeItemId]="activeAsideItemId"
|
||||
[autoCollapse]="autoCollapse"
|
||||
[skipChildren]="true"
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
|
||||
|
||||
<!-- Basic -->
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
|
||||
<!-- Divider -->
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
|
||||
<!-- Group -->
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
|
||||
|
||||
<!-- Spacer -->
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -90,33 +84,31 @@
|
||||
</div>
|
||||
|
||||
<!-- Aside -->
|
||||
<ng-container *ngIf="activeAsideItemId">
|
||||
<div
|
||||
class="fuse-vertical-navigation-aside-wrapper"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
|
||||
[@fadeInLeft]="position === 'left'"
|
||||
[@fadeInRight]="position === 'right'"
|
||||
[@fadeOutLeft]="position === 'left'"
|
||||
[@fadeOutRight]="position === 'right'">
|
||||
<div
|
||||
class="fuse-vertical-navigation-aside-wrapper"
|
||||
*ngIf="activeAsideItemId"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
|
||||
[@fadeInLeft]="position === 'left'"
|
||||
[@fadeInRight]="position === 'right'"
|
||||
[@fadeOutLeft]="position === 'left'"
|
||||
[@fadeOutRight]="position === 'right'">
|
||||
|
||||
<!-- Items -->
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
<!-- Items -->
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
<ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
<!-- Aside -->
|
||||
<fuse-vertical-navigation-aside-item
|
||||
*ngIf="item.type === 'aside' && item.id === activeAsideItemId"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -374,10 +374,6 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Forcefully close the navigation and aside in case they are opened
|
||||
this.close();
|
||||
this.closeAside();
|
||||
|
||||
// Deregister the navigation component from the registry
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
import { FuseConfirmationModule } from '@fuse/services/confirmation';
|
||||
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
|
||||
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
|
||||
import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
|
||||
@@ -8,7 +7,6 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
FuseConfirmationModule,
|
||||
FuseMediaWatcherModule,
|
||||
FuseSplashScreenModule,
|
||||
FuseTailwindConfigModule,
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FuseConfirmationDialogComponent
|
||||
],
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
CommonModule
|
||||
],
|
||||
providers : [
|
||||
FuseConfirmationService
|
||||
]
|
||||
})
|
||||
export class FuseConfirmationModule
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseConfirmationService: FuseConfirmationService)
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { merge } from 'lodash-es';
|
||||
import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
|
||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||
|
||||
@Injectable()
|
||||
export class FuseConfirmationService
|
||||
{
|
||||
private _defaultConfig: FuseConfirmationConfig = {
|
||||
title : 'Confirm action',
|
||||
message : 'Are you sure you want to confirm this action?',
|
||||
icon : {
|
||||
show : true,
|
||||
name : 'heroicons_outline:exclamation',
|
||||
color: 'warn'
|
||||
},
|
||||
actions : {
|
||||
confirm: {
|
||||
show : true,
|
||||
label: 'Confirm',
|
||||
color: 'warn'
|
||||
},
|
||||
cancel : {
|
||||
show : true,
|
||||
label: 'Cancel'
|
||||
}
|
||||
},
|
||||
dismissible: false
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _matDialog: MatDialog
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent>
|
||||
{
|
||||
// Merge the user config with the default config
|
||||
const userConfig = merge({}, this._defaultConfig, config);
|
||||
|
||||
// Open the dialog
|
||||
return this._matDialog.open(FuseConfirmationDialogComponent, {
|
||||
autoFocus : false,
|
||||
disableClose: !userConfig.dismissible,
|
||||
data : userConfig
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
export interface FuseConfirmationConfig
|
||||
{
|
||||
title?: string;
|
||||
message?: string;
|
||||
icon?: {
|
||||
show?: boolean;
|
||||
name?: string;
|
||||
color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';
|
||||
};
|
||||
actions?: {
|
||||
confirm?: {
|
||||
show?: boolean;
|
||||
label?: string;
|
||||
color?: 'primary' | 'accent' | 'warn';
|
||||
};
|
||||
cancel?: {
|
||||
show?: boolean;
|
||||
label?: string;
|
||||
};
|
||||
};
|
||||
dismissible?: boolean;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
<div class="relative flex flex-col md:w-128 -m-6">
|
||||
|
||||
<!-- Dismiss button -->
|
||||
<ng-container *ngIf="data.dismissible">
|
||||
<div class="absolute top-0 right-0 pt-4 pr-4">
|
||||
<button
|
||||
mat-icon-button
|
||||
[matDialogClose]="undefined">
|
||||
<mat-icon
|
||||
class="text-secondary"
|
||||
[svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-start p-8 pb-6 sm:pb-8">
|
||||
|
||||
<!-- Icon -->
|
||||
<ng-container *ngIf="data.icon.show">
|
||||
<div
|
||||
class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
|
||||
[ngClass]="{'text-primary-600 bg-primary-100': data.icon.color === 'primary',
|
||||
'text-accent-600 bg-accent-100': data.icon.color === 'accent',
|
||||
'text-warn-600 bg-warn-100': data.icon.color === 'warn',
|
||||
'text-gray-600 bg-gray-100': data.icon.color === 'basic',
|
||||
'text-blue-600 bg-blue-100': data.icon.color === 'info',
|
||||
'text-green-500 bg-green-100': data.icon.color === 'success',
|
||||
'text-amber-500 bg-amber-100': data.icon.color === 'warning',
|
||||
'text-red-600 bg-red-100': data.icon.color === 'error'
|
||||
}">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="data.icon.name"></mat-icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="data.title || data.message">
|
||||
<div class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left">
|
||||
|
||||
<!-- Title -->
|
||||
<ng-container *ngIf="data.title">
|
||||
<div
|
||||
class="text-xl leading-6 font-medium"
|
||||
[innerHTML]="data.title"></div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Message -->
|
||||
<ng-container *ngIf="data.message">
|
||||
<div
|
||||
class="text-secondary"
|
||||
[innerHTML]="data.message"></div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
|
||||
<div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50">
|
||||
|
||||
<!-- Cancel -->
|
||||
<ng-container *ngIf="data.actions.cancel.show">
|
||||
<button
|
||||
mat-stroked-button
|
||||
[matDialogClose]="'cancelled'">
|
||||
{{data.actions.cancel.label}}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<!-- Confirm -->
|
||||
<ng-container *ngIf="data.actions.confirm.show">
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="data.actions.confirm.color"
|
||||
[matDialogClose]="'confirmed'">
|
||||
{{data.actions.confirm.label}}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-confirmation-dialog',
|
||||
templateUrl : './dialog.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FuseConfirmationDialogComponent implements OnInit
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
@Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
|
||||
public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from '@fuse/services/confirmation/public-api';
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from '@fuse/services/confirmation/confirmation.module';
|
||||
export * from '@fuse/services/confirmation/confirmation.service';
|
||||
export * from '@fuse/services/confirmation/confirmation.types';
|
||||
@@ -136,8 +136,11 @@
|
||||
.mat-flat-button,
|
||||
.mat-raised-button,
|
||||
.mat-stroked-button {
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
|
||||
.fuse-mat-rounded & {
|
||||
padding: 0 20px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Target all buttons */
|
||||
@@ -331,8 +334,6 @@
|
||||
/* @ Button Toggle
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
.mat-button-toggle-group {
|
||||
border: none !important;
|
||||
@apply space-x-1;
|
||||
|
||||
&.mat-button-toggle-group-appearance-standard {
|
||||
|
||||
@@ -340,27 +341,36 @@
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle {
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
/* Rounded design */
|
||||
.fuse-mat-rounded {
|
||||
|
||||
.mat-button-toggle-group {
|
||||
border: none !important;
|
||||
font-weight: 500;
|
||||
@apply space-x-1;
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
.mat-button-toggle {
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
font-weight: 500;
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
@apply text-default #{'!important'};
|
||||
padding: 0 20px;
|
||||
@apply text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
padding: 0 20px;
|
||||
@apply text-secondary;
|
||||
}
|
||||
|
||||
.mat-ripple {
|
||||
border-radius: 9999px;
|
||||
.mat-ripple {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1319,55 +1329,62 @@
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
|
||||
.mat-tab-label-container {
|
||||
padding: 0 24px;
|
||||
|
||||
.mat-tab-list {
|
||||
|
||||
.mat-tab-labels {
|
||||
|
||||
.mat-tab-label {
|
||||
min-width: 0 !important;
|
||||
height: 40px !important;
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
@apply text-secondary;
|
||||
|
||||
&.mat-tab-label-active {
|
||||
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
|
||||
+ .mat-tab-label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mat-tab-label-content {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-body-content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-label {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Rounded design */
|
||||
.fuse-mat-rounded {
|
||||
|
||||
.mat-tab-group {
|
||||
|
||||
.mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
|
||||
.mat-tab-label-container {
|
||||
padding: 0 24px;
|
||||
|
||||
.mat-tab-list {
|
||||
|
||||
.mat-tab-labels {
|
||||
|
||||
.mat-tab-label {
|
||||
min-width: 0 !important;
|
||||
height: 40px !important;
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
@apply text-secondary;
|
||||
|
||||
&.mat-tab-label-active {
|
||||
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
|
||||
+ .mat-tab-label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mat-tab-label-content {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-body-content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Textarea
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('13.3.0').full;
|
||||
export const FUSE_VERSION = new Version('13.0.3').full;
|
||||
|
||||
@@ -14,8 +14,8 @@ import { AppComponent } from 'app/app.component';
|
||||
import { appRoutes } from 'app/app.routing';
|
||||
|
||||
const routerConfig: ExtraOptions = {
|
||||
preloadingStrategy : PreloadAllModules,
|
||||
scrollPositionRestoration: 'enabled'
|
||||
scrollPositionRestoration: 'enabled',
|
||||
preloadingStrategy : PreloadAllModules
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
||||
import { forkJoin, Observable } from 'rxjs';
|
||||
import { MessagesService } from 'app/layout/common/messages/messages.service';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
|
||||
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -15,13 +13,7 @@ export class InitialDataResolver implements Resolve<any>
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _messagesService: MessagesService,
|
||||
private _navigationService: NavigationService,
|
||||
private _notificationsService: NotificationsService,
|
||||
private _shortcutsService: ShortcutsService,
|
||||
private _userService: UserService
|
||||
)
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
@@ -35,15 +27,29 @@ export class InitialDataResolver implements Resolve<any>
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InitialData>
|
||||
{
|
||||
// Fork join multiple API endpoint calls to wait all of them to finish
|
||||
return forkJoin([
|
||||
this._navigationService.get(),
|
||||
this._messagesService.getAll(),
|
||||
this._notificationsService.getAll(),
|
||||
this._shortcutsService.getAll(),
|
||||
this._userService.get()
|
||||
]);
|
||||
this._httpClient.get<any>('api/common/messages'),
|
||||
this._httpClient.get<any>('api/common/navigation'),
|
||||
this._httpClient.get<any>('api/common/notifications'),
|
||||
this._httpClient.get<any>('api/common/shortcuts'),
|
||||
this._httpClient.get<any>('api/common/user')
|
||||
]).pipe(
|
||||
map(([messages, navigation, notifications, shortcuts, user]) => ({
|
||||
messages,
|
||||
navigation: {
|
||||
compact : navigation.compact,
|
||||
default : navigation.default,
|
||||
futuristic: navigation.futuristic,
|
||||
horizontal: navigation.horizontal
|
||||
},
|
||||
notifications,
|
||||
shortcuts,
|
||||
user
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,19 +5,18 @@ import { LayoutComponent } from 'app/layout/layout.component';
|
||||
import { InitialDataResolver } from 'app/app.resolvers';
|
||||
|
||||
// @formatter:off
|
||||
/* eslint-disable max-len */
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
// tslint:disable:max-line-length
|
||||
export const appRoutes: Route[] = [
|
||||
|
||||
// Redirect empty path to '/dashboards/project'
|
||||
{path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
|
||||
// Redirect empty path to '/example'
|
||||
{path: '', pathMatch : 'full', redirectTo: 'example'},
|
||||
|
||||
// Redirect signed in user to the '/dashboards/project'
|
||||
// Redirect signed in user to the '/example'
|
||||
//
|
||||
// After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect'
|
||||
// path. Below is another redirection for that path to redirect the user to the desired
|
||||
// location. This is a small convenience to keep all main routes together here on this file.
|
||||
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
|
||||
{path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'example'},
|
||||
|
||||
// Auth routes for guests
|
||||
{
|
||||
@@ -74,135 +73,7 @@ export const appRoutes: Route[] = [
|
||||
initialData: InitialDataResolver,
|
||||
},
|
||||
children : [
|
||||
|
||||
// Dashboards
|
||||
{path: 'dashboards', children: [
|
||||
{path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
|
||||
{path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
|
||||
]},
|
||||
|
||||
// Apps
|
||||
{path: 'apps', children: [
|
||||
{path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.module').then(m => m.AcademyModule)},
|
||||
{path: 'calendar', loadChildren: () => import('app/modules/admin/apps/calendar/calendar.module').then(m => m.CalendarModule)},
|
||||
{path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.module').then(m => m.ChatModule)},
|
||||
{path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
|
||||
{path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
|
||||
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
|
||||
{path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
|
||||
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
|
||||
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
|
||||
{path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
|
||||
{path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
|
||||
]},
|
||||
|
||||
// Pages
|
||||
{path: 'pages', children: [
|
||||
|
||||
// Activities
|
||||
{path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.module').then(m => m.ActivitiesModule)},
|
||||
|
||||
// Authentication
|
||||
{path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
|
||||
|
||||
// Coming Soon
|
||||
{path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
|
||||
|
||||
// Error
|
||||
{path: 'error', children: [
|
||||
{path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
|
||||
]},
|
||||
|
||||
// Invoice
|
||||
{path: 'invoice', children: [
|
||||
{path: 'printable', children: [
|
||||
{path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
|
||||
]}
|
||||
]},
|
||||
|
||||
// Maintenance
|
||||
{path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
|
||||
|
||||
// Pricing
|
||||
{path: 'pricing', children: [
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
|
||||
{path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
|
||||
{path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
|
||||
{path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
|
||||
]},
|
||||
|
||||
// Profile
|
||||
{path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
|
||||
|
||||
// Settings
|
||||
{path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
|
||||
]},
|
||||
|
||||
// User Interface
|
||||
{path: 'ui', children: [
|
||||
|
||||
// Material Components
|
||||
{path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.module').then(m => m.MaterialComponentsModule)},
|
||||
|
||||
// Fuse Components
|
||||
{path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.module').then(m => m.FuseComponentsModule)},
|
||||
|
||||
// Other Components
|
||||
{path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.module').then(m => m.OtherComponentsModule)},
|
||||
|
||||
// TailwindCSS
|
||||
{path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
|
||||
|
||||
// Advanced Search
|
||||
{path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
|
||||
|
||||
// Animations
|
||||
{path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)},
|
||||
|
||||
// Cards
|
||||
{path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.module').then(m => m.CardsModule)},
|
||||
|
||||
// Colors
|
||||
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
|
||||
|
||||
// Confirmation Dialog
|
||||
{path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
|
||||
|
||||
// Datatable
|
||||
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
|
||||
|
||||
// Forms
|
||||
{path: 'forms', children: [
|
||||
{path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
|
||||
{path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
|
||||
{path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
|
||||
]},
|
||||
|
||||
// Icons
|
||||
{path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
|
||||
|
||||
// Page Layouts
|
||||
{path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
|
||||
|
||||
// Typography
|
||||
{path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
|
||||
]},
|
||||
|
||||
// Documentation
|
||||
{path: 'docs', children: [
|
||||
|
||||
// Changelog
|
||||
{path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
|
||||
|
||||
// Guides
|
||||
{path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)}
|
||||
]},
|
||||
|
||||
// 404 & Catch all
|
||||
{path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '**', redirectTo: '404-not-found'}
|
||||
{path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
19
src/app/app.types.ts
Normal file
19
src/app/app.types.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation';
|
||||
import { Message } from 'app/layout/common/messages/messages.types';
|
||||
import { Notification } from 'app/layout/common/notifications/notifications.types';
|
||||
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
|
||||
import { User } from 'app/core/user/user.model';
|
||||
|
||||
export interface InitialData
|
||||
{
|
||||
messages: Message[];
|
||||
navigation: {
|
||||
compact: FuseNavigationItem[];
|
||||
default: FuseNavigationItem[];
|
||||
futuristic: FuseNavigationItem[];
|
||||
horizontal: FuseNavigationItem[];
|
||||
};
|
||||
notifications: Notification[];
|
||||
shortcuts: Shortcut[];
|
||||
user: User;
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NavigationService
|
||||
{
|
||||
private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for navigation
|
||||
*/
|
||||
get navigation$(): Observable<Navigation>
|
||||
{
|
||||
return this._navigation.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all navigation data
|
||||
*/
|
||||
get(): Observable<Navigation>
|
||||
{
|
||||
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
|
||||
tap((navigation) => {
|
||||
this._navigation.next(navigation);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { FuseNavigationItem } from '@fuse/components/navigation';
|
||||
|
||||
export interface Navigation
|
||||
{
|
||||
compact: FuseNavigationItem[];
|
||||
default: FuseNavigationItem[];
|
||||
futuristic: FuseNavigationItem[];
|
||||
horizontal: FuseNavigationItem[];
|
||||
}
|
||||
@@ -27,6 +27,6 @@ export class TranslocoHttpLoader implements TranslocoLoader
|
||||
*/
|
||||
getTranslation(lang: string): Observable<Translation>
|
||||
{
|
||||
return this._httpClient.get<Translation>(`./assets/i18n/${lang}.json`);
|
||||
return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,6 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
|
||||
}
|
||||
],
|
||||
defaultLang : 'en',
|
||||
fallbackLang : 'en',
|
||||
reRenderOnLangChange: true,
|
||||
prodMode : environment.production
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, tap } from 'rxjs/operators';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { User } from 'app/core/user/user.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -42,18 +42,6 @@ export class UserService
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get the current logged in user data
|
||||
*/
|
||||
get(): Observable<User>
|
||||
{
|
||||
return this._httpClient.get<User>('api/common/user').pipe(
|
||||
tap((user) => {
|
||||
this._user.next(user);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the user
|
||||
*
|
||||
@@ -63,6 +51,7 @@ export class UserService
|
||||
{
|
||||
return this._httpClient.patch<User>('api/common/user', {user}).pipe(
|
||||
map((response) => {
|
||||
// Execute the observable
|
||||
this._user.next(response);
|
||||
})
|
||||
);
|
||||
|
||||
@@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
|
||||
@Component({
|
||||
selector : 'languages',
|
||||
templateUrl : './languages.component.html',
|
||||
selector : 'language',
|
||||
templateUrl : './language.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'languages'
|
||||
exportAs : 'language'
|
||||
})
|
||||
export class LanguagesComponent implements OnInit, OnDestroy
|
||||
export class LanguageComponent implements OnInit, OnDestroy
|
||||
{
|
||||
availableLangs: AvailableLangs;
|
||||
activeLang: string;
|
||||
@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
|
||||
import { LanguageComponent } from 'app/layout/common/language/language.component';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
LanguagesComponent
|
||||
LanguageComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
@@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
LanguagesComponent
|
||||
LanguageComponent
|
||||
]
|
||||
})
|
||||
export class LanguagesModule
|
||||
export class LanguageModule
|
||||
{
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
@@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service';
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'messages'
|
||||
})
|
||||
export class MessagesComponent implements OnInit, OnDestroy
|
||||
export class MessagesComponent implements OnInit, OnChanges, OnDestroy
|
||||
{
|
||||
@Input() messages: Message[];
|
||||
@ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
|
||||
@ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
|
||||
|
||||
messages: Message[];
|
||||
unreadCount: number = 0;
|
||||
private _overlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
@@ -40,6 +40,21 @@ export class MessagesComponent implements OnInit, OnDestroy
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Messages
|
||||
if ( 'messages' in changes )
|
||||
{
|
||||
// Store the messages on the service
|
||||
this._messagesService.store(changes.messages.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
@@ -167,7 +182,7 @@ export class MessagesComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition(true)
|
||||
.withLockedPosition()
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { Message } from 'app/layout/common/messages/messages.types';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
import { map, switchMap, take } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -35,15 +35,17 @@ export class MessagesService
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all messages
|
||||
* Store messages on the service
|
||||
*
|
||||
* @param messages
|
||||
*/
|
||||
getAll(): Observable<Message[]>
|
||||
store(messages: Message[]): Observable<Message[]>
|
||||
{
|
||||
return this._httpClient.get<Message[]>('api/common/messages').pipe(
|
||||
tap((messages) => {
|
||||
this._messages.next(messages);
|
||||
})
|
||||
);
|
||||
// Load the messages
|
||||
this._messages.next(messages);
|
||||
|
||||
// Return the messages
|
||||
return this.messages$;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
@@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'notifications'
|
||||
})
|
||||
export class NotificationsComponent implements OnInit, OnDestroy
|
||||
export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
@Input() notifications: Notification[];
|
||||
@ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
|
||||
@ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
|
||||
|
||||
notifications: Notification[];
|
||||
unreadCount: number = 0;
|
||||
private _overlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
@@ -40,6 +40,21 @@ export class NotificationsComponent implements OnInit, OnDestroy
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Notifications
|
||||
if ( 'notifications' in changes )
|
||||
{
|
||||
// Store the notifications on the service
|
||||
this._notificationsService.store(changes.notifications.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
@@ -167,7 +182,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition(true)
|
||||
.withLockedPosition()
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { Notification } from 'app/layout/common/notifications/notifications.types';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
import { map, switchMap, take } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -35,15 +35,17 @@ export class NotificationsService
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all notifications
|
||||
* Store notifications on the service
|
||||
*
|
||||
* @param notifications
|
||||
*/
|
||||
getAll(): Observable<Notification[]>
|
||||
store(notifications: Notification[]): Observable<Notification[]>
|
||||
{
|
||||
return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
|
||||
tap((notifications) => {
|
||||
this._notifications.next(notifications);
|
||||
})
|
||||
);
|
||||
// Load the notifications
|
||||
this._notifications.next(notifications);
|
||||
|
||||
// Return the notifications
|
||||
return this.notifications$;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
(click)="open()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
|
||||
*ngIf="opened"
|
||||
@@ -22,36 +23,22 @@
|
||||
(keydown)="onKeydown($event)"
|
||||
#barSearchInput>
|
||||
<mat-autocomplete
|
||||
class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
|
||||
class="max-h-128 border-t rounded-b shadow-md"
|
||||
[disableRipple]="true"
|
||||
#matAutocomplete="matAutocomplete">
|
||||
<mat-option
|
||||
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
|
||||
*ngIf="resultSets && !resultSets.length">
|
||||
class="h-14 px-6 py-0 sm:px-8 text-md pointer-events-none text-secondary bg-transparent"
|
||||
*ngIf="results && !results.length">
|
||||
No results found!
|
||||
</mat-option>
|
||||
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
|
||||
<mat-optgroup class="flex items-center mt-2 px-2">
|
||||
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
|
||||
</mat-optgroup>
|
||||
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
|
||||
<mat-option
|
||||
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
|
||||
[routerLink]="result.link">
|
||||
<!-- Contacts -->
|
||||
<ng-container *ngIf="resultSet.id === 'contacts'">
|
||||
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
<!-- Pages -->
|
||||
<ng-container *ngIf="resultSet.id === 'pages'">
|
||||
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="resultSet.id === 'tasks'">
|
||||
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let result of results; trackBy: trackByFn">
|
||||
<mat-option
|
||||
class="group relative h-14 px-6 py-0 sm:px-8 text-md"
|
||||
[routerLink]="result.link">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="searchResult"
|
||||
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
<button
|
||||
@@ -82,89 +69,62 @@
|
||||
[disableRipple]="true"
|
||||
#matAutocomplete="matAutocomplete">
|
||||
<mat-option
|
||||
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
|
||||
*ngIf="resultSets && !resultSets.length">
|
||||
class="h-14 px-5 py-0 text-md pointer-events-none text-secondary bg-transparent"
|
||||
*ngIf="results && !results.length">
|
||||
No results found!
|
||||
</mat-option>
|
||||
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
|
||||
<mat-optgroup class="flex items-center mt-2 px-2">
|
||||
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
|
||||
</mat-optgroup>
|
||||
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
|
||||
<mat-option
|
||||
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
|
||||
[routerLink]="result.link">
|
||||
<!-- Contacts -->
|
||||
<ng-container *ngIf="resultSet.id === 'contacts'">
|
||||
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
<!-- Pages -->
|
||||
<ng-container *ngIf="resultSet.id === 'pages'">
|
||||
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="resultSet.id === 'tasks'">
|
||||
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
|
||||
</ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let result of results; trackBy: trackByFn">
|
||||
<mat-option
|
||||
class="group relative h-14 px-5 py-0 text-md"
|
||||
[routerLink]="result.link">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="searchResult"
|
||||
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Contact result template -->
|
||||
<ng-template
|
||||
#contactResult
|
||||
#searchResult
|
||||
let-result>
|
||||
<div class="flex items-center">
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
|
||||
<img
|
||||
*ngIf="result.avatar"
|
||||
[src]="result.avatar">
|
||||
<mat-icon
|
||||
class="m-0 icon-size-5 text-primary dark:text-primary-400"
|
||||
*ngIf="!result.avatar"
|
||||
[svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
|
||||
</div>
|
||||
<div class="ml-3 truncate">
|
||||
<span [innerHTML]="result.name"></span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Page result template -->
|
||||
<ng-template
|
||||
#pageResult
|
||||
let-result>
|
||||
<div class="flex flex-col">
|
||||
<div
|
||||
class="truncate leading-normal"
|
||||
[innerHTML]="result.title"></div>
|
||||
<div class="truncate leading-normal text-sm text-secondary">
|
||||
{{result.link}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<!-- Hover indicator -->
|
||||
<div class="absolute inset-y-0 left-0 hidden w-1 bg-primary group-hover:flex"></div>
|
||||
|
||||
<!-- Contact result -->
|
||||
<ng-container *ngIf="result.resultType === 'contact'">
|
||||
<div class="flex items-center">
|
||||
<div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-indigo-50 bg-indigo-600">Contact</div>
|
||||
<div class="overflow-hidden overflow-ellipsis">
|
||||
<span [innerHTML]="result.title"></span>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 ml-auto rounded-full overflow-hidden bg-primary-100 dark:bg-black dark:bg-opacity-5">
|
||||
<img
|
||||
*ngIf="result.avatar"
|
||||
[src]="result.avatar">
|
||||
<mat-icon
|
||||
class="m-0 icon-size-5 text-primary"
|
||||
*ngIf="!result.avatar"
|
||||
[svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Page result -->
|
||||
<ng-container *ngIf="result.resultType === 'page'">
|
||||
<div class="flex items-center">
|
||||
<div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-teal-50 bg-teal-600">Page</div>
|
||||
<div class="flex flex-col overflow-hidden overflow-ellipsis">
|
||||
<span
|
||||
class="overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal"
|
||||
[innerHTML]="result.title"></span>
|
||||
<span
|
||||
class="mt-1 text-secondary overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal text-sm no-underline"
|
||||
[routerLink]="result.link">{{result.link}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Task result template -->
|
||||
<ng-template
|
||||
#taskResult
|
||||
let-result>
|
||||
<div class="flex items-center">
|
||||
<ng-container *ngIf="result.completed">
|
||||
<mat-icon
|
||||
class="mr-0 text-primary dark:text-primary-400"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!result.completed">
|
||||
<mat-icon
|
||||
class="mr-0 text-hint"
|
||||
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
<div
|
||||
class="ml-3 truncate leading-normal"
|
||||
[ngClass]="{'line-through text-hint': result.completed}"
|
||||
[innerHTML]="result.title"></div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -20,7 +20,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
|
||||
@Output() search: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
opened: boolean = false;
|
||||
resultSets: any[];
|
||||
results: any[];
|
||||
searchControl: FormControl = new FormControl();
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
@@ -104,12 +104,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
|
||||
takeUntil(this._unsubscribeAll),
|
||||
map((value) => {
|
||||
|
||||
// Set the resultSets to null if there is no value or
|
||||
// Set the search results to null if there is no value or
|
||||
// the length of the value is smaller than the minLength
|
||||
// so the autocomplete panel can be closed
|
||||
if ( !value || value.length < this.minLength )
|
||||
{
|
||||
this.resultSets = null;
|
||||
this.results = null;
|
||||
}
|
||||
|
||||
// Continue
|
||||
@@ -121,13 +121,13 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
|
||||
)
|
||||
.subscribe((value) => {
|
||||
this._httpClient.post('api/common/search', {query: value})
|
||||
.subscribe((resultSets: any) => {
|
||||
.subscribe((response: any) => {
|
||||
|
||||
// Store the result sets
|
||||
this.resultSets = resultSets;
|
||||
// Store the results
|
||||
this.results = response.results;
|
||||
|
||||
// Execute the event
|
||||
this.search.next(resultSets);
|
||||
this.search.next(this.results);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -21,15 +21,7 @@
|
||||
[svgIcon]="'heroicons_solid:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center text-lg font-medium leading-10">
|
||||
<span class="">Shortcuts</span>
|
||||
<ng-container *ngIf="mode !== 'view'">
|
||||
<span class="ml-1">
|
||||
<ng-container *ngIf="mode === 'add'">- Add new</ng-container>
|
||||
<ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
|
||||
</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="text-lg font-medium leading-10">Shortcuts</div>
|
||||
<div class="ml-auto">
|
||||
|
||||
<!-- View mode -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
@@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'shortcuts'
|
||||
})
|
||||
export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
|
||||
{
|
||||
@Input() shortcuts: Shortcut[];
|
||||
@ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
|
||||
@ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
|
||||
|
||||
mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
|
||||
shortcutForm: FormGroup;
|
||||
shortcuts: Shortcut[];
|
||||
private _overlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
@@ -43,6 +43,21 @@ export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On changes
|
||||
*
|
||||
* @param changes
|
||||
*/
|
||||
ngOnChanges(changes: SimpleChanges): void
|
||||
{
|
||||
// Shortcuts
|
||||
if ( 'shortcuts' in changes )
|
||||
{
|
||||
// Store the shortcuts on the service
|
||||
this._shortcutsService.store(changes.shortcuts.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
@@ -221,7 +236,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition(true)
|
||||
.withLockedPosition()
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, ReplaySubject } from 'rxjs';
|
||||
import { map, switchMap, take, tap } from 'rxjs/operators';
|
||||
import { map, switchMap, take } from 'rxjs/operators';
|
||||
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
|
||||
|
||||
@Injectable({
|
||||
@@ -35,15 +35,17 @@ export class ShortcutsService
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all messages
|
||||
* Store shortcuts on the service
|
||||
*
|
||||
* @param shortcuts
|
||||
*/
|
||||
getAll(): Observable<Shortcut[]>
|
||||
store(shortcuts: Shortcut[]): Observable<Shortcut[]>
|
||||
{
|
||||
return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
|
||||
tap((shortcuts) => {
|
||||
this._shortcuts.next(shortcuts);
|
||||
})
|
||||
);
|
||||
// Load the shortcuts
|
||||
this._shortcuts.next(shortcuts);
|
||||
|
||||
// Return the shortcuts
|
||||
return this.shortcuts$;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,17 +3,17 @@ import { Router } from '@angular/router';
|
||||
import { BooleanInput } from '@angular/cdk/coercion';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
import { User } from 'app/core/user/user.model';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
|
||||
@Component({
|
||||
selector : 'user',
|
||||
templateUrl : './user.component.html',
|
||||
selector : 'user-menu',
|
||||
templateUrl : './user-menu.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
exportAs : 'user'
|
||||
exportAs : 'userMenu'
|
||||
})
|
||||
export class UserComponent implements OnInit, OnDestroy
|
||||
export class UserMenuComponent implements OnInit, OnDestroy
|
||||
{
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
static ngAcceptInputType_showAvatar: BooleanInput;
|
||||
@@ -3,12 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { UserComponent } from 'app/layout/common/user/user.component';
|
||||
import { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
UserComponent
|
||||
UserMenuComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
@@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
UserComponent
|
||||
UserMenuComponent
|
||||
]
|
||||
})
|
||||
export class UserModule
|
||||
export class UserMenuModule
|
||||
{
|
||||
}
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<fuse-drawer
|
||||
class="w-screen min-w-screen sm:w-100 sm:min-w-100"
|
||||
class="w-100 min-w-100"
|
||||
fixed
|
||||
transparentOverlay
|
||||
[mode]="'over'"
|
||||
@@ -74,17 +74,17 @@
|
||||
|
||||
<!-- Theme -->
|
||||
<div class="text-md font-semibold text-secondary">THEME</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
|
||||
<div class="grid grid-cols-3 gap-3 mt-6">
|
||||
<ng-container *ngFor="let theme of themes">
|
||||
<div
|
||||
class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
|
||||
class="flex items-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
|
||||
[class.ring-2]="config.theme === theme[0]"
|
||||
(click)="setTheme(theme[0])">
|
||||
<div
|
||||
class="flex-0 w-3 h-3 rounded-full"
|
||||
class="w-4 h-4 rounded-full"
|
||||
[style.background-color]="theme[1].primary"></div>
|
||||
<div
|
||||
class="ml-2.5 font-medium leading-5 truncate"
|
||||
class="ml-2.5 font-medium leading-5"
|
||||
[class.text-secondary]="config.theme !== theme[0]">
|
||||
{{theme[0] | titlecase}}
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="'over'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="false">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -50,7 +50,7 @@
|
||||
<fuse-horizontal-navigation
|
||||
class="mr-2"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
|
||||
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
|
||||
</ng-container>
|
||||
<!-- Navigation toggle button -->
|
||||
<ng-container *ngIf="isScreenSmall">
|
||||
@@ -62,14 +62,14 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,8 +4,7 @@ import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'centered-layout',
|
||||
@@ -14,7 +13,7 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class CenteredLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
navigation: Navigation;
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
@@ -24,7 +23,6 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="'over'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="false">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -45,14 +45,14 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
<fuse-horizontal-navigation
|
||||
class="-mx-4"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
|
||||
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'enterprise-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class EnterpriseLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="'over'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="false">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -51,14 +51,14 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom bar -->
|
||||
@@ -66,7 +66,7 @@
|
||||
<div class="relative flex flex-auto flex-0 items-center h-16 px-4">
|
||||
<fuse-horizontal-navigation
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
|
||||
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'material-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class MaterialLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="'over'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="false">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -43,7 +43,7 @@
|
||||
<fuse-horizontal-navigation
|
||||
class="mr-2"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
|
||||
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
|
||||
</ng-container>
|
||||
<!-- Navigation toggle button -->
|
||||
<ng-container *ngIf="isScreenSmall">
|
||||
@@ -54,14 +54,14 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'modern-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class ModernLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -35,14 +35,14 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'classic-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class ClassicLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
class="dark bg-gray-900 print:hidden"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -16,8 +16,8 @@
|
||||
</div>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center ml-auto">
|
||||
<notifications></notifications>
|
||||
<user [showAvatar]="false"></user>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu [showAvatar]="false"></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
<!-- User -->
|
||||
@@ -25,20 +25,20 @@
|
||||
<div class="relative w-24 h-24">
|
||||
<img
|
||||
class="w-full h-full rounded-full"
|
||||
*ngIf="user.avatar"
|
||||
[src]="user.avatar"
|
||||
*ngIf="data.user.avatar"
|
||||
[src]="data.user.avatar"
|
||||
alt="User avatar">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
*ngIf="!user.avatar"
|
||||
*ngIf="!data.user.avatar"
|
||||
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center w-full mt-6">
|
||||
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
|
||||
{{user.name}}
|
||||
{{data.user.name}}
|
||||
</div>
|
||||
<div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
|
||||
{{user.email}}
|
||||
{{data.user.email}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,12 +65,12 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'classy-layout',
|
||||
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
|
||||
})
|
||||
export class ClassyLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
user: User;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -27,8 +23,6 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _userService: UserService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -56,19 +50,10 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
|
||||
// Subscribe to the user service
|
||||
this._userService.user$
|
||||
.pipe((takeUntil(this._unsubscribeAll)))
|
||||
.subscribe((user: User) => {
|
||||
this.user = user;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
[appearance]="'compact'"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.compact"
|
||||
[navigation]="data.navigation.compact"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -30,14 +30,14 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'compact-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class CompactLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
[appearance]="navigationAppearance"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.default"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -39,14 +39,14 @@
|
||||
</button>
|
||||
</div>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'dense-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class DenseLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
navigationAppearance: 'default' | 'dense' = 'dense';
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
@@ -25,7 +24,6 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -53,12 +51,10 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
class="dark bg-indigo-800 text-white print:hidden"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.futuristic"
|
||||
[navigation]="data.navigation.futuristic"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationHeader>
|
||||
@@ -18,10 +18,10 @@
|
||||
<ng-container fuseVerticalNavigationFooter>
|
||||
<!-- User -->
|
||||
<div class="flex items-center w-full px-6 py-8 border-t">
|
||||
<user></user>
|
||||
<user-menu></user-menu>
|
||||
<div class="flex flex-col w-full ml-4 overflow-hidden">
|
||||
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
|
||||
{{user.name}}
|
||||
{{data.user.name}}
|
||||
</div>
|
||||
<div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
|
||||
brian.hughes@company.com
|
||||
@@ -44,13 +44,13 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { User } from 'app/core/user/user.types';
|
||||
import { UserService } from 'app/core/user/user.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'futuristic-layout',
|
||||
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
|
||||
})
|
||||
export class FuturisticLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
user: User;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -27,8 +23,6 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _userService: UserService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -56,19 +50,10 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
|
||||
// Subscribe to the user service
|
||||
this._userService.user$
|
||||
.pipe((takeUntil(this._unsubscribeAll)))
|
||||
.subscribe((user: User) => {
|
||||
this.user = user;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
[appearance]="'thin'"
|
||||
[mode]="isScreenSmall ? 'over' : 'side'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="navigation.compact"
|
||||
[navigation]="data.navigation.compact"
|
||||
[opened]="!isScreenSmall">
|
||||
<!-- Navigation header hook -->
|
||||
<ng-container fuseVerticalNavigationContentHeader>
|
||||
@@ -31,14 +31,14 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<language></language>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
<notifications></notifications>
|
||||
<user></user>
|
||||
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
|
||||
<messages [messages]="data.messages"></messages>
|
||||
<notifications [notifications]="data.notifications"></notifications>
|
||||
<user-menu></user-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { Navigation } from 'app/core/navigation/navigation.types';
|
||||
import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
import { InitialData } from 'app/app.types';
|
||||
|
||||
@Component({
|
||||
selector : 'thin-layout',
|
||||
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
|
||||
})
|
||||
export class ThinLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: InitialData;
|
||||
isScreenSmall: boolean;
|
||||
navigation: Navigation;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
@@ -24,7 +23,6 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _router: Router,
|
||||
private _navigationService: NavigationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _fuseNavigationService: FuseNavigationService
|
||||
)
|
||||
@@ -52,12 +50,10 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to navigation data
|
||||
this._navigationService.navigation$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((navigation: Navigation) => {
|
||||
this.navigation = navigation;
|
||||
});
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
|
||||
@@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
|
||||
import { FuseNavigationModule } from '@fuse/components/navigation';
|
||||
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
|
||||
import { LanguageModule } from 'app/layout/common/language/language.module';
|
||||
import { MessagesModule } from 'app/layout/common/messages/messages.module';
|
||||
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
|
||||
import { UserModule } from 'app/layout/common/user/user.module';
|
||||
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
|
||||
|
||||
@@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
|
||||
MatMenuModule,
|
||||
FuseFullscreenModule,
|
||||
FuseNavigationModule,
|
||||
LanguagesModule,
|
||||
LanguageModule,
|
||||
MessagesModule,
|
||||
NotificationsModule,
|
||||
SearchModule,
|
||||
ShortcutsModule,
|
||||
UserModule,
|
||||
UserMenuModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
|
||||
@@ -33,18 +33,10 @@ export class FileManagerMockApi
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
this._fuseMockApiService
|
||||
.onGet('api/apps/file-manager')
|
||||
.reply(({request}) => {
|
||||
.reply(() => {
|
||||
|
||||
// Clone the items
|
||||
let items = cloneDeep(this._items);
|
||||
|
||||
// See if a folder id exist
|
||||
const folderId = request.params.get('folderId') ?? null;
|
||||
|
||||
// Filter the items by folder id. If folder id is null,
|
||||
// that means we want to root items which have folder id
|
||||
// of null
|
||||
items = items.filter(item => item.folderId === folderId);
|
||||
const items = cloneDeep(this._items);
|
||||
|
||||
// Separate the items by folders and files
|
||||
const folders = items.filter(item => item.type === 'folder');
|
||||
@@ -54,38 +46,11 @@ export class FileManagerMockApi
|
||||
folders.sort((a, b) => a.name.localeCompare(b.name));
|
||||
files.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
// Figure out the path and attach it to the response
|
||||
// Prepare the empty paths array
|
||||
const pathItems = cloneDeep(this._items);
|
||||
const path = [];
|
||||
|
||||
// Prepare the current folder
|
||||
let currentFolder = null;
|
||||
|
||||
// Get the current folder and add it as the first entry
|
||||
if ( folderId )
|
||||
{
|
||||
currentFolder = pathItems.find(item => item.id === folderId);
|
||||
path.push(currentFolder);
|
||||
}
|
||||
|
||||
// Start traversing and storing the folders as a path array
|
||||
// until we hit null on the folder id
|
||||
while ( currentFolder?.folderId )
|
||||
{
|
||||
currentFolder = pathItems.find(item => item.id === currentFolder.folderId);
|
||||
if ( currentFolder )
|
||||
{
|
||||
path.unshift(currentFolder);
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
200,
|
||||
{
|
||||
folders,
|
||||
files,
|
||||
path
|
||||
files
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
export const items = [
|
||||
{
|
||||
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
|
||||
folderId : null,
|
||||
name : 'Personal',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'April 24, 2018',
|
||||
@@ -14,7 +13,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '6da8747f-b474-4c9a-9eba-5ef212285500',
|
||||
folderId : null,
|
||||
name : 'Photos',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'November 01, 2021',
|
||||
@@ -26,7 +24,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
|
||||
folderId : null,
|
||||
name : 'Work',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'May 8, 2020',
|
||||
@@ -38,7 +35,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
|
||||
folderId : null,
|
||||
name : 'Contract #123',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'January 14, 2021',
|
||||
@@ -50,7 +46,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
|
||||
folderId : null,
|
||||
name : 'Estimated budget',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'December 14, 2020',
|
||||
@@ -62,7 +57,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '157adb9a-14f8-4559-ac93-8be893c9f80a',
|
||||
folderId : null,
|
||||
name : 'DMCA notice #42',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'May 8, 2021',
|
||||
@@ -74,7 +68,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '4f64597a-df7e-461c-ad60-f33e5f7e0747',
|
||||
folderId : null,
|
||||
name : 'Invoices',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'January 12, 2020',
|
||||
@@ -86,7 +79,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'e445c445-57b2-4476-8c62-b068e3774b8e',
|
||||
folderId : null,
|
||||
name : 'Crash logs',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 8, 2020',
|
||||
@@ -98,7 +90,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'b482f93e-7847-4614-ad48-b78b78309f81',
|
||||
folderId : null,
|
||||
name : 'System logs',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 8, 2020',
|
||||
@@ -110,7 +101,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
|
||||
folderId : null,
|
||||
name : 'Personal projects',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'March 18, 2020',
|
||||
@@ -122,7 +112,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'ae908d59-07da-4dd8-aba0-124e50289295',
|
||||
folderId : null,
|
||||
name : 'Biometric portrait',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'August 29, 2020',
|
||||
@@ -134,7 +123,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '4038a5b6-5b1a-432d-907c-e037aeb817a8',
|
||||
folderId : null,
|
||||
name : 'Scanned image 20201012-1',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'September 13, 2020',
|
||||
@@ -146,7 +134,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '630d2e9a-d110-47a0-ac03-256073a0f56d',
|
||||
folderId : null,
|
||||
name : 'Scanned image 20201012-2',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'September 14, 2020',
|
||||
@@ -158,7 +145,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '1417d5ed-b616-4cff-bfab-286677b69d79',
|
||||
folderId : null,
|
||||
name : 'Prices',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'April 07, 2020',
|
||||
@@ -170,7 +156,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : 'bd2817c7-6751-40dc-b252-b6b5634c0689',
|
||||
folderId : null,
|
||||
name : 'Shopping list',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'March 26, 2021',
|
||||
@@ -182,7 +167,6 @@ export const items = [
|
||||
},
|
||||
{
|
||||
id : '14fb47c9-6eeb-4070-919c-07c8133285d1',
|
||||
folderId : null,
|
||||
name : 'Summer budget',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 02, 2020',
|
||||
@@ -191,67 +175,5 @@ export const items = [
|
||||
type : 'XLS',
|
||||
contents : null,
|
||||
description: null
|
||||
},
|
||||
|
||||
{
|
||||
id : '894e8514-03d3-4f5e-bb28-f6c092501fae',
|
||||
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
|
||||
name : 'A personal file',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 02, 2020',
|
||||
modifiedAt : 'June 02, 2020',
|
||||
size : '943 KB',
|
||||
type : 'XLS',
|
||||
contents : null,
|
||||
description: null
|
||||
},
|
||||
{
|
||||
id : '74010810-16cf-441d-a1aa-c9fb620fceea',
|
||||
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
|
||||
name : 'A personal folder',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'November 01, 2021',
|
||||
modifiedAt : 'November 01, 2021',
|
||||
size : '3015 MB',
|
||||
type : 'folder',
|
||||
contents : '907 files',
|
||||
description: 'Personal photos; selfies, family, vacation and etc.'
|
||||
},
|
||||
{
|
||||
id : 'a8c73e5a-8114-436d-ab54-d900b50b3762',
|
||||
folderId : '74010810-16cf-441d-a1aa-c9fb620fceea',
|
||||
name : 'A personal file within the personal folder',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 02, 2020',
|
||||
modifiedAt : 'June 02, 2020',
|
||||
size : '943 KB',
|
||||
type : 'XLS',
|
||||
contents : null,
|
||||
description: null
|
||||
},
|
||||
|
||||
{
|
||||
id : '12d851a8-4f60-473e-8a59-abe4b422ea99',
|
||||
folderId : '6da8747f-b474-4c9a-9eba-5ef212285500',
|
||||
name : 'Photos file',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 02, 2020',
|
||||
modifiedAt : 'June 02, 2020',
|
||||
size : '943 KB',
|
||||
type : 'XLS',
|
||||
contents : null,
|
||||
description: null
|
||||
},
|
||||
{
|
||||
id : '2836766d-27e1-4f40-a31a-5a8419105e7e',
|
||||
folderId : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
|
||||
name : 'Work file',
|
||||
createdBy : 'Brian Hughes',
|
||||
createdAt : 'June 02, 2020',
|
||||
modifiedAt : 'June 02, 2020',
|
||||
size : '943 KB',
|
||||
type : 'XLS',
|
||||
contents : null,
|
||||
description: null
|
||||
}
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,7 @@ import * as moment from 'moment';
|
||||
export const notifications = [
|
||||
{
|
||||
id : '493190c9-5b61-4912-afe5-78c21f1044d7',
|
||||
icon : 'heroicons_solid:star',
|
||||
icon : 'heroicons_outline:star',
|
||||
title : 'Daily challenges',
|
||||
description: 'Your submission has been accepted',
|
||||
time : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
|
||||
@@ -21,7 +21,7 @@ export const notifications = [
|
||||
},
|
||||
{
|
||||
id : 'b91ccb58-b06c-413b-b389-87010e03a120',
|
||||
icon : 'heroicons_solid:mail',
|
||||
icon : 'heroicons_outline:mail',
|
||||
title : 'Mailbox',
|
||||
description: 'You have 15 unread mails across 3 mailboxes',
|
||||
time : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
|
||||
@@ -31,7 +31,7 @@ export const notifications = [
|
||||
},
|
||||
{
|
||||
id : '541416c9-84a7-408a-8d74-27a43c38d797',
|
||||
icon : 'heroicons_solid:refresh',
|
||||
icon : 'heroicons_outline:refresh',
|
||||
title : 'Cron jobs',
|
||||
description: 'Your <em>Docker container</em> is ready to publish',
|
||||
time : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
|
||||
@@ -59,7 +59,7 @@ export const notifications = [
|
||||
},
|
||||
{
|
||||
id : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
|
||||
icon : 'heroicons_solid:mail',
|
||||
icon : 'heroicons_outline:mail',
|
||||
title : 'Mailbox',
|
||||
description: 'You have 3 new mails',
|
||||
time : moment().subtract(1, 'day').toISOString(), // 1 day ago
|
||||
@@ -69,7 +69,7 @@ export const notifications = [
|
||||
},
|
||||
{
|
||||
id : '8f8e1bf9-4661-4939-9e43-390957b60f42',
|
||||
icon : 'heroicons_solid:star',
|
||||
icon : 'heroicons_outline:star',
|
||||
title : 'Daily challenges',
|
||||
description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
|
||||
time : moment().subtract(3, 'days').toISOString(), // 3 days ago
|
||||
@@ -79,7 +79,7 @@ export const notifications = [
|
||||
},
|
||||
{
|
||||
id : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
|
||||
icon : 'heroicons_solid:refresh',
|
||||
icon : 'heroicons_outline:refresh',
|
||||
title : 'Cron jobs',
|
||||
description: 'Your Vagrant container is ready to download',
|
||||
time : moment().subtract(4, 'day').toISOString(), // 4 days ago
|
||||
|
||||
@@ -4,7 +4,6 @@ import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navi
|
||||
import { FuseMockApiService } from '@fuse/lib/mock-api';
|
||||
import { defaultNavigation } from 'app/mock-api/common/navigation/data';
|
||||
import { contacts } from 'app/mock-api/apps/contacts/data';
|
||||
import { tasks } from 'app/mock-api/apps/tasks/data';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -13,7 +12,6 @@ export class SearchMockApi
|
||||
{
|
||||
private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
|
||||
private readonly _contacts: any[] = contacts;
|
||||
private readonly _tasks: any[] = tasks;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
@@ -56,75 +54,58 @@ export class SearchMockApi
|
||||
return [200, {results: []}];
|
||||
}
|
||||
|
||||
// Filter the contacts
|
||||
const contactsResults = cloneDeep(this._contacts)
|
||||
.filter(contact => contact.name.toLowerCase().includes(query));
|
||||
|
||||
// Filter the navigation
|
||||
const pagesResults = cloneDeep(flatNavigation)
|
||||
.filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query))));
|
||||
const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query))));
|
||||
|
||||
// Filter the tasks
|
||||
const tasksResults = cloneDeep(this._tasks)
|
||||
.filter(task => task.title.toLowerCase().includes(query));
|
||||
// Filter the contacts
|
||||
const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query));
|
||||
|
||||
// Prepare the results array
|
||||
// Create the results array
|
||||
const results = [];
|
||||
|
||||
// If there are navigation results...
|
||||
if ( navigationResults.length > 0 )
|
||||
{
|
||||
// Normalize the results while marking the found chars
|
||||
navigationResults.forEach((result: any) => {
|
||||
|
||||
// Normalize
|
||||
result['hint'] = result.link;
|
||||
result['resultType'] = 'page';
|
||||
|
||||
// Mark the found chars
|
||||
const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
|
||||
result.title = result.title.replace(re, '<mark>$1</mark>');
|
||||
});
|
||||
|
||||
// Add the results
|
||||
results.push(...navigationResults);
|
||||
}
|
||||
|
||||
// If there are contacts results...
|
||||
if ( contactsResults.length > 0 )
|
||||
{
|
||||
// Normalize the results
|
||||
// Normalize the results while marking the found chars
|
||||
contactsResults.forEach((result) => {
|
||||
|
||||
// Normalize
|
||||
result.title = result.name;
|
||||
result.resultType = 'contact';
|
||||
|
||||
// Make the found chars bold
|
||||
const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
|
||||
result.title = result.title.replace(re, '<mark>$1</mark>');
|
||||
|
||||
// Add a link
|
||||
result.link = '/apps/contacts/' + result.id;
|
||||
});
|
||||
|
||||
// Add to the results
|
||||
results.push({
|
||||
id : 'contacts',
|
||||
label : 'Contacts',
|
||||
results: contactsResults
|
||||
});
|
||||
}
|
||||
|
||||
// If there are page results...
|
||||
if ( pagesResults.length > 0 )
|
||||
{
|
||||
// Normalize the results
|
||||
pagesResults.forEach((result: any) => {
|
||||
|
||||
});
|
||||
|
||||
// Add to the results
|
||||
results.push({
|
||||
id : 'pages',
|
||||
label : 'Pages',
|
||||
results: pagesResults
|
||||
});
|
||||
}
|
||||
|
||||
// If there are tasks results...
|
||||
if ( tasksResults.length > 0 )
|
||||
{
|
||||
// Normalize the results
|
||||
tasksResults.forEach((result) => {
|
||||
|
||||
// Add a link
|
||||
result.link = '/apps/tasks/' + result.id;
|
||||
});
|
||||
|
||||
// Add to the results
|
||||
results.push({
|
||||
id : 'tasks',
|
||||
label : 'Tasks',
|
||||
results: tasksResults
|
||||
});
|
||||
// Add the results to the results object
|
||||
results.push(...contactsResults);
|
||||
}
|
||||
|
||||
// Return the response
|
||||
return [200, results];
|
||||
return [200, {results}];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,9 +3,9 @@ export const shortcuts = [
|
||||
{
|
||||
id : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
|
||||
label : 'Changelog',
|
||||
description: 'List of changes',
|
||||
description: 'Latest version: v1.2',
|
||||
icon : 'heroicons_outline:clipboard-list',
|
||||
link : '/docs/changelog',
|
||||
link : '/dashboards/project',
|
||||
useRouter : true
|
||||
},
|
||||
{
|
||||
@@ -13,7 +13,7 @@ export const shortcuts = [
|
||||
label : 'Documentation',
|
||||
description: 'Getting started',
|
||||
icon : 'heroicons_outline:book-open',
|
||||
link : '/docs/guides/getting-started/introduction',
|
||||
link : '/dashboards/project',
|
||||
useRouter : true
|
||||
},
|
||||
{
|
||||
@@ -21,7 +21,7 @@ export const shortcuts = [
|
||||
label : 'Help center',
|
||||
description: 'FAQs and guides',
|
||||
icon : 'heroicons_outline:support',
|
||||
link : '/apps/help-center',
|
||||
link : '/pages/help-center',
|
||||
useRouter : true
|
||||
},
|
||||
{
|
||||
@@ -29,7 +29,7 @@ export const shortcuts = [
|
||||
label : 'Dashboard',
|
||||
description: 'User analytics',
|
||||
icon : 'heroicons_outline:chart-pie',
|
||||
link : '/dashboards/analytics',
|
||||
link : '/dashboards/project',
|
||||
useRouter : true
|
||||
},
|
||||
{
|
||||
@@ -67,7 +67,7 @@ export const shortcuts = [
|
||||
{
|
||||
id : '0a240ab8-e19d-4503-bf68-20013030d526',
|
||||
label : 'Reload',
|
||||
description: 'Reload the app',
|
||||
description: 'Restart the app',
|
||||
icon : 'heroicons_outline:refresh',
|
||||
link : '/dashboards/project',
|
||||
useRouter : false
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'academy',
|
||||
templateUrl : './academy.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { academyRoutes } from 'app/modules/admin/apps/academy/academy.routing';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AcademyComponent,
|
||||
AcademyDetailsComponent,
|
||||
AcademyListComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(academyRoutes),
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatTooltipModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule,
|
||||
MatTabsModule
|
||||
]
|
||||
})
|
||||
export class AcademyModule
|
||||
{
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCategoriesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Category[]>
|
||||
{
|
||||
return this._academyService.getCategories();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCoursesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course[]>
|
||||
{
|
||||
return this._academyService.getCourses();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCourseResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _academyService: AcademyService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course>
|
||||
{
|
||||
return this._academyService.getCourseById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyCategoriesResolver, AcademyCourseResolver, AcademyCoursesResolver } from 'app/modules/admin/apps/academy/academy.resolvers';
|
||||
|
||||
export const academyRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: AcademyComponent,
|
||||
resolve : {
|
||||
categories: AcademyCategoriesResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: AcademyListComponent,
|
||||
resolve : {
|
||||
courses: AcademyCoursesResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: AcademyDetailsComponent,
|
||||
resolve : {
|
||||
course: AcademyCourseResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,105 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
|
||||
import { map, switchMap, tap } from 'rxjs/operators';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyService
|
||||
{
|
||||
// Private
|
||||
private _categories: BehaviorSubject<Category[] | null> = new BehaviorSubject(null);
|
||||
private _course: BehaviorSubject<Course | null> = new BehaviorSubject(null);
|
||||
private _courses: BehaviorSubject<Course[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for categories
|
||||
*/
|
||||
get categories$(): Observable<Category[]>
|
||||
{
|
||||
return this._categories.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for courses
|
||||
*/
|
||||
get courses$(): Observable<Course[]>
|
||||
{
|
||||
return this._courses.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for course
|
||||
*/
|
||||
get course$(): Observable<Course>
|
||||
{
|
||||
return this._course.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get categories
|
||||
*/
|
||||
getCategories(): Observable<Category[]>
|
||||
{
|
||||
return this._httpClient.get<Category[]>('api/apps/academy/categories').pipe(
|
||||
tap((response: any) => {
|
||||
this._categories.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get courses
|
||||
*/
|
||||
getCourses(): Observable<Course[]>
|
||||
{
|
||||
return this._httpClient.get<Course[]>('api/apps/academy/courses').pipe(
|
||||
tap((response: any) => {
|
||||
this._courses.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get course by id
|
||||
*/
|
||||
getCourseById(id: string): Observable<Course>
|
||||
{
|
||||
return this._httpClient.get<Course>('api/apps/academy/courses/course', {params: {id}}).pipe(
|
||||
map((course) => {
|
||||
|
||||
// Update the course
|
||||
this._course.next(course);
|
||||
|
||||
// Return the course
|
||||
return course;
|
||||
}),
|
||||
switchMap((course) => {
|
||||
|
||||
if ( !course )
|
||||
{
|
||||
return throwError('Could not found course with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(course);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
export interface Category
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
export interface Course
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
duration?: number;
|
||||
steps?: {
|
||||
order?: number;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
}[];
|
||||
totalSteps?: number;
|
||||
updatedAt?: number;
|
||||
featured?: boolean;
|
||||
progress?: {
|
||||
currentStep?: number;
|
||||
completed?: number;
|
||||
};
|
||||
}
|
||||
@@ -1,201 +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-90 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#matDrawer>
|
||||
<div class="flex flex-col items-start p-8 border-b">
|
||||
<!-- Back to courses -->
|
||||
<a
|
||||
class="inline-flex items-center leading-6 text-primary hover:underline"
|
||||
[routerLink]="['..']">
|
||||
<span class="inline-flex items-center">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-sm-left'"></mat-icon>
|
||||
<span class="ml-1.5 font-medium leading-5">Back to courses</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Course category -->
|
||||
<ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
|
||||
<div
|
||||
class="mt-7 py-0.5 px-3 rounded-full text-sm font-semibold"
|
||||
[ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
|
||||
'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
|
||||
'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
|
||||
'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
|
||||
{{category.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Course title & description -->
|
||||
<div class="mt-3 text-2xl font-semibold">{{course.title}}</div>
|
||||
<div class="text-secondary">{{course.description}}</div>
|
||||
<!-- Course time -->
|
||||
<div class="mt-6 flex items-center leading-5 text-md text-secondary">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:clock'"></mat-icon>
|
||||
<div class="ml-1.5">{{course.duration}} minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="py-2 px-8">
|
||||
<ol>
|
||||
<ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
|
||||
<li
|
||||
class="relative group py-6"
|
||||
[class.current-step]="step.order === currentStep">
|
||||
<ng-container *ngIf="!last">
|
||||
<div
|
||||
class="absolute top-6 left-4 w-0.5 h-full -ml-px"
|
||||
[ngClass]="{'bg-primary': step.order < currentStep,
|
||||
'bg-gray-300 dark:bg-gray-600': step.order >= currentStep}"></div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="relative flex items-start cursor-pointer"
|
||||
(click)="goToStep(step.order)">
|
||||
<div
|
||||
class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset ring-transparent bg-card dark:bg-default"
|
||||
[ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800': step.order < currentStep,
|
||||
'ring-primary': step.order === currentStep,
|
||||
'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
|
||||
<!-- Check icon, show if the step is completed -->
|
||||
<ng-container *ngIf="step.order < currentStep">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is the current step -->
|
||||
<ng-container *ngIf="step.order === currentStep">
|
||||
<div class="text-md font-semibold text-primary dark:text-primary-500">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is not completed -->
|
||||
<ng-container *ngIf="step.order > currentStep">
|
||||
<div class="text-md font-semibold text-hint group-hover:text-secondary">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="font-medium leading-4">{{step.title}}</div>
|
||||
<div class="mt-1.5 text-md leading-4 text-secondary">{{step.subtitle}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
|
||||
<!-- Title & Actions -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[routerLink]="['..']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
|
||||
</button>
|
||||
<h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
|
||||
{{course.title}}
|
||||
</h2>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="hidden lg:block flex-0 h-0.5 w-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
|
||||
<!-- Main -->
|
||||
<div
|
||||
class="flex-auto overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Steps -->
|
||||
<mat-tab-group
|
||||
class="fuse-mat-no-header"
|
||||
[animationDuration]="'200'"
|
||||
#courseSteps>
|
||||
<ng-container *ngFor="let step of course.steps; trackBy: trackByFn">
|
||||
<mat-tab>
|
||||
<ng-template matTabContent>
|
||||
<div
|
||||
class="prose prose-sm max-w-3xl mx-auto sm:my-2 lg:mt-4 p-6 sm:p-10 sm:py-12 rounded-2xl shadow overflow-hidden bg-card"
|
||||
[innerHTML]="step.content"></div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</ng-container>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- Navigation - Desktop -->
|
||||
<div class="z-10 sticky hidden lg:flex bottom-4 p-4">
|
||||
<div class="flex items-center justify-center mx-auto p-2 rounded-full shadow-lg bg-primary">
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToPreviousStep()">
|
||||
<mat-icon
|
||||
class="mr-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="mr-1">Prev</span>
|
||||
</button>
|
||||
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToNextStep()">
|
||||
<span class="ml-1">Next</span>
|
||||
<mat-icon
|
||||
class="ml-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Progress & Navigation - Mobile -->
|
||||
<div class="lg:hidden flex items-center p-4 border-t bg-card">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="matDrawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:view-list'"></mat-icon>
|
||||
</button>
|
||||
<div class="flex items-center justify-center ml-1 lg:ml-2 font-medium leading-5">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="flex-auto ml-6 rounded-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-icon-button
|
||||
(click)="goToPreviousStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-0.5"
|
||||
mat-icon-button
|
||||
(click)="goToNextStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@@ -1,204 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { MatTabGroup } from '@angular/material/tabs';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('courseSteps', {static: true}) courseSteps: MatTabGroup;
|
||||
categories: Category[];
|
||||
course: Course;
|
||||
currentStep: number = 0;
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: Document,
|
||||
private _academyService: AcademyService,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the categories
|
||||
this._academyService.categories$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((categories: Category[]) => {
|
||||
|
||||
// Get the categories
|
||||
this.categories = categories;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the course
|
||||
this._academyService.course$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((course: Course) => {
|
||||
|
||||
// Get the course
|
||||
this.course = course;
|
||||
|
||||
// Go to step
|
||||
this.goToStep(course.progress.currentStep);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
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();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Go to given step
|
||||
*
|
||||
* @param step
|
||||
*/
|
||||
goToStep(step: number): void
|
||||
{
|
||||
// Set the current step
|
||||
this.currentStep = step;
|
||||
|
||||
// Go to the step
|
||||
this.courseSteps.selectedIndex = this.currentStep;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous step
|
||||
*/
|
||||
goToPreviousStep(): void
|
||||
{
|
||||
// Return if we already on the first step
|
||||
if ( this.currentStep === 0 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep - 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next step
|
||||
*/
|
||||
goToNextStep(): void
|
||||
{
|
||||
// Return if we already on the last step
|
||||
if ( this.currentStep === this.course.totalSteps - 1 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep + 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Scrolls the current step element from
|
||||
* sidenav into the view. This only happens when
|
||||
* previous/next buttons pressed as we don't want
|
||||
* to change the scroll position of the sidebar
|
||||
* when the user actually clicks around the sidebar.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _scrollCurrentStepElementIntoView(): void
|
||||
{
|
||||
// Wrap everything into setTimeout so we can make sure that the 'current-step' class points to correct element
|
||||
setTimeout(() => {
|
||||
|
||||
// Get the current step element and scroll it into view
|
||||
const currentStepElement = this._document.getElementsByClassName('current-step')[0];
|
||||
if ( currentStepElement )
|
||||
{
|
||||
currentStepElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block : 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user