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

# Conflicts:
#	src/app/app.routing.ts
#	src/app/mock-api/common/navigation/data.ts
#	src/app/modules/admin/apps/academy/academy.service.ts
#	src/app/modules/admin/apps/academy/details/details.component.html
#	src/app/modules/admin/apps/academy/list/list.component.html
#	src/app/modules/admin/apps/mailbox/list/list.component.ts
#	src/app/modules/admin/docs/changelog/changelog.ts
#	src/app/modules/admin/pages/pricing/modern/modern.component.html
#	src/app/modules/admin/pages/pricing/simple/simple.component.html
#	src/app/modules/admin/pages/pricing/single/single.component.html
#	src/app/modules/admin/pages/pricing/table/table.component.html

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/demo",
-    "version": "13.5.0",
+    "name": "@fuse/starter",
+    "version": "13.6.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -14,17 +14,17 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "12.2.1",
-        "@angular/cdk": "12.2.1",
-        "@angular/common": "12.2.1",
-        "@angular/compiler": "12.2.1",
-        "@angular/core": "12.2.1",
-        "@angular/forms": "12.2.1",
-        "@angular/material": "12.2.1",
-        "@angular/material-moment-adapter": "12.2.1",
-        "@angular/platform-browser": "12.2.1",
-        "@angular/platform-browser-dynamic": "12.2.1",
-        "@angular/router": "12.2.1",
+        "@angular/animations": "12.2.3",
+        "@angular/cdk": "12.2.3",
+        "@angular/common": "12.2.3",
+        "@angular/compiler": "12.2.3",
+        "@angular/core": "12.2.3",
+        "@angular/forms": "12.2.3",
+        "@angular/material": "12.2.3",
+        "@angular/material-moment-adapter": "12.2.3",
+        "@angular/platform-browser": "12.2.3",
+        "@angular/platform-browser-dynamic": "12.2.3",
+        "@angular/router": "12.2.3",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -34,14 +34,14 @@
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
         "@ngneat/transloco": "2.22.0",
-        "apexcharts": "3.27.3",
+        "apexcharts": "3.28.1",
         "crypto-js": "3.3.0",
         "highlight.js": "11.2.0",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
         "ng-apexcharts": "1.5.12",
         "ngx-markdown": "12.0.1",
-        "ngx-quill": "14.2.0",
+        "ngx-quill": "14.3.0",
         "perfect-scrollbar": "1.5.2",
         "quill": "1.3.7",
         "rrule": "2.6.8",
@@ -51,14 +51,14 @@
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.2.1",
+        "@angular-devkit/build-angular": "12.2.3",
         "@angular-eslint/builder": "12.3.1",
         "@angular-eslint/eslint-plugin": "12.3.1",
         "@angular-eslint/eslint-plugin-template": "12.3.1",
         "@angular-eslint/schematics": "12.3.1",
         "@angular-eslint/template-parser": "12.3.1",
-        "@angular/cli": "12.2.1",
-        "@angular/compiler-cli": "12.2.1",
+        "@angular/cli": "12.2.3",
+        "@angular/compiler-cli": "12.2.3",
         "@tailwindcss/aspect-ratio": "0.2.1",
         "@tailwindcss/line-clamp": "0.2.1",
         "@tailwindcss/typography": "0.4.1",
@@ -68,14 +68,14 @@
         "@types/jasmine": "3.8.2",
         "@types/lodash": "4.14.172",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.19",
-        "@typescript-eslint/eslint-plugin": "4.29.1",
-        "@typescript-eslint/parser": "4.29.1",
-        "autoprefixer": "10.3.1",
+        "@types/node": "12.20.21",
+        "@typescript-eslint/eslint-plugin": "4.30.0",
+        "@typescript-eslint/parser": "4.30.0",
+        "autoprefixer": "10.3.3",
         "chroma-js": "2.1.2",
         "eslint": "7.32.0",
-        "eslint-plugin-import": "2.24.0",
-        "eslint-plugin-jsdoc": "36.0.7",
+        "eslint-plugin-import": "2.24.2",
+        "eslint-plugin-jsdoc": "36.0.8",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "jasmine-core": "3.8.0",
         "karma": "6.3.4",
@@ -85,7 +85,7 @@
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
         "postcss": "8.3.6",
-        "tailwindcss": "2.2.7",
+        "tailwindcss": "2.2.9",
         "typescript": "4.3.5"
     }
 }

src/@fuse/components/drawer/drawer.component.scss

@@ -116,7 +116,7 @@ fuse-drawer {
     left: 0;
     right: 0;
     z-index: 299;
-    opacity: 0;
+    opacity: 1;
     background-color: rgba(0, 0, 0, 0.6);
 
     /* Fixed mode */

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

@@ -211,6 +211,12 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
+        // Finish the animation
+        if ( this._player )
+        {
+            this._player.finish();
+        }
+
         // Deregister the drawer from the registry
         this._fuseDrawerService.deregisterComponent(this.name);
     }
@@ -338,6 +344,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
         // Create the enter animation and attach it to the player
         this._player = this._animationBuilder.build([
+            style({opacity: 0}),
             animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
         ]).create(this._overlay);
 
@@ -346,6 +353,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
             // Destroy the player
             this._player.destroy();
+            this._player = null;
         });
 
         // Play the animation
@@ -382,6 +390,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
             // Destroy the player
             this._player.destroy();
+            this._player = null;
 
             // If the backdrop still exists...
             if ( this._overlay )

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

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

src/app/app.resolvers.ts

@@ -4,6 +4,7 @@ import { forkJoin, Observable } from 'rxjs';
 import { MessagesService } from 'app/layout/common/messages/messages.service';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
+import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
 import { UserService } from 'app/core/user/user.service';
 
@@ -19,6 +20,7 @@ export class InitialDataResolver implements Resolve<any>
         private _messagesService: MessagesService,
         private _navigationService: NavigationService,
         private _notificationsService: NotificationsService,
+        private _quickChatService: QuickChatService,
         private _shortcutsService: ShortcutsService,
         private _userService: UserService
     )
@@ -42,6 +44,7 @@ export class InitialDataResolver implements Resolve<any>
             this._navigationService.get(),
             this._messagesService.getAll(),
             this._notificationsService.getAll(),
+            this._quickChatService.getChats(),
             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,137 +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)},
