Merge remote-tracking branch 'origin/demo' into starter

(layouts) Common components of layouts now requests their data directly from their service rather than getting it from route data
(core) New navigation service to request and store the navigation data

package-lock.json

@@ -5027,9 +5027,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.3.727",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz",
-            "integrity": "sha512-Mfz4FIB4FSvEwBpDfdipRIrwd6uo8gUDoRDF4QEYb4h4tSuI3ov594OrjU6on042UlFHouIJpClDODGkPcBSbg==",
+            "version": "1.3.728",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.728.tgz",
+            "integrity": "sha512-SHv4ziXruBpb1Nz4aTuqEHBYi/9GNCJMYIJgDEXrp/2V01nFXMNFUTli5Z85f5ivSkioLilQatqBYFB44wNJrA==",
             "dev": true
         },
         "emoji-regex": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.0.3",
+    "version": "13.1.0",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {
@@ -12,17 +12,17 @@
         "e2e": "ng e2e"
     },
     "dependencies": {
-        "@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",
+        "@angular/animations": "12.0.4",
+        "@angular/cdk": "12.0.4",
+        "@angular/common": "12.0.4",
+        "@angular/compiler": "12.0.4",
+        "@angular/core": "12.0.4",
+        "@angular/forms": "12.0.4",
+        "@angular/material": "12.0.4",
+        "@angular/material-moment-adapter": "12.0.4",
+        "@angular/platform-browser": "12.0.4",
+        "@angular/platform-browser-dynamic": "12.0.4",
+        "@angular/router": "12.0.4",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -32,32 +32,32 @@
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
         "@ngneat/transloco": "2.21.0",
-        "apexcharts": "3.26.3",
+        "apexcharts": "3.27.1",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.0.0",
+        "highlight.js": "11.0.1",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.5.10",
+        "ng-apexcharts": "1.5.12",
         "ngx-markdown": "12.0.1",
         "ngx-quill": "14.0.0",
         "perfect-scrollbar": "1.5.1",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
-        "tslib": "2.2.0",
+        "tslib": "2.3.0",
         "web-animations-js": "2.3.2",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.0.2",
+        "@angular-devkit/build-angular": "12.0.4",
         "@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",
+        "@angular/cli": "12.0.4",
+        "@angular/compiler-cli": "12.0.4",
+        "@angular/language-service": "12.0.4",
         "@tailwindcss/aspect-ratio": "0.2.1",
         "@tailwindcss/line-clamp": "0.2.1",
         "@tailwindcss/typography": "0.4.1",
@@ -67,23 +67,23 @@
         "@types/jasmine": "3.6.11",
         "@types/lodash": "4.14.170",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.14",
-        "@typescript-eslint/eslint-plugin": "4.26.0",
-        "@typescript-eslint/parser": "4.26.0",
+        "@types/node": "12.20.15",
+        "@typescript-eslint/eslint-plugin": "4.26.1",
+        "@typescript-eslint/parser": "4.26.1",
         "autoprefixer": "10.2.6",
         "chroma-js": "2.1.2",
-        "eslint": "7.27.0",
+        "eslint": "7.28.0",
         "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.1.2",
+        "eslint-plugin-jsdoc": "35.2.0",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "jasmine-core": "3.7.1",
-        "karma": "6.3.3",
+        "karma": "6.3.4",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.6.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.0",
+        "postcss": "8.3.3",
         "tailwindcss": "2.1.4",
         "typescript": "4.2.4"
     }

src/@fuse/components/fullscreen/fullscreen.component.html

@@ -1,7 +1,12 @@
 <!-- Button -->
 <button
     mat-icon-button
-    [matTooltip]="'Toggle Fullscreen'"
+    [matTooltip]="tooltip || 'Toggle Fullscreen'"
     (click)="toggleFullscreen()">
-    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
+    <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
 </button>
+
+<!-- Default icon -->
+<ng-template #defaultIconTpl>
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
+</ng-template>

src/@fuse/components/fullscreen/fullscreen.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
 
@@ -11,6 +11,8 @@ 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;

src/@fuse/components/fullscreen/fullscreen.module.ts

@@ -3,15 +3,17 @@ 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
+        MatTooltipModule,
+        CommonModule
     ],
     exports     : [
         FuseFullscreenComponent

src/@fuse/components/navigation/horizontal/components/basic/basic.component.html

@@ -19,7 +19,8 @@
     <a
         class="fuse-horizontal-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
-        [href]="item.link">
+        [href]="item.link"
+        [target]="item.target || '_self'">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -49,6 +50,7 @@
         class="fuse-horizontal-navigation-item"
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
+        [target]="item.target || '_self'"
         (click)="item.function(item)"
         mat-menu-item>
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>

src/@fuse/components/navigation/navigation.types.ts

@@ -17,6 +17,12 @@ export interface FuseNavigationItem
     disabled?: boolean;
     link?: string;
     externalLink?: boolean;
+    target?:
+        | '_blank'
+        | '_self'
+        | '_parent'
+        | '_top'
+        | string;
     exactMatch?: boolean;
     isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;

src/@fuse/components/navigation/vertical/components/basic/basic.component.html

@@ -19,7 +19,8 @@
     <a
         class="fuse-vertical-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
-        [href]="item.link">
+        [href]="item.link"
+        [target]="item.target || '_self'">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -49,6 +50,7 @@
         class="fuse-vertical-navigation-item"
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
+        [target]="item.target || '_self'"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>

src/@fuse/components/navigation/vertical/styles/appearances/default.scss

@@ -335,6 +335,7 @@ fuse-vertical-navigation {
         }
 
         > .fuse-vertical-navigation-item-children {
+            margin-top: 6px;
 
             > *:last-child {
                 padding-bottom: 6px;

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.0.3').full;
+export const FUSE_VERSION = new Version('13.1.0').full;

src/app/app.resolvers.ts

@@ -1,9 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { forkJoin, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { InitialData } from 'app/app.types';
+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';
 
 @Injectable({
     providedIn: 'root'
@@ -13,7 +15,13 @@ export class InitialDataResolver implements Resolve<any>
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
+    constructor(
+        private _messagesService: MessagesService,
+        private _navigationService: NavigationService,
+        private _notificationsService: NotificationsService,
+        private _shortcutsService: ShortcutsService,
+        private _userService: UserService
+    )
     {
     }
 
@@ -27,29 +35,15 @@ export class InitialDataResolver implements Resolve<any>
      * @param route
      * @param state
      */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InitialData>
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
     {
         // Fork join multiple API endpoint calls to wait all of them to finish
         return forkJoin([
-            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
-                })
-            )
-        );
+            this._navigationService.get(),
+            this._messagesService.getAll(),
+            this._notificationsService.getAll(),
+            this._shortcutsService.getAll(),
+            this._userService.get()
+        ]);
     }
 }

src/app/app.routing.ts

@@ -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,129 +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: [
-
-                // Angular Material
-                {path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
-
-                // TailwindCSS
-                {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
-
-                // 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)},
-
-                // 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)},
-
-                // Core features
-                {path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
-
-                // Other components
-                {path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
-            ]},
-
-            // 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)},
         ]
     }
 ];

src/app/app.types.ts

@@ -1,19 +0,0 @@
-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;
-}

src/app/core/navigation/navigation.service.ts

@@ -1,14 +1,15 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observable, ReplaySubject } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { Navigation } from 'app/core/navigation/navigation.types';
 
 @Injectable({
     providedIn: 'root'
 })
