mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 06:07:08 +00:00
Compare commits
41 Commits
v13.1.0
...
v13.2.0-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
b2cb512b0e | ||
|
|
21652570c2 | ||
|
|
56c4eb0356 | ||
|
|
a8a4f2b18d | ||
|
|
36c8727616 | ||
|
|
5ea37aed99 | ||
|
|
cbce71f155 | ||
|
|
ed47050232 | ||
|
|
c86a538d41 | ||
|
|
f369206ef8 | ||
|
|
1659d4babd | ||
|
|
fa37f99d33 | ||
|
|
331968ac5b | ||
|
|
27274c84d6 | ||
|
|
4b8a101a3e | ||
|
|
8080a85d40 | ||
|
|
36784c405f | ||
|
|
8f4f7886d5 | ||
|
|
d693a08136 | ||
|
|
0c0ef40de3 | ||
|
|
f4d737d3a3 | ||
|
|
90891eb201 | ||
|
|
6c7201b77a | ||
|
|
90f869e7b9 | ||
|
|
2d2db97416 | ||
|
|
5daa2260e6 | ||
|
|
af984fcba1 | ||
|
|
97d3662417 | ||
|
|
d897a244c8 | ||
|
|
d146a92c79 | ||
|
|
27b6858b76 | ||
|
|
fcfba4c9e4 | ||
|
|
40894e0aa3 | ||
|
|
8dcf21cb1a | ||
|
|
d917f03883 | ||
|
|
0f2ddbda83 | ||
|
|
fa0d74504b | ||
|
|
ad2b19a07a | ||
|
|
4bf11591a2 | ||
|
|
f45a605b4e | ||
|
|
c150a8902c |
4659
package-lock.json
generated
4659
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
59
package.json
59
package.json
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"name": "@fuse/demo",
|
||||
"version": "13.1.0",
|
||||
"version": "13.2.0",
|
||||
"description": "Fuse - Angular Admin Template and Starter Project",
|
||||
"author": "https://themeforest.net/user/srcn",
|
||||
"license": "https://themeforest.net/licenses/standard",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -12,17 +14,17 @@
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "12.0.4",
|
||||
"@angular/cdk": "12.0.4",
|
||||
"@angular/common": "12.0.4",
|
||||
"@angular/compiler": "12.0.4",
|
||||
"@angular/core": "12.0.4",
|
||||
"@angular/forms": "12.0.4",
|
||||
"@angular/material": "12.0.4",
|
||||
"@angular/material-moment-adapter": "12.0.4",
|
||||
"@angular/platform-browser": "12.0.4",
|
||||
"@angular/platform-browser-dynamic": "12.0.4",
|
||||
"@angular/router": "12.0.4",
|
||||
"@angular/animations": "12.1.1",
|
||||
"@angular/cdk": "12.1.1",
|
||||
"@angular/common": "12.1.1",
|
||||
"@angular/compiler": "12.1.1",
|
||||
"@angular/core": "12.1.1",
|
||||
"@angular/forms": "12.1.1",
|
||||
"@angular/material": "12.1.1",
|
||||
"@angular/material-moment-adapter": "12.1.1",
|
||||
"@angular/platform-browser": "12.1.1",
|
||||
"@angular/platform-browser-dynamic": "12.1.1",
|
||||
"@angular/router": "12.1.1",
|
||||
"@fullcalendar/angular": "4.4.5-beta",
|
||||
"@fullcalendar/core": "4.4.2",
|
||||
"@fullcalendar/daygrid": "4.4.2",
|
||||
@@ -39,7 +41,7 @@
|
||||
"moment": "2.29.1",
|
||||
"ng-apexcharts": "1.5.12",
|
||||
"ngx-markdown": "12.0.1",
|
||||
"ngx-quill": "14.0.0",
|
||||
"ngx-quill": "14.1.1",
|
||||
"perfect-scrollbar": "1.5.1",
|
||||
"quill": "1.3.7",
|
||||
"rrule": "2.6.8",
|
||||
@@ -49,15 +51,14 @@
|
||||
"zone.js": "0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "12.0.4",
|
||||
"@angular-eslint/builder": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin": "12.1.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.1.0",
|
||||
"@angular-eslint/schematics": "12.1.0",
|
||||
"@angular-eslint/template-parser": "12.1.0",
|
||||
"@angular/cli": "12.0.4",
|
||||
"@angular/compiler-cli": "12.0.4",
|
||||
"@angular/language-service": "12.0.4",
|
||||
"@angular-devkit/build-angular": "12.1.0",
|
||||
"@angular-eslint/builder": "12.2.0",
|
||||
"@angular-eslint/eslint-plugin": "12.2.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.2.0",
|
||||
"@angular-eslint/schematics": "12.2.0",
|
||||
"@angular-eslint/template-parser": "12.2.0",
|
||||
"@angular/cli": "12.1.0",
|
||||
"@angular/compiler-cli": "12.1.1",
|
||||
"@tailwindcss/aspect-ratio": "0.2.1",
|
||||
"@tailwindcss/line-clamp": "0.2.1",
|
||||
"@tailwindcss/typography": "0.4.1",
|
||||
@@ -68,13 +69,13 @@
|
||||
"@types/lodash": "4.14.170",
|
||||
"@types/lodash-es": "4.17.4",
|
||||
"@types/node": "12.20.15",
|
||||
"@typescript-eslint/eslint-plugin": "4.26.1",
|
||||
"@typescript-eslint/parser": "4.26.1",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.1",
|
||||
"@typescript-eslint/parser": "4.28.1",
|
||||
"autoprefixer": "10.2.6",
|
||||
"chroma-js": "2.1.2",
|
||||
"eslint": "7.28.0",
|
||||
"eslint": "7.29.0",
|
||||
"eslint-plugin-import": "2.23.4",
|
||||
"eslint-plugin-jsdoc": "35.2.0",
|
||||
"eslint-plugin-jsdoc": "35.4.1",
|
||||
"eslint-plugin-prefer-arrow": "1.2.3",
|
||||
"jasmine-core": "3.7.1",
|
||||
"karma": "6.3.4",
|
||||
@@ -83,8 +84,8 @@
|
||||
"karma-jasmine": "4.0.1",
|
||||
"karma-jasmine-html-reporter": "1.6.0",
|
||||
"lodash": "4.17.21",
|
||||
"postcss": "8.3.3",
|
||||
"tailwindcss": "2.1.4",
|
||||
"typescript": "4.2.4"
|
||||
"postcss": "8.3.5",
|
||||
"tailwindcss": "2.2.4",
|
||||
"typescript": "4.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,6 +341,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
|
||||
]).create(this._overlay);
|
||||
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// Destroy the player
|
||||
this._player.destroy();
|
||||
});
|
||||
|
||||
// Play the animation
|
||||
this._player.play();
|
||||
|
||||
@@ -373,6 +380,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
|
||||
// Once the animation is done...
|
||||
this._player.onDone(() => {
|
||||
|
||||
// Destroy the player
|
||||
this._player.destroy();
|
||||
|
||||
// If the backdrop still exists...
|
||||
if ( this._overlay )
|
||||
{
|
||||
|
||||
@@ -5,71 +5,83 @@
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
*ngIf="!item.link && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
|
||||
*ngIf="item.disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -77,11 +89,12 @@
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
@@ -90,24 +103,24 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@@ -1,59 +1,63 @@
|
||||
<div
|
||||
*ngIf="!child"
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
<ng-container *ngIf="!child">
|
||||
<div
|
||||
[ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
|
||||
'fuse-horizontal-navigation-menu-active-forced': item.active}"
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
[matMenuTriggerFor]="matMenu"
|
||||
(onMenuOpen)="triggerChangeDetection()"
|
||||
(onMenuClose)="triggerChangeDetection()"
|
||||
#trigger="matMenuTrigger">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<mat-menu
|
||||
class="fuse-horizontal-navigation-menu-panel"
|
||||
[overlapTrigger]="false"
|
||||
#matMenu="matMenu">
|
||||
|
||||
<ng-container *ngFor="let item of item.children">
|
||||
<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[disabled]="item.disabled"
|
||||
[matMenuTriggerFor]="branch.matMenu"
|
||||
mat-menu-item>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
[child]="true"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
#branch></fuse-horizontal-navigation-branch-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'divider'"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
mat-menu-item>
|
||||
<fuse-horizontal-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-divider-item>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -74,14 +78,16 @@
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item"
|
||||
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}">
|
||||
'fuse-horizontal-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-horizontal-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-horizontal-navigation-item-title-wrapper">
|
||||
@@ -90,25 +96,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-subtitle text-hint"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-horizontal-navigation-item-subtitle text-hint">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-horizontal-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-horizontal-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -81,4 +81,15 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,33 @@
|
||||
<div class="fuse-horizontal-navigation-wrapper">
|
||||
|
||||
<ng-container *ngFor="let item of navigation">
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-horizontal-navigation-basic-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Branch: aside, collapsable, group -->
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
<ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
|
||||
<fuse-horizontal-navigation-branch-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-branch-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-horizontal-navigation-spacer-item
|
||||
class="fuse-horizontal-navigation-menu-item"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-horizontal-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@ export interface FuseNavigationItem
|
||||
hidden?: (item: FuseNavigationItem) => boolean;
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
tooltip?: string;
|
||||
link?: string;
|
||||
externalLink?: boolean;
|
||||
target?:
|
||||
|
||||
@@ -7,14 +7,16 @@
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active': active,
|
||||
'fuse-vertical-navigation-item-disabled': item.disabled,
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}">
|
||||
'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -23,25 +25,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -57,35 +59,40 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -5,70 +5,84 @@
|
||||
[ngClass]="item.classes?.wrapper">
|
||||
|
||||
<!-- Item with an internal link -->
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link -->
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a function -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="!item.link && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="!item.link && item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an internal link and function -->
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && !item.externalLink && item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[routerLink]="[item.link]"
|
||||
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
|
||||
[routerLinkActiveOptions]="isActiveMatchOptions"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with an external link and function -->
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
|
||||
<a
|
||||
class="fuse-vertical-navigation-item"
|
||||
[href]="item.link"
|
||||
[target]="item.target || '_self'"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="item.function(item)">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</a>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item with a no link and no function -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
*ngIf="!item.link && !item.function && !item.disabled"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="!item.link && !item.function && !item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Item is disabled -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
|
||||
*ngIf="item.disabled">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
<ng-container *ngIf="item.disabled">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
|
||||
[matTooltip]="item.tooltip || ''">
|
||||
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -76,11 +90,12 @@
|
||||
<ng-template #itemTemplate>
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -89,24 +104,24 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@@ -6,14 +6,16 @@
|
||||
<div
|
||||
class="fuse-vertical-navigation-item"
|
||||
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
|
||||
[matTooltip]="item.tooltip || ''"
|
||||
(click)="toggleCollapsable()">
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -22,25 +24,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Arrow -->
|
||||
<mat-icon
|
||||
@@ -62,35 +64,40 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -7,11 +7,12 @@
|
||||
<div class="fuse-vertical-navigation-item">
|
||||
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
*ngIf="item.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
<ng-container *ngIf="item.icon">
|
||||
<mat-icon
|
||||
class="fuse-vertical-navigation-item-icon"
|
||||
[ngClass]="item.classes?.icon"
|
||||
[svgIcon]="item.icon"></mat-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title & Subtitle -->
|
||||
<div class="fuse-vertical-navigation-item-title-wrapper">
|
||||
@@ -20,25 +21,25 @@
|
||||
{{item.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-subtitle"
|
||||
*ngIf="item.subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="item.subtitle">
|
||||
<div class="fuse-vertical-navigation-item-subtitle">
|
||||
<span [ngClass]="item.classes?.subtitle">
|
||||
{{item.subtitle}}
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge"
|
||||
*ngIf="item.badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
<ng-container *ngIf="item.badge">
|
||||
<div class="fuse-vertical-navigation-item-badge">
|
||||
<div
|
||||
class="fuse-vertical-navigation-item-badge-content"
|
||||
[ngClass]="item.badge.classes">
|
||||
{{item.badge.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -50,35 +51,40 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -24,46 +24,52 @@
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
<fuse-vertical-navigation-aside-item
|
||||
*ngIf="item.type === 'aside'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[activeItemId]="activeAsideItemId"
|
||||
[autoCollapse]="autoCollapse"
|
||||
[skipChildren]="true"
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
|
||||
<ng-container *ngIf="item.type === 'aside'">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[activeItemId]="activeAsideItemId"
|
||||
[autoCollapse]="autoCollapse"
|
||||
[skipChildren]="true"
|
||||
(click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Basic -->
|
||||
<fuse-vertical-navigation-basic-item
|
||||
*ngIf="item.type === 'basic'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
<ng-container *ngIf="item.type === 'basic'">
|
||||
<fuse-vertical-navigation-basic-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-basic-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Collapsable -->
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
*ngIf="item.type === 'collapsable'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
<ng-container *ngIf="item.type === 'collapsable'">
|
||||
<fuse-vertical-navigation-collapsable-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Divider -->
|
||||
<fuse-vertical-navigation-divider-item
|
||||
*ngIf="item.type === 'divider'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
<ng-container *ngIf="item.type === 'divider'">
|
||||
<fuse-vertical-navigation-divider-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-divider-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Group -->
|
||||
<fuse-vertical-navigation-group-item
|
||||
*ngIf="item.type === 'group'"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
|
||||
<ng-container *ngIf="item.type === 'group'">
|
||||
<fuse-vertical-navigation-group-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Spacer -->
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
*ngIf="item.type === 'spacer'"
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
<ng-container *ngIf="item.type === 'spacer'">
|
||||
<fuse-vertical-navigation-spacer-item
|
||||
[item]="item"
|
||||
[name]="name"></fuse-vertical-navigation-spacer-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -84,31 +90,33 @@
|
||||
</div>
|
||||
|
||||
<!-- Aside -->
|
||||
<div
|
||||
class="fuse-vertical-navigation-aside-wrapper"
|
||||
*ngIf="activeAsideItemId"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
|
||||
[@fadeInLeft]="position === 'left'"
|
||||
[@fadeInRight]="position === 'right'"
|
||||
[@fadeOutLeft]="position === 'left'"
|
||||
[@fadeOutRight]="position === 'right'">
|
||||
<ng-container *ngIf="activeAsideItemId">
|
||||
<div
|
||||
class="fuse-vertical-navigation-aside-wrapper"
|
||||
fuseScrollbar
|
||||
[fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
|
||||
[@fadeInLeft]="position === 'left'"
|
||||
[@fadeInRight]="position === 'right'"
|
||||
[@fadeOutLeft]="position === 'left'"
|
||||
[@fadeOutRight]="position === 'right'">
|
||||
|
||||
<!-- Items -->
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
<!-- Items -->
|
||||
<ng-container *ngFor="let item of navigation; trackBy: trackByFn">
|
||||
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
<!-- Skip the hidden items -->
|
||||
<ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
|
||||
|
||||
<!-- Aside -->
|
||||
<fuse-vertical-navigation-aside-item
|
||||
*ngIf="item.type === 'aside' && item.id === activeAsideItemId"
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
|
||||
<!-- Aside -->
|
||||
<ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
|
||||
<fuse-vertical-navigation-aside-item
|
||||
[item]="item"
|
||||
[name]="name"
|
||||
[autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -374,6 +374,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Forcefully close the navigation and aside in case they are opened
|
||||
this.close();
|
||||
this.closeAside();
|
||||
|
||||
// Deregister the navigation component from the registry
|
||||
this._fuseNavigationService.deregisterComponent(this.name);
|
||||
|
||||
|
||||
@@ -136,11 +136,8 @@
|
||||
.mat-flat-button,
|
||||
.mat-raised-button,
|
||||
.mat-stroked-button {
|
||||
|
||||
.fuse-mat-rounded & {
|
||||
padding: 0 20px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
}
|
||||
|
||||
/* Target all buttons */
|
||||
@@ -334,6 +331,8 @@
|
||||
/* @ Button Toggle
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
.mat-button-toggle-group {
|
||||
border: none !important;
|
||||
@apply space-x-1;
|
||||
|
||||
&.mat-button-toggle-group-appearance-standard {
|
||||
|
||||
@@ -341,36 +340,27 @@
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Rounded design */
|
||||
.fuse-mat-rounded {
|
||||
|
||||
.mat-button-toggle-group {
|
||||
.mat-button-toggle {
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
@apply space-x-1;
|
||||
font-weight: 500;
|
||||
|
||||
.mat-button-toggle {
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
border: none !important;
|
||||
font-weight: 500;
|
||||
|
||||
&.mat-button-toggle-checked {
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
}
|
||||
&.mat-button-toggle-checked {
|
||||
|
||||
.mat-button-toggle-label-content {
|
||||
padding: 0 20px;
|
||||
@apply text-secondary;
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ripple {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.mat-button-toggle-label-content {
|
||||
padding: 0 20px;
|
||||
@apply text-secondary;
|
||||
}
|
||||
|
||||
.mat-ripple {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1329,62 +1319,55 @@
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
|
||||
.mat-tab-label-container {
|
||||
padding: 0 24px;
|
||||
|
||||
.mat-tab-list {
|
||||
|
||||
.mat-tab-labels {
|
||||
|
||||
.mat-tab-label {
|
||||
min-width: 0 !important;
|
||||
height: 40px !important;
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
@apply text-secondary;
|
||||
|
||||
&.mat-tab-label-active {
|
||||
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
|
||||
+ .mat-tab-label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mat-tab-label-content {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-body-content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-label {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Rounded design */
|
||||
.fuse-mat-rounded {
|
||||
|
||||
.mat-tab-group {
|
||||
|
||||
.mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
|
||||
.mat-tab-label-container {
|
||||
padding: 0 24px;
|
||||
|
||||
.mat-tab-list {
|
||||
|
||||
.mat-tab-labels {
|
||||
|
||||
.mat-tab-label {
|
||||
min-width: 0 !important;
|
||||
height: 40px !important;
|
||||
padding: 0 20px !important;
|
||||
border-radius: 9999px !important;
|
||||
@apply text-secondary;
|
||||
|
||||
&.mat-tab-label-active {
|
||||
@apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
|
||||
@apply text-default #{'!important'};
|
||||
}
|
||||
|
||||
+ .mat-tab-label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mat-tab-label-content {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-tab-body-content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
/* @ Textarea
|
||||
/* ----------------------------------------------------------------------------------------------------- */
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Version } from '@fuse/version/version';
|
||||
|
||||
export const FUSE_VERSION = new Version('13.1.0').full;
|
||||
export const FUSE_VERSION = new Version('13.2.0').full;
|
||||
|
||||
@@ -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,132 +73,7 @@ export const appRoutes: Route[] = [
|
||||
initialData: InitialDataResolver,
|
||||
},
|
||||
children : [
|
||||
|
||||
// Dashboards
|
||||
{path: 'dashboards', children: [
|
||||
{path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
|
||||
{path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
|
||||
]},
|
||||
|
||||
// Apps
|
||||
{path: 'apps', children: [
|
||||
{path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.module').then(m => m.AcademyModule)},
|
||||
{path: 'calendar', loadChildren: () => import('app/modules/admin/apps/calendar/calendar.module').then(m => m.CalendarModule)},
|
||||
{path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.module').then(m => m.ChatModule)},
|
||||
{path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
|
||||
{path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
|
||||
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
|
||||
{path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
|
||||
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
|
||||
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
|
||||
{path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
|
||||
{path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
|
||||
]},
|
||||
|
||||
// Pages
|
||||
{path: 'pages', children: [
|
||||
|
||||
// Activities
|
||||
{path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.module').then(m => m.ActivitiesModule)},
|
||||
|
||||
// Authentication
|
||||
{path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
|
||||
|
||||
// Coming soon
|
||||
{path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
|
||||
|
||||
// Error
|
||||
{path: 'error', children: [
|
||||
{path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
|
||||
]},
|
||||
|
||||
// Invoice
|
||||
{path: 'invoice', children: [
|
||||
{path: 'printable', children: [
|
||||
{path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
|
||||
]}
|
||||
]},
|
||||
|
||||
// Maintenance
|
||||
{path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
|
||||
|
||||
// Pricing
|
||||
{path: 'pricing', children: [
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
|
||||
{path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
|
||||
{path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
|
||||
{path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
|
||||
]},
|
||||
|
||||
// Profile
|
||||
{path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
|
||||
|
||||
// Settings
|
||||
{path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
|
||||
]},
|
||||
|
||||
// User interface
|
||||
{path: 'ui', children: [
|
||||
|
||||
// Angular Material
|
||||
{path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
|
||||
|
||||
// TailwindCSS
|
||||
{path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
|
||||
|
||||
// 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)},
|
||||
|
||||
// Datatable
|
||||
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
|
||||
|
||||
// Forms
|
||||
{path: 'forms', children: [
|
||||
{path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
|
||||
{path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
|
||||
{path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
|
||||
]},
|
||||
|
||||
// Icons
|
||||
{path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
|
||||
|
||||
// Page layouts
|
||||
{path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
|
||||
|
||||
// Typography
|
||||
{path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
|
||||
]},
|
||||
|
||||
// Documentation
|
||||
{path: 'docs', children: [
|
||||
|
||||
// Changelog
|
||||
{path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
|
||||
|
||||
// Guides
|
||||
{path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)},
|
||||
|
||||
// Core features
|
||||
{path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
|
||||
|
||||
// Other components
|
||||
{path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
|
||||
]},
|
||||
|
||||
// 404 & Catch all
|
||||
{path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
|
||||
{path: '**', redirectTo: '404-not-found'}
|
||||
{path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@@ -27,6 +27,6 @@ export class TranslocoHttpLoader implements TranslocoLoader
|
||||
*/
|
||||
getTranslation(lang: string): Observable<Translation>
|
||||
{
|
||||
return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
|
||||
return this._httpClient.get<Translation>(`./assets/i18n/${lang}.json`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -167,7 +167,7 @@ export class MessagesComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition()
|
||||
.withLockedPosition(true)
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -167,7 +167,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition()
|
||||
.withLockedPosition(true)
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -221,7 +221,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement)
|
||||
.withLockedPosition()
|
||||
.withLockedPosition(true)
|
||||
.withPush(true)
|
||||
.withPositions([
|
||||
{
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<fuse-drawer
|
||||
class="w-100 min-w-100"
|
||||
class="w-screen min-w-screen sm:w-100 sm:min-w-100"
|
||||
fixed
|
||||
transparentOverlay
|
||||
[mode]="'over'"
|
||||
@@ -74,17 +74,17 @@
|
||||
|
||||
<!-- Theme -->
|
||||
<div class="text-md font-semibold text-secondary">THEME</div>
|
||||
<div class="grid grid-cols-3 gap-3 mt-6">
|
||||
<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 px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
|
||||
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="w-4 h-4 rounded-full"
|
||||
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"
|
||||
class="ml-2.5 font-medium leading-5 truncate"
|
||||
[class.text-secondary]="config.theme !== theme[0]">
|
||||
{{theme[0] | titlecase}}
|
||||
</div>
|
||||
|
||||
@@ -62,9 +62,9 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -45,9 +45,9 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -51,9 +51,9 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -54,9 +54,9 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -35,9 +35,9 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -65,9 +65,9 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -39,9 +39,9 @@
|
||||
</button>
|
||||
</div>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -44,9 +44,9 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
@@ -31,9 +31,9 @@
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
<!-- Components -->
|
||||
<div class="flex items-center pl-2 ml-auto space-x-2">
|
||||
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
|
||||
<languages></languages>
|
||||
<fuse-fullscreen></fuse-fullscreen>
|
||||
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
|
||||
<search [appearance]="'bar'"></search>
|
||||
<shortcuts></shortcuts>
|
||||
<messages></messages>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'academy',
|
||||
templateUrl : './academy.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { academyRoutes } from 'app/modules/admin/apps/academy/academy.routing';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AcademyComponent,
|
||||
AcademyDetailsComponent,
|
||||
AcademyListComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule.forChild(academyRoutes),
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule,
|
||||
MatTooltipModule,
|
||||
FuseFindByKeyPipeModule,
|
||||
SharedModule,
|
||||
MatTabsModule
|
||||
]
|
||||
})
|
||||
export class AcademyModule
|
||||
{
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCategoriesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Category[]>
|
||||
{
|
||||
return this._academyService.getCategories();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCoursesResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _academyService: AcademyService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course[]>
|
||||
{
|
||||
return this._academyService.getCourses();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyCourseResolver implements Resolve<any>
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _academyService: AcademyService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course>
|
||||
{
|
||||
return this._academyService.getCourseById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested task is not available
|
||||
catchError((error) => {
|
||||
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
this._router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyCategoriesResolver, AcademyCourseResolver, AcademyCoursesResolver } from 'app/modules/admin/apps/academy/academy.resolvers';
|
||||
|
||||
export const academyRoutes: Route[] = [
|
||||
{
|
||||
path : '',
|
||||
component: AcademyComponent,
|
||||
resolve : {
|
||||
categories: AcademyCategoriesResolver
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: AcademyListComponent,
|
||||
resolve : {
|
||||
courses: AcademyCoursesResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: AcademyDetailsComponent,
|
||||
resolve : {
|
||||
course: AcademyCourseResolver
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -1,105 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
|
||||
import { map, switchMap, tap } from 'rxjs/operators';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AcademyService
|
||||
{
|
||||
// Private
|
||||
private _categories: BehaviorSubject<Category[] | null> = new BehaviorSubject(null);
|
||||
private _course: BehaviorSubject<Course | null> = new BehaviorSubject(null);
|
||||
private _courses: BehaviorSubject<Course[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for categories
|
||||
*/
|
||||
get categories$(): Observable<Category[]>
|
||||
{
|
||||
return this._categories.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for courses
|
||||
*/
|
||||
get courses$(): Observable<Course[]>
|
||||
{
|
||||
return this._courses.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for course
|
||||
*/
|
||||
get course$(): Observable<Course>
|
||||
{
|
||||
return this._course.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get categories
|
||||
*/
|
||||
getCategories(): Observable<Category[]>
|
||||
{
|
||||
return this._httpClient.get<Category[]>('api/apps/academy/categories').pipe(
|
||||
tap((response: any) => {
|
||||
this._categories.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get courses
|
||||
*/
|
||||
getCourses(): Observable<Course[]>
|
||||
{
|
||||
return this._httpClient.get<Course[]>('api/apps/academy/courses').pipe(
|
||||
tap((response: any) => {
|
||||
this._courses.next(response);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get course by id
|
||||
*/
|
||||
getCourseById(id: string): Observable<Course>
|
||||
{
|
||||
return this._httpClient.get<Course>('api/apps/academy/courses/course', {params: {id}}).pipe(
|
||||
map((course) => {
|
||||
|
||||
// Update the course
|
||||
this._course.next(course);
|
||||
|
||||
// Return the course
|
||||
return course;
|
||||
}),
|
||||
switchMap((course) => {
|
||||
|
||||
if ( !course )
|
||||
{
|
||||
return throwError('Could not found course with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(course);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
export interface Category
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
export interface Course
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
slug?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
duration?: number;
|
||||
steps?: {
|
||||
order?: number;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
}[];
|
||||
totalSteps?: number;
|
||||
updatedAt?: number;
|
||||
featured?: boolean;
|
||||
progress?: {
|
||||
currentStep?: number;
|
||||
completed?: number;
|
||||
};
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
|
||||
|
||||
<mat-drawer-container class="flex-auto h-full">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-90 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#matDrawer>
|
||||
<div class="flex flex-col items-start p-8 border-b">
|
||||
<!-- Back to courses -->
|
||||
<a
|
||||
class="inline-flex items-center leading-6 text-primary hover:underline"
|
||||
[routerLink]="['..']">
|
||||
<span class="inline-flex items-center">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:arrow-sm-left'"></mat-icon>
|
||||
<span class="ml-1.5 font-medium leading-5">Back to courses</span>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Course category -->
|
||||
<ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
|
||||
<div
|
||||
class="mt-7 py-0.5 px-3 rounded-full text-sm font-semibold"
|
||||
[ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
|
||||
'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
|
||||
'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
|
||||
'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
|
||||
{{category.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Course title & description -->
|
||||
<div class="mt-3 text-2xl font-semibold">{{course.title}}</div>
|
||||
<div class="text-secondary">{{course.description}}</div>
|
||||
<!-- Course time -->
|
||||
<div class="mt-6 flex items-center leading-5 text-md text-secondary">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:clock'"></mat-icon>
|
||||
<div class="ml-1.5">{{course.duration}} minutes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<div class="py-2 px-8">
|
||||
<ol>
|
||||
<ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
|
||||
<li
|
||||
class="relative group py-6"
|
||||
[class.current-step]="step.order === currentStep">
|
||||
<ng-container *ngIf="!last">
|
||||
<div
|
||||
class="absolute top-6 left-4 w-0.5 h-full -ml-px"
|
||||
[ngClass]="{'bg-primary': step.order < currentStep,
|
||||
'bg-gray-300 dark:bg-gray-600': step.order >= currentStep}"></div>
|
||||
</ng-container>
|
||||
<div
|
||||
class="relative flex items-start cursor-pointer"
|
||||
(click)="goToStep(step.order)">
|
||||
<div
|
||||
class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset ring-transparent bg-card dark:bg-default"
|
||||
[ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800': step.order < currentStep,
|
||||
'ring-primary': step.order === currentStep,
|
||||
'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
|
||||
<!-- Check icon, show if the step is completed -->
|
||||
<ng-container *ngIf="step.order < currentStep">
|
||||
<mat-icon
|
||||
class="icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is the current step -->
|
||||
<ng-container *ngIf="step.order === currentStep">
|
||||
<div class="text-md font-semibold text-primary dark:text-primary-500">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
<!-- Step order, show if the step is not completed -->
|
||||
<ng-container *ngIf="step.order > currentStep">
|
||||
<div class="text-md font-semibold text-hint group-hover:text-secondary">{{step.order + 1}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="font-medium leading-4">{{step.title}}</div>
|
||||
<div class="mt-1.5 text-md leading-4 text-secondary">{{step.subtitle}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
|
||||
<!-- Title & Actions -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[routerLink]="['..']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
|
||||
</button>
|
||||
<h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
|
||||
{{course.title}}
|
||||
</h2>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="hidden lg:block flex-0 h-0.5 w-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
|
||||
<!-- Main -->
|
||||
<div
|
||||
class="flex-auto overflow-y-auto"
|
||||
cdkScrollable>
|
||||
|
||||
<!-- Steps -->
|
||||
<mat-tab-group
|
||||
class="fuse-mat-no-header"
|
||||
[animationDuration]="'200'"
|
||||
#courseSteps>
|
||||
<ng-container *ngFor="let step of course.steps; trackBy: trackByFn">
|
||||
<mat-tab>
|
||||
<ng-template matTabContent>
|
||||
<div
|
||||
class="prose prose-sm max-w-3xl mx-auto sm:my-2 lg:mt-4 p-6 sm:p-10 sm:py-12 rounded-2xl shadow overflow-hidden bg-card"
|
||||
[innerHTML]="step.content"></div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</ng-container>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- Navigation - Desktop -->
|
||||
<div class="z-10 sticky hidden lg:flex bottom-4 p-4">
|
||||
<div class="flex items-center justify-center mx-auto p-2 rounded-full shadow-lg bg-primary">
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToPreviousStep()">
|
||||
<mat-icon
|
||||
class="mr-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
<span class="mr-1">Prev</span>
|
||||
</button>
|
||||
<div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<button
|
||||
class="flex-0"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="goToNextStep()">
|
||||
<span class="ml-1">Next</span>
|
||||
<mat-icon
|
||||
class="ml-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Progress & Navigation - Mobile -->
|
||||
<div class="lg:hidden flex items-center p-4 border-t bg-card">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="matDrawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:view-list'"></mat-icon>
|
||||
</button>
|
||||
<div class="flex items-center justify-center ml-1 lg:ml-2 font-medium leading-5">
|
||||
<span>{{currentStep + 1}}</span>
|
||||
<span class="mx-0.5 text-hint">/</span>
|
||||
<span>{{course.totalSteps}}</span>
|
||||
</div>
|
||||
<mat-progress-bar
|
||||
class="flex-auto ml-6 rounded-full"
|
||||
[value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
|
||||
<button
|
||||
class="ml-4"
|
||||
mat-icon-button
|
||||
(click)="goToPreviousStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-0.5"
|
||||
mat-icon-button
|
||||
(click)="goToNextStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@@ -1,204 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { MatTabGroup } from '@angular/material/tabs';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AcademyDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('courseSteps', {static: true}) courseSteps: MatTabGroup;
|
||||
categories: Category[];
|
||||
course: Course;
|
||||
currentStep: number = 0;
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private _document: Document,
|
||||
private _academyService: AcademyService,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _elementRef: ElementRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the categories
|
||||
this._academyService.categories$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((categories: Category[]) => {
|
||||
|
||||
// Get the categories
|
||||
this.categories = categories;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the course
|
||||
this._academyService.course$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((course: Course) => {
|
||||
|
||||
// Get the course
|
||||
this.course = course;
|
||||
|
||||
// Go to step
|
||||
this.goToStep(course.progress.currentStep);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Set the drawerMode and drawerOpened
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Go to given step
|
||||
*
|
||||
* @param step
|
||||
*/
|
||||
goToStep(step: number): void
|
||||
{
|
||||
// Set the current step
|
||||
this.currentStep = step;
|
||||
|
||||
// Go to the step
|
||||
this.courseSteps.selectedIndex = this.currentStep;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous step
|
||||
*/
|
||||
goToPreviousStep(): void
|
||||
{
|
||||
// Return if we already on the first step
|
||||
if ( this.currentStep === 0 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep - 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next step
|
||||
*/
|
||||
goToNextStep(): void
|
||||
{
|
||||
// Return if we already on the last step
|
||||
if ( this.currentStep === this.course.totalSteps - 1 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Go to step
|
||||
this.goToStep(this.currentStep + 1);
|
||||
|
||||
// Scroll the current step selector from sidenav into view
|
||||
this._scrollCurrentStepElementIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Scrolls the current step element from
|
||||
* sidenav into the view. This only happens when
|
||||
* previous/next buttons pressed as we don't want
|
||||
* to change the scroll position of the sidebar
|
||||
* when the user actually clicks around the sidebar.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _scrollCurrentStepElementIntoView(): void
|
||||
{
|
||||
// Wrap everything into setTimeout so we can make sure that the 'current-step' class points to correct element
|
||||
setTimeout(() => {
|
||||
|
||||
// Get the current step element and scroll it into view
|
||||
const currentStepElement = this._document.getElementsByClassName('current-step')[0];
|
||||
if ( currentStepElement )
|
||||
{
|
||||
currentStepElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block : 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
{
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -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);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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'
|
||||
];
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
{
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
export interface Profile
|
||||
{
|
||||
id?: string;
|
||||
name?: string;
|
||||
email?: string;
|
||||
avatar?: string;
|
||||
about?: string;
|
||||
}
|
||||
|
||||
export interface Contact
|
||||
{
|
||||
id?: string;
|
||||
avatar?: string;
|
||||
name?: string;
|
||||
about?: string;
|
||||
details?: {
|
||||
emails?: {
|
||||
email?: string;
|
||||
label?: string;
|
||||
}[];
|
||||
phoneNumbers?: {
|
||||
country?: string;
|
||||
phoneNumber?: string;
|
||||
label?: string;
|
||||
}[];
|
||||
title?: string;
|
||||
company?: string;
|
||||
birthday?: string;
|
||||
address?: string;
|
||||
};
|
||||
attachments?: {
|
||||
media?: any[];
|
||||
docs?: any[];
|
||||
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;
|
||||
}[];
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@@ -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()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
{
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -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;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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">•</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">•</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>
|
||||
@@ -1,700 +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 { 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 _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
|
||||
{
|
||||
// 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()
|
||||
.withViewportMargin(64)
|
||||
.withLockedPosition()
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -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 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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
{
|
||||
}
|
||||
@@ -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]
|
||||
}
|
||||
]
|
||||
}
|
||||
]*/
|
||||
}
|
||||
];
|
||||
@@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@@ -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()
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
})
|
||||
))
|
||||
))
|
||||
);
|
||||
}*/
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,495 +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 min-w-50">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_outline: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 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">
|
||||
<!-- 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>
|
||||
@@ -1,570 +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 { 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 _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
|
||||
{
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -1,91 +0,0 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawerToggleResult } from '@angular/material/sidenav';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class FileManagerDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
item: Item;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fileManagerListComponent: FileManagerListComponent,
|
||||
private _fileManagerService: FileManagerService
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Open the drawer
|
||||
this._fileManagerListComponent.matDrawer.open();
|
||||
|
||||
// Get the item
|
||||
this._fileManagerService.item$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((item: Item) => {
|
||||
|
||||
// Open the drawer in case it is closed
|
||||
this._fileManagerListComponent.matDrawer.open();
|
||||
|
||||
// Get the item
|
||||
this.item = item;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
closeDrawer(): Promise<MatDrawerToggleResult>
|
||||
{
|
||||
return this._fileManagerListComponent.matDrawer.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user