-                {path: 'finance', loadChildren: () => import('app/modules/admin/dashboards/finance/finance.module').then(m => m.FinanceModule)},
-                {path: 'crypto', loadChildren: () => import('app/modules/admin/dashboards/crypto/crypto.module').then(m => m.CryptoModule)},
-            ]},
-
-            // Apps
-            {path: 'apps', children: [
-                {path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.module').then(m => m.AcademyModule)},
-                {path: 'calendar', loadChildren: () => import('app/modules/admin/apps/calendar/calendar.module').then(m => m.CalendarModule)},
-                {path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.module').then(m => m.ChatModule)},
-                {path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
-                {path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
-                {path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
-                {path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
-                {path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
-                {path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
-                {path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
-                {path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
-            ]},
-
-            // Pages
-            {path: 'pages', children: [
-
-                // Activities
-                {path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.module').then(m => m.ActivitiesModule)},
-
-                // Authentication
-                {path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
-
-                // Coming Soon
-                {path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
-
-                // Error
-                {path: 'error', children: [
-                    {path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
-                    {path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
-                ]},
-
-                // Invoice
-                {path: 'invoice', children: [
-                    {path: 'printable', children: [
-                        {path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
-                        {path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
-                    ]}
-                ]},
-
-                // Maintenance
-                {path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
-
-                // Pricing
-                {path: 'pricing', children: [
-                    {path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
-                    {path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
-                    {path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
-                    {path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
-                ]},
-
-                // Profile
-                {path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
-
-                // Settings
-                {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
-            ]},
-
-            // User Interface
-            {path: 'ui', children: [
-
-                // Material Components
-                {path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.module').then(m => m.MaterialComponentsModule)},
-
-                // Fuse Components
-                {path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.module').then(m => m.FuseComponentsModule)},
-
-                // Other Components
-                {path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.module').then(m => m.OtherComponentsModule)},
-
-                // TailwindCSS
-                {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
-
-                // Advanced Search
-                {path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
-
-                // Animations
-                {path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)},
-
-                 // Cards
-                {path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.module').then(m => m.CardsModule)},
-
-                // Colors
-                {path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
-
-                // Confirmation Dialog
-                {path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
-
-                // Datatable
-                {path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
-
-                // Forms
-                {path: 'forms', children: [
-                    {path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
-                    {path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
-                    {path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
-                ]},
-
-                // Icons
-                {path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
-
-                // Page Layouts
-                {path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
-
-                // Typography
-                {path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
-            ]},
-
-            // Documentation
-            {path: 'docs', children: [
-
-                // Changelog
-                {path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
-
-                // Guides
-                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)}
-            ]},
-
-            // 404 & Catch all
-            {path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
-            {path: '**', redirectTo: '404-not-found'}
+            {path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
         ]
     }
 ];

src/app/layout/common/quick-chat/quick-chat.component.html

@@ -0,0 +1,196 @@
+<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen">
+    <div
+        class="flex flex-col w-full sm:w-96 h-full lg:shadow transform transition-transform duration-400 ease-drawer bg-card"
+        [ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
+
+        <!-- Header -->
+        <div
+            class="quick-chat-header flex flex-0 items-center justify-start cursor-pointer"
+            (click)="toggle()">
+
+            <!-- Toggle -->
+            <ng-container *ngIf="!opened || (opened && !selectedChat)">
+                <div class="flex flex-auto items-center justify-center">
+                    <div class="flex flex-0 items-center justify-center w-16">
+                        <mat-icon
+                            class="icon-size-6"
+                            [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+                    </div>
+                    <div class="text-lg font-medium text-secondary">Team Chat</div>
+                    <button
+                        class="ml-auto mr-4"
+                        mat-icon-button>
+                        <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
+                    </button>
+                </div>
+            </ng-container>
+
+            <!-- Contact info -->
+            <ng-container *ngIf="opened && selectedChat">
+                <div class="flex flex-auto items-center ml-3">
+                    <div class="relative flex flex-0 items-center justify-center w-10 h-10">
+                        <ng-container *ngIf="chat.contact.avatar">
+                            <img
+                                class="w-full h-full rounded-full object-cover"
+                                [src]="chat.contact.avatar"
+                                alt="Contact avatar"/>
+                        </ng-container>
+                        <ng-container *ngIf="!chat.contact.avatar">
+                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                                {{chat.contact.name.charAt(0)}}
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
+                    <button
+                        class="ml-auto mr-4"
+                        mat-icon-button>
+                        <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
+                    </button>
+                </div>
+            </ng-container>
+        </div>
+
+        <!-- Content -->
+        <div class="flex flex-auto border-t overflow-hidden">
+
+            <!-- Chat list -->
+            <div
+                class="flex-0 w-16 h-full overflow-y-auto overscroll-y-contain sm:overflow-hidden sm:overscroll-auto"
+                fuseScrollbar
+                [fuseScrollbarOptions]="{wheelPropagation: false}">
+                <div class="flex-auto">
+                    <ng-container *ngFor="let chat of chats; trackBy: trackByFn">
+                        <div
+                            class="flex items-center py-3 px-4 cursor-pointer"
+                            [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
+                                        'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
+                            (click)="selectChat(chat.id)">
+                            <div class="relative flex flex-0 items-center justify-center w-8 h-8">
+                                <ng-container *ngIf="chat.unreadCount > 0">
+                                    <div
+                                        class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
+                                        [class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
+                                </ng-container>
+                                <ng-container *ngIf="chat.contact.avatar">
+                                    <img
+                                        class="w-full h-full rounded-full object-cover"
+                                        [src]="chat.contact.avatar"
+                                        alt="Contact avatar"/>
+                                </ng-container>
+                                <ng-container *ngIf="!chat.contact.avatar">
+                                    <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                                        {{chat.contact.name.charAt(0)}}
+                                    </div>
+                                </ng-container>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+
+            <!-- Conversation -->
+            <div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
+                <ng-container *ngIf="chat; else selectChatOrStartNew">
+                    <div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
+                        <div class="flex flex-col flex-auto flex-shrink p-6">
+                            <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
+                                <!-- Start of the day -->
+                                <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
+                                    <div class="flex items-center justify-center my-3 -mx-6">
+                                        <div class="flex-auto border-b"></div>
+                                        <div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
+                                            {{message.createdAt | date: 'longDate'}}
+                                        </div>
+                                        <div class="flex-auto border-b"></div>
+                                    </div>
+                                </ng-container>
+                                <div
+                                    class="flex flex-col"
+                                    [ngClass]="{'items-end': message.isMine,
+                                        'items-start': !message.isMine,
+                                        'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
+                                        'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
+                                    <!-- Bubble -->
+                                    <div
+                                        class="relative max-w-3/4 px-3 py-2 rounded-lg"
+                                        [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
+                                            'bg-gray-500 text-gray-50': !message.isMine}">
+                                        <!-- Speech bubble tail -->
+                                        <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
+                                            <div
+                                                class="absolute bottom-0 w-3 transform"
+                                                [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
+                                                    'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
+                                                <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
+                                            </div>
+                                        </ng-container>
+                                        <!-- Message -->
+                                        <div
+                                            class="min-w-4 leading-5"
+                                            [innerHTML]="message.value">
+                                        </div>
+                                    </div>
+                                    <!-- Time -->
+                                    <ng-container
+                                        *ngIf="first
+                                       || last
+                                       || chat.messages[i + 1].isMine !== message.isMine
+                                       || chat.messages[i + 1].createdAt !== message.createdAt">
+                                        <div
+                                            class="my-0.5 text-sm font-medium text-secondary"
+                                            [ngClass]="{'mr-3': message.isMine,
+                                                'ml-3': !message.isMine}">
+                                            {{message.createdAt | date:'HH:mm'}}
+                                        </div>
+                                    </ng-container>
+                                </div>
+                            </ng-container>
+                        </div>
+                    </div>
+
+                    <!-- Message field -->
+                    <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
+                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
+                            <textarea
+                                class="min-h-5 my-0 resize-none"
+                                style="margin: 11px 0 !important; padding: 0 !important;"
+                                [rows]="1"
+                                matInput
+                                #messageInput></textarea>
+                        </mat-form-field>
+                        <div class="flex items-center h-11 my-px ml-4">
+                            <button
+                                mat-icon-button>
+                                <mat-icon
+                                    class="transform rotate-90"
+                                    [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
+                            </button>
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Select chat or start new template -->
+<ng-template #selectChatOrStartNew>
+    <div class="flex flex-col flex-auto items-center justify-center w-full h-full p-4">
+        <mat-icon
+            class="icon-size-20"
+            [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
+        <div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
+    </div>
+</ng-template>
+
+<!-- Speech bubble tail SVG -->
+<!-- @formatter:off -->
+<ng-template #speechBubbleExtension>
+    <svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path d="M1.01522827,0.516204834 C-8.83532715,54.3062744 61.7609863,70.5215302 64.8009949,64.3061218 C68.8074951,54.8859711 30.1663208,52.9997559 37.5036011,0.516204834 L1.01522827,0.516204834 Z" fill="currentColor" fill-rule="nonzero"></path>
+        </g>
+    </svg>
+</ng-template>
+<!-- @formatter:on -->

src/app/layout/common/quick-chat/quick-chat.component.scss

@@ -0,0 +1,26 @@
+quick-chat {
+    z-index: 399;
+}
+
+/* Adjustments depending on the selected layout */
+.quick-chat-header {
+    height: 64px;
+
+    enterprise-layout &,
+    modern-layout & {
+        height: 80px !important;
+    }
+}
+
+
+/* Overlay */
+.quick-chat-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 299;
+    opacity: 1;
+    background-color: transparent;
+}

src/app/layout/common/quick-chat/quick-chat.component.ts

@@ -0,0 +1,275 @@
+import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
+import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
+
+@Component({
+    selector     : 'quick-chat',
+    templateUrl  : './quick-chat.component.html',
+    styleUrls    : ['./quick-chat.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'quickChat'
+})
+export class QuickChatComponent implements OnInit, OnDestroy
+{
+    @ViewChild('messageInput') messageInput: ElementRef;
+    chat: Chat;
+    chats: Chat[];
+    opened: boolean = false;
+    selectedChat: Chat;
+    private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
+    private _overlay: HTMLElement;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer2: Renderer2,
+        private _ngZone: NgZone,
+        private _quickChatService: QuickChatService,
+        private _scrollStrategyOptions: ScrollStrategyOptions
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'quick-chat-opened': this.opened
+        };
+    }
+
+    /**
+     * Resize on 'input' and 'ngModelChange' events
+     *
+     * @private
+     */
+    @HostListener('input')
+    @HostListener('ngModelChange')
+    private _resizeMessageInput(): void
+    {
+        // This doesn't need to trigger Angular's change detection by itself
+        this._ngZone.runOutsideAngular(() => {
+
+            setTimeout(() => {
+
+                // Set the height to 'auto' so we can correctly read the scrollHeight
+                this.messageInput.nativeElement.style.height = 'auto';
+
+                // Get the scrollHeight and subtract the vertical padding
+                this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
+            });
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Chat
+        this._quickChatService.chat$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chat: Chat) => {
+                this.chat = chat;
+            });
+
+        // Chats
+        this._quickChatService.chats$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chats: Chat[]) => {
+                this.chats = chats;
+            });
+
+        // Selected chat
+        this._quickChatService.chat$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((chat: Chat) => {
+                this.selectedChat = chat;
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open the panel
+     */
+    open(): void
+    {
+        // Return if the panel has already opened
+        if ( this.opened )
+        {
+            return;
+        }
+
+        // Open the panel
+        this._toggleOpened(true);
+    }
+
+    /**
+     * Close the panel
+     */
+    close(): void
+    {
+        // Return if the panel has already closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Close the panel
+        this._toggleOpened(false);
+    }
+
+    /**
+     * Toggle the panel
+     */
+    toggle(): void
+    {
+        if ( this.opened )
+        {
+            this.close();
+        }
+        else
+        {
+            this.open();
+        }
+    }
+
+    /**
+     * Select the chat
+     *
+     * @param id
+     */
+    selectChat(id: string): void
+    {
+        // Open the panel
+        this._toggleOpened(true);
+
+        // Get the chat data
+        this._quickChatService.getChatById(id).subscribe();
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the backdrop
+     *
+     * @private
+     */
+    private _showOverlay(): void
+    {
+        // Try hiding the overlay in case there is one already opened
+        this._hideOverlay();
+
+        // Create the backdrop element
+        this._overlay = this._renderer2.createElement('div');
+
+        // Return if overlay couldn't be create for some reason
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // Add a class to the backdrop element
+        this._overlay.classList.add('quick-chat-overlay');
+
+        // Append the backdrop to the parent of the panel
+        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+
+        // Enable block scroll strategy
+        this._scrollStrategy.enable();
+
+        // Add an event listener to the overlay
+        this._overlay.addEventListener('click', () => {
+            this.close();
+        });
+    }
+
+    /**
+     * Hide the backdrop
+     *
+     * @private
+     */
+    private _hideOverlay(): void
+    {
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // If the backdrop still exists...
+        if ( this._overlay )
+        {
+            // Remove the backdrop
+            this._overlay.parentNode.removeChild(this._overlay);
+            this._overlay = null;
+        }
+
+        // Disable block scroll strategy
+        this._scrollStrategy.disable();
+    }
+
+    /**
+     * Open/close the panel
+     *
+     * @param open
+     * @private
+     */
+    private _toggleOpened(open: boolean): void
+    {
+        // Set the opened
+        this.opened = open;
+
+        // If the panel opens, show the overlay
+        if ( open )
+        {
+            this._showOverlay();
+        }
+        // Otherwise, hide the overlay
+        else
+        {
+            this._hideOverlay();
+        }
+    }
+}

src/app/layout/common/quick-chat/quick-chat.module.ts

@@ -0,0 +1,32 @@
+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 { FuseDrawerModule } from '@fuse/components/drawer';
+import { FuseScrollbarModule } from '@fuse/directives/scrollbar';
+import { SharedModule } from 'app/shared/shared.module';
+import { QuickChatComponent } from 'app/layout/common/quick-chat/quick-chat.component';
+
+@NgModule({
+    declarations: [
+        QuickChatComponent
+    ],
+    imports: [
+        RouterModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        FuseDrawerModule,
+        FuseScrollbarModule,
+        SharedModule,
+    ],
+    exports     : [
+        QuickChatComponent
+    ]
+})
+export class QuickChatModule
+{
+}

src/app/layout/common/quick-chat/quick-chat.service.ts

@@ -0,0 +1,85 @@
+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 { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class QuickChatService
+{
+    private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
+    private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for chat
+     */
+    get chat$(): Observable<Chat>
+    {
+        return this._chat.asObservable();
+    }
+
+    /**
+     * Getter for chat
+     */
+    get chats$(): Observable<Chat[]>
+    {
+        return this._chats.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 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);
+            })
+        );
+    }
+}

src/app/layout/common/quick-chat/quick-chat.types.ts

@@ -1,10 +1,33 @@
-export interface Profile
+export interface Notification
+{
+    id: string;
+    icon?: string;
+    image?: string;
+    title?: string;
+    description?: string;
+    time: string;
+    link?: string;
+    useRouter?: boolean;
+    read: boolean;
+}
+
+export interface Chat
 {
     id?: string;
-    name?: string;
-    email?: string;
-    avatar?: string;
-    about?: string;
+    contactId?: string;
+    contact?: Contact;
+    unreadCount?: number;
+    muted?: boolean;
+    lastMessage?: string;
+    lastMessageAt?: string;
+    messages?: {
+        id?: string;
+        chatId?: string;
+        contactId?: string;
+        isMine?: boolean;
+        value?: string;
+        createdAt?: string;
+    }[];
 }
 
 export interface Contact
@@ -34,22 +57,3 @@ export interface Contact
         links?: any[];
     };
 }
-
-export interface Chat
-{
-    id?: string;
-    contactId?: string;
-    contact?: Contact;
-    unreadCount?: number;
-    muted?: boolean;
-    lastMessage?: string;
-    lastMessageAt?: string;
-    messages?: {
-        id?: string;
-        chatId?: string;
-        contactId?: string;
-        isMine?: boolean;
-        value?: string;
-        createdAt?: string;
-    }[];
-}

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

@@ -0,0 +1,474 @@
+<div
+    class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
+    [class.lg:right-0]="config.layout === 'centered' || config.layout === 'material'"
+    [class.lg:right-16]="config.layout !== 'centered' && config.layout !== 'material'"
+    style="top: 275px"
+    (click)="settingsDrawer.toggle()">
+    <mat-icon
+        class="icon-size-5 text-white animate-spin-slow"
+        [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+</div>
+
+<fuse-drawer
+    class="w-screen min-w-screen sm:w-100 sm:min-w-100 z-999"
+    fixed
+    [mode]="'over'"
+    [name]="'settingsDrawer'"
+    [position]="'right'"
+    #settingsDrawer>
+
+    <div class="flex flex-col w-full overflow-auto bg-card">
+        <div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
+            <mat-icon
+                class="icon-size-7 text-current"
+                [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+            <div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
+            <button
+                class="ml-auto"
+                mat-icon-button
+                (click)="settingsDrawer.close()">
+                <mat-icon
+                    class="text-current"
+                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
+            </button>
+        </div>
+
+        <div class="flex flex-col p-6">
+
+            <!-- Theme -->
+            <div class="text-md font-semibold text-secondary">THEME</div>
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
+                <ng-container *ngFor="let theme of themes">
+                    <div
+                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                        [class.ring-2]="config.theme === theme[0]"
+                        (click)="setTheme(theme[0])">
+                        <div
+                            class="flex-0 w-3 h-3 rounded-full"
+                            [style.background-color]="theme[1].primary"></div>
+                        <div
+                            class="ml-2.5 font-medium leading-5 truncate"
+                            [class.text-secondary]="config.theme !== theme[0]">
+                            {{theme[0] | titlecase}}
+                        </div>
+                    </div>
+                </ng-container>
+            </div>
+
+            <hr class="my-8">
+
+            <!-- Scheme -->
+            <div class="text-md font-semibold text-secondary">SCHEME</div>
+            <div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
+                <!-- Auto -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'auto'"
+                    matTooltip="Automatically sets the scheme based on user's operating system's color scheme preference using 'prefer-color-scheme' media query."
+                    (click)="setScheme('auto')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:lightning-bolt'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'auto'">
+                        Auto
+                    </div>
+                </div>
+                <!-- Dark -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'dark'"
+                    (click)="setScheme('dark')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:moon'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'dark'">
+                        Dark
+                    </div>
+                </div>
+                <!-- Light -->
+                <div
+                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    [class.ring-2]="config.scheme === 'light'"
+                    (click)="setScheme('light')">
+                    <div class="flex items-center rounded-full overflow-hidden">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:sun'"></mat-icon>
+                    </div>
+                    <div
+                        class="flex items-center ml-2 font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'light'">
+                        Light
+                    </div>
+                </div>
+            </div>
+
+            <hr class="my-8">
+
+            <!-- Layout -->
+            <div class="text-md font-semibold text-secondary">LAYOUT</div>
+            <div class="grid grid-cols-3 gap-3 mt-6">
+
+                <!-- Empty -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('empty')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'empty'">
+                        <div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'empty'">
+                        Empty
+                    </div>
+                </div>
+
+                <!-- Classic -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('classic')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classic'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="mt-3 mx-1.5 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'classic'">
+                        Classic
+                    </div>
+                </div>
+
+                <!-- Classy -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('classy')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classy'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="flex items-center mt-1 mx-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="mt-2 mx-1 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-2">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'classy'">
+                        Classy
+                    </div>
+                </div>
+
+                <!-- Compact -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('compact')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'compact'">
+                        <div class="w-5 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'compact'">
+                        Compact
+                    </div>
+                </div>
+
+                <!-- Dense -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('dense')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'dense'">
+                        <div class="w-4 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'dense'">
+                        Dense
+                    </div>
+                </div>
+
+                <!-- Futuristic -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('futuristic')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'futuristic'">
+                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
+                            <div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="flex-auto"></div>
+                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'futuristic'">
+                        Futuristic
+                    </div>
+                </div>
+
+                <!-- Thin -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('thin')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'thin'">
+                        <div class="w-3 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto border-l">
+                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex items-center justify-end h-full mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'thin'">
+                        Thin
+                    </div>
+                </div>
+
+                <div class="col-span-2"></div>
+
+                <!-- Centered -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('centered')">
+                    <div
+                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'centered'">
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
+                            <div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
+                                <div class="flex ml-1.5">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                                <div class="flex items-center justify-end ml-auto mr-1.5">
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'centered'">
+                        Centered
+                    </div>
+                </div>
+
+                <!-- Enterprise -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('enterprise')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'enterprise'">
+                        <div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex items-center justify-end ml-auto space-x-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        </div>
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
+                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'enterprise'">
+                        Enterprise
+                    </div>
+                </div>
+
+                <!-- Material -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('material')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'material'">
+                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
+                            <div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
+                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="flex items-center justify-end ml-auto space-x-1">
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                </div>
+                            </div>
+                            <div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'material'">
+                        Material
+                    </div>
+                </div>
+
+                <!-- Modern -->
+                <div
+                    class="flex flex-col cursor-pointer"
+                    (click)="setLayout('modern')">
+                    <div
+                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'modern'">
+                        <div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
+                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="flex items-center h-3 ml-2 space-x-1">
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                            <div class="flex items-center justify-end ml-auto space-x-1">
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="flex flex-col flex-auto">
+                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        </div>
+                    </div>
+                    <div
+                        class="mt-2 text-md font-medium text-center text-secondary"
+                        [class.text-primary]="config.layout === 'modern'">
+                        Modern
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</fuse-drawer>

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

@@ -0,0 +1,124 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FuseConfigService } from '@fuse/services/config';
+import { FuseTailwindService } from '@fuse/services/tailwind';
+import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
+import { Layout } from 'app/layout/layout.types';
+
+@Component({
+    selector     : 'settings',
+    templateUrl  : './settings.component.html',
+    styles       : [
+        `
+            settings {
+                position: static;
+                display: block;
+                flex: none;
+                width: auto;
+            }
+        `
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class SettingsComponent implements OnInit, OnDestroy
+{
+    config: AppConfig;
+    layout: Layout;
+    scheme: 'dark' | 'light';
+    theme: string;
+    themes: [string, any][] = [];
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _router: Router,
+        private _fuseConfigService: FuseConfigService,
+        private _fuseTailwindService: FuseTailwindService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the themes
+        this._fuseTailwindService.tailwindConfig$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.themes = Object.entries(config.themes);
+            });
+
+        // Subscribe to config changes
+        this._fuseConfigService.config$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config: AppConfig) => {
+
+                // Store the config
+                this.config = config;
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Set the layout on the config
+     *
+     * @param layout
+     */
+    setLayout(layout: string): void
+    {
+        // Clear the 'layout' query param to allow layout changes
+        this._router.navigate([], {
+            queryParams        : {
+                layout: null
+            },
+            queryParamsHandling: 'merge'
+        }).then(() => {
+
+            // Set the config
+            this._fuseConfigService.config = {layout};
+        });
+    }
+
+    /**
+     * Set the scheme on the config
+     *
+     * @param scheme
+     */
+    setScheme(scheme: Scheme): void
+    {
+        this._fuseConfigService.config = {scheme};
+    }
+
+    /**
+     * Set the theme on the config
+     *
+     * @param theme
+     */
+    setTheme(theme: Theme): void
+    {
+        this._fuseConfigService.config = {theme};
+    }
+}

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseDrawerModule } from '@fuse/components/drawer';
+import { SettingsComponent } from 'app/layout/common/settings/settings.component';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+    declarations: [
+        SettingsComponent
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        MatIconModule,
+        MatTooltipModule,
+        FuseDrawerModule,
+        MatButtonModule
+    ],
+    exports     : [
+        SettingsComponent
+    ]
+})
+export class SettingsModule
+{
+}

src/app/layout/layout.component.html

@@ -44,468 +44,4 @@
 <!-- ----------------------------------------------------------------------------------------------------- -->
 <!-- Settings drawer - Remove this to remove the drawer and its button -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<div
-    class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-999 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
-    style="top: 275px"
-    (click)="settingsDrawer.toggle()">
-    <mat-icon
-        class="icon-size-5 text-white animate-spin-slow"
-        [svgIcon]="'heroicons_solid:cog'"></mat-icon>
-</div>
-
-<fuse-drawer
-    class="w-screen min-w-screen sm:w-100 sm:min-w-100"
-    fixed
-    transparentOverlay
-    [mode]="'over'"
-    [name]="'settingsDrawer'"
-    [position]="'right'"
-    #settingsDrawer>
-
-    <div class="flex flex-col w-full overflow-auto bg-card">
-        <div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
-            <mat-icon
-                class="icon-size-7 text-current"
-                [svgIcon]="'heroicons_solid:cog'"></mat-icon>
-            <div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
-        </div>
-
-        <div class="flex flex-col p-6">
-
-            <!-- Theme -->
-            <div class="text-md font-semibold text-secondary">THEME</div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
-                <ng-container *ngFor="let theme of themes">
-                    <div
-                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
-                        [class.ring-2]="config.theme === theme[0]"
-                        (click)="setTheme(theme[0])">
-                        <div
-                            class="flex-0 w-3 h-3 rounded-full"
-                            [style.background-color]="theme[1].primary"></div>
-                        <div
-                            class="ml-2.5 font-medium leading-5 truncate"
-                            [class.text-secondary]="config.theme !== theme[0]">
-                            {{theme[0] | titlecase}}
-                        </div>
-                    </div>
-                </ng-container>
-            </div>
-
-            <hr class="my-8">
-
-            <!-- Scheme -->
-            <div class="text-md font-semibold text-secondary">SCHEME</div>
-            <div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
-                <!-- Auto -->
-                <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
-                    [class.ring-2]="config.scheme === 'auto'"
-                    [matTooltip]="'Automatically sets the scheme based on user\'s operating system\'s color scheme preference using \'prefer-color-scheme\' media query.'"
-                    (click)="setScheme('auto')">
-                    <div class="flex items-center rounded-full overflow-hidden">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:lightning-bolt'"></mat-icon>
-                    </div>
-                    <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'auto'">
-                        Auto
-                    </div>
-                </div>
-                <!-- Dark -->
-                <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
-                    [class.ring-2]="config.scheme === 'dark'"
-                    (click)="setScheme('dark')">
-                    <div class="flex items-center rounded-full overflow-hidden">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:moon'"></mat-icon>
-                    </div>
-                    <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'dark'">
-                        Dark
-                    </div>
-                </div>
-                <!-- Light -->
-                <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
-                    [class.ring-2]="config.scheme === 'light'"
-                    (click)="setScheme('light')">
-                    <div class="flex items-center rounded-full overflow-hidden">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:sun'"></mat-icon>
-                    </div>
-                    <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'light'">
-                        Light
-                    </div>
-                </div>
-            </div>
-
-            <hr class="my-8">
-
-            <!-- Layout -->
-            <div class="text-md font-semibold text-secondary">LAYOUT</div>
-            <div class="grid grid-cols-3 gap-3 mt-6">
-
-                <!-- Empty -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('empty')">
-                    <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'empty'">
-                        <div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'empty'">
-                        Empty
-                    </div>
-                </div>
-
-                <!-- Classic -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('classic')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'classic'">
-                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="mt-3 mx-1.5 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'classic'">
-                        Classic
-                    </div>
-                </div>
-
-                <!-- Classy -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('classy')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'classy'">
-                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="flex items-center mt-1 mx-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                            <div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="mt-2 mx-1 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-2">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'classy'">
-                        Classy
-                    </div>
-                </div>
-
-                <!-- Compact -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('compact')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'compact'">
-                        <div class="w-5 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'compact'">
-                        Compact
-                    </div>
-                </div>
-
-                <!-- Dense -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('dense')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'dense'">
-                        <div class="w-4 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'dense'">
-                        Dense
-                    </div>
-                </div>
-
-                <!-- Futuristic -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('futuristic')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'futuristic'">
-                        <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="flex-auto"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'futuristic'">
-                        Futuristic
-                    </div>
-                </div>
-
-                <!-- Thin -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('thin')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'thin'">
-                        <div class="w-3 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto border-l">
-                            <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'thin'">
-                        Thin
-                    </div>
-                </div>
-
-                <div class="col-span-2"></div>
-
-                <!-- Centered -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('centered')">
-                    <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'centered'">
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
-                            <div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex ml-1.5">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                                <div class="flex items-center justify-end ml-auto mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'centered'">
-                        Centered
-                    </div>
-                </div>
-
-                <!-- Enterprise -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('enterprise')">
-                    <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'enterprise'">
-                        <div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex items-center justify-end ml-auto space-x-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                        </div>
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
-                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'enterprise'">
-                        Enterprise
-                    </div>
-                </div>
-
-                <!-- Material -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('material')">
-                    <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'material'">
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
-                            <div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
-                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="flex items-center justify-end ml-auto space-x-1">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                </div>
-                            </div>
-                            <div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'material'">
-                        Material
-                    </div>
-                </div>
-
-                <!-- Modern -->
-                <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('modern')">
-                    <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'modern'">
-                        <div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex items-center h-3 ml-2 space-x-1">
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                            <div class="flex items-center justify-end ml-auto space-x-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            </div>
-                        </div>
-                        <div class="flex flex-col flex-auto">
-                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
-                        </div>
-                    </div>
-                    <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'modern'">
-                        Modern
-                    </div>
-                </div>
-
-            </div>
-
-        </div>
-
-    </div>
-
-</fuse-drawer>
+<settings></settings>

src/app/layout/layout.component.ts

@@ -5,10 +5,9 @@ import { combineLatest, Subject } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators';
 import { FuseConfigService } from '@fuse/services/config';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
 import { FUSE_VERSION } from '@fuse/version';
 import { Layout } from 'app/layout/layout.types';
-import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
+import { AppConfig } from 'app/core/config/app.config';
 
 @Component({
     selector     : 'layout',
@@ -22,7 +21,6 @@ export class LayoutComponent implements OnInit, OnDestroy
     layout: Layout;
     scheme: 'dark' | 'light';
     theme: string;
-    themes: [string, any][] = [];
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -34,8 +32,7 @@ export class LayoutComponent implements OnInit, OnDestroy
         private _renderer2: Renderer2,
         private _router: Router,
         private _fuseConfigService: FuseConfigService,
-        private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseTailwindConfigService: FuseTailwindService
+        private _fuseMediaWatcherService: FuseMediaWatcherService
     )
     {
     }
@@ -49,11 +46,6 @@ export class LayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Get the themes
-        this._fuseTailwindConfigService.tailwindConfig$.subscribe((config) => {
-            this.themes = Object.entries(config.themes);
-        });
-
         // Set the theme and scheme based on the configuration
         combineLatest([
             this._fuseConfigService.config$,
@@ -123,50 +115,6 @@ export class LayoutComponent implements OnInit, OnDestroy
         this._unsubscribeAll.complete();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Set the layout on the config
-     *
-     * @param layout
-     */
-    setLayout(layout: string): void
-    {
-        // Clear the 'layout' query param to allow layout changes
-        this._router.navigate([], {
-            queryParams        : {
-                layout: null
-            },
-            queryParamsHandling: 'merge'
-        }).then(() => {
-
-            // Set the config
-            this._fuseConfigService.config = {layout};
-        });
-    }
-
-    /**
-     * Set the scheme on the config
-     *
-     * @param scheme
-     */
-    setScheme(scheme: Scheme): void
-    {
-        this._fuseConfigService.config = {scheme};
-    }
-
-    /**
-     * Set the theme on the config
-     *
-     * @param theme
-     */
-    setTheme(theme: Theme): void
-    {
-        this._fuseConfigService.config = {theme};
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/layout.module.ts

@@ -14,6 +14,7 @@ import { CompactLayoutModule } from 'app/layout/layouts/vertical/compact/compact
 import { DenseLayoutModule } from 'app/layout/layouts/vertical/dense/dense.module';
 import { FuturisticLayoutModule } from 'app/layout/layouts/vertical/futuristic/futuristic.module';
 import { ThinLayoutModule } from 'app/layout/layouts/vertical/thin/thin.module';
+import { SettingsModule } from 'app/layout/common/settings/settings.module';
 import { SharedModule } from 'app/shared/shared.module';
 
 const layoutModules = [
@@ -39,12 +40,13 @@ const layoutModules = [
     declarations: [
         LayoutComponent
     ],
-    imports     : [
+    imports: [
         MatIconModule,
         MatTooltipModule,
         FuseDrawerModule,
         SharedModule,
-        ...layoutModules
+        SettingsModule,
+        ...layoutModules,
     ],
     exports     : [
         LayoutComponent,

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

@@ -45,13 +45,19 @@
                     </button>
                 </ng-container>
                 <!-- Components -->
-                <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+                <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
                     <languages></languages>
                     <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
                     <shortcuts></shortcuts>
                     <messages></messages>
                     <notifications></notifications>
+                    <button
+                        class="lg:hidden"
+                        mat-icon-button
+                        (click)="quickChat.toggle()">
+                        <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+                    </button>
                     <user></user>
                 </div>
             </div>
@@ -86,3 +92,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -54,13 +54,19 @@
             </button>
         </ng-container>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
             <user></user>
         </div>
     </div>
@@ -78,3 +84,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -35,13 +35,19 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
             <user></user>
         </div>
     </div>
@@ -59,3 +65,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -65,12 +65,18 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
         </div>
     </div>
 
@@ -87,3 +93,6 @@
     </div>-->
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.mod
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -30,13 +30,19 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
             <user></user>
         </div>
     </div>
@@ -54,3 +60,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -39,13 +39,19 @@
             </button>
         </div>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
             <user></user>
         </div>
     </div>
@@ -63,3 +69,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -44,13 +44,19 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
         </div>
     </div>
 
@@ -67,3 +73,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

@@ -31,13 +31,19 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts></shortcuts>
             <messages></messages>
             <notifications></notifications>
+            <button
+                class="lg:hidden"
+                mat-icon-button
+                (click)="quickChat.toggle()">
+                <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
+            </button>
             <user></user>
         </div>
     </div>
@@ -55,3 +61,6 @@
     </div>
 
 </div>
+
+<!-- Quick chat -->
+<quick-chat #quickChat="quickChat"></quick-chat>

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

@@ -10,6 +10,7 @@ import { FuseNavigationModule } from '@fuse/components/navigation';
 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 { QuickChatModule } from 'app/layout/common/quick-chat/quick-chat.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
 import { UserModule } from 'app/layout/common/user/user.module';
@@ -32,6 +33,7 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         LanguagesModule,
         MessagesModule,
         NotificationsModule,
+        QuickChatModule,
         SearchModule,
         ShortcutsModule,
         UserModule,

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

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

@@ -1,191 +0,0 @@
-<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
-
-    <mat-drawer-container
-        class="flex-auto h-full"
-        [hasBackdrop]="false">
-
-        <!-- Drawer -->
-        <mat-drawer
-            class="w-full sm:w-100 lg:border-r lg:shadow-none dark:bg-gray-900"
-            [autoFocus]="false"
-            [(opened)]="drawerOpened"
-            #drawer>
-
-            <!-- New chat -->
-            <ng-container *ngIf="drawerComponent === 'new-chat'">
-                <chat-new-chat [drawer]="drawer"></chat-new-chat>
-            </ng-container>
-
-            <!-- Profile -->
-            <ng-container *ngIf="drawerComponent === 'profile'">
-                <chat-profile [drawer]="drawer"></chat-profile>
-            </ng-container>
-
-        </mat-drawer>
-
-        <!-- Drawer content -->
-        <mat-drawer-content class="flex overflow-hidden">
-
-            <!-- Chats list -->
-            <ng-container *ngIf="chats && chats.length > 0; else noChats">
-                <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 bg-card dark:bg-transparent">
-
-                    <!-- Header -->
-                    <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
-                        <div class="flex items-center">
-                            <div
-                                class="flex items-center mr-1 cursor-pointer"
-                                (click)="openProfile()">
-                                <div class="w-10 h-10">
-                                    <ng-container *ngIf="profile.avatar">
-                                        <img
-                                            class="object-cover w-full h-full rounded-full object-cover"
-                                            [src]="profile.avatar"
-                                            alt="Profile avatar"/>
-                                    </ng-container>
-                                    <ng-container *ngIf="!profile.avatar">
-                                        <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                            {{profile.name.charAt(0)}}
-                                        </div>
-                                    </ng-container>
-                                </div>
-                                <div class="ml-4 font-medium truncate">{{profile.name}}</div>
-                            </div>
-                            <button
-                                class="ml-auto"
-                                mat-icon-button
-                                (click)="openNewChat()">
-                                <mat-icon [svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
-                            </button>
-                            <button
-                                class="ml-1 -mr-4"
-                                mat-icon-button
-                                [matMenuTriggerFor]="chatsHeaderMenu">
-                                <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
-                                <mat-menu #chatsHeaderMenu>
-                                    <button mat-menu-item>
-                                        <mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
-                                        New group
-                                    </button>
-                                    <button mat-menu-item>
-                                        <mat-icon [svgIcon]="'heroicons_outline:chat-alt-2'"></mat-icon>
-                                        Create a room
-                                    </button>
-                                    <button
-                                        mat-menu-item
-                                        (click)="openProfile()">
-                                        <mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
-                                        Profile
-                                    </button>
-                                    <button mat-menu-item>
-                                        <mat-icon [svgIcon]="'heroicons_outline:archive'"></mat-icon>
-                                        Archived
-                                    </button>
-                                    <button mat-menu-item>
-                                        <mat-icon [svgIcon]="'heroicons_outline:star'"></mat-icon>
-                                        Starred
-                                    </button>
-                                    <button mat-menu-item>
-                                        <mat-icon [svgIcon]="'heroicons_outline:cog'"></mat-icon>
-                                        Settings
-                                    </button>
-                                </mat-menu>
-                            </button>
-                        </div>
-                        <!-- Search -->
-                        <div class="mt-4">
-                            <mat-form-field
-                                class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full"
-                                [floatLabel]="'always'">
-                                <mat-icon
-                                    matPrefix
-                                    class="icon-size-5"
-                                    [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                                <input
-                                    matInput
-                                    [autocomplete]="'off'"
-                                    [placeholder]="'Search or start new chat'"
-                                    (input)="filterChats(searchField.value)"
-                                    #searchField>
-                            </mat-form-field>
-                        </div>
-                    </div>
-
-                    <!-- Chats -->
-                    <div class="flex-auto overflow-y-auto">
-                        <ng-container *ngIf="filteredChats.length > 0; else noChats">
-                            <ng-container *ngFor="let chat of filteredChats; trackBy: trackByFn">
-                                <div
-                                    class="z-20 flex items-center py-5 px-8 cursor-pointer border-b"
-                                    [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
-                                                'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
-                                    [routerLink]="[chat.id]">
-                                    <div class="relative flex flex-0 items-center justify-center w-10 h-10">
-                                        <ng-container *ngIf="chat.unreadCount > 0">
-                                            <div
-                                                class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
-                                                [class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
-                                        </ng-container>
-                                        <ng-container *ngIf="chat.contact.avatar">
-                                            <img
-                                                class="w-full h-full rounded-full object-cover"
-                                                [src]="chat.contact.avatar"
-                                                alt="Contact avatar"/>
-                                        </ng-container>
-                                        <ng-container *ngIf="!chat.contact.avatar">
-                                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                                {{chat.contact.name.charAt(0)}}
-                                            </div>
-                                        </ng-container>
-                                    </div>
-                                    <div class="min-w-0 ml-4">
-                                        <div class="font-medium leading-5 truncate">{{chat.contact.name}}</div>
-                                        <div
-                                            class="leading-5 truncate text-secondary"
-                                            [class.text-primary]="chat.unreadCount > 0"
-                                            [class.dark:text-primary-500]="chat.unreadCount > 0">
-                                            {{chat.lastMessage}}
-                                        </div>
-                                    </div>
-                                    <div class="flex flex-col items-end self-start ml-auto pl-2">
-                                        <div class="text-sm leading-5 text-secondary">{{chat.lastMessageAt}}</div>
-                                        <ng-container *ngIf="chat.muted">
-                                            <mat-icon
-                                                class="icon-size-5 text-hint"
-                                                [svgIcon]="'heroicons_solid:volume-off'"></mat-icon>
-                                        </ng-container>
-                                    </div>
-                                </div>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-
-                </div>
-
-            </ng-container>
-
-            <!-- No chats template -->
-            <ng-template #noChats>
-                <div class="flex flex-auto flex-col items-center justify-center h-full">
-                    <mat-icon
-                        class="icon-size-24"
-                        [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
-                    <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">No chats</div>
-                </div>
-            </ng-template>
-
-            <!-- Conversation -->
-            <ng-container *ngIf="chats && chats.length > 0">
-                <div
-                    class="flex-auto border-l"
-                    [ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedChat && selectedChat.id,
-                                'hidden lg:flex': !selectedChat || !selectedChat.id}">
-                    <router-outlet></router-outlet>
-                </div>
-            </ng-container>
-
-        </mat-drawer-content>
-
-    </mat-drawer-container>
-
-</div>

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

@@ -1,138 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { Chat, Profile } from 'app/modules/admin/apps/chat/chat.types';
-import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
-
-@Component({
-    selector       : 'chat-chats',
-    templateUrl    : './chats.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ChatsComponent implements OnInit, OnDestroy
-{
-    chats: Chat[];
-    drawerComponent: 'profile' | 'new-chat';
-    drawerOpened: boolean = false;
-    filteredChats: Chat[];
-    profile: Profile;
-    selectedChat: Chat;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _chatService: ChatService,
-        private _changeDetectorRef: ChangeDetectorRef
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Chats
-        this._chatService.chats$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chats: Chat[]) => {
-                this.chats = this.filteredChats = chats;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Profile
-        this._chatService.profile$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((profile: Profile) => {
-                this.profile = profile;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Selected chat
-        this._chatService.chat$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chat: Chat) => {
-                this.selectedChat = chat;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Filter the chats
-     *
-     * @param query
-     */
-    filterChats(query: string): void
-    {
-        // Reset the filter
-        if ( !query )
-        {
-            this.filteredChats = this.chats;
-            return;
-        }
-
-        this.filteredChats = this.chats.filter(chat => chat.contact.name.toLowerCase().includes(query.toLowerCase()));
-    }
-
-    /**
-     * Open the new chat sidebar
-     */
-    openNewChat(): void
-    {
-        this.drawerComponent = 'new-chat';
-        this.drawerOpened = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Open the profile sidebar
-     */
-    openProfile(): void
-    {
-        this.drawerComponent = 'profile';
-        this.drawerOpened = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-}

src/app/modules/admin/apps/chat/contact-info/contact-info.component.html

@@ -1,86 +0,0 @@
-<div class="flex flex-col flex-auto h-full bg-card dark:bg-default">
-
-    <!-- Header -->
-    <div class="flex flex-0 items-center h-18 px-4 border-b bg-gray-50 dark:bg-transparent">
-        <button
-            mat-icon-button
-            (click)="drawer.close()">
-            <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
-        </button>
-        <div class="ml-2 text-lg font-medium">Contact info</div>
-    </div>
-
-    <div class="overflow-y-auto">
-        <!-- Contact avatar & info -->
-        <div class="flex flex-col items-center mt-8">
-            <div class="w-40 h-40 rounded-full">
-                <ng-container *ngIf="chat.contact.avatar">
-                    <img
-                        class="w-full h-full rounded-full object-cover"
-                        [src]="chat.contact.avatar"
-                        [alt]="'Contact avatar'">
-                </ng-container>
-                <ng-container *ngIf="!chat.contact.avatar">
-                    <div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                        {{chat.contact.name.charAt(0)}}
-                    </div>
-                </ng-container>
-            </div>
-            <div class="mt-4 text-lg font-medium">{{chat.contact.name}}</div>
-            <div class="mt-0.5 text-md text-secondary">{{chat.contact.about}}</div>
-        </div>
-
-        <div class="py-10 px-7">
-            <!-- Media -->
-            <div class="text-lg font-medium">Media</div>
-            <div class="grid grid-cols-4 gap-1 mt-4">
-                <ng-container *ngFor="let media of chat.contact.attachments.media">
-                    <img
-                        class="h-20 rounded object-cover"
-                        [src]="media"/>
-                </ng-container>
-            </div>
-            <!-- Details -->
-            <div class="mt-10 space-y-4">
-                <div class="text-lg font-medium mb-3">Details</div>
-                <ng-container *ngIf="chat.contact.details.emails.length">
-                    <div>
-                        <div class="font-medium text-secondary">Email</div>
-                        <div class="">{{chat.contact.details.emails[0].email}}</div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="chat.contact.details.phoneNumbers.length">
-                    <div>
-                        <div class="font-medium text-secondary">Phone number</div>
-                        <div class="">{{chat.contact.details.phoneNumbers[0].phoneNumber}}</div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="chat.contact.details.title">
-                    <div>
-                        <div class="font-medium text-secondary">Title</div>
-                        <div class="">{{chat.contact.details.title}}</div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="chat.contact.details.company">
-                    <div>
-                        <div class="font-medium text-secondary">Company</div>
-                        <div class="">{{chat.contact.details.company}}</div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="chat.contact.details.birthday">
-                    <div>
-                        <div class="font-medium text-secondary">Birthday</div>
-                        <div class="">{{chat.contact.details.birthday}}</div>
-                    </div>
-                </ng-container>
-                <ng-container *ngIf="chat.contact.details.address">
-                    <div>
-                        <div class="font-medium text-secondary">Address</div>
-                        <div class="">{{chat.contact.details.address}}</div>
-                    </div>
-                </ng-container>
-            </div>
-        </div>
-    </div>
-
-</div>

src/app/modules/admin/apps/chat/contact-info/contact-info.component.ts

@@ -1,22 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { MatDrawer } from '@angular/material/sidenav';
-import { Chat, Contact } from 'app/modules/admin/apps/chat/chat.types';
-
-@Component({
-    selector       : 'chat-contact-info',
-    templateUrl    : './contact-info.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContactInfoComponent
-{
-    @Input() chat: Chat;
-    @Input() drawer: MatDrawer;
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}

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

@@ -1,215 +0,0 @@
-<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
-
-    <ng-container *ngIf="chat; else selectChatOrStartNew">
-
-        <mat-drawer-container
-            class="flex-auto h-full"
-            [hasBackdrop]="false">
-
-            <!-- Drawer -->
-            <mat-drawer
-                class="w-full sm:w-100 lg:border-l lg:shadow-none dark:bg-gray-900"
-                [autoFocus]="false"
-                [mode]="drawerMode"
-                [position]="'end'"
-                [(opened)]="drawerOpened"
-                #drawer>
-
-                <!-- Contact info -->
-                <chat-contact-info
-                    [drawer]="drawer"
-                    [chat]="chat"></chat-contact-info>
-            </mat-drawer>
-
-            <!-- Drawer content -->
-            <mat-drawer-content class="flex flex-col overflow-hidden">
-
-                <!-- Header -->
-                <div class="flex flex-0 items-center h-18 px-4 md:px-6 border-b bg-gray-50 dark:bg-transparent">
-
-                    <!-- Back button -->
-                    <a
-                        class="lg:hidden md:-ml-2"
-                        mat-icon-button
-                        [routerLink]="['./']"
-                        (click)="resetChat()">
-                        <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                    </a>
-
-                    <!-- Contact info -->
-                    <div
-                        class="flex items-center ml-2 lg:ml-0 mr-2 cursor-pointer"
-                        (click)="openContactInfo()">
-                        <div class="relative flex flex-0 items-center justify-center w-10 h-10">
-                            <ng-container *ngIf="chat.contact.avatar">
-                                <img
-                                    class="w-full h-full rounded-full object-cover"
-                                    [src]="chat.contact.avatar"
-                                    alt="Contact avatar"/>
-                            </ng-container>
-                            <ng-container *ngIf="!chat.contact.avatar">
-                                <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                    {{chat.contact.name.charAt(0)}}
-                                </div>
-                            </ng-container>
-                        </div>
-                        <div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
-                    </div>
-
-                    <button
-                        class="ml-auto"
-                        mat-icon-button
-                        [matMenuTriggerFor]="conversationHeaderMenu">
-                        <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
-                        <mat-menu #conversationHeaderMenu>
-                            <button
-                                mat-menu-item
-                                (click)="openContactInfo()">
-                                <mat-icon [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
-                                Contact info
-                            </button>
-                            <button mat-menu-item>
-                                <mat-icon [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
-                                Select messages
-                            </button>
-                            <button
-                                mat-menu-item
-                                (click)="toggleMuteNotifications()">
-                                <ng-container *ngIf="!chat.muted">
-                                    <mat-icon [svgIcon]="'heroicons_outline:volume-off'"></mat-icon>
-                                    Mute notifications
-                                </ng-container>
-                                <ng-container *ngIf="chat.muted">
-                                    <mat-icon [svgIcon]="'heroicons_outline:volume-up'"></mat-icon>
-                                    Unmute notifications
-                                </ng-container>
-                            </button>
-                            <button mat-menu-item>
-                                <mat-icon [svgIcon]="'heroicons_outline:backspace'"></mat-icon>
-                                Clear messages
-                            </button>
-                            <button mat-menu-item>
-                                <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                Delete chat
-                            </button>
-                        </mat-menu>
-                    </button>
-
-                </div>
-
-                <!-- Conversation -->
-                <div class="flex overflow-y-auto flex-col-reverse">
-                    <div class="flex flex-col flex-auto flex-shrink p-6 bg-card dark:bg-transparent">
-                        <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
-                            <!-- Start of the day -->
-                            <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
-                                <div class="flex items-center justify-center my-3 -mx-6">
-                                    <div class="flex-auto border-b"></div>
-                                    <div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
-                                        {{message.createdAt | date: 'longDate'}}
-                                    </div>
-                                    <div class="flex-auto border-b"></div>
-                                </div>
-                            </ng-container>
-                            <div
-                                class="flex flex-col"
-                                [ngClass]="{'items-end': message.isMine,
-                                        'items-start': !message.isMine,
-                                        'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
-                                        'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
-                                <!-- Bubble -->
-                                <div
-                                    class="relative max-w-3/4 px-3 py-2 rounded-lg"
-                                    [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
-                                            'bg-gray-500 text-gray-50': !message.isMine}">
-                                    <!-- Speech bubble tail -->
-                                    <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
-                                        <div
-                                            class="absolute bottom-0 w-3 transform"
-                                            [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
-                                                    'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
-                                            <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
-                                        </div>
-                                    </ng-container>
-                                    <!-- Message -->
-                                    <div
-                                        class="min-w-4 leading-5"
-                                        [innerHTML]="message.value">
-                                    </div>
-                                </div>
-                                <!-- Time -->
-                                <ng-container
-                                    *ngIf="first
-                                       || last
-                                       || chat.messages[i + 1].isMine !== message.isMine
-                                       || chat.messages[i + 1].createdAt !== message.createdAt">
-                                    <div
-                                        class="my-0.5 text-sm font-medium text-secondary"
-                                        [ngClass]="{'mr-3': message.isMine,
-                                                'ml-3': !message.isMine}">
-                                        {{message.createdAt | date:'HH:mm'}}
-                                    </div>
-                                </ng-container>
-                            </div>
-                        </ng-container>
-                    </div>
-                </div>
-
-                <!-- Message field -->
-                <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
-                    <div class="flex items-center h-11 my-px">
-                        <button mat-icon-button>
-                            <mat-icon [svgIcon]="'heroicons_outline:emoji-happy'"></mat-icon>
-                        </button>
-                        <button
-                            class="ml-0.5"
-                            mat-icon-button>
-                            <mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
-                        </button>
-                    </div>
-                    <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full ml-4">
-                        <textarea
-                            class="min-h-5 my-0 resize-none"
-                            style="margin: 11px 0 !important; padding: 0 !important;"
-                            [rows]="1"
-                            matInput
-                            #messageInput></textarea>
-                    </mat-form-field>
-                    <div class="flex items-center h-11 my-px ml-4">
-                        <button
-                            mat-icon-button>
-                            <mat-icon
-                                class="transform rotate-90"
-                                [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
-                        </button>
-                    </div>
-                </div>
-
-            </mat-drawer-content>
-
-        </mat-drawer-container>
-
-    </ng-container>
-
-    <!-- Select chat or start new template -->
-    <ng-template #selectChatOrStartNew>
-        <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
-            <mat-icon
-                class="icon-size-24"
-                [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
-            <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
-        </div>
-    </ng-template>
-
-    <!-- Speech bubble tail SVG -->
-    <!-- @formatter:off -->
-    <ng-template #speechBubbleExtension>
-        <svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <path d="M1.01522827,0.516204834 C-8.83532715,54.3062744 61.7609863,70.5215302 64.8009949,64.3061218 C68.8074951,54.8859711 30.1663208,52.9997559 37.5036011,0.516204834 L1.01522827,0.516204834 Z" fill="currentColor" fill-rule="nonzero"></path>
-            </g>
-        </svg>
-    </ng-template>
-    <!-- @formatter:on -->
-
-</div>

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

@@ -1,168 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { Chat } from 'app/modules/admin/apps/chat/chat.types';
-import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
-
-@Component({
-    selector       : 'chat-conversation',
-    templateUrl    : './conversation.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ConversationComponent implements OnInit, OnDestroy
-{
-    @ViewChild('messageInput') messageInput: ElementRef;
-    chat: Chat;
-    drawerMode: 'over' | 'side' = 'side';
-    drawerOpened: boolean = false;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _chatService: ChatService,
-        private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _ngZone: NgZone
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Decorated methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resize on 'input' and 'ngModelChange' events
-     *
-     * @private
-     */
-    @HostListener('input')
-    @HostListener('ngModelChange')
-    private _resizeMessageInput(): void
-    {
-        // This doesn't need to trigger Angular's change detection by itself
-        this._ngZone.runOutsideAngular(() => {
-
-            setTimeout(() => {
-
-                // Set the height to 'auto' so we can correctly read the scrollHeight
-                this.messageInput.nativeElement.style.height = 'auto';
-
-                // Detect the changes so the height is applied
-                this._changeDetectorRef.detectChanges();
-
-                // Get the scrollHeight and subtract the vertical padding
-                this.messageInput.nativeElement.style.height = `${this.messageInput.nativeElement.scrollHeight}px`;
-
-                // Detect the changes one more time to apply the final height
-                this._changeDetectorRef.detectChanges();
-            });
-        });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Chat
-        this._chatService.chat$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chat: Chat) => {
-                this.chat = chat;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Subscribe to media changes
-        this._fuseMediaWatcherService.onMediaChange$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) => {
-
-                // Set the drawerMode if the given breakpoint is active
-                if ( matchingAliases.includes('lg') )
-                {
-                    this.drawerMode = 'side';
-                }
-                else
-                {
-                    this.drawerMode = 'over';
-                }
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Open the contact info
-     */
-    openContactInfo(): void
-    {
-        // Open the drawer
-        this.drawerOpened = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Reset the chat
-     */
-    resetChat(): void
-    {
-        this._chatService.resetChat();
-
-        // Close the contact info in case it's opened
-        this.drawerOpened = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Toggle mute notifications
-     */
-    toggleMuteNotifications(): void
-    {
-        // Toggle the muted
-        this.chat.muted = !this.chat.muted;
-
-        // Update the chat on the server
-        this._chatService.updateChat(this.chat.id, this.chat).subscribe();
-    }
-
-    /**
-     * 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/chat/new-chat/new-chat.component.html

@@ -1,51 +0,0 @@
-<div class="flex flex-col flex-auto h-full overflow-hidden bg-card dark:bg-default">
-
-    <!-- Header -->
-    <div class="flex flex-0 items-center h-18 -mb-px px-6 bg-gray-50 dark:bg-transparent">
-        <button
-            mat-icon-button
-            (click)="drawer.close()">
-            <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-        </button>
-        <div class="ml-2 text-2xl font-semibold">New chat</div>
-    </div>
-
-    <div class="relative overflow-y-auto">
-        <ng-container *ngIf="contacts.length; else noContacts">
-            <ng-container *ngFor="let contact of contacts; let i = index; trackBy: trackByFn">
-                <!-- Group -->
-                <ng-container *ngIf="i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)">
-                    <div class="z-10 sticky top-0 -mt-px px-6 py-1 md:px-8 border-t border-b font-medium uppercase text-secondary bg-gray-100 dark:bg-gray-900">
-                        {{contact.name.charAt(0)}}
-                    </div>
-                </ng-container>
-                <!-- Contact -->
-                <div class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b hover:bg-gray-100 dark:hover:bg-hover">
-                    <div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
-                        <ng-container *ngIf="contact.avatar">
-                            <img
-                                class="object-cover w-full h-full"
-                                [src]="contact.avatar"
-                                alt="Contact avatar"/>
-                        </ng-container>
-                        <ng-container *ngIf="!contact.avatar">
-                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                {{contact.name.charAt(0)}}
-                            </div>
-                        </ng-container>
-                    </div>
-                    <div class="min-w-0 ml-4">
-                        <div class="font-medium leading-5 truncate">{{contact.name}}</div>
-                        <div class="leading-5 truncate text-secondary">{{contact.about}}</div>
-                    </div>
-                </div>
-            </ng-container>
-        </ng-container>
-    </div>
-
-    <!-- No contacts -->
-    <ng-template #noContacts>
-        <div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no contacts!</div>
-    </ng-template>
-
-</div>

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

@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatDrawer } from '@angular/material/sidenav';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { Contact } from 'app/modules/admin/apps/chat/chat.types';
-import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
-
-@Component({
-    selector       : 'chat-new-chat',
-    templateUrl    : './new-chat.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class NewChatComponent implements OnInit, OnDestroy
-{
-    @Input() drawer: MatDrawer;
-    contacts: Contact[] = [];
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(private _chatService: ChatService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Contacts
-        this._chatService.contacts$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((contacts: Contact[]) => {
-                this.contacts = contacts;
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * 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/chat/profile/profile.component.html

@@ -1,80 +0,0 @@
-<div class="flex flex-col flex-auto overflow-y-auto bg-card dark:bg-default">
-
-    <!-- Header -->
-    <div class="flex flex-0 items-center h-18 px-6 border-b bg-gray-50 dark:bg-transparent">
-        <button
-            mat-icon-button
-            (click)="drawer.close()">
-            <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-        </button>
-        <div class="ml-2 text-2xl font-semibold">Profile</div>
-    </div>
-
-    <div class="px-6">
-        <!-- Profile photo -->
-        <div class="group relative flex flex-0 mt-8 mx-auto w-40 h-40 rounded-full">
-            <div class="hidden group-hover:flex absolute inset-0 flex-col items-center justify-center backdrop-filter backdrop-blur bg-opacity-80 rounded-full cursor-pointer bg-gray-800">
-                <mat-icon
-                    class="text-white"
-                    [svgIcon]="'heroicons_outline:camera'"></mat-icon>
-                <div class="mt-2 mx-6 font-medium text-center text-white">Change Profile Photo</div>
-            </div>
-            <ng-container *ngIf="profile.avatar">
-                <img
-                    class="w-full h-full rounded-full object-cover"
-                    [src]="profile.avatar"
-                    [alt]="'Profile avatar'">
-            </ng-container>
-            <ng-container *ngIf="!profile.avatar">
-                <div class="flex items-center justify-center w-full h-full rounded-full text-8xl font-semibold uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                    {{profile.name.charAt(0)}}
-                </div>
-            </ng-container>
-        </div>
-
-        <!-- Profile info -->
-        <div class="flex flex-col mt-8 mx-2">
-            <mat-form-field>
-                <mat-label>Name</mat-label>
-                <mat-icon
-                    class="icon-size-5"
-                    matPrefix
-                    [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                <input
-                    matInput
-                    [ngModel]="profile.name">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>Email</mat-label>
-                <mat-icon
-                    class="icon-size-5"
-                    matPrefix
-                    [svgIcon]="'heroicons_solid:mail'"></mat-icon>
-                <input
-                    matInput
-                    [ngModel]="profile.email">
-            </mat-form-field>
-            <mat-form-field>
-                <mat-label>About</mat-label>
-                <mat-icon
-                    class="icon-size-5"
-                    matPrefix
-                    [svgIcon]="'heroicons_solid:identification'"></mat-icon>
-                <input
-                    matInput
-                    [ngModel]="profile.about">
-            </mat-form-field>
-            <div class="flex items-center justify-end mt-4">
-                <button
-                    (click)="drawer.close()"
-                    mat-button>Cancel
-                </button>
-                <button
-                    class="ml-2"
-                    mat-flat-button
-                    [color]="'primary'">Save
-                </button>
-            </div>
-        </div>
-    </div>
-</div>

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

@@ -1,53 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { MatDrawer } from '@angular/material/sidenav';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { Profile } from 'app/modules/admin/apps/chat/chat.types';
-import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
-
-@Component({
-    selector       : 'chat-profile',
-    templateUrl    : './profile.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ProfileComponent implements OnInit, OnDestroy
-{
-    @Input() drawer: MatDrawer;
-    profile: Profile;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(private _chatService: ChatService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Profile
-        this._chatService.profile$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((profile: Profile) => {
-                this.profile = profile;
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-}

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

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

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

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

src/app/modules/admin/apps/contacts/contacts.guards.ts

@@ -1,47 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
-import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CanDeactivateContactsDetails implements CanDeactivate<ContactsDetailsComponent>
-{
-    canDeactivate(
-        component: ContactsDetailsComponent,
-        currentRoute: ActivatedRouteSnapshot,
-        currentState: RouterStateSnapshot,
-        nextState: RouterStateSnapshot
-    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        // Get the next route
-        let nextRoute: ActivatedRouteSnapshot = nextState.root;
-        while ( nextRoute.firstChild )
-        {
-            nextRoute = nextRoute.firstChild;
-        }
-
-        // If the next state doesn't contain '/contacts'
-        // it means we are navigating away from the
-        // contacts app
-        if ( !nextState.url.includes('/contacts') )
-        {
-            // Let it navigate
-            return true;
-        }
-
-        // If we are navigating to another contact...
-        if ( nextRoute.paramMap.get('id') )
-        {
-            // Just navigate
-            return true;
-        }
-        // Otherwise...
-        else
-        {
-            // Close the drawer first, and then navigate
-            return component.closeDrawer().then(() => true);
-        }
-    }
-}

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

@@ -1,73 +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 { MAT_DATE_FORMATS, MatRippleModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDividerModule } from '@angular/material/divider';
-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 { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as moment from 'moment';
-import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
-import { SharedModule } from 'app/shared/shared.module';
-import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
-import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
-import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
-import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
-
-@NgModule({
-    declarations: [
-        ContactsComponent,
-        ContactsListComponent,
-        ContactsDetailsComponent
-    ],
-    imports     : [
-        RouterModule.forChild(contactsRoutes),
-        MatButtonModule,
-        MatCheckboxModule,
-        MatDatepickerModule,
-        MatDividerModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatMomentDateModule,
-        MatProgressBarModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatTableModule,
-        MatTooltipModule,
-        FuseFindByKeyPipeModule,
-        SharedModule
-    ],
-    providers   : [
-        {
-            provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: moment.ISO_8601
-                },
-                display: {
-                    dateInput         : 'LL',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
-        }
-    ]
-})
-export class ContactsModule
-{
-}

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

@@ -1,138 +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 { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
-import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ContactsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _contactsService: ContactsService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact[]>
-    {
-        return this._contactsService.getContacts();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ContactsContactResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _contactsService: ContactsService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Contact>
-    {
-        return this._contactsService.getContactById(route.paramMap.get('id'))
-                   .pipe(
-                       // Error here means the requested contact 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 ContactsCountriesResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _contactsService: ContactsService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Country[]>
-    {
-        return this._contactsService.getCountries();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ContactsTagsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _contactsService: ContactsService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Tag[]>
-    {
-        return this._contactsService.getTags();
-    }
-}

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

@@ -1,37 +0,0 @@
-import { Route } from '@angular/router';
-import { CanDeactivateContactsDetails } from 'app/modules/admin/apps/contacts/contacts.guards';
-import { ContactsContactResolver, ContactsCountriesResolver, ContactsResolver, ContactsTagsResolver } from 'app/modules/admin/apps/contacts/contacts.resolvers';
-import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
-import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
-import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
-
-export const contactsRoutes: Route[] = [
-    {
-        path     : '',
-        component: ContactsComponent,
-        resolve  : {
-            tags: ContactsTagsResolver
-        },
-        children : [
-            {
-                path     : '',
-                component: ContactsListComponent,
-                resolve  : {
-                    tasks    : ContactsResolver,
-                    countries: ContactsCountriesResolver
-                },
-                children : [
-                    {
-                        path         : ':id',
-                        component    : ContactsDetailsComponent,
-                        resolve      : {
-                            task     : ContactsContactResolver,
-                            countries: ContactsCountriesResolver
-                        },
-                        canDeactivate: [CanDeactivateContactsDetails]
-                    }
-                ]
-            }
-        ]
-    }
-];

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

@@ -1,390 +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 { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ContactsService
-{
-    // Private
-    private _contact: BehaviorSubject<Contact | null> = new BehaviorSubject(null);
-    private _contacts: BehaviorSubject<Contact[] | null> = new BehaviorSubject(null);
-    private _countries: BehaviorSubject<Country[] | null> = new BehaviorSubject(null);
-    private _tags: BehaviorSubject<Tag[] | null> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for contact
-     */
-    get contact$(): Observable<Contact>
-    {
-        return this._contact.asObservable();
-    }
-
-    /**
-     * Getter for contacts
-     */
-    get contacts$(): Observable<Contact[]>
-    {
-        return this._contacts.asObservable();
-    }
-
-    /**
-     * Getter for countries
-     */
-    get countries$(): Observable<Country[]>
-    {
-        return this._countries.asObservable();
-    }
-
-    /**
-     * Getter for tags
-     */
-    get tags$(): Observable<Tag[]>
-    {
-        return this._tags.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get contacts
-     */
-    getContacts(): Observable<Contact[]>
-    {
-        return this._httpClient.get<Contact[]>('api/apps/contacts/all').pipe(
-            tap((contacts) => {
-                this._contacts.next(contacts);
-            })
-        );
-    }
-
-    /**
-     * Search contacts with given query
-     *
-     * @param query
-     */
-    searchContacts(query: string): Observable<Contact[]>
-    {
-        return this._httpClient.get<Contact[]>('api/apps/contacts/search', {
-            params: {query}
-        }).pipe(
-            tap((contacts) => {
-                this._contacts.next(contacts);
-            })
-        );
-    }
-
-    /**
-     * Get contact by id
-     */
-    getContactById(id: string): Observable<Contact>
-    {
-        return this._contacts.pipe(
-            take(1),
-            map((contacts) => {
-
-                // Find the contact
-                const contact = contacts.find(item => item.id === id) || null;
-
-                // Update the contact
-                this._contact.next(contact);
-
-                // Return the contact
-                return contact;
-            }),
-            switchMap((contact) => {
-
-                if ( !contact )
-                {
-                    return throwError('Could not found contact with id of ' + id + '!');
-                }
-
-                return of(contact);
-            })
-        );
-    }
-
-    /**
-     * Create contact
-     */
-    createContact(): Observable<Contact>
-    {
-        return this.contacts$.pipe(
-            take(1),
-            switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/contact', {}).pipe(
-                map((newContact) => {
-
-                    // Update the contacts with the new contact
-                    this._contacts.next([newContact, ...contacts]);
-
-                    // Return the new contact
-                    return newContact;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update contact
-     *
-     * @param id
-     * @param contact
-     */
-    updateContact(id: string, contact: Contact): Observable<Contact>
-    {
-        return this.contacts$.pipe(
-            take(1),
-            switchMap(contacts => this._httpClient.patch<Contact>('api/apps/contacts/contact', {
-                id,
-                contact
-            }).pipe(
-                map((updatedContact) => {
-
-                    // Find the index of the updated contact
-                    const index = contacts.findIndex(item => item.id === id);
-
-                    // Update the contact
-                    contacts[index] = updatedContact;
-
-                    // Update the contacts
-                    this._contacts.next(contacts);
-
-                    // Return the updated contact
-                    return updatedContact;
-                }),
-                switchMap(updatedContact => this.contact$.pipe(
-                    take(1),
-                    filter(item => item && item.id === id),
-                    tap(() => {
-
-                        // Update the contact if it's selected
-                        this._contact.next(updatedContact);
-
-                        // Return the updated contact
-                        return updatedContact;
-                    })
-                ))
-            ))
-        );
-    }
-
-    /**
-     * Delete the contact
-     *
-     * @param id
-     */
-    deleteContact(id: string): Observable<boolean>
-    {
-        return this.contacts$.pipe(
-            take(1),
-            switchMap(contacts => this._httpClient.delete('api/apps/contacts/contact', {params: {id}}).pipe(
-                map((isDeleted: boolean) => {
-
-                    // Find the index of the deleted contact
-                    const index = contacts.findIndex(item => item.id === id);
-
-                    // Delete the contact
-                    contacts.splice(index, 1);
-
-                    // Update the contacts
-                    this._contacts.next(contacts);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get countries
-     */
-    getCountries(): Observable<Country[]>
-    {
-        return this._httpClient.get<Country[]>('api/apps/contacts/countries').pipe(
-            tap((countries) => {
-                this._countries.next(countries);
-            })
-        );
-    }
-
-    /**
-     * Get tags
-     */
-    getTags(): Observable<Tag[]>
-    {
-        return this._httpClient.get<Tag[]>('api/apps/contacts/tags').pipe(
-            tap((tags) => {
-                this._tags.next(tags);
-            })
-        );
-    }
-
-    /**
-     * Create tag
-     *
-     * @param tag
-     */
-    createTag(tag: Tag): Observable<Tag>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.post<Tag>('api/apps/contacts/tag', {tag}).pipe(
-                map((newTag) => {
-
-                    // Update the tags with the new tag
-                    this._tags.next([...tags, newTag]);
-
-                    // Return new tag from observable
-                    return newTag;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update the tag
-     *
-     * @param id
-     * @param tag
-     */
-    updateTag(id: string, tag: Tag): Observable<Tag>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.patch<Tag>('api/apps/contacts/tag', {
-                id,
-                tag
-            }).pipe(
-                map((updatedTag) => {
-
-                    // Find the index of the updated tag
-                    const index = tags.findIndex(item => item.id === id);
-
-                    // Update the tag
-                    tags[index] = updatedTag;
-
-                    // Update the tags
-                    this._tags.next(tags);
-
-                    // Return the updated tag
-                    return updatedTag;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete the tag
-     *
-     * @param id
-     */
-    deleteTag(id: string): Observable<boolean>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.delete('api/apps/contacts/tag', {params: {id}}).pipe(
-                map((isDeleted: boolean) => {
-
-                    // Find the index of the deleted tag
-                    const index = tags.findIndex(item => item.id === id);
-
-                    // Delete the tag
-                    tags.splice(index, 1);
-
-                    // Update the tags
-                    this._tags.next(tags);
-
-                    // Return the deleted status
-                    return isDeleted;
-                }),
-                filter(isDeleted => isDeleted),
-                switchMap(isDeleted => this.contacts$.pipe(
-                    take(1),
-                    map((contacts) => {
-
-                        // Iterate through the contacts
-                        contacts.forEach((contact) => {
-
-                            const tagIndex = contact.tags.findIndex(tag => tag === id);
-
-                            // If the contact has the tag, remove it
-                            if ( tagIndex > -1 )
-                            {
-                                contact.tags.splice(tagIndex, 1);
-                            }
-                        });
-
-                        // Return the deleted status
-                        return isDeleted;
-                    })
-                ))
-            ))
-        );
-    }
-
-    /**
-     * Update the avatar of the given contact
-     *
-     * @param id
-     * @param avatar
-     */
-    uploadAvatar(id: string, avatar: File): Observable<Contact>
-    {
-        return this.contacts$.pipe(
-            take(1),
-            switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
-                id,
-                avatar
-            }, {
-                headers: {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    'Content-Type': avatar.type
-                }
-            }).pipe(
-                map((updatedContact) => {
-
-                    // Find the index of the updated contact
-                    const index = contacts.findIndex(item => item.id === id);
-
-                    // Update the contact
-                    contacts[index] = updatedContact;
-
-                    // Update the contacts
-                    this._contacts.next(contacts);
-
-                    // Return the updated contact
-                    return updatedContact;
-                }),
-                switchMap(updatedContact => this.contact$.pipe(
-                    take(1),
-                    filter(item => item && item.id === id),
-                    tap(() => {
-
-                        // Update the contact if it's selected
-                        this._contact.next(updatedContact);
-
-                        // Return the updated contact
-                        return updatedContact;
-                    })
-                ))
-            ))
-        );
-    }
-}

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

@@ -1,37 +0,0 @@
-export interface Contact
-{
-    id: string;
-    avatar?: string | null;
-    background?: string | null;
-    name: string;
-    emails?: {
-        email: string;
-        label: string;
-    }[];
-    phoneNumbers?: {
-        country: string;
-        phoneNumber: string;
-        label: string;
-    }[];
-    title?: string;
-    company?: string;
-    birthday?: string | null;
-    address?: string | null;
-    notes?: string | null;
-    tags: string[];
-}
-
-export interface Country
-{
-    id: string;
-    iso: string;
-    name: string;
-    code: string;
-    flagImagePos: string;
-}
-
-export interface Tag
-{
-    id?: string;
-    title?: string;
-}

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

@@ -1,643 +0,0 @@
-<div class="flex flex-col w-full">
-
-    <!-- View mode -->
-    <ng-container *ngIf="!editMode">
-
-        <!-- Header -->
-        <div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
-            <!-- Background -->
-            <ng-container *ngIf="contact.background">
-                <img
-                    class="absolute inset-0 object-cover w-full h-full"
-                    [src]="contact.background">
-            </ng-container>
-            <!-- Close button -->
-            <div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
-                <button
-                    mat-icon-button
-                    [matTooltip]="'Close'"
-                    [routerLink]="['../']">
-                    <mat-icon
-                        class="text-white"
-                        [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
-            </div>
-        </div>
-
-        <!-- Contact -->
-        <div class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0">
-            <div class="w-full max-w-3xl">
-
-                <!-- Avatar and actions -->
-                <div class="flex flex-auto items-end -mt-16">
-                    <!-- Avatar -->
-                    <div class="flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
-                        <img
-                            class="object-cover w-full h-full"
-                            *ngIf="contact.avatar"
-                            [src]="contact.avatar">
-                        <div
-                            class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
-                            *ngIf="!contact.avatar">
-                            {{contact.name.charAt(0)}}
-                        </div>
-                    </div>
-                    <!-- Actions -->
-                    <div class="flex items-center ml-auto mb-1">
-                        <button
-                            mat-stroked-button
-                            (click)="toggleEditMode(true)">
-                            <mat-icon
-                                class="icon-size-5"
-                                [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                            <span class="ml-2">Edit</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Name -->
-                <div class="mt-3 text-4xl font-bold truncate">{{contact.name}}</div>
-
-                <!-- Tags -->
-                <ng-container *ngIf="contact.tags.length">
-                    <div class="flex flex-wrap items-center mt-2">
-                        <!-- Tag -->
-                        <ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
-                            <div class="flex items-center justify-center py-1 px-3 mr-3 mb-3 rounded-full leading-normal text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
-                                <span class="text-sm font-medium whitespace-nowrap">{{tag.title}}</span>
-                            </div>
-                        </ng-container>
-                    </div>
-                </ng-container>
-
-                <div class="flex flex-col mt-4 pt-6 border-t space-y-8">
-                    <!-- Title -->
-                    <ng-container *ngIf="contact.title">
-                        <div class="flex sm:items-center">
-                            <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon>
-                            <div class="ml-6 leading-6">{{contact.title}}</div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Company -->
-                    <ng-container *ngIf="contact.company">
-                        <div class="flex sm:items-center">
-                            <mat-icon [svgIcon]="'heroicons_outline:office-building'"></mat-icon>
-                            <div class="ml-6 leading-6">{{contact.company}}</div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Emails -->
-                    <ng-container *ngIf="contact.emails.length">
-                        <div class="flex">
-                            <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
-                            <div class="min-w-0 ml-6 space-y-1">
-                                <ng-container *ngFor="let email of contact.emails; trackBy: trackByFn">
-                                    <div class="flex items-center leading-6">
-                                        <a
-                                            class="hover:underline text-primary-500"
-                                            [href]="'mailto:' + email.email"
-                                            target="_blank">
-                                            {{email.email}}
-                                        </a>
-                                        <div
-                                            class="text-md truncate text-secondary"
-                                            *ngIf="email.label">
-                                            <span class="mx-2">&bull;</span>
-                                            <span class="font-medium">{{email.label}}</span>
-                                        </div>
-                                    </div>
-                                </ng-container>
-                            </div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Phone -->
-                    <ng-container *ngIf="contact.phoneNumbers.length">
-                        <div class="flex">
-                            <mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon>
-                            <div class="min-w-0 ml-6 space-y-1">
-                                <ng-container *ngFor="let phoneNumber of contact.phoneNumbers; trackBy: trackByFn">
-                                    <div class="flex items-center leading-6">
-                                        <div
-                                            class="hidden sm:flex w-6 h-4 overflow-hidden"
-                                            [matTooltip]="getCountryByIso(phoneNumber.country).name"
-                                            [style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
-                                            [style.backgroundSize]="'24px 3876px'"
-                                            [style.backgroundPosition]="getCountryByIso(phoneNumber.country).flagImagePos"></div>
-                                        <div class="sm:ml-3 font-mono">{{getCountryByIso(phoneNumber.country).code}}</div>
-                                        <div class="ml-2.5 font-mono">{{phoneNumber.phoneNumber}}</div>
-                                        <div
-                                            class="text-md truncate text-secondary"
-                                            *ngIf="phoneNumber.label">
-                                            <span class="mx-2">&bull;</span>
-                                            <span class="font-medium">{{phoneNumber.label}}</span>
-                                        </div>
-                                    </div>
-                                </ng-container>
-                            </div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Address -->
-                    <ng-container *ngIf="contact.address">
-                        <div class="flex sm:items-center">
-                            <mat-icon [svgIcon]="'heroicons_outline:location-marker'"></mat-icon>
-                            <div class="ml-6 leading-6">{{contact.address}}</div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Birthday -->
-                    <ng-container *ngIf="contact.birthday">
-                        <div class="flex sm:items-center">
-                            <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon>
-                            <div class="ml-6 leading-6">{{contact.birthday | date:'longDate'}}</div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Notes -->
-                    <ng-container *ngIf="contact.notes">
-                        <div class="flex">
-                            <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
-                            <div
-                                class="max-w-none ml-6 prose prose-sm"
-                                [innerHTML]="contact.notes"></div>
-                        </div>
-                    </ng-container>
-                </div>
-
-            </div>
-        </div>
-    </ng-container>
-
-    <!-- Edit mode -->
-    <ng-container *ngIf="editMode">
-
-        <!-- Header -->
-        <div class="relative w-full h-40 sm:h-48 px-8 sm:px-12 bg-accent-100 dark:bg-accent-700">
-            <!-- Background -->
-            <ng-container *ngIf="contact.background">
-                <img
-                    class="absolute inset-0 object-cover w-full h-full"
-                    [src]="contact.background">
-            </ng-container>
-            <!-- Close button -->
-            <div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
-                <button
-                    mat-icon-button
-                    [matTooltip]="'Close'"
-                    [routerLink]="['../']">
-                    <mat-icon
-                        class="text-white"
-                        [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
-            </div>
-        </div>
-
-        <!-- Contact form -->
-        <div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
-            <div class="w-full max-w-3xl">
-                <form [formGroup]="contactForm">
-
-                    <!-- Avatar -->
-                    <div class="flex flex-auto items-end -mt-16">
-                        <div class="relative flex items-center justify-center w-32 h-32 rounded-full overflow-hidden ring-4 ring-bg-card">
-                            <!-- Upload / Remove avatar -->
-                            <div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
-                            <div class="absolute inset-0 flex items-center justify-center z-20">
-                                <div>
-                                    <input
-                                        id="avatar-file-input"
-                                        class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
-                                        type="file"
-                                        [multiple]="false"
-                                        [accept]="'image/jpeg, image/png'"
-                                        (change)="uploadAvatar(avatarFileInput.files)"
-                                        #avatarFileInput>
-                                    <label
-                                        class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-hover"
-                                        for="avatar-file-input"
-                                        matRipple>
-                                        <mat-icon
-                                            class="text-white"
-                                            [svgIcon]="'heroicons_outline:camera'"></mat-icon>
-                                    </label>
-                                </div>
-                                <div>
-                                    <button
-                                        mat-icon-button
-                                        (click)="removeAvatar()">
-                                        <mat-icon
-                                            class="text-white"
-                                            [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                    </button>
-                                </div>
-                            </div>
-                            <!-- Image/Letter -->
-                            <img
-                                class="object-cover w-full h-full"
-                                *ngIf="contact.avatar"
-                                [src]="contact.avatar">
-                            <div
-                                class="flex items-center justify-center w-full h-full rounded overflow-hidden uppercase text-8xl font-bold leading-none bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200"
-                                *ngIf="!contact.avatar">
-                                {{contact.name.charAt(0)}}
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Name -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
-                            <mat-label>Name</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                            <input
-                                matInput
-                                [formControlName]="'name'"
-                                [placeholder]="'Name'"
-                                [spellcheck]="false">
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Tags -->
-                    <div class="flex flex-wrap items-center -m-1.5 mt-6">
-                        <!-- Tags -->
-                        <ng-container *ngIf="contact.tags.length">
-                            <ng-container *ngFor="let tag of (contact.tags | fuseFindByKey:'id':tags); trackBy: trackByFn">
-                                <div class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
-                                    <span class="text-md font-medium whitespace-nowrap">{{tag.title}}</span>
-                                </div>
-                            </ng-container>
-                        </ng-container>
-                        <!-- Tags panel and its button -->
-                        <div
-                            class="flex items-center justify-center px-4 m-1.5 rounded-full leading-9 cursor-pointer text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700"
-                            (click)="openTagsPanel()"
-                            #tagsPanelOrigin>
-
-                            <ng-container *ngIf="contact.tags.length">
-                                <mat-icon
-                                    class="icon-size-5"
-                                    [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                <span class="ml-1.5 text-md font-medium whitespace-nowrap">Edit</span>
-                            </ng-container>
-
-                            <ng-container *ngIf="!contact.tags.length">
-                                <mat-icon
-                                    class="icon-size-5"
-                                    [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
-                                <span class="ml-1.5 text-md font-medium whitespace-nowrap">Add</span>
-                            </ng-container>
-
-                            <!-- Tags panel -->
-                            <ng-template #tagsPanel>
-                                <div class="w-60 rounded border shadow-md bg-card">
-                                    <!-- Tags panel header -->
-                                    <div class="flex items-center m-3 mr-2">
-                                        <div class="flex items-center">
-                                            <mat-icon
-                                                class="icon-size-5"
-                                                [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                                            <div class="ml-2">
-                                                <input
-                                                    class="w-full min-w-0 py-1 border-0"
-                                                    type="text"
-                                                    placeholder="Enter tag name"
-                                                    (input)="filterTags($event)"
-                                                    (keydown)="filterTagsInputKeyDown($event)"
-                                                    [maxLength]="30"
-                                                    #newTagInput>
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="ml-1"
-                                            mat-icon-button
-                                            (click)="toggleTagsEditMode()">
-                                            <mat-icon
-                                                *ngIf="!tagsEditMode"
-                                                class="icon-size-5"
-                                                [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                            <mat-icon
-                                                *ngIf="tagsEditMode"
-                                                class="icon-size-5"
-                                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
-                                        </button>
-                                    </div>
-                                    <div
-                                        class="flex flex-col max-h-64 py-2 border-t overflow-y-auto">
-                                        <!-- Tags -->
-                                        <ng-container *ngIf="!tagsEditMode">
-                                            <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                <div
-                                                    class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
-                                                    (click)="toggleContactTag(tag)"
-                                                    matRipple>
-                                                    <mat-checkbox
-                                                        class="flex items-center h-10 min-h-10 pointer-events-none"
-                                                        [checked]="contact.tags.includes(tag.id)"
-                                                        [color]="'primary'"
-                                                        [disableRipple]="true">
-                                                    </mat-checkbox>
-                                                    <div class="ml-1">{{tag.title}}</div>
-                                                </div>
-                                            </ng-container>
-                                        </ng-container>
-                                        <!-- Tags editing -->
-                                        <ng-container *ngIf="tagsEditMode">
-                                            <div class="py-2 space-y-2">
-                                                <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                    <div class="flex items-center">
-                                                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
-                                                            <input
-                                                                matInput
-                                                                [value]="tag.title"
-                                                                (input)="updateTagTitle(tag, $event)">
-                                                            <button
-                                                                mat-icon-button
-                                                                (click)="deleteTag(tag)"
-                                                                matSuffix>
-                                                                <mat-icon
-                                                                    class="icon-size-5 ml-2"
-                                                                    [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                                            </button>
-                                                        </mat-form-field>
-                                                    </div>
-                                                </ng-container>
-                                            </div>
-                                        </ng-container>
-                                        <!-- Create tag -->
-                                        <div
-                                            class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer hover:bg-hover"
-                                            *ngIf="shouldShowCreateTagButton(newTagInput.value)"
-                                            (click)="createTag(newTagInput.value); newTagInput.value = ''"
-                                            matRipple>
-                                            <mat-icon
-                                                class="mr-2 icon-size-5"
-                                                [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
-                                            <div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </ng-template>
-                        </div>
-                    </div>
-
-                    <!-- Title -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
-                            <mat-label>Title</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:briefcase'"></mat-icon>
-                            <input
-                                matInput
-                                [formControlName]="'title'"
-                                [placeholder]="'Job title'">
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Company -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
-                            <mat-label>Company</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:office-building'"></mat-icon>
-                            <input
-                                matInput
-                                [formControlName]="'company'"
-                                [placeholder]="'Company'">
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Emails -->
-                    <div class="mt-8">
-                        <div class="space-y-4">
-                            <ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
-                                <div class="flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                        <mat-label *ngIf="first">Email</mat-label>
-                                        <mat-icon
-                                            matPrefix
-                                            class="hidden sm:flex icon-size-5"
-                                            [svgIcon]="'heroicons_solid:mail'"></mat-icon>
-                                        <input
-                                            matInput
-                                            [formControl]="email.get('email')"
-                                            [placeholder]="'Email address'"
-                                            [spellcheck]="false">
-                                    </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
-                                        <mat-label *ngIf="first">Label</mat-label>
-                                        <mat-icon
-                                            matPrefix
-                                            class="hidden sm:flex icon-size-5"
-                                            [svgIcon]="'heroicons_solid:tag'"></mat-icon>
-                                        <input
-                                            matInput
-                                            [formControl]="email.get('label')"
-                                            [placeholder]="'Label'">
-                                    </mat-form-field>
-                                    <!-- Remove email -->
-                                    <ng-container *ngIf="!(first && last)">
-                                        <div
-                                            class="flex items-center w-10 pl-2"
-                                            [ngClass]="{'mt-6': first}">
-                                            <button
-                                                class="w-8 h-8 min-h-8"
-                                                mat-icon-button
-                                                (click)="removeEmailField(i)"
-                                                matTooltip="Remove">
-                                                <mat-icon
-                                                    class="icon-size-5"
-                                                    [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                            </button>
-                                        </div>
-                                    </ng-container>
-                                </div>
-                            </ng-container>
-                        </div>
-                        <div
-                            class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
-                            (click)="addEmailField()">
-                            <mat-icon
-                                class="icon-size-5"
-                                [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
-                            <span class="ml-2 font-medium text-secondary group-hover:underline">Add an email address</span>
-                        </div>
-                    </div>
-
-                    <!-- Phone numbers -->
-                    <div class="mt-8">
-                        <div class="space-y-4">
-                            <ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
-                                <div class="relative flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                        <mat-label *ngIf="first">Phone</mat-label>
-                                        <input
-                                            matInput
-                                            [formControl]="phoneNumber.get('phoneNumber')"
-                                            [placeholder]="'Phone'">
-                                        <mat-select
-                                            class="mr-1.5"
-                                            [formControl]="phoneNumber.get('country')"
-                                            matPrefix>
-                                            <mat-select-trigger>
-                                                <span class="flex items-center">
-                                                    <span
-                                                        class="hidden sm:flex w-6 h-4 mr-1 overflow-hidden"
-                                                        [style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
-                                                        [style.backgroundSize]="'24px 3876px'"
-                                                        [style.backgroundPosition]="getCountryByIso(phoneNumber.get('country').value).flagImagePos"></span>
-                                                    <span class="sm:mx-0.5 font-medium text-default">{{getCountryByIso(phoneNumber.get('country').value).code}}</span>
-                                                </span>
-                                            </mat-select-trigger>
-                                            <ng-container *ngFor="let country of countries; trackBy: trackByFn">
-                                                <mat-option [value]="country.iso">
-                                                    <span class="flex items-center">
-                                                        <span
-                                                            class="w-6 h-4 overflow-hidden"
-                                                            [style.background]="'url(\'/assets/images/apps/contacts/flags.png\') no-repeat 0 0'"
-                                                            [style.backgroundSize]="'24px 3876px'"
-                                                            [style.backgroundPosition]="country.flagImagePos"></span>
-                                                        <span class="ml-2">{{country.name}}</span>
-                                                        <span class="ml-2 font-medium">{{country.code}}</span>
-                                                    </span>
-                                                </mat-option>
-                                            </ng-container>
-                                        </mat-select>
-                                    </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
-                                        <mat-label *ngIf="first">Label</mat-label>
-                                        <mat-icon
-                                            matPrefix
-                                            class="hidden sm:flex icon-size-5"
-                                            [svgIcon]="'heroicons_solid:tag'"></mat-icon>
-                                        <input
-                                            matInput
-                                            [formControl]="phoneNumber.get('label')"
-                                            [placeholder]="'Label'">
-                                    </mat-form-field>
-                                    <!-- Remove phone number -->
-                                    <ng-container *ngIf="!(first && last)">
-                                        <div
-                                            class="flex items-center w-10 pl-2"
-                                            [ngClass]="{'mt-6': first}">
-                                            <button
-                                                class="w-8 h-8 min-h-8"
-                                                mat-icon-button
-                                                (click)="removePhoneNumberField(i)"
-                                                matTooltip="Remove">
-                                                <mat-icon
-                                                    class="icon-size-5"
-                                                    [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                            </button>
-                                        </div>
-                                    </ng-container>
-                                </div>
-                            </ng-container>
-                        </div>
-                        <div
-                            class="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
-                            (click)="addPhoneNumberField()">
-                            <mat-icon
-                                class="icon-size-5"
-                                [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
-                            <span class="ml-2 font-medium text-secondary group-hover:underline">Add a phone number</span>
-                        </div>
-                    </div>
-
-                    <!-- Address -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
-                            <mat-label>Address</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:location-marker'"></mat-icon>
-                            <input
-                                matInput
-                                [formControlName]="'address'"
-                                [placeholder]="'Address'">
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Birthday -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
-                            <mat-label>Birthday</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:cake'"></mat-icon>
-                            <input
-                                matInput
-                                [matDatepicker]="birthdayDatepicker"
-                                [formControlName]="'birthday'"
-                                [placeholder]="'Birthday'">
-                            <mat-datepicker-toggle
-                                matSuffix
-                                [for]="birthdayDatepicker">
-                            </mat-datepicker-toggle>
-                            <mat-datepicker #birthdayDatepicker></mat-datepicker>
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Notes -->
-                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
-                            <mat-label>Notes</mat-label>
-                            <mat-icon
-                                matPrefix
-                                class="hidden sm:flex icon-size-5"
-                                [svgIcon]="'heroicons_solid:menu-alt-2'"></mat-icon>
-                            <textarea
-                                matInput
-                                [formControlName]="'notes'"
-                                [placeholder]="'Notes'"
-                                [rows]="5"
-                                [spellcheck]="false"
-                                matTextareaAutosize></textarea>
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Actions -->
-                    <div class="flex items-center mt-10 -mx-6 sm:-mx-12 py-4 pr-4 pl-1 sm:pr-12 sm:pl-7 border-t bg-gray-50 dark:bg-transparent">
-                        <!-- Delete -->
-                        <button
-                            mat-button
-                            [color]="'warn'"
-                            [matTooltip]="'Delete'"
-                            (click)="deleteContact()">
-                            Delete
-                        </button>
-                        <!-- Cancel -->
-                        <button
-                            class="ml-auto"
-                            mat-button
-                            [matTooltip]="'Cancel'"
-                            (click)="toggleEditMode(false)">
-                            Cancel
-                        </button>
-                        <!-- Save -->
-                        <button
-                            class="ml-2"
-                            mat-flat-button
-                            [color]="'primary'"
-                            [disabled]="contactForm.invalid"
-                            [matTooltip]="'Save'"
-                            (click)="updateContact()">
-                            Save
-                        </button>
-                    </div>
-
-                </form>
-            </div>
-        </div>
-    </ng-container>
-</div>

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

@@ -1,722 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { MatDrawerToggleResult } from '@angular/material/sidenav';
-import { Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
-import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
-import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
-
-@Component({
-    selector       : 'contacts-details',
-    templateUrl    : './details.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContactsDetailsComponent implements OnInit, OnDestroy
-{
-    @ViewChild('avatarFileInput') private _avatarFileInput: ElementRef;
-    @ViewChild('tagsPanel') private _tagsPanel: TemplateRef<any>;
-    @ViewChild('tagsPanelOrigin') private _tagsPanelOrigin: ElementRef;
-
-    editMode: boolean = false;
-    tags: Tag[];
-    tagsEditMode: boolean = false;
-    filteredTags: Tag[];
-    contact: Contact;
-    contactForm: FormGroup;
-    contacts: Contact[];
-    countries: Country[];
-    private _tagsPanelOverlayRef: OverlayRef;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _activatedRoute: ActivatedRoute,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _contactsListComponent: ContactsListComponent,
-        private _contactsService: ContactsService,
-        private _formBuilder: FormBuilder,
-        private _fuseConfirmationService: FuseConfirmationService,
-        private _renderer2: Renderer2,
-        private _router: Router,
-        private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Open the drawer
-        this._contactsListComponent.matDrawer.open();
-
-        // Create the contact form
-        this.contactForm = this._formBuilder.group({
-            id          : [''],
-            avatar      : [null],
-            name        : ['', [Validators.required]],
-            emails      : this._formBuilder.array([]),
-            phoneNumbers: this._formBuilder.array([]),
-            title       : [''],
-            company     : [''],
-            birthday    : [null],
-            address     : [null],
-            notes       : [null],
-            tags        : [[]]
-        });
-
-        // Get the contacts
-        this._contactsService.contacts$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((contacts: Contact[]) => {
-                this.contacts = contacts;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the contact
-        this._contactsService.contact$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((contact: Contact) => {
-
-                // Open the drawer in case it is closed
-                this._contactsListComponent.matDrawer.open();
-
-                // Get the contact
-                this.contact = contact;
-
-                // Clear the emails and phoneNumbers form arrays
-                (this.contactForm.get('emails') as FormArray).clear();
-                (this.contactForm.get('phoneNumbers') as FormArray).clear();
-
-                // Patch values to the form
-                this.contactForm.patchValue(contact);
-
-                // Setup the emails form array
-                const emailFormGroups = [];
-
-                if ( contact.emails.length > 0 )
-                {
-                    // Iterate through them
-                    contact.emails.forEach((email) => {
-
-                        // Create an email form group
-                        emailFormGroups.push(
-                            this._formBuilder.group({
-                                email: [email.email],
-                                label: [email.label]
-                            })
-                        );
-                    });
-                }
-                else
-                {
-                    // Create an email form group
-                    emailFormGroups.push(
-                        this._formBuilder.group({
-                            email: [''],
-                            label: ['']
-                        })
-                    );
-                }
-
-                // Add the email form groups to the emails form array
-                emailFormGroups.forEach((emailFormGroup) => {
-                    (this.contactForm.get('emails') as FormArray).push(emailFormGroup);
-                });
-
-                // Setup the phone numbers form array
-                const phoneNumbersFormGroups = [];
-
-                if ( contact.phoneNumbers.length > 0 )
-                {
-                    // Iterate through them
-                    contact.phoneNumbers.forEach((phoneNumber) => {
-
-                        // Create an email form group
-                        phoneNumbersFormGroups.push(
-                            this._formBuilder.group({
-                                country    : [phoneNumber.country],
-                                phoneNumber: [phoneNumber.phoneNumber],
-                                label      : [phoneNumber.label]
-                            })
-                        );
-                    });
-                }
-                else
-                {
-                    // Create a phone number form group
-                    phoneNumbersFormGroups.push(
-                        this._formBuilder.group({
-                            country    : ['us'],
-                            phoneNumber: [''],
-                            label      : ['']
-                        })
-                    );
-                }
-
-                // Add the phone numbers form groups to the phone numbers form array
-                phoneNumbersFormGroups.forEach((phoneNumbersFormGroup) => {
-                    (this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumbersFormGroup);
-                });
-
-                // Toggle the edit mode off
-                this.toggleEditMode(false);
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the country telephone codes
-        this._contactsService.countries$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((codes: Country[]) => {
-                this.countries = codes;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the tags
-        this._contactsService.tags$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((tags: Tag[]) => {
-                this.tags = tags;
-                this.filteredTags = tags;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-
-        // Dispose the overlays if they are still on the DOM
-        if ( this._tagsPanelOverlayRef )
-        {
-            this._tagsPanelOverlayRef.dispose();
-        }
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Close the drawer
-     */
-    closeDrawer(): Promise<MatDrawerToggleResult>
-    {
-        return this._contactsListComponent.matDrawer.close();
-    }
-
-    /**
-     * Toggle edit mode
-     *
-     * @param editMode
-     */
-    toggleEditMode(editMode: boolean | null = null): void
-    {
-        if ( editMode === null )
-        {
-            this.editMode = !this.editMode;
-        }
-        else
-        {
-            this.editMode = editMode;
-        }
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Update the contact
-     */
-    updateContact(): void
-    {
-        // Get the contact object
-        const contact = this.contactForm.getRawValue();
-
-        // Go through the contact object and clear empty values
-        contact.emails = contact.emails.filter(email => email.email);
-
-        contact.phoneNumbers = contact.phoneNumbers.filter(phoneNumber => phoneNumber.phoneNumber);
-
-        // Update the contact on the server
-        this._contactsService.updateContact(contact.id, contact).subscribe(() => {
-
-            // Toggle the edit mode off
-            this.toggleEditMode(false);
-        });
-    }
-
-    /**
-     * Delete the contact
-     */
-    deleteContact(): void
-    {
-        // Open the confirmation dialog
-        const confirmation = this._fuseConfirmationService.open({
-            title  : 'Delete contact',
-            message: 'Are you sure you want to delete this contact? This action cannot be undone!',
-            actions: {
-                confirm: {
-                    label: 'Delete'
-                }
-            }
-        });
-
-        // Subscribe to the confirmation dialog closed action
-        confirmation.afterClosed().subscribe((result) => {
-
-            // If the confirm button pressed...
-            if ( result === 'confirmed' )
-            {
-                // Get the current contact's id
-                const id = this.contact.id;
-
-                // Get the next/previous contact's id
-                const currentContactIndex = this.contacts.findIndex(item => item.id === id);
-                const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
-                const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
-
-                // Delete the contact
-                this._contactsService.deleteContact(id)
-                    .subscribe((isDeleted) => {
-
-                        // Return if the contact wasn't deleted...
-                        if ( !isDeleted )
-                        {
-                            return;
-                        }
-
-                        // Navigate to the next contact if available
-                        if ( nextContactId )
-                        {
-                            this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
-                        }
-                        // Otherwise, navigate to the parent
-                        else
-                        {
-                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                        }
-
-                        // Toggle the edit mode off
-                        this.toggleEditMode(false);
-                    });
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            }
-        });
-
-    }
-
-    /**
-     * Upload avatar
-     *
-     * @param fileList
-     */
-    uploadAvatar(fileList: FileList): void
-    {
-        // Return if canceled
-        if ( !fileList.length )
-        {
-            return;
-        }
-
-        const allowedTypes = ['image/jpeg', 'image/png'];
-        const file = fileList[0];
-
-        // Return if the file is not allowed
-        if ( !allowedTypes.includes(file.type) )
-        {
-            return;
-        }
-
-        // Upload the avatar
-        this._contactsService.uploadAvatar(this.contact.id, file).subscribe();
-    }
-
-    /**
-     * Remove the avatar
-     */
-    removeAvatar(): void
-    {
-        // Get the form control for 'avatar'
-        const avatarFormControl = this.contactForm.get('avatar');
-
-        // Set the avatar as null
-        avatarFormControl.setValue(null);
-
-        // Set the file input value as null
-        this._avatarFileInput.nativeElement.value = null;
-
-        // Update the contact
-        this.contact.avatar = null;
-    }
-
-    /**
-     * Open tags panel
-     */
-    openTagsPanel(): void
-    {
-        // Create the overlay
-        this._tagsPanelOverlayRef = this._overlay.create({
-            backdropClass   : '',
-            hasBackdrop     : true,
-            scrollStrategy  : this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position()
-                                  .flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
-                                  .withFlexibleDimensions(true)
-                                  .withViewportMargin(64)
-                                  .withLockedPosition(true)
-                                  .withPositions([
-                                      {
-                                          originX : 'start',
-                                          originY : 'bottom',
-                                          overlayX: 'start',
-                                          overlayY: 'top'
-                                      }
-                                  ])
-        });
-
-        // Subscribe to the attachments observable
-        this._tagsPanelOverlayRef.attachments().subscribe(() => {
-
-            // Add a class to the origin
-            this._renderer2.addClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
-
-            // Focus to the search input once the overlay has been attached
-            this._tagsPanelOverlayRef.overlayElement.querySelector('input').focus();
-        });
-
-        // Create a portal from the template
-        const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
-
-        // Attach the portal to the overlay
-        this._tagsPanelOverlayRef.attach(templatePortal);
-
-        // Subscribe to the backdrop click
-        this._tagsPanelOverlayRef.backdropClick().subscribe(() => {
-
-            // Remove the class from the origin
-            this._renderer2.removeClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
-
-            // If overlay exists and attached...
-            if ( this._tagsPanelOverlayRef && this._tagsPanelOverlayRef.hasAttached() )
-            {
-                // Detach it
-                this._tagsPanelOverlayRef.detach();
-
-                // Reset the tag filter
-                this.filteredTags = this.tags;
-
-                // Toggle the edit mode off
-                this.tagsEditMode = false;
-            }
-
-            // If template portal exists and attached...
-            if ( templatePortal && templatePortal.isAttached )
-            {
-                // Detach it
-                templatePortal.detach();
-            }
-        });
-    }
-
-    /**
-     * Toggle the tags edit mode
-     */
-    toggleTagsEditMode(): void
-    {
-        this.tagsEditMode = !this.tagsEditMode;
-    }
-
-    /**
-     * Filter tags
-     *
-     * @param event
-     */
-    filterTags(event): void
-    {
-        // Get the value
-        const value = event.target.value.toLowerCase();
-
-        // Filter the tags
-        this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
-    }
-
-    /**
-     * Filter tags input key down event
-     *
-     * @param event
-     */
-    filterTagsInputKeyDown(event): void
-    {
-        // Return if the pressed key is not 'Enter'
-        if ( event.key !== 'Enter' )
-        {
-            return;
-        }
-
-        // If there is no tag available...
-        if ( this.filteredTags.length === 0 )
-        {
-            // Create the tag
-            this.createTag(event.target.value);
-
-            // Clear the input
-            event.target.value = '';
-
-            // Return
-            return;
-        }
-
-        // If there is a tag...
-        const tag = this.filteredTags[0];
-        const isTagApplied = this.contact.tags.find(id => id === tag.id);
-
-        // If the found tag is already applied to the contact...
-        if ( isTagApplied )
-        {
-            // Remove the tag from the contact
-            this.removeTagFromContact(tag);
-        }
-        else
-        {
-            // Otherwise add the tag to the contact
-            this.addTagToContact(tag);
-        }
-    }
-
-    /**
-     * Create a new tag
-     *
-     * @param title
-     */
-    createTag(title: string): void
-    {
-        const tag = {
-            title
-        };
-
-        // Create tag on the server
-        this._contactsService.createTag(tag)
-            .subscribe((response) => {
-
-                // Add the tag to the contact
-                this.addTagToContact(response);
-            });
-    }
-
-    /**
-     * Update the tag title
-     *
-     * @param tag
-     * @param event
-     */
-    updateTagTitle(tag: Tag, event): void
-    {
-        // Update the title on the tag
-        tag.title = event.target.value;
-
-        // Update the tag on the server
-        this._contactsService.updateTag(tag.id, tag)
-            .pipe(debounceTime(300))
-            .subscribe();
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Delete the tag
-     *
-     * @param tag
-     */
-    deleteTag(tag: Tag): void
-    {
-        // Delete the tag from the server
-        this._contactsService.deleteTag(tag.id).subscribe();
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Add tag to the contact
-     *
-     * @param tag
-     */
-    addTagToContact(tag: Tag): void
-    {
-        // Add the tag
-        this.contact.tags.unshift(tag.id);
-
-        // Update the contact form
-        this.contactForm.get('tags').patchValue(this.contact.tags);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Remove tag from the contact
-     *
-     * @param tag
-     */
-    removeTagFromContact(tag: Tag): void
-    {
-        // Remove the tag
-        this.contact.tags.splice(this.contact.tags.findIndex(item => item === tag.id), 1);
-
-        // Update the contact form
-        this.contactForm.get('tags').patchValue(this.contact.tags);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Toggle contact tag
-     *
-     * @param tag
-     */
-    toggleContactTag(tag: Tag): void
-    {
-        if ( this.contact.tags.includes(tag.id) )
-        {
-            this.removeTagFromContact(tag);
-        }
-        else
-        {
-            this.addTagToContact(tag);
-        }
-    }
-
-    /**
-     * Should the create tag button be visible
-     *
-     * @param inputValue
-     */
-    shouldShowCreateTagButton(inputValue: string): boolean
-    {
-        return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
-    }
-
-    /**
-     * Add the email field
-     */
-    addEmailField(): void
-    {
-        // Create an empty email form group
-        const emailFormGroup = this._formBuilder.group({
-            email: [''],
-            label: ['']
-        });
-
-        // Add the email form group to the emails form array
-        (this.contactForm.get('emails') as FormArray).push(emailFormGroup);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Remove the email field
-     *
-     * @param index
-     */
-    removeEmailField(index: number): void
-    {
-        // Get form array for emails
-        const emailsFormArray = this.contactForm.get('emails') as FormArray;
-
-        // Remove the email field
-        emailsFormArray.removeAt(index);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Add an empty phone number field
-     */
-    addPhoneNumberField(): void
-    {
-        // Create an empty phone number form group
-        const phoneNumberFormGroup = this._formBuilder.group({
-            country    : ['us'],
-            phoneNumber: [''],
-            label      : ['']
-        });
-
-        // Add the phone number form group to the phoneNumbers form array
-        (this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumberFormGroup);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Remove the phone number field
-     *
-     * @param index
-     */
-    removePhoneNumberField(index: number): void
-    {
-        // Get form array for phone numbers
-        const phoneNumbersFormArray = this.contactForm.get('phoneNumbers') as FormArray;
-
-        // Remove the phone number field
-        phoneNumbersFormArray.removeAt(index);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Get country info by iso code
-     *
-     * @param iso
-     */
-    getCountryByIso(iso: string): Country
-    {
-        return this.countries.find(country => country.iso === iso);
-    }
-
-    /**
-     * 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/contacts/list/list.component.html

@@ -1,121 +0,0 @@
-<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
-
-    <mat-drawer-container
-        class="flex-auto h-full bg-card dark:bg-transparent"
-        (backdropClick)="onBackdropClicked()">
-
-        <!-- Drawer -->
-        <mat-drawer
-            class="w-full md:w-160 dark:bg-gray-900"
-            [mode]="drawerMode"
-            [opened]="false"
-            [position]="'end'"
-            [disableClose]="true"
-            #matDrawer>
-            <router-outlet></router-outlet>
-        </mat-drawer>
-
-        <mat-drawer-content class="flex flex-col">
-
-            <!-- Main -->
-            <div class="flex-auto">
-
-                <!-- Header -->
-                <div class="flex flex-col sm:flex-row md:flex-col flex-auto justify-between py-8 px-6 md:px-8 border-b">
-
-                    <!-- Title -->
-                    <div>
-                        <div class="text-4xl font-extrabold tracking-tight leading-none">Contacts</div>
-                        <div class="ml-0.5 font-medium text-secondary">
-                            <ng-container *ngIf="contactsCount > 0">
-                                {{contactsCount}}
-                            </ng-container>
-                            {{contactsCount | i18nPlural: {
-                            '=0'   : 'No contacts',
-                            '=1'   : 'contact',
-                            'other': 'contacts'
-                        } }}
-                        </div>
-                    </div>
-
-                    <!-- Main actions -->
-                    <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
-                        <!-- Search -->
-                        <div class="flex-auto">
-                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
-                                <mat-icon
-                                    class="icon-size-5"
-                                    matPrefix
-                                    [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                                <input
-                                    matInput
-                                    [formControl]="searchInputControl"
-                                    [autocomplete]="'off'"
-                                    [placeholder]="'Search contacts'">
-                            </mat-form-field>
-                        </div>
-                        <!-- Add contact button -->
-                        <button
-                            class="ml-4"
-                            mat-flat-button
-                            [color]="'primary'"
-                            (click)="createContact()">
-                            <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-                            <span class="ml-2 mr-1">Add</span>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Contacts list -->
-                <div class="relative">
-                    <ng-container *ngIf="contacts$ | async as contacts">
-                        <ng-container *ngIf="contacts.length; else noContacts">
-                            <ng-container *ngFor="let contact of contacts; let i = index; trackBy: trackByFn">
-                                <!-- Group -->
-                                <ng-container *ngIf="i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)">
-                                    <div class="z-10 sticky top-0 -mt-px px-6 py-1 md:px-8 border-t border-b font-medium uppercase text-secondary bg-gray-50 dark:bg-gray-900">
-                                        {{contact.name.charAt(0)}}
-                                    </div>
-                                </ng-container>
-                                <!-- Contact -->
-                                <a
-                                    class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b"
-                                    [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedContact || selectedContact.id !== contact.id,
-                                                'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
-                                    [routerLink]="['./', contact.id]">
-                                    <div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
-                                        <ng-container *ngIf="contact.avatar">
-                                            <img
-                                                class="object-cover w-full h-full"
-                                                [src]="contact.avatar"
-                                                alt="Contact avatar"/>
-                                        </ng-container>
-                                        <ng-container *ngIf="!contact.avatar">
-                                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                                {{contact.name.charAt(0)}}
-                                            </div>
-                                        </ng-container>
-                                    </div>
-                                    <div class="min-w-0 ml-4">
-                                        <div class="font-medium leading-5 truncate">{{contact.name}}</div>
-                                        <div class="leading-5 truncate text-secondary">{{contact.title}}</div>
-                                    </div>
-                                </a>
-                            </ng-container>
-                        </ng-container>
-                    </ng-container>
-
-                    <!-- No contacts -->
-                    <ng-template #noContacts>
-                        <div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no contacts!</div>
-                    </ng-template>
-
-                </div>
-
-            </div>
-
-        </mat-drawer-content>
-
-    </mat-drawer-container>
-
-</div>

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

@@ -1,201 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
-import { MatDrawer } from '@angular/material/sidenav';
-import { fromEvent, Observable, Subject } from 'rxjs';
-import { filter, switchMap, takeUntil } from 'rxjs/operators';
-import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { Contact, Country } from 'app/modules/admin/apps/contacts/contacts.types';
-import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
-
-@Component({
-    selector       : 'contacts-list',
-    templateUrl    : './list.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ContactsListComponent implements OnInit, OnDestroy
-{
-    @ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
-
-    contacts$: Observable<Contact[]>;
-
-    contactsCount: number = 0;
-    contactsTableColumns: string[] = ['name', 'email', 'phoneNumber', 'job'];
-    countries: Country[];
-    drawerMode: 'side' | 'over';
-    searchInputControl: FormControl = new FormControl();
-    selectedContact: Contact;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _activatedRoute: ActivatedRoute,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _contactsService: ContactsService,
-        @Inject(DOCUMENT) private _document: any,
-        private _router: Router,
-        private _fuseMediaWatcherService: FuseMediaWatcherService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get the contacts
-        this.contacts$ = this._contactsService.contacts$;
-        this._contactsService.contacts$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((contacts: Contact[]) => {
-
-                // Update the counts
-                this.contactsCount = contacts.length;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the contact
-        this._contactsService.contact$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((contact: Contact) => {
-
-                // Update the selected contact
-                this.selectedContact = contact;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the countries
-        this._contactsService.countries$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((countries: Country[]) => {
-
-                // Update the countries
-                this.countries = countries;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Subscribe to search input field value changes
-        this.searchInputControl.valueChanges
-            .pipe(
-                takeUntil(this._unsubscribeAll),
-                switchMap(query =>
-
-                    // Search
-                    this._contactsService.searchContacts(query)
-                )
-            )
-            .subscribe();
-
-        // Subscribe to MatDrawer opened change
-        this.matDrawer.openedChange.subscribe((opened) => {
-            if ( !opened )
-            {
-                // Remove the selected contact when drawer closed
-                this.selectedContact = null;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            }
-        });
-
-        // Subscribe to media changes
-        this._fuseMediaWatcherService.onMediaChange$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) => {
-
-                // Set the drawerMode if the given breakpoint is active
-                if ( matchingAliases.includes('lg') )
-                {
-                    this.drawerMode = 'side';
-                }
-                else
-                {
-                    this.drawerMode = 'over';
-                }
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Listen for shortcuts
-        fromEvent(this._document, 'keydown')
-            .pipe(
-                takeUntil(this._unsubscribeAll),
-                filter<KeyboardEvent>(event =>
-                    (event.ctrlKey === true || event.metaKey) // Ctrl or Cmd
-                    && (event.key === '/') // '/'
-                )
-            )
-            .subscribe(() => {
-                this.createContact();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On backdrop clicked
-     */
-    onBackdropClicked(): void
-    {
-        // Go back to the list
-        this._router.navigate(['./'], {relativeTo: this._activatedRoute});
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Create contact
-     */
-    createContact(): void
-    {
-        // Create the contact
-        this._contactsService.createContact().subscribe((newContact) => {
-
-            // Go to the new contact
-            this._router.navigate(['./', newContact.id], {relativeTo: this._activatedRoute});
-
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-}

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

@@ -1,46 +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 { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatRippleModule } from '@angular/material/core';
-import { MatSortModule } from '@angular/material/sort';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { SharedModule } from 'app/shared/shared.module';
-import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
-import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
-import { ecommerceRoutes } from 'app/modules/admin/apps/ecommerce/ecommerce.routing';
-
-@NgModule({
-    declarations: [
-        InventoryComponent,
-        InventoryListComponent
-    ],
-    imports     : [
-        RouterModule.forChild(ecommerceRoutes),
-        MatButtonModule,
-        MatCheckboxModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        MatRippleModule,
-        MatSortModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-        MatTooltipModule,
-        SharedModule
-    ]
-})
-export class ECommerceModule
-{
-}

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

@@ -1,50 +0,0 @@
-import { Route } from '@angular/router';
-import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
-import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
-import { InventoryBrandsResolver, InventoryCategoriesResolver, InventoryProductsResolver, InventoryTagsResolver, InventoryVendorsResolver } from 'app/modules/admin/apps/ecommerce/inventory/inventory.resolvers';
-
-export const ecommerceRoutes: Route[] = [
-    {
-        path      : '',
-        pathMatch : 'full',
-        redirectTo: 'inventory'
-    },
-    {
-        path     : 'inventory',
-        component: InventoryComponent,
-        children : [
-            {
-                path     : '',
-                component: InventoryListComponent,
-                resolve  : {
-                    brands    : InventoryBrandsResolver,
-                    categories: InventoryCategoriesResolver,
-                    products  : InventoryProductsResolver,
-                    tags      : InventoryTagsResolver,
-                    vendors   : InventoryVendorsResolver
-                }
-            }
-        ]
-        /*children : [
-            {
-                path     : '',
-                component: ContactsListComponent,
-                resolve  : {
-                    tasks    : ContactsResolver,
-                    countries: ContactsCountriesResolver
-                },
-                children : [
-                    {
-                        path         : ':id',
-                        component    : ContactsDetailsComponent,
-                        resolve      : {
-                            task     : ContactsContactResolver,
-                            countries: ContactsCountriesResolver
-                        },
-                        canDeactivate: [CanDeactivateContactsDetails]
-                    }
-                ]
-            }
-        ]*/
-    }
-];

src/app/modules/admin/apps/ecommerce/inventory/inventory.component.html

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

src/app/modules/admin/apps/ecommerce/inventory/inventory.component.ts

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

src/app/modules/admin/apps/ecommerce/inventory/inventory.resolvers.ts

@@ -1,194 +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 { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
-import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryBrandsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _inventoryService: InventoryService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryBrand[]>
-    {
-        return this._inventoryService.getBrands();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryCategoriesResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _inventoryService: InventoryService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryCategory[]>
-    {
-        return this._inventoryService.getCategories();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryProductResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _inventoryService: InventoryService,
-        private _router: Router
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryProduct>
-    {
-        return this._inventoryService.getProductById(route.paramMap.get('id'))
-                   .pipe(
-                       // Error here means the requested product 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 InventoryProductsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _inventoryService: InventoryService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<{ pagination: InventoryPagination; products: InventoryProduct[] }>
-    {
-        return this._inventoryService.getProducts();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryTagsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _inventoryService: InventoryService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryTag[]>
-    {
-        return this._inventoryService.getTags();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryVendorsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _inventoryService: InventoryService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InventoryVendor[]>
-    {
-        return this._inventoryService.getVendors();
-    }
-}

src/app/modules/admin/apps/ecommerce/inventory/inventory.service.ts

@@ -1,441 +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 { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InventoryService
-{
-    // Private
-    private _brands: BehaviorSubject<InventoryBrand[] | null> = new BehaviorSubject(null);
-    private _categories: BehaviorSubject<InventoryCategory[] | null> = new BehaviorSubject(null);
-    private _pagination: BehaviorSubject<InventoryPagination | null> = new BehaviorSubject(null);
-    private _product: BehaviorSubject<InventoryProduct | null> = new BehaviorSubject(null);
-    private _products: BehaviorSubject<InventoryProduct[] | null> = new BehaviorSubject(null);
-    private _tags: BehaviorSubject<InventoryTag[] | null> = new BehaviorSubject(null);
-    private _vendors: BehaviorSubject<InventoryVendor[] | null> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for brands
-     */
-    get brands$(): Observable<InventoryBrand[]>
-    {
-        return this._brands.asObservable();
-    }
-
-    /**
-     * Getter for categories
-     */
-    get categories$(): Observable<InventoryCategory[]>
-    {
-        return this._categories.asObservable();
-    }
-
-    /**
-     * Getter for pagination
-     */
-    get pagination$(): Observable<InventoryPagination>
-    {
-        return this._pagination.asObservable();
-    }
-
-    /**
-     * Getter for product
-     */
-    get product$(): Observable<InventoryProduct>
-    {
-        return this._product.asObservable();
-    }
-
-    /**
-     * Getter for products
-     */
-    get products$(): Observable<InventoryProduct[]>
-    {
-        return this._products.asObservable();
-    }
-
-    /**
-     * Getter for tags
-     */
-    get tags$(): Observable<InventoryTag[]>
-    {
-        return this._tags.asObservable();
-    }
-
-    /**
-     * Getter for vendors
-     */
-    get vendors$(): Observable<InventoryVendor[]>
-    {
-        return this._vendors.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get brands
-     */
-    getBrands(): Observable<InventoryBrand[]>
-    {
-        return this._httpClient.get<InventoryBrand[]>('api/apps/ecommerce/inventory/brands').pipe(
-            tap((brands) => {
-                this._brands.next(brands);
-            })
-        );
-    }
-
-    /**
-     * Get categories
-     */
-    getCategories(): Observable<InventoryCategory[]>
-    {
-        return this._httpClient.get<InventoryCategory[]>('api/apps/ecommerce/inventory/categories').pipe(
-            tap((categories) => {
-                this._categories.next(categories);
-            })
-        );
-    }
-
-    /**
-     * Get products
-     *
-     *
-     * @param page
-     * @param size
-     * @param sort
-     * @param order
-     * @param search
-     */
-    getProducts(page: number = 0, size: number = 10, sort: string = 'name', order: 'asc' | 'desc' | '' = 'asc', search: string = ''):
-        Observable<{ pagination: InventoryPagination; products: InventoryProduct[] }>
-    {
-        return this._httpClient.get<{ pagination: InventoryPagination; products: InventoryProduct[] }>('api/apps/ecommerce/inventory/products', {
-            params: {
-                page: '' + page,
-                size: '' + size,
-                sort,
-                order,
-                search
-            }
-        }).pipe(
-            tap((response) => {
-                this._pagination.next(response.pagination);
-                this._products.next(response.products);
-            })
-        );
-    }
-
-    /**
-     * Get product by id
-     */
-    getProductById(id: string): Observable<InventoryProduct>
-    {
-        return this._products.pipe(
-            take(1),
-            map((products) => {
-
-                // Find the product
-                const product = products.find(item => item.id === id) || null;
-
-                // Update the product
-                this._product.next(product);
-
-                // Return the product
-                return product;
-            }),
-            switchMap((product) => {
-
-                if ( !product )
-                {
-                    return throwError('Could not found product with id of ' + id + '!');
-                }
-
-                return of(product);
-            })
-        );
-    }
-
-    /**
-     * Create product
-     */
-    createProduct(): Observable<InventoryProduct>
-    {
-        return this.products$.pipe(
-            take(1),
-            switchMap(products => this._httpClient.post<InventoryProduct>('api/apps/ecommerce/inventory/product', {}).pipe(
-                map((newProduct) => {
-
-                    // Update the products with the new product
-                    this._products.next([newProduct, ...products]);
-
-                    // Return the new product
-                    return newProduct;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update product
-     *
-     * @param id
-     * @param product
-     */
-    updateProduct(id: string, product: InventoryProduct): Observable<InventoryProduct>
-    {
-        return this.products$.pipe(
-            take(1),
-            switchMap(products => this._httpClient.patch<InventoryProduct>('api/apps/ecommerce/inventory/product', {
-                id,
-                product
-            }).pipe(
-                map((updatedProduct) => {
-
-                    // Find the index of the updated product
-                    const index = products.findIndex(item => item.id === id);
-
-                    // Update the product
-                    products[index] = updatedProduct;
-
-                    // Update the products
-                    this._products.next(products);
-
-                    // Return the updated product
-                    return updatedProduct;
-                }),
-                switchMap(updatedProduct => this.product$.pipe(
-                    take(1),
-                    filter(item => item && item.id === id),
-                    tap(() => {
-
-                        // Update the product if it's selected
-                        this._product.next(updatedProduct);
-
-                        // Return the updated product
-                        return updatedProduct;
-                    })
-                ))
-            ))
-        );
-    }
-
-    /**
-     * Delete the product
-     *
-     * @param id
-     */
-    deleteProduct(id: string): Observable<boolean>
-    {
-        return this.products$.pipe(
-            take(1),
-            switchMap(products => this._httpClient.delete('api/apps/ecommerce/inventory/product', {params: {id}}).pipe(
-                map((isDeleted: boolean) => {
-
-                    // Find the index of the deleted product
-                    const index = products.findIndex(item => item.id === id);
-
-                    // Delete the product
-                    products.splice(index, 1);
-
-                    // Update the products
-                    this._products.next(products);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get tags
-     */
-    getTags(): Observable<InventoryTag[]>
-    {
-        return this._httpClient.get<InventoryTag[]>('api/apps/ecommerce/inventory/tags').pipe(
-            tap((tags) => {
-                this._tags.next(tags);
-            })
-        );
-    }
-
-    /**
-     * Create tag
-     *
-     * @param tag
-     */
-    createTag(tag: InventoryTag): Observable<InventoryTag>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.post<InventoryTag>('api/apps/ecommerce/inventory/tag', {tag}).pipe(
-                map((newTag) => {
-
-                    // Update the tags with the new tag
-                    this._tags.next([...tags, newTag]);
-
-                    // Return new tag from observable
-                    return newTag;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update the tag
-     *
-     * @param id
-     * @param tag
-     */
-    updateTag(id: string, tag: InventoryTag): Observable<InventoryTag>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.patch<InventoryTag>('api/apps/ecommerce/inventory/tag', {
-                id,
-                tag
-            }).pipe(
-                map((updatedTag) => {
-
-                    // Find the index of the updated tag
-                    const index = tags.findIndex(item => item.id === id);
-
-                    // Update the tag
-                    tags[index] = updatedTag;
-
-                    // Update the tags
-                    this._tags.next(tags);
-
-                    // Return the updated tag
-                    return updatedTag;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete the tag
-     *
-     * @param id
-     */
-    deleteTag(id: string): Observable<boolean>
-    {
-        return this.tags$.pipe(
-            take(1),
-            switchMap(tags => this._httpClient.delete('api/apps/ecommerce/inventory/tag', {params: {id}}).pipe(
-                map((isDeleted: boolean) => {
-
-                    // Find the index of the deleted tag
-                    const index = tags.findIndex(item => item.id === id);
-
-                    // Delete the tag
-                    tags.splice(index, 1);
-
-                    // Update the tags
-                    this._tags.next(tags);
-
-                    // Return the deleted status
-                    return isDeleted;
-                }),
-                filter(isDeleted => isDeleted),
-                switchMap(isDeleted => this.products$.pipe(
-                    take(1),
-                    map((products) => {
-
-                        // Iterate through the contacts
-                        products.forEach((product) => {
-
-                            const tagIndex = product.tags.findIndex(tag => tag === id);
-
-                            // If the contact has the tag, remove it
-                            if ( tagIndex > -1 )
-                            {
-                                product.tags.splice(tagIndex, 1);
-                            }
-                        });
-
-                        // Return the deleted status
-                        return isDeleted;
-                    })
-                ))
-            ))
-        );
-    }
-
-    /**
-     * Get vendors
-     */
-    getVendors(): Observable<InventoryVendor[]>
-    {
-        return this._httpClient.get<InventoryVendor[]>('api/apps/ecommerce/inventory/vendors').pipe(
-            tap((vendors) => {
-                this._vendors.next(vendors);
-            })
-        );
-    }
-
-    /**
-     * Update the avatar of the given contact
-     *
-     * @param id
-     * @param avatar
-     */
-    /*uploadAvatar(id: string, avatar: File): Observable<Contact>
-    {
-        return this.contacts$.pipe(
-            take(1),
-            switchMap(contacts => this._httpClient.post<Contact>('api/apps/contacts/avatar', {
-                id,
-                avatar
-            }, {
-                headers: {
-                    'Content-Type': avatar.type
-                }
-            }).pipe(
-                map((updatedContact) => {
-
-                    // Find the index of the updated contact
-                    const index = contacts.findIndex(item => item.id === id);
-
-                    // Update the contact
-                    contacts[index] = updatedContact;
-
-                    // Update the contacts
-                    this._contacts.next(contacts);
-
-                    // Return the updated contact
-                    return updatedContact;
-                }),
-                switchMap(updatedContact => this.contact$.pipe(
-                    take(1),
-                    filter(item => item && item.id === id),
-                    tap(() => {
-
-                        // Update the contact if it's selected
-                        this._contact.next(updatedContact);
-
-                        // Return the updated contact
-                        return updatedContact;
-                    })
-                ))
-            ))
-        );
-    }*/
-}

src/app/modules/admin/apps/ecommerce/inventory/inventory.types.ts

@@ -1,60 +0,0 @@
-export interface InventoryProduct
-{
-    id: string;
-    category?: string;
-    name: string;
-    description?: string;
-    tags?: string[];
-    sku?: string | null;
-    barcode?: string | null;
-    brand?: string | null;
-    vendor: string | null;
-    stock: number;
-    reserved: number;
-    cost: number;
-    basePrice: number;
-    taxPercent: number;
-    price: number;
-    weight: number;
-    thumbnail: string;
-    images: string[];
-    active: boolean;
-}
-
-export interface InventoryPagination
-{
-    length: number;
-    size: number;
-    page: number;
-    lastPage: number;
-    startIndex: number;
-    endIndex: number;
-}
-
-export interface InventoryCategory
-{
-    id: string;
-    parentId: string;
-    name: string;
-    slug: string;
-}
-
-export interface InventoryBrand
-{
-    id: string;
-    name: string;
-    slug: string;
-}
-
-export interface InventoryTag
-{
-    id?: string;
-    title?: string;
-}
-
-export interface InventoryVendor
-{
-    id: string;
-    name: string;
-    slug: string;
-}

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html

@@ -1,496 +0,0 @@
-<div class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent">
-
-    <!-- Header -->
-    <div class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b">
-        <!-- Loader -->
-        <div
-            class="absolute inset-x-0 bottom-0"
-            *ngIf="isLoading">
-            <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-        </div>
-        <!-- Title -->
-        <div class="text-4xl font-extrabold tracking-tight">Inventory</div>
-        <!-- Actions -->
-        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-            <!-- Search -->
-            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
-                <mat-icon
-                    class="icon-size-5"
-                    matPrefix
-                    [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                <input
-                    matInput
-                    [formControl]="searchInputControl"
-                    [autocomplete]="'off'"
-                    [placeholder]="'Search products'">
-            </mat-form-field>
-            <!-- Add product button -->
-            <button
-                class="ml-4"
-                mat-flat-button
-                [color]="'primary'"
-                (click)="createProduct()">
-                <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
-                <span class="ml-2 mr-1">Add</span>
-            </button>
-        </div>
-    </div>
-
-    <!-- Main -->
-    <div class="flex flex-auto overflow-hidden">
-
-        <!-- Products list -->
-        <div class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto">
-            <ng-container *ngIf="(products$ | async) as products">
-                <ng-container *ngIf="products.length > 0; else noProducts">
-                    <div class="grid">
-                        <!-- Header -->
-                        <div
-                            class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                            matSort
-                            matSortDisableClear>
-                            <div></div>
-                            <div
-                                class="hidden md:block"
-                                [mat-sort-header]="'sku'">
-                                SKU
-                            </div>
-                            <div [mat-sort-header]="'name'">Name</div>
-                            <div
-                                class="hidden sm:block"
-                                [mat-sort-header]="'price'">
-                                Price
-                            </div>
-                            <div
-                                class="hidden lg:block"
-                                [mat-sort-header]="'stock'">
-                                Stock
-                            </div>
-                            <div
-                                class="hidden lg:block"
-                                [mat-sort-header]="'active'">
-                                Active
-                            </div>
-                            <div class="hidden sm:block">Details</div>
-                        </div>
-                        <!-- Rows -->
-                        <ng-container *ngIf="(products$ | async) as products">
-                            <ng-container *ngFor="let product of products; trackBy: trackByFn">
-                                <div class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b">
-
-                                    <!-- Image -->
-                                    <div class="flex items-center">
-                                        <div class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border">
-                                            <img
-                                                class="w-8"
-                                                *ngIf="product.thumbnail"
-                                                [alt]="'Product thumbnail image'"
-                                                [src]="product.thumbnail">
-                                            <div
-                                                class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
-                                                *ngIf="!product.thumbnail">
-                                                NO THUMB
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <!-- SKU -->
-                                    <div class="hidden md:block truncate">
-                                        {{product.sku}}
-                                    </div>
-
-                                    <!-- Name -->
-                                    <div class="truncate">
-                                        {{product.name}}
-                                    </div>
-
-                                    <!-- Price -->
-                                    <div class="hidden sm:block">
-                                        {{product.price | currency:'USD':'symbol':'1.2-2'}}
-                                    </div>
-
-                                    <!-- Stock -->
-                                    <div class="hidden lg:flex items-center">
-                                        <div class="min-w-4">{{product.stock}}</div>
-                                        <!-- Low stock -->
-                                        <div
-                                            class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
-                                            *ngIf="product.stock < 20">
-                                            <div class="flex w-full h-1/3 bg-red-600"></div>
-                                        </div>
-                                        <!-- Medium stock -->
-                                        <div
-                                            class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
-                                            *ngIf="product.stock >= 20 && product.stock < 30">
-                                            <div class="flex w-full h-2/4 bg-orange-400"></div>
-                                        </div>
-                                        <!-- High stock -->
-                                        <div
-                                            class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
-                                            *ngIf="product.stock >= 30">
-                                            <div class="flex w-full h-full bg-green-400"></div>
-                                        </div>
-                                    </div>
-
-                                    <!-- Active -->
-                                    <div class="hidden lg:block">
-                                        <ng-container *ngIf="product.active">
-                                            <mat-icon
-                                                class="text-green-400 icon-size-5"
-                                                [svgIcon]="'heroicons_solid:check'"></mat-icon>
-                                        </ng-container>
-                                        <ng-container *ngIf="!product.active">
-                                            <mat-icon
-                                                class="text-gray-400 icon-size-5"
-                                                [svgIcon]="'heroicons_solid:x'"></mat-icon>
-                                        </ng-container>
-                                    </div>
-
-                                    <!-- Details button -->
-                                    <div>
-                                        <button
-                                            class="min-w-10 min-h-7 h-7 px-2 leading-6"
-                                            mat-stroked-button
-                                            (click)="toggleDetails(product.id)">
-                                            <mat-icon
-                                                class="icon-size-5"
-                                                [svgIcon]="selectedProduct?.id === product.id ? 'heroicons_solid:chevron-up' : 'heroicons_solid:chevron-down'"></mat-icon>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="grid">
-                                    <ng-container *ngIf="selectedProduct?.id === product.id">
-                                        <ng-container *ngTemplateOutlet="rowDetailsTemplate; context: {$implicit: product}"></ng-container>
-                                    </ng-container>
-                                </div>
-                            </ng-container>
-                        </ng-container>
-                    </div>
-
-                    <mat-paginator
-                        class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-                        [ngClass]="{'pointer-events-none': isLoading}"
-                        [length]="pagination.length"
-                        [pageIndex]="pagination.page"
-                        [pageSize]="pagination.size"
-                        [pageSizeOptions]="[5, 10, 25, 100]"
-                        [showFirstLastButtons]="true"></mat-paginator>
-
-                </ng-container>
-            </ng-container>
-
-            <ng-template
-                #rowDetailsTemplate
-                let-product>
-                <div class="shadow-lg overflow-hidden">
-                    <div class="flex border-b">
-                        <!-- Selected product form -->
-                        <form
-                            class="flex flex-col w-full"
-                            [formGroup]="selectedProductForm">
-
-                            <div class="flex flex-col sm:flex-row p-8">
-
-                                <!-- Product images and status -->
-                                <div class="flex flex-col items-center sm:items-start mb-8 sm:mb-0">
-                                    <div class="flex flex-col items-center">
-                                        <div class="w-32 h-44 border rounded overflow-hidden">
-                                            <ng-container *ngIf="selectedProductForm.get('images').value.length; else noImage">
-                                                <img
-                                                    class="w-full h-full object-cover"
-                                                    [src]="selectedProductForm.get('images').value[selectedProductForm.get('currentImageIndex').value]">
-                                            </ng-container>
-                                            <ng-template #noImage>
-                                                <span class="flex items-center min-h-20 text-lg font-semibold">NO IMAGE</span>
-                                            </ng-template>
-                                        </div>
-                                        <div
-                                            class="flex items-center mt-2 whitespace-nowrap"
-                                            *ngIf="selectedProductForm.get('images').value.length">
-                                            <button
-                                                mat-icon-button
-                                                (click)="cycleImages(false)">
-                                                <mat-icon
-                                                    class="icon-size-5"
-                                                    [svgIcon]="'heroicons_solid:arrow-narrow-left'"></mat-icon>
-                                            </button>
-                                            <span class="font-sm mx-2">
-                                                {{selectedProductForm.get('currentImageIndex').value + 1}} of {{selectedProductForm.get('images').value.length}}
-                                            </span>
-                                            <button
-                                                mat-icon-button
-                                                (click)="cycleImages(true)">
-                                                <mat-icon
-                                                    class="icon-size-5"
-                                                    [svgIcon]="'heroicons_solid:arrow-narrow-right'"></mat-icon>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="flex flex-col mt-8">
-                                        <span class="font-semibold mb-2">Product status</span>
-                                        <mat-slide-toggle
-                                            [formControlName]="'active'"
-                                            [color]="'primary'">
-                                            {{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}}
-                                        </mat-slide-toggle>
-                                    </div>
-                                </div>
-
-                                <div class="flex flex-auto flex-wrap">
-                                    <!-- Name, SKU & etc. -->
-                                    <div class="flex flex-col w-full lg:w-2/4 sm:pl-8">
-
-                                        <!-- Name -->
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Name</mat-label>
-                                            <input
-                                                matInput
-                                                [formControlName]="'name'">
-                                        </mat-form-field>
-
-                                        <!-- SKU and Barcode -->
-                                        <div class="flex">
-                                            <mat-form-field class="w-1/3 pr-2">
-                                                <mat-label>SKU</mat-label>
-                                                <input
-                                                    matInput
-                                                    [formControlName]="'sku'">
-                                            </mat-form-field>
-                                            <mat-form-field class="w-2/3 pl-2">
-                                                <mat-label>Barcode</mat-label>
-                                                <input
-                                                    matInput
-                                                    [formControlName]="'barcode'">
-                                            </mat-form-field>
-                                        </div>
-
-                                        <!-- Category, Brand & Vendor -->
-                                        <div class="flex">
-                                            <mat-form-field class="w-1/3 pr-2">
-                                                <mat-label>Category</mat-label>
-                                                <mat-select [formControlName]="'category'">
-                                                    <ng-container *ngFor="let category of categories">
-                                                        <mat-option [value]="category.id">
-                                                            {{category.name}}
-                                                        </mat-option>
-                                                    </ng-container>
-                                                </mat-select>
-                                            </mat-form-field>
-                                            <mat-form-field class="w-1/3 px-2">
-                                                <mat-label>Brand</mat-label>
-                                                <mat-select [formControlName]="'brand'">
-                                                    <ng-container *ngFor="let brand of brands">
-                                                        <mat-option [value]="brand.id">
-                                                            {{brand.name}}
-                                                        </mat-option>
-                                                    </ng-container>
-                                                </mat-select>
-                                            </mat-form-field>
-                                            <mat-form-field class="w-1/3 pl-2">
-                                                <mat-label>Vendor</mat-label>
-                                                <mat-select [formControlName]="'vendor'">
-                                                    <ng-container *ngFor="let vendor of vendors">
-                                                        <mat-option [value]="vendor.id">
-                                                            {{vendor.name}}
-                                                        </mat-option>
-                                                    </ng-container>
-                                                </mat-select>
-                                            </mat-form-field>
-                                        </div>
-
-                                        <!-- Stock and Reserved -->
-                                        <div class="flex">
-                                            <mat-form-field class="w-1/3 pr-2">
-                                                <mat-label>Stock</mat-label>
-                                                <input
-                                                    type="number"
-                                                    matInput
-                                                    [formControlName]="'stock'">
-                                            </mat-form-field>
-                                            <mat-form-field class="w-1/3 pl-2">
-                                                <mat-label>Reserved</mat-label>
-                                                <input
-                                                    type="number"
-                                                    matInput
-                                                    [formControlName]="'reserved'">
-                                            </mat-form-field>
-                                        </div>
-                                    </div>
-
-                                    <!-- Cost, Base price, Tax & Price -->
-                                    <div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Cost</mat-label>
-                                            <span matPrefix>$</span>
-                                            <input
-                                                matInput
-                                                [formControlName]="'cost'">
-                                        </mat-form-field>
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Base Price</mat-label>
-                                            <span matPrefix>$</span>
-                                            <input
-                                                matInput
-                                                [formControlName]="'basePrice'">
-                                        </mat-form-field>
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Tax</mat-label>
-                                            <span matSuffix>%</span>
-                                            <input
-                                                type="number"
-                                                matInput
-                                                [formControlName]="'taxPercent'">
-                                        </mat-form-field>
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Price</mat-label>
-                                            <span matSuffix>$</span>
-                                            <input
-                                                matInput
-                                                [formControlName]="'price'">
-                                        </mat-form-field>
-                                    </div>
-
-                                    <!-- Weight & Tags -->
-                                    <div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
-                                        <mat-form-field class="w-full">
-                                            <mat-label>Weight</mat-label>
-                                            <span matSuffix>lbs.</span>
-                                            <input
-                                                matInput
-                                                [formControlName]="'weight'">
-                                        </mat-form-field>
-
-                                        <!-- Tags -->
-                                        <span class="mb-px font-medium leading-tight">Tags</span>
-                                        <div class="mt-1.5 rounded-md border border-gray-300 dark:border-gray-500 shadow-sm overflow-hidden">
-                                            <!-- Header -->
-                                            <div class="flex items-center -my-px py-2 px-3">
-                                                <div class="flex items-center flex-auto min-w-0">
-                                                    <mat-icon
-                                                        class="icon-size-5"
-                                                        [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                                                    <input
-                                                        class="min-w-0 ml-2 py-1 border-0"
-                                                        type="text"
-                                                        placeholder="Enter tag name"
-                                                        (input)="filterTags($event)"
-                                                        (keydown)="filterTagsInputKeyDown($event)"
-                                                        [maxLength]="50"
-                                                        #newTagInput>
-                                                </div>
-                                                <button
-                                                    class="ml-3 w-8 h-8 min-h-8"
-                                                    mat-icon-button
-                                                    (click)="toggleTagsEditMode()">
-                                                    <mat-icon
-                                                        *ngIf="!tagsEditMode"
-                                                        class="icon-size-5"
-                                                        [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                                    <mat-icon
-                                                        *ngIf="tagsEditMode"
-                                                        class="icon-size-5"
-                                                        [svgIcon]="'heroicons_solid:check'"></mat-icon>
-                                                </button>
-                                            </div>
-                                            <!-- Available tags -->
-                                            <div class="h-44 leading-none overflow-y-auto border-t border-gray-300 dark:border-gray-500">
-                                                <!-- Tags -->
-                                                <ng-container *ngIf="!tagsEditMode">
-                                                    <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                        <mat-checkbox
-                                                            class="flex items-center h-10 min-h-10 px-4"
-                                                            [color]="'primary'"
-                                                            [checked]="selectedProduct.tags.includes(tag.id)"
-                                                            (change)="toggleProductTag(tag, $event)">
-                                                            {{tag.title}}
-                                                        </mat-checkbox>
-                                                    </ng-container>
-                                                </ng-container>
-                                                <!-- Tags editing -->
-                                                <ng-container *ngIf="tagsEditMode">
-                                                    <div class="p-4 space-y-2">
-                                                        <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full">
-                                                                <input
-                                                                    matInput
-                                                                    [value]="tag.title"
-                                                                    (input)="updateTagTitle(tag, $event)">
-                                                                <button
-                                                                    mat-icon-button
-                                                                    (click)="deleteTag(tag)"
-                                                                    matSuffix>
-                                                                    <mat-icon
-                                                                        class="icon-size-5"
-                                                                        [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                                                </button>
-                                                            </mat-form-field>
-                                                        </ng-container>
-                                                    </div>
-                                                </ng-container>
-                                                <div
-                                                    class="flex items-center h-10 min-h-10 -ml-0.5 pl-4 pr-3 leading-none cursor-pointer border-t hover:bg-gray-50 dark:hover:bg-hover"
-                                                    *ngIf="shouldShowCreateTagButton(newTagInput.value)"
-                                                    (click)="createTag(newTagInput.value); newTagInput.value = ''"
-                                                    matRipple>
-                                                    <mat-icon
-                                                        class="mr-2 icon-size-5"
-                                                        [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
-                                                    <div class="break-all">Create "<b>{{newTagInput.value}}</b>"</div>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                    </div>
-
-                                </div>
-
-                            </div>
-
-                            <div class="flex items-center justify-between w-full border-t px-8 py-4">
-                                <button
-                                    class="-ml-4"
-                                    mat-button
-                                    [color]="'warn'"
-                                    (click)="deleteSelectedProduct()">
-                                    Delete
-                                </button>
-                                <div class="flex items-center">
-                                    <div
-                                        class="flex items-center mr-4"
-                                        *ngIf="flashMessage">
-                                        <ng-container *ngIf="flashMessage === 'success'">
-                                            <mat-icon
-                                                class="text-green-500"
-                                                [svgIcon]="'heroicons_outline:check'"></mat-icon>
-                                            <span class="ml-2">Product updated</span>
-                                        </ng-container>
-                                        <ng-container *ngIf="flashMessage === 'error'">
-                                            <mat-icon
-                                                class="text-red-500"
-                                                [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                                            <span class="ml-2">An error occurred, try again!</span>
-                                        </ng-container>
-                                    </div>
-                                    <button
-                                        mat-flat-button
-                                        [color]="'primary'"
-                                        (click)="updateSelectedProduct()">
-                                        Update
-                                    </button>
-                                </div>
-                            </div>
-
-                        </form>
-                    </div>
-                </div>
-            </ng-template>
-
-            <ng-template #noProducts>
-                <div class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center">There are no products!</div>
-            </ng-template>
-
-        </div>
-
-    </div>
-
-</div>

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts

@@ -1,592 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { merge, Observable, Subject } from 'rxjs';
-import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
-import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
-
-@Component({
-    selector       : 'inventory-list',
-    templateUrl    : './inventory.component.html',
-    styles         : [
-        /* language=SCSS */
-        `
-            .inventory-grid {
-                grid-template-columns: 48px auto 40px;
-
-                @screen sm {
-                    grid-template-columns: 48px auto 112px 72px;
-                }
-
-                @screen md {
-                    grid-template-columns: 48px 112px auto 112px 72px;
-                }
-
-                @screen lg {
-                    grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-                }
-            }
-        `
-    ],
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations     : fuseAnimations
-})
-export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
-{
-    @ViewChild(MatPaginator) private _paginator: MatPaginator;
-    @ViewChild(MatSort) private _sort: MatSort;
-
-    products$: Observable<InventoryProduct[]>;
-
-    brands: InventoryBrand[];
-    categories: InventoryCategory[];
-    filteredTags: InventoryTag[];
-    flashMessage: 'success' | 'error' | null = null;
-    isLoading: boolean = false;
-    pagination: InventoryPagination;
-    searchInputControl: FormControl = new FormControl();
-    selectedProduct: InventoryProduct | null = null;
-    selectedProductForm: FormGroup;
-    tags: InventoryTag[];
-    tagsEditMode: boolean = false;
-    vendors: InventoryVendor[];
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseConfirmationService: FuseConfirmationService,
-        private _formBuilder: FormBuilder,
-        private _inventoryService: InventoryService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Create the selected product form
-        this.selectedProductForm = this._formBuilder.group({
-            id               : [''],
-            category         : [''],
-            name             : ['', [Validators.required]],
-            description      : [''],
-            tags             : [[]],
-            sku              : [''],
-            barcode          : [''],
-            brand            : [''],
-            vendor           : [''],
-            stock            : [''],
-            reserved         : [''],
-            cost             : [''],
-            basePrice        : [''],
-            taxPercent       : [''],
-            price            : [''],
-            weight           : [''],
-            thumbnail        : [''],
-            images           : [[]],
-            currentImageIndex: [0], // Image index that is currently being viewed
-            active           : [false]
-        });
-
-        // Get the brands
-        this._inventoryService.brands$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((brands: InventoryBrand[]) => {
-
-                // Update the brands
-                this.brands = brands;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the categories
-        this._inventoryService.categories$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((categories: InventoryCategory[]) => {
-
-                // Update the categories
-                this.categories = categories;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the pagination
-        this._inventoryService.pagination$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((pagination: InventoryPagination) => {
-
-                // Update the pagination
-                this.pagination = pagination;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the products
-        this.products$ = this._inventoryService.products$;
-
-        // Get the tags
-        this._inventoryService.tags$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((tags: InventoryTag[]) => {
-
-                // Update the tags
-                this.tags = tags;
-                this.filteredTags = tags;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the vendors
-        this._inventoryService.vendors$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((vendors: InventoryVendor[]) => {
-
-                // Update the vendors
-                this.vendors = vendors;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Subscribe to search input field value changes
-        this.searchInputControl.valueChanges
-            .pipe(
-                takeUntil(this._unsubscribeAll),
-                debounceTime(300),
-                switchMap((query) => {
-                    this.closeDetails();
-                    this.isLoading = true;
-                    return this._inventoryService.getProducts(0, 10, 'name', 'asc', query);
-                }),
-                map(() => {
-                    this.isLoading = false;
-                })
-            )
-            .subscribe();
-    }
-
-    /**
-     * After view init
-     */
-    ngAfterViewInit(): void
-    {
-        if ( this._sort && this._paginator )
-        {
-            // Set the initial sort
-            this._sort.sort({
-                id          : 'name',
-                start       : 'asc',
-                disableClear: true
-            });
-
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-
-            // If the user changes the sort order...
-            this._sort.sortChange
-                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe(() => {
-                    // Reset back to the first page
-                    this._paginator.pageIndex = 0;
-
-                    // Close the details
-                    this.closeDetails();
-                });
-
-            // Get products if sort or page changes
-            merge(this._sort.sortChange, this._paginator.page).pipe(
-                switchMap(() => {
-                    this.closeDetails();
-                    this.isLoading = true;
-                    return this._inventoryService.getProducts(this._paginator.pageIndex, this._paginator.pageSize, this._sort.active, this._sort.direction);
-                }),
-                map(() => {
-                    this.isLoading = false;
-                })
-            ).subscribe();
-        }
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle product details
-     *
-     * @param productId
-     */
-    toggleDetails(productId: string): void
-    {
-        // If the product is already selected...
-        if ( this.selectedProduct && this.selectedProduct.id === productId )
-        {
-            // Close the details
-            this.closeDetails();
-            return;
-        }
-
-        // Get the product by id
-        this._inventoryService.getProductById(productId)
-            .subscribe((product) => {
-
-                // Set the selected product
-                this.selectedProduct = product;
-
-                // Fill the form
-                this.selectedProductForm.patchValue(product);
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * Close the details
-     */
-    closeDetails(): void
-    {
-        this.selectedProduct = null;
-    }
-
-    /**
-     * Cycle through images of selected product
-     */
-    cycleImages(forward: boolean = true): void
-    {
-        // Get the image count and current image index
-        const count = this.selectedProductForm.get('images').value.length;
-        const currentIndex = this.selectedProductForm.get('currentImageIndex').value;
-
-        // Calculate the next and previous index
-        const nextIndex = currentIndex + 1 === count ? 0 : currentIndex + 1;
-        const prevIndex = currentIndex - 1 < 0 ? count - 1 : currentIndex - 1;
-
-        // If cycling forward...
-        if ( forward )
-        {
-            this.selectedProductForm.get('currentImageIndex').setValue(nextIndex);
-        }
-        // If cycling backwards...
-        else
-        {
-            this.selectedProductForm.get('currentImageIndex').setValue(prevIndex);
-        }
-    }
-
-    /**
-     * Toggle the tags edit mode
-     */
-    toggleTagsEditMode(): void
-    {
-        this.tagsEditMode = !this.tagsEditMode;
-    }
-
-    /**
-     * Filter tags
-     *
-     * @param event
-     */
-    filterTags(event): void
-    {
-        // Get the value
-        const value = event.target.value.toLowerCase();
-
-        // Filter the tags
-        this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
-    }
-
-    /**
-     * Filter tags input key down event
-     *
-     * @param event
-     */
-    filterTagsInputKeyDown(event): void
-    {
-        // Return if the pressed key is not 'Enter'
-        if ( event.key !== 'Enter' )
-        {
-            return;
-        }
-
-        // If there is no tag available...
-        if ( this.filteredTags.length === 0 )
-        {
-            // Create the tag
-            this.createTag(event.target.value);
-
-            // Clear the input
-            event.target.value = '';
-
-            // Return
-            return;
-        }
-
-        // If there is a tag...
-        const tag = this.filteredTags[0];
-        const isTagApplied = this.selectedProduct.tags.find(id => id === tag.id);
-
-        // If the found tag is already applied to the product...
-        if ( isTagApplied )
-        {
-            // Remove the tag from the product
-            this.removeTagFromProduct(tag);
-        }
-        else
-        {
-            // Otherwise add the tag to the product
-            this.addTagToProduct(tag);
-        }
-    }
-
-    /**
-     * Create a new tag
-     *
-     * @param title
-     */
-    createTag(title: string): void
-    {
-        const tag = {
-            title
-        };
-
-        // Create tag on the server
-        this._inventoryService.createTag(tag)
-            .subscribe((response) => {
-
-                // Add the tag to the product
-                this.addTagToProduct(response);
-            });
-    }
-
-    /**
-     * Update the tag title
-     *
-     * @param tag
-     * @param event
-     */
-    updateTagTitle(tag: InventoryTag, event): void
-    {
-        // Update the title on the tag
-        tag.title = event.target.value;
-
-        // Update the tag on the server
-        this._inventoryService.updateTag(tag.id, tag)
-            .pipe(debounceTime(300))
-            .subscribe();
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Delete the tag
-     *
-     * @param tag
-     */
-    deleteTag(tag: InventoryTag): void
-    {
-        // Delete the tag from the server
-        this._inventoryService.deleteTag(tag.id).subscribe();
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Add tag to the product
-     *
-     * @param tag
-     */
-    addTagToProduct(tag: InventoryTag): void
-    {
-        // Add the tag
-        this.selectedProduct.tags.unshift(tag.id);
-
-        // Update the selected product form
-        this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Remove tag from the product
-     *
-     * @param tag
-     */
-    removeTagFromProduct(tag: InventoryTag): void
-    {
-        // Remove the tag
-        this.selectedProduct.tags.splice(this.selectedProduct.tags.findIndex(item => item === tag.id), 1);
-
-        // Update the selected product form
-        this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Toggle product tag
-     *
-     * @param tag
-     * @param change
-     */
-    toggleProductTag(tag: InventoryTag, change: MatCheckboxChange): void
-    {
-        if ( change.checked )
-        {
-            this.addTagToProduct(tag);
-        }
-        else
-        {
-            this.removeTagFromProduct(tag);
-        }
-    }
-
-    /**
-     * Should the create tag button be visible
-     *
-     * @param inputValue
-     */
-    shouldShowCreateTagButton(inputValue: string): boolean
-    {
-        return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
-    }
-
-    /**
-     * Create product
-     */
-    createProduct(): void
-    {
-        // Create the product
-        this._inventoryService.createProduct().subscribe((newProduct) => {
-
-            // Go to new product
-            this.selectedProduct = newProduct;
-
-            // Fill the form
-            this.selectedProductForm.patchValue(newProduct);
-
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        });
-    }
-
-    /**
-     * Update the selected product using the form data
-     */
-    updateSelectedProduct(): void
-    {
-        // Get the product object
-        const product = this.selectedProductForm.getRawValue();
-
-        // Remove the currentImageIndex field
-        delete product.currentImageIndex;
-
-        // Update the product on the server
-        this._inventoryService.updateProduct(product.id, product).subscribe(() => {
-
-            // Show a success message
-            this.showFlashMessage('success');
-        });
-    }
-
-    /**
-     * Delete the selected product using the form data
-     */
-    deleteSelectedProduct(): void
-    {
-        // Open the confirmation dialog
-        const confirmation = this._fuseConfirmationService.open({
-            title  : 'Delete product',
-            message: 'Are you sure you want to remove this product? This action cannot be undone!',
-            actions: {
-                confirm: {
-                    label: 'Delete'
-                }
-            }
-        });
-
-        // Subscribe to the confirmation dialog closed action
-        confirmation.afterClosed().subscribe((result) => {
-
-            // If the confirm button pressed...
-            if ( result === 'confirmed' )
-            {
-
-                // Get the product object
-                const product = this.selectedProductForm.getRawValue();
-
-                // Delete the product on the server
-                this._inventoryService.deleteProduct(product.id).subscribe(() => {
-
-                    // Close the details
-                    this.closeDetails();
-                });
-            }
-        });
-    }
-
-    /**
-     * Show flash message
-     */
-    showFlashMessage(type: 'success' | 'error'): void
-    {
-        // Show the message
-        this.flashMessage = type;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-
-        // Hide it after 3 seconds
-        setTimeout(() => {
-
-            this.flashMessage = null;
-
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        }, 3000);
-    }
-
-    /**
-     * 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/file-manager/details/details.component.html

@@ -1,105 +0,0 @@
-<div class="flex flex-col flex-auto p-6 md:p-8">
-
-    <!-- Close button -->
-    <div class="flex items-center justify-end">
-        <button
-            mat-icon-button
-            [routerLink]="['../../']">
-            <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
-        </button>
-    </div>
-
-    <!-- Preview -->
-    <div class="aspect-w-9 aspect-h-6 mt-8">
-        <div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
-            <ng-container *ngIf="item.type === 'folder'">
-                <mat-icon
-                    class="icon-size-14 text-hint"
-                    [svgIcon]="'iconsmind:folder'"></mat-icon>
-            </ng-container>
-            <ng-container *ngIf="item.type !== 'folder'">
-                <mat-icon
-                    class="icon-size-14 text-hint"
-                    [svgIcon]="'iconsmind:file'"></mat-icon>
-            </ng-container>
-        </div>
-    </div>
-
-    <!-- Name & Type -->
-    <div class="flex flex-col items-start mt-8">
-        <div class="text-xl font-medium">{{item.name}}</div>
-        <div
-            class="mt-1 px-1.5 rounded text-sm font-semibold leading-5 text-white"
-            [class.bg-indigo-600]="item.type === 'folder'"
-            [class.bg-red-600]="item.type === 'PDF'"
-            [class.bg-blue-600]="item.type === 'DOC'"
-            [class.bg-green-600]="item.type === 'XLS'"
-            [class.bg-gray-600]="item.type === 'TXT'"
-            [class.bg-amber-600]="item.type === 'JPG'">
-            {{item.type.toUpperCase()}}
-        </div>
-    </div>
-
-    <!-- Information -->
-    <div class="text-lg font-medium mt-8">Information</div>
-    <div class="flex flex-col mt-4 border-t border-b divide-y font-medium">
-        <div class="flex items-center justify-between py-3">
-            <div class="text-secondary">Created By</div>
-            <div>{{item.createdBy}}</div>
-        </div>
-        <div class="flex items-center justify-between py-3">
-            <div class="text-secondary">Created At</div>
-            <div>{{item.createdAt}}</div>
-        </div>
-        <div class="flex items-center justify-between py-3">
-            <div class="text-secondary">Modified At</div>
-            <div>{{item.modifiedAt}}</div>
-        </div>
-        <div class="flex items-center justify-between py-3">
-            <div class="text-secondary">Size</div>
-            <div>{{item.size}}</div>
-        </div>
-        <ng-container *ngIf="item.contents">
-            <div class="flex items-center justify-between py-3">
-                <div class="text-secondary">Contents</div>
-                <div>{{item.contents}}</div>
-            </div>
-        </ng-container>
-    </div>
-
-    <!-- Description -->
-    <div class="flex items-center justify-between mt-8">
-        <div class="text-lg font-medium">Description</div>
-        <button mat-icon-button>
-            <mat-icon
-                class="icon-size-5"
-                [svgIcon]="'heroicons_solid:pencil'"></mat-icon>
-        </button>
-    </div>
-    <div class="flex mt-2 border-t">
-        <div class="py-3">
-            <ng-container *ngIf="item.description">
-                <div>{{item.description}}</div>
-            </ng-container>
-            <ng-container *ngIf="!item.description">
-                <div class="italic text-secondary">Click here to add a description</div>
-            </ng-container>
-        </div>
-    </div>
-
-    <!-- Actions -->
-    <div class="grid grid-cols-2 gap-4 w-full mt-8">
-        <button
-            class="flex-auto"
-            mat-flat-button
-            [color]="'primary'">
-            Download
-        </button>
-        <button
-            class="flex-auto"
-            mat-stroked-button>
-            Delete
-        </button>
-    </div>
-
-</div>