-export class AnalyticsService
+export class NavigationService
 {
-    private _data: BehaviorSubject<any> = new BehaviorSubject(null);
+    private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
 
     /**
      * Constructor
@@ -22,11 +23,11 @@ export class AnalyticsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Getter for data
+     * Getter for navigation
      */
-    get data$(): Observable<any>
+    get navigation$(): Observable<Navigation>
     {
-        return this._data.asObservable();
+        return this._navigation.asObservable();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -34,13 +35,13 @@ export class AnalyticsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Get data
+     * Get all navigation data
      */
-    getData(): Observable<any>
+    get(): Observable<Navigation>
     {
-        return this._httpClient.get('api/dashboards/analytics').pipe(
-            tap((response: any) => {
-                this._data.next(response);
+        return this._httpClient.get<Navigation>('api/common/navigation').pipe(
+            tap((navigation) => {
+                this._navigation.next(navigation);
             })
         );
     }

src/app/core/navigation/navigation.types.ts

@@ -0,0 +1,9 @@
+import { FuseNavigationItem } from '@fuse/components/navigation';
+
+export interface Navigation
+{
+    compact: FuseNavigationItem[];
+    default: FuseNavigationItem[];
+    futuristic: FuseNavigationItem[];
+    horizontal: FuseNavigationItem[];
+}

src/app/core/user/user.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { User } from 'app/core/user/user.model';
+import { map, tap } from 'rxjs/operators';
+import { User } from 'app/core/user/user.types';
 
 @Injectable({
     providedIn: 'root'
@@ -42,6 +42,18 @@ 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
      *
@@ -51,7 +63,6 @@ export class UserService
     {
         return this._httpClient.patch<User>('api/common/user', {user}).pipe(
             map((response) => {
-                // Execute the observable
                 this._user.next(response);
             })
         );

src/app/layout/common/languages/languages.component.ts

@@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 
 @Component({
-    selector       : 'language',
-    templateUrl    : './language.component.html',
+    selector       : 'languages',
+    templateUrl    : './languages.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'language'
+    exportAs       : 'languages'
 })
-export class LanguageComponent implements OnInit, OnDestroy
+export class LanguagesComponent implements OnInit, OnDestroy
 {
     availableLangs: AvailableLangs;
     activeLang: string;

src/app/layout/common/languages/languages.module.ts

@@ -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 { LanguageComponent } from 'app/layout/common/language/language.component';
+import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        LanguageComponent
+        LanguagesComponent
     ],
     imports     : [
         MatButtonModule,
@@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        LanguageComponent
+        LanguagesComponent
     ]
 })
-export class LanguageModule
+export class LanguagesModule
 {
 }

src/app/layout/common/messages/messages.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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, OnChanges, OnDestroy
+export class MessagesComponent implements OnInit, 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,21 +40,6 @@ export class MessagesComponent implements OnInit, OnChanges, 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
      */

src/app/layout/common/messages/messages.service.ts

@@ -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 } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,17 +35,15 @@ export class MessagesService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store messages on the service
-     *
-     * @param messages
+     * Get all messages
      */
-    store(messages: Message[]): Observable<Message[]>
+    getAll(): Observable<Message[]>
     {
-        // Load the messages
-        this._messages.next(messages);
-
-        // Return the messages
-        return this.messages$;
+        return this._httpClient.get<Message[]>('api/common/messages').pipe(
+            tap((messages) => {
+                this._messages.next(messages);
+            })
+        );
     }
 
     /**

src/app/layout/common/notifications/notifications.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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 OnChanges, OnInit, OnDestroy
+export class NotificationsComponent implements 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,21 +40,6 @@ export class NotificationsComponent implements OnChanges, 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
      */

src/app/layout/common/notifications/notifications.service.ts

@@ -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 } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,17 +35,15 @@ export class NotificationsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store notifications on the service
-     *
-     * @param notifications
+     * Get all notifications
      */
-    store(notifications: Notification[]): Observable<Notification[]>
+    getAll(): Observable<Notification[]>
     {
-        // Load the notifications
-        this._notifications.next(notifications);
-
-        // Return the notifications
-        return this.notifications$;
+        return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
+            tap((notifications) => {
+                this._notifications.next(notifications);
+            })
+        );
     }
 
     /**

src/app/layout/common/search/search.component.html

@@ -6,7 +6,6 @@
         (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"
@@ -23,22 +22,36 @@
             (keydown)="onKeydown($event)"
             #barSearchInput>
         <mat-autocomplete
-            class="max-h-128 border-t rounded-b shadow-md"
+            class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
-                class="h-14 px-6 py-0 sm:px-8 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="results && !results.length">
+                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
+                *ngIf="resultSets && !resultSets.length">
                 No results found!
             </mat-option>
-            <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 *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>
         </mat-autocomplete>
         <button
@@ -69,62 +82,89 @@
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
-                class="h-14 px-5 py-0 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="results && !results.length">
+                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
+                *ngIf="resultSets && !resultSets.length">
                 No results found!
             </mat-option>
-            <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 *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>
         </mat-autocomplete>
     </div>
 </ng-container>
 
+<!-- Contact result template -->
 <ng-template
-    #searchResult
+    #contactResult
     let-result>
-
-    <!-- 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 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>
-    </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 class="ml-3 truncate">
+            <span [innerHTML]="result.name"></span>
         </div>
-    </ng-container>
-
+    </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>
+
+<!-- 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>

src/app/layout/common/search/search.component.ts

@@ -20,7 +20,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     @Output() search: EventEmitter<any> = new EventEmitter<any>();
 
     opened: boolean = false;
-    results: any[];
+    resultSets: 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 search results to null if there is no value or
+                    // Set the resultSets 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.results = null;
+                        this.resultSets = null;
                     }
 
                     // Continue
@@ -121,13 +121,13 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
             )
             .subscribe((value) => {
                 this._httpClient.post('api/common/search', {query: value})
-                    .subscribe((response: any) => {
+                    .subscribe((resultSets: any) => {
 
-                        // Store the results
-                        this.results = response.results;
+                        // Store the result sets
+                        this.resultSets = resultSets;
 
                         // Execute the event
-                        this.search.next(this.results);
+                        this.search.next(resultSets);
                     });
             });
     }

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -21,7 +21,15 @@
                         [svgIcon]="'heroicons_solid:x'"></mat-icon>
                 </button>
             </div>
-            <div class="text-lg font-medium leading-10">Shortcuts</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="ml-auto">
 
                 <!-- View mode -->

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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 OnChanges, OnInit, OnDestroy
+export class ShortcutsComponent implements 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,21 +43,6 @@ export class ShortcutsComponent implements OnChanges, 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
      */

src/app/layout/common/shortcuts/shortcuts.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
-import { map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
 
 @Injectable({
@@ -35,17 +35,15 @@ export class ShortcutsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store shortcuts on the service
-     *
-     * @param shortcuts
+     * Get all messages
      */
-    store(shortcuts: Shortcut[]): Observable<Shortcut[]>
+    getAll(): Observable<Shortcut[]>
     {
-        // Load the shortcuts
-        this._shortcuts.next(shortcuts);
-
-        // Return the shortcuts
-        return this.shortcuts$;
+        return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
+            tap((shortcuts) => {
+                this._shortcuts.next(shortcuts);
+            })
+        );
     }
 
     /**

src/app/layout/common/user/user.component.ts

@@ -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.model';
+import { User } from 'app/core/user/user.types';
 import { UserService } from 'app/core/user/user.service';
 
 @Component({
-    selector       : 'user-menu',
-    templateUrl    : './user-menu.component.html',
+    selector       : 'user',
+    templateUrl    : './user.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'userMenu'
+    exportAs       : 'user'
 })
-export class UserMenuComponent implements OnInit, OnDestroy
+export class UserComponent implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_showAvatar: BooleanInput;

src/app/layout/common/user/user.module.ts

@@ -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 { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
+import { UserComponent } from 'app/layout/common/user/user.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        UserMenuComponent
+        UserComponent
     ],
     imports     : [
         MatButtonModule,
@@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        UserMenuComponent
+        UserComponent
     ]
 })
-export class UserMenuModule
+export class UserModule
 {
 }

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -6,7 +6,7 @@
             class="dark bg-gray-900 print:hidden"
             [mode]="'over'"
             [name]="'mainNavigation'"
-            [navigation]="data.navigation.default"
+            [navigation]="navigation.default"
             [opened]="false">
             <!-- Navigation header hook -->
             <ng-container fuseVerticalNavigationContentHeader>
@@ -50,7 +50,7 @@
                 <fuse-horizontal-navigation
                     class="mr-2"
                     [name]="'mainNavigation'"
-                    [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
+                    [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
             </ng-container>
             <!-- Navigation toggle button -->
             <ng-container *ngIf="isScreenSmall">
@@ -63,13 +63,13 @@
             </ng-container>
             <!-- Components -->
             <div class="flex items-center pl-2 ml-auto space-x-2">
-                <language></language>
+                <languages></languages>
                 <fuse-fullscreen></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
-                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                <messages [messages]="data.messages"></messages>
-                <notifications [notifications]="data.notifications"></notifications>
-                <user-menu></user-menu>
+                <shortcuts></shortcuts>
+                <messages></messages>
+                <notifications></notifications>
+                <user></user>
             </div>
         </div>
 

src/app/layout/layouts/horizontal/centered/centered.component.ts

@@ -4,7 +4,8 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'centered-layout',
@@ -13,7 +14,7 @@ import { InitialData } from 'app/app.types';
 })
 export class CenteredLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
+    navigation: Navigation;
     isScreenSmall: boolean;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -23,6 +24,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/horizontal/centered/centered.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -46,13 +46,13 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <language></language>
+                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                    <messages [messages]="data.messages"></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
-                    <user-menu></user-menu>
+                    <shortcuts></shortcuts>
+                    <messages></messages>
+                    <notifications></notifications>
+                    <user></user>
                 </div>
             </div>
         </div>
@@ -63,7 +63,7 @@
                     <fuse-horizontal-navigation
                         class="-mx-4"
                         [name]="'mainNavigation'"
-                        [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
                 </div>
             </div>
         </ng-container>

src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'enterprise-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class EnterpriseLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/material/material.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -52,13 +52,13 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <language></language>
+                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                    <messages [messages]="data.messages"></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
-                    <user-menu></user-menu>
+                    <shortcuts></shortcuts>
+                    <messages></messages>
+                    <notifications></notifications>
+                    <user></user>
                 </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]="data.navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
                 </div>
             </ng-container>
         </div>

src/app/layout/layouts/horizontal/material/material.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'material-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/horizontal/material/material.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -43,7 +43,7 @@
             <fuse-horizontal-navigation
                 class="mr-2"
                 [name]="'mainNavigation'"
-                [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
+                [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
         </ng-container>
         <!-- Navigation toggle button -->
         <ng-container *ngIf="isScreenSmall">
@@ -55,13 +55,13 @@
         </ng-container>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 

src/app/layout/layouts/horizontal/modern/modern.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'modern-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ModernLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/horizontal/modern/modern.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -3,7 +3,7 @@
     class="dark bg-gray-900 print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.default"
+    [navigation]="navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -36,13 +36,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 

src/app/layout/layouts/vertical/classic/classic.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'classic-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ClassicLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/classic/classic.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/classy/classy.component.html

@@ -3,7 +3,7 @@
     class="dark bg-gray-900 print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.default"
+    [navigation]="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]="data.notifications"></notifications>
-                <user-menu [showAvatar]="false"></user-menu>
+                <notifications></notifications>
+                <user [showAvatar]="false"></user>
             </div>
         </div>
         <!-- User -->
@@ -25,20 +25,20 @@
             <div class="relative w-24 h-24">
                 <img
                     class="w-full h-full rounded-full"
-                    *ngIf="data.user.avatar"
-                    [src]="data.user.avatar"
+                    *ngIf="user.avatar"
+                    [src]="user.avatar"
                     alt="User avatar">
                 <mat-icon
                     class="icon-size-24"
-                    *ngIf="!data.user.avatar"
+                    *ngIf="!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">
-                    {{data.user.name}}
+                    {{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">
-                    {{data.user.email}}
+                    {{user.email}}
                 </div>
             </div>
         </div>
@@ -66,11 +66,11 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <shortcuts></shortcuts>
+            <messages></messages>
         </div>
     </div>
 

src/app/layout/layouts/vertical/classy/classy.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+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';
 
 @Component({
     selector     : 'classy-layout',
@@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
 })
 export class ClassyLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
+    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +27,8 @@ 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
     )
@@ -50,10 +56,19 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // 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 media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/classy/classy.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/compact/compact.component.html

@@ -4,7 +4,7 @@
     [appearance]="'compact'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.compact"
+    [navigation]="navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -31,13 +31,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 

src/app/layout/layouts/vertical/compact/compact.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'compact-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class CompactLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/compact/compact.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/dense/dense.component.html

@@ -4,7 +4,7 @@
     [appearance]="navigationAppearance"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.default"
+    [navigation]="navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -40,13 +40,13 @@
         </div>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 

src/app/layout/layouts/vertical/dense/dense.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'dense-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class DenseLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     navigationAppearance: 'default' | 'dense' = 'dense';
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -24,6 +25,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -51,10 +53,12 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/dense/dense.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -3,7 +3,7 @@
     class="dark bg-indigo-800 text-white print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.futuristic"
+    [navigation]="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-menu></user-menu>
+            <user></user>
             <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">
-                    {{data.user.name}}
+                    {{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
@@ -45,12 +45,12 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
         </div>
     </div>
 

src/app/layout/layouts/vertical/futuristic/futuristic.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+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';
 
 @Component({
     selector     : 'futuristic-layout',
@@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
 })
 export class FuturisticLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
+    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +27,8 @@ 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
     )
@@ -50,10 +56,19 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // 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 media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/futuristic/futuristic.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/thin/thin.component.html

@@ -4,7 +4,7 @@
     [appearance]="'thin'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.compact"
+    [navigation]="navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -32,13 +32,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 

src/app/layout/layouts/vertical/thin/thin.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'thin-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ThinLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

src/app/layout/layouts/vertical/thin/thin.module.ts

@@ -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 { LanguageModule } from 'app/layout/common/language/language.module';
+import { LanguagesModule } from 'app/layout/common/languages/languages.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.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,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [

src/app/mock-api/apps/file-manager/api.ts

@@ -33,10 +33,18 @@ export class FileManagerMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/file-manager')
-            .reply(() => {
+            .reply(({request}) => {
 
                 // Clone the items
-                const items = cloneDeep(this._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);
 
                 // Separate the items by folders and files
                 const folders = items.filter(item => item.type === 'folder');
@@ -46,11 +54,38 @@ 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
+                        files,
+                        path
                     }
                 ];
             });

src/app/mock-api/apps/file-manager/data.ts

@@ -2,6 +2,7 @@
 export const items = [
     {
         id         : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+        folderId   : null,
         name       : 'Personal',
         createdBy  : 'Brian Hughes',
         createdAt  : 'April 24, 2018',
@@ -13,6 +14,7 @@ export const items = [
     },
     {
         id         : '6da8747f-b474-4c9a-9eba-5ef212285500',
+        folderId   : null,
         name       : 'Photos',
         createdBy  : 'Brian Hughes',
         createdAt  : 'November 01, 2021',
@@ -24,6 +26,7 @@ export const items = [
     },
     {
         id         : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+        folderId   : null,
         name       : 'Work',
         createdBy  : 'Brian Hughes',
         createdAt  : 'May 8, 2020',
@@ -35,6 +38,7 @@ export const items = [
     },
     {
         id         : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
+        folderId   : null,
         name       : 'Contract #123',
         createdBy  : 'Brian Hughes',
         createdAt  : 'January 14, 2021',
@@ -46,6 +50,7 @@ export const items = [
     },
     {
         id         : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
+        folderId   : null,
         name       : 'Estimated budget',
         createdBy  : 'Brian Hughes',
         createdAt  : 'December 14, 2020',
@@ -57,6 +62,7 @@ export const items = [
     },
     {
         id         : '157adb9a-14f8-4559-ac93-8be893c9f80a',
+        folderId   : null,
         name       : 'DMCA notice #42',
         createdBy  : 'Brian Hughes',
         createdAt  : 'May 8, 2021',
@@ -68,6 +74,7 @@ export const items = [
     },
     {
         id         : '4f64597a-df7e-461c-ad60-f33e5f7e0747',
+        folderId   : null,
         name       : 'Invoices',
         createdBy  : 'Brian Hughes',
         createdAt  : 'January 12, 2020',
@@ -79,6 +86,7 @@ export const items = [
     },
     {
         id         : 'e445c445-57b2-4476-8c62-b068e3774b8e',
+        folderId   : null,
         name       : 'Crash logs',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 8, 2020',
@@ -90,6 +98,7 @@ export const items = [
     },
     {
         id         : 'b482f93e-7847-4614-ad48-b78b78309f81',
+        folderId   : null,
         name       : 'System logs',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 8, 2020',
@@ -101,6 +110,7 @@ export const items = [
     },
     {
         id         : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
+        folderId   : null,
         name       : 'Personal projects',
         createdBy  : 'Brian Hughes',
         createdAt  : 'March 18, 2020',
@@ -112,6 +122,7 @@ export const items = [
     },
     {
         id         : 'ae908d59-07da-4dd8-aba0-124e50289295',
+        folderId   : null,
         name       : 'Biometric portrait',
         createdBy  : 'Brian Hughes',
         createdAt  : 'August 29, 2020',
@@ -123,6 +134,7 @@ export const items = [
     },
     {
         id         : '4038a5b6-5b1a-432d-907c-e037aeb817a8',
+        folderId   : null,
         name       : 'Scanned image 20201012-1',
         createdBy  : 'Brian Hughes',
         createdAt  : 'September 13, 2020',
@@ -134,6 +146,7 @@ export const items = [
     },
     {
         id         : '630d2e9a-d110-47a0-ac03-256073a0f56d',
+        folderId   : null,
         name       : 'Scanned image 20201012-2',
         createdBy  : 'Brian Hughes',
         createdAt  : 'September 14, 2020',
@@ -145,6 +158,7 @@ export const items = [
     },
     {
         id         : '1417d5ed-b616-4cff-bfab-286677b69d79',
+        folderId   : null,
         name       : 'Prices',
         createdBy  : 'Brian Hughes',
         createdAt  : 'April 07, 2020',
@@ -156,6 +170,7 @@ export const items = [
     },
     {
         id         : 'bd2817c7-6751-40dc-b252-b6b5634c0689',
+        folderId   : null,
         name       : 'Shopping list',
         createdBy  : 'Brian Hughes',
         createdAt  : 'March 26, 2021',
@@ -167,6 +182,7 @@ export const items = [
     },
     {
         id         : '14fb47c9-6eeb-4070-919c-07c8133285d1',
+        folderId   : null,
         name       : 'Summer budget',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 02, 2020',
@@ -175,5 +191,67 @@ 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
     }
 ];

src/app/mock-api/common/notifications/data.ts

@@ -4,7 +4,7 @@ import * as moment from 'moment';
 export const notifications = [
     {
         id         : '493190c9-5b61-4912-afe5-78c21f1044d7',
-        icon       : 'heroicons_outline:star',
+        icon       : 'heroicons_solid: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_outline:mail',
+        icon       : 'heroicons_solid: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_outline:refresh',
+        icon       : 'heroicons_solid: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_outline:mail',
+        icon       : 'heroicons_solid: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_outline:star',
+        icon       : 'heroicons_solid: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_outline:refresh',
+        icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your Vagrant container is ready to download',
         time       : moment().subtract(4, 'day').toISOString(), // 4 days ago

src/app/mock-api/common/search/api.ts

@@ -4,6 +4,7 @@ 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'
@@ -12,6 +13,7 @@ export class SearchMockApi
 {
     private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
     private readonly _contacts: any[] = contacts;
+    private readonly _tasks: any[] = tasks;
 
     /**
      * Constructor
@@ -54,58 +56,75 @@ export class SearchMockApi
                     return [200, {results: []}];
                 }
 
-                // Filter the navigation
-                const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query))));
-
                 // Filter the contacts
-                const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query));
+                const contactsResults = cloneDeep(this._contacts)
+                    .filter(contact => contact.name.toLowerCase().includes(query));
 
-                // Create the results array
+                // Filter the navigation
+                const pagesResults = cloneDeep(flatNavigation)
+                    .filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query))));
+
+                // Filter the tasks
+                const tasksResults = cloneDeep(this._tasks)
+                    .filter(task => task.title.toLowerCase().includes(query));
+
+                // Prepare 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 while marking the found chars
+                    // Normalize the results
                     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 the results to the results object
-                    results.push(...contactsResults);
+                    // 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
+                    });
                 }
 
                 // Return the response
-                return [200, {results}];
+                return [200, results];
             });
     }
 }

src/app/mock-api/common/shortcuts/data.ts

@@ -3,9 +3,9 @@ export const shortcuts = [
     {
         id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
         label      : 'Changelog',
-        description: 'Latest version: v1.2',
+        description: 'List of changes',
         icon       : 'heroicons_outline:clipboard-list',
-        link       : '/dashboards/project',
+        link       : '/docs/changelog',
         useRouter  : true
     },
     {
@@ -13,7 +13,7 @@ export const shortcuts = [
         label      : 'Documentation',
         description: 'Getting started',
         icon       : 'heroicons_outline:book-open',
-        link       : '/dashboards/project',
+        link       : '/docs/guides/getting-started/introduction',
         useRouter  : true
     },
     {
@@ -21,7 +21,7 @@ export const shortcuts = [
         label      : 'Help center',
         description: 'FAQs and guides',
         icon       : 'heroicons_outline:support',
-        link       : '/pages/help-center',
+        link       : '/apps/help-center',
         useRouter  : true
     },
     {
@@ -29,7 +29,7 @@ export const shortcuts = [
         label      : 'Dashboard',
         description: 'User analytics',
         icon       : 'heroicons_outline:chart-pie',
-        link       : '/dashboards/project',
+        link       : '/dashboards/analytics',
         useRouter  : true
     },
     {
@@ -67,7 +67,7 @@ export const shortcuts = [
     {
         id         : '0a240ab8-e19d-4503-bf68-20013030d526',
         label      : 'Reload',
-        description: 'Restart the app',
+        description: 'Reload the app',
         icon       : 'heroicons_outline:refresh',
         link       : '/dashboards/project',
         useRouter  : false

src/app/modules/admin/apps/academy/academy.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

src/app/modules/admin/apps/academy/academy.component.ts

@@ -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()
-    {
-    }
-}

src/app/modules/admin/apps/academy/academy.module.ts

@@ -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
-{
-}

src/app/modules/admin/apps/academy/academy.resolvers.ts

@@ -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);
-                       })
-                   );
-    }
-}

src/app/modules/admin/apps/academy/academy.routing.ts

@@ -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
-                }
-            }
-        ]
-    }
-];

src/app/modules/admin/apps/academy/academy.service.ts

@@ -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);
-            })
-        );
-    }
-}

src/app/modules/admin/apps/academy/academy.types.ts

@@ -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;
-    };
-}

src/app/modules/admin/apps/academy/details/details.component.html

@@ -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>

src/app/modules/admin/apps/academy/details/details.component.ts

@@ -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'
-                });
-            }
-        });
-    }
-}

src/app/modules/admin/apps/academy/list/list.component.html

@@ -1,196 +0,0 @@
-<div
-    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
-    cdkScrollable>
-
-    <!-- Header -->
-    <div class="relative flex-0 py-8 px-4 sm:p-16 overflow-hidden bg-gray-800 dark">
-        <!-- Background - @formatter:off -->
-        <!-- Rings -->
-        <svg class="absolute inset-0 pointer-events-none"
-             viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
-            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
-                <circle r="234" cx="196" cy="23"></circle>
-                <circle r="234" cx="790" cy="491"></circle>
-            </g>
-        </svg>
-        <!-- @formatter:on -->
-        <div class="z-10 relative flex flex-col items-center">
-            <h2 class="text-xl font-semibold">FUSE ACADEMY</h2>
-            <div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
-                What do you want to learn today?
-            </div>
-            <div class="max-w-2xl mt-6 sm:text-2xl text-center tracking-tight text-secondary">
-                Our courses will step you through the process of a building small applications, or adding new features to existing applications.
-            </div>
-        </div>
-    </div>
-
-    <!-- Main -->
-    <div class="flex flex-auto p-6 sm:p-10">
-
-        <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
-            <!-- Filters -->
-            <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
-                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
-                    <mat-select
-                        [value]="'all'"
-                        (selectionChange)="filterByCategory($event)">
-                        <mat-option [value]="'all'">All</mat-option>
-                        <ng-container *ngFor="let category of categories; trackBy: trackByFn">
-                            <mat-option [value]="category.slug">{{category.title}}</mat-option>
-                        </ng-container>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field
-                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
-                    [floatLabel]="'always'">
-                    <mat-icon
-                        matPrefix
-                        class="icon-size-5"
-                        [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                    <input
-                        (input)="filterByQuery(query.value)"
-                        placeholder="Search by title or description"
-                        matInput
-                        #query>
-                </mat-form-field>
-                <mat-slide-toggle
-                    class="mt-8 sm:mt-0 sm:ml-auto"
-                    [color]="'primary'"
-                    (change)="toggleCompleted($event)">
-                    Hide completed
-                </mat-slide-toggle>
-            </div>
-            <!-- Courses -->
-            <ng-container *ngIf="this.filteredCourses.length; else noCourses">
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8 sm:mt-10">
-                    <ng-container *ngFor="let course of filteredCourses; trackBy: trackByFn">
-                        <!-- Course -->
-                        <div class="flex flex-col h-96 shadow rounded-2xl overflow-hidden bg-card">
-                            <div class="flex flex-col p-6">
-                                <div class="flex items-center justify-between">
-                                    <!-- Course category -->
-                                    <ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
-                                        <div
-                                            class="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>
-                                    <!-- Completed at least once -->
-                                    <div class="flex items-center">
-                                        <ng-container *ngIf="course.progress.completed > 0">
-                                            <mat-icon
-                                                class="icon-size-5 text-green-600"
-                                                [svgIcon]="'heroicons_solid:badge-check'"
-                                                [matTooltip]="'You completed this course at least once'"></mat-icon>
-                                        </ng-container>
-                                    </div>
-                                </div>
-                                <!-- Course title & description -->
-                                <div class="mt-4 text-lg font-medium">{{course.title}}</div>
-                                <div class="mt-0.5 line-clamp-2 text-secondary">{{course.description}}</div>
-                                <div class="w-12 h-1 my-6 border-t-2"></div>
-                                <!-- Course time -->
-                                <div class="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>
-                                <!-- Course completion -->
-                                <div class="flex items-center mt-2 leading-5 text-md text-secondary">
-                                    <mat-icon
-                                        class="icon-size-5 text-hint"
-                                        [svgIcon]="'heroicons_solid:academic-cap'"></mat-icon>
-                                    <ng-container *ngIf="course.progress.completed === 0">
-                                        <div class="ml-1.5">Never completed</div>
-                                    </ng-container>
-                                    <ng-container *ngIf="course.progress.completed > 0">
-                                        <div class="ml-1.5">
-                                            <span>Completed</span>
-                                            <span class="ml-1">
-                                                <!-- Once -->
-                                                <ng-container *ngIf="course.progress.completed === 1">once</ng-container>
-                                                <!-- Twice -->
-                                                <ng-container *ngIf="course.progress.completed === 2">twice</ng-container>
-                                                <!-- Others -->
-                                                <ng-container *ngIf="course.progress.completed > 2">{{course.progress.completed}}
-                                                    {{course.progress.completed | i18nPlural: {
-                                                        '=0'   : 'time',
-                                                        '=1'   : 'time',
-                                                        'other': 'times'
-                                                    } }}
-                                                </ng-container>
-                                            </span>
-                                        </div>
-                                    </ng-container>
-                                </div>
-                            </div>
-                            <!-- Footer -->
-                            <div class="flex flex-col w-full mt-auto">
-                                <!-- Course progress -->
-                                <div class="relative h-0.5">
-                                    <div
-                                        class="z-10 absolute inset-x-0 h-6 -mt-3"
-                                        [matTooltip]="course.progress.currentStep / course.totalSteps | percent"
-                                        [matTooltipPosition]="'above'"
-                                        [matTooltipClass]="'-mb-0.5'"></div>
-                                    <mat-progress-bar
-                                        class="h-0.5"
-                                        [value]="(100 * course.progress.currentStep) / course.totalSteps"></mat-progress-bar>
-                                </div>
-
-                                <!-- Course launch button -->
-                                <div class="px-6 py-4 text-right bg-gray-50 dark:bg-transparent">
-                                    <button
-                                        mat-stroked-button
-                                        [routerLink]="[course.id]">
-                                        <span class="inline-flex items-center">
-
-                                            <!-- Not started -->
-                                            <ng-container *ngIf="course.progress.currentStep === 0">
-                                                <!-- Never completed -->
-                                                <ng-container *ngIf="course.progress.completed === 0">
-                                                    <span>Start</span>
-                                                </ng-container>
-                                                <!-- Completed before -->
-                                                <ng-container *ngIf="course.progress.completed > 0">
-                                                    <span>Start again</span>
-                                                </ng-container>
-                                            </ng-container>
-
-                                            <!-- Started -->
-                                            <ng-container *ngIf="course.progress.currentStep > 0">
-                                                <span>Continue</span>
-                                            </ng-container>
-
-                                            <mat-icon
-                                                class="ml-1.5 icon-size-5"
-                                                [svgIcon]="'heroicons_solid:arrow-sm-right'"></mat-icon>
-                                        </span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </ng-container>
-                </div>
-            </ng-container>
-
-            <!-- No courses -->
-            <ng-template #noCourses>
-                <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
-                    <mat-icon
-                        class="icon-size-20"
-                        [svgIcon]="'iconsmind:file_search'"></mat-icon>
-                    <div class="mt-6 text-2xl font-semibold tracking-tight text-secondary">No courses found!</div>
-                </div>
-            </ng-template>
-        </div>
-
-    </div>
-
-</div>

src/app/modules/admin/apps/academy/list/list.component.ts

@@ -1,157 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { MatSelectChange } from '@angular/material/select';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
-import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
-
-@Component({
-    selector       : 'academy-list',
-    templateUrl    : './list.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AcademyListComponent implements OnInit, OnDestroy
-{
-    categories: Category[];
-    courses: Course[];
-    filteredCourses: Course[];
-    filters: {
-        categorySlug$: BehaviorSubject<string>;
-        query$: BehaviorSubject<string>;
-        hideCompleted$: BehaviorSubject<boolean>;
-    } = {
-        categorySlug$ : new BehaviorSubject('all'),
-        query$        : new BehaviorSubject(''),
-        hideCompleted$: new BehaviorSubject(false)
-    };
-
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _activatedRoute: ActivatedRoute,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _router: Router,
-        private _academyService: AcademyService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get the categories
-        this._academyService.categories$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((categories: Category[]) => {
-                this.categories = categories;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the courses
-        this._academyService.courses$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((courses: Course[]) => {
-                this.courses = this.filteredCourses = courses;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Filter the courses
-        combineLatest([this.filters.categorySlug$, this.filters.query$, this.filters.hideCompleted$])
-            .subscribe(([categorySlug, query, hideCompleted]) => {
-
-                // Reset the filtered courses
-                this.filteredCourses = this.courses;
-
-                // Filter by category
-                if ( categorySlug !== 'all' )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.category === categorySlug);
-                }
-
-                // Filter by search query
-                if ( query !== '' )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.title.toLowerCase().includes(query.toLowerCase())
-                        || course.description.toLowerCase().includes(query.toLowerCase())
-                        || course.category.toLowerCase().includes(query.toLowerCase()));
-                }
-
-                // Filter by completed
-                if ( hideCompleted )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.progress.completed === 0);
-                }
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Filter by search query
-     *
-     * @param query
-     */
-    filterByQuery(query: string): void
-    {
-        this.filters.query$.next(query);
-    }
-
-    /**
-     * Filter by category
-     *
-     * @param change
-     */
-    filterByCategory(change: MatSelectChange): void
-    {
-        this.filters.categorySlug$.next(change.value);
-    }
-
-    /**
-     * Show/hide completed courses
-     *
-     * @param change
-     */
-    toggleCompleted(change: MatSlideToggleChange): void
-    {
-        this.filters.hideCompleted$.next(change.checked);
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-}

src/app/modules/admin/apps/calendar/calendar.component.html

@@ -1,386 +0,0 @@
-<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden dark:bg-gray-900">
-
-    <mat-drawer-container class="flex-auto h-full bg-transparent">
-
-        <!-- Drawer -->
-        <mat-drawer
-            class="w-60 dark:bg-gray-900"
-            [autoFocus]="false"
-            [mode]="drawerMode"
-            [opened]="drawerOpened"
-            #drawer>
-            <calendar-sidebar (calendarUpdated)="onCalendarUpdated($event)"></calendar-sidebar>
-        </mat-drawer>
-
-        <mat-drawer-content class="flex">
-
-            <!-- Main -->
-            <div class="flex flex-col flex-auto">
-
-                <!-- Header -->
-                <div class="flex flex-0 flex-wrap items-center p-4 border-b bg-card">
-
-                    <button
-                        mat-icon-button
-                        (click)="toggleDrawer()">
-                        <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
-                    </button>
-
-                    <div class="ml-4 text-2xl font-semibold tracking-tight whitespace-nowrap">
-                        {{viewTitle}}
-                    </div>
-
-                    <button
-                        class="ml-5"
-                        mat-icon-button
-                        (click)="previous()">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
-                    </button>
-
-                    <button
-                        mat-icon-button
-                        (click)="next()">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    </button>
-
-                    <button
-                        class="hidden md:inline-flex"
-                        mat-icon-button
-                        (click)="today()">
-                        <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                    </button>
-
-                    <div class="hidden md:block ml-auto">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-30 ml-2">
-                            <mat-select
-                                (selectionChange)="changeView(viewChanger.value)"
-                                [value]="view"
-                                #viewChanger="matSelect">
-                                <mat-option [value]="'dayGridMonth'">Month</mat-option>
-                                <mat-option [value]="'timeGridWeek'">Week</mat-option>
-                                <mat-option [value]="'timeGridDay'">Day</mat-option>
-                                <mat-option [value]="'listYear'">Schedule</mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Mobile menu -->
-                    <div class="md:hidden ml-auto">
-                        <button
-                            class=""
-                            [matMenuTriggerFor]="actionsMenu"
-                            mat-icon-button>
-                            <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
-
-                            <mat-menu #actionsMenu="matMenu">
-                                <button
-                                    mat-menu-item
-                                    (click)="today()">
-                                    <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                    <span>Go to today</span>
-                                </button>
-                                <button
-                                    [matMenuTriggerFor]="actionsViewsMenu"
-                                    mat-menu-item>
-                                    <mat-icon [svgIcon]="'heroicons_outline:view-grid'"></mat-icon>
-                                    <span>View</span>
-                                </button>
-                            </mat-menu>
-
-                            <mat-menu #actionsViewsMenu="matMenu">
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'dayGridMonth'"
-                                    (click)="changeView('dayGridMonth')">
-                                    <span>Month</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'timeGridWeek'"
-                                    (click)="changeView('timeGridWeek')">
-                                    <span>Week</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'timeGridDay'"
-                                    (click)="changeView('timeGridDay')">
-                                    <span>Day</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'listYear'"
-                                    (click)="changeView('listYear')">
-                                    <span>Schedule</span>
-                                </button>
-                            </mat-menu>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- FullCalendar -->
-                <div class="flex flex-col flex-auto">
-                    <full-calendar
-                        [defaultView]="view"
-                        [events]="events"
-                        [firstDay]="settings.startWeekOn"
-                        [handleWindowResize]="false"
-                        [header]="false"
-                        [height]="'parent'"
-                        [plugins]="calendarPlugins"
-                        [views]="views"
-                        (dateClick)="onDateClick($event)"
-                        (eventClick)="onEventClick($event)"
-                        (eventRender)="onEventRender($event)"
-                        #fullCalendar></full-calendar>
-                </div>
-
-                <!-- Event panel -->
-                <ng-template #eventPanel>
-
-                    <!-- Preview mode -->
-                    <ng-container *ngIf="panelMode === 'view'">
-                        <div class="flex-auto p-8">
-                            <!-- Info -->
-                            <div class="flex">
-                                <mat-icon [svgIcon]="'heroicons_outline:information-circle'"></mat-icon>
-                                <div class="flex flex-auto justify-between ml-6">
-                                    <!-- Info -->
-                                    <div>
-                                        <div class="text-3xl font-semibold tracking-tight leading-none">{{event.title || '(No title)'}}</div>
-                                        <div class="mt-0.5 text-secondary">{{event.start | date:'EEEE, MMMM d'}}</div>
-                                        <div class="text-secondary">{{recurrenceStatus}}</div>
-                                    </div>
-                                    <!-- Actions -->
-                                    <div class="flex -mt-2 -mr-2 ml-10">
-
-                                        <!-- Non-recurring event -->
-                                        <ng-container *ngIf="!event.recurrence">
-                                            <!-- Edit -->
-                                            <button
-                                                mat-icon-button
-                                                (click)="changeEventPanelMode('edit', 'single')">
-                                                <mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                            </button>
-                                            <!-- Delete -->
-                                            <button
-                                                mat-icon-button
-                                                (click)="deleteEvent(event)">
-                                                <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                            </button>
-                                        </ng-container>
-
-                                        <!-- Recurring event -->
-                                        <ng-container *ngIf="event.recurrence">
-                                            <!-- Edit -->
-                                            <button
-                                                mat-icon-button
-                                                [matMenuTriggerFor]="editMenu">
-                                                <mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                            </button>
-                                            <mat-menu #editMenu="matMenu">
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="changeEventPanelMode('edit', 'single')">
-                                                    This event
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    *ngIf="!event.isFirstInstance"
-                                                    (click)="changeEventPanelMode('edit', 'future')">
-                                                    This and following events
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="changeEventPanelMode('edit', 'all')">
-                                                    All events
-                                                </button>
-                                            </mat-menu>
-                                            <!-- Delete -->
-                                            <button
-                                                mat-icon-button
-                                                [matMenuTriggerFor]="deleteMenu">
-                                                <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                            </button>
-                                            <mat-menu #deleteMenu="matMenu">
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="deleteEvent(event, 'single')">
-                                                    This event
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    *ngIf="!event.isFirstInstance"
-                                                    (click)="deleteEvent(event, 'future')">
-                                                    This and following events
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="deleteEvent(event, 'all')">
-                                                    All events
-                                                </button>
-                                            </mat-menu>
-                                        </ng-container>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Description -->
-                            <div
-                                class="flex mt-6"
-                                *ngIf="event.description">
-                                <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
-                                <div class="flex-auto ml-6">{{event.description}}</div>
-                            </div>
-
-                            <!-- Calendar -->
-                            <div class="flex mt-6">
-                                <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                <div class="flex flex-auto items-center ml-6">
-                                    <div
-                                        class="w-2 h-2 rounded-full"
-                                        [ngClass]="getCalendar(event.calendarId).color"></div>
-                                    <div class="ml-3 leading-none">{{getCalendar(event.calendarId).title}}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Add / Edit mode -->
-                    <ng-container *ngIf="panelMode === 'add' || panelMode === 'edit'">
-                        <form
-                            class="flex flex-col w-full p-6 pt-8 sm:pt-10 sm:pr-8"
-                            [formGroup]="eventForm">
-
-                            <!-- Title -->
-                            <div class="flex items-center">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6"
-                                    [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                    <input
-                                        matInput
-                                        [formControlName]="'title'"
-                                        [placeholder]="'Event title'">
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Dates -->
-                            <div class="flex items-start mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mt-3 mr-6"
-                                    [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                <div class="flex-auto">
-                                    <fuse-date-range
-                                        [formControlName]="'range'"
-                                        [dateFormat]="settings.dateFormat"
-                                        [timeRange]="!eventForm.get('allDay').value"
-                                        [timeFormat]="settings.timeFormat"></fuse-date-range>
-                                    <mat-checkbox
-                                        class="mt-4"
-                                        [color]="'primary'"
-                                        [formControlName]="'allDay'">
-                                        All day
-                                    </mat-checkbox>
-                                </div>
-                            </div>
-
-                            <!-- Recurrence -->
-                            <div
-                                class="flex items-center mt-6"
-                                *ngIf="!event.recurrence || eventEditMode !== 'single'">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6 transform -scale-x-1"
-                                    [svgIcon]="'heroicons_outline:refresh'"></mat-icon>
-                                <div
-                                    class="flex flex-auto items-center h-12 px-4 rounded-md border cursor-pointer shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500"
-                                    (click)="openRecurrenceDialog()">
-                                    <div class="flex-auto">
-                                        {{recurrenceStatus || 'Does not repeat'}}
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Calendar -->
-                            <div class="flex items-center mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6"
-                                    [svgIcon]="'heroicons_outline:tag'"></mat-icon>
-                                <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                    <mat-select
-                                        [formControlName]="'calendarId'"
-                                        (change)="$event.stopImmediatePropagation()">
-                                        <mat-select-trigger class="inline-flex items-center leading-none">
-                                            <span
-                                                class="w-3 h-3 rounded-full"
-                                                [ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
-                                            <span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
-                                        </mat-select-trigger>
-                                        <ng-container *ngFor="let calendar of calendars">
-                                            <mat-option [value]="calendar.id">
-                                                <div class="inline-flex items-center">
-                                                    <span
-                                                        class="w-3 h-3 rounded-full"
-                                                        [ngClass]="calendar.color"></span>
-                                                    <span class="ml-3">{{calendar.title}}</span>
-                                                </div>
-                                            </mat-option>
-                                        </ng-container>
-                                    </mat-select>
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Description -->
-                            <div class="flex items-start mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6 mt-3"
-                                    [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
-                                <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
-                                    <textarea
-                                        matInput
-                                        matTextareaAutosize
-                                        [matAutosizeMinRows]="1"
-                                        [formControlName]="'description'"
-                                        [placeholder]="'Event description'">
-                                    </textarea>
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="ml-auto mt-6">
-                                <button
-                                    class="add"
-                                    *ngIf="panelMode === 'add'"
-                                    mat-flat-button
-                                    type="button"
-                                    [color]="'primary'"
-                                    (click)="addEvent()">
-                                    Add
-                                </button>
-                                <button
-                                    class="save"
-                                    *ngIf="panelMode === 'edit'"
-                                    mat-flat-button
-                                    type="button"
-                                    [color]="'primary'"
-                                    (click)="updateEvent()">
-                                    Save
-                                </button>
-                            </div>
-                        </form>
-                    </ng-container>
-
-                </ng-template>
-
-            </div>
-
-        </mat-drawer-content>
-
-    </mat-drawer-container>
-
-</div>
-
-

src/app/modules/admin/apps/calendar/calendar.component.scss

@@ -1,121 +0,0 @@
-calendar {
-
-    /* Tweak: FullCalendar CSS only height to improve resize performance */
-    /* With this tweak, we can disable "handleWindowResize" option of FullCalendar */
-    /* which disables the height calculations on window resize and increases the */
-    /* overall performance. */
-    /* This tweak only affects the Calendar app's FullCalendar. */
-    full-calendar {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 auto;
-        width: 100%;
-        height: 100%;
-
-        .fc-view-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 0 auto;
-            width: 100%;
-            height: 100%;
-
-            .fc-view {
-
-                /* Day grid - Month view */
-                /* Time grid - Week view */
-                /* Time grid - Day view */
-                &.fc-dayGridMonth-view,
-                &.fc-timeGridWeek-view,
-                &.fc-timeGridDay-view {
-                    display: flex;
-                    flex-direction: column;
-                    flex: 1 0 auto;
-                    width: 100%;
-                    height: 100%;
-
-                    > table {
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1 0 auto;
-                        height: 100%;
-
-                        > thead {
-                            display: flex;
-                        }
-
-                        > tbody {
-                            display: flex;
-                            flex: 1 1 auto;
-                            overflow: hidden;
-
-                            > tr {
-                                display: flex;
-
-                                > td {
-                                    display: flex;
-                                    flex-direction: column;
-
-                                    .fc-scroller {
-                                        flex: 1 1 auto;
-                                        overflow: hidden scroll !important;
-                                        height: auto !important;
-
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                /* Day grid - Month view */
-                &.fc-dayGridMonth-view {
-
-                    > table {
-
-                        > tbody {
-
-                            > tr {
-
-                                > td {
-
-                                    .fc-scroller {
-                                        display: flex;
-
-                                        > .fc-day-grid {
-                                            display: flex;
-                                            flex-direction: column;
-                                            min-height: 580px;
-
-                                            > .fc-row {
-                                                flex: 1 0 0;
-                                                height: auto !important;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                /* List - Year view */
-                &.fc-listYear-view {
-                    width: 100%;
-                    height: 100%;
-
-                    .fc-scroller {
-                        width: 100%;
-                        height: 100% !important;
-                        overflow: hidden !important;
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* Event panel */
-.calendar-event-panel {
-    border-radius: 8px;
-    @apply shadow-2xl bg-card;
-}

src/app/modules/admin/apps/calendar/calendar.module.ts

@@ -1,75 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MAT_DATE_FORMATS } from '@angular/material/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FullCalendarModule } from '@fullcalendar/angular';
-import { FuseDateRangeModule } from '@fuse/components/date-range';
-import { SharedModule } from 'app/shared/shared.module';
-import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
-import { CalendarRecurrenceComponent } from 'app/modules/admin/apps/calendar/recurrence/recurrence.component';
-import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
-import { CalendarSidebarComponent } from 'app/modules/admin/apps/calendar/sidebar/sidebar.component';
-import { calendarRoutes } from 'app/modules/admin/apps/calendar/calendar.routing';
-
-@NgModule({
-    declarations: [
-        CalendarComponent,
-        CalendarRecurrenceComponent,
-        CalendarSettingsComponent,
-        CalendarSidebarComponent
-    ],
-    imports     : [
-        RouterModule.forChild(calendarRoutes),
-        ScrollingModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCheckboxModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatMomentDateModule,
-        MatRadioModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatTooltipModule,
-        FullCalendarModule,
-        FuseDateRangeModule,
-        SharedModule
-    ],
-    providers   : [
-        {
-            provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: 'DD.MM.YYYY'
-                },
-                display: {
-                    dateInput         : 'DD.MM.YYYY',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'DD.MM.YYYY',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
-        }
-    ]
-})
-export class CalendarModule
-{
-}

src/app/modules/admin/apps/calendar/calendar.resolvers.ts

@@ -1,89 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs';
-import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
-import { Calendar, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarCalendarsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Calendar[]>
-    {
-        return this._calendarService.getCalendars();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarSettingsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarSettings>
-    {
-        return this._calendarService.getSettings();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarWeekdaysResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarWeekday[]>
-    {
-        return this._calendarService.getWeekdays();
-    }
-}

src/app/modules/admin/apps/calendar/calendar.routing.ts

@@ -1,23 +0,0 @@
-import { Route } from '@angular/router';
-import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
-import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
-import { CalendarCalendarsResolver, CalendarSettingsResolver, CalendarWeekdaysResolver } from 'app/modules/admin/apps/calendar/calendar.resolvers';
-
-export const calendarRoutes: Route[] = [
-    {
-        path     : '',
-        component: CalendarComponent,
-        resolve  : {
-            calendars: CalendarCalendarsResolver,
-            settings : CalendarSettingsResolver,
-            weekdays : CalendarWeekdaysResolver
-        }
-    },
-    {
-        path     : 'settings',
-        component: CalendarSettingsComponent,
-        resolve  : {
-            settings: CalendarSettingsResolver
-        }
-    }
-];

src/app/modules/admin/apps/calendar/calendar.service.ts

@@ -1,475 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable, of } from 'rxjs';
-import { map, switchMap, take, tap } from 'rxjs/operators';
-import { Moment } from 'moment';
-import { Calendar, CalendarEvent, CalendarEventEditMode, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarService
-{
-    // Private
-    private _calendars: BehaviorSubject<Calendar[] | null> = new BehaviorSubject(null);
-    private _events: BehaviorSubject<CalendarEvent[] | null> = new BehaviorSubject(null);
-    private _loadedEventsRange: { start: Moment | null; end: Moment | null } = {
-        start: null,
-        end  : null
-    };
-    private readonly _numberOfDaysToPrefetch = 60;
-    private _settings: BehaviorSubject<CalendarSettings | null> = new BehaviorSubject(null);
-    private _weekdays: BehaviorSubject<CalendarWeekday[] | null> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for calendars
-     */
-    get calendars$(): Observable<Calendar[]>
-    {
-        return this._calendars.asObservable();
-    }
-
-    /**
-     * Getter for events
-     */
-    get events$(): Observable<CalendarEvent[]>
-    {
-        return this._events.asObservable();
-    }
-
-    /**
-     * Getter for settings
-     */
-    get settings$(): Observable<CalendarSettings>
-    {
-        return this._settings.asObservable();
-    }
-
-    /**
-     * Getter for weekdays
-     */
-    get weekdays$(): Observable<CalendarWeekday[]>
-    {
-        return this._weekdays.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get calendars
-     */
-    getCalendars(): Observable<Calendar[]>
-    {
-        return this._httpClient.get<Calendar[]>('api/apps/calendar/calendars').pipe(
-            tap((response) => {
-                this._calendars.next(response);
-            })
-        );
-    }
-
-    /**
-     * Add calendar
-     *
-     * @param calendar
-     */
-    addCalendar(calendar: Calendar): Observable<Calendar>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.post<Calendar>('api/apps/calendar/calendars', {
-                calendar
-            }).pipe(
-                map((addedCalendar) => {
-
-                    // Add the calendar
-                    calendars.push(addedCalendar);
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Return the added calendar
-                    return addedCalendar;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update calendar
-     *
-     * @param id
-     * @param calendar
-     */
-    updateCalendar(id: string, calendar: Calendar): Observable<Calendar>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.patch<Calendar>('api/apps/calendar/calendars', {
-                id,
-                calendar
-            }).pipe(
-                map((updatedCalendar) => {
-
-                    // Find the index of the updated calendar
-                    const index = calendars.findIndex(item => item.id === id);
-
-                    // Update the calendar
-                    calendars[index] = updatedCalendar;
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Return the updated calendar
-                    return updatedCalendar;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete calendar
-     *
-     * @param id
-     */
-    deleteCalendar(id: string): Observable<any>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.delete<Calendar>('api/apps/calendar/calendars', {
-                params: {id}
-            }).pipe(
-                map((isDeleted) => {
-
-                    // Find the index of the deleted calendar
-                    const index = calendars.findIndex(item => item.id === id);
-
-                    // Delete the calendar
-                    calendars.splice(index, 1);
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Remove the events belong to deleted calendar
-                    const events = this._events.value.filter(event => event.calendarId !== id);
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get events
-     *
-     * @param start
-     * @param end
-     * @param replace
-     */
-    getEvents(start: Moment, end: Moment, replace = false): Observable<CalendarEvent[]>
-    {
-        // Set the new start date for loaded events
-        if ( replace || !this._loadedEventsRange.start || start.isBefore(this._loadedEventsRange.start) )
-        {
-            this._loadedEventsRange.start = start;
-        }
-
-        // Set the new end date for loaded events
-        if ( replace || !this._loadedEventsRange.end || end.isAfter(this._loadedEventsRange.end) )
-        {
-            this._loadedEventsRange.end = end;
-        }
-
-        // Get the events
-        return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
-            params: {
-                start: start.toISOString(true),
-                end  : end.toISOString(true)
-            }
-        }).pipe(
-            switchMap(response => this._events.pipe(
-                take(1),
-                map((events) => {
-
-                    // If replace...
-                    if ( replace )
-                    {
-                        // Execute the observable with the response replacing the events object
-                        this._events.next(response);
-                    }
-                    // Otherwise...
-                    else
-                    {
-                        // If events is null, replace it with an empty array
-                        events = events || [];
-
-                        // Execute the observable by appending the response to the current events
-                        this._events.next([...events, ...response]);
-                    }
-
-                    // Return the response
-                    return response;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Reload events using the loaded events range
-     */
-    reloadEvents(): Observable<CalendarEvent[]>
-    {
-        // Get the events
-        return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
-            params: {
-                start: this._loadedEventsRange.start.toISOString(),
-                end  : this._loadedEventsRange.end.toISOString()
-            }
-        }).pipe(
-            map((response) => {
-
-                // Execute the observable with the response replacing the events object
-                this._events.next(response);
-
-                // Return the response
-                return response;
-            })
-        );
-    }
-
-    /**
-     * Prefetch future events
-     *
-     * @param end
-     */
-    prefetchFutureEvents(end: Moment): Observable<CalendarEvent[]>
-    {
-        // Calculate the remaining prefetched days
-        const remainingDays = this._loadedEventsRange.end.diff(end, 'days');
-
-        // Return if remaining days is bigger than the number
-        // of days to prefetch. This means we were already been
-        // there and fetched the events data so no need for doing
-        // it again.
-        if ( remainingDays >= this._numberOfDaysToPrefetch )
-        {
-            return of([]);
-        }
-
-        // Figure out the start and end dates
-        const start = this._loadedEventsRange.end.clone().add(1, 'day');
-        end = this._loadedEventsRange.end.clone().add(this._numberOfDaysToPrefetch - remainingDays, 'days');
-
-        // Prefetch the events
-        return this.getEvents(start, end);
-    }
-
-    /**
-     * Prefetch past events
-     *
-     * @param start
-     */
-    prefetchPastEvents(start: Moment): Observable<CalendarEvent[]>
-    {
-        // Calculate the remaining prefetched days
-        const remainingDays = start.diff(this._loadedEventsRange.start, 'days');
-
-        // Return if remaining days is bigger than the number
-        // of days to prefetch. This means we were already been
-        // there and fetched the events data so no need for doing
-        // it again.
-        if ( remainingDays >= this._numberOfDaysToPrefetch )
-        {
-            return of([]);
-        }
-
-        // Figure out the start and end dates
-        start = this._loadedEventsRange.start.clone().subtract(this._numberOfDaysToPrefetch - remainingDays, 'days');
-        const end = this._loadedEventsRange.start.clone().subtract(1, 'day');
-
-        // Prefetch the events
-        return this.getEvents(start, end);
-    }
-
-    /**
-     * Add event
-     *
-     * @param event
-     */
-    addEvent(event): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.post<CalendarEvent>('api/apps/calendar/event', {
-                event
-            }).pipe(
-                map((addedEvent) => {
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the added event
-                    return addedEvent;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update event
-     *
-     * @param id
-     * @param event
-     */
-    updateEvent(id: string, event): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.patch<CalendarEvent>('api/apps/calendar/event', {
-                id,
-                event
-            }).pipe(
-                map((updatedEvent) => {
-
-                    // Find the index of the updated event
-                    const index = events.findIndex(item => item.id === id);
-
-                    // Update the event
-                    events[index] = updatedEvent;
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the updated event
-                    return updatedEvent;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update recurring event
-     *
-     * @param event
-     * @param originalEvent
-     * @param mode
-     */
-    updateRecurringEvent(event, originalEvent, mode: CalendarEventEditMode): Observable<boolean>
-    {
-        return this._httpClient.patch<boolean>('api/apps/calendar/recurring-event', {
-            event,
-            originalEvent,
-            mode
-        });
-    }
-
-    /**
-     * Delete event
-     *
-     * @param id
-     */
-    deleteEvent(id: string): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.delete<CalendarEvent>('api/apps/calendar/event', {params: {id}}).pipe(
-                map((isDeleted) => {
-
-                    // Find the index of the deleted event
-                    const index = events.findIndex(item => item.id === id);
-
-                    // Delete the event
-                    events.splice(index, 1);
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete recurring event
-     *
-     * @param event
-     * @param mode
-     */
-    deleteRecurringEvent(event, mode: CalendarEventEditMode): Observable<boolean>
-    {
-        return this._httpClient.delete<boolean>('api/apps/calendar/recurring-event', {
-            params: {
-                event: JSON.stringify(event),
-                mode
-            }
-        });
-    }
-
-    /**
-     * Get settings
-     */
-    getSettings(): Observable<CalendarSettings>
-    {
-        return this._httpClient.get<CalendarSettings>('api/apps/calendar/settings').pipe(
-            tap((response) => {
-                this._settings.next(response);
-            })
-        );
-    }
-
-    /**
-     * Update settings
-     */
-    updateSettings(settings: CalendarSettings): Observable<CalendarSettings>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.patch<CalendarSettings>('api/apps/calendar/settings', {
-                settings
-            }).pipe(
-                map((updatedSettings) => {
-
-                    // Update the settings
-                    this._settings.next(settings);
-
-                    // Get weekdays again to get them in correct order
-                    // in case the startWeekOn setting changes
-                    this.getWeekdays().subscribe();
-
-                    // Return the updated settings
-                    return updatedSettings;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get weekdays
-     */
-    getWeekdays(): Observable<CalendarWeekday[]>
-    {
-        return this._httpClient.get<CalendarWeekday[]>('api/apps/calendar/weekdays').pipe(
-            tap((response) => {
-                this._weekdays.next(response);
-            })
-        );
-    }
-}

src/app/modules/admin/apps/calendar/calendar.types.ts

@@ -1,47 +0,0 @@
-export interface Calendar
-{
-    id: string;
-    title: string;
-    color: string;
-    visible: boolean;
-}
-
-export type CalendarDrawerMode = 'over' | 'side';
-
-export interface CalendarEvent
-{
-    id: string;
-    calendarId: string;
-    recurringEventId: string | null;
-    isFirstInstance: boolean;
-    title: string;
-    description: string;
-    start: string | null;
-    end: string | null;
-    allDay: boolean;
-    recurrence: string;
-}
-
-export interface CalendarEventException
-{
-    id: string;
-    eventId: string;
-    exdate: string;
-}
-
-export type CalendarEventPanelMode = 'view' | 'add' | 'edit';
-export type CalendarEventEditMode = 'single' | 'future' | 'all';
-
-export interface CalendarSettings
-{
-    dateFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'll';
-    timeFormat: '12' | '24';
-    startWeekOn: 6 | 0 | 1;
-}
-
-export interface CalendarWeekday
-{
-    abbr: string;
-    label: string;
-    value: string;
-}

src/app/modules/admin/apps/calendar/recurrence/recurrence.component.html

@@ -1,121 +0,0 @@
-<form
-    class="flex flex-col w-full"
-    [formGroup]="recurrenceForm">
-
-    <div class="text-2xl font-semibold tracking-tight">Recurrence rules</div>
-
-    <!-- Interval and frequency -->
-    <div class="flex mt-12">
-        <mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
-            <mat-label>Repeat every</mat-label>
-            <input
-                type="number"
-                matInput
-                [autocomplete]="'off'"
-                [formControlName]="'interval'"
-                [min]="1">
-        </mat-form-field>
-        <mat-form-field class="fuse-mat-no-subscript w-40 ml-4">
-            <mat-select [formControlName]="'freq'">
-                <mat-option [value]="'DAILY'">day(s)</mat-option>
-                <mat-option [value]="'WEEKLY'">week(s)</mat-option>
-                <mat-option [value]="'MONTHLY'">month(s)</mat-option>
-                <mat-option [value]="'YEARLY'">year(s)</mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
-
-    <!-- Weekly repeat options -->
-    <div
-        class="flex flex-col mt-6"
-        [formGroupName]="'weekly'"
-        *ngIf="recurrenceForm.get('freq').value === 'WEEKLY'">
-        <div class="font-medium">Repeat on</div>
-        <mat-button-toggle-group
-            class="mt-1.5 border-0 space-x-1"
-            [formControlName]="'byDay'"
-            [multiple]="true">
-            <ng-container *ngFor="let weekday of weekdays">
-                <mat-button-toggle
-                    class="w-10 h-10 border-0 rounded-full"
-                    [disableRipple]="true"
-                    [value]="weekday.value"
-                    [matTooltip]="weekday.label">
-                    {{weekday.abbr}}
-                </mat-button-toggle>
-            </ng-container>
-        </mat-button-toggle-group>
-    </div>
-
-    <!-- Monthly repeat options -->
-    <div
-        class="flex mt-6"
-        [formGroupName]="'monthly'"
-        *ngIf="recurrenceForm.get('freq').value === 'MONTHLY'">
-        <mat-form-field class="fuse-mat-no-subscript w-full">
-            <mat-label>Repeat on</mat-label>
-            <mat-select [formControlName]="'repeatOn'">
-                <mat-option [value]="'date'">Monthly on day {{recurrenceForm.get('monthly.date').value}}</mat-option>
-                <mat-option [value]="'nthWeekday'">Monthly on the {{nthWeekdayText}}</mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
-
-    <!-- Ends -->
-    <div
-        class="flex flex-col mt-12"
-        [formGroupName]="'end'">
-        <div class="flex items-center">
-            <mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
-                <mat-label>Ends</mat-label>
-                <mat-select [formControlName]="'type'">
-                    <mat-option [value]="'never'">Never</mat-option>
-                    <mat-option [value]="'until'">On</mat-option>
-                    <mat-option [value]="'count'">After</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field
-                class="fuse-mat-no-subscript w-40 ml-4"
-                *ngIf="recurrenceForm.get('end.type').value === 'until'">
-                <input
-                    matInput
-                    [matDatepicker]="untilDatePicker"
-                    [formControlName]="'until'">
-                <mat-datepicker-toggle
-                    matSuffix
-                    [for]="untilDatePicker"></mat-datepicker-toggle>
-                <mat-datepicker #untilDatePicker></mat-datepicker>
-            </mat-form-field>
-            <mat-form-field
-                class="fuse-mat-no-subscript w-40 ml-4"
-                *ngIf="recurrenceForm.get('end.type').value === 'count'">
-                <input
-                    type="number"
-                    matInput
-                    [autocomplete]="'off'"
-                    [formControlName]="'count'"
-                    [min]="1">
-                <span matSuffix>occurrence(s)</span>
-            </mat-form-field>
-        </div>
-    </div>
-
-    <!-- Actions -->
-    <div class="ml-auto mt-8">
-        <button
-            class="clear"
-            mat-button
-            [color]="'primary'"
-            (click)="clear()">
-            Clear
-        </button>
-        <button
-            mat-flat-button
-            [disabled]="recurrenceForm.invalid"
-            [color]="'primary'"
-            (click)="done()">
-            Done
-        </button>
-    </div>
-
-</form>

src/app/modules/admin/apps/calendar/recurrence/recurrence.component.ts

@@ -1,341 +0,0 @@
-import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import * as moment from 'moment';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
-import { CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
-
-@Component({
-    selector     : 'calendar-recurrence',
-    templateUrl  : './recurrence.component.html',
-    encapsulation: ViewEncapsulation.None
-})
-export class CalendarRecurrenceComponent implements OnInit, OnDestroy
-{
-    nthWeekdayText: string;
-    recurrenceForm: FormGroup;
-    recurrenceFormValues: any;
-    weekdays: CalendarWeekday[];
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: any,
-        public matDialogRef: MatDialogRef<CalendarRecurrenceComponent>,
-        private _calendarService: CalendarService,
-        private _formBuilder: FormBuilder
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get weekdays
-        this._calendarService.weekdays$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((weekdays) => {
-
-                // Store the weekdays
-                this.weekdays = weekdays;
-            });
-
-        // Initialize
-        this._init();
-
-        // Create the recurrence form
-        this.recurrenceForm = this._formBuilder.group({
-            freq    : [null],
-            interval: [null, Validators.required],
-            weekly  : this._formBuilder.group({
-                byDay: [[]]
-            }),
-            monthly : this._formBuilder.group({
-                repeatOn  : [null], // date | nthWeekday
-                date      : [null],
-                nthWeekday: [null]
-            }),
-            end     : this._formBuilder.group({
-                type : [null], // never | until | count
-                until: [null],
-                count: [null]
-            })
-        });
-
-        // Subscribe to 'freq' field value changes
-        this.recurrenceForm.get('freq').valueChanges.subscribe((value) => {
-
-            // Set the end values
-            this._setEndValues(value);
-        });
-
-        // Subscribe to 'weekly.byDay' field value changes
-        this.recurrenceForm.get('weekly.byDay').valueChanges.subscribe((value) => {
-
-            // Get the event's start date
-            const startDate = moment(this.data.event.start);
-
-            // If nothing is selected, select the original value from
-            // the event form to prevent an empty value on the field
-            if ( !value || !value.length )
-            {
-                // Get the day of event start date
-                const eventStartDay = startDate.format('dd').toUpperCase();
-
-                // Set the original value back without emitting a
-                // change event to prevent an infinite loop
-                this.recurrenceForm.get('weekly.byDay').setValue([eventStartDay], {emitEvent: false});
-            }
-        });
-
-        // Patch the form with the values
-        this.recurrenceForm.patchValue(this.recurrenceFormValues);
-
-        // Set end values for the first time
-        this._setEndValues(this.recurrenceForm.get('freq').value);
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Clear
-     */
-    clear(): void
-    {
-        // Close the dialog
-        this.matDialogRef.close({recurrence: 'cleared'});
-    }
-
-    /**
-     * Done
-     */
-    done(): void
-    {
-        // Get the recurrence form values
-        const recurrenceForm = this.recurrenceForm.value;
-
-        // Prepare the rule array and add the base rules
-        const ruleArr = ['FREQ=' + recurrenceForm.freq, 'INTERVAL=' + recurrenceForm.interval];
-
-        // If monthly on certain days...
-        if ( recurrenceForm.freq === 'MONTHLY' && recurrenceForm.monthly.repeatOn === 'nthWeekday' )
-        {
-            ruleArr.push('BYDAY=' + recurrenceForm.monthly.nthWeekday);
-        }
-
-        // If weekly...
-        if ( recurrenceForm.freq === 'WEEKLY' )
-        {
-            // If byDay is an array...
-            if ( Array.isArray(recurrenceForm.weekly.byDay) )
-            {
-                ruleArr.push('BYDAY=' + recurrenceForm.weekly.byDay.join(','));
-            }
-            // Otherwise
-            else
-            {
-                ruleArr.push('BYDAY=' + recurrenceForm.weekly.byDay);
-            }
-        }
-
-        // If one of the end options is selected...
-        if ( recurrenceForm.end.type === 'until' )
-        {
-            ruleArr.push('UNTIL=' + moment(recurrenceForm.end.until).endOf('day').utc().format('YYYYMMDD[T]HHmmss[Z]'));
-        }
-
-        if ( recurrenceForm.end.type === 'count' )
-        {
-            ruleArr.push('COUNT=' + recurrenceForm.end.count);
-        }
-
-        // Generate rule text
-        const ruleText = ruleArr.join(';');
-
-        // Close the dialog
-        this.matDialogRef.close({recurrence: ruleText});
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
-    {
-        // Get the event's start date
-        const startDate = moment(this.data.event.start);
-
-        // Calculate the weekday
-        const weekday = moment(this.data.event.start).format('dd').toUpperCase();
-
-        // Calculate the nthWeekday
-        let nthWeekdayNo = 1;
-        while ( startDate.clone().isSame(startDate.clone().subtract(nthWeekdayNo, 'week'), 'month') )
-        {
-            nthWeekdayNo++;
-        }
-        const nthWeekday = nthWeekdayNo + weekday;
-
-        // Calculate the nthWeekday as text
-        const ordinalNumberSuffixes = {
-            1: 'st',
-            2: 'nd',
-            3: 'rd',
-            4: 'th',
-            5: 'th'
-        };
-        this.nthWeekdayText = nthWeekday.slice(0, 1) + ordinalNumberSuffixes[nthWeekday.slice(0, 1)] + ' ' +
-            this.weekdays.find(item => item.value === nthWeekday.slice(-2)).label;
-
-        // Set the defaults on recurrence form values
-        this.recurrenceFormValues = {
-            freq    : 'DAILY',
-            interval: 1,
-            weekly  : {
-                byDay: weekday
-            },
-            monthly : {
-                repeatOn  : 'date',
-                date      : moment(this.data.event.start).date(),
-                nthWeekday: nthWeekday
-            },
-            end     : {
-                type : 'never',
-                until: null,
-                count: null
-            }
-        };
-
-        // If recurrence rule string is available on the
-        // event meaning that the is a recurring one...
-        if ( this.data.event.recurrence )
-        {
-            // Parse the rules
-            const parsedRules: any = {};
-            this.data.event.recurrence.split(';').forEach((rule) => {
-                parsedRules[rule.split('=')[0]] = rule.split('=')[1];
-            });
-
-            // Overwrite the recurrence form values
-            this.recurrenceFormValues.freq = parsedRules.FREQ;
-            this.recurrenceFormValues.interval = parsedRules.INTERVAL;
-
-            if ( parsedRules.FREQ === 'WEEKLY' )
-            {
-                this.recurrenceFormValues.weekly.byDay = parsedRules.BYDAY.split(',');
-            }
-
-            if ( parsedRules.FREQ === 'MONTHLY' )
-            {
-                this.recurrenceFormValues.monthly.repeatOn = parsedRules.BYDAY ? 'nthWeekday' : 'date';
-            }
-
-            this.recurrenceFormValues.end.type = parsedRules.UNTIL ? 'until' : (parsedRules.COUNT ? 'count' : 'never');
-            this.recurrenceFormValues.end.until = parsedRules.UNTIL || null;
-            this.recurrenceFormValues.end.count = parsedRules.COUNT || null;
-        }
-    }
-
-    /**
-     * Set the end value based on frequency
-     *
-     * @param freq
-     * @private
-     */
-    private _setEndValues(freq: string): void
-    {
-        // Return if freq is not available
-        if ( !freq )
-        {
-            return;
-        }
-
-        // Get the event's start date
-        const startDate = moment(this.data.event.startDate);
-
-        // Get the end type
-        const endType = this.recurrenceForm.get('end.type').value;
-
-        // If until is not selected
-        if ( endType !== 'until' )
-        {
-            let until;
-
-            // Change the until's default value based on the frequency
-            if ( freq === 'DAILY' )
-            {
-                until = startDate.clone().add(1, 'month').toISOString();
-            }
-
-            if ( freq === 'WEEKLY' )
-            {
-                until = startDate.clone().add(12, 'weeks').toISOString();
-            }
-
-            if ( freq === 'MONTHLY' )
-            {
-                until = startDate.clone().add(12, 'months').toISOString();
-            }
-
-            if ( freq === 'YEARLY' )
-            {
-                until = startDate.clone().add(5, 'years').toISOString();
-            }
-
-            // Set the until
-            this.recurrenceForm.get('end.until').setValue(until);
-        }
-
-        // If count is not selected...
-        if ( endType !== 'count' )
-        {
-            let count;
-
-            // Change the count's default value based on the frequency
-            if ( freq === 'DAILY' )
-            {
-                count = 30;
-            }
-
-            if ( freq === 'WEEKLY' || freq === 'MONTHLY' )
-            {
-                count = 12;
-            }
-
-            if ( freq === 'YEARLY' )
-            {
-                count = 5;
-            }
-
-            // Set the count
-            this.recurrenceForm.get('end.count').setValue(count);
-        }
-    }
-}

src/app/modules/admin/apps/calendar/settings/settings.component.html

@@ -1,60 +0,0 @@
-<div
-    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
-    cdkScrollable>
-
-    <!-- Main -->
-    <div class="flex flex-col flex-auto">
-
-        <!-- Header -->
-        <div class="flex items-center h-16 px-4 sm:px-6 py-2 border-b">
-            <a
-                [routerLink]="['..']"
-                mat-icon-button>
-                <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-            </a>
-            <div class="ml-1 text-lg font-medium">Settings</div>
-        </div>
-
-        <div class="flex flex-auto p-6 sm:p-8">
-            <form
-                class="flex flex-col w-full max-w-xs"
-                [formGroup]="settingsForm">
-                <mat-form-field class="w-full">
-                    <mat-label>Date format</mat-label>
-                    <mat-select [formControlName]="'dateFormat'">
-                        <mat-option [value]="'ll'">Aug 20, {{year}}</mat-option>
-                        <mat-option [value]="'MM/DD/YYYY'">12/31/{{year}}</mat-option>
-                        <mat-option [value]="'DD/MM/YYYY'">31/12/{{year}}</mat-option>
-                        <mat-option [value]="'YYYY-MM-DD'">{{year}}-12-31</mat-option>
-                    </mat-select>
-                </mat-form-field>
-
-                <mat-form-field class="w-full">
-                    <mat-label>Time format</mat-label>
-                    <mat-select [formControlName]="'timeFormat'">
-                        <mat-option [value]="'12'">1:00pm</mat-option>
-                        <mat-option [value]="'24'">13:30</mat-option>
-                    </mat-select>
-                </mat-form-field>
-
-                <mat-form-field class="w-full">
-                    <mat-label>Start week on</mat-label>
-                    <mat-select [formControlName]="'startWeekOn'">
-                        <mat-option [value]="6">Saturday</mat-option>
-                        <mat-option [value]="0">Sunday</mat-option>
-                        <mat-option [value]="1">Monday</mat-option>
-                    </mat-select>
-                </mat-form-field>
-
-                <button
-                    class="mt-4"
-                    mat-flat-button
-                    [color]="'primary'"
-                    [disabled]="settingsForm.invalid || settingsForm.pristine"
-                    (click)="updateSettings()">
-                    Save
-                </button>
-            </form>
-        </div>
-    </div>
-</div>

src/app/modules/admin/apps/calendar/settings/settings.component.ts

@@ -1,96 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
-
-@Component({
-    selector       : 'calendar-settings',
-    templateUrl    : './settings.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation  : ViewEncapsulation.None
-})
-export class CalendarSettingsComponent implements OnInit, OnDestroy
-{
-    settingsForm: FormGroup;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _calendarService: CalendarService,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for current year
-     */
-    get year(): string
-    {
-        return new Date().getFullYear().toString();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Create the event form
-        this.settingsForm = this._formBuilder.group({
-            dateFormat : [''],
-            timeFormat : [''],
-            startWeekOn: ['']
-        });
-
-        // Get settings
-        this._calendarService.settings$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((settings) => {
-
-                // Fill the settings form
-                this.settingsForm.patchValue(settings);
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    updateSettings(): void
-    {
-        // Get the settings
-        const settings = this.settingsForm.value;
-
-        // Update the settings on the server
-        this._calendarService.updateSettings(settings).subscribe((updatedSettings) => {
-
-            // Reset the form with the updated settings
-            this.settingsForm.reset(updatedSettings);
-        });
-    }
-}

src/app/modules/admin/apps/calendar/sidebar/calendar-colors.ts

@@ -1,12 +0,0 @@
-export const calendarColors = [
-    'bg-gray-500',
-    'bg-red-500',
-    'bg-orange-500',
-    'bg-yellow-500',
-    'bg-green-500',
-    'bg-teal-500',
-    'bg-blue-500',
-    'bg-indigo-500',
-    'bg-purple-500',
-    'bg-pink-500'
-];

src/app/modules/admin/apps/calendar/sidebar/sidebar.component.html

@@ -1,117 +0,0 @@
-<div class="flex flex-col flex-auto min-h-full p-8">
-    <div class="pb-6 text-4xl font-extrabold tracking-tight">Calendar</div>
-
-    <!-- Calendars -->
-    <div class="group flex items-center justify-between mb-3">
-        <span class="text-lg font-medium">Calendars</span>
-        <mat-icon
-            class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
-            [svgIcon]="'heroicons_solid:plus-circle'"
-            (click)="addCalendar()"></mat-icon>
-    </div>
-    <ng-container *ngFor="let calendar of calendars">
-        <div class="group flex items-center justify-between mt-2">
-            <div
-                class="flex items-center"
-                (click)="toggleCalendarVisibility(calendar)">
-                <mat-icon
-                    class="cursor-pointer"
-                    [svgIcon]="calendar.visible ? 'check_box' : 'check_box_outline_blank'"></mat-icon>
-                <span
-                    class="w-3 h-3 ml-2 rounded-full"
-                    [ngClass]="calendar.color"></span>
-                <span class="ml-2 leading-none">{{calendar.title}}</span>
-            </div>
-            <mat-icon
-                class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
-                [svgIcon]="'heroicons_solid:pencil-alt'"
-                (click)="openEditPanel(calendar)"></mat-icon>
-        </div>
-    </ng-container>
-
-    <!-- Settings -->
-    <div class="-mx-4 mt-auto">
-        <a
-            class="flex items-center w-full py-3 px-4 rounded-full hover:bg-hover"
-            [routerLink]="['settings']">
-            <mat-icon [svgIcon]="'heroicons_outline:cog'"></mat-icon>
-            <span class="ml-2 font-medium leading-none">Settings</span>
-        </a>
-    </div>
-
-    <!-- Edit panel -->
-    <ng-template #editPanel>
-        <div class="flex flex-col w-80 p-8 shadow-2xl rounded-lg bg-card">
-            <div class="text-2xl font-semibold tracking-tight">
-                <ng-container *ngIf="!calendar.id">Add calendar</ng-container>
-                <ng-container *ngIf="calendar.id">Edit calendar</ng-container>
-            </div>
-            <div class="flex items-center mt-8">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
-                    <input
-                        matInput
-                        [(ngModel)]="calendar.title"
-                        [placeholder]="'Title'"
-                        required>
-                    <mat-select
-                        [(value)]="calendar.color"
-                        [disableOptionCentering]="true"
-                        matPrefix>
-                        <mat-select-trigger class="h-6">
-                            <mat-icon [svgIcon]="'heroicons_outline:color-swatch'"></mat-icon>
-                        </mat-select-trigger>
-                        <div class="px-4 pt-5 text-xl font-semibold">Calendar color</div>
-                        <div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
-                            <ng-container *ngFor="let color of calendarColors">
-                                <mat-option
-                                    class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
-                                    [value]="color"
-                                    #matOption="matOption">
-                                    <mat-icon
-                                        class="absolute m-3 text-white"
-                                        *ngIf="matOption.selected"
-                                        [svgIcon]="'heroicons_outline:check'"></mat-icon>
-                                    <span
-                                        class="flex w-10 h-10 m-1 rounded-full"
-                                        [ngClass]="color"></span>
-                                </mat-option>
-                            </ng-container>
-                        </div>
-                    </mat-select>
-                </mat-form-field>
-            </div>
-
-            <!-- Actions -->
-            <div class="ml-auto mt-8 space-x-2">
-                <button
-                    mat-button
-                    *ngIf="calendar.id"
-                    (click)="deleteCalendar(calendar)">
-                    Delete
-                </button>
-                <button
-                    mat-flat-button
-                    *ngIf="calendar.id"
-                    [color]="'primary'"
-                    [disabled]="!calendar.title"
-                    (click)="saveCalendar(calendar)">
-                    Update
-                </button>
-                <button
-                    mat-button
-                    *ngIf="!calendar.id"
-                    (click)="closeEditPanel()">
-                    Cancel
-                </button>
-                <button
-                    mat-flat-button
-                    *ngIf="!calendar.id"
-                    [color]="'primary'"
-                    [disabled]="!calendar.title"
-                    (click)="saveCalendar(calendar)">
-                    Add
-                </button>
-            </div>
-        </div>
-    </ng-template>
-</div>

src/app/modules/admin/apps/calendar/sidebar/sidebar.component.ts

@@ -1,218 +0,0 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { cloneDeep } from 'lodash-es';
-import { Calendar } from 'app/modules/admin/apps/calendar/calendar.types';
-import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
-import { calendarColors } from 'app/modules/admin/apps/calendar/sidebar/calendar-colors';
-
-@Component({
-    selector     : 'calendar-sidebar',
-    templateUrl  : './sidebar.component.html',
-    encapsulation: ViewEncapsulation.None
-})
-export class CalendarSidebarComponent implements OnInit, OnDestroy
-{
-    @Output() readonly calendarUpdated: EventEmitter<any> = new EventEmitter<any>();
-    @ViewChild('editPanel') private _editPanel: TemplateRef<any>;
-
-    calendar: Calendar | null;
-    calendarColors: any = calendarColors;
-    calendars: Calendar[];
-    private _editPanelOverlayRef: OverlayRef;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _calendarService: CalendarService,
-        private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get calendars
-        this._calendarService.calendars$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((calendars) => {
-
-                // Store the calendars
-                this.calendars = calendars;
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-
-        // Dispose the overlay
-        if ( this._editPanelOverlayRef )
-        {
-            this._editPanelOverlayRef.dispose();
-        }
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Open edit panel
-     */
-    openEditPanel(calendar: Calendar): void
-    {
-        // Set the calendar
-        this.calendar = cloneDeep(calendar);
-
-        // Create the overlay if it doesn't exist
-        if ( !this._editPanelOverlayRef )
-        {
-            this._createEditPanelOverlay();
-        }
-
-        // Attach the portal to the overlay
-        this._editPanelOverlayRef.attach(new TemplatePortal(this._editPanel, this._viewContainerRef));
-    }
-
-    /**
-     * Close the edit panel
-     */
-    closeEditPanel(): void
-    {
-        // Detach the overlay from the portal
-        if ( this._editPanelOverlayRef )
-        {
-            this._editPanelOverlayRef.detach();
-        }
-    }
-
-    /**
-     * Toggle the calendar visibility
-     *
-     * @param calendar
-     */
-    toggleCalendarVisibility(calendar: Calendar): void
-    {
-        // Toggle the visibility
-        calendar.visible = !calendar.visible;
-
-        // Update the calendar
-        this.saveCalendar(calendar);
-    }
-
-    /**
-     * Add calendar
-     */
-    addCalendar(): void
-    {
-        // Create a new calendar with default values
-        const calendar = {
-            id     : null,
-            title  : '',
-            color  : 'bg-blue-500',
-            visible: true
-        };
-
-        // Open the edit panel
-        this.openEditPanel(calendar);
-    }
-
-    /**
-     * Save the calendar
-     *
-     * @param calendar
-     */
-    saveCalendar(calendar: Calendar): void
-    {
-        // If there is no id on the calendar...
-        if ( !calendar.id )
-        {
-            // Add calendar to the server
-            this._calendarService.addCalendar(calendar).subscribe(() => {
-
-                // Close the edit panel
-                this.closeEditPanel();
-
-                // Emit the calendarUpdated event
-                this.calendarUpdated.emit();
-            });
-        }
-        // Otherwise...
-        else
-        {
-            // Update the calendar on the server
-            this._calendarService.updateCalendar(calendar.id, calendar).subscribe(() => {
-
-                // Close the edit panel
-                this.closeEditPanel();
-
-                // Emit the calendarUpdated event
-                this.calendarUpdated.emit();
-            });
-        }
-    }
-
-    /**
-     * Delete the calendar
-     *
-     * @param calendar
-     */
-    deleteCalendar(calendar: Calendar): void
-    {
-        // Delete the calendar on the server
-        this._calendarService.deleteCalendar(calendar.id).subscribe(() => {
-
-            // Close the edit panel
-            this.closeEditPanel();
-
-            // Emit the calendarUpdated event
-            this.calendarUpdated.emit();
-        });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Create the edit panel overlay
-     *
-     * @private
-     */
-    private _createEditPanelOverlay(): void
-    {
-        // Create the overlay
-        this._editPanelOverlayRef = this._overlay.create({
-            hasBackdrop     : true,
-            scrollStrategy  : this._overlay.scrollStrategies.reposition(),
-            positionStrategy: this._overlay.position()
-                                  .global()
-                                  .centerHorizontally()
-                                  .centerVertically()
-        });
-
-        // Detach the overlay from the portal on backdrop click
-        this._editPanelOverlayRef.backdropClick().subscribe(() => {
-            this.closeEditPanel();
-            this.calendar = null;
-        });
-    }
-}

src/app/modules/admin/apps/chat/chat.component.html

@@ -1,8 +0,0 @@
-<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
-
-    <!-- Main -->
-    <div class="flex flex-auto overflow-hidden">
-        <router-outlet></router-outlet>
-    </div>
-
-</div>

src/app/modules/admin/apps/chat/chat.component.ts

@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector       : 'chat',
-    templateUrl    : './chat.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ChatComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}

src/app/modules/admin/apps/chat/chat.module.ts

@@ -1,42 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { SharedModule } from 'app/shared/shared.module';
-import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
-import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
-import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
-import { ContactInfoComponent } from 'app/modules/admin/apps/chat/contact-info/contact-info.component';
-import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
-import { NewChatComponent } from 'app/modules/admin/apps/chat/new-chat/new-chat.component';
-import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.component';
-
-@NgModule({
-    declarations: [
-        ChatComponent,
-        ChatsComponent,
-        ContactInfoComponent,
-        ConversationComponent,
-        NewChatComponent,
-        ProfileComponent
-    ],
-    imports     : [
-        RouterModule.forChild(chatRoutes),
-        MatButtonModule,
-        MatCheckboxModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatSidenavModule,
-        SharedModule
-    ]
-})
-export class ChatModule
-{
-}

src/app/modules/admin/apps/chat/chat.resolvers.ts

@@ -1,147 +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 { ChatService } from 'app/modules/admin/apps/chat/chat.service';
-import { Chat, Contact, Profile } from 'app/modules/admin/apps/chat/chat.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ChatChatsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _chatService: ChatService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Chat[]> | any
-    {
-        return this._chatService.getChats();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ChatChatResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _chatService: ChatService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Chat>
-    {
-        return this._chatService.getChatById(route.paramMap.get('id'))
-                   .pipe(
-                       // Error here means the requested chat 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);
-                       })
-                   );
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ChatContactsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _chatService: ChatService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact[]> | any
-    {
-        return this._chatService.getContacts();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ChatProfileResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _chatService: ChatService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Profile> | any
-    {
-        return this._chatService.getProfile();
-    }
-}

src/app/modules/admin/apps/chat/chat.routing.ts

@@ -1,37 +0,0 @@
-import { Route } from '@angular/router';
-import { ChatChatResolver, ChatChatsResolver, ChatContactsResolver, ChatProfileResolver } from 'app/modules/admin/apps/chat/chat.resolvers';
-import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
-import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
-import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
-
-export const chatRoutes: Route[] = [
-    {
-        path     : '',
-        component: ChatComponent,
-        resolve  : {
-            chats   : ChatChatsResolver,
-            contacts: ChatContactsResolver,
-            profile : ChatProfileResolver
-        },
-        children : [
-            {
-                path     : '',
-                component: ChatsComponent,
-                children : [
-                    {
-                        path     : '',
-                        component: ConversationComponent,
-                        children : [
-                            {
-                                path   : ':id',
-                                resolve: {
-                                    conversation: ChatChatResolver
-                                }
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-];

src/app/modules/admin/apps/chat/chat.service.ts

@@ -1,202 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
-import { filter, map, switchMap, take, tap } from 'rxjs/operators';
-import { Chat, Contact, Profile } from 'app/modules/admin/apps/chat/chat.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ChatService
-{
-    private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
-    private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject(null);
-    private _contact: BehaviorSubject<Contact> = new BehaviorSubject(null);
-    private _contacts: BehaviorSubject<Contact[]> = new BehaviorSubject(null);
-    private _profile: BehaviorSubject<Profile> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for chat
-     */
-    get chat$(): Observable<Chat>
-    {
-        return this._chat.asObservable();
-    }
-
-    /**
-     * Getter for chats
-     */
-    get chats$(): Observable<Chat[]>
-    {
-        return this._chats.asObservable();
-    }
-
-    /**
-     * Getter for contact
-     */
-    get contact$(): Observable<Contact>
-    {
-        return this._contact.asObservable();
-    }
-
-    /**
-     * Getter for contacts
-     */
-    get contacts$(): Observable<Contact[]>
-    {
-        return this._contacts.asObservable();
-    }
-
-    /**
-     * Getter for profile
-     */
-    get profile$(): Observable<Profile>
-    {
-        return this._profile.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get chats
-     */
-    getChats(): Observable<any>
-    {
-        return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
-            tap((response: Chat[]) => {
-                this._chats.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get contact
-     *
-     * @param id
-     */
-    getContact(id: string): Observable<any>
-    {
-        return this._httpClient.get<Contact>('api/apps/chat/contacts', {params: {id}}).pipe(
-            tap((response: Contact) => {
-                this._contact.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get contacts
-     */
-    getContacts(): Observable<any>
-    {
-        return this._httpClient.get<Contact[]>('api/apps/chat/contacts').pipe(
-            tap((response: Contact[]) => {
-                this._contacts.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get profile
-     */
-    getProfile(): Observable<any>
-    {
-        return this._httpClient.get<Profile>('api/apps/chat/profile').pipe(
-            tap((response: Profile) => {
-                this._profile.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get chat
-     *
-     * @param id
-     */
-    getChatById(id: string): Observable<any>
-    {
-        return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe(
-            map((chat) => {
-
-                // Update the chat
-                this._chat.next(chat);
-
-                // Return the chat
-                return chat;
-            }),
-            switchMap((chat) => {
-
-                if ( !chat )
-                {
-                    return throwError('Could not found chat with id of ' + id + '!');
-                }
-
-                return of(chat);
-            })
-        );
-    }
-
-    /**
-     * Update chat
-     *
-     * @param id
-     * @param chat
-     */
-    updateChat(id: string, chat: Chat): Observable<Chat>
-    {
-        return this.chats$.pipe(
-            take(1),
-            switchMap(chats => this._httpClient.patch<Chat>('api/apps/chat/chat', {
-                id,
-                chat
-            }).pipe(
-                map((updatedChat) => {
-
-                    // Find the index of the updated chat
-                    const index = chats.findIndex(item => item.id === id);
-
-                    // Update the chat
-                    chats[index] = updatedChat;
-
-                    // Update the chats
-                    this._chats.next(chats);
-
-                    // Return the updated contact
-                    return updatedChat;
-                }),
-                switchMap(updatedChat => this.chat$.pipe(
-                    take(1),
-                    filter(item => item && item.id === id),
-                    tap(() => {
-
-                        // Update the chat if it's selected
-                        this._chat.next(updatedChat);
-
-                        // Return the updated chat
-                        return updatedChat;
-                    })
-                ))
-            ))
-        );
-    }
-
-    /**
-     * Reset the selected chat
-     */
-    resetChat(): void
-    {
-        this._chat.next(null);
-    }
-}