mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-10 10:31:37 +00:00
Compare commits
65 Commits
demo
...
v19.1.0-st
| Author | SHA1 | Date | |
|---|---|---|---|
|
5a661aa4e5 | ||
|
|
27c7da18d8 | ||
|
|
4284702b8a | ||
|
|
2d7ac981ba | ||
|
|
1025d59d9b | ||
|
|
5a7392cbd1 | ||
|
|
e1989ffd64 | ||
|
|
5faab90a7b | ||
|
|
104a1ceffb | ||
|
|
ce0cce00d9 | ||
|
|
41bd49d45d | ||
|
|
042979269e | ||
|
|
b294672452 | ||
|
|
db6fcc208b | ||
|
|
36403c8ebb | ||
|
|
2a8586ce45 | ||
|
|
d5ec5a6fcd | ||
|
|
8e513ccf1e | ||
|
4430754020 | ||
|
|
9d93a2b060 | ||
|
|
38a4c392fe | ||
|
|
d9dee128de | ||
|
|
b84fb68a47 | ||
|
|
3d6714008a | ||
|
|
ea954a75de | ||
|
|
4b37f2304a | ||
|
|
82244fd40e | ||
|
|
c5433cb917 | ||
|
|
cf5f13d78e | ||
|
|
ef85907d1b | ||
|
|
cafc3188cf | ||
|
|
6381362326 | ||
|
|
e1942f46fd | ||
|
|
ce656430c8 | ||
|
|
c93b1ce232 | ||
|
|
b874b37db2 | ||
|
|
4287361a09 | ||
|
|
4f19eb6171 | ||
|
|
cd13f9d9a4 | ||
|
|
db8c52f093 | ||
|
|
2189232273 | ||
|
|
36b89e75db | ||
|
|
8c2ff122b2 | ||
|
|
b2cb512b0e | ||
|
|
21652570c2 | ||
|
|
90891eb201 | ||
|
|
6c7201b77a | ||
|
|
90f869e7b9 | ||
|
|
2d2db97416 | ||
|
|
5daa2260e6 | ||
|
|
af984fcba1 | ||
|
|
97d3662417 | ||
|
|
d897a244c8 | ||
|
|
d146a92c79 | ||
|
|
27b6858b76 | ||
|
|
fcfba4c9e4 | ||
|
|
40894e0aa3 | ||
|
|
8dcf21cb1a | ||
|
|
d917f03883 | ||
|
|
0f2ddbda83 | ||
|
|
fa0d74504b | ||
|
|
ad2b19a07a | ||
|
|
4bf11591a2 | ||
|
|
f45a605b4e | ||
|
|
c150a8902c |
@ -9,15 +9,15 @@ import { LayoutComponent } from 'app/layout/layout.component';
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
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 +74,7 @@ export const appRoutes: Route[] = [
|
||||
initialData: initialDataResolver
|
||||
},
|
||||
children: [
|
||||
|
||||
// Dashboards
|
||||
{path: 'dashboards', children: [
|
||||
{path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.routes')},
|
||||
{path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.routes')},
|
||||
{path: 'finance', loadChildren: () => import('app/modules/admin/dashboards/finance/finance.routes')},
|
||||
{path: 'crypto', loadChildren: () => import('app/modules/admin/dashboards/crypto/crypto.routes')},
|
||||
]},
|
||||
|
||||
// Apps
|
||||
{path: 'apps', children: [
|
||||
{path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.routes')},
|
||||
{path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.routes')},
|
||||
{path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.routes')},
|
||||
{path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.routes')},
|
||||
{path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.routes')},
|
||||
{path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.routes')},
|
||||
{path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.routes')},
|
||||
{path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.routes')},
|
||||
{path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.routes')},
|
||||
{path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.routes')},
|
||||
]},
|
||||
|
||||
// Pages
|
||||
{path: 'pages', children: [
|
||||
|
||||
// Activities
|
||||
{path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.routes')},
|
||||
|
||||
// Authentication
|
||||
{path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.routes')},
|
||||
|
||||
// Coming Soon
|
||||
{path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.routes')},
|
||||
|
||||
// Error
|
||||
{path: 'error', children: [
|
||||
{path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.routes')},
|
||||
{path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.routes')}
|
||||
]},
|
||||
|
||||
// Invoice
|
||||
{path: 'invoice', children: [
|
||||
{path: 'printable', children: [
|
||||
{path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.routes')},
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.routes')}
|
||||
]}
|
||||
]},
|
||||
|
||||
// Maintenance
|
||||
{path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.routes')},
|
||||
|
||||
// Pricing
|
||||
{path: 'pricing', children: [
|
||||
{path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.routes')},
|
||||
{path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.routes')},
|
||||
{path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.routes')},
|
||||
{path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.routes')}
|
||||
]},
|
||||
|
||||
// Profile
|
||||
{path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.routes')},
|
||||
|
||||
// Settings
|
||||
{path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.routes')},
|
||||
]},
|
||||
|
||||
// User Interface
|
||||
{path: 'ui', children: [
|
||||
|
||||
// Material Components
|
||||
{path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.routes')},
|
||||
|
||||
// Fuse Components
|
||||
{path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.routes')},
|
||||
|
||||
// Other Components
|
||||
{path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.routes')},
|
||||
|
||||
// TailwindCSS
|
||||
{path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.routes')},
|
||||
|
||||
// Advanced Search
|
||||
{path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.routes')},
|
||||
|
||||
// Animations
|
||||
{path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.routes')},
|
||||
|
||||
// Cards
|
||||
{path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.routes')},
|
||||
|
||||
// Colors
|
||||
{path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.routes')},
|
||||
|
||||
// Confirmation Dialog
|
||||
{path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.routes')},
|
||||
|
||||
// Datatable
|
||||
{path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.routes')},
|
||||
|
||||
// Forms
|
||||
{path: 'forms', loadChildren: () => import('app/modules/admin/ui/forms/forms.routes')},
|
||||
|
||||
// Icons
|
||||
{path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.routes')},
|
||||
|
||||
// Page Layouts
|
||||
{path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.routes')},
|
||||
|
||||
// Typography
|
||||
{path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.routes')}
|
||||
]},
|
||||
|
||||
// Documentation
|
||||
{path: 'docs', children: [
|
||||
|
||||
// Changelog
|
||||
{path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.routes')},
|
||||
|
||||
// Guides
|
||||
{path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.routes')}
|
||||
]},
|
||||
|
||||
// 404 & Catch all
|
||||
{path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.routes')},
|
||||
{path: '**', redirectTo: '404-not-found'}
|
||||
{path: 'example', loadChildren: () => import('app/modules/admin/example/example.routes')},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'academy',
|
||||
templateUrl : './academy.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class AcademyComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, Routes } from '@angular/router';
|
||||
import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
|
||||
import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
|
||||
import { catchError, throwError } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Course resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const courseResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const academyService = inject(AcademyService);
|
||||
const router = inject(Router);
|
||||
|
||||
return academyService.getCourseById(route.paramMap.get('id')).pipe(
|
||||
// Error here means the requested course 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
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: AcademyComponent,
|
||||
resolve : {
|
||||
categories: () => inject(AcademyService).getCategories(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: AcademyListComponent,
|
||||
resolve : {
|
||||
courses: () => inject(AcademyService).getCourses(),
|
||||
},
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: AcademyDetailsComponent,
|
||||
resolve : {
|
||||
course: courseResolver,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,104 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs';
|
||||
|
||||
@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,205 +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-small-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 bg-card dark:bg-default"
|
||||
[ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800 ring-transparent': 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 -->
|
||||
<a
|
||||
mat-icon-button
|
||||
[routerLink]="['..']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-small-left'"></mat-icon>
|
||||
</a>
|
||||
<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()">
|
||||
<span class="inline-flex items-center">
|
||||
<mat-icon
|
||||
class="mr-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="mr-1">Prev</span>
|
||||
</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="inline-flex items-center">
|
||||
<span class="ml-1">Next</span>
|
||||
<mat-icon
|
||||
class="ml-2"
|
||||
[svgIcon]="'heroicons_outline:arrow-long-right'"></mat-icon>
|
||||
</span>
|
||||
</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:bars-4'"></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-long-left'"></mat-icon>
|
||||
</button>
|
||||
<button
|
||||
class="ml-0.5"
|
||||
mat-icon-button
|
||||
(click)="goToNextStep()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,212 +0,0 @@
|
||||
import { CdkScrollable } from '@angular/cdk/scrolling';
|
||||
import { DOCUMENT, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, RouterLink, MatIconModule, NgIf, NgClass, NgFor, MatButtonModule, MatProgressBarModule, CdkScrollable, MatTabsModule, FuseFindByKeyPipe],
|
||||
})
|
||||
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(null);
|
||||
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,198 +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="w-full sm:w-36"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></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:check-badge'"
|
||||
[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">
|
||||
<a
|
||||
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-small-right'"></mat-icon>
|
||||
</span>
|
||||
</a>
|
||||
</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-24"
|
||||
[svgIcon]="'heroicons_outline:document-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,170 +0,0 @@
|
||||
import { CdkScrollable } from '@angular/cdk/scrolling';
|
||||
import { I18nPluralPipe, NgClass, NgFor, NgIf, PercentPipe } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
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 { MatSelectChange, MatSelectModule } from '@angular/material/select';
|
||||
import { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
|
||||
import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
|
||||
import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
|
||||
import { BehaviorSubject, combineLatest, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'academy-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [CdkScrollable, MatFormFieldModule, MatSelectModule, MatOptionModule, NgFor, MatIconModule, MatInputModule, MatSlideToggleModule, NgIf, NgClass, MatTooltipModule, MatProgressBarModule, MatButtonModule, RouterLink, FuseFindByKeyPipe, PercentPipe, I18nPluralPipe],
|
||||
})
|
||||
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(null);
|
||||
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,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,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'chat',
|
||||
templateUrl : './chat.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class ChatComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, Routes } from '@angular/router';
|
||||
import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
|
||||
import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
|
||||
import { EmptyConversationComponent } from 'app/modules/admin/apps/chat/empty-conversation/empty-conversation.component';
|
||||
import { catchError, throwError } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Conversation resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const conversationResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const chatService = inject(ChatService);
|
||||
const router = inject(Router);
|
||||
|
||||
return 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
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: ChatComponent,
|
||||
resolve : {
|
||||
chats : () => inject(ChatService).getChats(),
|
||||
contacts: () => inject(ChatService).getContacts(),
|
||||
profile : () => inject(ChatService).getProfile(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: ChatsComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: EmptyConversationComponent,
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: ConversationComponent,
|
||||
resolve : {
|
||||
conversation: conversationResolver,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,203 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Chat, Contact, Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@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:ellipsis-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-bubble-left-right'"></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-box'"></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-8-tooth'"></mat-icon>
|
||||
Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search -->
|
||||
<div class="mt-4">
|
||||
<mat-form-field
|
||||
class="fuse-mat-rounded fuse-mat-dense w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></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">
|
||||
<a
|
||||
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:speaker-x-mark'"></mat-icon>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</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]="'heroicons_outline:chat-bubble-oval-left-ellipsis'"></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,155 +0,0 @@
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
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 { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { Chat, Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { NewChatComponent } from 'app/modules/admin/apps/chat/new-chat/new-chat.component';
|
||||
import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-chats',
|
||||
templateUrl : './chats.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, NgIf, NewChatComponent, ProfileComponent, MatButtonModule, MatIconModule, MatMenuModule, MatFormFieldModule, MatInputModule, NgFor, NgClass, RouterLink, RouterOutlet],
|
||||
})
|
||||
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(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Reset the chat
|
||||
this._chatService.resetChat();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ 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-mark'"></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,27 +0,0 @@
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-contact-info',
|
||||
templateUrl : './contact-info.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, NgIf, NgFor],
|
||||
})
|
||||
export class ContactInfoComponent
|
||||
{
|
||||
@Input() chat: Chat;
|
||||
@Input() drawer: MatDrawer;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,213 +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-long-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:ellipsis-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:speaker-x-mark'"></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 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"
|
||||
[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:face-smile'"></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-rounded fuse-mat-bold w-full ml-4"
|
||||
subscriptSizing="dynamic">
|
||||
<textarea
|
||||
matInput
|
||||
cdkTextareaAutosize
|
||||
#messageInput></textarea>
|
||||
</mat-form-field>
|
||||
<div class="flex items-center h-11 my-px ml-4">
|
||||
<button
|
||||
mat-icon-button>
|
||||
<mat-icon [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]="'heroicons_outline:chat-bubble-oval-left-ellipsis'"></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,180 +0,0 @@
|
||||
import { TextFieldModule } from '@angular/cdk/text-field';
|
||||
import { DatePipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
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 { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { Chat } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { ContactInfoComponent } from 'app/modules/admin/apps/chat/contact-info/contact-info.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-conversation',
|
||||
templateUrl : './conversation.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatSidenavModule, ContactInfoComponent, MatButtonModule, RouterLink, MatIconModule, MatMenuModule, NgFor, NgClass, NgTemplateOutlet, MatFormFieldModule, MatInputModule, TextFieldModule, DatePipe],
|
||||
})
|
||||
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(null);
|
||||
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,11 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<!-- Select chat or start new -->
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:chat-bubble-oval-left-ellipsis'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-empty-conversation',
|
||||
templateUrl : './empty-conversation.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatIconModule],
|
||||
})
|
||||
export class EmptyConversationComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -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-long-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,73 +0,0 @@
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDrawer } from '@angular/material/sidenav';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { Contact } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-new-chat',
|
||||
templateUrl : './new-chat.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, NgIf, NgFor],
|
||||
})
|
||||
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(null);
|
||||
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-long-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:envelope'"></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,61 +0,0 @@
|
||||
import { NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
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 { MatDrawer } from '@angular/material/sidenav';
|
||||
import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
|
||||
import { Profile } from 'app/modules/admin/apps/chat/chat.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-profile',
|
||||
templateUrl : './profile.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, NgIf, MatFormFieldModule, MatInputModule, FormsModule],
|
||||
})
|
||||
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(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts',
|
||||
templateUrl : './contacts.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class ContactsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, Routes } from '@angular/router';
|
||||
import { ContactsComponent } from 'app/modules/admin/apps/contacts/contacts.component';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
import { ContactsDetailsComponent } from 'app/modules/admin/apps/contacts/details/details.component';
|
||||
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
|
||||
import { catchError, throwError } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Contact resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const contactResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const contactsService = inject(ContactsService);
|
||||
const router = inject(Router);
|
||||
|
||||
return 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
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Can deactivate contacts details
|
||||
*
|
||||
* @param component
|
||||
* @param currentRoute
|
||||
* @param currentState
|
||||
* @param nextState
|
||||
*/
|
||||
const canDeactivateContactsDetails = (
|
||||
component: ContactsDetailsComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
currentState: RouterStateSnapshot,
|
||||
nextState: RouterStateSnapshot) =>
|
||||
{
|
||||
// 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, close the drawer first, and then navigate
|
||||
return component.closeDrawer().then(() => true);
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: ContactsComponent,
|
||||
resolve : {
|
||||
tags: () => inject(ContactsService).getTags(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: ContactsListComponent,
|
||||
resolve : {
|
||||
contacts : () => inject(ContactsService).getContacts(),
|
||||
countries: () => inject(ContactsService).getCountries(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : ':id',
|
||||
component : ContactsDetailsComponent,
|
||||
resolve : {
|
||||
contact : contactResolver,
|
||||
countries: () => inject(ContactsService).getCountries(),
|
||||
},
|
||||
canDeactivate: [canDeactivateContactsDetails],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,391 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@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,665 +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">
|
||||
<a
|
||||
mat-icon-button
|
||||
[matTooltip]="'Close'"
|
||||
[routerLink]="['../']">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</a>
|
||||
</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-square'"></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:building-office-2'"></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:envelope'"></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:map-pin'"></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:bars-3-bottom-left'"></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">
|
||||
<a
|
||||
mat-icon-button
|
||||
[matTooltip]="'Close'"
|
||||
[routerLink]="['../']">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</a>
|
||||
</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="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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-square'"></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:magnifying-glass'"></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-square'"></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 pl-1 pr-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>{{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 w-full mx-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Company</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:building-office-2'"></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="flex-auto"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label *ngIf="first">Email</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:envelope'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="email.get('email')"
|
||||
[placeholder]="'Email address'"
|
||||
[spellcheck]="false">
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="flex-auto"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Address</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:map-pin'"></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'address'"
|
||||
[placeholder]="'Address'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Birthday -->
|
||||
<div class="mt-8">
|
||||
<mat-form-field
|
||||
class="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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="w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-label>Notes</mat-label>
|
||||
<mat-icon
|
||||
matPrefix
|
||||
class="hidden sm:flex icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:bars-3-bottom-left'"></mat-icon>
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'notes'"
|
||||
[placeholder]="'Notes'"
|
||||
[rows]="5"
|
||||
[spellcheck]="false"
|
||||
cdkTextareaAutosize></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,740 +0,0 @@
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { TextFieldModule } from '@angular/cdk/text-field';
|
||||
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatOptionModule, MatRippleModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatDrawerToggleResult } from '@angular/material/sidenav';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
|
||||
import { debounceTime, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, MatTooltipModule, RouterLink, MatIconModule, NgFor, FormsModule, ReactiveFormsModule, MatRippleModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, NgClass, MatSelectModule, MatOptionModule, MatDatepickerModule, TextFieldModule, FuseFindByKeyPipe, DatePipe],
|
||||
})
|
||||
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: UntypedFormGroup;
|
||||
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: UntypedFormBuilder,
|
||||
private _fuseConfirmationService: FuseConfirmationService,
|
||||
private _renderer2: Renderer2,
|
||||
private _router: Router,
|
||||
private _overlay: Overlay,
|
||||
private _viewContainerRef: ViewContainerRef,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Open the drawer
|
||||
this._contactsListComponent.matDrawer.open();
|
||||
|
||||
// Create the contact form
|
||||
this.contactForm = this._formBuilder.group({
|
||||
id : [''],
|
||||
avatar : [null],
|
||||
name : ['', [Validators.required]],
|
||||
emails : this._formBuilder.array([]),
|
||||
phoneNumbers: this._formBuilder.array([]),
|
||||
title : [''],
|
||||
company : [''],
|
||||
birthday : [null],
|
||||
address : [null],
|
||||
notes : [null],
|
||||
tags : [[]],
|
||||
});
|
||||
|
||||
// Get the contacts
|
||||
this._contactsService.contacts$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contacts: Contact[]) =>
|
||||
{
|
||||
this.contacts = contacts;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the contact
|
||||
this._contactsService.contact$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((contact: Contact) =>
|
||||
{
|
||||
// Open the drawer in case it is closed
|
||||
this._contactsListComponent.matDrawer.open();
|
||||
|
||||
// Get the contact
|
||||
this.contact = contact;
|
||||
|
||||
// Clear the emails and phoneNumbers form arrays
|
||||
(this.contactForm.get('emails') as UntypedFormArray).clear();
|
||||
(this.contactForm.get('phoneNumbers') as UntypedFormArray).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 UntypedFormArray).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 UntypedFormArray).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(null);
|
||||
this._unsubscribeAll.complete();
|
||||
|
||||
// Dispose the overlays if they are still on the DOM
|
||||
if ( this._tagsPanelOverlayRef )
|
||||
{
|
||||
this._tagsPanelOverlayRef.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Close the drawer
|
||||
*/
|
||||
closeDrawer(): Promise<MatDrawerToggleResult>
|
||||
{
|
||||
return this._contactsListComponent.matDrawer.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle edit mode
|
||||
*
|
||||
* @param editMode
|
||||
*/
|
||||
toggleEditMode(editMode: boolean | null = null): void
|
||||
{
|
||||
if ( editMode === null )
|
||||
{
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.editMode = editMode;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the contact
|
||||
*/
|
||||
updateContact(): void
|
||||
{
|
||||
// Get the contact object
|
||||
const contact = this.contactForm.getRawValue();
|
||||
|
||||
// Go through the contact object and clear empty values
|
||||
contact.emails = contact.emails.filter(email => email.email);
|
||||
|
||||
contact.phoneNumbers = contact.phoneNumbers.filter(phoneNumber => phoneNumber.phoneNumber);
|
||||
|
||||
// Update the contact on the server
|
||||
this._contactsService.updateContact(contact.id, contact).subscribe(() =>
|
||||
{
|
||||
// Toggle the edit mode off
|
||||
this.toggleEditMode(false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the contact
|
||||
*/
|
||||
deleteContact(): void
|
||||
{
|
||||
// Open the confirmation dialog
|
||||
const confirmation = this._fuseConfirmationService.open({
|
||||
title : 'Delete contact',
|
||||
message: 'Are you sure you want to delete this contact? This action cannot be undone!',
|
||||
actions: {
|
||||
confirm: {
|
||||
label: 'Delete',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Subscribe to the confirmation dialog closed action
|
||||
confirmation.afterClosed().subscribe((result) =>
|
||||
{
|
||||
// If the confirm button pressed...
|
||||
if ( result === 'confirmed' )
|
||||
{
|
||||
// Get the current contact's id
|
||||
const id = this.contact.id;
|
||||
|
||||
// Get the next/previous contact's id
|
||||
const currentContactIndex = this.contacts.findIndex(item => item.id === id);
|
||||
const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
|
||||
const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
|
||||
|
||||
// Delete the contact
|
||||
this._contactsService.deleteContact(id)
|
||||
.subscribe((isDeleted) =>
|
||||
{
|
||||
// Return if the contact wasn't deleted...
|
||||
if ( !isDeleted )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate to the next contact if available
|
||||
if ( nextContactId )
|
||||
{
|
||||
this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
|
||||
}
|
||||
// Otherwise, navigate to the parent
|
||||
else
|
||||
{
|
||||
this._router.navigate(['../'], {relativeTo: this._activatedRoute});
|
||||
}
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.toggleEditMode(false);
|
||||
});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload avatar
|
||||
*
|
||||
* @param fileList
|
||||
*/
|
||||
uploadAvatar(fileList: FileList): void
|
||||
{
|
||||
// Return if canceled
|
||||
if ( !fileList.length )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
const file = fileList[0];
|
||||
|
||||
// Return if the file is not allowed
|
||||
if ( !allowedTypes.includes(file.type) )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Upload the avatar
|
||||
this._contactsService.uploadAvatar(this.contact.id, file).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the avatar
|
||||
*/
|
||||
removeAvatar(): void
|
||||
{
|
||||
// Get the form control for 'avatar'
|
||||
const avatarFormControl = this.contactForm.get('avatar');
|
||||
|
||||
// Set the avatar as null
|
||||
avatarFormControl.setValue(null);
|
||||
|
||||
// Set the file input value as null
|
||||
this._avatarFileInput.nativeElement.value = null;
|
||||
|
||||
// Update the contact
|
||||
this.contact.avatar = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open tags panel
|
||||
*/
|
||||
openTagsPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
this._tagsPanelOverlayRef = this._overlay.create({
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._tagsPanelOrigin.nativeElement)
|
||||
.withFlexibleDimensions(true)
|
||||
.withViewportMargin(64)
|
||||
.withLockedPosition(true)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top',
|
||||
},
|
||||
]),
|
||||
});
|
||||
|
||||
// Subscribe to the attachments observable
|
||||
this._tagsPanelOverlayRef.attachments().subscribe(() =>
|
||||
{
|
||||
// Add a class to the origin
|
||||
this._renderer2.addClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
|
||||
|
||||
// Focus to the search input once the overlay has been attached
|
||||
this._tagsPanelOverlayRef.overlayElement.querySelector('input').focus();
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._tagsPanel, this._viewContainerRef);
|
||||
|
||||
// Attach the portal to the overlay
|
||||
this._tagsPanelOverlayRef.attach(templatePortal);
|
||||
|
||||
// Subscribe to the backdrop click
|
||||
this._tagsPanelOverlayRef.backdropClick().subscribe(() =>
|
||||
{
|
||||
// Remove the class from the origin
|
||||
this._renderer2.removeClass(this._tagsPanelOrigin.nativeElement, 'panel-opened');
|
||||
|
||||
// If overlay exists and attached...
|
||||
if ( this._tagsPanelOverlayRef && this._tagsPanelOverlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
this._tagsPanelOverlayRef.detach();
|
||||
|
||||
// Reset the tag filter
|
||||
this.filteredTags = this.tags;
|
||||
|
||||
// Toggle the edit mode off
|
||||
this.tagsEditMode = false;
|
||||
}
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the tags edit mode
|
||||
*/
|
||||
toggleTagsEditMode(): void
|
||||
{
|
||||
this.tagsEditMode = !this.tagsEditMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTags(event): void
|
||||
{
|
||||
// Get the value
|
||||
const value = event.target.value.toLowerCase();
|
||||
|
||||
// Filter the tags
|
||||
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags input key down event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTagsInputKeyDown(event): void
|
||||
{
|
||||
// Return if the pressed key is not 'Enter'
|
||||
if ( event.key !== 'Enter' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no tag available...
|
||||
if ( this.filteredTags.length === 0 )
|
||||
{
|
||||
// Create the tag
|
||||
this.createTag(event.target.value);
|
||||
|
||||
// Clear the input
|
||||
event.target.value = '';
|
||||
|
||||
// Return
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is a tag...
|
||||
const tag = this.filteredTags[0];
|
||||
const isTagApplied = this.contact.tags.find(id => id === tag.id);
|
||||
|
||||
// If the found tag is already applied to the contact...
|
||||
if ( isTagApplied )
|
||||
{
|
||||
// Remove the tag from the contact
|
||||
this.removeTagFromContact(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the tag to the contact
|
||||
this.addTagToContact(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new tag
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
createTag(title: string): void
|
||||
{
|
||||
const tag = {
|
||||
title,
|
||||
};
|
||||
|
||||
// Create tag on the server
|
||||
this._contactsService.createTag(tag)
|
||||
.subscribe((response) =>
|
||||
{
|
||||
// Add the tag to the contact
|
||||
this.addTagToContact(response);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag title
|
||||
*
|
||||
* @param tag
|
||||
* @param event
|
||||
*/
|
||||
updateTagTitle(tag: Tag, event): void
|
||||
{
|
||||
// Update the title on the tag
|
||||
tag.title = event.target.value;
|
||||
|
||||
// Update the tag on the server
|
||||
this._contactsService.updateTag(tag.id, tag)
|
||||
.pipe(debounceTime(300))
|
||||
.subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
deleteTag(tag: Tag): void
|
||||
{
|
||||
// Delete the tag from the server
|
||||
this._contactsService.deleteTag(tag.id).subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add tag to the contact
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
addTagToContact(tag: Tag): void
|
||||
{
|
||||
// Add the tag
|
||||
this.contact.tags.unshift(tag.id);
|
||||
|
||||
// Update the contact form
|
||||
this.contactForm.get('tags').patchValue(this.contact.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove tag from the contact
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
removeTagFromContact(tag: Tag): void
|
||||
{
|
||||
// Remove the tag
|
||||
this.contact.tags.splice(this.contact.tags.findIndex(item => item === tag.id), 1);
|
||||
|
||||
// Update the contact form
|
||||
this.contactForm.get('tags').patchValue(this.contact.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle contact tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
toggleContactTag(tag: Tag): void
|
||||
{
|
||||
if ( this.contact.tags.includes(tag.id) )
|
||||
{
|
||||
this.removeTagFromContact(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.addTagToContact(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Should the create tag button be visible
|
||||
*
|
||||
* @param inputValue
|
||||
*/
|
||||
shouldShowCreateTagButton(inputValue: string): boolean
|
||||
{
|
||||
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the email field
|
||||
*/
|
||||
addEmailField(): void
|
||||
{
|
||||
// Create an empty email form group
|
||||
const emailFormGroup = this._formBuilder.group({
|
||||
email: [''],
|
||||
label: [''],
|
||||
});
|
||||
|
||||
// Add the email form group to the emails form array
|
||||
(this.contactForm.get('emails') as UntypedFormArray).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 UntypedFormArray;
|
||||
|
||||
// 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 UntypedFormArray).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 UntypedFormArray;
|
||||
|
||||
// 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,123 +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-rounded w-full min-w-50"
|
||||
subscriptSizing="dynamic">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></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,208 +0,0 @@
|
||||
import { AsyncPipe, DOCUMENT, I18nPluralPipe, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
|
||||
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 { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
|
||||
import { Contact, Country } from 'app/modules/admin/apps/contacts/contacts.types';
|
||||
import { filter, fromEvent, Observable, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'contacts-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, RouterOutlet, NgIf, MatFormFieldModule, MatIconModule, MatInputModule, FormsModule, ReactiveFormsModule, MatButtonModule, NgFor, NgClass, RouterLink, AsyncPipe, I18nPluralPipe],
|
||||
})
|
||||
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: UntypedFormControl = new UntypedFormControl();
|
||||
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(null);
|
||||
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,30 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { Routes } from '@angular/router';
|
||||
import { InventoryComponent } from 'app/modules/admin/apps/ecommerce/inventory/inventory.component';
|
||||
import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
|
||||
import { InventoryListComponent } from 'app/modules/admin/apps/ecommerce/inventory/list/inventory.component';
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
pathMatch : 'full',
|
||||
redirectTo: 'inventory',
|
||||
},
|
||||
{
|
||||
path : 'inventory',
|
||||
component: InventoryComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: InventoryListComponent,
|
||||
resolve : {
|
||||
brands : () => inject(InventoryService).getBrands(),
|
||||
categories: () => inject(InventoryService).getCategories(),
|
||||
products : () => inject(InventoryService).getProducts(),
|
||||
tags : () => inject(InventoryService).getTags(),
|
||||
vendors : () => inject(InventoryService).getVendors(),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1 +0,0 @@
|
||||
<router-outlet></router-outlet>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'inventory',
|
||||
templateUrl : './inventory.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class InventoryComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,395 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
|
||||
import { BehaviorSubject, filter, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@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);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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,500 +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 shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
||||
<!-- Search -->
|
||||
<mat-form-field
|
||||
class="fuse-mat-dense fuse-mat-rounded min-w-64"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></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-mark'"></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_mini:arrow-long-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_mini:arrow-long-right'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mt-8">
|
||||
<span class="font-semibold mb-2">Product status</span>
|
||||
<mat-slide-toggle
|
||||
[formControlName]="'active'"
|
||||
[color]="'primary'">
|
||||
{{selectedProductForm.get('active').value === true ? 'Active' : 'Disabled'}}
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-auto flex-wrap">
|
||||
<!-- Name, SKU & etc. -->
|
||||
<div class="flex flex-col w-full lg:w-2/4 sm:pl-8">
|
||||
|
||||
<!-- Name -->
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'name'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- SKU and Barcode -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>SKU</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'sku'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-2/3 pl-2">
|
||||
<mat-label>Barcode</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'barcode'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Category, Brand & Vendor -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select [formControlName]="'category'">
|
||||
<ng-container *ngFor="let category of categories">
|
||||
<mat-option [value]="category.id">
|
||||
{{category.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 px-2">
|
||||
<mat-label>Brand</mat-label>
|
||||
<mat-select [formControlName]="'brand'">
|
||||
<ng-container *ngFor="let brand of brands">
|
||||
<mat-option [value]="brand.id">
|
||||
{{brand.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>Vendor</mat-label>
|
||||
<mat-select [formControlName]="'vendor'">
|
||||
<ng-container *ngFor="let vendor of vendors">
|
||||
<mat-option [value]="vendor.id">
|
||||
{{vendor.name}}
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Stock and Reserved -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>Stock</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'stock'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-1/3 pl-2">
|
||||
<mat-label>Reserved</mat-label>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'reserved'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cost, Base price, Tax & Price -->
|
||||
<div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Cost</mat-label>
|
||||
<span matPrefix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'cost'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Base Price</mat-label>
|
||||
<span matPrefix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'basePrice'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Tax</mat-label>
|
||||
<span matSuffix>%</span>
|
||||
<input
|
||||
type="number"
|
||||
matInput
|
||||
[formControlName]="'taxPercent'">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Price</mat-label>
|
||||
<span matSuffix>$</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'price'">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Weight & Tags -->
|
||||
<div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>Weight</mat-label>
|
||||
<span matSuffix>lbs.</span>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'weight'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Tags -->
|
||||
<span class="mb-px font-medium leading-tight">Tags</span>
|
||||
<div class="mt-1.5 rounded-md border border-gray-300 dark:border-gray-500 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center -my-px py-2 px-3">
|
||||
<div class="flex items-center flex-auto min-w-0">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"></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-square'"></mat-icon>
|
||||
<mat-icon
|
||||
*ngIf="tagsEditMode"
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Available tags -->
|
||||
<div class="h-44 leading-none overflow-y-auto border-t border-gray-300 dark:border-gray-500">
|
||||
<!-- Tags -->
|
||||
<ng-container *ngIf="!tagsEditMode">
|
||||
<ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
|
||||
<mat-checkbox
|
||||
class="flex items-center h-10 min-h-10 pl-1 pr-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 w-full"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<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-mark'"></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,606 +0,0 @@
|
||||
import { AsyncPipe, CurrencyPipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatOptionModule, MatRippleModule } from '@angular/material/core';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { MatSort, MatSortModule } from '@angular/material/sort';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||
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';
|
||||
import { debounceTime, map, merge, Observable, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
|
||||
@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,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatProgressBarModule, MatFormFieldModule, MatIconModule, MatInputModule, FormsModule, ReactiveFormsModule, MatButtonModule, MatSortModule, NgFor, NgTemplateOutlet, MatPaginatorModule, NgClass, MatSlideToggleModule, MatSelectModule, MatOptionModule, MatCheckboxModule, MatRippleModule, AsyncPipe, CurrencyPipe],
|
||||
})
|
||||
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: UntypedFormControl = new UntypedFormControl();
|
||||
selectedProduct: InventoryProduct | null = null;
|
||||
selectedProductForm: UntypedFormGroup;
|
||||
tags: InventoryTag[];
|
||||
tagsEditMode: boolean = false;
|
||||
vendors: InventoryVendor[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseConfirmationService: FuseConfirmationService,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
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(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle product details
|
||||
*
|
||||
* @param productId
|
||||
*/
|
||||
toggleDetails(productId: string): void
|
||||
{
|
||||
// If the product is already selected...
|
||||
if ( this.selectedProduct && this.selectedProduct.id === productId )
|
||||
{
|
||||
// Close the details
|
||||
this.closeDetails();
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the product by id
|
||||
this._inventoryService.getProductById(productId)
|
||||
.subscribe((product) =>
|
||||
{
|
||||
// Set the selected product
|
||||
this.selectedProduct = product;
|
||||
|
||||
// Fill the form
|
||||
this.selectedProductForm.patchValue(product);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the details
|
||||
*/
|
||||
closeDetails(): void
|
||||
{
|
||||
this.selectedProduct = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cycle through images of selected product
|
||||
*/
|
||||
cycleImages(forward: boolean = true): void
|
||||
{
|
||||
// Get the image count and current image index
|
||||
const count = this.selectedProductForm.get('images').value.length;
|
||||
const currentIndex = this.selectedProductForm.get('currentImageIndex').value;
|
||||
|
||||
// Calculate the next and previous index
|
||||
const nextIndex = currentIndex + 1 === count ? 0 : currentIndex + 1;
|
||||
const prevIndex = currentIndex - 1 < 0 ? count - 1 : currentIndex - 1;
|
||||
|
||||
// If cycling forward...
|
||||
if ( forward )
|
||||
{
|
||||
this.selectedProductForm.get('currentImageIndex').setValue(nextIndex);
|
||||
}
|
||||
// If cycling backwards...
|
||||
else
|
||||
{
|
||||
this.selectedProductForm.get('currentImageIndex').setValue(prevIndex);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the tags edit mode
|
||||
*/
|
||||
toggleTagsEditMode(): void
|
||||
{
|
||||
this.tagsEditMode = !this.tagsEditMode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTags(event): void
|
||||
{
|
||||
// Get the value
|
||||
const value = event.target.value.toLowerCase();
|
||||
|
||||
// Filter the tags
|
||||
this.filteredTags = this.tags.filter(tag => tag.title.toLowerCase().includes(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter tags input key down event
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
filterTagsInputKeyDown(event): void
|
||||
{
|
||||
// Return if the pressed key is not 'Enter'
|
||||
if ( event.key !== 'Enter' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no tag available...
|
||||
if ( this.filteredTags.length === 0 )
|
||||
{
|
||||
// Create the tag
|
||||
this.createTag(event.target.value);
|
||||
|
||||
// Clear the input
|
||||
event.target.value = '';
|
||||
|
||||
// Return
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is a tag...
|
||||
const tag = this.filteredTags[0];
|
||||
const isTagApplied = this.selectedProduct.tags.find(id => id === tag.id);
|
||||
|
||||
// If the found tag is already applied to the product...
|
||||
if ( isTagApplied )
|
||||
{
|
||||
// Remove the tag from the product
|
||||
this.removeTagFromProduct(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Otherwise add the tag to the product
|
||||
this.addTagToProduct(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new tag
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
createTag(title: string): void
|
||||
{
|
||||
const tag = {
|
||||
title,
|
||||
};
|
||||
|
||||
// Create tag on the server
|
||||
this._inventoryService.createTag(tag)
|
||||
.subscribe((response) =>
|
||||
{
|
||||
// Add the tag to the product
|
||||
this.addTagToProduct(response);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the tag title
|
||||
*
|
||||
* @param tag
|
||||
* @param event
|
||||
*/
|
||||
updateTagTitle(tag: InventoryTag, event): void
|
||||
{
|
||||
// Update the title on the tag
|
||||
tag.title = event.target.value;
|
||||
|
||||
// Update the tag on the server
|
||||
this._inventoryService.updateTag(tag.id, tag)
|
||||
.pipe(debounceTime(300))
|
||||
.subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the tag
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
deleteTag(tag: InventoryTag): void
|
||||
{
|
||||
// Delete the tag from the server
|
||||
this._inventoryService.deleteTag(tag.id).subscribe();
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add tag to the product
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
addTagToProduct(tag: InventoryTag): void
|
||||
{
|
||||
// Add the tag
|
||||
this.selectedProduct.tags.unshift(tag.id);
|
||||
|
||||
// Update the selected product form
|
||||
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove tag from the product
|
||||
*
|
||||
* @param tag
|
||||
*/
|
||||
removeTagFromProduct(tag: InventoryTag): void
|
||||
{
|
||||
// Remove the tag
|
||||
this.selectedProduct.tags.splice(this.selectedProduct.tags.findIndex(item => item === tag.id), 1);
|
||||
|
||||
// Update the selected product form
|
||||
this.selectedProductForm.get('tags').patchValue(this.selectedProduct.tags);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle product tag
|
||||
*
|
||||
* @param tag
|
||||
* @param change
|
||||
*/
|
||||
toggleProductTag(tag: InventoryTag, change: MatCheckboxChange): void
|
||||
{
|
||||
if ( change.checked )
|
||||
{
|
||||
this.addTagToProduct(tag);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.removeTagFromProduct(tag);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Should the create tag button be visible
|
||||
*
|
||||
* @param inputValue
|
||||
*/
|
||||
shouldShowCreateTagButton(inputValue: string): boolean
|
||||
{
|
||||
return !!!(inputValue === '' || this.tags.findIndex(tag => tag.title.toLowerCase() === inputValue.toLowerCase()) > -1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create product
|
||||
*/
|
||||
createProduct(): void
|
||||
{
|
||||
// Create the product
|
||||
this._inventoryService.createProduct().subscribe((newProduct) =>
|
||||
{
|
||||
// Go to new product
|
||||
this.selectedProduct = newProduct;
|
||||
|
||||
// Fill the form
|
||||
this.selectedProductForm.patchValue(newProduct);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the selected product using the form data
|
||||
*/
|
||||
updateSelectedProduct(): void
|
||||
{
|
||||
// Get the product object
|
||||
const product = this.selectedProductForm.getRawValue();
|
||||
|
||||
// Remove the currentImageIndex field
|
||||
delete product.currentImageIndex;
|
||||
|
||||
// Update the product on the server
|
||||
this._inventoryService.updateProduct(product.id, product).subscribe(() =>
|
||||
{
|
||||
// Show a success message
|
||||
this.showFlashMessage('success');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the selected product using the form data
|
||||
*/
|
||||
deleteSelectedProduct(): void
|
||||
{
|
||||
// Open the confirmation dialog
|
||||
const confirmation = this._fuseConfirmationService.open({
|
||||
title : 'Delete product',
|
||||
message: 'Are you sure you want to remove this product? This action cannot be undone!',
|
||||
actions: {
|
||||
confirm: {
|
||||
label: 'Delete',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Subscribe to the confirmation dialog closed action
|
||||
confirmation.afterClosed().subscribe((result) =>
|
||||
{
|
||||
// If the confirm button pressed...
|
||||
if ( result === 'confirmed' )
|
||||
{
|
||||
// Get the product object
|
||||
const product = this.selectedProductForm.getRawValue();
|
||||
|
||||
// Delete the product on the server
|
||||
this._inventoryService.deleteProduct(product.id).subscribe(() =>
|
||||
{
|
||||
// Close the details
|
||||
this.closeDetails();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show flash message
|
||||
*/
|
||||
showFlashMessage(type: 'success' | 'error'): void
|
||||
{
|
||||
// Show the message
|
||||
this.flashMessage = type;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
|
||||
// Hide it after 3 seconds
|
||||
setTimeout(() =>
|
||||
{
|
||||
this.flashMessage = null;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -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">
|
||||
<a
|
||||
mat-icon-button
|
||||
[routerLink]="['../../']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="mt-8 aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full border rounded-lg bg-gray-50 dark:bg-card">
|
||||
<ng-container *ngIf="item.type === 'folder'">
|
||||
<mat-icon
|
||||
class="icon-size-24 text-hint"
|
||||
[svgIcon]="'heroicons_outline:folder'"></mat-icon>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="item.type !== 'folder'">
|
||||
<mat-icon
|
||||
class="icon-size-24 text-hint"
|
||||
[svgIcon]="'heroicons_outline:document'"></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,96 +0,0 @@
|
||||
import { NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDrawerToggleResult } from '@angular/material/sidenav';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule, NgIf],
|
||||
})
|
||||
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(null);
|
||||
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>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager',
|
||||
templateUrl : './file-manager.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class FileManagerComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,151 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, Routes } from '@angular/router';
|
||||
import { FileManagerDetailsComponent } from 'app/modules/admin/apps/file-manager/details/details.component';
|
||||
import { FileManagerComponent } from 'app/modules/admin/apps/file-manager/file-manager.component';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { FileManagerListComponent } from 'app/modules/admin/apps/file-manager/list/list.component';
|
||||
import { catchError, throwError } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Folder resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const folderResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const fileManagerService = inject(FileManagerService);
|
||||
const router = inject(Router);
|
||||
|
||||
return fileManagerService.getItems(route.paramMap.get('folderId')).pipe(
|
||||
// Error here means the requested folder 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
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Item resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const itemResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const fileManagerService = inject(FileManagerService);
|
||||
const router = inject(Router);
|
||||
|
||||
return fileManagerService.getItemById(route.paramMap.get('id')).pipe(
|
||||
// Error here means the requested item 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
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Can deactivate file manager details
|
||||
*
|
||||
* @param component
|
||||
* @param currentRoute
|
||||
* @param currentState
|
||||
* @param nextState
|
||||
*/
|
||||
const canDeactivateFileManagerDetails = (
|
||||
component: FileManagerDetailsComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
currentState: RouterStateSnapshot,
|
||||
nextState: RouterStateSnapshot) =>
|
||||
{
|
||||
// Get the next route
|
||||
let nextRoute: ActivatedRouteSnapshot = nextState.root;
|
||||
while ( nextRoute.firstChild )
|
||||
{
|
||||
nextRoute = nextRoute.firstChild;
|
||||
}
|
||||
|
||||
// If the next state doesn't contain '/file-manager'
|
||||
// it means we are navigating away from the
|
||||
// file manager app
|
||||
if ( !nextState.url.includes('/file-manager') )
|
||||
{
|
||||
// Let it navigate
|
||||
return true;
|
||||
}
|
||||
|
||||
// If we are navigating to another item...
|
||||
if ( nextState.url.includes('/details') )
|
||||
{
|
||||
// Just navigate
|
||||
return true;
|
||||
}
|
||||
|
||||
// Otherwise, close the drawer first, and then navigate
|
||||
return component.closeDrawer().then(() => true);
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: FileManagerComponent,
|
||||
children : [
|
||||
{
|
||||
path : 'folders/:folderId',
|
||||
component: FileManagerListComponent,
|
||||
resolve : {
|
||||
item: folderResolver,
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : 'details/:id',
|
||||
component : FileManagerDetailsComponent,
|
||||
resolve : {
|
||||
item: itemResolver,
|
||||
},
|
||||
canDeactivate: [canDeactivateFileManagerDetails],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path : '',
|
||||
component: FileManagerListComponent,
|
||||
resolve : {
|
||||
items: () => inject(FileManagerService).getItems(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : 'details/:id',
|
||||
component : FileManagerDetailsComponent,
|
||||
resolve : {
|
||||
item: itemResolver,
|
||||
},
|
||||
canDeactivate: [canDeactivateFileManagerDetails],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,86 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class FileManagerService
|
||||
{
|
||||
// Private
|
||||
private _item: BehaviorSubject<Item | null> = new BehaviorSubject(null);
|
||||
private _items: BehaviorSubject<Items | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for items
|
||||
*/
|
||||
get items$(): Observable<Items>
|
||||
{
|
||||
return this._items.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for item
|
||||
*/
|
||||
get item$(): Observable<Item>
|
||||
{
|
||||
return this._item.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get items
|
||||
*/
|
||||
getItems(folderId: string | null = null): Observable<Item[]>
|
||||
{
|
||||
return this._httpClient.get<Items>('api/apps/file-manager', {params: {folderId}}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._items.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get item by id
|
||||
*/
|
||||
getItemById(id: string): Observable<Item>
|
||||
{
|
||||
return this._items.pipe(
|
||||
take(1),
|
||||
map((items) =>
|
||||
{
|
||||
// Find within the folders and files
|
||||
const item = [...items.folders, ...items.files].find(value => value.id === id) || null;
|
||||
|
||||
// Update the item
|
||||
this._item.next(item);
|
||||
|
||||
// Return the item
|
||||
return item;
|
||||
}),
|
||||
switchMap((item) =>
|
||||
{
|
||||
if ( !item )
|
||||
{
|
||||
return throwError('Could not found the item with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(item);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
export interface Items
|
||||
{
|
||||
folders: Item[];
|
||||
files: Item[];
|
||||
path: any[];
|
||||
}
|
||||
|
||||
export interface Item
|
||||
{
|
||||
id?: string;
|
||||
folderId?: string;
|
||||
name?: string;
|
||||
createdBy?: string;
|
||||
createdAt?: string;
|
||||
modifiedAt?: string;
|
||||
size?: string;
|
||||
type?: string;
|
||||
contents?: string | null;
|
||||
description?: string | null;
|
||||
}
|
||||
@ -1,176 +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 sm:w-100 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 bg-gray-100 dark:bg-transparent">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between p-6 sm:py-12 md:px-8 border-b bg-card dark:bg-transparent">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-4xl font-extrabold tracking-tight leading-none">File Manager</div>
|
||||
<div class="flex items-center mt-0.5 font-medium text-secondary">
|
||||
<ng-container *ngIf="!items.path.length">
|
||||
{{items.folders.length}} folders, {{items.files.length}} files
|
||||
</ng-container>
|
||||
<!-- Breadcrumbs -->
|
||||
<ng-container *ngIf="items.path.length">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a
|
||||
class="text-primary cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager']">Home
|
||||
</a>
|
||||
<div class="">/</div>
|
||||
<ng-container *ngFor="let path of items.path; let last = last; trackBy: trackByFn">
|
||||
<ng-container *ngIf="!last">
|
||||
<a
|
||||
class="text-primary cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager/folders/', path.id]">{{path.name}}</a>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="last">
|
||||
<div>{{path.name}}</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!last">
|
||||
<div class="">/</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="mt-4 sm:mt-0">
|
||||
<!-- Upload button -->
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2 mr-1">Upload file</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Items list -->
|
||||
<ng-container *ngIf="items && (items.folders.length > 0 || items.files.length > 0); else noItems">
|
||||
<div class="p-6 md:p-8 space-y-8">
|
||||
<!-- Folders -->
|
||||
<ng-container *ngIf="items.folders.length > 0">
|
||||
<div>
|
||||
<div class="font-medium">Folders</div>
|
||||
<div
|
||||
class="flex flex-wrap -m-2 mt-2">
|
||||
<ng-container *ngFor="let folder of items.folders; trackBy:trackByFn">
|
||||
<div class="relative w-40 h-40 m-2 p-4 shadow rounded-2xl bg-card">
|
||||
<a
|
||||
class="absolute z-20 top-1.5 right-1.5 w-8 h-8 min-h-8"
|
||||
(click)="$event.preventDefault()"
|
||||
[routerLink]="['./details/', folder.id]"
|
||||
mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
|
||||
</a>
|
||||
<a
|
||||
class="z-10 absolute inset-0 flex flex-col p-4 cursor-pointer"
|
||||
[routerLink]="['/apps/file-manager/folders/', folder.id]">
|
||||
<div class="aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<!-- Icon -->
|
||||
<mat-icon
|
||||
class="icon-size-14 text-hint opacity-50"
|
||||
[svgIcon]="'heroicons_solid:folder'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
|
||||
<div
|
||||
class="truncate"
|
||||
[matTooltip]="folder.name">{{folder.name}}</div>
|
||||
<ng-container *ngIf="folder.contents">
|
||||
<div class="text-secondary truncate">{{folder.contents}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Files -->
|
||||
<ng-container *ngIf="items.files.length > 0">
|
||||
<div>
|
||||
<div class="font-medium">Files</div>
|
||||
<div
|
||||
class="flex flex-wrap -m-2 mt-2">
|
||||
<ng-container *ngFor="let file of items.files; trackBy:trackByFn">
|
||||
<a
|
||||
class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
|
||||
[routerLink]="['./details/', file.id]">
|
||||
<div class="aspect-[9/6]">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<!-- Icons -->
|
||||
<div class="relative">
|
||||
<mat-icon
|
||||
class="icon-size-14 text-hint opacity-50"
|
||||
[svgIcon]="'heroicons_solid:document'"></mat-icon>
|
||||
<div
|
||||
class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
|
||||
[class.bg-red-600]="file.type === 'PDF'"
|
||||
[class.bg-blue-600]="file.type === 'DOC'"
|
||||
[class.bg-green-600]="file.type === 'XLS'"
|
||||
[class.bg-gray-600]="file.type === 'TXT'"
|
||||
[class.bg-amber-600]="file.type === 'JPG'">
|
||||
{{file.type.toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
|
||||
<div
|
||||
class="truncate"
|
||||
[matTooltip]="file.name">{{file.name}}</div>
|
||||
<ng-container *ngIf="file.contents">
|
||||
<div class="text-secondary truncate">{{file.contents}}</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- No items template -->
|
||||
<ng-template #noItems>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:folder-open'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no items!</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,122 +0,0 @@
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
|
||||
import { Item, Items } from 'app/modules/admin/apps/file-manager/file-manager.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'file-manager-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, RouterOutlet, NgIf, RouterLink, NgFor, MatButtonModule, MatIconModule, MatTooltipModule],
|
||||
})
|
||||
export class FileManagerListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('matDrawer', {static: true}) matDrawer: MatDrawer;
|
||||
drawerMode: 'side' | 'over';
|
||||
selectedItem: Item;
|
||||
items: Items;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _router: Router,
|
||||
private _fileManagerService: FileManagerService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the items
|
||||
this._fileManagerService.items$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((items: Items) =>
|
||||
{
|
||||
this.items = items;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Get the item
|
||||
this._fileManagerService.item$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((item: Item) =>
|
||||
{
|
||||
this.selectedItem = item;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
|
||||
// Subscribe to media query change
|
||||
this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((state) =>
|
||||
{
|
||||
// Calculate the drawer mode
|
||||
this.drawerMode = state.matches ? 'side' : 'over';
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
<ng-container *ngFor="let faqCategory of faqCategories; trackBy: trackByFn">
|
||||
<div class="mt-12 sm:mt-16 text-3xl font-bold leading-tight tracking-tight">{{faqCategory.title}}</div>
|
||||
<mat-accordion class="max-w-4xl mt-8">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title class="font-medium leading-tight">{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,72 +0,0 @@
|
||||
import { NgFor } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-faqs',
|
||||
templateUrl : './faqs.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule, NgFor, MatExpansionModule],
|
||||
})
|
||||
export class HelpCenterFaqsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
faqCategories: FaqCategory[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the FAQs
|
||||
this._helpCenterService.faqs$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((faqCategories) =>
|
||||
{
|
||||
this.faqCategories = faqCategories;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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,30 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Guides & Resources</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
{{guideCategory.title}}
|
||||
</div>
|
||||
<!-- Guides -->
|
||||
<div class="flex flex-col items-start mt-8 sm:mt-12 space-y-2">
|
||||
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
|
||||
<a
|
||||
class="font-medium hover:underline text-primary-500"
|
||||
[routerLink]="[guide.slug]">
|
||||
{{guide.title}}
|
||||
</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,75 +0,0 @@
|
||||
import { NgFor } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides-category',
|
||||
templateUrl : './category.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule, NgFor],
|
||||
})
|
||||
export class HelpCenterGuidesCategoryComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategory: GuideCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _helpCenterService: HelpCenterService,
|
||||
private _router: Router,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guides
|
||||
this._helpCenterService.guides$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategories) =>
|
||||
{
|
||||
this.guideCategory = guideCategories[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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,52 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="ml-2">Back to {{guideCategory.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">{{guideCategory.guides[0].title}}</div>
|
||||
<div class="mt-1 sm:text-2xl tracking-tight text-secondary">{{guideCategory.guides[0].subtitle}}</div>
|
||||
|
||||
<!-- Guide -->
|
||||
<div
|
||||
class="mt-8 sm:mt-12 max-w-none prose prose-sm"
|
||||
[innerHTML]="guideCategory.guides[0].content"></div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-10 pt-8 border-t">
|
||||
<div class="text-sm font-medium text-secondary">Last updated 2 months ago</div>
|
||||
<div class="flex items-center mt-2 sm:mt-0">
|
||||
<div class="font-medium text-secondary">Was this page helpful?</div>
|
||||
<div class="ml-4">
|
||||
<button mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:thumb-up'"></mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:thumb-down'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next -->
|
||||
<a
|
||||
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transition-shadow ease-in-out duration-150"
|
||||
[routerLink]="'.'">
|
||||
<div>
|
||||
<div class="text-secondary">Next</div>
|
||||
<div class="text-lg font-semibold">Removing a media from a project</div>
|
||||
</div>
|
||||
<mat-icon
|
||||
class="ml-3"
|
||||
[svgIcon]="'heroicons_outline:arrow-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,70 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides-guide',
|
||||
templateUrl : './guide.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule],
|
||||
})
|
||||
export class HelpCenterGuidesGuideComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategory: GuideCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guides
|
||||
this._helpCenterService.guide$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategory) =>
|
||||
{
|
||||
this.guideCategory = guideCategory;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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,48 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Guides & Resources
|
||||
</div>
|
||||
<!-- Guides -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 grid-flow-row gap-y-12 sm:gap-x-4 mt-8 sm:mt-12">
|
||||
<ng-container *ngFor="let guideCategory of guideCategories; trackBy: trackByFn">
|
||||
<div class="flex flex-col items-start">
|
||||
<a
|
||||
class="flex items-center mb-1 text-2xl font-semibold"
|
||||
[routerLink]="[guideCategory.slug]">
|
||||
{{guideCategory.title}}
|
||||
</a>
|
||||
<ng-container *ngFor="let guide of guideCategory.guides; trackBy: trackByFn">
|
||||
<a
|
||||
class="mt-3 font-medium hover:underline text-primary-500"
|
||||
[routerLink]="[guideCategory.slug, guide.slug]">
|
||||
{{guide.title}}
|
||||
</a>
|
||||
</ng-container>
|
||||
<a
|
||||
class="flex items-center mt-5 pl-4 pr-3 py-0.5 rounded-full cursor-pointer bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
*ngIf="guideCategory.totalGuides > guideCategory.visibleGuides"
|
||||
[routerLink]="guideCategory.slug">
|
||||
<span class="text-sm font-medium text-secondary">View All</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5"
|
||||
[svgIcon]="'heroicons_mini:arrow-long-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,71 +0,0 @@
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-guides',
|
||||
templateUrl : './guides.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule, NgFor, NgIf],
|
||||
})
|
||||
export class HelpCenterGuidesComponent implements OnInit, OnDestroy
|
||||
{
|
||||
guideCategories: GuideCategory[];
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the Guide categories
|
||||
this._helpCenterService.guides$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((guideCategories) =>
|
||||
{
|
||||
this.guideCategories = guideCategories;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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,108 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative pt-8 pb-28 px-4 sm:pt-20 sm:pb-48 sm:px-16 overflow-hidden bg-gray-800 dark:bg-gray-900 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">HELP CENTER</h2>
|
||||
<div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
|
||||
How can we help you today?
|
||||
</div>
|
||||
<div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
|
||||
Search for a topic or question, check out our FAQs and guides, contact us for detailed support
|
||||
</div>
|
||||
<mat-form-field
|
||||
class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<input
|
||||
matInput
|
||||
[placeholder]="'Enter a question, topic or keyword'">
|
||||
<mat-icon
|
||||
matPrefix
|
||||
[svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center pb-6 px-6 sm:pb-10 sm:px-10">
|
||||
<!-- Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
|
||||
<!-- FAQs card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">FAQs</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['faqs']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Go to FAQs</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_mini:arrow-long-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Guides card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">Guides</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['guides']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Check guides</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_mini:arrow-long-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Support card -->
|
||||
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
|
||||
<div class="flex flex-col flex-auto items-center p-8 text-center">
|
||||
<div class="text-2xl font-semibold">Support</div>
|
||||
<div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4 px-8 text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-transparent dark:border-t">
|
||||
<a
|
||||
class="flex items-center"
|
||||
[routerLink]="['support']">
|
||||
<span class="absolute inset-0"></span>
|
||||
<span class="font-medium">Contact us</span>
|
||||
<mat-icon
|
||||
class="ml-2 icon-size-5 text-current"
|
||||
[svgIcon]="'heroicons_mini:arrow-long-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FAQs -->
|
||||
<div class="mt-24 text-3xl sm:text-5xl font-extrabold leading-tight tracking-tight text-center">Most frequently asked questions</div>
|
||||
<div class="mt-2 text-xl text-center text-secondary">Here are the most frequently asked questions you may check before getting started</div>
|
||||
<mat-accordion class="max-w-4xl mt-12">
|
||||
<ng-container *ngFor="let faq of faqCategory.faqs; trackBy: trackByFn">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header [collapsedHeight]="'56px'">
|
||||
<mat-panel-title>{{faq.question}}</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
{{faq.answer}}
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,73 +0,0 @@
|
||||
import { NgFor } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { FaqCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center',
|
||||
templateUrl : './help-center.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatFormFieldModule, MatInputModule, MatIconModule, RouterLink, MatExpansionModule, NgFor],
|
||||
})
|
||||
export class HelpCenterComponent implements OnInit, OnDestroy
|
||||
{
|
||||
faqCategory: FaqCategory;
|
||||
private _unsubscribeAll: Subject<any> = new Subject();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _helpCenterService: HelpCenterService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the FAQs
|
||||
this._helpCenterService.faqs$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((faqCategories) =>
|
||||
{
|
||||
this.faqCategory = faqCategories[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
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,63 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
|
||||
import { HelpCenterFaqsComponent } from 'app/modules/admin/apps/help-center/faqs/faqs.component';
|
||||
import { HelpCenterGuidesCategoryComponent } from 'app/modules/admin/apps/help-center/guides/category/category.component';
|
||||
import { HelpCenterGuidesGuideComponent } from 'app/modules/admin/apps/help-center/guides/guide/guide.component';
|
||||
import { HelpCenterGuidesComponent } from 'app/modules/admin/apps/help-center/guides/guides.component';
|
||||
import { HelpCenterComponent } from 'app/modules/admin/apps/help-center/help-center.component';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
import { HelpCenterSupportComponent } from 'app/modules/admin/apps/help-center/support/support.component';
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterComponent,
|
||||
resolve : {
|
||||
faqs: () => inject(HelpCenterService).getFaqsByCategory('most-asked'),
|
||||
},
|
||||
},
|
||||
{
|
||||
path : 'faqs',
|
||||
component: HelpCenterFaqsComponent,
|
||||
resolve : {
|
||||
faqs: () => inject(HelpCenterService).getAllFaqs(),
|
||||
},
|
||||
},
|
||||
{
|
||||
path : 'guides',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterGuidesComponent,
|
||||
resolve : {
|
||||
guides: () => inject(HelpCenterService).getAllGuides(),
|
||||
},
|
||||
},
|
||||
{
|
||||
path : ':categorySlug',
|
||||
children: [
|
||||
{
|
||||
path : '',
|
||||
component: HelpCenterGuidesCategoryComponent,
|
||||
resolve : {
|
||||
guides: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
inject(HelpCenterService).getGuidesByCategory(route.paramMap.get('categorySlug')),
|
||||
},
|
||||
},
|
||||
{
|
||||
path : ':guideSlug',
|
||||
component: HelpCenterGuidesGuideComponent,
|
||||
resolve : {
|
||||
guides: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
inject(HelpCenterService).getGuide(route.parent.paramMap.get('categorySlug'), route.paramMap.get('guideSlug')),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path : 'support',
|
||||
component: HelpCenterSupportComponent,
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,136 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FaqCategory, Guide, GuideCategory } from 'app/modules/admin/apps/help-center/help-center.type';
|
||||
import { Observable, ReplaySubject, tap } from 'rxjs';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class HelpCenterService
|
||||
{
|
||||
private _faqs: ReplaySubject<FaqCategory[]> = new ReplaySubject<FaqCategory[]>(1);
|
||||
private _guides: ReplaySubject<GuideCategory[]> = new ReplaySubject<GuideCategory[]>(1);
|
||||
private _guide: ReplaySubject<Guide> = new ReplaySubject<Guide>(1);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for FAQs
|
||||
*/
|
||||
get faqs$(): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._faqs.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for guides
|
||||
*/
|
||||
get guides$(): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._guides.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for guide
|
||||
*/
|
||||
get guide$(): Observable<GuideCategory>
|
||||
{
|
||||
return this._guide.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get all FAQs
|
||||
*/
|
||||
getAllFaqs(): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs').pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._faqs.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get FAQs by category using category slug
|
||||
*
|
||||
* @param slug
|
||||
*/
|
||||
getFaqsByCategory(slug: string): Observable<FaqCategory[]>
|
||||
{
|
||||
return this._httpClient.get<FaqCategory[]>('api/apps/help-center/faqs', {
|
||||
params: {slug},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._faqs.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all guides limited per category by the given number
|
||||
*
|
||||
* @param limit
|
||||
*/
|
||||
getAllGuides(limit = '4'): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
|
||||
params: {limit},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._guides.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get guides by category using category slug
|
||||
*
|
||||
* @param slug
|
||||
*/
|
||||
getGuidesByCategory(slug: string): Observable<GuideCategory[]>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory[]>('api/apps/help-center/guides', {
|
||||
params: {slug},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._guides.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get guide by category and guide slug
|
||||
*
|
||||
* @param categorySlug
|
||||
* @param guideSlug
|
||||
*/
|
||||
getGuide(categorySlug: string, guideSlug: string): Observable<GuideCategory>
|
||||
{
|
||||
return this._httpClient.get<GuideCategory>('api/apps/help-center/guide', {
|
||||
params: {
|
||||
categorySlug,
|
||||
guideSlug,
|
||||
},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._guide.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
export interface FaqCategory
|
||||
{
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
faqs?: Faq[];
|
||||
}
|
||||
|
||||
export interface Faq
|
||||
{
|
||||
id: string;
|
||||
categoryId: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface GuideCategory
|
||||
{
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
totalGuides?: number;
|
||||
visibleGuides?: number;
|
||||
guides?: Guide[];
|
||||
}
|
||||
|
||||
export interface Guide
|
||||
{
|
||||
id: string;
|
||||
categoryId: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
content?: string;
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
<div class="flex flex-col flex-auto min-w-0">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto items-center p-6 sm:p-10">
|
||||
<div class="flex flex-col w-full max-w-4xl">
|
||||
<div class="-ml-4 sm:mt-8">
|
||||
<a
|
||||
mat-button
|
||||
[routerLink]="['../']"
|
||||
[color]="'primary'">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
<span class="ml-2">Back to Help Center</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
|
||||
Contact support
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<div class="mt-8 sm:mt-12 p-6 pb-7 sm:p-10 sm:pb-7 shadow rounded-2xl bg-card">
|
||||
<!-- Alert -->
|
||||
<fuse-alert
|
||||
class="mb-8"
|
||||
*ngIf="alert"
|
||||
[type]="alert.type"
|
||||
[showIcon]="false">
|
||||
{{alert.message}}
|
||||
</fuse-alert>
|
||||
<form
|
||||
class="space-y-3"
|
||||
[formGroup]="supportForm"
|
||||
#supportNgForm="ngForm">
|
||||
<div class="mb-6">
|
||||
<div class="text-2xl font-bold tracking-tight">Submit your request</div>
|
||||
<div class="text-secondary">Your request will be processed and our support staff will get back to you in 24 hours.</div>
|
||||
</div>
|
||||
<!-- Name -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'name'"
|
||||
[required]="true">
|
||||
<mat-label>Name</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('name').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Email -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
type="email"
|
||||
matInput
|
||||
[formControlName]="'email'"
|
||||
[required]="true">
|
||||
<mat-label>Email</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('email').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="supportForm.get('email').hasError('email')">
|
||||
Enter a valid email address
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Subject -->
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'subject'"
|
||||
[required]="true">
|
||||
<mat-label>Subject</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('subject').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Message -->
|
||||
<mat-form-field class="w-full">
|
||||
<textarea
|
||||
matInput
|
||||
[formControlName]="'message'"
|
||||
[required]="true"
|
||||
[rows]="5"
|
||||
cdkTextareaAutosize></textarea>
|
||||
<mat-label>Message</mat-label>
|
||||
<mat-error *ngIf="supportForm.get('message').hasError('required')">
|
||||
Required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
mat-button
|
||||
[color]="'accent'"
|
||||
[disabled]="supportForm.pristine || supportForm.untouched"
|
||||
(click)="clearForm()">
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="supportForm.pristine || supportForm.invalid"
|
||||
(click)="sendForm()">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,93 +0,0 @@
|
||||
import { TextFieldModule } from '@angular/cdk/text-field';
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, NgForm, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
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 { RouterLink } from '@angular/router';
|
||||
import { fuseAnimations } from '@fuse/animations';
|
||||
import { FuseAlertComponent } from '@fuse/components/alert';
|
||||
import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
|
||||
|
||||
@Component({
|
||||
selector : 'help-center-support',
|
||||
templateUrl : './support.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations : fuseAnimations,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, RouterLink, MatIconModule, NgIf, FuseAlertComponent, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, TextFieldModule],
|
||||
})
|
||||
export class HelpCenterSupportComponent implements OnInit
|
||||
{
|
||||
@ViewChild('supportNgForm') supportNgForm: NgForm;
|
||||
|
||||
alert: any;
|
||||
supportForm: UntypedFormGroup;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
private _helpCenterService: HelpCenterService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the support form
|
||||
this.supportForm = this._formBuilder.group({
|
||||
name : ['', Validators.required],
|
||||
email : ['', [Validators.required, Validators.email]],
|
||||
subject: ['', Validators.required],
|
||||
message: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Clear the form
|
||||
*/
|
||||
clearForm(): void
|
||||
{
|
||||
// Reset the form
|
||||
this.supportNgForm.resetForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Send the form
|
||||
*/
|
||||
sendForm(): void
|
||||
{
|
||||
// Send your form here using an http request
|
||||
console.log('Your message has been sent!');
|
||||
|
||||
// Show a success message (it can also be an error message)
|
||||
// and remove it after 5 seconds
|
||||
this.alert = {
|
||||
type : 'success',
|
||||
message: 'Your request has been delivered! A member of our support staff will respond as soon as possible.',
|
||||
};
|
||||
|
||||
setTimeout(() =>
|
||||
{
|
||||
this.alert = null;
|
||||
}, 7000);
|
||||
|
||||
// Clear the form
|
||||
this.clearForm();
|
||||
}
|
||||
}
|
||||
@ -1,133 +0,0 @@
|
||||
<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
|
||||
<div class="text-lg font-medium">New Message</div>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="saveAndClose()"
|
||||
[tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm">
|
||||
|
||||
<!-- To -->
|
||||
<mat-form-field>
|
||||
<mat-label>To</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'to'">
|
||||
<div
|
||||
class="copy-fields-toggles"
|
||||
matSuffix>
|
||||
<span
|
||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.cc"
|
||||
(click)="showCopyField('cc')">
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.bcc"
|
||||
(click)="showCopyField('bcc')">
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Cc -->
|
||||
<mat-form-field
|
||||
*ngIf="copyFields.cc">
|
||||
<mat-label>Cc</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'cc'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Bcc -->
|
||||
<mat-form-field
|
||||
*ngIf="copyFields.bcc">
|
||||
<mat-label>Bcc</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'bcc'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Subject -->
|
||||
<mat-form-field>
|
||||
<mat-label>Subject</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'subject'">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Body -->
|
||||
<quill-editor
|
||||
class="mt-2"
|
||||
[formControlName]="'body'"
|
||||
[bounds]="'self'"
|
||||
[modules]="quillModules"></quill-editor>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
|
||||
<div class="-ml-2">
|
||||
<!-- Attach file -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert link -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:link'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert emoji -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert image -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:photo'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button
|
||||
class="ml-auto sm:ml-0"
|
||||
mat-stroked-button
|
||||
(click)="discard()">
|
||||
Discard
|
||||
</button>
|
||||
<!-- Save as draft -->
|
||||
<button
|
||||
class="sm:mx-3"
|
||||
mat-stroked-button
|
||||
(click)="saveAsDraft()">
|
||||
<span>Save as draft</span>
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="order-first sm:order-last"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,115 +0,0 @@
|
||||
import { NgIf } from '@angular/common';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { QuillEditorComponent } from 'ngx-quill';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-compose',
|
||||
templateUrl : './compose.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgIf, QuillEditorComponent],
|
||||
})
|
||||
export class MailboxComposeComponent implements OnInit
|
||||
{
|
||||
composeForm: UntypedFormGroup;
|
||||
copyFields: { cc: boolean; bcc: boolean } = {
|
||||
cc : false,
|
||||
bcc: false,
|
||||
};
|
||||
quillModules: any = {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline'],
|
||||
[{align: []}, {list: 'ordered'}, {list: 'bullet'}],
|
||||
['clean'],
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public matDialogRef: MatDialogRef<MailboxComposeComponent>,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the form
|
||||
this.composeForm = this._formBuilder.group({
|
||||
to : ['', [Validators.required, Validators.email]],
|
||||
cc : ['', [Validators.email]],
|
||||
bcc : ['', [Validators.email]],
|
||||
subject: [''],
|
||||
body : ['', [Validators.required]],
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Show the copy field with the given field name
|
||||
*
|
||||
* @param name
|
||||
*/
|
||||
showCopyField(name: string): void
|
||||
{
|
||||
// Return if the name is not one of the available names
|
||||
if ( name !== 'cc' && name !== 'bcc' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Show the field
|
||||
this.copyFields[name] = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save and close
|
||||
*/
|
||||
saveAndClose(): void
|
||||
{
|
||||
// Save the message as a draft
|
||||
this.saveAsDraft();
|
||||
|
||||
// Close the dialog
|
||||
this.matDialogRef.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Discard the message
|
||||
*/
|
||||
discard(): void
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the message as a draft
|
||||
*/
|
||||
saveAsDraft(): void
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Send the message
|
||||
*/
|
||||
send(): void
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,412 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<ng-container *ngIf="mail; else selectMailToRead">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="z-10 relative flex flex-col flex-0 w-full border-b">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center min-h-16 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]="['./../']">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'"></mat-icon>
|
||||
</a>
|
||||
|
||||
<!-- Toggle labels button & menu -->
|
||||
<button
|
||||
class="ml-auto"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="toggleLabelMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #toggleLabelMenu="matMenu">
|
||||
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||
<div
|
||||
mat-menu-item
|
||||
(click)="toggleLabel(label)"
|
||||
matRipple>
|
||||
<mat-checkbox
|
||||
class="pointer-events-none"
|
||||
[color]="'primary'"
|
||||
[checked]="mail.labels.includes(label.id)"
|
||||
[disableRipple]="true">
|
||||
{{label.title}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-menu>
|
||||
|
||||
<!-- Toggle important button -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
(click)="toggleImportant()">
|
||||
<mat-icon
|
||||
[ngClass]="{'text-red-600 dark:text-red-500': mail.important}"
|
||||
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Toggle starred button -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
(click)="toggleStar()">
|
||||
<mat-icon
|
||||
[ngClass]="{'text-orange-500 dark:text-red-400': mail.starred}"
|
||||
[svgIcon]="'heroicons_outline:star'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Other actions button & menu -->
|
||||
<button
|
||||
class="ml-2"
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="mailMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:ellipsis-vertical'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #mailMenu="matMenu">
|
||||
<!-- Mark as read / unread -->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="mail.unread"
|
||||
(click)="toggleUnread(false)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:envelope-open'"></mat-icon>
|
||||
<span>Mark as read</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="!mail.unread"
|
||||
(click)="toggleUnread(true)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:envelope'"></mat-icon>
|
||||
<span>Mark as unread</span>
|
||||
</button>
|
||||
<!-- Marks as spam / not span-->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() !== 'spam' && getCurrentFolder() !== 'drafts'"
|
||||
(click)="moveToFolder('spam')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:exclamation-triangle'"></mat-icon>
|
||||
<span>Spam</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() === 'spam'"
|
||||
(click)="moveToFolder('inbox')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:exclamation-triangle'"></mat-icon>
|
||||
<span>Not spam</span>
|
||||
</button>
|
||||
<!-- Delete -->
|
||||
<button
|
||||
mat-menu-item
|
||||
*ngIf="getCurrentFolder() !== 'trash'"
|
||||
(click)="moveToFolder('trash')">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
<!-- Subject and Labels -->
|
||||
<div class="flex flex-wrap items-center py-5 px-6">
|
||||
<!-- Subject -->
|
||||
<div class="flex flex-auto my-1 mr-4 text-2xl">{{mail.subject}}</div>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="mail.labels && mail.labels.length > 0">
|
||||
<div class="flex flex-wrap items-center justify-start -mx-1">
|
||||
<ng-container *ngFor="let label of (mail.labels | fuseFindByKey:'id':labels)">
|
||||
<div
|
||||
class="m-1 py-0.5 px-2.5 rounded-full text-sm font-medium whitespace-nowrap"
|
||||
[ngClass]="labelColors[label.color].combined">
|
||||
{{label.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Threads -->
|
||||
<div
|
||||
class="flex flex-col flex-auto shrink-0 lg:shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
|
||||
fuseScrollReset>
|
||||
|
||||
<!-- Thread -->
|
||||
<div class="flex flex-col flex-0 w-full shadow rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
|
||||
|
||||
<div class="flex flex-col py-8 px-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center w-full">
|
||||
|
||||
<!-- Sender avatar -->
|
||||
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
||||
<img
|
||||
class="w-full h-full"
|
||||
[src]="mail.from.avatar"
|
||||
alt="User avatar">
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="ml-4 min-w-0">
|
||||
|
||||
<!-- From -->
|
||||
<div class="font-semibold truncate">{{mail.from.contact.split('<')[0].trim()}}</div>
|
||||
|
||||
<!-- To -->
|
||||
<div class="flex items-center mt-0.5 leading-5">
|
||||
<div>to</div>
|
||||
<div class="ml-1 font-semibold">me</div>
|
||||
<ng-container *ngIf="(mail.ccCount + mail.bccCount) > 0">
|
||||
<div>
|
||||
<span class="ml-1">and</span>
|
||||
<span class="ml-1 font-semibold">{{mail.ccCount + mail.bccCount}}</span>
|
||||
<span
|
||||
class="ml-1 font-semibold"
|
||||
[ngPlural]="(mail.ccCount + mail.bccCount)">
|
||||
<ng-template ngPluralCase="=1">other</ng-template>
|
||||
<ng-template ngPluralCase="other">others</ng-template>
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Info details panel button -->
|
||||
<button
|
||||
class="w-5 h-5 min-h-5 ml-1"
|
||||
mat-icon-button
|
||||
(click)="openInfoDetailsPanel()"
|
||||
#infoDetailsPanelOrigin>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Info details panel -->
|
||||
<ng-template #infoDetailsPanel>
|
||||
<div class="flex flex-col py-4 px-6 w-full max-w-160 space-y-1.5 border text-md rounded shadow-md overflow-auto bg-card">
|
||||
<!-- From -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">from:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.from.contact}}</div>
|
||||
</div>
|
||||
<!-- To -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">to:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.to}}</div>
|
||||
</div>
|
||||
<!-- Cc -->
|
||||
<ng-container *ngIf="mail.cc">
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">cc:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.cc.join(',\n')}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Bbc -->
|
||||
<ng-container *ngIf="mail.bcc">
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">bcc:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.bcc.join(',\n')}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Date -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">date:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.date | date:'EEEE, MMMM d, y - hh:mm a'}}</div>
|
||||
</div>
|
||||
<!-- Subject -->
|
||||
<div class="flex">
|
||||
<div class="min-w-14 font-medium text-right">subject:</div>
|
||||
<div class="pl-2 whitespace-pre-wrap">{{mail.subject}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="flex mt-8 whitespace-pre-line leading-relaxed"
|
||||
[innerHTML]="mail.content">
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<ng-container *ngIf="mail.attachments && mail.attachments.length > 0">
|
||||
<div class="flex flex-col w-full">
|
||||
<!-- Title -->
|
||||
<div class="flex items-center mt-12">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
<div class="ml-2 font-semibold">{{mail.attachments.length}} Attachments</div>
|
||||
</div>
|
||||
|
||||
<!-- Files -->
|
||||
<div class="flex flex-wrap -m-3 mt-3">
|
||||
<ng-container *ngFor="let attachment of mail.attachments">
|
||||
<div class="flex items-center m-3">
|
||||
<!-- Preview -->
|
||||
<img
|
||||
class="w-10 h-10 rounded-md overflow-hidden"
|
||||
*ngIf="attachment.type.startsWith('image/')"
|
||||
[src]="'assets/images/apps/mailbox/' + attachment.preview">
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-md overflow-hidden bg-primary-100"
|
||||
*ngIf="attachment.type.startsWith('application/')">
|
||||
<div class="flex items-center justify-center text-sm font-semibold text-primary-500-800">
|
||||
{{attachment.type.split('/')[1].trim().toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- File info -->
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-md font-medium truncate"
|
||||
[title]="attachment.name">
|
||||
{{attachment.name}}
|
||||
</div>
|
||||
<div
|
||||
class="text-sm font-medium truncate text-secondary"
|
||||
[title]="attachment.size">
|
||||
{{attachment.size / 1000 | number:'1.0-2'}} KB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex w-full p-6 border-t bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<!-- Buttons -->
|
||||
<ng-container *ngIf="!replyFormActive">
|
||||
<div class="flex flex-wrap w-full -m-2">
|
||||
<!-- Reply -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="reply()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-uturn-left'"></mat-icon>
|
||||
<span class="ml-2">Reply</span>
|
||||
</button>
|
||||
<!-- Reply all -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="replyAll()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:arrow-uturn-left'"></mat-icon>
|
||||
<span class="ml-2">Reply All</span>
|
||||
</button>
|
||||
<!-- Forward -->
|
||||
<button
|
||||
class="m-2"
|
||||
mat-stroked-button
|
||||
[color]="'primary'"
|
||||
(click)="forward()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[color]="'primary'"
|
||||
[svgIcon]="'heroicons_solid:chevron-double-right'"></mat-icon>
|
||||
<span class="ml-2">Forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reply form -->
|
||||
<ng-container *ngIf="replyFormActive">
|
||||
<div
|
||||
class="flex flex-col w-full"
|
||||
#replyForm>
|
||||
|
||||
<mat-form-field [subscriptSizing]="'dynamic'">
|
||||
<textarea
|
||||
class="textarea"
|
||||
matInput
|
||||
[placeholder]="'Type your reply here'"
|
||||
[rows]="4"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
|
||||
<div class="-ml-2">
|
||||
<!-- Attach file -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert link -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:link'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert emoji -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:face-smile'"></mat-icon>
|
||||
</button>
|
||||
<!-- Insert image -->
|
||||
<button mat-icon-button>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:photo'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 sm:mt-0">
|
||||
<!-- Discard -->
|
||||
<button
|
||||
class="order-last sm:order-first ml-3 sm:ml-0"
|
||||
mat-button
|
||||
(click)="discard()">
|
||||
Discard
|
||||
</button>
|
||||
<!-- Send -->
|
||||
<button
|
||||
class="sm:ml-3"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="send()">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- Select mail to read template -->
|
||||
<ng-template #selectMailToRead>
|
||||
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:envelope'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
@ -1,389 +0,0 @@
|
||||
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
|
||||
import { TemplatePortal } from '@angular/cdk/portal';
|
||||
import { DatePipe, DecimalPipe, NgClass, NgFor, NgIf, NgPlural, NgPluralCase } from '@angular/common';
|
||||
import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButton, MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
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 { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset';
|
||||
import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
|
||||
import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { Mail, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, RouterLink, MatIconModule, MatMenuModule, NgFor, MatRippleModule, MatCheckboxModule, NgClass, FuseScrollResetDirective, NgPlural, NgPluralCase, MatFormFieldModule, MatInputModule, FuseFindByKeyPipe, DecimalPipe, DatePipe],
|
||||
})
|
||||
export class MailboxDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('infoDetailsPanelOrigin') private _infoDetailsPanelOrigin: MatButton;
|
||||
@ViewChild('infoDetailsPanel') private _infoDetailsPanel: TemplateRef<any>;
|
||||
|
||||
folders: MailFolder[];
|
||||
labelColors: any;
|
||||
labels: MailLabel[];
|
||||
mail: Mail;
|
||||
replyFormActive: boolean = false;
|
||||
private _overlayRef: OverlayRef;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _elementRef: ElementRef,
|
||||
private _mailboxService: MailboxService,
|
||||
private _overlay: Overlay,
|
||||
private _router: Router,
|
||||
private _viewContainerRef: ViewContainerRef,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the label colors
|
||||
this.labelColors = labelColorDefs;
|
||||
|
||||
// Folders
|
||||
this._mailboxService.folders$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((folders: MailFolder[]) =>
|
||||
{
|
||||
this.folders = folders;
|
||||
});
|
||||
|
||||
// Labels
|
||||
this._mailboxService.labels$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((labels: MailLabel[]) =>
|
||||
{
|
||||
this.labels = labels;
|
||||
});
|
||||
|
||||
// Mail
|
||||
this._mailboxService.mail$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mail: Mail) =>
|
||||
{
|
||||
this.mail = mail;
|
||||
});
|
||||
|
||||
// Selected mail changed
|
||||
this._mailboxService.selectedMailChanged
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() =>
|
||||
{
|
||||
// De-activate the reply form
|
||||
this.replyFormActive = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get the current folder
|
||||
*/
|
||||
getCurrentFolder(): any
|
||||
{
|
||||
return this._activatedRoute.snapshot.paramMap.get('folder');
|
||||
}
|
||||
|
||||
/**
|
||||
* Move to folder
|
||||
*
|
||||
* @param folderSlug
|
||||
*/
|
||||
moveToFolder(folderSlug: string): void
|
||||
{
|
||||
// Find the folder details
|
||||
const folder = this.folders.find(item => item.slug === folderSlug);
|
||||
|
||||
// Return if the current folder of the mail
|
||||
// is already equals to the given folder
|
||||
if ( this.mail.folder === folder.id )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Update the mail object
|
||||
this.mail.folder = folder.id;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {folder: this.mail.folder}).subscribe();
|
||||
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
toggleLabel(label: MailLabel): void
|
||||
{
|
||||
let deleted = false;
|
||||
|
||||
// Update the mail object
|
||||
if ( this.mail.labels.includes(label.id) )
|
||||
{
|
||||
// Set the deleted
|
||||
deleted = true;
|
||||
|
||||
// Delete the label
|
||||
this.mail.labels.splice(this.mail.labels.indexOf(label.id), 1);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Add the label
|
||||
this.mail.labels.push(label.id);
|
||||
}
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {labels: this.mail.labels}).subscribe();
|
||||
|
||||
// If the label was deleted...
|
||||
if ( deleted )
|
||||
{
|
||||
// If the current activated route has a label parameter and it equals to the one we are removing...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('label') && this._activatedRoute.snapshot.paramMap.get('label') === label.slug )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle important
|
||||
*/
|
||||
toggleImportant(): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.important = !this.mail.important;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {important: this.mail.important}).subscribe();
|
||||
|
||||
// If the important was removed...
|
||||
if ( !this.mail.important )
|
||||
{
|
||||
// If the current activated route has a filter parameter and it equals to the 'important'...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'important' )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle star
|
||||
*/
|
||||
toggleStar(): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.starred = !this.mail.starred;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {starred: this.mail.starred}).subscribe();
|
||||
|
||||
// If the star was removed...
|
||||
if ( !this.mail.starred )
|
||||
{
|
||||
// If the current activated route has a filter parameter and it equals to the 'starred'...
|
||||
if ( this._activatedRoute.snapshot.paramMap.get('filter') && this._activatedRoute.snapshot.paramMap.get('filter') === 'starred' )
|
||||
{
|
||||
// Navigate to the parent
|
||||
this._router.navigate(['./'], {relativeTo: this._activatedRoute.parent});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle unread
|
||||
*
|
||||
* @param unread
|
||||
*/
|
||||
toggleUnread(unread: boolean): void
|
||||
{
|
||||
// Update the mail object
|
||||
this.mail.unread = unread;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(this.mail.id, {unread: this.mail.unread}).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply
|
||||
*/
|
||||
reply(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply all
|
||||
*/
|
||||
replyAll(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Forward
|
||||
*/
|
||||
forward(): void
|
||||
{
|
||||
// Activate the reply form
|
||||
this.replyFormActive = true;
|
||||
|
||||
// Scroll to the bottom of the details pane
|
||||
setTimeout(() =>
|
||||
{
|
||||
this._elementRef.nativeElement.scrollTop = this._elementRef.nativeElement.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Discard
|
||||
*/
|
||||
discard(): void
|
||||
{
|
||||
// Deactivate the reply form
|
||||
this.replyFormActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Send
|
||||
*/
|
||||
send(): void
|
||||
{
|
||||
// Deactivate the reply form
|
||||
this.replyFormActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open info details panel
|
||||
*/
|
||||
openInfoDetailsPanel(): void
|
||||
{
|
||||
// Create the overlay
|
||||
this._overlayRef = this._overlay.create({
|
||||
backdropClass : '',
|
||||
hasBackdrop : true,
|
||||
scrollStrategy : this._overlay.scrollStrategies.block(),
|
||||
positionStrategy: this._overlay.position()
|
||||
.flexibleConnectedTo(this._infoDetailsPanelOrigin._elementRef.nativeElement)
|
||||
.withFlexibleDimensions(true)
|
||||
.withViewportMargin(16)
|
||||
.withLockedPosition(true)
|
||||
.withPositions([
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'bottom',
|
||||
overlayX: 'start',
|
||||
overlayY: 'top',
|
||||
},
|
||||
{
|
||||
originX : 'start',
|
||||
originY : 'top',
|
||||
overlayX: 'start',
|
||||
overlayY: 'bottom',
|
||||
},
|
||||
{
|
||||
originX : 'end',
|
||||
originY : 'bottom',
|
||||
overlayX: 'end',
|
||||
overlayY: 'top',
|
||||
},
|
||||
{
|
||||
originX : 'end',
|
||||
originY : 'top',
|
||||
overlayX: 'end',
|
||||
overlayY: 'bottom',
|
||||
},
|
||||
]),
|
||||
});
|
||||
|
||||
// Create a portal from the template
|
||||
const templatePortal = new TemplatePortal(this._infoDetailsPanel, this._viewContainerRef);
|
||||
|
||||
// Attach the portal to the overlay
|
||||
this._overlayRef.attach(templatePortal);
|
||||
|
||||
// Subscribe to the backdrop click
|
||||
this._overlayRef.backdropClick().subscribe(() =>
|
||||
{
|
||||
// If overlay exists and attached...
|
||||
if ( this._overlayRef && this._overlayRef.hasAttached() )
|
||||
{
|
||||
// Detach it
|
||||
this._overlayRef.detach();
|
||||
}
|
||||
|
||||
// If template portal exists and attached...
|
||||
if ( templatePortal && templatePortal.isAttached )
|
||||
{
|
||||
// Detach it
|
||||
templatePortal.detach();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
||||
|
||||
<!-- Select mail to read -->
|
||||
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:envelope'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-empty-details',
|
||||
templateUrl : './empty-details.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatIconModule],
|
||||
})
|
||||
export class MailboxEmptyDetailsComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,154 +0,0 @@
|
||||
<div class="relative flex flex-auto w-full bg-card dark:bg-transparent">
|
||||
|
||||
<!-- Mails list -->
|
||||
<ng-container *ngIf="mails && mails.length > 0; else noMails">
|
||||
<div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-90 lg:max-w-90 border-r z-10">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative flex flex-0 items-center justify-between h-16 px-4 border-b bg-gray-50 dark:bg-transparent">
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="mailboxComponent.drawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
|
||||
</button>
|
||||
<!-- Category name -->
|
||||
<div class="ml-2 font-semibold uppercase">{{category.name}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center">
|
||||
<!-- Info -->
|
||||
<div class="flex items-center mr-3 text-md font-medium">
|
||||
<span>{{pagination.startIndex + 1}}</span>
|
||||
<span class="mx-1 text-secondary">-</span>
|
||||
<span>{{pagination.endIndex + 1}}</span>
|
||||
<span class="mx-1 text-secondary">of</span>
|
||||
<span>{{pagination.totalResults}}</span>
|
||||
</div>
|
||||
<!-- Previous page button -->
|
||||
<a
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[disabled]="pagination.currentPage === 1"
|
||||
[routerLink]="['../' + (pagination.currentPage > 1 ? pagination.currentPage - 1 : 1 )]">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
|
||||
</a>
|
||||
<!-- Next page button-->
|
||||
<a
|
||||
class="w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[disabled]="pagination.currentPage === pagination.lastPage"
|
||||
[routerLink]="['../' + (pagination.currentPage < pagination.lastPage ? pagination.currentPage + 1 : pagination.lastPage )]">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Loading bar -->
|
||||
<mat-progress-bar
|
||||
class="absolute inset-x-0 bottom-0 h-0.5"
|
||||
*ngIf="mailsLoading"
|
||||
[mode]="'indeterminate'"></mat-progress-bar>
|
||||
</div>
|
||||
|
||||
<!-- Mail list -->
|
||||
<div
|
||||
class="overflow-y-auto"
|
||||
#mailList>
|
||||
|
||||
<!-- Item loop -->
|
||||
<ng-container *ngFor="let mail of mails; let i = index; trackBy: trackByFn">
|
||||
|
||||
<!-- Item -->
|
||||
<a
|
||||
class="relative flex border-t first:border-0 hover:bg-hover"
|
||||
[routerLink]="[mail.id]"
|
||||
(click)="onMailSelected(mail)">
|
||||
|
||||
<!-- Item content -->
|
||||
<div
|
||||
class="flex flex-col items-start justify-start w-full py-6 pr-4 pl-5 border-l-4 border-transparent"
|
||||
[ngClass]="{'border-primary': mail.unread,
|
||||
'bg-primary-50 dark:bg-black dark:bg-opacity-5': selectedMail && selectedMail.id === mail.id}">
|
||||
|
||||
<!-- Info -->
|
||||
<div class="flex items-center w-full">
|
||||
<!-- Sender name -->
|
||||
<div class="mr-2 font-semibold truncate">
|
||||
{{mail.from.contact.split('<')[0].trim()}}
|
||||
</div>
|
||||
<!-- Important indicator -->
|
||||
<mat-icon
|
||||
class="mr-3 icon-size-4 text-red-500 dark:text-red-600"
|
||||
*ngIf="mail.important"
|
||||
[svgIcon]="'heroicons_solid:exclamation-circle'"></mat-icon>
|
||||
<!-- Date -->
|
||||
<div class="ml-auto text-md text-right whitespace-nowrap text-hint">
|
||||
{{mail.date | date:'LLL dd'}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subject -->
|
||||
<div class="flex items-center w-full mt-1">
|
||||
<span class="leading-4 truncate">{{mail.subject}}</span>
|
||||
<!-- Indicators -->
|
||||
<div
|
||||
class="flex ml-auto pl-2"
|
||||
*ngIf="(mail.attachments && mail.attachments.length > 0) || mail.starred">
|
||||
<!-- Attachments -->
|
||||
<mat-icon
|
||||
class="flex justify-center icon-size-4"
|
||||
*ngIf="mail.attachments && mail.attachments.length > 0"
|
||||
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
||||
<!-- Starred -->
|
||||
<mat-icon
|
||||
class="flex justify-center icon-size-4 ml-1 text-orange-500 dark:text-orange-400"
|
||||
*ngIf="mail.starred"
|
||||
[svgIcon]="'heroicons_solid:star'"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Excerpt -->
|
||||
<div class="mt-2 leading-normal line-clamp-2 text-secondary">
|
||||
{{mail.content}}...
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- No mails template -->
|
||||
<ng-template #noMails>
|
||||
<div class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:envelope'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no e-mails</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- Mail details -->
|
||||
<ng-container *ngIf="mails && mails.length > 0">
|
||||
<div
|
||||
class="flex-auto"
|
||||
[ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedMail && selectedMail.id,
|
||||
'hidden lg:flex': !selectedMail || !selectedMail.id}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
@ -1,142 +0,0 @@
|
||||
import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { RouterLink, RouterOutlet } from '@angular/router';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { Mail, MailCategory } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, MatIconModule, RouterLink, MatProgressBarModule, NgFor, NgClass, RouterOutlet, DatePipe],
|
||||
})
|
||||
export class MailboxListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('mailList') mailList: ElementRef;
|
||||
|
||||
category: MailCategory;
|
||||
mails: Mail[];
|
||||
mailsLoading: boolean = false;
|
||||
pagination: any;
|
||||
selectedMail: Mail;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public mailboxComponent: MailboxComponent,
|
||||
private _mailboxService: MailboxService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Category
|
||||
this._mailboxService.category$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((category: MailCategory) =>
|
||||
{
|
||||
this.category = category;
|
||||
});
|
||||
|
||||
// Mails
|
||||
this._mailboxService.mails$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mails: Mail[]) =>
|
||||
{
|
||||
this.mails = mails;
|
||||
});
|
||||
|
||||
// Mails loading
|
||||
this._mailboxService.mailsLoading$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mailsLoading: boolean) =>
|
||||
{
|
||||
this.mailsLoading = mailsLoading;
|
||||
|
||||
// If the mail list element is available & the mails are loaded...
|
||||
if ( this.mailList && !mailsLoading )
|
||||
{
|
||||
// Reset the mail list element scroll position to top
|
||||
this.mailList.nativeElement.scrollTo(0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
// Pagination
|
||||
this._mailboxService.pagination$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((pagination) =>
|
||||
{
|
||||
this.pagination = pagination;
|
||||
});
|
||||
|
||||
// Selected mail
|
||||
this._mailboxService.mail$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((mail: Mail) =>
|
||||
{
|
||||
this.selectedMail = mail;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On mail selected
|
||||
*
|
||||
* @param mail
|
||||
*/
|
||||
onMailSelected(mail: Mail): void
|
||||
{
|
||||
// If the mail is unread...
|
||||
if ( mail.unread )
|
||||
{
|
||||
// Update the mail object
|
||||
mail.unread = false;
|
||||
|
||||
// Update the mail on the server
|
||||
this._mailboxService.updateMail(mail.id, {unread: false}).subscribe();
|
||||
}
|
||||
|
||||
// Execute the mailSelected observable
|
||||
this._mailboxService.selectedMailChanged.next(mail);
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
}
|
||||
@ -1,29 +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-72 dark:bg-gray-900"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#drawer>
|
||||
|
||||
<!-- Mailbox sidebar -->
|
||||
<mailbox-sidebar></mailbox-sidebar>
|
||||
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col overflow-hidden">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto overflow-hidden">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,67 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { MailboxSidebarComponent } from './sidebar/sidebar.component';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox',
|
||||
templateUrl : './mailbox.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, MailboxSidebarComponent, RouterOutlet],
|
||||
})
|
||||
export class MailboxComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@ViewChild('drawer') drawer: MatDrawer;
|
||||
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) =>
|
||||
{
|
||||
// Set the drawerMode and drawerOpened if the given breakpoint is active
|
||||
if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
export const labelColors = [
|
||||
'gray',
|
||||
'red',
|
||||
'orange',
|
||||
'yellow',
|
||||
'green',
|
||||
'teal',
|
||||
'blue',
|
||||
'indigo',
|
||||
'purple',
|
||||
'pink',
|
||||
];
|
||||
|
||||
export const labelColorDefs = {
|
||||
gray : {
|
||||
text : 'text-gray-500',
|
||||
bg : 'bg-gray-500',
|
||||
combined: 'text-gray-800 bg-gray-100',
|
||||
},
|
||||
red : {
|
||||
text : 'text-red-500',
|
||||
bg : 'bg-red-500',
|
||||
combined: 'text-red-800 bg-red-100',
|
||||
},
|
||||
orange: {
|
||||
text : 'text-orange-500',
|
||||
bg : 'bg-orange-500',
|
||||
combined: 'text-orange-800 bg-orange-100',
|
||||
},
|
||||
yellow: {
|
||||
text : 'text-yellow-500',
|
||||
bg : 'bg-yellow-500',
|
||||
combined: 'text-yellow-800 bg-yellow-100',
|
||||
},
|
||||
green : {
|
||||
text : 'text-green-500',
|
||||
bg : 'bg-green-500',
|
||||
combined: 'text-green-800 bg-green-100',
|
||||
},
|
||||
teal : {
|
||||
text : 'text-teal-500',
|
||||
bg : 'bg-teal-500',
|
||||
combined: 'text-teal-800 bg-teal-100',
|
||||
},
|
||||
blue : {
|
||||
text : 'text-blue-500',
|
||||
bg : 'bg-blue-500',
|
||||
combined: 'text-blue-800 bg-blue-100',
|
||||
},
|
||||
indigo: {
|
||||
text : 'text-indigo-500',
|
||||
bg : 'bg-indigo-500',
|
||||
combined: 'text-indigo-800 bg-indigo-100',
|
||||
},
|
||||
purple: {
|
||||
text : 'text-purple-500',
|
||||
bg : 'bg-purple-500',
|
||||
combined: 'text-purple-800 bg-purple-100',
|
||||
},
|
||||
pink : {
|
||||
text : 'text-pink-500',
|
||||
bg : 'bg-pink-500',
|
||||
combined: 'text-pink-800 bg-pink-100',
|
||||
},
|
||||
};
|
||||
@ -1,295 +0,0 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, Routes, UrlMatchResult, UrlSegment } from '@angular/router';
|
||||
import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
|
||||
import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
|
||||
import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
|
||||
import { isEqual } from 'lodash-es';
|
||||
import { catchError, finalize, forkJoin, throwError } from 'rxjs';
|
||||
|
||||
/**
|
||||
* Mailbox custom route matcher
|
||||
*
|
||||
* @param url
|
||||
*/
|
||||
const mailboxRouteMatcher: (url: UrlSegment[]) => UrlMatchResult = (url: UrlSegment[]) =>
|
||||
{
|
||||
// Prepare consumed url and positional parameters
|
||||
let consumed = url;
|
||||
const posParams = {};
|
||||
|
||||
// Settings
|
||||
if ( url[0].path === 'settings' )
|
||||
{
|
||||
// Do not match
|
||||
return null;
|
||||
}
|
||||
// Filter or label
|
||||
else if ( url[0].path === 'filter' || url[0].path === 'label' )
|
||||
{
|
||||
posParams[url[0].path] = url[1];
|
||||
posParams['page'] = url[2];
|
||||
|
||||
// Remove the id if exists
|
||||
if ( url[3] )
|
||||
{
|
||||
consumed = url.slice(0, -1);
|
||||
}
|
||||
}
|
||||
// Folder
|
||||
else
|
||||
{
|
||||
posParams['folder'] = url[0];
|
||||
posParams['page'] = url[1];
|
||||
|
||||
// Remove the id if exists
|
||||
if ( url[2] )
|
||||
{
|
||||
consumed = url.slice(0, -1);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
consumed,
|
||||
posParams,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Mailbox custom guards and resolvers runner
|
||||
*
|
||||
* @param from
|
||||
* @param to
|
||||
*/
|
||||
const mailboxRunGuardsAndResolvers: (from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => boolean = (from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) =>
|
||||
{
|
||||
// If we are navigating from mail to mails, meaning there is an id in
|
||||
// from's deepest first child and there isn't one in the to's, we will
|
||||
// trigger the resolver
|
||||
|
||||
// Get the current activated route of the 'from'
|
||||
let fromCurrentRoute = from;
|
||||
while ( fromCurrentRoute.firstChild )
|
||||
{
|
||||
fromCurrentRoute = fromCurrentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Get the current activated route of the 'to'
|
||||
let toCurrentRoute = to;
|
||||
while ( toCurrentRoute.firstChild )
|
||||
{
|
||||
toCurrentRoute = toCurrentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Trigger the resolver if the condition met
|
||||
if ( fromCurrentRoute.paramMap.get('id') && !toCurrentRoute.paramMap.get('id') )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
// If the from and to params are equal, don't trigger the resolver
|
||||
const fromParams = {};
|
||||
const toParams = {};
|
||||
|
||||
from.paramMap.keys.forEach((key) =>
|
||||
{
|
||||
fromParams[key] = from.paramMap.get(key);
|
||||
});
|
||||
|
||||
to.paramMap.keys.forEach((key) =>
|
||||
{
|
||||
toParams[key] = to.paramMap.get(key);
|
||||
});
|
||||
|
||||
if ( isEqual(fromParams, toParams) )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
// Trigger the resolver on other cases
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Mails resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const mailsResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const mailboxService = inject(MailboxService);
|
||||
const router = inject(Router);
|
||||
|
||||
// Don't allow page param to go below 1
|
||||
if ( route.paramMap.get('page') && parseInt(route.paramMap.get('page'), 10) <= 0 )
|
||||
{
|
||||
// Get the parent url
|
||||
const url = state.url.split('/').slice(0, -1).join('/') + '/1';
|
||||
|
||||
// Navigate to there
|
||||
router.navigateByUrl(url);
|
||||
|
||||
// Don't allow request to go through
|
||||
return false;
|
||||
}
|
||||
|
||||
// Create and build the sources array
|
||||
const sources = [];
|
||||
|
||||
// If folder is set on the parameters...
|
||||
if ( route.paramMap.get('folder') )
|
||||
{
|
||||
sources.push(mailboxService.getMailsByFolder(route.paramMap.get('folder'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// If filter is set on the parameters...
|
||||
if ( route.paramMap.get('filter') )
|
||||
{
|
||||
sources.push(mailboxService.getMailsByFilter(route.paramMap.get('filter'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// If label is set on the parameters...
|
||||
if ( route.paramMap.get('label') )
|
||||
{
|
||||
sources.push(mailboxService.getMailsByLabel(route.paramMap.get('label'), route.paramMap.get('page')));
|
||||
}
|
||||
|
||||
// Fork join all the sources
|
||||
return forkJoin(sources)
|
||||
.pipe(
|
||||
finalize(() =>
|
||||
{
|
||||
// If there is no selected mail, reset the mail every
|
||||
// time mail list changes. This will ensure that the
|
||||
// mail will be reset while navigating between the
|
||||
// folders/filters/labels, but it won't reset on page
|
||||
// reload if we are reading a mail.
|
||||
|
||||
// Try to get the current activated route
|
||||
let currentRoute = route;
|
||||
while ( currentRoute.firstChild )
|
||||
{
|
||||
currentRoute = currentRoute.firstChild;
|
||||
}
|
||||
|
||||
// Make sure there is no 'id' parameter on the current route
|
||||
if ( !currentRoute.paramMap.get('id') )
|
||||
{
|
||||
// Reset the mail
|
||||
mailboxService.resetMail().subscribe();
|
||||
}
|
||||
}),
|
||||
|
||||
// Error here means the requested page is not available
|
||||
catchError((error) =>
|
||||
{
|
||||
// Log the error
|
||||
console.error(error.message);
|
||||
|
||||
// Get the parent url and append the last possible page number to the parent url
|
||||
const url = state.url.split('/').slice(0, -1).join('/') + '/' + error.pagination.lastPage;
|
||||
|
||||
// Navigate to there
|
||||
router.navigateByUrl(url);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Mail resolver
|
||||
*
|
||||
* @param route
|
||||
* @param state
|
||||
*/
|
||||
const mailResolver = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
|
||||
{
|
||||
const mailboxService = inject(MailboxService);
|
||||
const router = inject(Router);
|
||||
|
||||
return mailboxService.getMailById(route.paramMap.get('id'))
|
||||
.pipe(
|
||||
// Error here means the requested mail is either
|
||||
// not available on the requested page or not
|
||||
// available at all
|
||||
catchError((error) =>
|
||||
{
|
||||
// Log the error
|
||||
console.error(error);
|
||||
|
||||
// Get the parent url
|
||||
const parentUrl = state.url.split('/').slice(0, -1).join('/');
|
||||
|
||||
// Navigate to there
|
||||
router.navigateByUrl(parentUrl);
|
||||
|
||||
// Throw an error
|
||||
return throwError(error);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
redirectTo: 'inbox/1',
|
||||
pathMatch : 'full',
|
||||
},
|
||||
{
|
||||
path : 'filter/:funnel',
|
||||
redirectTo: 'filter/:filter/1',
|
||||
pathMatch : 'full',
|
||||
},
|
||||
{
|
||||
path : 'label/:label',
|
||||
redirectTo: 'label/:label/1',
|
||||
pathMatch : 'full',
|
||||
},
|
||||
{
|
||||
path : ':folder',
|
||||
redirectTo: ':folder/1',
|
||||
pathMatch : 'full',
|
||||
},
|
||||
{
|
||||
path : '',
|
||||
component: MailboxComponent,
|
||||
resolve : {
|
||||
filters: () => inject(MailboxService).getFilters(),
|
||||
folders: () => inject(MailboxService).getFolders(),
|
||||
labels : () => inject(MailboxService).getLabels(),
|
||||
},
|
||||
children : [
|
||||
{
|
||||
component : MailboxListComponent,
|
||||
matcher : mailboxRouteMatcher,
|
||||
runGuardsAndResolvers: mailboxRunGuardsAndResolvers,
|
||||
resolve : {
|
||||
mails: mailsResolver,
|
||||
},
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
pathMatch: 'full',
|
||||
component: MailboxEmptyDetailsComponent,
|
||||
},
|
||||
{
|
||||
path : ':id',
|
||||
component: MailboxDetailsComponent,
|
||||
resolve : {
|
||||
mail: mailResolver,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path : 'settings',
|
||||
component: MailboxSettingsComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,400 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Mail, MailCategory, MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class MailboxService
|
||||
{
|
||||
selectedMailChanged: BehaviorSubject<any> = new BehaviorSubject(null);
|
||||
private _category: BehaviorSubject<MailCategory> = new BehaviorSubject(null);
|
||||
private _filters: BehaviorSubject<MailFilter[]> = new BehaviorSubject(null);
|
||||
private _folders: BehaviorSubject<MailFolder[]> = new BehaviorSubject(null);
|
||||
private _labels: BehaviorSubject<MailLabel[]> = new BehaviorSubject(null);
|
||||
private _mails: BehaviorSubject<Mail[]> = new BehaviorSubject(null);
|
||||
private _mailsLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||
private _mail: BehaviorSubject<Mail> = new BehaviorSubject(null);
|
||||
private _pagination: BehaviorSubject<any> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for category
|
||||
*/
|
||||
get category$(): Observable<MailCategory>
|
||||
{
|
||||
return this._category.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for filters
|
||||
*/
|
||||
get filters$(): Observable<MailFilter[]>
|
||||
{
|
||||
return this._filters.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for folders
|
||||
*/
|
||||
get folders$(): Observable<MailFolder[]>
|
||||
{
|
||||
return this._folders.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for labels
|
||||
*/
|
||||
get labels$(): Observable<MailLabel[]>
|
||||
{
|
||||
return this._labels.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mails
|
||||
*/
|
||||
get mails$(): Observable<Mail[]>
|
||||
{
|
||||
return this._mails.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mails loading
|
||||
*/
|
||||
get mailsLoading$(): Observable<boolean>
|
||||
{
|
||||
return this._mailsLoading.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for mail
|
||||
*/
|
||||
get mail$(): Observable<Mail>
|
||||
{
|
||||
return this._mail.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for pagination
|
||||
*/
|
||||
get pagination$(): Observable<any>
|
||||
{
|
||||
return this._pagination.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get filters
|
||||
*/
|
||||
getFilters(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailFilter[]>('api/apps/mailbox/filters').pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._filters.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get folders
|
||||
*/
|
||||
getFolders(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailFolder[]>('api/apps/mailbox/folders').pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._folders.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get labels
|
||||
*/
|
||||
getLabels(): Observable<any>
|
||||
{
|
||||
return this._httpClient.get<MailLabel[]>('api/apps/mailbox/labels').pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._labels.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by filter
|
||||
*/
|
||||
getMailsByFilter(filter: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
filter,
|
||||
page,
|
||||
},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._category.next({
|
||||
type: 'filter',
|
||||
name: filter,
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) =>
|
||||
{
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination,
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by folder
|
||||
*/
|
||||
getMailsByFolder(folder: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
folder,
|
||||
page,
|
||||
},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._category.next({
|
||||
type: 'folder',
|
||||
name: folder,
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) =>
|
||||
{
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination,
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mails by label
|
||||
*/
|
||||
getMailsByLabel(label: string, page: string = '1'): Observable<any>
|
||||
{
|
||||
// Execute the mails loading with true
|
||||
this._mailsLoading.next(true);
|
||||
|
||||
return this._httpClient.get<Mail[]>('api/apps/mailbox/mails', {
|
||||
params: {
|
||||
label,
|
||||
page,
|
||||
},
|
||||
}).pipe(
|
||||
tap((response: any) =>
|
||||
{
|
||||
this._category.next({
|
||||
type: 'label',
|
||||
name: label,
|
||||
});
|
||||
this._mails.next(response.mails);
|
||||
this._pagination.next(response.pagination);
|
||||
this._mailsLoading.next(false);
|
||||
}),
|
||||
switchMap((response) =>
|
||||
{
|
||||
if ( response.mails === null )
|
||||
{
|
||||
return throwError({
|
||||
message : 'Requested page is not available!',
|
||||
pagination: response.pagination,
|
||||
});
|
||||
}
|
||||
|
||||
return of(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get mail by id
|
||||
*/
|
||||
getMailById(id: string): Observable<any>
|
||||
{
|
||||
return this._mails.pipe(
|
||||
take(1),
|
||||
map((mails) =>
|
||||
{
|
||||
// Find the mail
|
||||
const mail = mails.find(item => item.id === id) || null;
|
||||
|
||||
// Update the mail
|
||||
this._mail.next(mail);
|
||||
|
||||
// Return the mail
|
||||
return mail;
|
||||
}),
|
||||
switchMap((mail) =>
|
||||
{
|
||||
if ( !mail )
|
||||
{
|
||||
return throwError('Could not found mail with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(mail);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update mail
|
||||
*
|
||||
* @param id
|
||||
* @param mail
|
||||
*/
|
||||
updateMail(id: string, mail: Mail): Observable<any>
|
||||
{
|
||||
return this._httpClient.patch('api/apps/mailbox/mail', {
|
||||
id,
|
||||
mail,
|
||||
}).pipe(
|
||||
tap(() =>
|
||||
{
|
||||
// Re-fetch the folders on mail update
|
||||
// to get the updated counts on the sidebar
|
||||
this.getFolders().subscribe();
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the current mail
|
||||
*/
|
||||
resetMail(): Observable<boolean>
|
||||
{
|
||||
return of(true).pipe(
|
||||
take(1),
|
||||
tap(() =>
|
||||
{
|
||||
this._mail.next(null);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
addLabel(label: MailLabel): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.post<MailLabel>('api/apps/mailbox/label', {label}).pipe(
|
||||
map((newLabel) =>
|
||||
{
|
||||
// Update the labels with the new label
|
||||
this._labels.next([...labels, newLabel]);
|
||||
|
||||
// Return the new label
|
||||
return newLabel;
|
||||
}),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update label
|
||||
*
|
||||
* @param id
|
||||
* @param label
|
||||
*/
|
||||
updateLabel(id: string, label: MailLabel): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.patch<MailLabel>('api/apps/mailbox/label', {
|
||||
id,
|
||||
label,
|
||||
}).pipe(
|
||||
map((updatedLabel: any) =>
|
||||
{
|
||||
// Find the index of the updated label within the labels
|
||||
const index = labels.findIndex(item => item.id === id);
|
||||
|
||||
// Update the label
|
||||
labels[index] = updatedLabel;
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
|
||||
// Return the updated label
|
||||
return updatedLabel;
|
||||
}),
|
||||
)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete label
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteLabel(id: string): Observable<any>
|
||||
{
|
||||
return this.labels$.pipe(
|
||||
take(1),
|
||||
switchMap(labels => this._httpClient.delete('api/apps/mailbox/label', {params: {id}}).pipe(
|
||||
map((isDeleted: any) =>
|
||||
{
|
||||
// Find the index of the deleted label within the labels
|
||||
const index = labels.findIndex(item => item.id === id);
|
||||
|
||||
// Delete the label
|
||||
labels.splice(index, 1);
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
}),
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
export interface Mail
|
||||
{
|
||||
id?: string;
|
||||
type?: string;
|
||||
from?: {
|
||||
avatar?: string;
|
||||
contact?: string;
|
||||
};
|
||||
to?: string;
|
||||
cc?: string[];
|
||||
ccCount?: number;
|
||||
bcc?: string[];
|
||||
bccCount?: number;
|
||||
date?: string;
|
||||
subject?: string;
|
||||
content?: string;
|
||||
attachments?: {
|
||||
type?: string;
|
||||
name?: string;
|
||||
size?: number;
|
||||
preview?: string;
|
||||
downloadUrl?: string;
|
||||
}[];
|
||||
starred?: boolean;
|
||||
important?: boolean;
|
||||
unread?: boolean;
|
||||
folder?: string;
|
||||
labels?: string[];
|
||||
}
|
||||
|
||||
export interface MailCategory
|
||||
{
|
||||
type: 'folder' | 'filter' | 'label';
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface MailFolder
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
icon: string;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export interface MailFilter
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export interface MailLabel
|
||||
{
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
color: string;
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
<div class="flex flex-col flex-auto overflow-y-auto p-8">
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Sidebar toggle button -->
|
||||
<div class="md:hidden -ml-2 mr-3">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="mailboxComponent.drawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<div class="text-3xl font-extrabold tracking-tight">Manage Labels</div>
|
||||
<div class="text-secondary">Create, update and delete labels</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Labels form -->
|
||||
<form
|
||||
class="mt-8"
|
||||
[formGroup]="labelsForm">
|
||||
|
||||
<!-- New label -->
|
||||
<div
|
||||
class="flex items-center justify-start w-full max-w-80 mt-6"
|
||||
[formGroupName]="'newLabel'">
|
||||
<mat-form-field class="w-full">
|
||||
<mat-label>New Label</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Label title'">
|
||||
<mat-select
|
||||
[formControlName]="'color'"
|
||||
[disableOptionCentering]="true"
|
||||
matPrefix>
|
||||
<mat-select-trigger class="h-6">
|
||||
<mat-icon
|
||||
[ngClass]="labelColorDefs[labelsForm.get('newLabel.color').value].text"
|
||||
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<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]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
[disabled]="!labelsForm.get('newLabel').valid || !labelsForm.get('newLabel').dirty"
|
||||
(click)="addLabel()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Labels -->
|
||||
<div
|
||||
class="flex flex-col w-full max-w-80 mt-4"
|
||||
[formArrayName]="'labels'">
|
||||
<!-- Label -->
|
||||
<ng-container *ngFor="let label of labelsForm.get('labels')['controls']">
|
||||
<mat-form-field class="w-full">
|
||||
<input
|
||||
matInput
|
||||
[formControl]="label.get('title')">
|
||||
<mat-select
|
||||
[formControl]="label.get('color')"
|
||||
[disableOptionCentering]="true"
|
||||
matPrefix>
|
||||
<mat-select-trigger class="h-6">
|
||||
<mat-icon
|
||||
[ngClass]="labelColorDefs[label.get('color').value].text"
|
||||
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</mat-select-trigger>
|
||||
<div class="px-4 pt-5 text-xl font-semibold">Label color</div>
|
||||
<div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
|
||||
<ng-container *ngFor="let color of labelColors">
|
||||
<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]="labelColorDefs[color].bg"></span>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-select>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
(click)="deleteLabel(label.get('id').value)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
@ -1,156 +0,0 @@
|
||||
import { NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
|
||||
import { labelColorDefs, labelColors } from 'app/modules/admin/apps/mailbox/mailbox.constants';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { debounceTime, take } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-settings',
|
||||
templateUrl : './settings.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, NgClass, NgFor, MatOptionModule, NgIf],
|
||||
})
|
||||
export class MailboxSettingsComponent implements OnInit
|
||||
{
|
||||
labelColors: any = labelColors;
|
||||
labelColorDefs: any = labelColorDefs;
|
||||
labels: MailLabel[];
|
||||
labelsForm: UntypedFormGroup;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
public mailboxComponent: MailboxComponent,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
private _mailboxService: MailboxService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Create the labels form
|
||||
this.labelsForm = this._formBuilder.group({
|
||||
labels : this._formBuilder.array([]),
|
||||
newLabel: this._formBuilder.group({
|
||||
title: ['', Validators.required],
|
||||
color: ['orange'],
|
||||
}),
|
||||
});
|
||||
|
||||
// Labels
|
||||
this._mailboxService.labels$
|
||||
.pipe(take(1))
|
||||
.subscribe((labels: MailLabel[]) =>
|
||||
{
|
||||
// Get the labels
|
||||
this.labels = labels;
|
||||
|
||||
// Iterate through the labels
|
||||
labels.forEach((label) =>
|
||||
{
|
||||
// Create a label form group
|
||||
const labelFormGroup = this._formBuilder.group({
|
||||
id : [label.id],
|
||||
title: [label.title, Validators.required],
|
||||
slug : [label.slug],
|
||||
color: [label.color],
|
||||
});
|
||||
|
||||
// Add the label form group to the labels form array
|
||||
(this.labelsForm.get('labels') as UntypedFormArray).push(labelFormGroup);
|
||||
});
|
||||
});
|
||||
|
||||
// Update labels when there is a value change
|
||||
this.labelsForm.get('labels').valueChanges
|
||||
.pipe(debounceTime(500))
|
||||
.subscribe(() =>
|
||||
{
|
||||
this.updateLabels();
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Add a label
|
||||
*/
|
||||
addLabel(): void
|
||||
{
|
||||
// Add label to the server
|
||||
this._mailboxService.addLabel(this.labelsForm.get('newLabel').value).subscribe((addedLabel) =>
|
||||
{
|
||||
// Push the new label to the labels form array
|
||||
(this.labelsForm.get('labels') as UntypedFormArray).push(this._formBuilder.group({
|
||||
id : [addedLabel.id],
|
||||
title: [addedLabel.title, Validators.required],
|
||||
slug : [addedLabel.slug],
|
||||
color: [addedLabel.color],
|
||||
}));
|
||||
|
||||
// Reset the new label form
|
||||
this.labelsForm.get('newLabel').markAsPristine();
|
||||
this.labelsForm.get('newLabel').markAsUntouched();
|
||||
this.labelsForm.get('newLabel.title').reset();
|
||||
this.labelsForm.get('newLabel.title').clearValidators();
|
||||
this.labelsForm.get('newLabel.title').updateValueAndValidity();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a label
|
||||
*/
|
||||
deleteLabel(id: string): void
|
||||
{
|
||||
// Get the labels form array
|
||||
const labelsFormArray = this.labelsForm.get('labels') as UntypedFormArray;
|
||||
|
||||
// Remove the label from the labels form array
|
||||
labelsFormArray.removeAt(labelsFormArray.value.findIndex(label => label.id === id));
|
||||
|
||||
// Delete label on the server
|
||||
this._mailboxService.deleteLabel(id).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update labels
|
||||
*/
|
||||
updateLabels(): void
|
||||
{
|
||||
// Iterate through the labels form array controls
|
||||
(this.labelsForm.get('labels') as UntypedFormArray).controls.forEach((labelFormGroup) =>
|
||||
{
|
||||
// If the label has been edited...
|
||||
if ( labelFormGroup.dirty )
|
||||
{
|
||||
// Update the label on the server
|
||||
this._mailboxService.updateLabel(labelFormGroup.value.id, labelFormGroup.value).subscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// Reset the labels form array
|
||||
this.labelsForm.get('labels').markAsPristine();
|
||||
this.labelsForm.get('labels').markAsUntouched();
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<div class="flex flex-col flex-auto w-full">
|
||||
<!-- Title -->
|
||||
<div class="mt-10 mb-8 mx-6 text-4xl font-extrabold tracking-tight leading-none">Mailbox</div>
|
||||
|
||||
<!-- Compose button -->
|
||||
<button
|
||||
class="mx-6"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="openComposeDialog()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
|
||||
<span class="ml-2">Compose</span>
|
||||
</button>
|
||||
|
||||
<!-- Navigation -->
|
||||
<fuse-vertical-navigation
|
||||
[navigation]="menuData"
|
||||
[inner]="true"
|
||||
[mode]="'side'"
|
||||
[opened]="true"></fuse-vertical-navigation>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
mailbox-sidebar {
|
||||
|
||||
fuse-vertical-navigation {
|
||||
|
||||
.fuse-vertical-navigation-wrapper {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,304 +0,0 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { FuseNavigationItem, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
|
||||
import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
|
||||
import { labelColorDefs } from 'app/modules/admin/apps/mailbox/mailbox.constants';
|
||||
import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
|
||||
import { MailFilter, MailFolder, MailLabel } from 'app/modules/admin/apps/mailbox/mailbox.types';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'mailbox-sidebar',
|
||||
templateUrl : './sidebar.component.html',
|
||||
styleUrls : ['./sidebar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatIconModule, FuseVerticalNavigationComponent],
|
||||
})
|
||||
export class MailboxSidebarComponent implements OnInit, OnDestroy
|
||||
{
|
||||
filters: MailFilter[];
|
||||
folders: MailFolder[];
|
||||
labels: MailLabel[];
|
||||
menuData: FuseNavigationItem[] = [];
|
||||
private _filtersMenuData: FuseNavigationItem[] = [];
|
||||
private _foldersMenuData: FuseNavigationItem[] = [];
|
||||
private _labelsMenuData: FuseNavigationItem[] = [];
|
||||
private _otherMenuData: FuseNavigationItem[] = [];
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _mailboxService: MailboxService,
|
||||
private _matDialog: MatDialog,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Filters
|
||||
this._mailboxService.filters$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((filters: MailFilter[]) =>
|
||||
{
|
||||
this.filters = filters;
|
||||
|
||||
// Generate menu links
|
||||
this._generateFiltersMenuLinks();
|
||||
});
|
||||
|
||||
// Folders
|
||||
this._mailboxService.folders$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((folders: MailFolder[]) =>
|
||||
{
|
||||
this.folders = folders;
|
||||
|
||||
// Generate menu links
|
||||
this._generateFoldersMenuLinks();
|
||||
|
||||
// Update navigation badge
|
||||
this._updateNavigationBadge(folders);
|
||||
});
|
||||
|
||||
// Labels
|
||||
this._mailboxService.labels$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((labels: MailLabel[]) =>
|
||||
{
|
||||
this.labels = labels;
|
||||
|
||||
// Generate menu links
|
||||
this._generateLabelsMenuLinks();
|
||||
});
|
||||
|
||||
// Generate other menu links
|
||||
this._generateOtherMenuLinks();
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Open compose dialog
|
||||
*/
|
||||
openComposeDialog(): void
|
||||
{
|
||||
// Open the dialog
|
||||
const dialogRef = this._matDialog.open(MailboxComposeComponent);
|
||||
|
||||
dialogRef.afterClosed()
|
||||
.subscribe((result) =>
|
||||
{
|
||||
console.log('Compose dialog was closed!');
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Generate menus for folders
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _generateFoldersMenuLinks(): void
|
||||
{
|
||||
// Reset the folders menu data
|
||||
this._foldersMenuData = [];
|
||||
|
||||
// Iterate through the folders
|
||||
this.folders.forEach((folder) =>
|
||||
{
|
||||
// Generate menu item for the folder
|
||||
const menuItem: FuseNavigationItem = {
|
||||
id : folder.id,
|
||||
title: folder.title,
|
||||
type : 'basic',
|
||||
icon : folder.icon,
|
||||
link : '/apps/mailbox/' + folder.slug,
|
||||
};
|
||||
|
||||
// If the count is available and is bigger than zero...
|
||||
if ( folder.count && folder.count > 0 )
|
||||
{
|
||||
// Add the count as a badge
|
||||
menuItem['badge'] = {
|
||||
title: folder.count + '',
|
||||
};
|
||||
}
|
||||
|
||||
// Push the menu item to the folders menu data
|
||||
this._foldersMenuData.push(menuItem);
|
||||
});
|
||||
|
||||
// Update the menu data
|
||||
this._updateMenuData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate menus for filters
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _generateFiltersMenuLinks(): void
|
||||
{
|
||||
// Reset the filters menu
|
||||
this._filtersMenuData = [];
|
||||
|
||||
// Iterate through the filters
|
||||
this.filters.forEach((filter) =>
|
||||
{
|
||||
// Generate menu item for the filter
|
||||
this._filtersMenuData.push({
|
||||
id : filter.id,
|
||||
title: filter.title,
|
||||
type : 'basic',
|
||||
icon : filter.icon,
|
||||
link : '/apps/mailbox/filter/' + filter.slug,
|
||||
});
|
||||
});
|
||||
|
||||
// Update the menu data
|
||||
this._updateMenuData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate menus for labels
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _generateLabelsMenuLinks(): void
|
||||
{
|
||||
// Reset the labels menu
|
||||
this._labelsMenuData = [];
|
||||
|
||||
// Iterate through the labels
|
||||
this.labels.forEach((label) =>
|
||||
{
|
||||
// Generate menu item for the label
|
||||
this._labelsMenuData.push({
|
||||
id : label.id,
|
||||
title : label.title,
|
||||
type : 'basic',
|
||||
icon : 'heroicons_outline:tag',
|
||||
classes: {
|
||||
icon: labelColorDefs[label.color].text,
|
||||
},
|
||||
link : '/apps/mailbox/label/' + label.slug,
|
||||
});
|
||||
});
|
||||
|
||||
// Update the menu data
|
||||
this._updateMenuData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate other menus
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _generateOtherMenuLinks(): void
|
||||
{
|
||||
// Settings menu
|
||||
this._otherMenuData.push({
|
||||
title: 'Settings',
|
||||
type : 'basic',
|
||||
icon : 'heroicons_outline:cog-8-tooth',
|
||||
link : '/apps/mailbox/settings',
|
||||
});
|
||||
|
||||
// Update the menu data
|
||||
this._updateMenuData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the menu data
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
private _updateMenuData(): void
|
||||
{
|
||||
this.menuData = [
|
||||
{
|
||||
title : 'MAILBOXES',
|
||||
type : 'group',
|
||||
children: [
|
||||
...this._foldersMenuData,
|
||||
],
|
||||
},
|
||||
{
|
||||
title : 'FILTERS',
|
||||
type : 'group',
|
||||
children: [
|
||||
...this._filtersMenuData,
|
||||
],
|
||||
},
|
||||
{
|
||||
title : 'LABELS',
|
||||
type : 'group',
|
||||
children: [
|
||||
...this._labelsMenuData,
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'spacer',
|
||||
},
|
||||
...this._otherMenuData,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the navigation badge using the
|
||||
* unread count of the inbox folder
|
||||
*
|
||||
* @param folders
|
||||
* @private
|
||||
*/
|
||||
private _updateNavigationBadge(folders: MailFolder[]): void
|
||||
{
|
||||
// Get the inbox folder
|
||||
const inboxFolder = this.folders.find(folder => folder.slug === 'inbox');
|
||||
|
||||
// Get the component -> navigation data -> item
|
||||
const mainNavigationComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
|
||||
|
||||
// If the main navigation component exists...
|
||||
if ( mainNavigationComponent )
|
||||
{
|
||||
const mainNavigation = mainNavigationComponent.navigation;
|
||||
const menuItem = this._fuseNavigationService.getItem('apps.mailbox', mainNavigation);
|
||||
|
||||
// Update the badge title of the item
|
||||
menuItem.badge.title = inboxFolder.count + '';
|
||||
|
||||
// Refresh the navigation
|
||||
mainNavigationComponent.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,176 +0,0 @@
|
||||
<div class="flex flex-col flex-auto md:w-160 md:min-w-160 -m-6">
|
||||
<ng-container *ngIf="(note$ | async) as note">
|
||||
<!-- Image -->
|
||||
<ng-container *ngIf="note.image">
|
||||
<div class="relative w-full">
|
||||
<div class="absolute right-0 bottom-0 p-4">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="removeImage(note)">
|
||||
<mat-icon
|
||||
class="text-white"
|
||||
[svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<img
|
||||
class="w-full object-cover"
|
||||
[src]="note.image">
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="m-4">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<input
|
||||
class="w-full p-2 text-2xl"
|
||||
[placeholder]="'Title'"
|
||||
[(ngModel)]="note.title"
|
||||
(input)="updateNoteDetails(note)">
|
||||
</div>
|
||||
<!-- Note -->
|
||||
<div class="flex w-full py-5 px-2">
|
||||
<textarea
|
||||
class="w-full"
|
||||
[placeholder]="'Note'"
|
||||
[(ngModel)]="note.content"
|
||||
(input)="updateNoteDetails(note)"
|
||||
cdkTextareaAutosize></textarea>
|
||||
</div>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="note.tasks">
|
||||
<div class="mx-2 mt-4 space-y-1.5">
|
||||
<ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
|
||||
<div class="group flex items-center">
|
||||
<mat-checkbox
|
||||
class="flex items-center"
|
||||
[color]="'primary'"
|
||||
[(ngModel)]="task.completed"
|
||||
(change)="updateTaskOnNote(note, task)"></mat-checkbox>
|
||||
<input
|
||||
class="w-full px-1 py-0.5"
|
||||
[ngClass]="{'text-secondary line-through': task.completed}"
|
||||
[placeholder]="'Task'"
|
||||
[(ngModel)]="task.content"
|
||||
(input)="updateTaskOnNote(note, task)">
|
||||
<mat-icon
|
||||
class="hidden group-hover:flex ml-auto icon-size-5 cursor-pointer"
|
||||
[svgIcon]="'heroicons_solid:x-mark'"
|
||||
(click)="removeTaskFromNote(note, task)"></mat-icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="flex items-center">
|
||||
<mat-icon
|
||||
class="-ml-0.5 icon-size-5 text-hint"
|
||||
[svgIcon]="'heroicons_solid:plus'"></mat-icon>
|
||||
<input
|
||||
class="w-full ml-1.5 px-1 py-0.5"
|
||||
[placeholder]="'Add task'"
|
||||
(keydown.enter)="addTaskToNote(note, newTaskInput.value); newTaskInput.value = ''"
|
||||
#newTaskInput>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="note.labels && note.labels.length">
|
||||
<div class="flex flex-wrap items-center mx-1 mt-6">
|
||||
<ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
|
||||
<div class="flex items-center m-1 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
|
||||
<div>
|
||||
{{label.title}}
|
||||
</div>
|
||||
<mat-icon
|
||||
class="ml-1 icon-size-4 cursor-pointer"
|
||||
[svgIcon]="'heroicons_solid:x-circle'"
|
||||
(click)="toggleLabelOnNote(note, label)"></mat-icon>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Add Actions -->
|
||||
<ng-container *ngIf="!note.id">
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<!-- Save -->
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[disabled]="!note.title && !note.content"
|
||||
(click)="createNote(note)">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Edit Actions -->
|
||||
<ng-container *ngIf="note.id">
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Image -->
|
||||
<div>
|
||||
<input
|
||||
id="image-file-input"
|
||||
class="absolute h-0 w-0 opacity-0 invisible pointer-events-none"
|
||||
type="file"
|
||||
[multiple]="false"
|
||||
[accept]="'image/jpeg, image/png'"
|
||||
(change)="uploadImage(note, imageFileInput.files)"
|
||||
#imageFileInput>
|
||||
<label
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full cursor-pointer hover:bg-gray-400 hover:bg-opacity-20 dark:hover:bg-black dark:hover:bg-opacity-5"
|
||||
for="image-file-input"
|
||||
matRipple>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:photo'"></mat-icon>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Checklist -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="addTasksToNote(note)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:clipboard-document-list'"></mat-icon>
|
||||
</button>
|
||||
<!-- Labels -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="labelsMenu">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
</button>
|
||||
<mat-menu #labelsMenu="matMenu">
|
||||
<ng-container *ngIf="(labels$ | async) as labels">
|
||||
<ng-container *ngFor="let label of labels">
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="toggleLabelOnNote(note, label)">
|
||||
<span class="flex items-center">
|
||||
<mat-checkbox
|
||||
class="flex items-center pointer-events-none"
|
||||
[color]="'primary'"
|
||||
[checked]="isNoteHasLabel(note, label)"
|
||||
disableRipple></mat-checkbox>
|
||||
<span class="ml-1 leading-5">{{label.title}}</span>
|
||||
</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</mat-menu>
|
||||
<!-- Archive -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleArchiveOnNote(note)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:archive-box'"></mat-icon>
|
||||
</button>
|
||||
<!-- Delete -->
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="deleteNote(note)">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Close -->
|
||||
<button
|
||||
mat-flat-button
|
||||
matDialogClose>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
@ -1,358 +0,0 @@
|
||||
import { TextFieldModule } from '@angular/cdk/text-field';
|
||||
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||
import { Label, Note, Task } from 'app/modules/admin/apps/notes/notes.types';
|
||||
import { debounceTime, map, Observable, of, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'notes-details',
|
||||
templateUrl : './details.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [NgIf, MatButtonModule, MatIconModule, FormsModule, TextFieldModule, NgFor, MatCheckboxModule, NgClass, MatRippleModule, MatMenuModule, MatDialogModule, AsyncPipe],
|
||||
})
|
||||
export class NotesDetailsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
note$: Observable<Note>;
|
||||
labels$: Observable<Label[]>;
|
||||
|
||||
noteChanged: Subject<Note> = new Subject<Note>();
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
@Inject(MAT_DIALOG_DATA) private _data: { note: Note },
|
||||
private _notesService: NotesService,
|
||||
private _matDialogRef: MatDialogRef<NotesDetailsComponent>,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Edit
|
||||
if ( this._data.note.id )
|
||||
{
|
||||
// Request the data from the server
|
||||
this._notesService.getNoteById(this._data.note.id).subscribe();
|
||||
|
||||
// Get the note
|
||||
this.note$ = this._notesService.note$;
|
||||
}
|
||||
// Add
|
||||
else
|
||||
{
|
||||
// Create an empty note
|
||||
const note = {
|
||||
id : null,
|
||||
title : '',
|
||||
content : '',
|
||||
tasks : null,
|
||||
image : null,
|
||||
reminder : null,
|
||||
labels : [],
|
||||
archived : false,
|
||||
createdAt: null,
|
||||
updatedAt: null,
|
||||
};
|
||||
|
||||
this.note$ = of(note);
|
||||
}
|
||||
|
||||
// Get the labels
|
||||
this.labels$ = this._notesService.labels$;
|
||||
|
||||
// Subscribe to note updates
|
||||
this.noteChanged
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
debounceTime(500),
|
||||
switchMap(note => this._notesService.updateNote(note)))
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Create a new note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
createNote(note: Note): void
|
||||
{
|
||||
this._notesService.createNote(note).pipe(
|
||||
map(() =>
|
||||
{
|
||||
// Get the note
|
||||
this.note$ = this._notesService.note$;
|
||||
})).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload image to given note
|
||||
*
|
||||
* @param note
|
||||
* @param fileList
|
||||
*/
|
||||
uploadImage(note: Note, 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;
|
||||
}
|
||||
|
||||
this._readAsDataURL(file).then((data) =>
|
||||
{
|
||||
// Update the image
|
||||
note.image = data;
|
||||
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the image on the given note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
removeImage(note: Note): void
|
||||
{
|
||||
note.image = null;
|
||||
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an empty tasks array to note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
addTasksToNote(note): void
|
||||
{
|
||||
if ( !note.tasks )
|
||||
{
|
||||
note.tasks = [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add task to the given note
|
||||
*
|
||||
* @param note
|
||||
* @param task
|
||||
*/
|
||||
addTaskToNote(note: Note, task: string): void
|
||||
{
|
||||
if ( task.trim() === '' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the task
|
||||
this._notesService.addTask(note, task).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the given task from given note
|
||||
*
|
||||
* @param note
|
||||
* @param task
|
||||
*/
|
||||
removeTaskFromNote(note: Note, task: Task): void
|
||||
{
|
||||
// Remove the task
|
||||
note.tasks = note.tasks.filter(item => item.id !== task.id);
|
||||
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the given task on the given note
|
||||
*
|
||||
* @param note
|
||||
* @param task
|
||||
*/
|
||||
updateTaskOnNote(note: Note, task: Task): void
|
||||
{
|
||||
// If the task is already available on the item
|
||||
if ( task.id )
|
||||
{
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Is the given note has the given label
|
||||
*
|
||||
* @param note
|
||||
* @param label
|
||||
*/
|
||||
isNoteHasLabel(note: Note, label: Label): boolean
|
||||
{
|
||||
return !!note.labels.find(item => item.id === label.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the given label on the given note
|
||||
*
|
||||
* @param note
|
||||
* @param label
|
||||
*/
|
||||
toggleLabelOnNote(note: Note, label: Label): void
|
||||
{
|
||||
// If the note already has the label
|
||||
if ( this.isNoteHasLabel(note, label) )
|
||||
{
|
||||
note.labels = note.labels.filter(item => item.id !== label.id);
|
||||
}
|
||||
// Otherwise
|
||||
else
|
||||
{
|
||||
note.labels.push(label);
|
||||
}
|
||||
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle archived status on the given note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
toggleArchiveOnNote(note: Note): void
|
||||
{
|
||||
note.archived = !note.archived;
|
||||
|
||||
// Update the note
|
||||
this.noteChanged.next(note);
|
||||
|
||||
// Close the dialog
|
||||
this._matDialogRef.close();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the note details
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
updateNoteDetails(note: Note): void
|
||||
{
|
||||
this.noteChanged.next(note);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the given note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
deleteNote(note: Note): void
|
||||
{
|
||||
this._notesService.deleteNote(note)
|
||||
.subscribe((isDeleted) =>
|
||||
{
|
||||
// Return if the note wasn't deleted...
|
||||
if ( !isDeleted )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Close the dialog
|
||||
this._matDialogRef.close();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Track by function for ngFor loops
|
||||
*
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
trackByFn(index: number, item: any): any
|
||||
{
|
||||
return item.id || index;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Read the given file for demonstration purposes
|
||||
*
|
||||
* @param file
|
||||
*/
|
||||
private _readAsDataURL(file: File): Promise<any>
|
||||
{
|
||||
// Return a new promise
|
||||
return new Promise((resolve, reject) =>
|
||||
{
|
||||
// Create a new reader
|
||||
const reader = new FileReader();
|
||||
|
||||
// Resolve the promise on success
|
||||
reader.onload = (): void =>
|
||||
{
|
||||
resolve(reader.result);
|
||||
};
|
||||
|
||||
// Reject the promise on error
|
||||
reader.onerror = (e): void =>
|
||||
{
|
||||
reject(e);
|
||||
};
|
||||
|
||||
// Read the file as the
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
<div class="flex flex-col flex-auto w-80 min-w-80 p-2 md:p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-2xl font-semibold">Edit labels</div>
|
||||
<button
|
||||
matDialogClose
|
||||
mat-icon-button>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- New label -->
|
||||
<mat-form-field class="fuse-mat-dense w-full mt-8">
|
||||
<input
|
||||
name="new-label"
|
||||
[autocomplete]="'off'"
|
||||
[placeholder]="'Create new label'"
|
||||
matInput
|
||||
#newLabelInput>
|
||||
<button
|
||||
[class.invisible]="newLabelInput.value.trim() === ''"
|
||||
mat-icon-button
|
||||
(click)="addLabel(newLabelInput.value); newLabelInput.value = ''"
|
||||
matSuffix>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<!-- Labels -->
|
||||
<div class="flex flex-col mt-4">
|
||||
<ng-container *ngIf="(labels$ | async) as labels">
|
||||
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||
<mat-form-field class="fuse-mat-dense w-full">
|
||||
<button
|
||||
mat-icon-button
|
||||
matPrefix
|
||||
(click)="deleteLabel(label.id)">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:trash'"></mat-icon>
|
||||
</button>
|
||||
<input
|
||||
[autocomplete]="'off'"
|
||||
[(ngModel)]="label.title"
|
||||
(input)="updateLabel(label)"
|
||||
required
|
||||
matInput>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,120 +0,0 @@
|
||||
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
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 { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||
import { Label } from 'app/modules/admin/apps/notes/notes.types';
|
||||
import { debounceTime, filter, Observable, Subject, switchMap, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'notes-labels',
|
||||
templateUrl : './labels.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, MatDialogModule, MatIconModule, MatFormFieldModule, MatInputModule, NgIf, NgFor, FormsModule, AsyncPipe],
|
||||
})
|
||||
export class NotesLabelsComponent implements OnInit, OnDestroy
|
||||
{
|
||||
labels$: Observable<Label[]>;
|
||||
|
||||
labelChanged: Subject<Label> = new Subject<Label>();
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _notesService: NotesService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get the labels
|
||||
this.labels$ = this._notesService.labels$;
|
||||
|
||||
// Subscribe to label updates
|
||||
this.labelChanged
|
||||
.pipe(
|
||||
takeUntil(this._unsubscribeAll),
|
||||
debounceTime(500),
|
||||
filter(label => label.title.trim() !== ''),
|
||||
switchMap(label => this._notesService.updateLabel(label)))
|
||||
.subscribe(() =>
|
||||
{
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Add label
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
addLabel(title: string): void
|
||||
{
|
||||
this._notesService.addLabel(title).subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update label
|
||||
*/
|
||||
updateLabel(label: Label): void
|
||||
{
|
||||
this.labelChanged.next(label);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete label
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteLabel(id: string): void
|
||||
{
|
||||
this._notesService.deleteLabel(id).subscribe(() =>
|
||||
{
|
||||
// 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,223 +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">
|
||||
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="w-2/3 sm:w-72 lg:w-56 border-r-0 bg-default"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#drawer>
|
||||
<div class="p-6 lg:py-8 lg:pl-4 lg:pr-0">
|
||||
<!-- Filters -->
|
||||
<div class="space-y-2">
|
||||
<!-- Notes -->
|
||||
<div
|
||||
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'notes',
|
||||
'text-hint hover:bg-hover': filterStatus !== 'notes'}"
|
||||
(click)="resetFilter()"
|
||||
matRipple
|
||||
[matRippleDisabled]="filterStatus === 'notes'">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:pencil-square'"></mat-icon>
|
||||
<div class="ml-3 leading-5 select-none text-default">Notes</div>
|
||||
</div>
|
||||
<!-- Archive -->
|
||||
<div
|
||||
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': filterStatus === 'archived',
|
||||
'text-hint hover:bg-hover': filterStatus !== 'archived'}"
|
||||
(click)="filterByArchived()"
|
||||
matRipple
|
||||
[matRippleDisabled]="filterStatus === 'archived'">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:archive-box'"></mat-icon>
|
||||
<div class="ml-3 leading-5 select-none text-default">Archive</div>
|
||||
</div>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="(labels$ | async) as labels">
|
||||
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
||||
<div
|
||||
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer"
|
||||
[ngClass]="{'bg-gray-200 dark:bg-gray-700 text-primary dark:text-primary-400': 'label:' + label.id === filterStatus,
|
||||
'text-hint hover:bg-hover': 'label:' + label.id !== filterStatus}"
|
||||
(click)="filterByLabel(label.id)"
|
||||
matRipple
|
||||
[matRippleDisabled]="'label:' + label.id === filterStatus">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
[svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
||||
<div class="ml-3 leading-5 select-none text-default">{{label.title}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<!-- Edit Labels -->
|
||||
<div
|
||||
class="relative flex items-center py-2 px-4 font-medium rounded-full cursor-pointer hover:bg-hover"
|
||||
(click)="openEditLabelsDialog()"
|
||||
matRipple>
|
||||
<mat-icon
|
||||
class="text-hint"
|
||||
[svgIcon]="'heroicons_outline:pencil'"></mat-icon>
|
||||
<div class="ml-3 leading-5 select-none">Edit labels</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-drawer>
|
||||
|
||||
<mat-drawer-content class="flex flex-col bg-gray-100 dark:bg-transparent">
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-col flex-auto p-6 md:p-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center flex-auto">
|
||||
<button
|
||||
class="flex lg:hidden -ml-2"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
|
||||
</button>
|
||||
<mat-form-field
|
||||
class="fuse-mat-rounded fuse-mat-dense flex-auto ml-4 lg:ml-0"
|
||||
[subscriptSizing]="'dynamic'">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:magnifying-glass'"
|
||||
matPrefix></mat-icon>
|
||||
<input
|
||||
matInput
|
||||
[autocomplete]="'off'"
|
||||
[placeholder]="'Search notes'"
|
||||
(input)="filterByQuery(searchInput.value)"
|
||||
#searchInput>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- New note -->
|
||||
<button
|
||||
class="ml-4 px-1 sm:px-4 min-w-10"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="addNewNote()">
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
|
||||
<span class="hidden sm:inline-block ml-2">New note</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<ng-container *ngIf="(notes$ | async) as notes; else loading">
|
||||
<ng-container *ngIf="notes.length; else noNotes">
|
||||
|
||||
<!-- Masonry layout -->
|
||||
<fuse-masonry
|
||||
class="-mx-2 mt-8"
|
||||
[items]="notes"
|
||||
[columns]="masonryColumns"
|
||||
[columnsTemplate]="columnsTemplate">
|
||||
<!-- Columns template -->
|
||||
<ng-template
|
||||
#columnsTemplate
|
||||
let-columns>
|
||||
<!-- Columns -->
|
||||
<ng-container *ngFor="let column of columns; trackBy: trackByFn">
|
||||
<!-- Column -->
|
||||
<div class="flex-1 px-2 space-y-4">
|
||||
<ng-container *ngFor="let note of column.items; trackBy: trackByFn">
|
||||
<!-- Note -->
|
||||
<div
|
||||
class="flex flex-col shadow rounded-2xl overflow-hidden cursor-pointer bg-card"
|
||||
(click)="openNoteDialog(note)">
|
||||
<!-- Image -->
|
||||
<ng-container *ngIf="note.image">
|
||||
<img
|
||||
class="w-full object-cover"
|
||||
[src]="note.image">
|
||||
</ng-container>
|
||||
<div class="flex flex-auto flex-col p-6 space-y-4">
|
||||
<!-- Title -->
|
||||
<ng-container *ngIf="note.title">
|
||||
<div class="font-semibold line-clamp-3">
|
||||
{{note.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Content -->
|
||||
<ng-container *ngIf="note.content">
|
||||
<div [class.text-xl]="note.content.length < 70">
|
||||
{{note.content}}
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Tasks -->
|
||||
<ng-container *ngIf="note.tasks">
|
||||
<div class="space-y-1.5">
|
||||
<ng-container *ngFor="let task of note.tasks; trackBy: trackByFn">
|
||||
<div class="flex items-center">
|
||||
<ng-container *ngIf="!task.completed">
|
||||
<div class="flex items-center justify-center w-5 h-5">
|
||||
<div class="w-4 h-4 rounded-full border-2"></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="task.completed">
|
||||
<mat-icon
|
||||
class="text-hint icon-size-5"
|
||||
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
|
||||
</ng-container>
|
||||
<div
|
||||
class="ml-1.5 leading-5"
|
||||
[ngClass]="{'text-secondary line-through': task.completed}">
|
||||
{{task.content}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Labels -->
|
||||
<ng-container *ngIf="note.labels">
|
||||
<div class="flex flex-wrap items-center -m-1">
|
||||
<ng-container *ngFor="let label of note.labels; trackBy: trackByFn">
|
||||
<div class="m-1 py-0.5 px-3 rounded-full text-sm font-medium text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700">
|
||||
{{label.title}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</fuse-masonry>
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!-- Loading template -->
|
||||
<ng-template #loading>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Loading...</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<!-- No notes template -->
|
||||
<ng-template #noNotes>
|
||||
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
|
||||
<mat-icon
|
||||
class="icon-size-24"
|
||||
[svgIcon]="'heroicons_outline:document'"></mat-icon>
|
||||
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no notes!</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-drawer-content>
|
||||
|
||||
</mat-drawer-container>
|
||||
|
||||
</div>
|
||||
@ -1,264 +0,0 @@
|
||||
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { FuseMasonryComponent } from '@fuse/components/masonry';
|
||||
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
|
||||
import { NotesDetailsComponent } from 'app/modules/admin/apps/notes/details/details.component';
|
||||
import { NotesLabelsComponent } from 'app/modules/admin/apps/notes/labels/labels.component';
|
||||
import { NotesService } from 'app/modules/admin/apps/notes/notes.service';
|
||||
import { Label, Note } from 'app/modules/admin/apps/notes/notes.types';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { BehaviorSubject, combineLatest, distinctUntilChanged, map, Observable, Subject, takeUntil } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'notes-list',
|
||||
templateUrl : './list.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatSidenavModule, MatRippleModule, NgClass, MatIconModule, NgIf, NgFor, MatButtonModule, MatFormFieldModule, MatInputModule, FuseMasonryComponent, AsyncPipe],
|
||||
})
|
||||
export class NotesListComponent implements OnInit, OnDestroy
|
||||
{
|
||||
labels$: Observable<Label[]>;
|
||||
notes$: Observable<Note[]>;
|
||||
|
||||
drawerMode: 'over' | 'side' = 'side';
|
||||
drawerOpened: boolean = true;
|
||||
filter$: BehaviorSubject<string> = new BehaviorSubject('notes');
|
||||
searchQuery$: BehaviorSubject<string> = new BehaviorSubject(null);
|
||||
masonryColumns: number = 4;
|
||||
|
||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _matDialog: MatDialog,
|
||||
private _notesService: NotesService,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get the filter status
|
||||
*/
|
||||
get filterStatus(): string
|
||||
{
|
||||
return this.filter$.value;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Request the data from the server
|
||||
this._notesService.getLabels().subscribe();
|
||||
this._notesService.getNotes().subscribe();
|
||||
|
||||
// Get labels
|
||||
this.labels$ = this._notesService.labels$;
|
||||
|
||||
// Get notes
|
||||
this.notes$ = combineLatest([this._notesService.notes$, this.filter$, this.searchQuery$]).pipe(
|
||||
distinctUntilChanged(),
|
||||
map(([notes, filter, searchQuery]) =>
|
||||
{
|
||||
if ( !notes || !notes.length )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the filtered notes
|
||||
let filteredNotes = notes;
|
||||
|
||||
// Filter by query
|
||||
if ( searchQuery )
|
||||
{
|
||||
searchQuery = searchQuery.trim().toLowerCase();
|
||||
filteredNotes = filteredNotes.filter(note => note.title.toLowerCase().includes(searchQuery) || note.content.toLowerCase().includes(searchQuery));
|
||||
}
|
||||
|
||||
// Show all
|
||||
if ( filter === 'notes' )
|
||||
{
|
||||
// Do nothing
|
||||
}
|
||||
|
||||
// Show archive
|
||||
const isArchive = filter === 'archived';
|
||||
filteredNotes = filteredNotes.filter(note => note.archived === isArchive);
|
||||
|
||||
// Filter by label
|
||||
if ( filter.startsWith('label:') )
|
||||
{
|
||||
const labelId = filter.split(':')[1];
|
||||
filteredNotes = filteredNotes.filter(note => !!note.labels.find(item => item.id === labelId));
|
||||
}
|
||||
|
||||
return filteredNotes;
|
||||
}),
|
||||
);
|
||||
|
||||
// Subscribe to media changes
|
||||
this._fuseMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) =>
|
||||
{
|
||||
// Set the drawerMode and drawerOpened if the given breakpoint is active
|
||||
if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.drawerMode = 'side';
|
||||
this.drawerOpened = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.drawerMode = 'over';
|
||||
this.drawerOpened = false;
|
||||
}
|
||||
|
||||
// Set the masonry columns
|
||||
//
|
||||
// This if block structured in a way so that only the
|
||||
// biggest matching alias will be used to set the column
|
||||
// count.
|
||||
if ( matchingAliases.includes('xl') )
|
||||
{
|
||||
this.masonryColumns = 5;
|
||||
}
|
||||
else if ( matchingAliases.includes('lg') )
|
||||
{
|
||||
this.masonryColumns = 4;
|
||||
}
|
||||
else if ( matchingAliases.includes('md') )
|
||||
{
|
||||
this.masonryColumns = 3;
|
||||
}
|
||||
else if ( matchingAliases.includes('sm') )
|
||||
{
|
||||
this.masonryColumns = 2;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.masonryColumns = 1;
|
||||
}
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next(null);
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Add a new note
|
||||
*/
|
||||
addNewNote(): void
|
||||
{
|
||||
this._matDialog.open(NotesDetailsComponent, {
|
||||
autoFocus: false,
|
||||
data : {
|
||||
note: {},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the edit labels dialog
|
||||
*/
|
||||
openEditLabelsDialog(): void
|
||||
{
|
||||
this._matDialog.open(NotesLabelsComponent, {autoFocus: false});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the note dialog
|
||||
*/
|
||||
openNoteDialog(note: Note): void
|
||||
{
|
||||
this._matDialog.open(NotesDetailsComponent, {
|
||||
autoFocus: false,
|
||||
data : {
|
||||
note: cloneDeep(note),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter by archived
|
||||
*/
|
||||
filterByArchived(): void
|
||||
{
|
||||
this.filter$.next('archived');
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter by label
|
||||
*
|
||||
* @param labelId
|
||||
*/
|
||||
filterByLabel(labelId: string): void
|
||||
{
|
||||
const filterValue = `label:${labelId}`;
|
||||
this.filter$.next(filterValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter by query
|
||||
*
|
||||
* @param query
|
||||
*/
|
||||
filterByQuery(query: string): void
|
||||
{
|
||||
this.searchQuery$.next(query);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset filter
|
||||
*/
|
||||
resetFilter(): void
|
||||
{
|
||||
this.filter$.next('notes');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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>
|
||||
@ -1,20 +0,0 @@
|
||||
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'notes',
|
||||
templateUrl : './notes.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [RouterOutlet],
|
||||
})
|
||||
export class NotesComponent
|
||||
{
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { NotesListComponent } from 'app/modules/admin/apps/notes/list/list.component';
|
||||
import { NotesComponent } from 'app/modules/admin/apps/notes/notes.component';
|
||||
|
||||
export default [
|
||||
{
|
||||
path : '',
|
||||
component: NotesComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: NotesListComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
] as Routes;
|
||||
@ -1,238 +0,0 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Label, Note } from 'app/modules/admin/apps/notes/notes.types';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { BehaviorSubject, map, Observable, of, switchMap, take, tap, throwError } from 'rxjs';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class NotesService
|
||||
{
|
||||
// Private
|
||||
private _labels: BehaviorSubject<Label[] | null> = new BehaviorSubject(null);
|
||||
private _note: BehaviorSubject<Note | null> = new BehaviorSubject(null);
|
||||
private _notes: BehaviorSubject<Note[] | null> = new BehaviorSubject(null);
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(private _httpClient: HttpClient)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for labels
|
||||
*/
|
||||
get labels$(): Observable<Label[]>
|
||||
{
|
||||
return this._labels.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for notes
|
||||
*/
|
||||
get notes$(): Observable<Note[]>
|
||||
{
|
||||
return this._notes.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getter for note
|
||||
*/
|
||||
get note$(): Observable<Note>
|
||||
{
|
||||
return this._note.asObservable();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Get labels
|
||||
*/
|
||||
getLabels(): Observable<Label[]>
|
||||
{
|
||||
return this._httpClient.get<Label[]>('api/apps/notes/labels').pipe(
|
||||
tap((response: Label[]) =>
|
||||
{
|
||||
this._labels.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add label
|
||||
*
|
||||
* @param title
|
||||
*/
|
||||
addLabel(title: string): Observable<Label[]>
|
||||
{
|
||||
return this._httpClient.post<Label[]>('api/apps/notes/labels', {title}).pipe(
|
||||
tap((labels) =>
|
||||
{
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update label
|
||||
*
|
||||
* @param label
|
||||
*/
|
||||
updateLabel(label: Label): Observable<Label[]>
|
||||
{
|
||||
return this._httpClient.patch<Label[]>('api/apps/notes/labels', {label}).pipe(
|
||||
tap((labels) =>
|
||||
{
|
||||
// Update the notes
|
||||
this.getNotes().subscribe();
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a label
|
||||
*
|
||||
* @param id
|
||||
*/
|
||||
deleteLabel(id: string): Observable<Label[]>
|
||||
{
|
||||
return this._httpClient.delete<Label[]>('api/apps/notes/labels', {params: {id}}).pipe(
|
||||
tap((labels) =>
|
||||
{
|
||||
// Update the notes
|
||||
this.getNotes().subscribe();
|
||||
|
||||
// Update the labels
|
||||
this._labels.next(labels);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get notes
|
||||
*/
|
||||
getNotes(): Observable<Note[]>
|
||||
{
|
||||
return this._httpClient.get<Note[]>('api/apps/notes/all').pipe(
|
||||
tap((response: Note[]) =>
|
||||
{
|
||||
this._notes.next(response);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get note by id
|
||||
*/
|
||||
getNoteById(id: string): Observable<Note>
|
||||
{
|
||||
return this._notes.pipe(
|
||||
take(1),
|
||||
map((notes) =>
|
||||
{
|
||||
// Find within the folders and files
|
||||
const note = notes.find(value => value.id === id) || null;
|
||||
|
||||
// Update the note
|
||||
this._note.next(note);
|
||||
|
||||
// Return the note
|
||||
return note;
|
||||
}),
|
||||
switchMap((note) =>
|
||||
{
|
||||
if ( !note )
|
||||
{
|
||||
return throwError('Could not found the note with id of ' + id + '!');
|
||||
}
|
||||
|
||||
return of(note);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add task to the given note
|
||||
*
|
||||
* @param note
|
||||
* @param task
|
||||
*/
|
||||
addTask(note: Note, task: string): Observable<Note>
|
||||
{
|
||||
return this._httpClient.post<Note>('api/apps/notes/tasks', {
|
||||
note,
|
||||
task,
|
||||
}).pipe(switchMap(() => this.getNotes().pipe(
|
||||
switchMap(() => this.getNoteById(note.id)),
|
||||
)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Create note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
createNote(note: Note): Observable<Note>
|
||||
{
|
||||
return this._httpClient.post<Note>('api/apps/notes', {note}).pipe(
|
||||
switchMap(response => this.getNotes().pipe(
|
||||
switchMap(() => this.getNoteById(response.id).pipe(
|
||||
map(() => response),
|
||||
)),
|
||||
)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
updateNote(note: Note): Observable<Note>
|
||||
{
|
||||
// Clone the note to prevent accidental reference based updates
|
||||
const updatedNote = cloneDeep(note) as any;
|
||||
|
||||
// Before sending the note to the server, handle the labels
|
||||
if ( updatedNote.labels.length )
|
||||
{
|
||||
updatedNote.labels = updatedNote.labels.map(label => label.id);
|
||||
}
|
||||
|
||||
return this._httpClient.patch<Note>('api/apps/notes', {updatedNote}).pipe(
|
||||
tap((response) =>
|
||||
{
|
||||
// Update the notes
|
||||
this.getNotes().subscribe();
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the note
|
||||
*
|
||||
* @param note
|
||||
*/
|
||||
deleteNote(note: Note): Observable<boolean>
|
||||
{
|
||||
return this._httpClient.delete<boolean>('api/apps/notes', {params: {id: note.id}}).pipe(
|
||||
map((isDeleted: boolean) =>
|
||||
{
|
||||
// Update the notes
|
||||
this.getNotes().subscribe();
|
||||
|
||||
// Return the deleted status
|
||||
return isDeleted;
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
export interface Task
|
||||
{
|
||||
id?: string;
|
||||
content?: string;
|
||||
completed?: string;
|
||||
}
|
||||
|
||||
export interface Label
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export interface Note
|
||||
{
|
||||
id?: string;
|
||||
title?: string;
|
||||
content?: string;
|
||||
tasks?: Task[];
|
||||
image?: string | null;
|
||||
labels?: Label[];
|
||||
archived?: boolean;
|
||||
createdAt?: string;
|
||||
updatedAt?: string | null;
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
<div
|
||||
class="p-3 pt-0"
|
||||
[class.h-13]="!formVisible">
|
||||
<div class="relative flex w-full h-full rounded-lg">
|
||||
<button
|
||||
class="absolute inset-0 justify-start w-full rounded-lg"
|
||||
[ngClass]="{'opacity-0 pointer-events-none': formVisible}"
|
||||
mat-button
|
||||
(click)="toggleFormVisibility()"
|
||||
disableRipple>
|
||||
<mat-icon
|
||||
class="icon-size-5"
|
||||
[svgIcon]="'heroicons_outline:plus-circle'"></mat-icon>
|
||||
<span class="ml-2 text-secondary">{{buttonTitle}}</span>
|
||||
</button>
|
||||
<form
|
||||
class="flex flex-col items-start w-full"
|
||||
[ngClass]="{'opacity-0': !formVisible}"
|
||||
[formGroup]="form">
|
||||
<div class="flex w-full p-5 rounded-lg shadow bg-card">
|
||||
<textarea
|
||||
class="w-full text-lg font-medium leading-5"
|
||||
[spellcheck]="'off'"
|
||||
[formControlName]="'title'"
|
||||
[placeholder]="'Enter card title...'"
|
||||
(keydown.enter)="save()"
|
||||
cdkTextareaAutosize
|
||||
#titleInput
|
||||
#titleAutosize="cdkTextareaAutosize">
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<button
|
||||
class="h-8 min-h-8"
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
[type]="'button'"
|
||||
(click)="save()">
|
||||
Add card
|
||||
</button>
|
||||
<button
|
||||
class="ml-1 w-8 h-8 min-h-8"
|
||||
mat-icon-button
|
||||
[type]="'button'"
|
||||
(click)="toggleFormVisibility()">
|
||||
<mat-icon
|
||||
class="icon-size-4"
|
||||
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,101 +0,0 @@
|
||||
import { CdkTextareaAutosize, TextFieldModule } from '@angular/cdk/text-field';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector : 'scrumboard-board-add-card',
|
||||
templateUrl : './add-card.component.html',
|
||||
encapsulation : ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone : true,
|
||||
imports : [MatButtonModule, NgClass, MatIconModule, FormsModule, ReactiveFormsModule, TextFieldModule],
|
||||
})
|
||||
export class ScrumboardBoardAddCardComponent implements OnInit
|
||||
{
|
||||
@ViewChild('titleInput') titleInput: ElementRef;
|
||||
@ViewChild('titleAutosize') titleAutosize: CdkTextareaAutosize;
|
||||
@Input() buttonTitle: string = 'Add a card';
|
||||
@Output() readonly saved: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
form: UntypedFormGroup;
|
||||
formVisible: boolean = false;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _formBuilder: UntypedFormBuilder,
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Initialize the new list form
|
||||
this.form = this._formBuilder.group({
|
||||
title: [''],
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Save
|
||||
*/
|
||||
save(): void
|
||||
{
|
||||
// Get the new list title
|
||||
const title = this.form.get('title').value;
|
||||
|
||||
// Return, if the title is empty
|
||||
if ( !title || title.trim() === '' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Execute the observable
|
||||
this.saved.next(title.trim());
|
||||
|
||||
// Clear the new list title and hide the form
|
||||
this.formVisible = false;
|
||||
this.form.get('title').setValue('');
|
||||
|
||||
// Reset the size of the textarea
|
||||
setTimeout(() =>
|
||||
{
|
||||
this.titleInput.nativeElement.value = '';
|
||||
this.titleAutosize.reset();
|
||||
});
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the visibility of the form
|
||||
*/
|
||||
toggleFormVisibility(): void
|
||||
{
|
||||
// Toggle the visibility
|
||||
this.formVisible = !this.formVisible;
|
||||
|
||||
// If the form becomes visible, focus on the title field
|
||||
if ( this.formVisible )
|
||||
{
|
||||
this.titleInput.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user