purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-04-04 07:31:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Second pass on the formatting.

Browse Source
This commit is contained in:
Sercan Yemen 2024-05-27 14:06:26 +03:00
parent 8545291203
commit 7782dbd3db
658 changed files with 48434 additions and 36597 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/core/auth/auth.interceptor.ts
View File

@ -1,8 +1,13 @@
import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http'; import {
HttpErrorResponse,
HttpEvent,
HttpHandlerFn,
HttpRequest,
} from '@angular/common/http';
import { inject } from '@angular/core'; import { inject } from '@angular/core';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { AuthUtils } from 'app/core/auth/auth.utils'; import { AuthUtils } from 'app/core/auth/auth.utils';
import { catchError, Observable, throwError } from 'rxjs'; import { Observable, catchError, throwError } from 'rxjs';
/** /**
* Intercept * Intercept
@ -10,8 +15,10 @@ import { catchError, Observable, throwError } from 'rxjs';
* @param req * @param req
* @param next * @param next
*/ */
export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => export const authInterceptor = (
{ req: HttpRequest<unknown>,
next: HttpHandlerFn
): Observable<HttpEvent<unknown>> => {
const authService = inject(AuthService); const authService = inject(AuthService);
// Clone the request object // Clone the request object
@ -25,20 +32,23 @@ export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn):
// for the protected API routes which our response interceptor will // for the protected API routes which our response interceptor will
// catch and delete the access token from the local storage while logging // catch and delete the access token from the local storage while logging
// the user out from the app. // the user out from the app.
if ( authService.accessToken && !AuthUtils.isTokenExpired(authService.accessToken) ) if (
{ authService.accessToken &&
!AuthUtils.isTokenExpired(authService.accessToken)
) {
newReq = req.clone({ newReq = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + authService.accessToken), headers: req.headers.set(
'Authorization',
'Bearer ' + authService.accessToken
),
}); });
} }
// Response // Response
return next(newReq).pipe( return next(newReq).pipe(
catchError((error) => catchError((error) => {
{
// Catch "401 Unauthorized" responses // Catch "401 Unauthorized" responses
if ( error instanceof HttpErrorResponse && error.status === 401 ) if (error instanceof HttpErrorResponse && error.status === 401) {
{
// Sign out // Sign out
authService.signOut(); authService.signOut();
@ -47,6 +57,6 @@ export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn):
} }
return throwError(error); return throwError(error);
}), })
); );
}; };

14
src/app/core/auth/auth.provider.ts
View File

@ -1,16 +1,20 @@
import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Provider } from '@angular/core'; import {
ENVIRONMENT_INITIALIZER,
EnvironmentProviders,
Provider,
inject,
} from '@angular/core';
import { authInterceptor } from 'app/core/auth/auth.interceptor'; import { authInterceptor } from 'app/core/auth/auth.interceptor';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
export const provideAuth = (): Array<Provider | EnvironmentProviders> => export const provideAuth = (): Array<Provider | EnvironmentProviders> => {
{
return [ return [
provideHttpClient(withInterceptors([authInterceptor])), provideHttpClient(withInterceptors([authInterceptor])),
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(AuthService), useValue: () => inject(AuthService),
multi : true, multi: true,
}, },
]; ];
}; };

117
src/app/core/auth/auth.service.ts
View File

@ -4,9 +4,8 @@ import { AuthUtils } from 'app/core/auth/auth.utils';
import { UserService } from 'app/core/user/user.service'; import { UserService } from 'app/core/user/user.service';
import { catchError, Observable, of, switchMap, throwError } from 'rxjs'; import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class AuthService export class AuthService {
{
private _authenticated: boolean = false; private _authenticated: boolean = false;
private _httpClient = inject(HttpClient); private _httpClient = inject(HttpClient);
private _userService = inject(UserService); private _userService = inject(UserService);
@ -18,13 +17,11 @@ export class AuthService
/** /**
* Setter & getter for access token * Setter & getter for access token
*/ */
set accessToken(token: string) set accessToken(token: string) {
{
localStorage.setItem('accessToken', token); localStorage.setItem('accessToken', token);
} }
get accessToken(): string get accessToken(): string {
{
return localStorage.getItem('accessToken') ?? ''; return localStorage.getItem('accessToken') ?? '';
} }
@ -37,8 +34,7 @@ export class AuthService
* *
* @param email * @param email
*/ */
forgotPassword(email: string): Observable<any> forgotPassword(email: string): Observable<any> {
{
return this._httpClient.post('api/auth/forgot-password', email); return this._httpClient.post('api/auth/forgot-password', email);
} }
@ -47,8 +43,7 @@ export class AuthService
* *
* @param password * @param password
*/ */
resetPassword(password: string): Observable<any> resetPassword(password: string): Observable<any> {
{
return this._httpClient.post('api/auth/reset-password', password); return this._httpClient.post('api/auth/reset-password', password);
} }
@ -57,17 +52,14 @@ export class AuthService
* *
* @param credentials * @param credentials
*/ */
signIn(credentials: { email: string; password: string }): Observable<any> signIn(credentials: { email: string; password: string }): Observable<any> {
{
// Throw error, if the user is already logged in // Throw error, if the user is already logged in
if ( this._authenticated ) if (this._authenticated) {
{
return throwError('User is already logged in.'); return throwError('User is already logged in.');
} }
return this._httpClient.post('api/auth/sign-in', credentials).pipe( return this._httpClient.post('api/auth/sign-in', credentials).pipe(
switchMap((response: any) => switchMap((response: any) => {
{
// Store the access token in the local storage // Store the access token in the local storage
this.accessToken = response.accessToken; this.accessToken = response.accessToken;
@ -79,55 +71,52 @@ export class AuthService
// Return a new observable with the response // Return a new observable with the response
return of(response); return of(response);
}), })
); );
} }
/** /**
* Sign in using the access token * Sign in using the access token
*/ */
signInUsingToken(): Observable<any> signInUsingToken(): Observable<any> {
{
// Sign in using the token // Sign in using the token
return this._httpClient.post('api/auth/sign-in-with-token', { return this._httpClient
accessToken: this.accessToken, .post('api/auth/sign-in-with-token', {
}).pipe( accessToken: this.accessToken,
catchError(() => })
.pipe(
catchError(() =>
// Return false
of(false)
),
switchMap((response: any) => {
// Replace the access token with the new one if it's available on
// the response object.
//
// This is an added optional step for better security. Once you sign
// in using the token, you should generate a new one on the server
// side and attach it to the response object. Then the following
// piece of code can replace the token with the refreshed one.
if (response.accessToken) {
this.accessToken = response.accessToken;
}
// Return false // Set the authenticated flag to true
of(false), this._authenticated = true;
),
switchMap((response: any) =>
{
// Replace the access token with the new one if it's available on
// the response object.
//
// This is an added optional step for better security. Once you sign
// in using the token, you should generate a new one on the server
// side and attach it to the response object. Then the following
// piece of code can replace the token with the refreshed one.
if ( response.accessToken )
{
this.accessToken = response.accessToken;
}
// Set the authenticated flag to true // Store the user on the user service
this._authenticated = true; this._userService.user = response.user;
// Store the user on the user service // Return true
this._userService.user = response.user; return of(true);
})
// Return true );
return of(true);
}),
);
} }
/** /**
* Sign out * Sign out
*/ */
signOut(): Observable<any> signOut(): Observable<any> {
{
// Remove the access token from the local storage // Remove the access token from the local storage
localStorage.removeItem('accessToken'); localStorage.removeItem('accessToken');
@ -143,8 +132,12 @@ export class AuthService
* *
* @param user * @param user
*/ */
signUp(user: { name: string; email: string; password: string; company: string }): Observable<any> signUp(user: {
{ name: string;
email: string;
password: string;
company: string;
}): Observable<any> {
return this._httpClient.post('api/auth/sign-up', user); return this._httpClient.post('api/auth/sign-up', user);
} }
@ -153,31 +146,29 @@ export class AuthService
* *
* @param credentials * @param credentials
*/ */
unlockSession(credentials: { email: string; password: string }): Observable<any> unlockSession(credentials: {
{ email: string;
password: string;
}): Observable<any> {
return this._httpClient.post('api/auth/unlock-session', credentials); return this._httpClient.post('api/auth/unlock-session', credentials);
} }
/** /**
* Check the authentication status * Check the authentication status
*/ */
check(): Observable<boolean> check(): Observable<boolean> {
{
// Check if the user is logged in // Check if the user is logged in
if ( this._authenticated ) if (this._authenticated) {
{
return of(true); return of(true);
} }
// Check the access token availability // Check the access token availability
if ( !this.accessToken ) if (!this.accessToken) {
{
return of(false); return of(false);
} }
// Check the access token expire date // Check the access token expire date
if ( AuthUtils.isTokenExpired(this.accessToken) ) if (AuthUtils.isTokenExpired(this.accessToken)) {
{
return of(false); return of(false);
} }

87
src/app/core/auth/auth.utils.ts
View File

@ -5,8 +5,7 @@
// https://github.com/auth0/angular2-jwt // https://github.com/auth0/angular2-jwt
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
export class AuthUtils export class AuthUtils {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -17,11 +16,9 @@ export class AuthUtils
* @param token * @param token
* @param offsetSeconds * @param offsetSeconds
*/ */
static isTokenExpired(token: string, offsetSeconds?: number): boolean static isTokenExpired(token: string, offsetSeconds?: number): boolean {
{
// Return if there is no token // Return if there is no token
if ( !token || token === '' ) if (!token || token === '') {
{
return true; return true;
} }
@ -30,8 +27,7 @@ export class AuthUtils
offsetSeconds = offsetSeconds || 0; offsetSeconds = offsetSeconds || 0;
if ( date === null ) if (date === null) {
{
return true; return true;
} }
@ -50,17 +46,16 @@ export class AuthUtils
* @param str * @param str
* @private * @private
*/ */
private static _b64decode(str: string): string private static _b64decode(str: string): string {
{ const chars =
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
let output = ''; let output = '';
str = String(str).replace(/=+$/, ''); str = String(str).replace(/=+$/, '');
if ( str.length % 4 === 1 ) if (str.length % 4 === 1) {
{
throw new Error( throw new Error(
'\'atob\' failed: The string to be decoded is not correctly encoded.', "'atob' failed: The string to be decoded is not correctly encoded."
); );
} }
@ -72,16 +67,13 @@ export class AuthUtils
(buffer = str.charAt(idx++)); (buffer = str.charAt(idx++));
// character found in table? initialize bit storage and add its ascii value; // character found in table? initialize bit storage and add its ascii value;
~buffer && ~buffer &&
( ((bs = bc % 4 ? bs * 64 + buffer : buffer),
(bs = bc % 4 ? bs * 64 + buffer : buffer), // and if not first of each 4 characters,
// and if not first of each 4 characters, // convert the first 8 bits to one ascii character
// convert the first 8 bits to one ascii character bc++ % 4)
bc++ % 4
)
? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6)))) ? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6))))
: 0 : 0
) ) {
{
// try to find character in table (0-63, not found => -1) // try to find character in table (0-63, not found => -1)
buffer = chars.indexOf(buffer); buffer = chars.indexOf(buffer);
} }
@ -96,12 +88,15 @@ export class AuthUtils
* @param str * @param str
* @private * @private
*/ */
private static _b64DecodeUnicode(str: any): string private static _b64DecodeUnicode(str: any): string {
{
return decodeURIComponent( return decodeURIComponent(
Array.prototype.map Array.prototype.map
.call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)) .call(
.join(''), this._b64decode(str),
(c: any) =>
'%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
)
.join('')
); );
} }
@ -111,27 +106,21 @@ export class AuthUtils
* @param str * @param str
* @private * @private
*/ */
private static _urlBase64Decode(str: string): string private static _urlBase64Decode(str: string): string {
{
let output = str.replace(/-/g, '+').replace(/_/g, '/'); let output = str.replace(/-/g, '+').replace(/_/g, '/');
switch ( output.length % 4 ) switch (output.length % 4) {
{ case 0: {
case 0:
{
break; break;
} }
case 2: case 2: {
{
output += '=='; output += '==';
break; break;
} }
case 3: case 3: {
{
output += '='; output += '=';
break; break;
} }
default: default: {
{
throw Error('Illegal base64url string!'); throw Error('Illegal base64url string!');
} }
} }
@ -144,27 +133,25 @@ export class AuthUtils
* @param token * @param token
* @private * @private
*/ */
private static _decodeToken(token: string): any private static _decodeToken(token: string): any {
{
// Return if there is no token // Return if there is no token
if ( !token ) if (!token) {
{
return null; return null;
} }
// Split the token // Split the token
const parts = token.split('.'); const parts = token.split('.');
if ( parts.length !== 3 ) if (parts.length !== 3) {
{ throw new Error(
throw new Error('The inspected token doesn\'t appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more.'); "The inspected token doesn't appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more."
);
} }
// Decode the token using the Base64 decoder // Decode the token using the Base64 decoder
const decoded = this._urlBase64Decode(parts[1]); const decoded = this._urlBase64Decode(parts[1]);
if ( !decoded ) if (!decoded) {
{
throw new Error('Cannot decode the token.'); throw new Error('Cannot decode the token.');
} }
@ -177,14 +164,12 @@ export class AuthUtils
* @param token * @param token
* @private * @private
*/ */
private static _getTokenExpirationDate(token: string): Date | null private static _getTokenExpirationDate(token: string): Date | null {
{
// Get the decoded token // Get the decoded token
const decodedToken = this._decodeToken(token); const decodedToken = this._decodeToken(token);
// Return if the decodedToken doesn't have an 'exp' field // Return if the decodedToken doesn't have an 'exp' field
if ( !decodedToken.hasOwnProperty('exp') ) if (!decodedToken.hasOwnProperty('exp')) {
{
return null; return null;
} }

36
src/app/core/auth/guards/auth.guard.ts
View File

@ -3,26 +3,28 @@ import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs'; import { of, switchMap } from 'rxjs';
export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
{
const router: Router = inject(Router); const router: Router = inject(Router);
// Check the authentication status // Check the authentication status
return inject(AuthService).check().pipe( return inject(AuthService)
switchMap((authenticated) => .check()
{ .pipe(
// If the user is not authenticated... switchMap((authenticated) => {
if ( !authenticated ) // If the user is not authenticated...
{ if (!authenticated) {
// Redirect to the sign-in page with a redirectUrl param // Redirect to the sign-in page with a redirectUrl param
const redirectURL = state.url === '/sign-out' ? '' : `redirectURL=${state.url}`; const redirectURL =
const urlTree = router.parseUrl(`sign-in?${redirectURL}`); state.url === '/sign-out'
? ''
: `redirectURL=${state.url}`;
const urlTree = router.parseUrl(`sign-in?${redirectURL}`);
return of(urlTree); return of(urlTree);
} }
// Allow the access // Allow the access
return of(true); return of(true);
}), })
); );
}; };

30
src/app/core/auth/guards/noAuth.guard.ts
View File

@ -3,22 +3,24 @@ import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
import { AuthService } from 'app/core/auth/auth.service'; import { AuthService } from 'app/core/auth/auth.service';
import { of, switchMap } from 'rxjs'; import { of, switchMap } from 'rxjs';
export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (
{ route,
state
) => {
const router: Router = inject(Router); const router: Router = inject(Router);
// Check the authentication status // Check the authentication status
return inject(AuthService).check().pipe( return inject(AuthService)
switchMap((authenticated) => .check()
{ .pipe(
// If the user is authenticated... switchMap((authenticated) => {
if ( authenticated ) // If the user is authenticated...
{ if (authenticated) {
return of(router.parseUrl('')); return of(router.parseUrl(''));
} }
// Allow the access // Allow the access
return of(true); return of(true);
}), })
); );
}; };

14
src/app/core/icons/icons.provider.ts
View File

@ -1,13 +1,17 @@
import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Provider } from '@angular/core'; import {
ENVIRONMENT_INITIALIZER,
EnvironmentProviders,
inject,
Provider,
} from '@angular/core';
import { IconsService } from 'app/core/icons/icons.service'; import { IconsService } from 'app/core/icons/icons.service';
export const provideIcons = (): Array<Provider | EnvironmentProviders> => export const provideIcons = (): Array<Provider | EnvironmentProviders> => {
{
return [ return [
{ {
provide : ENVIRONMENT_INITIALIZER, provide: ENVIRONMENT_INITIALIZER,
useValue: () => inject(IconsService), useValue: () => inject(IconsService),
multi : true, multi: true,
}, },
]; ];
}; };

54
src/app/core/icons/icons.service.ts
View File

@ -2,24 +2,54 @@ import { inject, Injectable } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon'; import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class IconsService export class IconsService {
{
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {
{
const domSanitizer = inject(DomSanitizer); const domSanitizer = inject(DomSanitizer);
const matIconRegistry = inject(MatIconRegistry); const matIconRegistry = inject(MatIconRegistry);
// Register icon sets // Register icon sets
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('icons/material-twotone.svg')); matIconRegistry.addSvgIconSet(
matIconRegistry.addSvgIconSetInNamespace('mat_outline', domSanitizer.bypassSecurityTrustResourceUrl('icons/material-outline.svg')); domSanitizer.bypassSecurityTrustResourceUrl(
matIconRegistry.addSvgIconSetInNamespace('mat_solid', domSanitizer.bypassSecurityTrustResourceUrl('icons/material-solid.svg')); 'icons/material-twotone.svg'
matIconRegistry.addSvgIconSetInNamespace('feather', domSanitizer.bypassSecurityTrustResourceUrl('icons/feather.svg')); )
matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-outline.svg')); );
matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-solid.svg')); matIconRegistry.addSvgIconSetInNamespace(
matIconRegistry.addSvgIconSetInNamespace('heroicons_mini', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-mini.svg')); 'mat_outline',
domSanitizer.bypassSecurityTrustResourceUrl(
'icons/material-outline.svg'
)
);
matIconRegistry.addSvgIconSetInNamespace(
'mat_solid',
domSanitizer.bypassSecurityTrustResourceUrl(
'icons/material-solid.svg'
)
);
matIconRegistry.addSvgIconSetInNamespace(
'feather',
domSanitizer.bypassSecurityTrustResourceUrl('icons/feather.svg')
);
matIconRegistry.addSvgIconSetInNamespace(
'heroicons_outline',
domSanitizer.bypassSecurityTrustResourceUrl(
'icons/heroicons-outline.svg'
)
);
matIconRegistry.addSvgIconSetInNamespace(
'heroicons_solid',
domSanitizer.bypassSecurityTrustResourceUrl(
'icons/heroicons-solid.svg'
)
);
matIconRegistry.addSvgIconSetInNamespace(
'heroicons_mini',
domSanitizer.bypassSecurityTrustResourceUrl(
'icons/heroicons-mini.svg'
)
);
} }
} }

19
src/app/core/navigation/navigation.service.ts
View File

@ -3,11 +3,11 @@ import { inject, Injectable } from '@angular/core';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
import { Observable, ReplaySubject, tap } from 'rxjs'; import { Observable, ReplaySubject, tap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class NavigationService export class NavigationService {
{
private _httpClient = inject(HttpClient); private _httpClient = inject(HttpClient);
private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1); private _navigation: ReplaySubject<Navigation> =
new ReplaySubject<Navigation>(1);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -16,8 +16,7 @@ export class NavigationService
/** /**
* Getter for navigation * Getter for navigation
*/ */
get navigation$(): Observable<Navigation> get navigation$(): Observable<Navigation> {
{
return this._navigation.asObservable(); return this._navigation.asObservable();
} }
@ -28,13 +27,11 @@ export class NavigationService
/** /**
* Get all navigation data * Get all navigation data
*/ */
get(): Observable<Navigation> get(): Observable<Navigation> {
{
return this._httpClient.get<Navigation>('api/common/navigation').pipe( return this._httpClient.get<Navigation>('api/common/navigation').pipe(
tap((navigation) => tap((navigation) => {
{
this._navigation.next(navigation); this._navigation.next(navigation);
}), })
); );
} }
} }

3
src/app/core/navigation/navigation.types.ts
View File

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

8
src/app/core/transloco/transloco.http-loader.ts
View File

@ -3,9 +3,8 @@ import { inject, Injectable } from '@angular/core';
import { Translation, TranslocoLoader } from '@ngneat/transloco'; import { Translation, TranslocoLoader } from '@ngneat/transloco';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader export class TranslocoHttpLoader implements TranslocoLoader {
{
private _httpClient = inject(HttpClient); private _httpClient = inject(HttpClient);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -17,8 +16,7 @@ export class TranslocoHttpLoader implements TranslocoLoader
* *
* @param lang * @param lang
*/ */
getTranslation(lang: string): Observable<Translation> getTranslation(lang: string): Observable<Translation> {
{
return this._httpClient.get<Translation>(`./i18n/${lang}.json`); return this._httpClient.get<Translation>(`./i18n/${lang}.json`);
} }
} }

29
src/app/core/user/user.service.ts
View File

@ -3,9 +3,8 @@ import { inject, Injectable } from '@angular/core';
import { User } from 'app/core/user/user.types'; import { User } from 'app/core/user/user.types';
import { map, Observable, ReplaySubject, tap } from 'rxjs'; import { map, Observable, ReplaySubject, tap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class UserService export class UserService {
{
private _httpClient = inject(HttpClient); private _httpClient = inject(HttpClient);
private _user: ReplaySubject<User> = new ReplaySubject<User>(1); private _user: ReplaySubject<User> = new ReplaySubject<User>(1);
@ -18,14 +17,12 @@ export class UserService
* *
* @param value * @param value
*/ */
set user(value: User) set user(value: User) {
{
// Store the value // Store the value
this._user.next(value); this._user.next(value);
} }
get user$(): Observable<User> get user$(): Observable<User> {
{
return this._user.asObservable(); return this._user.asObservable();
} }
@ -36,13 +33,11 @@ export class UserService
/** /**
* Get the current signed-in user data * Get the current signed-in user data
*/ */
get(): Observable<User> get(): Observable<User> {
{
return this._httpClient.get<User>('api/common/user').pipe( return this._httpClient.get<User>('api/common/user').pipe(
tap((user) => tap((user) => {
{
this._user.next(user); this._user.next(user);
}), })
); );
} }
@ -51,13 +46,11 @@ export class UserService
* *
* @param user * @param user
*/ */
update(user: User): Observable<any> update(user: User): Observable<any> {
{ return this._httpClient.patch<User>('api/common/user', { user }).pipe(
return this._httpClient.patch<User>('api/common/user', {user}).pipe( map((response) => {
map((response) =>
{
this._user.next(response); this._user.next(response);
}), })
); );
} }
} }

3
src/app/core/user/user.types.ts
View File

@ -1,5 +1,4 @@
export interface User export interface User {
{
id: string; id: string;
name: string; name: string;
email: string; email: string;

38
src/app/layout/common/languages/languages.component.html
View File

@ -1,35 +1,37 @@
<!-- Button --> <!-- Button -->
<button <button mat-icon-button [matMenuTriggerFor]="languages">
mat-icon-button <ng-container
[matMenuTriggerFor]="languages"> *ngTemplateOutlet="flagImage; context: { $implicit: activeLang }"
<ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container> ></ng-container>
</button> </button>
<!-- Language menu --> <!-- Language menu -->
<mat-menu <mat-menu [xPosition]="'before'" #languages="matMenu">
[xPosition]="'before'"
#languages="matMenu">
<ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn"> <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
<button <button mat-menu-item (click)="setActiveLang(lang.id)">
mat-menu-item
(click)="setActiveLang(lang.id)">
<span class="flex items-center"> <span class="flex items-center">
<ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container> <ng-container
<span class="ml-3">{{lang.label}}</span> *ngTemplateOutlet="
flagImage;
context: { $implicit: lang.id }
"
></ng-container>
<span class="ml-3">{{ lang.label }}</span>
</span> </span>
</button> </button>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
<!-- Flag image template --> <!-- Flag image template -->
<ng-template <ng-template let-lang #flagImage>
let-lang <span class="relative w-6 overflow-hidden rounded-sm shadow">
#flagImage> <span
<span class="relative w-6 shadow rounded-sm overflow-hidden"> class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"
<span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span> ></span>
<img <img
class="w-full" class="w-full"
[src]="'images/flags/' + flagCodes[lang].toUpperCase() + '.svg'" [src]="'images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
[alt]="'Flag image for ' + lang"> [alt]="'Flag image for ' + lang"
/>
</span> </span>
</ng-template> </ng-template>

96
src/app/layout/common/languages/languages.component.ts
View File

@ -1,22 +1,31 @@
import { NgFor, NgTemplateOutlet } from '@angular/common'; import { NgFor, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
ViewEncapsulation,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { AvailableLangs, TranslocoService } from '@ngneat/transloco'; import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
import { take } from 'rxjs'; import { take } from 'rxjs';
@Component({ @Component({
selector : 'languages', selector: 'languages',
templateUrl : './languages.component.html', templateUrl: './languages.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'languages', exportAs: 'languages',
standalone : true, standalone: true,
imports : [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor], imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor],
}) })
export class LanguagesComponent implements OnInit, OnDestroy export class LanguagesComponent implements OnInit, OnDestroy {
{
availableLangs: AvailableLangs; availableLangs: AvailableLangs;
activeLang: string; activeLang: string;
flagCodes: any; flagCodes: any;
@ -27,10 +36,8 @@ export class LanguagesComponent implements OnInit, OnDestroy
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _translocoService: TranslocoService, private _translocoService: TranslocoService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -39,14 +46,12 @@ export class LanguagesComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Get the available languages from transloco // Get the available languages from transloco
this.availableLangs = this._translocoService.getAvailableLangs(); this.availableLangs = this._translocoService.getAvailableLangs();
// Subscribe to language changes // Subscribe to language changes
this._translocoService.langChanges$.subscribe((activeLang) => this._translocoService.langChanges$.subscribe((activeLang) => {
{
// Get the active lang // Get the active lang
this.activeLang = activeLang; this.activeLang = activeLang;
@ -56,17 +61,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
// Set the country iso codes for languages for flags // Set the country iso codes for languages for flags
this.flagCodes = { this.flagCodes = {
'en': 'us', en: 'us',
'tr': 'tr', tr: 'tr',
}; };
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Public methods // @ Public methods
@ -77,8 +80,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
* *
* @param lang * @param lang
*/ */
setActiveLang(lang: string): void setActiveLang(lang: string): void {
{
// Set the active lang // Set the active lang
this._translocoService.setActiveLang(lang); this._translocoService.setActiveLang(lang);
} }
@ -89,8 +91,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -104,8 +105,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
* @param lang * @param lang
* @private * @private
*/ */
private _updateNavigation(lang: string): void private _updateNavigation(lang: string): void {
{
// For the demonstration purposes, we will only update the Dashboard names // For the demonstration purposes, we will only update the Dashboard names
// from the navigation but you can do a full swap and change the entire // from the navigation but you can do a full swap and change the entire
// navigation data. // navigation data.
@ -114,11 +114,13 @@ export class LanguagesComponent implements OnInit, OnDestroy
// it's up to you. // it's up to you.
// Get the component -> navigation data -> item // Get the component -> navigation data -> item
const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation'); const navComponent =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
'mainNavigation'
);
// Return if the navigation component does not exist // Return if the navigation component does not exist
if ( !navComponent ) if (!navComponent) {
{
return null; return null;
} }
@ -126,12 +128,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
const navigation = navComponent.navigation; const navigation = navComponent.navigation;
// Get the Project dashboard item and update its title // Get the Project dashboard item and update its title
const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation); const projectDashboardItem = this._fuseNavigationService.getItem(
if ( projectDashboardItem ) 'dashboards.project',
{ navigation
this._translocoService.selectTranslate('Project').pipe(take(1)) );
.subscribe((translation) => if (projectDashboardItem) {
{ this._translocoService
.selectTranslate('Project')
.pipe(take(1))
.subscribe((translation) => {
// Set the title // Set the title
projectDashboardItem.title = translation; projectDashboardItem.title = translation;
@ -141,12 +146,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
} }
// Get the Analytics dashboard item and update its title // Get the Analytics dashboard item and update its title
const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation); const analyticsDashboardItem = this._fuseNavigationService.getItem(
if ( analyticsDashboardItem ) 'dashboards.analytics',
{ navigation
this._translocoService.selectTranslate('Analytics').pipe(take(1)) );
.subscribe((translation) => if (analyticsDashboardItem) {
{ this._translocoService
.selectTranslate('Analytics')
.pipe(take(1))
.subscribe((translation) => {
// Set the title // Set the title
analyticsDashboardItem.title = translation; analyticsDashboardItem.title = translation;

150
src/app/layout/common/messages/messages.component.html
View File

@ -1,12 +1,13 @@
<!-- Messages toggle --> <!-- Messages toggle -->
<button <button mat-icon-button (click)="openPanel()" #messagesOrigin>
mat-icon-button
(click)="openPanel()"
#messagesOrigin>
<ng-container *ngIf="unreadCount > 0"> <ng-container *ngIf="unreadCount > 0">
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3"> <span
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium"> class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
{{unreadCount}} >
<span
class="ml-4 mt-2.5 flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-indigo-600 px-1 text-xs font-medium text-indigo-50"
>
{{ unreadCount }}
</span> </span>
</span> </span>
</ng-container> </ng-container>
@ -15,18 +16,19 @@
<!-- Messages panel --> <!-- Messages panel -->
<ng-template #messagesPanel> <ng-template #messagesPanel>
<div
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
>
<!-- Header --> <!-- Header -->
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div
<div class="sm:hidden -ml-1 mr-3"> class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
<button >
mat-icon-button <div class="-ml-1 mr-3 sm:hidden">
(click)="closePanel()"> <button mat-icon-button (click)="closePanel()">
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon> [svgIcon]="'heroicons_solid:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
<div class="text-lg font-medium leading-10">Messages</div> <div class="text-lg font-medium leading-10">Messages</div>
@ -36,38 +38,48 @@
mat-icon-button mat-icon-button
[disabled]="unreadCount === 0" [disabled]="unreadCount === 0"
[matTooltip]="'Mark all as read'" [matTooltip]="'Mark all as read'"
(click)="markAllAsRead()"> (click)="markAllAsRead()"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:envelope-open'"></mat-icon> [svgIcon]="'heroicons_solid:envelope-open'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card"> <div
class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
>
<!-- Messages --> <!-- Messages -->
<ng-container *ngFor="let message of messages; trackBy: trackByFn"> <ng-container *ngFor="let message of messages; trackBy: trackByFn">
<div <div
class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5" class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
[ngClass]="{'unread': !message.read}"> [ngClass]="{ unread: !message.read }"
>
<!-- Message with a link --> <!-- Message with a link -->
<ng-container *ngIf="message.link"> <ng-container *ngIf="message.link">
<!-- Normal links --> <!-- Normal links -->
<ng-container *ngIf="!message.useRouter"> <ng-container *ngIf="!message.useRouter">
<a <a
class="flex flex-auto py-5 pl-6 cursor-pointer" class="flex flex-auto cursor-pointer py-5 pl-6"
[href]="message.link"> [href]="message.link"
<ng-container *ngTemplateOutlet="messageContent"></ng-container> >
<ng-container
*ngTemplateOutlet="messageContent"
></ng-container>
</a> </a>
</ng-container> </ng-container>
<!-- Router links --> <!-- Router links -->
<ng-container *ngIf="message.useRouter"> <ng-container *ngIf="message.useRouter">
<a <a
class="flex flex-auto py-5 pl-6 cursor-pointer" class="flex flex-auto cursor-pointer py-5 pl-6"
[routerLink]="message.link"> [routerLink]="message.link"
<ng-container *ngTemplateOutlet="messageContent"></ng-container> >
<ng-container
*ngTemplateOutlet="messageContent"
></ng-container>
</a> </a>
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -75,32 +87,43 @@
<!-- Message without a link --> <!-- Message without a link -->
<ng-container *ngIf="!message.link"> <ng-container *ngIf="!message.link">
<div class="flex flex-auto py-5 pl-6"> <div class="flex flex-auto py-5 pl-6">
<ng-container *ngTemplateOutlet="messageContent"></ng-container> <ng-container
*ngTemplateOutlet="messageContent"
></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Actions --> <!-- Actions -->
<div class="relative flex flex-col my-5 mr-6 ml-2"> <div class="relative my-5 ml-2 mr-6 flex flex-col">
<!-- Indicator --> <!-- Indicator -->
<button <button
class="w-6 h-6 min-h-6" class="h-6 min-h-6 w-6"
mat-icon-button mat-icon-button
(click)="toggleRead(message)" (click)="toggleRead(message)"
[matTooltip]="message.read ? 'Mark as unread' : 'Mark as read'"> [matTooltip]="
message.read ? 'Mark as unread' : 'Mark as read'
"
>
<span <span
class="w-2 h-2 rounded-full" class="h-2 w-2 rounded-full"
[ngClass]="{'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100': message.read, [ngClass]="{
'bg-primary': !message.read}"></span> 'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
message.read,
'bg-primary': !message.read
}"
></span>
</button> </button>
<!-- Remove --> <!-- Remove -->
<button <button
class="w-6 h-6 min-h-6 sm:opacity-0 sm:group-hover:opacity-100" class="h-6 min-h-6 w-6 sm:opacity-0 sm:group-hover:opacity-100"
mat-icon-button mat-icon-button
(click)="delete(message)" (click)="delete(message)"
[matTooltip]="'Remove'"> [matTooltip]="'Remove'"
>
<mat-icon <mat-icon
class="icon-size-4" class="icon-size-4"
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon> [svgIcon]="'heroicons_solid:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
@ -109,34 +132,40 @@
<ng-template #messageContent> <ng-template #messageContent>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="message.icon && !message.image"> <ng-container *ngIf="message.icon && !message.image">
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700"> <div
class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
[svgIcon]="message.icon"> [svgIcon]="message.icon"
>
</mat-icon> </mat-icon>
</div> </div>
</ng-container> </ng-container>
<!-- Image --> <!-- Image -->
<ng-container *ngIf="message.image"> <ng-container *ngIf="message.image">
<img <img
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center" class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
[src]="message.image" [src]="message.image"
[alt]="'Message image'"> [alt]="'Message image'"
/>
</ng-container> </ng-container>
<!-- Title, description & time --> <!-- Title, description & time -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<ng-container *ngIf="message.title"> <ng-container *ngIf="message.title">
<div <div
class="font-semibold line-clamp-1" class="line-clamp-1 font-semibold"
[innerHTML]="message.title"></div> [innerHTML]="message.title"
></div>
</ng-container> </ng-container>
<ng-container *ngIf="message.description"> <ng-container *ngIf="message.description">
<div <div
class="line-clamp-2" class="line-clamp-2"
[innerHTML]="message.description"></div> [innerHTML]="message.description"
></div>
</ng-container> </ng-container>
<div class="mt-2 text-sm leading-none text-secondary"> <div class="text-secondary mt-2 text-sm leading-none">
{{message.time | date:'MMM dd, h:mm a'}} {{ message.time | date: 'MMM dd, h:mm a' }}
</div> </div>
</div> </div>
</ng-template> </ng-template>
@ -144,14 +173,25 @@
<!-- No messages --> <!-- No messages -->
<ng-container *ngIf="!messages || !messages.length"> <ng-container *ngIf="!messages || !messages.length">
<div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8"> <div
<div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600"> class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
<div
class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
>
<mat-icon <mat-icon
class="text-primary-700 dark:text-primary-50" class="text-primary-700 dark:text-primary-50"
[svgIcon]="'heroicons_outline:inbox'"></mat-icon> [svgIcon]="'heroicons_outline:inbox'"
></mat-icon>
</div>
<div class="mt-5 text-2xl font-semibold tracking-tight">
No messages
</div>
<div
class="text-secondary mt-1 w-full max-w-60 text-center text-md"
>
When you have messages, they will appear here.
</div> </div>
<div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>
<div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have messages, they will appear here.</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>

134
src/app/layout/common/messages/messages.component.ts
View File

@ -1,7 +1,23 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal'; import { TemplatePortal } from '@angular/cdk/portal';
import { DatePipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import {
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
TemplateRef,
ViewChild,
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import { MatButton, MatButtonModule } from '@angular/material/button'; import { MatButton, MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
@ -11,16 +27,25 @@ import { Message } from 'app/layout/common/messages/messages.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'messages', selector: 'messages',
templateUrl : './messages.component.html', templateUrl: './messages.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'messages', exportAs: 'messages',
standalone : true, standalone: true,
imports : [MatButtonModule, NgIf, MatIconModule, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, DatePipe], imports: [
MatButtonModule,
NgIf,
MatIconModule,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,
DatePipe,
],
}) })
export class MessagesComponent implements OnInit, OnDestroy export class MessagesComponent implements OnInit, OnDestroy {
{
@ViewChild('messagesOrigin') private _messagesOrigin: MatButton; @ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
@ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>; @ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
@ -36,10 +61,8 @@ export class MessagesComponent implements OnInit, OnDestroy
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _messagesService: MessagesService, private _messagesService: MessagesService,
private _overlay: Overlay, private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef, private _viewContainerRef: ViewContainerRef
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -48,13 +71,11 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to message changes // Subscribe to message changes
this._messagesService.messages$ this._messagesService.messages$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((messages: Message[]) => .subscribe((messages: Message[]) => {
{
// Load the messages // Load the messages
this.messages = messages; this.messages = messages;
@ -69,15 +90,13 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
// Dispose the overlay // Dispose the overlay
if ( this._overlayRef ) if (this._overlayRef) {
{
this._overlayRef.dispose(); this._overlayRef.dispose();
} }
} }
@ -89,37 +108,34 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* Open the messages panel * Open the messages panel
*/ */
openPanel(): void openPanel(): void {
{
// Return if the messages panel or its origin is not defined // Return if the messages panel or its origin is not defined
if ( !this._messagesPanel || !this._messagesOrigin ) if (!this._messagesPanel || !this._messagesOrigin) {
{
return; return;
} }
// Create the overlay if it doesn't exist // Create the overlay if it doesn't exist
if ( !this._overlayRef ) if (!this._overlayRef) {
{
this._createOverlay(); this._createOverlay();
} }
// Attach the portal to the overlay // Attach the portal to the overlay
this._overlayRef.attach(new TemplatePortal(this._messagesPanel, this._viewContainerRef)); this._overlayRef.attach(
new TemplatePortal(this._messagesPanel, this._viewContainerRef)
);
} }
/** /**
* Close the messages panel * Close the messages panel
*/ */
closePanel(): void closePanel(): void {
{
this._overlayRef.detach(); this._overlayRef.detach();
} }
/** /**
* Mark all messages as read * Mark all messages as read
*/ */
markAllAsRead(): void markAllAsRead(): void {
{
// Mark all as read // Mark all as read
this._messagesService.markAllAsRead().subscribe(); this._messagesService.markAllAsRead().subscribe();
} }
@ -127,8 +143,7 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* Toggle read status of the given message * Toggle read status of the given message
*/ */
toggleRead(message: Message): void toggleRead(message: Message): void {
{
// Toggle the read status // Toggle the read status
message.read = !message.read; message.read = !message.read;
@ -139,8 +154,7 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* Delete the given message * Delete the given message
*/ */
delete(message: Message): void delete(message: Message): void {
{
// Delete the message // Delete the message
this._messagesService.delete(message.id).subscribe(); this._messagesService.delete(message.id).subscribe();
} }
@ -151,8 +165,7 @@ export class MessagesComponent implements OnInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -163,39 +176,41 @@ export class MessagesComponent implements OnInit, OnDestroy
/** /**
* Create the overlay * Create the overlay
*/ */
private _createOverlay(): void private _createOverlay(): void {
{
// Create the overlay // Create the overlay
this._overlayRef = this._overlay.create({ this._overlayRef = this._overlay.create({
hasBackdrop : true, hasBackdrop: true,
backdropClass : 'fuse-backdrop-on-mobile', backdropClass: 'fuse-backdrop-on-mobile',
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy: this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay
.flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement) .position()
.flexibleConnectedTo(
this._messagesOrigin._elementRef.nativeElement
)
.withLockedPosition(true) .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {
originX : 'start', originX: 'start',
originY : 'bottom', originY: 'bottom',
overlayX: 'start', overlayX: 'start',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'start', originX: 'start',
originY : 'top', originY: 'top',
overlayX: 'start', overlayX: 'start',
overlayY: 'bottom', overlayY: 'bottom',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'bottom', originY: 'bottom',
overlayX: 'end', overlayX: 'end',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'top', originY: 'top',
overlayX: 'end', overlayX: 'end',
overlayY: 'bottom', overlayY: 'bottom',
}, },
@ -203,8 +218,7 @@ export class MessagesComponent implements OnInit, OnDestroy
}); });
// Detach the overlay from the portal on backdrop click // Detach the overlay from the portal on backdrop click
this._overlayRef.backdropClick().subscribe(() => this._overlayRef.backdropClick().subscribe(() => {
{
this._overlayRef.detach(); this._overlayRef.detach();
}); });
} }
@ -214,13 +228,11 @@ export class MessagesComponent implements OnInit, OnDestroy
* *
* @private * @private
*/ */
private _calculateUnreadCount(): void private _calculateUnreadCount(): void {
{
let count = 0; let count = 0;
if ( this.messages && this.messages.length ) if (this.messages && this.messages.length) {
{ count = this.messages.filter((message) => !message.read).length;
count = this.messages.filter(message => !message.read).length;
} }
this.unreadCount = count; this.unreadCount = count;

155
src/app/layout/common/messages/messages.service.ts
View File

@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
import { Message } from 'app/layout/common/messages/messages.types'; import { Message } from 'app/layout/common/messages/messages.types';
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class MessagesService export class MessagesService {
{ private _messages: ReplaySubject<Message[]> = new ReplaySubject<Message[]>(
private _messages: ReplaySubject<Message[]> = new ReplaySubject<Message[]>(1); 1
);
/** /**
* Constructor * Constructor
*/ */
constructor(private _httpClient: HttpClient) constructor(private _httpClient: HttpClient) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -22,8 +21,7 @@ export class MessagesService
/** /**
* Getter for messages * Getter for messages
*/ */
get messages$(): Observable<Message[]> get messages$(): Observable<Message[]> {
{
return this._messages.asObservable(); return this._messages.asObservable();
} }
@ -34,13 +32,11 @@ export class MessagesService
/** /**
* Get all messages * Get all messages
*/ */
getAll(): Observable<Message[]> getAll(): Observable<Message[]> {
{
return this._httpClient.get<Message[]>('api/common/messages').pipe( return this._httpClient.get<Message[]>('api/common/messages').pipe(
tap((messages) => tap((messages) => {
{
this._messages.next(messages); this._messages.next(messages);
}), })
); );
} }
@ -49,20 +45,22 @@ export class MessagesService
* *
* @param message * @param message
*/ */
create(message: Message): Observable<Message> create(message: Message): Observable<Message> {
{
return this.messages$.pipe( return this.messages$.pipe(
take(1), take(1),
switchMap(messages => this._httpClient.post<Message>('api/common/messages', {message}).pipe( switchMap((messages) =>
map((newMessage) => this._httpClient
{ .post<Message>('api/common/messages', { message })
// Update the messages with the new message .pipe(
this._messages.next([...messages, newMessage]); map((newMessage) => {
// Update the messages with the new message
this._messages.next([...messages, newMessage]);
// Return the new message from observable // Return the new message from observable
return newMessage; return newMessage;
}), })
)), )
)
); );
} }
@ -72,29 +70,33 @@ export class MessagesService
* @param id * @param id
* @param message * @param message
*/ */
update(id: string, message: Message): Observable<Message> update(id: string, message: Message): Observable<Message> {
{
return this.messages$.pipe( return this.messages$.pipe(
take(1), take(1),
switchMap(messages => this._httpClient.patch<Message>('api/common/messages', { switchMap((messages) =>
id, this._httpClient
message, .patch<Message>('api/common/messages', {
}).pipe( id,
map((updatedMessage: Message) => message,
{ })
// Find the index of the updated message .pipe(
const index = messages.findIndex(item => item.id === id); map((updatedMessage: Message) => {
// Find the index of the updated message
const index = messages.findIndex(
(item) => item.id === id
);
// Update the message // Update the message
messages[index] = updatedMessage; messages[index] = updatedMessage;
// Update the messages // Update the messages
this._messages.next(messages); this._messages.next(messages);
// Return the updated message // Return the updated message
return updatedMessage; return updatedMessage;
}), })
)), )
)
); );
} }
@ -103,52 +105,57 @@ export class MessagesService
* *
* @param id * @param id
*/ */
delete(id: string): Observable<boolean> delete(id: string): Observable<boolean> {
{
return this.messages$.pipe( return this.messages$.pipe(
take(1), take(1),
switchMap(messages => this._httpClient.delete<boolean>('api/common/messages', {params: {id}}).pipe( switchMap((messages) =>
map((isDeleted: boolean) => this._httpClient
{ .delete<boolean>('api/common/messages', { params: { id } })
// Find the index of the deleted message .pipe(
const index = messages.findIndex(item => item.id === id); map((isDeleted: boolean) => {
// Find the index of the deleted message
const index = messages.findIndex(
(item) => item.id === id
);
// Delete the message // Delete the message
messages.splice(index, 1); messages.splice(index, 1);
// Update the messages // Update the messages
this._messages.next(messages); this._messages.next(messages);
// Return the deleted status // Return the deleted status
return isDeleted; return isDeleted;
}), })
)), )
)
); );
} }
/** /**
* Mark all messages as read * Mark all messages as read
*/ */
markAllAsRead(): Observable<boolean> markAllAsRead(): Observable<boolean> {
{
return this.messages$.pipe( return this.messages$.pipe(
take(1), take(1),
switchMap(messages => this._httpClient.get<boolean>('api/common/messages/mark-all-as-read').pipe( switchMap((messages) =>
map((isUpdated: boolean) => this._httpClient
{ .get<boolean>('api/common/messages/mark-all-as-read')
// Go through all messages and set them as read .pipe(
messages.forEach((message, index) => map((isUpdated: boolean) => {
{ // Go through all messages and set them as read
messages[index].read = true; messages.forEach((message, index) => {
}); messages[index].read = true;
});
// Update the messages // Update the messages
this._messages.next(messages); this._messages.next(messages);
// Return the updated status // Return the updated status
return isUpdated; return isUpdated;
}), })
)), )
)
); );
} }
} }

3
src/app/layout/common/messages/messages.types.ts
View File

@ -1,5 +1,4 @@
export interface Message export interface Message {
{
id: string; id: string;
icon?: string; icon?: string;
image?: string; image?: string;

164
src/app/layout/common/notifications/notifications.component.html
View File

@ -1,12 +1,13 @@
<!-- Notifications toggle --> <!-- Notifications toggle -->
<button <button mat-icon-button (click)="openPanel()" #notificationsOrigin>
mat-icon-button
(click)="openPanel()"
#notificationsOrigin>
<ng-container *ngIf="unreadCount > 0"> <ng-container *ngIf="unreadCount > 0">
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3"> <span
<span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium"> class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
{{unreadCount}} >
<span
class="ml-4 mt-2.5 flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-teal-600 px-1 text-xs font-medium text-indigo-50"
>
{{ unreadCount }}
</span> </span>
</span> </span>
</ng-container> </ng-container>
@ -15,18 +16,19 @@
<!-- Notifications panel --> <!-- Notifications panel -->
<ng-template #notificationsPanel> <ng-template #notificationsPanel>
<div
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
>
<!-- Header --> <!-- Header -->
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div
<div class="sm:hidden -ml-1 mr-3"> class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
<button >
mat-icon-button <div class="-ml-1 mr-3 sm:hidden">
(click)="closePanel()"> <button mat-icon-button (click)="closePanel()">
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon> [svgIcon]="'heroicons_solid:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
<div class="text-lg font-medium leading-10">Notifications</div> <div class="text-lg font-medium leading-10">Notifications</div>
@ -36,38 +38,50 @@
mat-icon-button mat-icon-button
[matTooltip]="'Mark all as read'" [matTooltip]="'Mark all as read'"
[disabled]="unreadCount === 0" [disabled]="unreadCount === 0"
(click)="markAllAsRead()"> (click)="markAllAsRead()"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:envelope-open'"></mat-icon> [svgIcon]="'heroicons_solid:envelope-open'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card"> <div
class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
>
<!-- Notifications --> <!-- Notifications -->
<ng-container *ngFor="let notification of notifications; trackBy: trackByFn"> <ng-container
*ngFor="let notification of notifications; trackBy: trackByFn"
>
<div <div
class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5" class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
[ngClass]="{'unread': !notification.read}"> [ngClass]="{ unread: !notification.read }"
>
<!-- Notification with a link --> <!-- Notification with a link -->
<ng-container *ngIf="notification.link"> <ng-container *ngIf="notification.link">
<!-- Normal links --> <!-- Normal links -->
<ng-container *ngIf="!notification.useRouter"> <ng-container *ngIf="!notification.useRouter">
<a <a
class="flex flex-auto py-5 pl-6 cursor-pointer" class="flex flex-auto cursor-pointer py-5 pl-6"
[href]="notification.link"> [href]="notification.link"
<ng-container *ngTemplateOutlet="notificationContent"></ng-container> >
<ng-container
*ngTemplateOutlet="notificationContent"
></ng-container>
</a> </a>
</ng-container> </ng-container>
<!-- Router links --> <!-- Router links -->
<ng-container *ngIf="notification.useRouter"> <ng-container *ngIf="notification.useRouter">
<a <a
class="flex flex-auto py-5 pl-6 cursor-pointer" class="flex flex-auto cursor-pointer py-5 pl-6"
[routerLink]="notification.link"> [routerLink]="notification.link"
<ng-container *ngTemplateOutlet="notificationContent"></ng-container> >
<ng-container
*ngTemplateOutlet="notificationContent"
></ng-container>
</a> </a>
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -75,69 +89,89 @@
<!-- Notification without a link --> <!-- Notification without a link -->
<ng-container *ngIf="!notification.link"> <ng-container *ngIf="!notification.link">
<div class="flex flex-auto py-5 pl-6"> <div class="flex flex-auto py-5 pl-6">
<ng-container *ngTemplateOutlet="notificationContent"></ng-container> <ng-container
*ngTemplateOutlet="notificationContent"
></ng-container>
</div> </div>
</ng-container> </ng-container>
<!-- Actions --> <!-- Actions -->
<div class="relative flex flex-col my-5 mr-6 ml-2"> <div class="relative my-5 ml-2 mr-6 flex flex-col">
<!-- Indicator --> <!-- Indicator -->
<button <button
class="w-6 h-6 min-h-6" class="h-6 min-h-6 w-6"
mat-icon-button mat-icon-button
(click)="toggleRead(notification)" (click)="toggleRead(notification)"
[matTooltip]="notification.read ? 'Mark as unread' : 'Mark as read'"> [matTooltip]="
notification.read
? 'Mark as unread'
: 'Mark as read'
"
>
<span <span
class="w-2 h-2 rounded-full" class="h-2 w-2 rounded-full"
[ngClass]="{'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100': notification.read, [ngClass]="{
'bg-primary': !notification.read}"></span> 'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
notification.read,
'bg-primary': !notification.read
}"
></span>
</button> </button>
<!-- Remove --> <!-- Remove -->
<button <button
class="w-6 h-6 min-h-6 sm:opacity-0 sm:group-hover:opacity-100" class="h-6 min-h-6 w-6 sm:opacity-0 sm:group-hover:opacity-100"
mat-icon-button mat-icon-button
(click)="delete(notification)" (click)="delete(notification)"
[matTooltip]="'Remove'"> [matTooltip]="'Remove'"
>
<mat-icon <mat-icon
class="icon-size-4" class="icon-size-4"
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon> [svgIcon]="'heroicons_solid:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Notification content template --> <!-- Notification content template -->
<ng-template #notificationContent> <ng-template #notificationContent>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="notification.icon && !notification.image"> <ng-container
<div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700"> *ngIf="notification.icon && !notification.image"
>
<div
class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
[svgIcon]="notification.icon"> [svgIcon]="notification.icon"
>
</mat-icon> </mat-icon>
</div> </div>
</ng-container> </ng-container>
<!-- Image --> <!-- Image -->
<ng-container *ngIf="notification.image"> <ng-container *ngIf="notification.image">
<img <img
class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center" class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
[src]="notification.image" [src]="notification.image"
[alt]="'Notification image'"> [alt]="'Notification image'"
/>
</ng-container> </ng-container>
<!-- Title, description & time --> <!-- Title, description & time -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<ng-container *ngIf="notification.title"> <ng-container *ngIf="notification.title">
<div <div
class="font-semibold line-clamp-1" class="line-clamp-1 font-semibold"
[innerHTML]="notification.title"></div> [innerHTML]="notification.title"
></div>
</ng-container> </ng-container>
<ng-container *ngIf="notification.description"> <ng-container *ngIf="notification.description">
<div <div
class="line-clamp-2" class="line-clamp-2"
[innerHTML]="notification.description"></div> [innerHTML]="notification.description"
></div>
</ng-container> </ng-container>
<div class="mt-2 text-sm leading-none text-secondary"> <div class="text-secondary mt-2 text-sm leading-none">
{{notification.time | date:'MMM dd, h:mm a'}} {{ notification.time | date: 'MMM dd, h:mm a' }}
</div> </div>
</div> </div>
</ng-template> </ng-template>
@ -145,19 +179,27 @@
<!-- No notifications --> <!-- No notifications -->
<ng-container *ngIf="!notifications || !notifications.length"> <ng-container *ngIf="!notifications || !notifications.length">
<div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8"> <div
<div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600"> class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
<div
class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
>
<mat-icon <mat-icon
class="text-primary-700 dark:text-primary-50" class="text-primary-700 dark:text-primary-50"
[svgIcon]="'heroicons_outline:bell'"></mat-icon> [svgIcon]="'heroicons_outline:bell'"
></mat-icon>
</div>
<div class="mt-5 text-2xl font-semibold tracking-tight">
No notifications
</div>
<div
class="text-secondary mt-1 w-full max-w-60 text-center text-md"
>
When you have notifications, they will appear here.
</div> </div>
<div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>
<div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have notifications, they will appear here.</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</ng-template> </ng-template>

143
src/app/layout/common/notifications/notifications.component.ts
View File

@ -1,7 +1,23 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal'; import { TemplatePortal } from '@angular/cdk/portal';
import { DatePipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import {
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
TemplateRef,
ViewChild,
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import { MatButton, MatButtonModule } from '@angular/material/button'; import { MatButton, MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
@ -11,18 +27,28 @@ import { Notification } from 'app/layout/common/notifications/notifications.type
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'notifications', selector: 'notifications',
templateUrl : './notifications.component.html', templateUrl: './notifications.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'notifications', exportAs: 'notifications',
standalone : true, standalone: true,
imports : [MatButtonModule, NgIf, MatIconModule, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, DatePipe], imports: [
MatButtonModule,
NgIf,
MatIconModule,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,
DatePipe,
],
}) })
export class NotificationsComponent implements OnInit, OnDestroy export class NotificationsComponent implements OnInit, OnDestroy {
{
@ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton; @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
@ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>; @ViewChild('notificationsPanel')
private _notificationsPanel: TemplateRef<any>;
notifications: Notification[]; notifications: Notification[];
unreadCount: number = 0; unreadCount: number = 0;
@ -36,10 +62,8 @@ export class NotificationsComponent implements OnInit, OnDestroy
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _notificationsService: NotificationsService, private _notificationsService: NotificationsService,
private _overlay: Overlay, private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef, private _viewContainerRef: ViewContainerRef
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -48,13 +72,11 @@ export class NotificationsComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to notification changes // Subscribe to notification changes
this._notificationsService.notifications$ this._notificationsService.notifications$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((notifications: Notification[]) => .subscribe((notifications: Notification[]) => {
{
// Load the notifications // Load the notifications
this.notifications = notifications; this.notifications = notifications;
@ -69,15 +91,13 @@ export class NotificationsComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
// Dispose the overlay // Dispose the overlay
if ( this._overlayRef ) if (this._overlayRef) {
{
this._overlayRef.dispose(); this._overlayRef.dispose();
} }
} }
@ -89,37 +109,34 @@ export class NotificationsComponent implements OnInit, OnDestroy
/** /**
* Open the notifications panel * Open the notifications panel
*/ */
openPanel(): void openPanel(): void {
{
// Return if the notifications panel or its origin is not defined // Return if the notifications panel or its origin is not defined
if ( !this._notificationsPanel || !this._notificationsOrigin ) if (!this._notificationsPanel || !this._notificationsOrigin) {
{
return; return;
} }
// Create the overlay if it doesn't exist // Create the overlay if it doesn't exist
if ( !this._overlayRef ) if (!this._overlayRef) {
{
this._createOverlay(); this._createOverlay();
} }
// Attach the portal to the overlay // Attach the portal to the overlay
this._overlayRef.attach(new TemplatePortal(this._notificationsPanel, this._viewContainerRef)); this._overlayRef.attach(
new TemplatePortal(this._notificationsPanel, this._viewContainerRef)
);
} }
/** /**
* Close the notifications panel * Close the notifications panel
*/ */
closePanel(): void closePanel(): void {
{
this._overlayRef.detach(); this._overlayRef.detach();
} }
/** /**
* Mark all notifications as read * Mark all notifications as read
*/ */
markAllAsRead(): void markAllAsRead(): void {
{
// Mark all as read // Mark all as read
this._notificationsService.markAllAsRead().subscribe(); this._notificationsService.markAllAsRead().subscribe();
} }
@ -127,20 +144,20 @@ export class NotificationsComponent implements OnInit, OnDestroy
/** /**
* Toggle read status of the given notification * Toggle read status of the given notification
*/ */
toggleRead(notification: Notification): void toggleRead(notification: Notification): void {
{
// Toggle the read status // Toggle the read status
notification.read = !notification.read; notification.read = !notification.read;
// Update the notification // Update the notification
this._notificationsService.update(notification.id, notification).subscribe(); this._notificationsService
.update(notification.id, notification)
.subscribe();
} }
/** /**
* Delete the given notification * Delete the given notification
*/ */
delete(notification: Notification): void delete(notification: Notification): void {
{
// Delete the notification // Delete the notification
this._notificationsService.delete(notification.id).subscribe(); this._notificationsService.delete(notification.id).subscribe();
} }
@ -151,8 +168,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -163,39 +179,41 @@ export class NotificationsComponent implements OnInit, OnDestroy
/** /**
* Create the overlay * Create the overlay
*/ */
private _createOverlay(): void private _createOverlay(): void {
{
// Create the overlay // Create the overlay
this._overlayRef = this._overlay.create({ this._overlayRef = this._overlay.create({
hasBackdrop : true, hasBackdrop: true,
backdropClass : 'fuse-backdrop-on-mobile', backdropClass: 'fuse-backdrop-on-mobile',
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy: this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay
.flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement) .position()
.flexibleConnectedTo(
this._notificationsOrigin._elementRef.nativeElement
)
.withLockedPosition(true) .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {
originX : 'start', originX: 'start',
originY : 'bottom', originY: 'bottom',
overlayX: 'start', overlayX: 'start',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'start', originX: 'start',
originY : 'top', originY: 'top',
overlayX: 'start', overlayX: 'start',
overlayY: 'bottom', overlayY: 'bottom',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'bottom', originY: 'bottom',
overlayX: 'end', overlayX: 'end',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'top', originY: 'top',
overlayX: 'end', overlayX: 'end',
overlayY: 'bottom', overlayY: 'bottom',
}, },
@ -203,8 +221,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
}); });
// Detach the overlay from the portal on backdrop click // Detach the overlay from the portal on backdrop click
this._overlayRef.backdropClick().subscribe(() => this._overlayRef.backdropClick().subscribe(() => {
{
this._overlayRef.detach(); this._overlayRef.detach();
}); });
} }
@ -214,13 +231,13 @@ export class NotificationsComponent implements OnInit, OnDestroy
* *
* @private * @private
*/ */
private _calculateUnreadCount(): void private _calculateUnreadCount(): void {
{
let count = 0; let count = 0;
if ( this.notifications && this.notifications.length ) if (this.notifications && this.notifications.length) {
{ count = this.notifications.filter(
count = this.notifications.filter(notification => !notification.read).length; (notification) => !notification.read
).length;
} }
this.unreadCount = count; this.unreadCount = count;

170
src/app/layout/common/notifications/notifications.service.ts
View File

@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
import { Notification } from 'app/layout/common/notifications/notifications.types'; import { Notification } from 'app/layout/common/notifications/notifications.types';
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class NotificationsService export class NotificationsService {
{ private _notifications: ReplaySubject<Notification[]> = new ReplaySubject<
private _notifications: ReplaySubject<Notification[]> = new ReplaySubject<Notification[]>(1); Notification[]
>(1);
/** /**
* Constructor * Constructor
*/ */
constructor(private _httpClient: HttpClient) constructor(private _httpClient: HttpClient) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -22,8 +21,7 @@ export class NotificationsService
/** /**
* Getter for notifications * Getter for notifications
*/ */
get notifications$(): Observable<Notification[]> get notifications$(): Observable<Notification[]> {
{
return this._notifications.asObservable(); return this._notifications.asObservable();
} }
@ -34,14 +32,14 @@ export class NotificationsService
/** /**
* Get all notifications * Get all notifications
*/ */
getAll(): Observable<Notification[]> getAll(): Observable<Notification[]> {
{ return this._httpClient
return this._httpClient.get<Notification[]>('api/common/notifications').pipe( .get<Notification[]>('api/common/notifications')
tap((notifications) => .pipe(
{ tap((notifications) => {
this._notifications.next(notifications); this._notifications.next(notifications);
}), })
); );
} }
/** /**
@ -49,20 +47,27 @@ export class NotificationsService
* *
* @param notification * @param notification
*/ */
create(notification: Notification): Observable<Notification> create(notification: Notification): Observable<Notification> {
{
return this.notifications$.pipe( return this.notifications$.pipe(
take(1), take(1),
switchMap(notifications => this._httpClient.post<Notification>('api/common/notifications', {notification}).pipe( switchMap((notifications) =>
map((newNotification) => this._httpClient
{ .post<Notification>('api/common/notifications', {
// Update the notifications with the new notification notification,
this._notifications.next([...notifications, newNotification]); })
.pipe(
map((newNotification) => {
// Update the notifications with the new notification
this._notifications.next([
...notifications,
newNotification,
]);
// Return the new notification from observable // Return the new notification from observable
return newNotification; return newNotification;
}), })
)), )
)
); );
} }
@ -72,29 +77,33 @@ export class NotificationsService
* @param id * @param id
* @param notification * @param notification
*/ */
update(id: string, notification: Notification): Observable<Notification> update(id: string, notification: Notification): Observable<Notification> {
{
return this.notifications$.pipe( return this.notifications$.pipe(
take(1), take(1),
switchMap(notifications => this._httpClient.patch<Notification>('api/common/notifications', { switchMap((notifications) =>
id, this._httpClient
notification, .patch<Notification>('api/common/notifications', {
}).pipe( id,
map((updatedNotification: Notification) => notification,
{ })
// Find the index of the updated notification .pipe(
const index = notifications.findIndex(item => item.id === id); map((updatedNotification: Notification) => {
// Find the index of the updated notification
const index = notifications.findIndex(
(item) => item.id === id
);
// Update the notification // Update the notification
notifications[index] = updatedNotification; notifications[index] = updatedNotification;
// Update the notifications // Update the notifications
this._notifications.next(notifications); this._notifications.next(notifications);
// Return the updated notification // Return the updated notification
return updatedNotification; return updatedNotification;
}), })
)), )
)
); );
} }
@ -103,52 +112,59 @@ export class NotificationsService
* *
* @param id * @param id
*/ */
delete(id: string): Observable<boolean> delete(id: string): Observable<boolean> {
{
return this.notifications$.pipe( return this.notifications$.pipe(
take(1), take(1),
switchMap(notifications => this._httpClient.delete<boolean>('api/common/notifications', {params: {id}}).pipe( switchMap((notifications) =>
map((isDeleted: boolean) => this._httpClient
{ .delete<boolean>('api/common/notifications', {
// Find the index of the deleted notification params: { id },
const index = notifications.findIndex(item => item.id === id); })
.pipe(
map((isDeleted: boolean) => {
// Find the index of the deleted notification
const index = notifications.findIndex(
(item) => item.id === id
);
// Delete the notification // Delete the notification
notifications.splice(index, 1); notifications.splice(index, 1);
// Update the notifications // Update the notifications
this._notifications.next(notifications); this._notifications.next(notifications);
// Return the deleted status // Return the deleted status
return isDeleted; return isDeleted;
}), })
)), )
)
); );
} }
/** /**
* Mark all notifications as read * Mark all notifications as read
*/ */
markAllAsRead(): Observable<boolean> markAllAsRead(): Observable<boolean> {
{
return this.notifications$.pipe( return this.notifications$.pipe(
take(1), take(1),
switchMap(notifications => this._httpClient.get<boolean>('api/common/notifications/mark-all-as-read').pipe( switchMap((notifications) =>
map((isUpdated: boolean) => this._httpClient
{ .get<boolean>('api/common/notifications/mark-all-as-read')
// Go through all notifications and set them as read .pipe(
notifications.forEach((notification, index) => map((isUpdated: boolean) => {
{ // Go through all notifications and set them as read
notifications[index].read = true; notifications.forEach((notification, index) => {
}); notifications[index].read = true;
});
// Update the notifications // Update the notifications
this._notifications.next(notifications); this._notifications.next(notifications);
// Return the updated status // Return the updated status
return isUpdated; return isUpdated;
}), })
)), )
)
); );
} }
} }

3
src/app/layout/common/notifications/notifications.types.ts
View File

@ -1,5 +1,4 @@
export interface Notification export interface Notification {
{
id: string; id: string;
icon?: string; icon?: string;
image?: string; image?: string;

278
src/app/layout/common/quick-chat/quick-chat.component.html
View File

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

5
src/app/layout/common/quick-chat/quick-chat.component.scss
View File

@ -6,14 +6,12 @@ quick-chat {
} }
&.quick-chat-opened { &.quick-chat-opened {
> div { > div {
overflow: visible; overflow: visible;
} }
} }
&:not(.quick-chat-opened) { &:not(.quick-chat-opened) {
> div { > div {
overflow: visible; overflow: visible;
animation: addOverflowHidden 1ms linear 400ms; animation: addOverflowHidden 1ms linear 400ms;
@ -32,7 +30,6 @@ quick-chat {
} }
} }
/* Overlay */ /* Overlay */
.quick-chat-overlay { .quick-chat-overlay {
position: fixed; position: fixed;
@ -47,7 +44,7 @@ quick-chat {
@keyframes addOverflowHidden { @keyframes addOverflowHidden {
0% { 0% {
overflow: visible overflow: visible;
} }
99% { 99% {
overflow: visible; overflow: visible;

184
src/app/layout/common/quick-chat/quick-chat.component.ts
View File

@ -1,7 +1,27 @@
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { TextFieldModule } from '@angular/cdk/text-field'; import { TextFieldModule } from '@angular/cdk/text-field';
import { DatePipe, DOCUMENT, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import {
import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core'; DOCUMENT,
DatePipe,
NgClass,
NgFor,
NgIf,
NgTemplateOutlet,
} from '@angular/common';
import {
AfterViewInit,
Component,
ElementRef,
HostBinding,
HostListener,
Inject,
NgZone,
OnDestroy,
OnInit,
Renderer2,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -12,23 +32,35 @@ import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'quick-chat', selector: 'quick-chat',
templateUrl : './quick-chat.component.html', templateUrl: './quick-chat.component.html',
styleUrls : ['./quick-chat.component.scss'], styleUrls: ['./quick-chat.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'quickChat', exportAs: 'quickChat',
standalone : true, standalone: true,
imports : [NgClass, NgIf, MatIconModule, MatButtonModule, FuseScrollbarDirective, NgFor, NgTemplateOutlet, MatFormFieldModule, MatInputModule, TextFieldModule, DatePipe], imports: [
NgClass,
NgIf,
MatIconModule,
MatButtonModule,
FuseScrollbarDirective,
NgFor,
NgTemplateOutlet,
MatFormFieldModule,
MatInputModule,
TextFieldModule,
DatePipe,
],
}) })
export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy {
{
@ViewChild('messageInput') messageInput: ElementRef; @ViewChild('messageInput') messageInput: ElementRef;
chat: Chat; chat: Chat;
chats: Chat[]; chats: Chat[];
opened: boolean = false; opened: boolean = false;
selectedChat: Chat; selectedChat: Chat;
private _mutationObserver: MutationObserver; private _mutationObserver: MutationObserver;
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block(); private _scrollStrategy: ScrollStrategy =
this._scrollStrategyOptions.block();
private _overlay: HTMLElement; private _overlay: HTMLElement;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -41,10 +73,8 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _ngZone: NgZone, private _ngZone: NgZone,
private _quickChatService: QuickChatService, private _quickChatService: QuickChatService,
private _scrollStrategyOptions: ScrollStrategyOptions, private _scrollStrategyOptions: ScrollStrategyOptions
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Decorated methods // @ Decorated methods
@ -53,8 +83,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
return { return {
'quick-chat-opened': this.opened, 'quick-chat-opened': this.opened,
}; };
@ -67,13 +96,10 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
*/ */
@HostListener('input') @HostListener('input')
@HostListener('ngModelChange') @HostListener('ngModelChange')
private _resizeMessageInput(): void private _resizeMessageInput(): void {
{
// This doesn't need to trigger Angular's change detection by itself // This doesn't need to trigger Angular's change detection by itself
this._ngZone.runOutsideAngular(() => this._ngZone.runOutsideAngular(() => {
{ setTimeout(() => {
setTimeout(() =>
{
// Set the height to 'auto' so we can correctly read the scrollHeight // Set the height to 'auto' so we can correctly read the scrollHeight
this.messageInput.nativeElement.style.height = 'auto'; this.messageInput.nativeElement.style.height = 'auto';
@ -90,29 +116,25 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Chat // Chat
this._quickChatService.chat$ this._quickChatService.chat$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((chat: Chat) => .subscribe((chat: Chat) => {
{
this.chat = chat; this.chat = chat;
}); });
// Chats // Chats
this._quickChatService.chats$ this._quickChatService.chats$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((chats: Chat[]) => .subscribe((chats: Chat[]) => {
{
this.chats = chats; this.chats = chats;
}); });
// Selected chat // Selected chat
this._quickChatService.chat$ this._quickChatService.chat$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((chat: Chat) => .subscribe((chat: Chat) => {
{
this.selectedChat = chat; this.selectedChat = chat;
}); });
} }
@ -120,35 +142,40 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* After view init * After view init
*/ */
ngAfterViewInit(): void ngAfterViewInit(): void {
{
// Fix for Firefox. // Fix for Firefox.
// //
// Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent, // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position. // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
// This fixes the problem by reading the 'top' value from the html element and adding it as a // This fixes the problem by reading the 'top' value from the html element and adding it as a
// 'marginTop' to the navigation itself. // 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => this._mutationObserver = new MutationObserver((mutations) => {
{ mutations.forEach((mutation) => {
mutations.forEach((mutation) =>
{
const mutationTarget = mutation.target as HTMLElement; const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' ) if (mutation.attributeName === 'class') {
{ if (
if ( mutationTarget.classList.contains('cdk-global-scrollblock') ) mutationTarget.classList.contains(
{ 'cdk-global-scrollblock'
)
) {
const top = parseInt(mutationTarget.style.top, 10); const top = parseInt(mutationTarget.style.top, 10);
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`); this._renderer2.setStyle(
} this._elementRef.nativeElement,
else 'margin-top',
{ `${Math.abs(top)}px`
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null); );
} else {
this._renderer2.setStyle(
this._elementRef.nativeElement,
'margin-top',
null
);
} }
} }
}); });
}); });
this._mutationObserver.observe(this._document.documentElement, { this._mutationObserver.observe(this._document.documentElement, {
attributes : true, attributes: true,
attributeFilter: ['class'], attributeFilter: ['class'],
}); });
} }
@ -156,8 +183,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Disconnect the mutation observer // Disconnect the mutation observer
this._mutationObserver.disconnect(); this._mutationObserver.disconnect();
@ -173,11 +199,9 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* Open the panel * Open the panel
*/ */
open(): void open(): void {
{
// Return if the panel has already opened // Return if the panel has already opened
if ( this.opened ) if (this.opened) {
{
return; return;
} }
@ -188,11 +212,9 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* Close the panel * Close the panel
*/ */
close(): void close(): void {
{
// Return if the panel has already closed // Return if the panel has already closed
if ( !this.opened ) if (!this.opened) {
{
return; return;
} }
@ -203,14 +225,10 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
/** /**
* Toggle the panel * Toggle the panel
*/ */
toggle(): void toggle(): void {
{ if (this.opened) {
if ( this.opened )
{
this.close(); this.close();
} } else {
else
{
this.open(); this.open();
} }
} }
@ -220,8 +238,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
* *
* @param id * @param id
*/ */
selectChat(id: string): void selectChat(id: string): void {
{
// Open the panel // Open the panel
this._toggleOpened(true); this._toggleOpened(true);
@ -235,8 +252,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -249,8 +265,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
* *
* @private * @private
*/ */
private _showOverlay(): void private _showOverlay(): void {
{
// Try hiding the overlay in case there is one already opened // Try hiding the overlay in case there is one already opened
this._hideOverlay(); this._hideOverlay();
@ -258,8 +273,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
this._overlay = this._renderer2.createElement('div'); this._overlay = this._renderer2.createElement('div');
// Return if overlay couldn't be create for some reason // Return if overlay couldn't be create for some reason
if ( !this._overlay ) if (!this._overlay) {
{
return; return;
} }
@ -267,14 +281,16 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
this._overlay.classList.add('quick-chat-overlay'); this._overlay.classList.add('quick-chat-overlay');
// Append the backdrop to the parent of the panel // Append the backdrop to the parent of the panel
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay); this._renderer2.appendChild(
this._elementRef.nativeElement.parentElement,
this._overlay
);
// Enable block scroll strategy // Enable block scroll strategy
this._scrollStrategy.enable(); this._scrollStrategy.enable();
// Add an event listener to the overlay // Add an event listener to the overlay
this._overlay.addEventListener('click', () => this._overlay.addEventListener('click', () => {
{
this.close(); this.close();
}); });
} }
@ -284,16 +300,13 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
* *
* @private * @private
*/ */
private _hideOverlay(): void private _hideOverlay(): void {
{ if (!this._overlay) {
if ( !this._overlay )
{
return; return;
} }
// If the backdrop still exists... // If the backdrop still exists...
if ( this._overlay ) if (this._overlay) {
{
// Remove the backdrop // Remove the backdrop
this._overlay.parentNode.removeChild(this._overlay); this._overlay.parentNode.removeChild(this._overlay);
this._overlay = null; this._overlay = null;
@ -309,19 +322,16 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
* @param open * @param open
* @private * @private
*/ */
private _toggleOpened(open: boolean): void private _toggleOpened(open: boolean): void {
{
// Set the opened // Set the opened
this.opened = open; this.opened = open;
// If the panel opens, show the overlay // If the panel opens, show the overlay
if ( open ) if (open) {
{
this._showOverlay(); this._showOverlay();
} }
// Otherwise, hide the overlay // Otherwise, hide the overlay
else else {
{
this._hideOverlay(); this._hideOverlay();
} }
} }

71
src/app/layout/common/quick-chat/quick-chat.service.ts
View File

@ -1,20 +1,25 @@
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Chat } from 'app/layout/common/quick-chat/quick-chat.types'; import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs'; import {
BehaviorSubject,
map,
Observable,
of,
switchMap,
tap,
throwError,
} from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class QuickChatService export class QuickChatService {
{
private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null); private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null); private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null);
/** /**
* Constructor * Constructor
*/ */
constructor(private _httpClient: HttpClient) constructor(private _httpClient: HttpClient) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -23,16 +28,14 @@ export class QuickChatService
/** /**
* Getter for chat * Getter for chat
*/ */
get chat$(): Observable<Chat> get chat$(): Observable<Chat> {
{
return this._chat.asObservable(); return this._chat.asObservable();
} }
/** /**
* Getter for chat * Getter for chat
*/ */
get chats$(): Observable<Chat[]> get chats$(): Observable<Chat[]> {
{
return this._chats.asObservable(); return this._chats.asObservable();
} }
@ -43,13 +46,11 @@ export class QuickChatService
/** /**
* Get chats * Get chats
*/ */
getChats(): Observable<any> getChats(): Observable<any> {
{
return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe( return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
tap((response: Chat[]) => tap((response: Chat[]) => {
{
this._chats.next(response); this._chats.next(response);
}), })
); );
} }
@ -58,26 +59,26 @@ export class QuickChatService
* *
* @param id * @param id
*/ */
getChatById(id: string): Observable<any> getChatById(id: string): Observable<any> {
{ return this._httpClient
return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe( .get<Chat>('api/apps/chat/chat', { params: { id } })
map((chat) => .pipe(
{ map((chat) => {
// Update the chat // Update the chat
this._chat.next(chat); this._chat.next(chat);
// Return the chat // Return the chat
return chat; return chat;
}), }),
switchMap((chat) => switchMap((chat) => {
{ if (!chat) {
if ( !chat ) return throwError(
{ 'Could not found chat with id of ' + id + '!'
return throwError('Could not found chat with id of ' + id + '!'); );
} }
return of(chat); return of(chat);
}), })
); );
} }
} }

6
src/app/layout/common/quick-chat/quick-chat.types.ts
View File

@ -1,5 +1,4 @@
export interface Chat export interface Chat {
{
id?: string; id?: string;
contactId?: string; contactId?: string;
contact?: Contact; contact?: Contact;
@ -17,8 +16,7 @@ export interface Chat
}[]; }[];
} }
export interface Contact export interface Contact {
{
id?: string; id?: string;
avatar?: string; avatar?: string;
name?: string; name?: string;

181
src/app/layout/common/search/search.component.html
View File

@ -1,65 +1,91 @@
<!-- Bar search --> <!-- Bar search -->
<ng-container *ngIf="appearance === 'bar'"> <ng-container *ngIf="appearance === 'bar'">
<button <button mat-icon-button *ngIf="!opened" (click)="open()">
mat-icon-button
*ngIf="!opened"
(click)="open()">
<mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
</button> </button>
<div <div
class="absolute inset-0 flex items-center shrink-0 z-99 bg-card" class="bg-card absolute inset-0 z-99 flex shrink-0 items-center"
*ngIf="opened" *ngIf="opened"
@slideInTop @slideInTop
@slideOutTop> @slideOutTop
>
<mat-icon <mat-icon
class="absolute ml-6 sm:ml-8" class="absolute ml-6 sm:ml-8"
[svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon> [svgIcon]="'heroicons_outline:magnifying-glass'"
></mat-icon>
<input <input
class="w-full h-full px-16 sm:px-18" class="h-full w-full px-16 sm:px-18"
[formControl]="searchControl" [formControl]="searchControl"
[matAutocomplete]="matAutocomplete" [matAutocomplete]="matAutocomplete"
[placeholder]="'Search...'" [placeholder]="'Search...'"
(keydown)="onKeydown($event)" (keydown)="onKeydown($event)"
#barSearchInput> #barSearchInput
/>
<mat-autocomplete <mat-autocomplete
class="max-h-128 sm:px-2 border-t rounded-b shadow-md" class="max-h-128 rounded-b border-t shadow-md sm:px-2"
[autoSelectActiveOption]="true" [autoSelectActiveOption]="true"
[disableRipple]="true" [disableRipple]="true"
#matAutocomplete="matAutocomplete"> #matAutocomplete="matAutocomplete"
>
<mat-option <mat-option
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent" class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
*ngIf="resultSets && !resultSets.length"> *ngIf="resultSets && !resultSets.length"
>
No results found! No results found!
</mat-option> </mat-option>
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn"> <ng-container
<mat-optgroup class="flex items-center mt-2 px-2"> *ngFor="let resultSet of resultSets; trackBy: trackByFn"
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span> >
<mat-optgroup class="mt-2 flex items-center px-2">
<span
class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span
>
</mat-optgroup> </mat-optgroup>
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn"> <ng-container
*ngFor="let result of resultSet.results; trackBy: trackByFn"
>
<mat-option <mat-option
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover" class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link" [routerLink]="result.link"
[value]="result.value"> [value]="result.value"
>
<!-- Contacts --> <!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'"> <ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
contactResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
<!-- Pages --> <!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'"> <ng-container *ngIf="resultSet.id === 'pages'">
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
pageResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
<!-- Tasks --> <!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'"> <ng-container *ngIf="resultSet.id === 'tasks'">
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
taskResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
</mat-option> </mat-option>
</ng-container> </ng-container>
</ng-container> </ng-container>
</mat-autocomplete> </mat-autocomplete>
<button <button
class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5" class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7"
mat-icon-button mat-icon-button
(click)="close()"> (click)="close()"
>
<mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
</button> </button>
</div> </div>
@ -68,49 +94,74 @@
<!-- Basic search --> <!-- Basic search -->
<ng-container *ngIf="appearance === 'basic'"> <ng-container *ngIf="appearance === 'basic'">
<div class="w-full sm:min-w-80"> <div class="w-full sm:min-w-80">
<mat-form-field <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
class="w-full"
[subscriptSizing]="'dynamic'">
<mat-icon <mat-icon
matPrefix matPrefix
[svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon> [svgIcon]="'heroicons_outline:magnifying-glass'"
></mat-icon>
<input <input
matInput matInput
[formControl]="searchControl" [formControl]="searchControl"
[matAutocomplete]="matAutocomplete" [matAutocomplete]="matAutocomplete"
[placeholder]="'Search...'" [placeholder]="'Search...'"
(keydown)="onKeydown($event)"> (keydown)="onKeydown($event)"
/>
</mat-form-field> </mat-form-field>
<mat-autocomplete <mat-autocomplete
class="max-h-128 mt-1 rounded" class="mt-1 max-h-128 rounded"
[autoSelectActiveOption]="true" [autoSelectActiveOption]="true"
[disableRipple]="true" [disableRipple]="true"
#matAutocomplete="matAutocomplete"> #matAutocomplete="matAutocomplete"
>
<mat-option <mat-option
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent" class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
*ngIf="resultSets && !resultSets.length"> *ngIf="resultSets && !resultSets.length"
>
No results found! No results found!
</mat-option> </mat-option>
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn"> <ng-container
<mat-optgroup class="flex items-center mt-2 px-2"> *ngFor="let resultSet of resultSets; trackBy: trackByFn"
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span> >
<mat-optgroup class="mt-2 flex items-center px-2">
<span
class="text-secondary text-sm font-semibold tracking-wider"
>{{ resultSet.label.toUpperCase() }}</span
>
</mat-optgroup> </mat-optgroup>
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn"> <ng-container
*ngFor="let result of resultSet.results; trackBy: trackByFn"
>
<mat-option <mat-option
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover" class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
[routerLink]="result.link" [routerLink]="result.link"
[value]="result.value"> [value]="result.value"
>
<!-- Contacts --> <!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'"> <ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
contactResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
<!-- Pages --> <!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'"> <ng-container *ngIf="resultSet.id === 'pages'">
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
pageResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
<!-- Tasks --> <!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'"> <ng-container *ngIf="resultSet.id === 'tasks'">
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container> <ng-container
*ngTemplateOutlet="
taskResult;
context: { $implicit: result }
"
></ng-container>
</ng-container> </ng-container>
</mat-option> </mat-option>
</ng-container> </ng-container>
@ -120,18 +171,17 @@
</ng-container> </ng-container>
<!-- Contact result template --> <!-- Contact result template -->
<ng-template <ng-template #contactResult let-result>
#contactResult
let-result>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800"> <div
<img class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800"
*ngIf="result.avatar" >
[src]="result.avatar"> <img *ngIf="result.avatar" [src]="result.avatar" />
<mat-icon <mat-icon
class="m-0 icon-size-5 text-primary dark:text-primary-400" class="m-0 text-primary icon-size-5 dark:text-primary-400"
*ngIf="!result.avatar" *ngIf="!result.avatar"
[svgIcon]="'heroicons_outline:user-circle'"></mat-icon> [svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
</div> </div>
<div class="ml-3 truncate"> <div class="ml-3 truncate">
<span [innerHTML]="result.name"></span> <span [innerHTML]="result.name"></span>
@ -140,37 +190,34 @@
</ng-template> </ng-template>
<!-- Page result template --> <!-- Page result template -->
<ng-template <ng-template #pageResult let-result>
#pageResult
let-result>
<div class="flex flex-col"> <div class="flex flex-col">
<div <div class="truncate leading-normal" [innerHTML]="result.title"></div>
class="truncate leading-normal" <div class="text-secondary truncate text-sm leading-normal">
[innerHTML]="result.title"></div> {{ result.link }}
<div class="truncate leading-normal text-sm text-secondary">
{{result.link}}
</div> </div>
</div> </div>
</ng-template> </ng-template>
<!-- Task result template --> <!-- Task result template -->
<ng-template <ng-template #taskResult let-result>
#taskResult
let-result>
<div class="flex items-center"> <div class="flex items-center">
<ng-container *ngIf="result.completed"> <ng-container *ngIf="result.completed">
<mat-icon <mat-icon
class="mr-0 text-primary dark:text-primary-400" class="mr-0 text-primary dark:text-primary-400"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon> [svgIcon]="'heroicons_outline:check-circle'"
></mat-icon>
</ng-container> </ng-container>
<ng-container *ngIf="!result.completed"> <ng-container *ngIf="!result.completed">
<mat-icon <mat-icon
class="mr-0 text-hint" class="text-hint mr-0"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon> [svgIcon]="'heroicons_outline:check-circle'"
></mat-icon>
</ng-container> </ng-container>
<div <div
class="ml-3 truncate leading-normal" class="ml-3 truncate leading-normal"
[ngClass]="{'line-through text-hint': result.completed}" [ngClass]="{ 'text-hint line-through': result.completed }"
[innerHTML]="result.title"></div> [innerHTML]="result.title"
></div>
</div> </div>
</ng-template> </ng-template>

145
src/app/layout/common/search/search.component.ts
View File

@ -1,9 +1,32 @@
import { Overlay } from '@angular/cdk/overlay'; import { Overlay } from '@angular/cdk/overlay';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, EventEmitter, HostBinding, inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; import {
import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; Component,
import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete'; ElementRef,
EventEmitter,
HostBinding,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
Renderer2,
SimpleChanges,
ViewChild,
ViewEncapsulation,
inject,
} from '@angular/core';
import {
FormsModule,
ReactiveFormsModule,
UntypedFormControl,
} from '@angular/forms';
import {
MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
MatAutocomplete,
MatAutocompleteModule,
} from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core'; import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@ -11,29 +34,41 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { RouterLink } from '@angular/router'; import { RouterLink } from '@angular/router';
import { fuseAnimations } from '@fuse/animations/public-api'; import { fuseAnimations } from '@fuse/animations/public-api';
import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs'; import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'search', selector: 'search',
templateUrl : './search.component.html', templateUrl: './search.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
exportAs : 'fuseSearch', exportAs: 'fuseSearch',
animations : fuseAnimations, animations: fuseAnimations,
standalone : true, standalone: true,
imports : [NgIf, MatButtonModule, MatIconModule, FormsModule, MatAutocompleteModule, ReactiveFormsModule, MatOptionModule, NgFor, RouterLink, NgTemplateOutlet, MatFormFieldModule, MatInputModule, NgClass], imports: [
providers : [ NgIf,
MatButtonModule,
MatIconModule,
FormsModule,
MatAutocompleteModule,
ReactiveFormsModule,
MatOptionModule,
NgFor,
RouterLink,
NgTemplateOutlet,
MatFormFieldModule,
MatInputModule,
NgClass,
],
providers: [
{ {
provide : MAT_AUTOCOMPLETE_SCROLL_STRATEGY, provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
useFactory: () => useFactory: () => {
{
const overlay = inject(Overlay); const overlay = inject(Overlay);
return () => overlay.scrollStrategies.block(); return () => overlay.scrollStrategies.block();
}, },
}, },
], ],
}) })
export class SearchComponent implements OnChanges, OnInit, OnDestroy export class SearchComponent implements OnChanges, OnInit, OnDestroy {
{
@Input() appearance: 'basic' | 'bar' = 'basic'; @Input() appearance: 'basic' | 'bar' = 'basic';
@Input() debounce: number = 300; @Input() debounce: number = 300;
@Input() minLength: number = 2; @Input() minLength: number = 2;
@ -51,10 +86,8 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
constructor( constructor(
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _httpClient: HttpClient, private _httpClient: HttpClient,
private _renderer2: Renderer2, private _renderer2: Renderer2
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -63,12 +96,11 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
/** /**
* Host binding for component classes * Host binding for component classes
*/ */
@HostBinding('class') get classList(): any @HostBinding('class') get classList(): any {
{
return { return {
'search-appearance-bar' : this.appearance === 'bar', 'search-appearance-bar': this.appearance === 'bar',
'search-appearance-basic': this.appearance === 'basic', 'search-appearance-basic': this.appearance === 'basic',
'search-opened' : this.opened, 'search-opened': this.opened,
}; };
} }
@ -78,15 +110,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* @param value * @param value
*/ */
@ViewChild('barSearchInput') @ViewChild('barSearchInput')
set barSearchInput(value: ElementRef) set barSearchInput(value: ElementRef) {
{
// If the value exists, it means that the search input // If the value exists, it means that the search input
// is now in the DOM, and we can focus on the input.. // is now in the DOM, and we can focus on the input..
if ( value ) if (value) {
{
// Give Angular time to complete the change detection cycle // Give Angular time to complete the change detection cycle
setTimeout(() => setTimeout(() => {
{
// Focus to the input element // Focus to the input element
value.nativeElement.focus(); value.nativeElement.focus();
}); });
@ -99,8 +128,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* @param value * @param value
*/ */
@ViewChild('matAutocomplete') @ViewChild('matAutocomplete')
set matAutocomplete(value: MatAutocomplete) set matAutocomplete(value: MatAutocomplete) {
{
this._matAutocomplete = value; this._matAutocomplete = value;
} }
@ -113,11 +141,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* *
* @param changes * @param changes
*/ */
ngOnChanges(changes: SimpleChanges): void ngOnChanges(changes: SimpleChanges): void {
{
// Appearance // Appearance
if ( 'appearance' in changes ) if ('appearance' in changes) {
{
// To prevent any issues, close the // To prevent any issues, close the
// search after changing the appearance // search after changing the appearance
this.close(); this.close();
@ -127,20 +153,17 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to the search field value changes // Subscribe to the search field value changes
this.searchControl.valueChanges this.searchControl.valueChanges
.pipe( .pipe(
debounceTime(this.debounce), debounceTime(this.debounce),
takeUntil(this._unsubscribeAll), takeUntil(this._unsubscribeAll),
map((value) => map((value) => {
{
// Set the resultSets to null if there is no value or // Set the resultSets to null if there is no value or
// the length of the value is smaller than the minLength // the length of the value is smaller than the minLength
// so the autocomplete panel can be closed // so the autocomplete panel can be closed
if ( !value || value.length < this.minLength ) if (!value || value.length < this.minLength) {
{
this.resultSets = null; this.resultSets = null;
} }
@ -149,13 +172,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
}), }),
// Filter out undefined/null/false statements and also // Filter out undefined/null/false statements and also
// filter out the values that are smaller than minLength // filter out the values that are smaller than minLength
filter(value => value && value.length >= this.minLength), filter((value) => value && value.length >= this.minLength)
) )
.subscribe((value) => .subscribe((value) => {
{ this._httpClient
this._httpClient.post('api/common/search', {query: value}) .post('api/common/search', { query: value })
.subscribe((resultSets: any) => .subscribe((resultSets: any) => {
{
// Store the result sets // Store the result sets
this.resultSets = resultSets; this.resultSets = resultSets;
@ -168,8 +190,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -184,14 +205,11 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* *
* @param event * @param event
*/ */
onKeydown(event: KeyboardEvent): void onKeydown(event: KeyboardEvent): void {
{
// Escape // Escape
if ( event.code === 'Escape' ) if (event.code === 'Escape') {
{
// If the appearance is 'bar' and the mat-autocomplete is not open, close the search // If the appearance is 'bar' and the mat-autocomplete is not open, close the search
if ( this.appearance === 'bar' && !this._matAutocomplete.isOpen ) if (this.appearance === 'bar' && !this._matAutocomplete.isOpen) {
{
this.close(); this.close();
} }
} }
@ -201,11 +219,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* Open the search * Open the search
* Used in 'bar' * Used in 'bar'
*/ */
open(): void open(): void {
{
// Return if it's already opened // Return if it's already opened
if ( this.opened ) if (this.opened) {
{
return; return;
} }
@ -217,11 +233,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* Close the search * Close the search
* * Used in 'bar' * * Used in 'bar'
*/ */
close(): void close(): void {
{
// Return if it's already closed // Return if it's already closed
if ( !this.opened ) if (!this.opened) {
{
return; return;
} }
@ -238,8 +252,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
} }

751
src/app/layout/common/settings/settings.component.html
View File

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

78
src/app/layout/common/settings/settings.component.ts
View File

@ -5,14 +5,20 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FuseDrawerComponent } from '@fuse/components/drawer'; import { FuseDrawerComponent } from '@fuse/components/drawer';
import { FuseConfig, FuseConfigService, Scheme, Theme, Themes } from '@fuse/services/config'; import {
FuseConfig,
FuseConfigService,
Scheme,
Theme,
Themes,
} from '@fuse/services/config';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'settings', selector: 'settings',
templateUrl : './settings.component.html', templateUrl: './settings.component.html',
styles : [ styles: [
` `
settings { settings {
position: static; position: static;
@ -22,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
} }
@media (screen and min-width: 1280px) { @media (screen and min-width: 1280px) {
empty-layout + settings .settings-cog { empty-layout + settings .settings-cog {
right: 0 !important; right: 0 !important;
} }
@ -30,11 +35,17 @@ import { Subject, takeUntil } from 'rxjs';
`, `,
], ],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [MatIconModule, FuseDrawerComponent, MatButtonModule, NgFor, NgClass, MatTooltipModule], imports: [
MatIconModule,
FuseDrawerComponent,
MatButtonModule,
NgFor,
NgClass,
MatTooltipModule,
],
}) })
export class SettingsComponent implements OnInit, OnDestroy export class SettingsComponent implements OnInit, OnDestroy {
{
config: FuseConfig; config: FuseConfig;
layout: string; layout: string;
scheme: 'dark' | 'light'; scheme: 'dark' | 'light';
@ -47,10 +58,8 @@ export class SettingsComponent implements OnInit, OnDestroy
*/ */
constructor( constructor(
private _router: Router, private _router: Router,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -59,13 +68,11 @@ export class SettingsComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to config changes // Subscribe to config changes
this._fuseConfigService.config$ this._fuseConfigService.config$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((config: FuseConfig) => .subscribe((config: FuseConfig) => {
{
// Store the config // Store the config
this.config = config; this.config = config;
}); });
@ -74,8 +81,7 @@ export class SettingsComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -90,19 +96,19 @@ export class SettingsComponent implements OnInit, OnDestroy
* *
* @param layout * @param layout
*/ */
setLayout(layout: string): void setLayout(layout: string): void {
{
// Clear the 'layout' query param to allow layout changes // Clear the 'layout' query param to allow layout changes
this._router.navigate([], { this._router
queryParams : { .navigate([], {
layout: null, queryParams: {
}, layout: null,
queryParamsHandling: 'merge', },
}).then(() => queryParamsHandling: 'merge',
{ })
// Set the config .then(() => {
this._fuseConfigService.config = {layout}; // Set the config
}); this._fuseConfigService.config = { layout };
});
} }
/** /**
@ -110,9 +116,8 @@ export class SettingsComponent implements OnInit, OnDestroy
* *
* @param scheme * @param scheme
*/ */
setScheme(scheme: Scheme): void setScheme(scheme: Scheme): void {
{ this._fuseConfigService.config = { scheme };
this._fuseConfigService.config = {scheme};
} }
/** /**
@ -120,8 +125,7 @@ export class SettingsComponent implements OnInit, OnDestroy
* *
* @param theme * @param theme
*/ */
setTheme(theme: Theme): void setTheme(theme: Theme): void {
{ this._fuseConfigService.config = { theme };
this._fuseConfigService.config = {theme};
} }
} }

209
src/app/layout/common/shortcuts/shortcuts.component.html
View File

@ -1,56 +1,63 @@
<!-- Shortcuts toggle --> <!-- Shortcuts toggle -->
<button <button mat-icon-button (click)="openPanel()" #shortcutsOrigin>
mat-icon-button
(click)="openPanel()"
#shortcutsOrigin>
<mat-icon [svgIcon]="'heroicons_outline:squares-plus'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:squares-plus'"></mat-icon>
</button> </button>
<!-- Shortcuts panel --> <!-- Shortcuts panel -->
<ng-template #shortcutsPanel> <ng-template #shortcutsPanel>
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> <div
class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
>
<!-- Header --> <!-- Header -->
<div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div
<div class="sm:hidden -ml-1 mr-3"> class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
<button >
mat-icon-button <div class="-ml-1 mr-3 sm:hidden">
(click)="closePanel()"> <button mat-icon-button (click)="closePanel()">
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:x-mark'"></mat-icon> [svgIcon]="'heroicons_solid:x-mark'"
></mat-icon>
</button> </button>
</div> </div>
<div class="flex items-center text-lg font-medium leading-10"> <div class="flex items-center text-lg font-medium leading-10">
<span class="">Shortcuts</span> <span class="">Shortcuts</span>
<ng-container *ngIf="mode !== 'view'"> <ng-container *ngIf="mode !== 'view'">
<span class="ml-1"> <span class="ml-1">
<ng-container *ngIf="mode === 'add'">- Add new</ng-container> <ng-container *ngIf="mode === 'add'"
<ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container> >- Add new</ng-container
>
<ng-container
*ngIf="mode === 'modify' || mode === 'edit'"
>- Editing</ng-container
>
</span> </span>
</ng-container> </ng-container>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<!-- View mode --> <!-- View mode -->
<ng-container *ngIf="mode === 'view'"> <ng-container *ngIf="mode === 'view'">
<!-- Enter 'modify' mode --> <!-- Enter 'modify' mode -->
<button <button
mat-icon-button mat-icon-button
(click)="changeMode('modify')" (click)="changeMode('modify')"
[matTooltip]="'Enter edit mode'"> [matTooltip]="'Enter edit mode'"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:pencil-square'"></mat-icon> [svgIcon]="'heroicons_solid:pencil-square'"
></mat-icon>
</button> </button>
<!-- Enter 'add' mode --> <!-- Enter 'add' mode -->
<button <button
mat-icon-button mat-icon-button
(click)="newShortcut()" (click)="newShortcut()"
[matTooltip]="'Add shortcut'"> [matTooltip]="'Add shortcut'"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:plus-circle'"></mat-icon> [svgIcon]="'heroicons_solid:plus-circle'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
@ -60,10 +67,12 @@
<button <button
mat-icon-button mat-icon-button
(click)="changeMode('view')" (click)="changeMode('view')"
[matTooltip]="'Exit edit mode'"> [matTooltip]="'Exit edit mode'"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:check-circle'"></mat-icon> [svgIcon]="'heroicons_solid:check-circle'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
@ -73,10 +82,12 @@
<button <button
mat-icon-button mat-icon-button
(click)="changeMode('view')" (click)="changeMode('view')"
[matTooltip]="'Cancel'"> [matTooltip]="'Cancel'"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> [svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
@ -86,60 +97,87 @@
<button <button
mat-icon-button mat-icon-button
(click)="changeMode('modify')" (click)="changeMode('modify')"
[matTooltip]="'Cancel'"> [matTooltip]="'Cancel'"
>
<mat-icon <mat-icon
class="icon-size-5 text-current" class="text-current icon-size-5"
[svgIcon]="'heroicons_solid:x-circle'"></mat-icon> [svgIcon]="'heroicons_solid:x-circle'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="relative flex flex-col flex-auto sm:max-h-120 -mb-px overflow-y-auto bg-card"> <div
class="bg-card relative -mb-px flex flex-auto flex-col overflow-y-auto sm:max-h-120"
>
<!-- View mode --> <!-- View mode -->
<ng-container *ngIf="mode === 'view' || mode === 'modify'"> <ng-container *ngIf="mode === 'view' || mode === 'modify'">
<!-- Shortcuts --> <!-- Shortcuts -->
<div class="grid grid-cols-2 grid-flow-row"> <div class="grid grid-flow-row grid-cols-2">
<!-- Shortcut --> <!-- Shortcut -->
<ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn"> <ng-container
<div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"> *ngFor="let shortcut of shortcuts; trackBy: trackByFn"
>
<div
class="group bg-card relative flex flex-col overflow-hidden border-b border-r even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
>
<ng-container *ngIf="mode === 'modify'"> <ng-container *ngIf="mode === 'modify'">
<div <div
class="absolute inset-0 z-99 cursor-pointer" class="absolute inset-0 z-99 cursor-pointer"
(click)="editShortcut(shortcut)"> (click)="editShortcut(shortcut)"
</div> ></div>
</ng-container> </ng-container>
<!-- Normal links --> <!-- Normal links -->
<a <a
class="flex flex-col items-center justify-center w-full h-full py-6 no-underline" class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
*ngIf="!shortcut.useRouter" *ngIf="!shortcut.useRouter"
[ngClass]="{'pointer-events-none': mode === 'modify'}" [ngClass]="{
[href]="shortcut.link"> 'pointer-events-none': mode === 'modify'
<ng-container *ngTemplateOutlet="linkContent"></ng-container> }"
[href]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a> </a>
<!-- Router links --> <!-- Router links -->
<a <a
class="flex flex-col items-center justify-center w-full h-full py-6 no-underline" class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
*ngIf="shortcut.useRouter" *ngIf="shortcut.useRouter"
[ngClass]="{'pointer-events-none': mode === 'modify'}" [ngClass]="{
[routerLink]="shortcut.link"> 'pointer-events-none': mode === 'modify'
<ng-container *ngTemplateOutlet="linkContent"></ng-container> }"
[routerLink]="shortcut.link"
>
<ng-container
*ngTemplateOutlet="linkContent"
></ng-container>
</a> </a>
<!-- Link content template --> <!-- Link content template -->
<ng-template #linkContent> <ng-template #linkContent>
<div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700"> <div
class="relative mb-3 flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
>
<mat-icon <mat-icon
class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5" class="absolute z-20 opacity-0 icon-size-5 group-hover:opacity-100"
*ngIf="mode === 'modify'" *ngIf="mode === 'modify'"
[svgIcon]="'heroicons_solid:pencil'"></mat-icon> [svgIcon]="'heroicons_solid:pencil'"
></mat-icon>
<mat-icon <mat-icon
class="z-10" class="z-10"
[ngClass]="{'group-hover:opacity-0': mode === 'modify'}" [ngClass]="{
[svgIcon]="shortcut.icon"></mat-icon> 'group-hover:opacity-0':
mode === 'modify'
}"
[svgIcon]="shortcut.icon"
></mat-icon>
</div>
<div class="text-center font-medium">
{{ shortcut.label }}
</div>
<div class="text-secondary text-center text-md">
{{ shortcut.description }}
</div> </div>
<div class="font-medium text-center">{{shortcut.label}}</div>
<div class="text-md text-center text-secondary">{{shortcut.description}}</div>
</ng-template> </ng-template>
</div> </div>
</ng-container> </ng-container>
@ -147,63 +185,63 @@
<!-- No shortcuts --> <!-- No shortcuts -->
<ng-container *ngIf="!shortcuts || !shortcuts.length"> <ng-container *ngIf="!shortcuts || !shortcuts.length">
<div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8"> <div
<div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600"> class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
>
<div
class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
>
<mat-icon <mat-icon
class="text-primary-700 dark:text-primary-50" class="text-primary-700 dark:text-primary-50"
[svgIcon]="'heroicons_outline:bookmark'"></mat-icon> [svgIcon]="'heroicons_outline:bookmark'"
></mat-icon>
</div>
<div class="mt-5 text-2xl font-semibold tracking-tight">
No shortcuts
</div>
<div
class="text-secondary mt-1 w-full max-w-60 text-center text-md"
>
When you have shortcuts, they will appear here.
</div> </div>
<div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>
<div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have shortcuts, they will appear here.</div>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
<!-- Add/Edit mode --> <!-- Add/Edit mode -->
<ng-container *ngIf="mode === 'add' || mode === 'edit'"> <ng-container *ngIf="mode === 'add' || mode === 'edit'">
<form <form class="p-6" [formGroup]="shortcutForm">
class="p-6"
[formGroup]="shortcutForm">
<mat-form-field class="w-full"> <mat-form-field class="w-full">
<mat-label>Label</mat-label> <mat-label>Label</mat-label>
<input <input matInput [formControlName]="'label'" required />
matInput
[formControlName]="'label'"
required>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-full"> <mat-form-field class="w-full">
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<input <input matInput [formControlName]="'description'" />
matInput
[formControlName]="'description'">
</mat-form-field> </mat-form-field>
<mat-form-field class="w-full"> <mat-form-field class="w-full">
<mat-label>Icon</mat-label> <mat-label>Icon</mat-label>
<input <input matInput [formControlName]="'icon'" required />
matInput
[formControlName]="'icon'"
required>
</mat-form-field> </mat-form-field>
<mat-form-field class="w-full"> <mat-form-field class="w-full">
<mat-label>Link</mat-label> <mat-label>Link</mat-label>
<input <input matInput [formControlName]="'link'" required />
matInput
[formControlName]="'link'"
required>
</mat-form-field> </mat-form-field>
<mat-slide-toggle <mat-slide-toggle
[color]="'primary'" [color]="'primary'"
[formControlName]="'useRouter'"> [formControlName]="'useRouter'"
>
Use router for the link Use router for the link
</mat-slide-toggle> </mat-slide-toggle>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end mt-4"> <div class="mt-4 flex items-center justify-end">
<button <button
class="mr-2" class="mr-2"
*ngIf="mode === 'edit'" *ngIf="mode === 'edit'"
mat-flat-button mat-flat-button
type="button" type="button"
(click)="delete()"> (click)="delete()"
>
Delete Delete
</button> </button>
<button <button
@ -211,9 +249,14 @@
[color]="'primary'" [color]="'primary'"
[disabled]="!shortcutForm.valid" [disabled]="!shortcutForm.valid"
type="button" type="button"
(click)="save()"> (click)="save()"
<ng-container *ngIf="mode === 'add'">Add</ng-container> >
<ng-container *ngIf="mode === 'edit'">Update</ng-container> <ng-container *ngIf="mode === 'add'"
>Add</ng-container
>
<ng-container *ngIf="mode === 'edit'"
>Update</ng-container
>
</button> </button>
</div> </div>
</form> </form>

152
src/app/layout/common/shortcuts/shortcuts.component.ts
View File

@ -1,8 +1,24 @@
import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal'; import { TemplatePortal } from '@angular/cdk/portal';
import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'; import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import {
import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
TemplateRef,
ViewChild,
ViewContainerRef,
ViewEncapsulation,
} from '@angular/core';
import {
FormsModule,
ReactiveFormsModule,
UntypedFormBuilder,
UntypedFormGroup,
Validators,
} from '@angular/forms';
import { MatButton, MatButtonModule } from '@angular/material/button'; import { MatButton, MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -15,16 +31,29 @@ import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'shortcuts', selector: 'shortcuts',
templateUrl : './shortcuts.component.html', templateUrl: './shortcuts.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'shortcuts', exportAs: 'shortcuts',
standalone : true, standalone: true,
imports : [MatButtonModule, MatIconModule, NgIf, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule], imports: [
MatButtonModule,
MatIconModule,
NgIf,
MatTooltipModule,
NgFor,
NgClass,
NgTemplateOutlet,
RouterLink,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatSlideToggleModule,
],
}) })
export class ShortcutsComponent implements OnInit, OnDestroy export class ShortcutsComponent implements OnInit, OnDestroy {
{
@ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton; @ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
@ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>; @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
@ -42,10 +71,8 @@ export class ShortcutsComponent implements OnInit, OnDestroy
private _formBuilder: UntypedFormBuilder, private _formBuilder: UntypedFormBuilder,
private _shortcutsService: ShortcutsService, private _shortcutsService: ShortcutsService,
private _overlay: Overlay, private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef, private _viewContainerRef: ViewContainerRef
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -54,23 +81,21 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Initialize the form // Initialize the form
this.shortcutForm = this._formBuilder.group({ this.shortcutForm = this._formBuilder.group({
id : [null], id: [null],
label : ['', Validators.required], label: ['', Validators.required],
description: [''], description: [''],
icon : ['', Validators.required], icon: ['', Validators.required],
link : ['', Validators.required], link: ['', Validators.required],
useRouter : ['', Validators.required], useRouter: ['', Validators.required],
}); });
// Get the shortcuts // Get the shortcuts
this._shortcutsService.shortcuts$ this._shortcutsService.shortcuts$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((shortcuts: Shortcut[]) => .subscribe((shortcuts: Shortcut[]) => {
{
// Load the shortcuts // Load the shortcuts
this.shortcuts = shortcuts; this.shortcuts = shortcuts;
@ -82,15 +107,13 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
// Dispose the overlay // Dispose the overlay
if ( this._overlayRef ) if (this._overlayRef) {
{
this._overlayRef.dispose(); this._overlayRef.dispose();
} }
} }
@ -102,11 +125,9 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Open the shortcuts panel * Open the shortcuts panel
*/ */
openPanel(): void openPanel(): void {
{
// Return if the shortcuts panel or its origin is not defined // Return if the shortcuts panel or its origin is not defined
if ( !this._shortcutsPanel || !this._shortcutsOrigin ) if (!this._shortcutsPanel || !this._shortcutsOrigin) {
{
return; return;
} }
@ -114,28 +135,27 @@ export class ShortcutsComponent implements OnInit, OnDestroy
this.mode = 'view'; this.mode = 'view';
// Create the overlay if it doesn't exist // Create the overlay if it doesn't exist
if ( !this._overlayRef ) if (!this._overlayRef) {
{
this._createOverlay(); this._createOverlay();
} }
// Attach the portal to the overlay // Attach the portal to the overlay
this._overlayRef.attach(new TemplatePortal(this._shortcutsPanel, this._viewContainerRef)); this._overlayRef.attach(
new TemplatePortal(this._shortcutsPanel, this._viewContainerRef)
);
} }
/** /**
* Close the shortcuts panel * Close the shortcuts panel
*/ */
closePanel(): void closePanel(): void {
{
this._overlayRef.detach(); this._overlayRef.detach();
} }
/** /**
* Change the mode * Change the mode
*/ */
changeMode(mode: 'view' | 'modify' | 'add' | 'edit'): void changeMode(mode: 'view' | 'modify' | 'add' | 'edit'): void {
{
// Change the mode // Change the mode
this.mode = mode; this.mode = mode;
} }
@ -143,8 +163,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Prepare for a new shortcut * Prepare for a new shortcut
*/ */
newShortcut(): void newShortcut(): void {
{
// Reset the form // Reset the form
this.shortcutForm.reset(); this.shortcutForm.reset();
@ -155,8 +174,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Edit a shortcut * Edit a shortcut
*/ */
editShortcut(shortcut: Shortcut): void editShortcut(shortcut: Shortcut): void {
{
// Reset the form with the shortcut // Reset the form with the shortcut
this.shortcutForm.reset(shortcut); this.shortcutForm.reset(shortcut);
@ -167,19 +185,16 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Save shortcut * Save shortcut
*/ */
save(): void save(): void {
{
// Get the data from the form // Get the data from the form
const shortcut = this.shortcutForm.value; const shortcut = this.shortcutForm.value;
// If there is an id, update it... // If there is an id, update it...
if ( shortcut.id ) if (shortcut.id) {
{
this._shortcutsService.update(shortcut.id, shortcut).subscribe(); this._shortcutsService.update(shortcut.id, shortcut).subscribe();
} }
// Otherwise, create a new shortcut... // Otherwise, create a new shortcut...
else else {
{
this._shortcutsService.create(shortcut).subscribe(); this._shortcutsService.create(shortcut).subscribe();
} }
@ -190,8 +205,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Delete shortcut * Delete shortcut
*/ */
delete(): void delete(): void {
{
// Get the data from the form // Get the data from the form
const shortcut = this.shortcutForm.value; const shortcut = this.shortcutForm.value;
@ -208,8 +222,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
* @param index * @param index
* @param item * @param item
*/ */
trackByFn(index: number, item: any): any trackByFn(index: number, item: any): any {
{
return item.id || index; return item.id || index;
} }
@ -220,39 +233,41 @@ export class ShortcutsComponent implements OnInit, OnDestroy
/** /**
* Create the overlay * Create the overlay
*/ */
private _createOverlay(): void private _createOverlay(): void {
{
// Create the overlay // Create the overlay
this._overlayRef = this._overlay.create({ this._overlayRef = this._overlay.create({
hasBackdrop : true, hasBackdrop: true,
backdropClass : 'fuse-backdrop-on-mobile', backdropClass: 'fuse-backdrop-on-mobile',
scrollStrategy : this._overlay.scrollStrategies.block(), scrollStrategy: this._overlay.scrollStrategies.block(),
positionStrategy: this._overlay.position() positionStrategy: this._overlay
.flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement) .position()
.flexibleConnectedTo(
this._shortcutsOrigin._elementRef.nativeElement
)
.withLockedPosition(true) .withLockedPosition(true)
.withPush(true) .withPush(true)
.withPositions([ .withPositions([
{ {
originX : 'start', originX: 'start',
originY : 'bottom', originY: 'bottom',
overlayX: 'start', overlayX: 'start',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'start', originX: 'start',
originY : 'top', originY: 'top',
overlayX: 'start', overlayX: 'start',
overlayY: 'bottom', overlayY: 'bottom',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'bottom', originY: 'bottom',
overlayX: 'end', overlayX: 'end',
overlayY: 'top', overlayY: 'top',
}, },
{ {
originX : 'end', originX: 'end',
originY : 'top', originY: 'top',
overlayX: 'end', overlayX: 'end',
overlayY: 'bottom', overlayY: 'bottom',
}, },
@ -260,8 +275,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
}); });
// Detach the overlay from the portal on backdrop click // Detach the overlay from the portal on backdrop click
this._overlayRef.backdropClick().subscribe(() => this._overlayRef.backdropClick().subscribe(() => {
{
this._overlayRef.detach(); this._overlayRef.detach();
}); });
} }

122
src/app/layout/common/shortcuts/shortcuts.service.ts
View File

@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types'; import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs'; import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ShortcutsService export class ShortcutsService {
{ private _shortcuts: ReplaySubject<Shortcut[]> = new ReplaySubject<
private _shortcuts: ReplaySubject<Shortcut[]> = new ReplaySubject<Shortcut[]>(1); Shortcut[]
>(1);
/** /**
* Constructor * Constructor
*/ */
constructor(private _httpClient: HttpClient) constructor(private _httpClient: HttpClient) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -22,8 +21,7 @@ export class ShortcutsService
/** /**
* Getter for shortcuts * Getter for shortcuts
*/ */
get shortcuts$(): Observable<Shortcut[]> get shortcuts$(): Observable<Shortcut[]> {
{
return this._shortcuts.asObservable(); return this._shortcuts.asObservable();
} }
@ -34,13 +32,11 @@ export class ShortcutsService
/** /**
* Get all messages * Get all messages
*/ */
getAll(): Observable<Shortcut[]> getAll(): Observable<Shortcut[]> {
{
return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe( return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
tap((shortcuts) => tap((shortcuts) => {
{
this._shortcuts.next(shortcuts); this._shortcuts.next(shortcuts);
}), })
); );
} }
@ -49,20 +45,22 @@ export class ShortcutsService
* *
* @param shortcut * @param shortcut
*/ */
create(shortcut: Shortcut): Observable<Shortcut> create(shortcut: Shortcut): Observable<Shortcut> {
{
return this.shortcuts$.pipe( return this.shortcuts$.pipe(
take(1), take(1),
switchMap(shortcuts => this._httpClient.post<Shortcut>('api/common/shortcuts', {shortcut}).pipe( switchMap((shortcuts) =>
map((newShortcut) => this._httpClient
{ .post<Shortcut>('api/common/shortcuts', { shortcut })
// Update the shortcuts with the new shortcut .pipe(
this._shortcuts.next([...shortcuts, newShortcut]); map((newShortcut) => {
// Update the shortcuts with the new shortcut
this._shortcuts.next([...shortcuts, newShortcut]);
// Return the new shortcut from observable // Return the new shortcut from observable
return newShortcut; return newShortcut;
}), })
)), )
)
); );
} }
@ -72,29 +70,33 @@ export class ShortcutsService
* @param id * @param id
* @param shortcut * @param shortcut
*/ */
update(id: string, shortcut: Shortcut): Observable<Shortcut> update(id: string, shortcut: Shortcut): Observable<Shortcut> {
{
return this.shortcuts$.pipe( return this.shortcuts$.pipe(
take(1), take(1),
switchMap(shortcuts => this._httpClient.patch<Shortcut>('api/common/shortcuts', { switchMap((shortcuts) =>
id, this._httpClient
shortcut, .patch<Shortcut>('api/common/shortcuts', {
}).pipe( id,
map((updatedShortcut: Shortcut) => shortcut,
{ })
// Find the index of the updated shortcut .pipe(
const index = shortcuts.findIndex(item => item.id === id); map((updatedShortcut: Shortcut) => {
// Find the index of the updated shortcut
const index = shortcuts.findIndex(
(item) => item.id === id
);
// Update the shortcut // Update the shortcut
shortcuts[index] = updatedShortcut; shortcuts[index] = updatedShortcut;
// Update the shortcuts // Update the shortcuts
this._shortcuts.next(shortcuts); this._shortcuts.next(shortcuts);
// Return the updated shortcut // Return the updated shortcut
return updatedShortcut; return updatedShortcut;
}), })
)), )
)
); );
} }
@ -103,26 +105,30 @@ export class ShortcutsService
* *
* @param id * @param id
*/ */
delete(id: string): Observable<boolean> delete(id: string): Observable<boolean> {
{
return this.shortcuts$.pipe( return this.shortcuts$.pipe(
take(1), take(1),
switchMap(shortcuts => this._httpClient.delete<boolean>('api/common/shortcuts', {params: {id}}).pipe( switchMap((shortcuts) =>
map((isDeleted: boolean) => this._httpClient
{ .delete<boolean>('api/common/shortcuts', { params: { id } })
// Find the index of the deleted shortcut .pipe(
const index = shortcuts.findIndex(item => item.id === id); map((isDeleted: boolean) => {
// Find the index of the deleted shortcut
const index = shortcuts.findIndex(
(item) => item.id === id
);
// Delete the shortcut // Delete the shortcut
shortcuts.splice(index, 1); shortcuts.splice(index, 1);
// Update the shortcuts // Update the shortcuts
this._shortcuts.next(shortcuts); this._shortcuts.next(shortcuts);
// Return the deleted status // Return the deleted status
return isDeleted; return isDeleted;
}), })
)), )
)
); );
} }
} }

3
src/app/layout/common/shortcuts/shortcuts.types.ts
View File

@ -1,5 +1,4 @@
export interface Shortcut export interface Shortcut {
{
id: string; id: string;
label: string; label: string;
description?: string; description?: string;

76
src/app/layout/common/user/user.component.html
View File

@ -1,33 +1,33 @@
<!-- Button --> <!-- Button -->
<button <button mat-icon-button [matMenuTriggerFor]="userActions">
mat-icon-button
[matMenuTriggerFor]="userActions">
<span class="relative"> <span class="relative">
<img <img
class="w-7 h-7 rounded-full" class="h-7 w-7 rounded-full"
*ngIf="showAvatar && user.avatar" *ngIf="showAvatar && user.avatar"
[src]="user.avatar"> [src]="user.avatar"
/>
<mat-icon <mat-icon
*ngIf="!showAvatar || !user.avatar" *ngIf="!showAvatar || !user.avatar"
[svgIcon]="'heroicons_outline:user-circle'"></mat-icon> [svgIcon]="'heroicons_outline:user-circle'"
></mat-icon>
<span <span
class="absolute right-0 bottom-0 w-2 h-2 rounded-full" class="absolute bottom-0 right-0 h-2 w-2 rounded-full"
[ngClass]="{'mr-px mb-px': !showAvatar || !user.avatar, [ngClass]="{
'bg-green-500': user.status === 'online', 'mb-px mr-px': !showAvatar || !user.avatar,
'bg-amber-500': user.status === 'away', 'bg-green-500': user.status === 'online',
'bg-red-500': user.status === 'busy', 'bg-amber-500': user.status === 'away',
'bg-gray-400': user.status === 'not-visible'}" 'bg-red-500': user.status === 'busy',
'bg-gray-400': user.status === 'not-visible'
}"
></span> ></span>
</span> </span>
</button> </button>
<mat-menu <mat-menu [xPosition]="'before'" #userActions="matMenu">
[xPosition]="'before'"
#userActions="matMenu">
<button mat-menu-item> <button mat-menu-item>
<span class="flex flex-col leading-none"> <span class="flex flex-col leading-none">
<span>Signed in as</span> <span>Signed in as</span>
<span class="mt-1.5 text-md font-medium">{{user.email}}</span> <span class="mt-1.5 text-md font-medium">{{ user.email }}</span>
</span> </span>
</button> </button>
<mat-divider class="my-2"></mat-divider> <mat-divider class="my-2"></mat-divider>
@ -39,46 +39,36 @@
<mat-icon [svgIcon]="'heroicons_outline:cog-8-tooth'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:cog-8-tooth'"></mat-icon>
<span>Settings</span> <span>Settings</span>
</button> </button>
<button <button mat-menu-item [matMenuTriggerFor]="userStatus">
mat-menu-item <mat-icon
[matMenuTriggerFor]="userStatus"> [svgIcon]="'heroicons_outline:ellipsis-horizontal-circle'"
<mat-icon [svgIcon]="'heroicons_outline:ellipsis-horizontal-circle'"></mat-icon> ></mat-icon>
<span>Status</span> <span>Status</span>
</button> </button>
<mat-divider class="my-2"></mat-divider> <mat-divider class="my-2"></mat-divider>
<button <button mat-menu-item (click)="signOut()">
mat-menu-item <mat-icon
(click)="signOut()"> [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"
<mat-icon [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"></mat-icon> ></mat-icon>
<span>Sign out</span> <span>Sign out</span>
</button> </button>
</mat-menu> </mat-menu>
<mat-menu <mat-menu class="user-status-menu" #userStatus="matMenu">
class="user-status-menu" <button mat-menu-item (click)="updateUserStatus('online')">
#userStatus="matMenu"> <span class="mr-3 h-4 w-4 rounded-full bg-green-500"></span>
<button
mat-menu-item
(click)="updateUserStatus('online')">
<span class="w-4 h-4 mr-3 rounded-full bg-green-500"></span>
<span>Online</span> <span>Online</span>
</button> </button>
<button <button mat-menu-item (click)="updateUserStatus('away')">
mat-menu-item <span class="mr-3 h-4 w-4 rounded-full bg-amber-500"></span>
(click)="updateUserStatus('away')">
<span class="w-4 h-4 mr-3 rounded-full bg-amber-500"></span>
<span>Away</span> <span>Away</span>
</button> </button>
<button <button mat-menu-item (click)="updateUserStatus('busy')">
mat-menu-item <span class="mr-3 h-4 w-4 rounded-full bg-red-500"></span>
(click)="updateUserStatus('busy')">
<span class="w-4 h-4 mr-3 rounded-full bg-red-500"></span>
<span>Busy</span> <span>Busy</span>
</button> </button>
<button <button mat-menu-item (click)="updateUserStatus('not-visible')">
mat-menu-item <span class="mr-3 h-4 w-4 rounded-full bg-gray-400"></span>
(click)="updateUserStatus('not-visible')">
<span class="w-4 h-4 mr-3 rounded-full bg-gray-400"></span>
<span>Invisible</span> <span>Invisible</span>
</button> </button>
</mat-menu> </mat-menu>

66
src/app/layout/common/user/user.component.ts
View File

@ -1,6 +1,14 @@
import { BooleanInput } from '@angular/cdk/coercion'; import { BooleanInput } from '@angular/cdk/coercion';
import { NgClass, NgIf } from '@angular/common'; import { NgClass, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnDestroy,
OnInit,
ViewEncapsulation,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
@ -11,16 +19,22 @@ import { User } from 'app/core/user/user.types';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'user', selector: 'user',
templateUrl : './user.component.html', templateUrl: './user.component.html',
encapsulation : ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'user', exportAs: 'user',
standalone : true, standalone: true,
imports : [MatButtonModule, MatMenuModule, NgIf, MatIconModule, NgClass, MatDividerModule], imports: [
MatButtonModule,
MatMenuModule,
NgIf,
MatIconModule,
NgClass,
MatDividerModule,
],
}) })
export class UserComponent implements OnInit, OnDestroy export class UserComponent implements OnInit, OnDestroy {
{
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_showAvatar: BooleanInput; static ngAcceptInputType_showAvatar: BooleanInput;
/* eslint-enable @typescript-eslint/naming-convention */ /* eslint-enable @typescript-eslint/naming-convention */
@ -36,10 +50,8 @@ export class UserComponent implements OnInit, OnDestroy
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
private _router: Router, private _router: Router,
private _userService: UserService, private _userService: UserService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -48,13 +60,11 @@ export class UserComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to user changes // Subscribe to user changes
this._userService.user$ this._userService.user$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((user: User) => .subscribe((user: User) => {
{
this.user = user; this.user = user;
// Mark for check // Mark for check
@ -65,8 +75,7 @@ export class UserComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -81,26 +90,25 @@ export class UserComponent implements OnInit, OnDestroy
* *
* @param status * @param status
*/ */
updateUserStatus(status: string): void updateUserStatus(status: string): void {
{
// Return if user is not available // Return if user is not available
if ( !this.user ) if (!this.user) {
{
return; return;
} }
// Update the user // Update the user
this._userService.update({ this._userService
...this.user, .update({
status, ...this.user,
}).subscribe(); status,
})
.subscribe();
} }
/** /**
* Sign out * Sign out
*/ */
signOut(): void signOut(): void {
{
this._router.navigate(['/sign-out']); this._router.navigate(['/sign-out']);
} }
} }

1
src/app/layout/layout.component.scss
View File

@ -15,7 +15,6 @@ layout {
/* Base styles for components that load as a route */ /* Base styles for components that load as a route */
router-outlet { router-outlet {
+ * { + * {
position: relative; position: relative;
display: flex; display: flex;

178
src/app/layout/layout.component.ts
View File

@ -1,11 +1,18 @@
import { DOCUMENT, NgIf } from '@angular/common'; import { DOCUMENT, NgIf } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import {
Component,
Inject,
OnDestroy,
OnInit,
Renderer2,
ViewEncapsulation,
} from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { FuseConfig, FuseConfigService } from '@fuse/services/config'; import { FuseConfig, FuseConfigService } from '@fuse/services/config';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FusePlatformService } from '@fuse/services/platform'; import { FusePlatformService } from '@fuse/services/platform';
import { FUSE_VERSION } from '@fuse/version'; import { FUSE_VERSION } from '@fuse/version';
import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs'; import { Subject, combineLatest, filter, map, takeUntil } from 'rxjs';
import { SettingsComponent } from './common/settings/settings.component'; import { SettingsComponent } from './common/settings/settings.component';
import { EmptyLayoutComponent } from './layouts/empty/empty.component'; import { EmptyLayoutComponent } from './layouts/empty/empty.component';
import { CenteredLayoutComponent } from './layouts/horizontal/centered/centered.component'; import { CenteredLayoutComponent } from './layouts/horizontal/centered/centered.component';
@ -20,15 +27,28 @@ import { FuturisticLayoutComponent } from './layouts/vertical/futuristic/futuris
import { ThinLayoutComponent } from './layouts/vertical/thin/thin.component'; import { ThinLayoutComponent } from './layouts/vertical/thin/thin.component';
@Component({ @Component({
selector : 'layout', selector: 'layout',
templateUrl : './layout.component.html', templateUrl: './layout.component.html',
styleUrls : ['./layout.component.scss'], styleUrls: ['./layout.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [NgIf, EmptyLayoutComponent, CenteredLayoutComponent, EnterpriseLayoutComponent, MaterialLayoutComponent, ModernLayoutComponent, ClassicLayoutComponent, ClassyLayoutComponent, CompactLayoutComponent, DenseLayoutComponent, FuturisticLayoutComponent, ThinLayoutComponent, SettingsComponent], imports: [
NgIf,
EmptyLayoutComponent,
CenteredLayoutComponent,
EnterpriseLayoutComponent,
MaterialLayoutComponent,
ModernLayoutComponent,
ClassicLayoutComponent,
ClassyLayoutComponent,
CompactLayoutComponent,
DenseLayoutComponent,
FuturisticLayoutComponent,
ThinLayoutComponent,
SettingsComponent,
],
}) })
export class LayoutComponent implements OnInit, OnDestroy export class LayoutComponent implements OnInit, OnDestroy {
{
config: FuseConfig; config: FuseConfig;
layout: string; layout: string;
scheme: 'dark' | 'light'; scheme: 'dark' | 'light';
@ -45,10 +65,8 @@ export class LayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fusePlatformService: FusePlatformService, private _fusePlatformService: FusePlatformService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -57,46 +75,50 @@ export class LayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Set the theme and scheme based on the configuration // Set the theme and scheme based on the configuration
combineLatest([ combineLatest([
this._fuseConfigService.config$, this._fuseConfigService.config$,
this._fuseMediaWatcherService.onMediaQueryChange$(['(prefers-color-scheme: dark)', '(prefers-color-scheme: light)']), this._fuseMediaWatcherService.onMediaQueryChange$([
]).pipe( '(prefers-color-scheme: dark)',
takeUntil(this._unsubscribeAll), '(prefers-color-scheme: light)',
map(([config, mql]) => ]),
{ ])
const options = { .pipe(
scheme: config.scheme, takeUntil(this._unsubscribeAll),
theme : config.theme, map(([config, mql]) => {
}; const options = {
scheme: config.scheme,
theme: config.theme,
};
// If the scheme is set to 'auto'... // If the scheme is set to 'auto'...
if ( config.scheme === 'auto' ) if (config.scheme === 'auto') {
{ // Decide the scheme using the media query
// Decide the scheme using the media query options.scheme = mql.breakpoints[
options.scheme = mql.breakpoints['(prefers-color-scheme: dark)'] ? 'dark' : 'light'; '(prefers-color-scheme: dark)'
} ]
? 'dark'
: 'light';
}
return options; return options;
}), })
).subscribe((options) => )
{ .subscribe((options) => {
// Store the options // Store the options
this.scheme = options.scheme; this.scheme = options.scheme;
this.theme = options.theme; this.theme = options.theme;
// Update the scheme and theme // Update the scheme and theme
this._updateScheme(); this._updateScheme();
this._updateTheme(); this._updateTheme();
}); });
// Subscribe to config changes // Subscribe to config changes
this._fuseConfigService.config$ this._fuseConfigService.config$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((config: FuseConfig) => .subscribe((config: FuseConfig) => {
{
// Store the config // Store the config
this.config = config; this.config = config;
@ -105,27 +127,34 @@ export class LayoutComponent implements OnInit, OnDestroy
}); });
// Subscribe to NavigationEnd event // Subscribe to NavigationEnd event
this._router.events.pipe( this._router.events
filter(event => event instanceof NavigationEnd), .pipe(
takeUntil(this._unsubscribeAll), filter((event) => event instanceof NavigationEnd),
).subscribe(() => takeUntil(this._unsubscribeAll)
{ )
// Update the layout .subscribe(() => {
this._updateLayout(); // Update the layout
}); this._updateLayout();
});
// Set the app version // Set the app version
this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION); this._renderer2.setAttribute(
this._document.querySelector('[ng-version]'),
'fuse-version',
FUSE_VERSION
);
// Set the OS name // Set the OS name
this._renderer2.addClass(this._document.body, this._fusePlatformService.osName); this._renderer2.addClass(
this._document.body,
this._fusePlatformService.osName
);
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -138,12 +167,10 @@ export class LayoutComponent implements OnInit, OnDestroy
/** /**
* Update the selected layout * Update the selected layout
*/ */
private _updateLayout(): void private _updateLayout(): void {
{
// Get the current activated route // Get the current activated route
let route = this._activatedRoute; let route = this._activatedRoute;
while ( route.firstChild ) while (route.firstChild) {
{
route = route.firstChild; route = route.firstChild;
} }
@ -153,11 +180,9 @@ export class LayoutComponent implements OnInit, OnDestroy
// 2. Get the query parameter from the current route and // 2. Get the query parameter from the current route and
// set the layout and save the layout to the config // set the layout and save the layout to the config
const layoutFromQueryParam = route.snapshot.queryParamMap.get('layout'); const layoutFromQueryParam = route.snapshot.queryParamMap.get('layout');
if ( layoutFromQueryParam ) if (layoutFromQueryParam) {
{
this.layout = layoutFromQueryParam; this.layout = layoutFromQueryParam;
if ( this.config ) if (this.config) {
{
this.config.layout = layoutFromQueryParam; this.config.layout = layoutFromQueryParam;
} }
} }
@ -179,11 +204,13 @@ export class LayoutComponent implements OnInit, OnDestroy
// Also, this will allow overriding the layout in any time so we // Also, this will allow overriding the layout in any time so we
// can have different layouts for different routes. // can have different layouts for different routes.
const paths = route.pathFromRoot; const paths = route.pathFromRoot;
paths.forEach((path) => paths.forEach((path) => {
{
// Check if there is a 'layout' data // Check if there is a 'layout' data
if ( path.routeConfig && path.routeConfig.data && path.routeConfig.data.layout ) if (
{ path.routeConfig &&
path.routeConfig.data &&
path.routeConfig.data.layout
) {
// Set the layout // Set the layout
this.layout = path.routeConfig.data.layout; this.layout = path.routeConfig.data.layout;
} }
@ -195,8 +222,7 @@ export class LayoutComponent implements OnInit, OnDestroy
* *
* @private * @private
*/ */
private _updateScheme(): void private _updateScheme(): void {
{
// Remove class names for all schemes // Remove class names for all schemes
this._document.body.classList.remove('light', 'dark'); this._document.body.classList.remove('light', 'dark');
@ -209,14 +235,14 @@ export class LayoutComponent implements OnInit, OnDestroy
* *
* @private * @private
*/ */
private _updateTheme(): void private _updateTheme(): void {
{
// Find the class name for the previously selected theme and remove it // Find the class name for the previously selected theme and remove it
this._document.body.classList.forEach((className: string) => this._document.body.classList.forEach((className: string) => {
{ if (className.startsWith('theme-')) {
if ( className.startsWith('theme-') ) this._document.body.classList.remove(
{ className,
this._document.body.classList.remove(className, className.split('-')[1]); className.split('-')[1]
);
} }
}); });

6
src/app/layout/layouts/empty/empty.component.html
View File

@ -2,13 +2,11 @@
<fuse-loading-bar></fuse-loading-bar> <fuse-loading-bar></fuse-loading-bar>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full"> <div class="flex w-full flex-auto flex-col">
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
</div> </div>

18
src/app/layout/layouts/empty/empty.component.ts
View File

@ -5,22 +5,19 @@ import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@Component({ @Component({
selector : 'empty-layout', selector: 'empty-layout',
templateUrl : './empty.component.html', templateUrl: './empty.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, NgIf, RouterOutlet], imports: [FuseLoadingBarComponent, NgIf, RouterOutlet],
}) })
export class EmptyLayoutComponent implements OnDestroy export class EmptyLayoutComponent implements OnDestroy {
{
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
/** /**
* Constructor * Constructor
*/ */
constructor() constructor() {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks // @ Lifecycle hooks
@ -29,8 +26,7 @@ export class EmptyLayoutComponent implements OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();

60
src/app/layout/layouts/horizontal/centered/centered.component.html
View File

@ -1,8 +1,9 @@
<!-- Loading bar --> <!-- Loading bar -->
<fuse-loading-bar></fuse-loading-bar> <fuse-loading-bar></fuse-loading-bar>
<div class="flex flex-auto justify-center w-full sm:p-4 md:p-8 bg-gray-200 dark:bg-card"> <div
class="flex w-full flex-auto justify-center bg-gray-200 dark:bg-card sm:p-4 md:p-8"
>
<!-- Navigation --> <!-- Navigation -->
<ng-container *ngIf="isScreenSmall"> <ng-container *ngIf="isScreenSmall">
<fuse-vertical-navigation <fuse-vertical-navigation
@ -10,62 +11,69 @@
[mode]="'over'" [mode]="'over'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="false"> [opened]="false"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 pt-6 px-8"> <div class="flex h-20 items-center px-8 pt-6">
<img <img class="w-30" src="images/logo/logo-text-on-dark.svg" />
class="w-30"
src="images/logo/logo-text-on-dark.svg">
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> </ng-container>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col items-center flex-auto min-w-0 max-w-360 sm:rounded-xl shadow-2xl dark:shadow-none overflow-hidden"> <div
class="flex min-w-0 max-w-360 flex-auto flex-col items-center overflow-hidden shadow-2xl dark:shadow-none sm:rounded-xl"
>
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 sm:h-20 px-4 md:px-6 z-49 bg-card border-b dark:bg-default print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center border-b px-4 dark:bg-default sm:h-20 md:px-6 print:hidden"
>
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center mx-2 lg:mr-8"> <div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex"> <div class="hidden lg:flex">
<!-- Light version --> <!-- Light version -->
<img <img
class="dark:hidden w-24" class="w-24 dark:hidden"
src="images/logo/logo-text.svg" src="images/logo/logo-text.svg"
alt="Logo image"> alt="Logo image"
/>
<!-- Dark version --> <!-- Dark version -->
<img <img
class="hidden dark:flex w-24" class="hidden w-24 dark:flex"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
<!-- Small version --> <!-- Small version -->
<img <img
class="flex lg:hidden w-8" class="flex w-8 lg:hidden"
src="images/logo/logo.svg" src="images/logo/logo.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
<!-- Horizontal navigation --> <!-- Horizontal navigation -->
<fuse-horizontal-navigation <fuse-horizontal-navigation
class="mr-2" class="mr-2"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal"></fuse-horizontal-navigation> [navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</ng-container> </ng-container>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> <ng-container *ngIf="isScreenSmall">
<button <button
class="mr-2" class="mr-2"
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2"> <div class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -77,17 +85,19 @@
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto w-full bg-default"> <div class="bg-default flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-16 sm:h-20 px-6 sm:px-8 z-49 bg-card border-t dark:bg-default print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-16 w-full flex-0 items-center justify-start border-t px-6 dark:bg-default sm:h-20 sm:px-8 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
</div> </div>

64
src/app/layout/layouts/horizontal/centered/centered.component.ts
View File

@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseHorizontalNavigationComponent,
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -18,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'centered-layout', selector: 'centered-layout',
templateUrl : './centered.component.html', templateUrl: './centered.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, FuseHorizontalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, RouterOutlet], imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
RouterOutlet,
],
}) })
export class CenteredLayoutComponent implements OnInit, OnDestroy export class CenteredLayoutComponent implements OnInit, OnDestroy {
{
navigation: Navigation; navigation: Navigation;
isScreenSmall: boolean; isScreenSmall: boolean;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -38,10 +56,8 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -50,8 +66,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -62,21 +77,18 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -85,8 +97,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -101,13 +112,14 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

72
src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
View File

@ -8,47 +8,60 @@
[mode]="'over'" [mode]="'over'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="false"> [opened]="false"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 pt-6 px-8"> <div class="flex h-20 items-center px-8 pt-6">
<img <img
class="w-24" class="w-24"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> </ng-container>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 dark:bg-card"> <div
class="flex w-full min-w-0 flex-auto flex-col items-center bg-gray-200 dark:bg-card"
>
<!-- Header --> <!-- Header -->
<div class="relative flex flex-col flex-0 justify-center w-full h-16 sm:h-20 md:h-36 overflow-hidden z-49 shadow dark:shadow-none print:hidden"> <div
class="relative z-49 flex h-16 w-full flex-0 flex-col justify-center overflow-hidden shadow dark:shadow-none sm:h-20 md:h-36 print:hidden"
>
<!-- Top bar --> <!-- Top bar -->
<div class="relative dark flex flex-auto justify-center w-full px-4 md:px-8 bg-gray-800 dark:bg-gray-900"> <div
<div class="flex items-center w-full max-w-360 h-16 sm:h-20"> class="dark relative flex w-full flex-auto justify-center bg-gray-800 px-4 dark:bg-gray-900 md:px-8"
>
<div class="flex h-16 w-full max-w-360 items-center sm:h-20">
<!-- Logo --> <!-- Logo -->
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<div class="flex items-center"> <div class="flex items-center">
<img <img
class="w-24" class="w-24"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> <ng-container *ngIf="isScreenSmall">
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:bars-3'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div
class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2"
>
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -58,8 +71,13 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="
'heroicons_outline:chat-bubble-left-right'
"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
@ -67,20 +85,25 @@
</div> </div>
<!-- Bottom bar --> <!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<div class="flex flex-auto justify-center px-4 md:px-8 bg-card dark:bg-gray-700"> <div
<div class="relative flex items-center w-full max-w-360 h-16"> class="bg-card flex flex-auto justify-center px-4 dark:bg-gray-700 md:px-8"
>
<div class="relative flex h-16 w-full max-w-360 items-center">
<fuse-horizontal-navigation <fuse-horizontal-navigation
class="-mx-4" class="-mx-4"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal"></fuse-horizontal-navigation> [navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</div> </div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-auto justify-center w-full sm:p-6 md:p-8"> <div class="flex w-full flex-auto justify-center sm:p-6 md:p-8">
<div class="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-lg sm:rounded-lg sm:overflow-hidden bg-default"> <div
class="bg-default flex w-full flex-auto flex-col sm:max-w-360 sm:overflow-hidden sm:rounded-lg sm:shadow-lg"
>
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
@ -88,12 +111,15 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 justify-center w-full px-6 md:px-8 z-49 border-t bg-card print:hidden"> <div
<div class="flex items-center w-full max-w-360 h-14 sm:h-20"> class="bg-card relative z-49 flex w-full flex-0 justify-center border-t px-6 md:px-8 print:hidden"
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> >
<div class="flex h-14 w-full max-w-360 items-center sm:h-20">
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

65
src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
View File

@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseHorizontalNavigationComponent,
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +23,29 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'enterprise-layout', selector: 'enterprise-layout',
templateUrl : './enterprise.component.html', templateUrl: './enterprise.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, FuseHorizontalNavigationComponent, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
FuseHorizontalNavigationComponent,
RouterOutlet,
QuickChatComponent,
],
}) })
export class EnterpriseLayoutComponent implements OnInit, OnDestroy export class EnterpriseLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,10 +58,8 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -51,8 +68,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -63,21 +79,18 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -86,8 +99,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -102,13 +114,14 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

70
src/app/layout/layouts/horizontal/material/material.component.html
View File

@ -8,53 +8,69 @@
[mode]="'over'" [mode]="'over'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="false"> [opened]="false"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 pt-6 px-8"> <div class="flex h-20 items-center px-8 pt-6">
<img <img
class="w-24" class="w-24"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> </ng-container>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 dark:bg-card"> <div
class="flex w-full min-w-0 flex-auto flex-col items-center bg-gray-200 dark:bg-card"
>
<!-- Header --> <!-- Header -->
<div class="relative flex justify-center w-full overflow-hidden z-49 bg-primary-700 print:hidden"> <div
<div class="max-w-360 w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b sm:shadow-2xl overflow-hidden bg-card"> class="relative z-49 flex w-full justify-center overflow-hidden bg-primary-700 print:hidden"
>
<div
class="bg-card w-full max-w-360 overflow-hidden border-b sm:m-8 sm:mb-0 sm:rounded-t-xl sm:py-3 sm:shadow-2xl md:mx-8 md:mt-12 md:pb-3 md:pt-4"
>
<!-- Top bar --> <!-- Top bar -->
<div class="relative flex flex-auto flex-0 items-center h-16 px-4 md:px-6"> <div
class="relative flex h-16 flex-0 flex-auto items-center px-4 md:px-6"
>
<!-- Logo --> <!-- Logo -->
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<div class="flex items-center mx-2"> <div class="mx-2 flex items-center">
<!-- Light version --> <!-- Light version -->
<img <img
class="w-24 dark:hidden" class="w-24 dark:hidden"
src="images/logo/logo-text.svg" src="images/logo/logo-text.svg"
alt="Logo image"> alt="Logo image"
/>
<!-- Dark version --> <!-- Dark version -->
<img <img
class="hidden dark:flex w-24" class="hidden w-24 dark:flex"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> <ng-container *ngIf="isScreenSmall">
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:bars-3'"
></mat-icon>
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2"> <div
class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2"
>
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -66,18 +82,23 @@
</div> </div>
<!-- Bottom bar --> <!-- Bottom bar -->
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<div class="relative flex flex-auto flex-0 items-center h-16 px-4"> <div
class="relative flex h-16 flex-0 flex-auto items-center px-4"
>
<fuse-horizontal-navigation <fuse-horizontal-navigation
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal"></fuse-horizontal-navigation> [navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-auto justify-center w-full sm:px-8"> <div class="flex w-full flex-auto justify-center sm:px-8">
<div class="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-xl sm:overflow-hidden bg-default"> <div
class="bg-default flex w-full flex-auto flex-col sm:max-w-360 sm:overflow-hidden sm:shadow-xl"
>
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
@ -85,10 +106,13 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex justify-center w-full z-49 print:hidden"> <div class="relative z-49 flex w-full justify-center print:hidden">
<div class="flex items-center max-w-360 w-full h-14 sm:h-20 px-6 md:px-8 sm:shadow-xl border-t bg-card dark:bg-default"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card flex h-14 w-full max-w-360 items-center border-t px-6 dark:bg-default sm:h-20 sm:shadow-xl md:px-8"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
</div> </div>

64
src/app/layout/layouts/horizontal/material/material.component.ts
View File

@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseHorizontalNavigationComponent,
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -18,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'material-layout', selector: 'material-layout',
templateUrl : './material.component.html', templateUrl: './material.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, FuseHorizontalNavigationComponent, RouterOutlet], imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
FuseHorizontalNavigationComponent,
RouterOutlet,
],
}) })
export class MaterialLayoutComponent implements OnInit, OnDestroy export class MaterialLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -38,10 +56,8 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -50,8 +66,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -62,21 +77,18 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -85,8 +97,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -101,13 +112,14 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

57
src/app/layout/layouts/horizontal/modern/modern.component.html
View File

@ -8,56 +8,61 @@
[mode]="'over'" [mode]="'over'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="false"> [opened]="false"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 pt-6 px-8"> <div class="flex h-20 items-center px-8 pt-6">
<img <img
class="w-24" class="w-24"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
</ng-container> </ng-container>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 sm:h-20 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none sm:h-20 md:px-6 print:hidden"
>
<ng-container *ngIf="!isScreenSmall"> <ng-container *ngIf="!isScreenSmall">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center mx-2 lg:mr-8"> <div class="mx-2 flex items-center lg:mr-8">
<div class="hidden lg:flex"> <div class="hidden lg:flex">
<img <img
class="dark:hidden w-24" class="w-24 dark:hidden"
src="images/logo/logo-text.svg"> src="images/logo/logo-text.svg"
/>
<img <img
class="hidden dark:flex w-24" class="hidden w-24 dark:flex"
src="images/logo/logo-text-on-dark.svg"> src="images/logo/logo-text-on-dark.svg"
/>
</div> </div>
<img <img class="flex w-8 lg:hidden" src="images/logo/logo.svg" />
class="flex lg:hidden w-8"
src="images/logo/logo.svg">
</div> </div>
<!-- Horizontal navigation --> <!-- Horizontal navigation -->
<fuse-horizontal-navigation <fuse-horizontal-navigation
class="mr-2" class="mr-2"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.horizontal"></fuse-horizontal-navigation> [navigation]="navigation.horizontal"
></fuse-horizontal-navigation>
</ng-container> </ng-container>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall"> <ng-container *ngIf="isScreenSmall">
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
</ng-container> </ng-container>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -67,25 +72,31 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto w-full"> <div class="flex w-full flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center w-full h-14 sm:h-20 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center border-t px-4 dark:bg-transparent sm:h-20 md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

65
src/app/layout/layouts/horizontal/modern/modern.component.ts
View File

@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseHorizontalNavigationComponent,
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +23,29 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'modern-layout', selector: 'modern-layout',
templateUrl : './modern.component.html', templateUrl: './modern.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, FuseHorizontalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
NgIf,
FuseVerticalNavigationComponent,
FuseHorizontalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
RouterOutlet,
QuickChatComponent,
],
}) })
export class ModernLayoutComponent implements OnInit, OnDestroy export class ModernLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,10 +58,8 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -51,8 +68,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -63,21 +79,18 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -86,8 +99,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -102,13 +114,14 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

46
src/app/layout/layouts/vertical/classic/classic.component.html
View File

@ -7,38 +7,40 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 p-6 pb-0"> <div class="flex h-20 items-center p-6 pb-0">
<!-- Light version --> <!-- Light version -->
<img <img
class="dark:hidden w-30" class="w-30 dark:hidden"
src="images/logo/logo-text.svg" src="images/logo/logo-text.svg"
alt="Logo image"> alt="Logo image"
/>
<!-- Dark version --> <!-- Dark version -->
<img <img
class="hidden dark:flex w-30" class="hidden w-30 dark:flex"
src="images/logo/logo-text-on-dark.svg" src="images/logo/logo-text-on-dark.svg"
alt="Logo image"> alt="Logo image"
/>
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
mat-icon-button
(click)="toggleNavigation('mainNavigation')">
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -48,25 +50,31 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

63
src/app/layout/layouts/vertical/classic/classic.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'classic-layout', selector: 'classic-layout',
templateUrl : './classic.component.html', templateUrl: './classic.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],
}) })
export class ClassicLayoutComponent implements OnInit, OnDestroy export class ClassicLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,10 +56,8 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -51,8 +66,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -63,21 +77,18 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -86,8 +97,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -102,13 +112,14 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

68
src/app/layout/layouts/vertical/classy/classy.component.html
View File

@ -7,68 +7,72 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<div class="flex items-center w-full p-4 pl-6"> <div class="flex w-full items-center p-4 pl-6">
<!-- Logo --> <!-- Logo -->
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<img <img class="w-8" src="images/logo/logo.svg" />
class="w-8"
src="images/logo/logo.svg">
</div> </div>
<!-- Components --> <!-- Components -->
<div class="flex items-center ml-auto"> <div class="ml-auto flex items-center">
<notifications></notifications> <notifications></notifications>
<user [showAvatar]="false"></user> <user [showAvatar]="false"></user>
</div> </div>
</div> </div>
<!-- User --> <!-- User -->
<div class="flex flex-col items-center w-full p-4"> <div class="flex w-full flex-col items-center p-4">
<div class="relative w-24 h-24"> <div class="relative h-24 w-24">
<img <img
class="w-full h-full rounded-full" class="h-full w-full rounded-full"
*ngIf="user.avatar" *ngIf="user.avatar"
[src]="user.avatar" [src]="user.avatar"
alt="User avatar"> alt="User avatar"
/>
<mat-icon <mat-icon
class="icon-size-24" class="icon-size-24"
*ngIf="!user.avatar" *ngIf="!user.avatar"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon> [svgIcon]="'heroicons_solid:user-circle'"
></mat-icon>
</div> </div>
<div class="flex flex-col items-center justify-center w-full mt-6"> <div class="mt-6 flex w-full flex-col items-center justify-center">
<div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium"> <div
{{user.name}} class="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center font-medium leading-normal"
>
{{ user.name }}
</div> </div>
<div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary"> <div
{{user.email}} class="text-secondary mt-0.5 w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-md font-medium leading-normal"
>
{{ user.email }}
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<!-- Navigation footer hook --> <!-- Navigation footer hook -->
<ng-container fuseVerticalNavigationContentFooter> <ng-container fuseVerticalNavigationContentFooter>
<div class="flex flex-0 items-center justify-center h-16 pr-6 pl-2 mt-2 mb-4 opacity-12"> <div
<img class="mb-4 mt-2 flex h-16 flex-0 items-center justify-center pl-2 pr-6 opacity-12"
class="max-w-36" >
src="images/logo/logo-text-on-dark.svg"> <img class="max-w-36" src="images/logo/logo-text-on-dark.svg" />
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
mat-icon-button
(click)="toggleNavigation('mainNavigation')">
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -77,14 +81,17 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
@ -94,7 +101,6 @@
<!--<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <!--<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
</div>--> </div>-->
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

68
src/app/layout/layouts/vertical/classy/classy.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -21,14 +24,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'classy-layout', selector: 'classy-layout',
templateUrl : './classy.component.html', templateUrl: './classy.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, NotificationsComponent, UserComponent, NgIf, MatIconModule, MatButtonModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
FuseVerticalNavigationComponent,
NotificationsComponent,
UserComponent,
NgIf,
MatIconModule,
MatButtonModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
RouterOutlet,
QuickChatComponent,
],
}) })
export class ClassyLayoutComponent implements OnInit, OnDestroy export class ClassyLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
user: User; user: User;
@ -43,10 +60,8 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _userService: UserService, private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -55,8 +70,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -67,29 +81,25 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to the user service // Subscribe to the user service
this._userService.user$ this._userService.user$
.pipe((takeUntil(this._unsubscribeAll))) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((user: User) => .subscribe((user: User) => {
{
this.user = user; this.user = user;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -98,8 +108,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -114,13 +123,14 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

41
src/app/layout/layouts/vertical/compact/compact.component.html
View File

@ -8,32 +8,29 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.compact" [navigation]="navigation.compact"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center justify-center h-20 mt-3 mb-4"> <div class="mb-4 mt-3 flex h-20 items-center justify-center">
<img <img class="w-10" src="images/logo/logo.svg" alt="Logo image" />
class="w-10"
src="images/logo/logo.svg"
alt="Logo image">
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
mat-icon-button
(click)="toggleNavigation('mainNavigation')">
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -43,25 +40,31 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

63
src/app/layout/layouts/vertical/compact/compact.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'compact-layout', selector: 'compact-layout',
templateUrl : './compact.component.html', templateUrl: './compact.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent, FuseVerticalNavigationComponent], imports: [
FuseLoadingBarComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
FuseVerticalNavigationComponent,
],
}) })
export class CompactLayoutComponent implements OnInit, OnDestroy export class CompactLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,10 +56,8 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -51,8 +66,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -63,21 +77,18 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -86,8 +97,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -102,13 +112,14 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

49
src/app/layout/layouts/vertical/dense/dense.component.html
View File

@ -8,41 +8,44 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.default" [navigation]="navigation.default"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center justify-center h-20"> <div class="flex h-20 items-center justify-center">
<img <img class="w-8" src="images/logo/logo.svg" alt="Logo image" />
class="w-8"
src="images/logo/logo.svg"
alt="Logo image">
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
<div class="flex items-center pr-2 space-x-2"> class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<div class="flex items-center space-x-2 pr-2">
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Navigation appearance toggle button --> <!-- Navigation appearance toggle button -->
<button <button
class="hidden md:inline-flex" class="hidden md:inline-flex"
mat-icon-button mat-icon-button
(click)="toggleNavigationAppearance()"> (click)="toggleNavigationAppearance()"
<mat-icon [svgIcon]="'heroicons_outline:arrows-right-left'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:arrows-right-left'"
></mat-icon>
</button> </button>
</div> </div>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -52,25 +55,31 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

73
src/app/layout/layouts/vertical/dense/dense.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'dense-layout', selector: 'dense-layout',
templateUrl : './dense.component.html', templateUrl: './dense.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],
}) })
export class DenseLayoutComponent implements OnInit, OnDestroy export class DenseLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
navigationAppearance: 'default' | 'dense' = 'dense'; navigationAppearance: 'default' | 'dense' = 'dense';
@ -40,10 +57,8 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -52,8 +67,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -64,34 +78,32 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
// Change the navigation appearance // Change the navigation appearance
this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense'; this.navigationAppearance = this.isScreenSmall
? 'default'
: 'dense';
}); });
} }
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -106,13 +118,14 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }
@ -121,8 +134,8 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
/** /**
* Toggle the navigation appearance * Toggle the navigation appearance
*/ */
toggleNavigationAppearance(): void toggleNavigationAppearance(): void {
{ this.navigationAppearance =
this.navigationAppearance = (this.navigationAppearance === 'default' ? 'dense' : 'default'); this.navigationAppearance === 'default' ? 'dense' : 'default';
} }
} }

53
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
View File

@ -7,26 +7,29 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.futuristic" [navigation]="navigation.futuristic"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationHeader> <ng-container fuseVerticalNavigationHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center h-20 p-6 pb-0"> <div class="flex h-20 items-center p-6 pb-0">
<img <img class="w-30" src="images/logo/logo-text-on-dark.svg" />
class="w-30"
src="images/logo/logo-text-on-dark.svg">
</div> </div>
</ng-container> </ng-container>
<!-- Navigation footer hook --> <!-- Navigation footer hook -->
<ng-container fuseVerticalNavigationFooter> <ng-container fuseVerticalNavigationFooter>
<!-- User --> <!-- User -->
<div class="flex items-center w-full px-6 py-8 border-t"> <div class="flex w-full items-center border-t px-6 py-8">
<user></user> <user></user>
<div class="flex flex-col w-full ml-4 overflow-hidden"> <div class="ml-4 flex w-full flex-col overflow-hidden">
<div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80"> <div
{{user.name}} class="w-full overflow-hidden text-ellipsis whitespace-nowrap leading-normal text-current opacity-80"
>
{{ user.name }}
</div> </div>
<div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50"> <div
class="mt-0.5 w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-normal text-current opacity-50"
>
brian.hughes&#64;company.com brian.hughes&#64;company.com
</div> </div>
</div> </div>
@ -35,19 +38,21 @@
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button
class="mr-2" class="mr-2"
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -57,24 +62,30 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

68
src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -21,14 +24,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'futuristic-layout', selector: 'futuristic-layout',
templateUrl : './futuristic.component.html', templateUrl: './futuristic.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, UserComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, NgIf, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
FuseVerticalNavigationComponent,
UserComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],
}) })
export class FuturisticLayoutComponent implements OnInit, OnDestroy export class FuturisticLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
user: User; user: User;
@ -43,10 +60,8 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _userService: UserService, private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -55,8 +70,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -67,29 +81,25 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to the user service // Subscribe to the user service
this._userService.user$ this._userService.user$
.pipe((takeUntil(this._unsubscribeAll))) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((user: User) => .subscribe((user: User) => {
{
this.user = user; this.user = user;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -98,8 +108,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -114,13 +123,14 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

40
src/app/layout/layouts/vertical/thin/thin.component.html
View File

@ -8,33 +8,33 @@
[mode]="isScreenSmall ? 'over' : 'side'" [mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'" [name]="'mainNavigation'"
[navigation]="navigation.compact" [navigation]="navigation.compact"
[opened]="!isScreenSmall"> [opened]="!isScreenSmall"
>
<!-- Navigation header hook --> <!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader> <ng-container fuseVerticalNavigationContentHeader>
<!-- Logo --> <!-- Logo -->
<div class="flex items-center justify-center h-20"> <div class="flex h-20 items-center justify-center">
<img <img class="w-8" src="images/logo/logo.svg" alt="Logo image" />
class="w-8"
src="images/logo/logo.svg"
alt="Logo image">
</div> </div>
</ng-container> </ng-container>
</fuse-vertical-navigation> </fuse-vertical-navigation>
<!-- Wrapper --> <!-- Wrapper -->
<div class="flex flex-col flex-auto w-full min-w-0"> <div class="flex w-full min-w-0 flex-auto flex-col">
<!-- Header --> <!-- Header -->
<div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden"> <div
class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
>
<!-- Navigation toggle button --> <!-- Navigation toggle button -->
<button <button
class="mr-2" class="mr-2"
mat-icon-button mat-icon-button
(click)="toggleNavigation('mainNavigation')"> (click)="toggleNavigation('mainNavigation')"
>
<mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
</button> </button>
<!-- Components --> <!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2"> <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
<languages></languages> <languages></languages>
<fuse-fullscreen class="hidden md:block"></fuse-fullscreen> <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
<search [appearance]="'bar'"></search> <search [appearance]="'bar'"></search>
@ -44,25 +44,31 @@
<button <button
class="lg:hidden" class="lg:hidden"
mat-icon-button mat-icon-button
(click)="quickChat.toggle()"> (click)="quickChat.toggle()"
<mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon> >
<mat-icon
[svgIcon]="'heroicons_outline:chat-bubble-left-right'"
></mat-icon>
</button> </button>
<user></user> <user></user>
</div> </div>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex flex-col flex-auto"> <div class="flex flex-auto flex-col">
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
Otherwise, layout changes won't be registered and the view won't be updated! --> Otherwise, layout changes won't be registered and the view won't be updated! -->
<router-outlet *ngIf="true"></router-outlet> <router-outlet *ngIf="true"></router-outlet>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden"> <div
<span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span> class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
>
<span class="text-secondary font-medium"
>Fuse &copy; {{ currentYear }}</span
>
</div> </div>
</div> </div>
<!-- Quick chat --> <!-- Quick chat -->

63
src/app/layout/layouts/vertical/thin/thin.component.ts
View File

@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen'; import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
import { FuseLoadingBarComponent } from '@fuse/components/loading-bar'; import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation'; import {
FuseNavigationService,
FuseVerticalNavigationComponent,
} from '@fuse/components/navigation';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { NavigationService } from 'app/core/navigation/navigation.service'; import { NavigationService } from 'app/core/navigation/navigation.service';
import { Navigation } from 'app/core/navigation/navigation.types'; import { Navigation } from 'app/core/navigation/navigation.types';
@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector : 'thin-layout', selector: 'thin-layout',
templateUrl : './thin.component.html', templateUrl: './thin.component.html',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
standalone : true, standalone: true,
imports : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent], imports: [
FuseLoadingBarComponent,
FuseVerticalNavigationComponent,
MatButtonModule,
MatIconModule,
LanguagesComponent,
FuseFullscreenComponent,
SearchComponent,
ShortcutsComponent,
MessagesComponent,
NotificationsComponent,
UserComponent,
NgIf,
RouterOutlet,
QuickChatComponent,
],
}) })
export class ThinLayoutComponent implements OnInit, OnDestroy export class ThinLayoutComponent implements OnInit, OnDestroy {
{
isScreenSmall: boolean; isScreenSmall: boolean;
navigation: Navigation; navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -39,10 +56,8 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
private _router: Router, private _router: Router,
private _navigationService: NavigationService, private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService, private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {}
{
}
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Accessors // @ Accessors
@ -51,8 +66,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
/** /**
* Getter for current year * Getter for current year
*/ */
get currentYear(): number get currentYear(): number {
{
return new Date().getFullYear(); return new Date().getFullYear();
} }
@ -63,21 +77,18 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
/** /**
* On init * On init
*/ */
ngOnInit(): void ngOnInit(): void {
{
// Subscribe to navigation data // Subscribe to navigation data
this._navigationService.navigation$ this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => .subscribe((navigation: Navigation) => {
{
this.navigation = navigation; this.navigation = navigation;
}); });
// Subscribe to media changes // Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$ this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))
.subscribe(({matchingAliases}) => .subscribe(({ matchingAliases }) => {
{
// Check if the screen is small // Check if the screen is small
this.isScreenSmall = !matchingAliases.includes('md'); this.isScreenSmall = !matchingAliases.includes('md');
}); });
@ -86,8 +97,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
/** /**
* On destroy * On destroy
*/ */
ngOnDestroy(): void ngOnDestroy(): void {
{
// Unsubscribe from all subscriptions // Unsubscribe from all subscriptions
this._unsubscribeAll.next(null); this._unsubscribeAll.next(null);
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
@ -102,13 +112,14 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
* *
* @param name * @param name
*/ */
toggleNavigation(name: string): void toggleNavigation(name: string): void {
{
// Get the navigation // Get the navigation
const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name); const navigation =
this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
name
);
if ( navigation ) if (navigation) {
{
// Toggle the opened status // Toggle the opened status
navigation.toggle(); navigation.toggle();
} }

46
src/app/mock-api/apps/academy/api.ts
View File

@ -1,11 +1,14 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { categories as categoriesData, courses as coursesData, demoCourseSteps as demoCourseStepsData } from 'app/mock-api/apps/academy/data'; import {
categories as categoriesData,
courses as coursesData,
demoCourseSteps as demoCourseStepsData,
} from 'app/mock-api/apps/academy/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class AcademyMockApi export class AcademyMockApi {
{
private _categories: any[] = categoriesData; private _categories: any[] = categoriesData;
private _courses: any[] = coursesData; private _courses: any[] = coursesData;
private _demoCourseSteps: any[] = demoCourseStepsData; private _demoCourseSteps: any[] = demoCourseStepsData;
@ -13,8 +16,7 @@ export class AcademyMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -26,15 +28,13 @@ export class AcademyMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Categories - GET // @ Categories - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/academy/categories') .onGet('api/apps/academy/categories')
.reply(() => .reply(() => {
{
// Clone the categories // Clone the categories
const categories = cloneDeep(this._categories); const categories = cloneDeep(this._categories);
@ -47,23 +47,19 @@ export class AcademyMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Courses - GET // @ Courses - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/academy/courses').reply(() => {
.onGet('api/apps/academy/courses') // Clone the courses
.reply(() => const courses = cloneDeep(this._courses);
{
// Clone the courses
const courses = cloneDeep(this._courses);
return [200, courses]; return [200, courses];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Course - GET // @ Course - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/academy/courses/course') .onGet('api/apps/academy/courses/course')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id from the params // Get the id from the params
const id = request.params.get('id'); const id = request.params.get('id');
@ -72,16 +68,12 @@ export class AcademyMockApi
const steps = cloneDeep(this._demoCourseSteps); const steps = cloneDeep(this._demoCourseSteps);
// Find the course and attach steps to it // Find the course and attach steps to it
const course = courses.find(item => item.id === id); const course = courses.find((item) => item.id === id);
if ( course ) if (course) {
{
course.steps = steps; course.steps = steps;
} }
return [ return [200, course];
200,
course,
];
}); });
} }
} }

457
src/app/mock-api/apps/academy/data.ts
View File

@ -1,295 +1,298 @@
/* eslint-disable */ /* eslint-disable */
export const categories = [ export const categories = [
{ {
id : '9a67dff7-3c38-4052-a335-0cef93438ff6', id: '9a67dff7-3c38-4052-a335-0cef93438ff6',
title: 'Web', title: 'Web',
slug : 'web', slug: 'web',
}, },
{ {
id : 'a89672f5-e00d-4be4-9194-cb9d29f82165', id: 'a89672f5-e00d-4be4-9194-cb9d29f82165',
title: 'Firebase', title: 'Firebase',
slug : 'firebase', slug: 'firebase',
}, },
{ {
id : '02f42092-bb23-4552-9ddb-cfdcc235d48f', id: '02f42092-bb23-4552-9ddb-cfdcc235d48f',
title: 'Cloud', title: 'Cloud',
slug : 'cloud', slug: 'cloud',
}, },
{ {
id : '5648a630-979f-4403-8c41-fc9790dea8cd', id: '5648a630-979f-4403-8c41-fc9790dea8cd',
title: 'Android', title: 'Android',
slug : 'android', slug: 'android',
}, },
]; ];
export const courses = [ export const courses = [
{ {
id : '694e4e5f-f25f-470b-bd0e-26b1d4f64028', id: '694e4e5f-f25f-470b-bd0e-26b1d4f64028',
title : 'Basics of Angular', title: 'Basics of Angular',
slug : 'basics-of-angular', slug: 'basics-of-angular',
description: 'Introductory course for Angular and framework basics', description: 'Introductory course for Angular and framework basics',
category : 'web', category: 'web',
duration : 30, duration: 30,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Jun 28, 2021', updatedAt: 'Jun 28, 2021',
featured : true, featured: true,
progress : { progress: {
currentStep: 3, currentStep: 3,
completed : 2, completed: 2,
}, },
}, },
{ {
id : 'f924007a-2ee9-470b-a316-8d21ed78277f', id: 'f924007a-2ee9-470b-a316-8d21ed78277f',
title : 'Basics of TypeScript', title: 'Basics of TypeScript',
slug : 'basics-of-typeScript', slug: 'basics-of-typeScript',
description: 'Beginner course for Typescript and its basics', description: 'Beginner course for Typescript and its basics',
category : 'web', category: 'web',
duration : 60, duration: 60,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Nov 01, 2021', updatedAt: 'Nov 01, 2021',
featured : true, featured: true,
progress : { progress: {
currentStep: 5, currentStep: 5,
completed : 3, completed: 3,
}, },
}, },
{ {
id : '0c06e980-abb5-4ba7-ab65-99a228cab36b', id: '0c06e980-abb5-4ba7-ab65-99a228cab36b',
title : 'Android N: Quick Settings', title: 'Android N: Quick Settings',
slug : 'android-n-quick-settings', slug: 'android-n-quick-settings',
description: 'Step by step guide for Android N: Quick Settings', description: 'Step by step guide for Android N: Quick Settings',
category : 'android', category: 'android',
duration : 120, duration: 120,
totalSteps : 11, totalSteps: 11,
updatedAt : 'May 08, 2021', updatedAt: 'May 08, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 10, currentStep: 10,
completed : 1, completed: 1,
}, },
}, },
{ {
id : '1b9a9acc-9a36-403e-a1e7-b11780179e38', id: '1b9a9acc-9a36-403e-a1e7-b11780179e38',
title : 'Build an App for the Google Assistant with Firebase', title: 'Build an App for the Google Assistant with Firebase',
slug : 'build-an-app-for-the-google-assistant-with-firebase', slug: 'build-an-app-for-the-google-assistant-with-firebase',
description: 'Dive deep into Google Assistant apps using Firebase', description: 'Dive deep into Google Assistant apps using Firebase',
category : 'firebase', category: 'firebase',
duration : 30, duration: 30,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Jan 09, 2021', updatedAt: 'Jan 09, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 4, currentStep: 4,
completed : 3, completed: 3,
}, },
}, },
{ {
id : '55eb415f-3f4e-4853-a22b-f0ae91331169', id: '55eb415f-3f4e-4853-a22b-f0ae91331169',
title : 'Keep Sensitive Data Safe and Private', title: 'Keep Sensitive Data Safe and Private',
slug : 'keep-sensitive-data-safe-and-private', slug: 'keep-sensitive-data-safe-and-private',
description: 'Learn how to keep your important data safe and private', description: 'Learn how to keep your important data safe and private',
category : 'android', category: 'android',
duration : 45, duration: 45,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Jan 14, 2021', updatedAt: 'Jan 14, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 6, currentStep: 6,
completed : 0, completed: 0,
}, },
}, },
{ {
id : 'fad2ab23-1011-4028-9a54-e52179ac4a50', id: 'fad2ab23-1011-4028-9a54-e52179ac4a50',
title : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge', title: "Manage Your Pivotal Cloud Foundry App's Using Apigee Edge",
slug : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge', slug: 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
description: 'Introductory course for Pivotal Cloud Foundry App', description: 'Introductory course for Pivotal Cloud Foundry App',
category : 'cloud', category: 'cloud',
duration : 90, duration: 90,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Jun 24, 2021', updatedAt: 'Jun 24, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 6, currentStep: 6,
completed : 0, completed: 0,
}, },
}, },
{ {
id : 'c4bc107b-edc4-47a7-a7a8-4fb09732e794', id: 'c4bc107b-edc4-47a7-a7a8-4fb09732e794',
title : 'Build a PWA Using Workbox', title: 'Build a PWA Using Workbox',
slug : 'build-a-pwa-using-workbox', slug: 'build-a-pwa-using-workbox',
description: 'Step by step guide for building a PWA using Workbox', description: 'Step by step guide for building a PWA using Workbox',
category : 'web', category: 'web',
duration : 120, duration: 120,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Nov 19, 2021', updatedAt: 'Nov 19, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : '1449f945-d032-460d-98e3-406565a22293', id: '1449f945-d032-460d-98e3-406565a22293',
title : 'Cloud Functions for Firebase', title: 'Cloud Functions for Firebase',
slug : 'cloud-functions-for-firebase', slug: 'cloud-functions-for-firebase',
description: 'Beginners guide of Firebase Cloud Functions', description: 'Beginners guide of Firebase Cloud Functions',
category : 'firebase', category: 'firebase',
duration : 45, duration: 45,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Jul 11, 2021', updatedAt: 'Jul 11, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 3, currentStep: 3,
completed : 1, completed: 1,
}, },
}, },
{ {
id : 'f05e08ab-f3e3-4597-a032-6a4b69816f24', id: 'f05e08ab-f3e3-4597-a032-6a4b69816f24',
title : 'Building a gRPC Service with Java', title: 'Building a gRPC Service with Java',
slug : 'building-a-grpc-service-with-java', slug: 'building-a-grpc-service-with-java',
description: 'Learn more about building a gRPC Service with Java', description: 'Learn more about building a gRPC Service with Java',
category : 'cloud', category: 'cloud',
duration : 30, duration: 30,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Mar 13, 2021', updatedAt: 'Mar 13, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 1, completed: 1,
}, },
}, },
{ {
id : '181728f4-87c8-45c5-b9cc-92265bcd2f4d', id: '181728f4-87c8-45c5-b9cc-92265bcd2f4d',
title : 'Looking at Campaign Finance with BigQuery', title: 'Looking at Campaign Finance with BigQuery',
slug : 'looking-at-campaign-finance-with-bigquery', slug: 'looking-at-campaign-finance-with-bigquery',
description: 'Dive deep into BigQuery: Campaign Finance', description: 'Dive deep into BigQuery: Campaign Finance',
category : 'cloud', category: 'cloud',
duration : 60, duration: 60,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Nov 01, 2021', updatedAt: 'Nov 01, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : 'fcbfedbf-6187-4b3b-89d3-1a7cb4e11616', id: 'fcbfedbf-6187-4b3b-89d3-1a7cb4e11616',
title : 'Personalize Your iOS App with Firebase User Management', title: 'Personalize Your iOS App with Firebase User Management',
slug : 'personalize-your-ios-app-with-firebase-user-management', slug: 'personalize-your-ios-app-with-firebase-user-management',
description: 'Dive deep into User Management on iOS apps using Firebase', description:
category : 'firebase', 'Dive deep into User Management on iOS apps using Firebase',
duration : 90, category: 'firebase',
totalSteps : 11, duration: 90,
updatedAt : 'Aug 08, 2021', totalSteps: 11,
featured : false, updatedAt: 'Aug 08, 2021',
progress : { featured: false,
progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : '5213f6a1-1dd7-4b1d-b6e9-ffb7af534f28', id: '5213f6a1-1dd7-4b1d-b6e9-ffb7af534f28',
title : 'Customize Network Topology with Subnetworks', title: 'Customize Network Topology with Subnetworks',
slug : 'customize-network-topology-with-subnetworks', slug: 'customize-network-topology-with-subnetworks',
description: 'Dive deep into Network Topology with Subnetworks', description: 'Dive deep into Network Topology with Subnetworks',
category : 'web', category: 'web',
duration : 45, duration: 45,
totalSteps : 11, totalSteps: 11,
updatedAt : 'May 12, 2021', updatedAt: 'May 12, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : '02992ac9-d1a3-4167-b70e-8a1d5b5ba253', id: '02992ac9-d1a3-4167-b70e-8a1d5b5ba253',
title : 'Building Beautiful UIs with Flutter', title: 'Building Beautiful UIs with Flutter',
slug : 'building-beautiful-uis-with-flutter', slug: 'building-beautiful-uis-with-flutter',
description: 'Dive deep into Flutter\'s hidden secrets for creating beautiful UIs', description:
category : 'web', "Dive deep into Flutter's hidden secrets for creating beautiful UIs",
duration : 90, category: 'web',
totalSteps : 11, duration: 90,
updatedAt : 'Sep 18, 2021', totalSteps: 11,
featured : false, updatedAt: 'Sep 18, 2021',
progress : { featured: false,
progress: {
currentStep: 8, currentStep: 8,
completed : 2, completed: 2,
}, },
}, },
{ {
id : '2139512f-41fb-4a4a-841a-0b4ac034f9b4', id: '2139512f-41fb-4a4a-841a-0b4ac034f9b4',
title : 'Firebase Android', title: 'Firebase Android',
slug : 'firebase-android', slug: 'firebase-android',
description: 'Beginners guide of Firebase for Android', description: 'Beginners guide of Firebase for Android',
category : 'android', category: 'android',
duration : 45, duration: 45,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Apr 24, 2021', updatedAt: 'Apr 24, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : '65e0a0e0-d8c0-4117-a3cb-eb74f8e28809', id: '65e0a0e0-d8c0-4117-a3cb-eb74f8e28809',
title : 'Simulating a Thread Network Using OpenThread', title: 'Simulating a Thread Network Using OpenThread',
slug : 'simulating-a-thread-network-using-openthread', slug: 'simulating-a-thread-network-using-openthread',
description: 'Introductory course for OpenThread and Simulating a Thread Network', description:
category : 'web', 'Introductory course for OpenThread and Simulating a Thread Network',
duration : 45, category: 'web',
totalSteps : 11, duration: 45,
updatedAt : 'Jun 05, 2021', totalSteps: 11,
featured : false, updatedAt: 'Jun 05, 2021',
progress : { featured: false,
progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : 'c202ebc9-9be3-433a-9d38-7003b3ed7b7a', id: 'c202ebc9-9be3-433a-9d38-7003b3ed7b7a',
title : 'Your First Progressive Web App', title: 'Your First Progressive Web App',
slug : 'your-first-progressive-web-app', slug: 'your-first-progressive-web-app',
description: 'Step by step guide for creating a PWA from scratch', description: 'Step by step guide for creating a PWA from scratch',
category : 'web', category: 'web',
duration : 30, duration: 30,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Oct 14, 2021', updatedAt: 'Oct 14, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : '980ae7da-9f77-4e30-aa98-1b1ea594e775', id: '980ae7da-9f77-4e30-aa98-1b1ea594e775',
title : 'Launch Cloud Datalab', title: 'Launch Cloud Datalab',
slug : 'launch-cloud-datalab', slug: 'launch-cloud-datalab',
description: 'From start to finish: Launch Cloud Datalab', description: 'From start to finish: Launch Cloud Datalab',
category : 'cloud', category: 'cloud',
duration : 60, duration: 60,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Dec 16, 2021', updatedAt: 'Dec 16, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 0, currentStep: 0,
completed : 0, completed: 0,
}, },
}, },
{ {
id : 'c9748ea9-4117-492c-bdb2-55085b515978', id: 'c9748ea9-4117-492c-bdb2-55085b515978',
title : 'Cloud Firestore', title: 'Cloud Firestore',
slug : 'cloud-firestore', slug: 'cloud-firestore',
description: 'Step by step guide for setting up Cloud Firestore', description: 'Step by step guide for setting up Cloud Firestore',
category : 'firebase', category: 'firebase',
duration : 90, duration: 90,
totalSteps : 11, totalSteps: 11,
updatedAt : 'Apr 04, 2021', updatedAt: 'Apr 04, 2021',
featured : false, featured: false,
progress : { progress: {
currentStep: 2, currentStep: 2,
completed : 0, completed: 0,
}, },
}, },
]; ];
@ -651,69 +654,71 @@ export const demoCourseContent = `
`; `;
export const demoCourseSteps = [ export const demoCourseSteps = [
{ {
order : 0, order: 0,
title : 'Introduction', title: 'Introduction',
subtitle: 'Introducing the library and how it works', subtitle: 'Introducing the library and how it works',
content : `<h2 class="text-2xl sm:text-3xl">Introduction</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Introduction</h1> ${demoCourseContent}`,
}, },
{ {
order : 1, order: 1,
title : 'Get the sample code', title: 'Get the sample code',
subtitle: 'Where to find the sample code and how to access it', subtitle: 'Where to find the sample code and how to access it',
content : `<h2 class="text-2xl sm:text-3xl">Get the sample code</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Get the sample code</h1> ${demoCourseContent}`,
}, },
{ {
order : 2, order: 2,
title : 'Create a Firebase project and Set up your app', title: 'Create a Firebase project and Set up your app',
subtitle: 'How to create a basic Firebase project and how to run it locally', subtitle:
content : `<h2 class="text-2xl sm:text-3xl">Create a Firebase project and Set up your app</h1> ${demoCourseContent}`, 'How to create a basic Firebase project and how to run it locally',
content: `<h2 class="text-2xl sm:text-3xl">Create a Firebase project and Set up your app</h1> ${demoCourseContent}`,
}, },
{ {
order : 3, order: 3,
title : 'Install the Firebase Command Line Interface', title: 'Install the Firebase Command Line Interface',
subtitle: 'Setting up the Firebase CLI to access command line tools', subtitle: 'Setting up the Firebase CLI to access command line tools',
content : `<h2 class="text-2xl sm:text-3xl">Install the Firebase Command Line Interface</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Install the Firebase Command Line Interface</h1> ${demoCourseContent}`,
}, },
{ {
order : 4, order: 4,
title : 'Deploy and run the web app', title: 'Deploy and run the web app',
subtitle: 'How to build, push and run the project remotely', subtitle: 'How to build, push and run the project remotely',
content : `<h2 class="text-2xl sm:text-3xl">Deploy and run the web app</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Deploy and run the web app</h1> ${demoCourseContent}`,
}, },
{ {
order : 5, order: 5,
title : 'The Functions Directory', title: 'The Functions Directory',
subtitle: 'Introducing the Functions and Functions Directory', subtitle: 'Introducing the Functions and Functions Directory',
content : `<h2 class="text-2xl sm:text-3xl">The Functions Directory</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">The Functions Directory</h1> ${demoCourseContent}`,
}, },
{ {
order : 6, order: 6,
title : 'Import the Cloud Functions and Firebase Admin modules', title: 'Import the Cloud Functions and Firebase Admin modules',
subtitle: 'Create your first Function and run it to administer your app', subtitle:
content : `<h2 class="text-2xl sm:text-3xl">Import the Cloud Functions and Firebase Admin modules</h1> ${demoCourseContent}`, 'Create your first Function and run it to administer your app',
content: `<h2 class="text-2xl sm:text-3xl">Import the Cloud Functions and Firebase Admin modules</h1> ${demoCourseContent}`,
}, },
{ {
order : 7, order: 7,
title : 'Welcome New Users', title: 'Welcome New Users',
subtitle: 'How to create a welcome message for the new users', subtitle: 'How to create a welcome message for the new users',
content : `<h2 class="text-2xl sm:text-3xl">Welcome New Users</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Welcome New Users</h1> ${demoCourseContent}`,
}, },
{ {
order : 8, order: 8,
title : 'Images moderation', title: 'Images moderation',
subtitle: 'How to moderate images; crop, resize, optimize', subtitle: 'How to moderate images; crop, resize, optimize',
content : `<h2 class="text-2xl sm:text-3xl">Images moderation</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Images moderation</h1> ${demoCourseContent}`,
}, },
{ {
order : 9, order: 9,
title : 'New Message Notifications', title: 'New Message Notifications',
subtitle: 'How to create and push a notification to a user', subtitle: 'How to create and push a notification to a user',
content : `<h2 class="text-2xl sm:text-3xl">New Message Notifications</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">New Message Notifications</h1> ${demoCourseContent}`,
}, },
{ {
order : 10, order: 10,
title : 'Congratulations!', title: 'Congratulations!',
subtitle: 'Nice work, you have created your first application', subtitle: 'Nice work, you have created your first application',
content : `<h2 class="text-2xl sm:text-3xl">Congratulations!</h1> ${demoCourseContent}`, content: `<h2 class="text-2xl sm:text-3xl">Congratulations!</h1> ${demoCourseContent}`,
}, },
]; ];

109
src/app/mock-api/apps/chat/api.ts
View File

@ -1,11 +1,15 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService } from '@fuse/lib/mock-api'; import { FuseMockApiService } from '@fuse/lib/mock-api';
import { chats as chatsData, contacts as contactsData, messages as messagesData, profile as profileData } from 'app/mock-api/apps/chat/data'; import {
chats as chatsData,
contacts as contactsData,
messages as messagesData,
profile as profileData,
} from 'app/mock-api/apps/chat/data';
import { assign, cloneDeep, omit } from 'lodash-es'; import { assign, cloneDeep, omit } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ChatMockApi export class ChatMockApi {
{
private _chats: any[] = chatsData; private _chats: any[] = chatsData;
private _contacts: any[] = contactsData; private _contacts: any[] = contactsData;
private _messages: any[] = messagesData; private _messages: any[] = messagesData;
@ -14,22 +18,26 @@ export class ChatMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
// Modify the chats array to attach certain data to it // Modify the chats array to attach certain data to it
this._chats = this._chats.map(chat => ({ this._chats = this._chats.map((chat) => ({
...chat, ...chat,
// Get the actual contact object from the id and attach it to the chat // Get the actual contact object from the id and attach it to the chat
contact: this._contacts.find(contact => contact.id === chat.contactId), contact: this._contacts.find(
(contact) => contact.id === chat.contactId
),
// Since we use same set of messages on all chats, we assign them here. // Since we use same set of messages on all chats, we assign them here.
messages: this._messages.map(message => ({ messages: this._messages.map((message) => ({
...message, ...message,
chatId : chat.id, chatId: chat.id,
contactId: message.contactId === 'me' ? this._profile.id : chat.contactId, contactId:
isMine : message.contactId === 'me', message.contactId === 'me'
? this._profile.id
: chat.contactId,
isMine: message.contactId === 'me',
})), })),
})); }));
} }
@ -41,29 +49,24 @@ export class ChatMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Chats - GET // @ Chats - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/chat/chats').reply(() => {
.onGet('api/apps/chat/chats') // Clone the chats
.reply(() => const chats = cloneDeep(this._chats);
{
// Clone the chats
const chats = cloneDeep(this._chats);
// Return the response // Return the response
return [200, chats]; return [200, chats];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Chat - GET // @ Chat - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/chat/chat') .onGet('api/apps/chat/chat')
.reply(({request}) => .reply(({ request }) => {
{
// Get the chat id // Get the chat id
const id = request.params.get('id'); const id = request.params.get('id');
@ -71,7 +74,7 @@ export class ChatMockApi
const chats = cloneDeep(this._chats); const chats = cloneDeep(this._chats);
// Find the chat we need // Find the chat we need
const chat = chats.find(item => item.id === id); const chat = chats.find((item) => item.id === id);
// Return the response // Return the response
return [200, chat]; return [200, chat];
@ -82,8 +85,7 @@ export class ChatMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/chat/chat') .onPatch('api/apps/chat/chat')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and chat // Get the id and chat
const id = request.body.id; const id = request.body.id;
const chat = cloneDeep(request.body.chat); const chat = cloneDeep(request.body.chat);
@ -92,10 +94,8 @@ export class ChatMockApi
let updatedChat = null; let updatedChat = null;
// Find the chat and update it // Find the chat and update it
this._chats.forEach((item, index, chats) => this._chats.forEach((item, index, chats) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the chat // Update the chat
chats[index] = assign({}, chats[index], chat); chats[index] = assign({}, chats[index], chat);
@ -111,30 +111,28 @@ export class ChatMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Contacts - GET // @ Contacts - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/chat/contacts').reply(() => {
.onGet('api/apps/chat/contacts') // Clone the contacts
.reply(() => let contacts = cloneDeep(this._contacts);
{
// Clone the contacts
let contacts = cloneDeep(this._contacts);
// Sort the contacts by the name field by default // Sort the contacts by the name field by default
contacts.sort((a, b) => a.name.localeCompare(b.name)); contacts.sort((a, b) => a.name.localeCompare(b.name));
// Omit details and attachments from contacts // Omit details and attachments from contacts
contacts = contacts.map(contact => omit(contact, ['details', 'attachments'])); contacts = contacts.map((contact) =>
omit(contact, ['details', 'attachments'])
);
// Return the response // Return the response
return [200, contacts]; return [200, contacts];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Contact Details - GET // @ Contact Details - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/chat/contact') .onGet('api/apps/chat/contact')
.reply(({request}) => .reply(({ request }) => {
{
// Get the contact id // Get the contact id
const id = request.params.get('id'); const id = request.params.get('id');
@ -142,7 +140,7 @@ export class ChatMockApi
const contacts = cloneDeep(this._contacts); const contacts = cloneDeep(this._contacts);
// Find the contact // Find the contact
const contact = contacts.find(item => item.id === id); const contact = contacts.find((item) => item.id === id);
// Return the response // Return the response
return [200, contact]; return [200, contact];
@ -151,15 +149,12 @@ export class ChatMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Profile - GET // @ Profile - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/chat/profile').reply(() => {
.onGet('api/apps/chat/profile') // Clone the profile
.reply(() => const profile = cloneDeep(this._profile);
{
// Clone the profile
const profile = cloneDeep(this._profile);
// Return the response // Return the response
return [200, profile]; return [200, profile];
}); });
} }
} }

2859
src/app/mock-api/apps/chat/data.ts
View File

File diff suppressed because it is too large Load Diff

152
src/app/mock-api/apps/contacts/api.ts
View File

@ -1,12 +1,15 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { contacts as contactsData, countries as countriesData, tags as tagsData } from 'app/mock-api/apps/contacts/data'; import {
contacts as contactsData,
countries as countriesData,
tags as tagsData,
} from 'app/mock-api/apps/contacts/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
import { from, map } from 'rxjs'; import { from, map } from 'rxjs';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ContactsMockApi export class ContactsMockApi {
{
private _contacts: any[] = contactsData; private _contacts: any[] = contactsData;
private _countries: any[] = countriesData; private _countries: any[] = countriesData;
private _tags: any[] = tagsData; private _tags: any[] = tagsData;
@ -14,8 +17,7 @@ export class ContactsMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -27,32 +29,27 @@ export class ContactsMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Contacts - GET // @ Contacts - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/contacts/all').reply(() => {
.onGet('api/apps/contacts/all') // Clone the contacts
.reply(() => const contacts = cloneDeep(this._contacts);
{
// Clone the contacts
const contacts = cloneDeep(this._contacts);
// Sort the contacts by the name field by default // Sort the contacts by the name field by default
contacts.sort((a, b) => a.name.localeCompare(b.name)); contacts.sort((a, b) => a.name.localeCompare(b.name));
// Return the response // Return the response
return [200, contacts]; return [200, contacts];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Contacts Search - GET // @ Contacts Search - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/contacts/search') .onGet('api/apps/contacts/search')
.reply(({request}) => .reply(({ request }) => {
{
// Get the search query // Get the search query
const query = request.params.get('query'); const query = request.params.get('query');
@ -60,10 +57,15 @@ export class ContactsMockApi
let contacts = cloneDeep(this._contacts); let contacts = cloneDeep(this._contacts);
// If the query exists... // If the query exists...
if ( query ) if (query) {
{
// Filter the contacts // Filter the contacts
contacts = contacts.filter(contact => contact.name && contact.name.toLowerCase().includes(query.toLowerCase())); contacts = contacts.filter(
(contact) =>
contact.name &&
contact.name
.toLowerCase()
.includes(query.toLowerCase())
);
} }
// Sort the contacts by the name field by default // Sort the contacts by the name field by default
@ -78,8 +80,7 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/contacts/contact') .onGet('api/apps/contacts/contact')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id from the params // Get the id from the params
const id = request.params.get('id'); const id = request.params.get('id');
@ -87,7 +88,7 @@ export class ContactsMockApi
const contacts = cloneDeep(this._contacts); const contacts = cloneDeep(this._contacts);
// Find the contact // Find the contact
const contact = contacts.find(item => item.id === id); const contact = contacts.find((item) => item.id === id);
// Return the response // Return the response
return [200, contact]; return [200, contact];
@ -98,23 +99,22 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/contacts/contact') .onPost('api/apps/contacts/contact')
.reply(() => .reply(() => {
{
// Generate a new contact // Generate a new contact
const newContact = { const newContact = {
id : FuseMockApiUtils.guid(), id: FuseMockApiUtils.guid(),
avatar : null, avatar: null,
name : 'New Contact', name: 'New Contact',
emails : [], emails: [],
phoneNumbers: [], phoneNumbers: [],
job : { job: {
title : '', title: '',
company: '', company: '',
}, },
birthday : null, birthday: null,
address : null, address: null,
notes : null, notes: null,
tags : [], tags: [],
}; };
// Unshift the new contact // Unshift the new contact
@ -129,8 +129,7 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/contacts/contact') .onPatch('api/apps/contacts/contact')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and contact // Get the id and contact
const id = request.body.id; const id = request.body.id;
const contact = cloneDeep(request.body.contact); const contact = cloneDeep(request.body.contact);
@ -139,10 +138,8 @@ export class ContactsMockApi
let updatedContact = null; let updatedContact = null;
// Find the contact and update it // Find the contact and update it
this._contacts.forEach((item, index, contacts) => this._contacts.forEach((item, index, contacts) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the contact // Update the contact
contacts[index] = assign({}, contacts[index], contact); contacts[index] = assign({}, contacts[index], contact);
@ -160,16 +157,13 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/contacts/contact') .onDelete('api/apps/contacts/contact')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the contact and delete it // Find the contact and delete it
this._contacts.forEach((item, index) => this._contacts.forEach((item, index) => {
{ if (item.id === id) {
if ( item.id === id )
{
this._contacts.splice(index, 1); this._contacts.splice(index, 1);
} }
}); });
@ -197,8 +191,7 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/contacts/tag') .onPost('api/apps/contacts/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the tag // Get the tag
const newTag = cloneDeep(request.body.tag); const newTag = cloneDeep(request.body.tag);
@ -217,8 +210,7 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/contacts/tag') .onPatch('api/apps/contacts/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and tag // Get the id and tag
const id = request.body.id; const id = request.body.id;
const tag = cloneDeep(request.body.tag); const tag = cloneDeep(request.body.tag);
@ -227,10 +219,8 @@ export class ContactsMockApi
let updatedTag = null; let updatedTag = null;
// Find the tag and update it // Find the tag and update it
this._tags.forEach((item, index, tags) => this._tags.forEach((item, index, tags) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the tag // Update the tag
tags[index] = assign({}, tags[index], tag); tags[index] = assign({}, tags[index], tag);
@ -248,26 +238,24 @@ export class ContactsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/contacts/tag') .onDelete('api/apps/contacts/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the tag and delete it // Find the tag and delete it
this._tags.forEach((item, index) => this._tags.forEach((item, index) => {
{ if (item.id === id) {
if ( item.id === id )
{
this._tags.splice(index, 1); this._tags.splice(index, 1);
} }
}); });
// Get the contacts that have the tag // Get the contacts that have the tag
const contactsWithTag = this._contacts.filter(contact => contact.tags.indexOf(id) > -1); const contactsWithTag = this._contacts.filter(
(contact) => contact.tags.indexOf(id) > -1
);
// Iterate through them and delete the tag // Iterate through them and delete the tag
contactsWithTag.forEach((contact) => contactsWithTag.forEach((contact) => {
{
contact.tags.splice(contact.tags.indexOf(id), 1); contact.tags.splice(contact.tags.indexOf(id), 1);
}); });
@ -285,34 +273,27 @@ export class ContactsMockApi
* @param file * @param file
*/ */
const readAsDataURL = (file: File): Promise<any> => const readAsDataURL = (file: File): Promise<any> =>
// Return a new promise // Return a new promise
new Promise((resolve, reject) => new Promise((resolve, reject) => {
{
// Create a new reader // Create a new reader
const reader = new FileReader(); const reader = new FileReader();
// Resolve the promise on success // Resolve the promise on success
reader.onload = (): void => reader.onload = (): void => {
{
resolve(reader.result); resolve(reader.result);
}; };
// Reject the promise on error // Reject the promise on error
reader.onerror = (e): void => reader.onerror = (e): void => {
{
reject(e); reject(e);
}; };
// Read the file as the // Read the file as the
reader.readAsDataURL(file); reader.readAsDataURL(file);
}) });
;
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/contacts/avatar') .onPost('api/apps/contacts/avatar')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and avatar // Get the id and avatar
const id = request.body.id; const id = request.body.id;
const avatar = request.body.avatar; const avatar = request.body.avatar;
@ -327,13 +308,10 @@ export class ContactsMockApi
// the src attribute of the img tag works with both image urls // the src attribute of the img tag works with both image urls
// and encoded images. // and encoded images.
return from(readAsDataURL(avatar)).pipe( return from(readAsDataURL(avatar)).pipe(
map((path) => map((path) => {
{
// Find the contact and update it // Find the contact and update it
this._contacts.forEach((item, index, contacts) => this._contacts.forEach((item, index, contacts) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the avatar // Update the avatar
contacts[index].avatar = path; contacts[index].avatar = path;
@ -344,7 +322,7 @@ export class ContactsMockApi
// Return the response // Return the response
return [200, updatedContact]; return [200, updatedContact];
}), })
); );
}); });
} }

4495
src/app/mock-api/apps/contacts/data.ts
View File

File diff suppressed because it is too large Load Diff

160
src/app/mock-api/apps/ecommerce/inventory/api.ts
View File

@ -1,11 +1,16 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { brands as brandsData, categories as categoriesData, products as productsData, tags as tagsData, vendors as vendorsData } from 'app/mock-api/apps/ecommerce/inventory/data'; import {
brands as brandsData,
categories as categoriesData,
products as productsData,
tags as tagsData,
vendors as vendorsData,
} from 'app/mock-api/apps/ecommerce/inventory/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ECommerceInventoryMockApi export class ECommerceInventoryMockApi {
{
private _categories: any[] = categoriesData; private _categories: any[] = categoriesData;
private _brands: any[] = brandsData; private _brands: any[] = brandsData;
private _products: any[] = productsData; private _products: any[] = productsData;
@ -15,8 +20,7 @@ export class ECommerceInventoryMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -28,8 +32,7 @@ export class ECommerceInventoryMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Categories - GET // @ Categories - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -49,8 +52,7 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/ecommerce/inventory/products', 300) .onGet('api/apps/ecommerce/inventory/products', 300)
.reply(({request}) => .reply(({ request }) => {
{
// Get available queries // Get available queries
const search = request.params.get('search'); const search = request.params.get('search');
const sort = request.params.get('sort') || 'name'; const sort = request.params.get('sort') || 'name';
@ -62,25 +64,30 @@ export class ECommerceInventoryMockApi
let products: any[] | null = cloneDeep(this._products); let products: any[] | null = cloneDeep(this._products);
// Sort the products // Sort the products
if ( sort === 'sku' || sort === 'name' || sort === 'active' ) if (sort === 'sku' || sort === 'name' || sort === 'active') {
{ products.sort((a, b) => {
products.sort((a, b) =>
{
const fieldA = a[sort].toString().toUpperCase(); const fieldA = a[sort].toString().toUpperCase();
const fieldB = b[sort].toString().toUpperCase(); const fieldB = b[sort].toString().toUpperCase();
return order === 'asc' ? fieldA.localeCompare(fieldB) : fieldB.localeCompare(fieldA); return order === 'asc'
? fieldA.localeCompare(fieldB)
: fieldB.localeCompare(fieldA);
}); });
} } else {
else products.sort((a, b) =>
{ order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
products.sort((a, b) => order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]); );
} }
// If search exists... // If search exists...
if ( search ) if (search) {
{
// Filter the products // Filter the products
products = products.filter(contact => contact.name && contact.name.toLowerCase().includes(search.toLowerCase())); products = products.filter(
(contact) =>
contact.name &&
contact.name
.toLowerCase()
.includes(search.toLowerCase())
);
} }
// Paginate - Start // Paginate - Start
@ -88,7 +95,7 @@ export class ECommerceInventoryMockApi
// Calculate pagination details // Calculate pagination details
const begin = page * size; const begin = page * size;
const end = Math.min((size * (page + 1)), productsLength); const end = Math.min(size * (page + 1), productsLength);
const lastPage = Math.max(Math.ceil(productsLength / size), 1); const lastPage = Math.max(Math.ceil(productsLength / size), 1);
// Prepare the pagination object // Prepare the pagination object
@ -98,26 +105,23 @@ export class ECommerceInventoryMockApi
// the last possible page number, return null for // the last possible page number, return null for
// products but also send the last possible page so // products but also send the last possible page so
// the app can navigate to there // the app can navigate to there
if ( page > lastPage ) if (page > lastPage) {
{
products = null; products = null;
pagination = { pagination = {
lastPage, lastPage,
}; };
} } else {
else
{
// Paginate the results by size // Paginate the results by size
products = products.slice(begin, end); products = products.slice(begin, end);
// Prepare the pagination mock-api // Prepare the pagination mock-api
pagination = { pagination = {
length : productsLength, length: productsLength,
size : size, size: size,
page : page, page: page,
lastPage : lastPage, lastPage: lastPage,
startIndex: begin, startIndex: begin,
endIndex : end - 1, endIndex: end - 1,
}; };
} }
@ -136,8 +140,7 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/ecommerce/inventory/product') .onGet('api/apps/ecommerce/inventory/product')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id from the params // Get the id from the params
const id = request.params.get('id'); const id = request.params.get('id');
@ -145,7 +148,7 @@ export class ECommerceInventoryMockApi
const products = cloneDeep(this._products); const products = cloneDeep(this._products);
// Find the product // Find the product
const product = products.find(item => item.id === id); const product = products.find((item) => item.id === id);
// Return the response // Return the response
return [200, product]; return [200, product];
@ -156,29 +159,28 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/ecommerce/inventory/product') .onPost('api/apps/ecommerce/inventory/product')
.reply(() => .reply(() => {
{
// Generate a new product // Generate a new product
const newProduct = { const newProduct = {
id : FuseMockApiUtils.guid(), id: FuseMockApiUtils.guid(),
category : '', category: '',
name : 'A New Product', name: 'A New Product',
description: '', description: '',
tags : [], tags: [],
sku : '', sku: '',
barcode : '', barcode: '',
brand : '', brand: '',
vendor : '', vendor: '',
stock : '', stock: '',
reserved : '', reserved: '',
cost : '', cost: '',
basePrice : '', basePrice: '',
taxPercent : '', taxPercent: '',
price : '', price: '',
weight : '', weight: '',
thumbnail : '', thumbnail: '',
images : [], images: [],
active : false, active: false,
}; };
// Unshift the new product // Unshift the new product
@ -193,8 +195,7 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/ecommerce/inventory/product') .onPatch('api/apps/ecommerce/inventory/product')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and product // Get the id and product
const id = request.body.id; const id = request.body.id;
const product = cloneDeep(request.body.product); const product = cloneDeep(request.body.product);
@ -203,10 +204,8 @@ export class ECommerceInventoryMockApi
let updatedProduct = null; let updatedProduct = null;
// Find the product and update it // Find the product and update it
this._products.forEach((item, index, products) => this._products.forEach((item, index, products) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the product // Update the product
products[index] = assign({}, products[index], product); products[index] = assign({}, products[index], product);
@ -224,16 +223,13 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/ecommerce/inventory/product') .onDelete('api/apps/ecommerce/inventory/product')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the product and delete it // Find the product and delete it
this._products.forEach((item, index) => this._products.forEach((item, index) => {
{ if (item.id === id) {
if ( item.id === id )
{
this._products.splice(index, 1); this._products.splice(index, 1);
} }
}); });
@ -254,8 +250,7 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/ecommerce/inventory/tag') .onPost('api/apps/ecommerce/inventory/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the tag // Get the tag
const newTag = cloneDeep(request.body.tag); const newTag = cloneDeep(request.body.tag);
@ -274,8 +269,7 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/ecommerce/inventory/tag') .onPatch('api/apps/ecommerce/inventory/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and tag // Get the id and tag
const id = request.body.id; const id = request.body.id;
const tag = cloneDeep(request.body.tag); const tag = cloneDeep(request.body.tag);
@ -284,10 +278,8 @@ export class ECommerceInventoryMockApi
let updatedTag = null; let updatedTag = null;
// Find the tag and update it // Find the tag and update it
this._tags.forEach((item, index, tags) => this._tags.forEach((item, index, tags) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the tag // Update the tag
tags[index] = assign({}, tags[index], tag); tags[index] = assign({}, tags[index], tag);
@ -305,26 +297,24 @@ export class ECommerceInventoryMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/ecommerce/inventory/tag') .onDelete('api/apps/ecommerce/inventory/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the tag and delete it // Find the tag and delete it
this._tags.forEach((item, index) => this._tags.forEach((item, index) => {
{ if (item.id === id) {
if ( item.id === id )
{
this._tags.splice(index, 1); this._tags.splice(index, 1);
} }
}); });
// Get the products that have the tag // Get the products that have the tag
const productsWithTag = this._products.filter(product => product.tags.indexOf(id) > -1); const productsWithTag = this._products.filter(
(product) => product.tags.indexOf(id) > -1
);
// Iterate through them and delete the tag // Iterate through them and delete the tag
productsWithTag.forEach((product) => productsWithTag.forEach((product) => {
{
product.tags.splice(product.tags.indexOf(id), 1); product.tags.splice(product.tags.indexOf(id), 1);
}); });

951
src/app/mock-api/apps/ecommerce/inventory/data.ts
View File

File diff suppressed because it is too large Load Diff

42
src/app/mock-api/apps/file-manager/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { items as itemsData } from 'app/mock-api/apps/file-manager/data'; import { items as itemsData } from 'app/mock-api/apps/file-manager/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FileManagerMockApi export class FileManagerMockApi {
{
private _items: any[] = itemsData; private _items: any[] = itemsData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,29 +22,30 @@ export class FileManagerMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Items - GET // @ Items - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/file-manager') .onGet('api/apps/file-manager')
.reply(({request}) => .reply(({ request }) => {
{
// Clone the items // Clone the items
let items = cloneDeep(this._items); let items = cloneDeep(this._items);
// See if the folder id exist // See if the folder id exist
const folderId = request.params.get('folderId') === 'null' ? null : request.params.get('folderId'); const folderId =
request.params.get('folderId') === 'null'
? null
: request.params.get('folderId');
// Filter the items by folder id. If folder id is null, // Filter the items by folder id. If folder id is null,
// that means we want to root items which have folder id // that means we want to root items which have folder id
// of null // of null
items = items.filter(item => item.folderId === folderId); items = items.filter((item) => item.folderId === folderId);
// Separate the items by folders and files // Separate the items by folders and files
const folders = items.filter(item => item.type === 'folder'); const folders = items.filter((item) => item.type === 'folder');
const files = items.filter(item => item.type !== 'folder'); const files = items.filter((item) => item.type !== 'folder');
// Sort the folders and files alphabetically by filename // Sort the folders and files alphabetically by filename
folders.sort((a, b) => a.name.localeCompare(b.name)); folders.sort((a, b) => a.name.localeCompare(b.name));
@ -61,19 +60,20 @@ export class FileManagerMockApi
let currentFolder = null; let currentFolder = null;
// Get the current folder and add it as the first entry // Get the current folder and add it as the first entry
if ( folderId ) if (folderId) {
{ currentFolder = pathItems.find(
currentFolder = pathItems.find(item => item.id === folderId); (item) => item.id === folderId
);
path.push(currentFolder); path.push(currentFolder);
} }
// Start traversing and storing the folders as a path array // Start traversing and storing the folders as a path array
// until we hit null on the folder id // until we hit null on the folder id
while ( currentFolder?.folderId ) while (currentFolder?.folderId) {
{ currentFolder = pathItems.find(
currentFolder = pathItems.find(item => item.id === currentFolder.folderId); (item) => item.id === currentFolder.folderId
if ( currentFolder ) );
{ if (currentFolder) {
path.unshift(currentFolder); path.unshift(currentFolder);
} }
} }

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

@ -1,257 +1,258 @@
/* eslint-disable */ /* eslint-disable */
export const items = [ export const items = [
{ {
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
folderId : null, folderId: null,
name : 'Personal', name: 'Personal',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'April 24, 2018', createdAt: 'April 24, 2018',
modifiedAt : 'April 24, 2018', modifiedAt: 'April 24, 2018',
size : '87 MB', size: '87 MB',
type : 'folder', type: 'folder',
contents : '57 files', contents: '57 files',
description: 'Personal documents such as insurance policies, tax papers and etc.', description:
'Personal documents such as insurance policies, tax papers and etc.',
}, },
{ {
id : '6da8747f-b474-4c9a-9eba-5ef212285500', id: '6da8747f-b474-4c9a-9eba-5ef212285500',
folderId : null, folderId: null,
name : 'Photos', name: 'Photos',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'November 01, 2021', createdAt: 'November 01, 2021',
modifiedAt : 'November 01, 2021', modifiedAt: 'November 01, 2021',
size : '3015 MB', size: '3015 MB',
type : 'folder', type: 'folder',
contents : '907 files', contents: '907 files',
description: 'Personal photos; selfies, family, vacation and etc.', description: 'Personal photos; selfies, family, vacation and etc.',
}, },
{ {
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719', id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
folderId : null, folderId: null,
name : 'Work', name: 'Work',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'May 8, 2020', createdAt: 'May 8, 2020',
modifiedAt : 'May 8, 2020', modifiedAt: 'May 8, 2020',
size : '14 MB', size: '14 MB',
type : 'folder', type: 'folder',
contents : '24 files', contents: '24 files',
description: 'Work related files, mainly documents and paychecks.', description: 'Work related files, mainly documents and paychecks.',
}, },
{ {
id : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2', id: '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
folderId : null, folderId: null,
name : 'Contract #123', name: 'Contract #123',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'January 14, 2021', createdAt: 'January 14, 2021',
modifiedAt : 'January 14, 2021', modifiedAt: 'January 14, 2021',
size : '1.2 MB', size: '1.2 MB',
type : 'PDF', type: 'PDF',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7', id: '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
folderId : null, folderId: null,
name : 'Estimated budget', name: 'Estimated budget',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'December 14, 2020', createdAt: 'December 14, 2020',
modifiedAt : 'December 14, 2020', modifiedAt: 'December 14, 2020',
size : '679 KB', size: '679 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '157adb9a-14f8-4559-ac93-8be893c9f80a', id: '157adb9a-14f8-4559-ac93-8be893c9f80a',
folderId : null, folderId: null,
name : 'DMCA notice #42', name: 'DMCA notice #42',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'May 8, 2021', createdAt: 'May 8, 2021',
modifiedAt : 'May 8, 2021', modifiedAt: 'May 8, 2021',
size : '1.5 MB', size: '1.5 MB',
type : 'DOC', type: 'DOC',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '4f64597a-df7e-461c-ad60-f33e5f7e0747', id: '4f64597a-df7e-461c-ad60-f33e5f7e0747',
folderId : null, folderId: null,
name : 'Invoices', name: 'Invoices',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'January 12, 2020', createdAt: 'January 12, 2020',
modifiedAt : 'January 12, 2020', modifiedAt: 'January 12, 2020',
size : '17.8 MB', size: '17.8 MB',
type : 'PDF', type: 'PDF',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : 'e445c445-57b2-4476-8c62-b068e3774b8e', id: 'e445c445-57b2-4476-8c62-b068e3774b8e',
folderId : null, folderId: null,
name : 'Crash logs', name: 'Crash logs',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 8, 2020', createdAt: 'June 8, 2020',
modifiedAt : 'June 8, 2020', modifiedAt: 'June 8, 2020',
size : '11.3 MB', size: '11.3 MB',
type : 'TXT', type: 'TXT',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : 'b482f93e-7847-4614-ad48-b78b78309f81', id: 'b482f93e-7847-4614-ad48-b78b78309f81',
folderId : null, folderId: null,
name : 'System logs', name: 'System logs',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 8, 2020', createdAt: 'June 8, 2020',
modifiedAt : 'June 8, 2020', modifiedAt: 'June 8, 2020',
size : '9.3 MB', size: '9.3 MB',
type : 'TXT', type: 'TXT',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5', id: 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
folderId : null, folderId: null,
name : 'Personal projects', name: 'Personal projects',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'March 18, 2020', createdAt: 'March 18, 2020',
modifiedAt : 'March 18, 2020', modifiedAt: 'March 18, 2020',
size : '4.3 MB', size: '4.3 MB',
type : 'DOC', type: 'DOC',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : 'ae908d59-07da-4dd8-aba0-124e50289295', id: 'ae908d59-07da-4dd8-aba0-124e50289295',
folderId : null, folderId: null,
name : 'Biometric portrait', name: 'Biometric portrait',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'August 29, 2020', createdAt: 'August 29, 2020',
modifiedAt : 'August 29, 2020', modifiedAt: 'August 29, 2020',
size : '4.5 MB', size: '4.5 MB',
type : 'JPG', type: 'JPG',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '4038a5b6-5b1a-432d-907c-e037aeb817a8', id: '4038a5b6-5b1a-432d-907c-e037aeb817a8',
folderId : null, folderId: null,
name : 'Scanned image 20201012-1', name: 'Scanned image 20201012-1',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'September 13, 2020', createdAt: 'September 13, 2020',
modifiedAt : 'September 13, 2020', modifiedAt: 'September 13, 2020',
size : '7.8 MB', size: '7.8 MB',
type : 'JPG', type: 'JPG',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '630d2e9a-d110-47a0-ac03-256073a0f56d', id: '630d2e9a-d110-47a0-ac03-256073a0f56d',
folderId : null, folderId: null,
name : 'Scanned image 20201012-2', name: 'Scanned image 20201012-2',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'September 14, 2020', createdAt: 'September 14, 2020',
modifiedAt : 'September 14, 2020', modifiedAt: 'September 14, 2020',
size : '7.4 MB', size: '7.4 MB',
type : 'JPG', type: 'JPG',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '1417d5ed-b616-4cff-bfab-286677b69d79', id: '1417d5ed-b616-4cff-bfab-286677b69d79',
folderId : null, folderId: null,
name : 'Prices', name: 'Prices',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'April 07, 2020', createdAt: 'April 07, 2020',
modifiedAt : 'April 07, 2020', modifiedAt: 'April 07, 2020',
size : '2.6 MB', size: '2.6 MB',
type : 'DOC', type: 'DOC',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : 'bd2817c7-6751-40dc-b252-b6b5634c0689', id: 'bd2817c7-6751-40dc-b252-b6b5634c0689',
folderId : null, folderId: null,
name : 'Shopping list', name: 'Shopping list',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'March 26, 2021', createdAt: 'March 26, 2021',
modifiedAt : 'March 26, 2021', modifiedAt: 'March 26, 2021',
size : '2.1 MB', size: '2.1 MB',
type : 'DOC', type: 'DOC',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '14fb47c9-6eeb-4070-919c-07c8133285d1', id: '14fb47c9-6eeb-4070-919c-07c8133285d1',
folderId : null, folderId: null,
name : 'Summer budget', name: 'Summer budget',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 02, 2020', createdAt: 'June 02, 2020',
modifiedAt : 'June 02, 2020', modifiedAt: 'June 02, 2020',
size : '943 KB', size: '943 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '894e8514-03d3-4f5e-bb28-f6c092501fae', id: '894e8514-03d3-4f5e-bb28-f6c092501fae',
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
name : 'A personal file', name: 'A personal file',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 02, 2020', createdAt: 'June 02, 2020',
modifiedAt : 'June 02, 2020', modifiedAt: 'June 02, 2020',
size : '943 KB', size: '943 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '74010810-16cf-441d-a1aa-c9fb620fceea', id: '74010810-16cf-441d-a1aa-c9fb620fceea',
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
name : 'A personal folder', name: 'A personal folder',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'November 01, 2021', createdAt: 'November 01, 2021',
modifiedAt : 'November 01, 2021', modifiedAt: 'November 01, 2021',
size : '3015 MB', size: '3015 MB',
type : 'folder', type: 'folder',
contents : '907 files', contents: '907 files',
description: 'Personal photos; selfies, family, vacation and etc.', description: 'Personal photos; selfies, family, vacation and etc.',
}, },
{ {
id : 'a8c73e5a-8114-436d-ab54-d900b50b3762', id: 'a8c73e5a-8114-436d-ab54-d900b50b3762',
folderId : '74010810-16cf-441d-a1aa-c9fb620fceea', folderId: '74010810-16cf-441d-a1aa-c9fb620fceea',
name : 'A personal file within the personal folder', name: 'A personal file within the personal folder',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 02, 2020', createdAt: 'June 02, 2020',
modifiedAt : 'June 02, 2020', modifiedAt: 'June 02, 2020',
size : '943 KB', size: '943 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '12d851a8-4f60-473e-8a59-abe4b422ea99', id: '12d851a8-4f60-473e-8a59-abe4b422ea99',
folderId : '6da8747f-b474-4c9a-9eba-5ef212285500', folderId: '6da8747f-b474-4c9a-9eba-5ef212285500',
name : 'Photos file', name: 'Photos file',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 02, 2020', createdAt: 'June 02, 2020',
modifiedAt : 'June 02, 2020', modifiedAt: 'June 02, 2020',
size : '943 KB', size: '943 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
{ {
id : '2836766d-27e1-4f40-a31a-5a8419105e7e', id: '2836766d-27e1-4f40-a31a-5a8419105e7e',
folderId : 'ed58add1-45a7-41db-887d-3ca7ee7f2719', folderId: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
name : 'Work file', name: 'Work file',
createdBy : 'Brian Hughes', createdBy: 'Brian Hughes',
createdAt : 'June 02, 2020', createdAt: 'June 02, 2020',
modifiedAt : 'June 02, 2020', modifiedAt: 'June 02, 2020',
size : '943 KB', size: '943 KB',
type : 'XLS', type: 'XLS',
contents : null, contents: null,
description: null, description: null,
}, },
]; ];

116
src/app/mock-api/apps/help-center/api.ts
View File

@ -1,11 +1,16 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService } from '@fuse/lib/mock-api'; import { FuseMockApiService } from '@fuse/lib/mock-api';
import { faqCategories as faqCategoriesData, faqs as faqsData, guideCategories as guideCategoriesData, guideContent as guideContentData, guides as guidesData } from 'app/mock-api/apps/help-center/data'; import {
faqCategories as faqCategoriesData,
faqs as faqsData,
guideCategories as guideCategoriesData,
guideContent as guideContentData,
guides as guidesData,
} from 'app/mock-api/apps/help-center/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class HelpCenterMockApi export class HelpCenterMockApi {
{
private _faqCategories: any[] = faqCategoriesData; private _faqCategories: any[] = faqCategoriesData;
private _faqs: any[] = faqsData; private _faqs: any[] = faqsData;
private _guideCategories: any[] = guideCategoriesData; private _guideCategories: any[] = guideCategoriesData;
@ -15,8 +20,7 @@ export class HelpCenterMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -28,15 +32,13 @@ export class HelpCenterMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ FAQs - GET // @ FAQs - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/help-center/faqs') .onGet('api/apps/help-center/faqs')
.reply(({request}) => .reply(({ request }) => {
{
// Get the category slug // Get the category slug
const slug = request.params.get('slug'); const slug = request.params.get('slug');
@ -50,32 +52,31 @@ export class HelpCenterMockApi
const categories = cloneDeep(this._faqCategories); const categories = cloneDeep(this._faqCategories);
// If slug is not provided... // If slug is not provided...
if ( !slug ) if (!slug) {
{
// Go through each category and set the results // Go through each category and set the results
categories.forEach((category) => categories.forEach((category) => {
{ results.push({
results.push( ...category,
{ faqs: faqs.filter(
...category, (faq) => faq.categoryId === category.id
faqs: faqs.filter(faq => faq.categoryId === category.id), ),
}, });
);
}); });
} }
// Otherwise... // Otherwise...
else else {
{
// Find the category by the slug // Find the category by the slug
const category = categories.find(item => item.slug === slug); const category = categories.find(
(item) => item.slug === slug
);
// Set the results // Set the results
results.push( results.push({
{ ...category,
...category, faqs: faqs.filter(
faqs: faqs.filter(faq => faq.categoryId === category.id), (faq) => faq.categoryId === category.id
}, ),
); });
} }
// Return the response // Return the response
@ -87,8 +88,7 @@ export class HelpCenterMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/help-center/guides') .onGet('api/apps/help-center/guides')
.reply(({request}) => .reply(({ request }) => {
{
// Get the slug & limit // Get the slug & limit
const slug = request.params.get('slug'); const slug = request.params.get('slug');
const limit = request.params.get('limit'); const limit = request.params.get('limit');
@ -103,37 +103,40 @@ export class HelpCenterMockApi
const categories = cloneDeep(this._guideCategories); const categories = cloneDeep(this._guideCategories);
// If slug is not provided... // If slug is not provided...
if ( !slug ) if (!slug) {
{
// Parse the limit as an integer // Parse the limit as an integer
const limitNum = parseInt(limit ?? '5', 10); const limitNum = parseInt(limit ?? '5', 10);
// Go through each category and set the results // Go through each category and set the results
categories.forEach((category) => categories.forEach((category) => {
{ results.push({
results.push( ...category,
{ visibleGuides: limitNum,
...category, totalGuides: guides.filter(
visibleGuides: limitNum, (guide) => guide.categoryId === category.id
totalGuides : guides.filter(guide => guide.categoryId === category.id).length, ).length,
guides : guides.filter(guide => guide.categoryId === category.id).slice(0, limitNum), guides: guides
}, .filter(
); (guide) => guide.categoryId === category.id
)
.slice(0, limitNum),
});
}); });
} }
// Otherwise... // Otherwise...
else else {
{
// Find the category by the slug // Find the category by the slug
const category = categories.find(item => item.slug === slug); const category = categories.find(
(item) => item.slug === slug
);
// Set the results // Set the results
results.push( results.push({
{ ...category,
...category, guides: guides.filter(
guides: guides.filter(guide => guide.categoryId === category.id), (guide) => guide.categoryId === category.id
}, ),
); });
} }
// Return the response // Return the response
@ -145,8 +148,7 @@ export class HelpCenterMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/help-center/guide') .onGet('api/apps/help-center/guide')
.reply(({request}) => .reply(({ request }) => {
{
// Get the slugs // Get the slugs
const categorySlug = request.params.get('categorySlug'); const categorySlug = request.params.get('categorySlug');
const guideSlug = request.params.get('guideSlug'); const guideSlug = request.params.get('guideSlug');
@ -157,8 +159,10 @@ export class HelpCenterMockApi
// Prepare the result // Prepare the result
const result = { const result = {
...categories.find(category => category.slug === categorySlug), ...categories.find(
guides: [guides.find(guide => guide.slug === guideSlug)], (category) => category.slug === categorySlug
),
guides: [guides.find((guide) => guide.slug === guideSlug)],
}; };
// Add the content to the guide // Add the content to the guide

457
src/app/mock-api/apps/help-center/data.ts
View File

@ -1,433 +1,460 @@
/* eslint-disable */ /* eslint-disable */
export const faqCategories = [ export const faqCategories = [
{ {
id : '28924eab-97cc-465a-ba21-f232bb95843f', id: '28924eab-97cc-465a-ba21-f232bb95843f',
slug : 'most-asked', slug: 'most-asked',
title: 'Most asked', title: 'Most asked',
}, },
{ {
id : '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', id: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
slug : 'general-inquiries', slug: 'general-inquiries',
title: 'General inquiries', title: 'General inquiries',
}, },
{ {
id : 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', id: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
slug : 'licenses', slug: 'licenses',
title: 'Licenses', title: 'Licenses',
}, },
{ {
id : '71c34043-d89d-4aca-951d-8606c3943c43', id: '71c34043-d89d-4aca-951d-8606c3943c43',
slug : 'payments', slug: 'payments',
title: 'Payments', title: 'Payments',
}, },
{ {
id : 'bea49ee0-26da-46ad-97be-116cd7ab416d', id: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
slug : 'support', slug: 'support',
title: 'Support', title: 'Support',
}, },
]; ];
export const faqs = [ export const faqs = [
// Most asked // Most asked
{ {
id : 'f65d517a-6f69-4c88-81f5-416f47405ce1', id: 'f65d517a-6f69-4c88-81f5-416f47405ce1',
categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
question : 'Is there a 14-days trial?', question: 'Is there a 14-days trial?',
answer : 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.', answer: 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.',
}, },
{ {
id : '0fcece82-1691-4b98-a9b9-b63218f9deef', id: '0fcece82-1691-4b98-a9b9-b63218f9deef',
categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
question : 'What’s the benefits of the Premium Membership?', question: 'What’s the benefits of the Premium Membership?',
answer : 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.', answer: 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.',
}, },
{ {
id : '2e6971cd-49d5-49f1-8cbd-fba5c71e6062', id: '2e6971cd-49d5-49f1-8cbd-fba5c71e6062',
categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
question : 'How much time I will need to learn this app?', question: 'How much time I will need to learn this app?',
answer : 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.', answer: 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.',
}, },
{ {
id : '974f93b8-336f-4eec-b011-9ddb412ee828', id: '974f93b8-336f-4eec-b011-9ddb412ee828',
categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
question : 'Are there any free tutorials available?', question: 'Are there any free tutorials available?',
answer : 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.', answer: 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.',
}, },
{ {
id : '5d877fc7-b881-4527-a6aa-d39d642feb23', id: '5d877fc7-b881-4527-a6aa-d39d642feb23',
categoryId: '28924eab-97cc-465a-ba21-f232bb95843f', categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
question : 'Is there a month-to-month payment option?', question: 'Is there a month-to-month payment option?',
answer : 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.', answer: 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.',
}, },
// General inquiries // General inquiries
{ {
id : '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca', id: '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'How to download your items', question: 'How to download your items',
answer : 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.', answer: 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.',
}, },
{ {
id : '11bd2b9a-85b4-41c9-832c-bd600dfa3a52', id: '11bd2b9a-85b4-41c9-832c-bd600dfa3a52',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'View and download invoices', question: 'View and download invoices',
answer : 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.', answer: 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.',
}, },
{ {
id : 'f55c023a-785e-4f0f-b5b7-47da75224deb', id: 'f55c023a-785e-4f0f-b5b7-47da75224deb',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'I\'ve forgotten my username or password', question: "I've forgotten my username or password",
answer : 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.', answer: 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.',
}, },
{ {
id : 'c577a67d-357a-4b88-96e8-a0ee1fe9162e', id: 'c577a67d-357a-4b88-96e8-a0ee1fe9162e',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'Where is my license code?', question: 'Where is my license code?',
answer : 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.', answer: 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.',
}, },
{ {
id : '1a680c29-7ece-4a80-9709-277ad4da8b4b', id: '1a680c29-7ece-4a80-9709-277ad4da8b4b',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'How to contact an author', question: 'How to contact an author',
answer : 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.', answer: 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.',
}, },
{ {
id : 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688', id: 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688',
categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62', categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
question : 'How does the affiliate program work?', question: 'How does the affiliate program work?',
answer : 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.', answer: 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.',
}, },
// Licenses // Licenses
{ {
id : '3ef176fa-6cba-4536-9f43-540c686a4faa', id: '3ef176fa-6cba-4536-9f43-540c686a4faa',
categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
question : 'How do licenses work for items I bought?', question: 'How do licenses work for items I bought?',
answer : 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.', answer: 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.',
}, },
{ {
id : '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb', id: '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb',
categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
question : 'Do licenses have an expiry date?', question: 'Do licenses have an expiry date?',
answer : 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.', answer: 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.',
}, },
{ {
id : '56c9ed66-a1d2-4803-a160-fba29b826cb4', id: '56c9ed66-a1d2-4803-a160-fba29b826cb4',
categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
question : 'I want to make multiple end products with the same item', question: 'I want to make multiple end products with the same item',
answer : 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.', answer: 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.',
}, },
{ {
id : '21c1b662-33c8-44d7-9530-91896afeeac7', id: '21c1b662-33c8-44d7-9530-91896afeeac7',
categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
question : 'How easy is it to change the license type?', question: 'How easy is it to change the license type?',
answer : 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.', answer: 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.',
}, },
{ {
id : '5fa52c90-82be-41ae-96ec-5fc67cf054a4', id: '5fa52c90-82be-41ae-96ec-5fc67cf054a4',
categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22', categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
question : 'Do I need a Regular License or an Extended License?', question: 'Do I need a Regular License or an Extended License?',
answer : 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.', answer: 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.',
}, },
// Payments // Payments
{ {
id : '81ac908c-35a2-4705-8d75-539863c35c09', id: '81ac908c-35a2-4705-8d75-539863c35c09',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'Common PayPal, Skrill, and credit card issues', question: 'Common PayPal, Skrill, and credit card issues',
answer : 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.', answer: 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.',
}, },
{ {
id : 'b6d8909f-f36d-4885-8848-46b8230d4476', id: 'b6d8909f-f36d-4885-8848-46b8230d4476',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'How do I find my transaction ID?', question: 'How do I find my transaction ID?',
answer : 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.', answer: 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.',
}, },
{ {
id : '9496235d-4d0c-430b-817e-1cba96404f95', id: '9496235d-4d0c-430b-817e-1cba96404f95',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'PayPal disputes And chargebacks', question: 'PayPal disputes And chargebacks',
answer : 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.', answer: 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.',
}, },
{ {
id : '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a', id: '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'Saving your credit card details', question: 'Saving your credit card details',
answer : 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.', answer: 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.',
}, },
{ {
id : '90a3ed58-e13b-40cf-9219-f933bf9c9b8f', id: '90a3ed58-e13b-40cf-9219-f933bf9c9b8f',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'Why do prepaid credits expire?', question: 'Why do prepaid credits expire?',
answer : 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.', answer: 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.',
}, },
{ {
id : '153376ed-691f-4dfd-ae99-e204a49edc44', id: '153376ed-691f-4dfd-ae99-e204a49edc44',
categoryId: '71c34043-d89d-4aca-951d-8606c3943c43', categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
question : 'Why is there a minimum $20 credit?', question: 'Why is there a minimum $20 credit?',
answer : 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.', answer: 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.',
}, },
// Support // Support
{ {
id : '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d', id: '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'What is item support?', question: 'What is item support?',
answer : 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.', answer: 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.',
}, },
{ {
id : '0795a74f-7a84-4edf-8d66-296cdef70003', id: '0795a74f-7a84-4edf-8d66-296cdef70003',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'How to contact an author', question: 'How to contact an author',
answer : 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.', answer: 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.',
}, },
{ {
id : '05532574-c102-4228-89a8-55fff32ec6fc', id: '05532574-c102-4228-89a8-55fff32ec6fc',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'Extending and renewing item support', question: 'Extending and renewing item support',
answer : 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.', answer: 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.',
}, },
{ {
id : 'b3917466-aa51-4293-9d5b-120b0ce6635c', id: 'b3917466-aa51-4293-9d5b-120b0ce6635c',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'Rating or review removal policy', question: 'Rating or review removal policy',
answer : 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.', answer: 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.',
}, },
{ {
id : '2f2fb472-24d4-4a00-aa80-d513fa6c059c', id: '2f2fb472-24d4-4a00-aa80-d513fa6c059c',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'Purchasing supported and unsupported items', question: 'Purchasing supported and unsupported items',
answer : 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.', answer: 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.',
}, },
{ {
id : '2fffd148-7644-466d-8737-7dde88c54154', id: '2fffd148-7644-466d-8737-7dde88c54154',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'I haven\'t received a response from the author', question: "I haven't received a response from the author",
answer : 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.', answer: 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.',
}, },
{ {
id : '24a1034e-b4d6-4a86-a1ea-90516e87e810', id: '24a1034e-b4d6-4a86-a1ea-90516e87e810',
categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d', categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
question : 'Responding to requests outside of support', question: 'Responding to requests outside of support',
answer : 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.', answer: 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.',
}, },
]; ];
export const guideCategories = [ export const guideCategories = [
{ {
id : '0ee72de7-49c0-4880-9e89-b72a4edd6a81', id: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
slug : 'getting-started', slug: 'getting-started',
title: 'Getting Started', title: 'Getting Started',
}, },
{ {
id : '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', id: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'projects', slug: 'projects',
title: 'Projects', title: 'Projects',
}, },
{ {
id : 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', id: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'settings', slug: 'settings',
title: 'Settings', title: 'Settings',
}, },
{ {
id : '7b25b38c-1ab3-4474-8569-65b3ea232add', id: '7b25b38c-1ab3-4474-8569-65b3ea232add',
slug : 'payments', slug: 'payments',
title: 'Payments', title: 'Payments',
}, },
{ {
id : '41fdf071-aec4-49de-9dd4-b4f746596928', id: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'your-account', slug: 'your-account',
title: 'Your Account', title: 'Your Account',
}, },
]; ];
export const guides = [ export const guides = [
// Getting started // Getting started
{ {
id : 'a008ffa3-7b3f-43be-8a8f-dbf5272ed2dd', id: 'a008ffa3-7b3f-43be-8a8f-dbf5272ed2dd',
categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
slug : 'what-is-this-app', slug: 'what-is-this-app',
title : 'What is this app?', title: 'What is this app?',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '7643d388-12ab-4025-a2f1-5045ac7b1c4c', id: '7643d388-12ab-4025-a2f1-5045ac7b1c4c',
categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
slug : 'start-using-the-app', slug: 'start-using-the-app',
title : 'Start using the app', title: 'Start using the app',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '1fecee67-c4b4-413a-b0f2-949dcab73249', id: '1fecee67-c4b4-413a-b0f2-949dcab73249',
categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
slug : 'signing-in-to-the-dashboard', slug: 'signing-in-to-the-dashboard',
title : 'Signing in to the dashboard', title: 'Signing in to the dashboard',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'd2e2ea8f-5298-4ba2-898b-afc60c064bba', id: 'd2e2ea8f-5298-4ba2-898b-afc60c064bba',
categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81', categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
slug : 'navigating-within-the-app', slug: 'navigating-within-the-app',
title : 'Navigating within the app', title: 'Navigating within the app',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
// Projects // Projects
{ {
id : 'f2592886-11b8-4b56-baab-96802c2ed93e', id: 'f2592886-11b8-4b56-baab-96802c2ed93e',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'creating-a-project', slug: 'creating-a-project',
title : 'Creating a project', title: 'Creating a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '9ec3f4b9-a355-4f57-9e93-efa8611cc1c9', id: '9ec3f4b9-a355-4f57-9e93-efa8611cc1c9',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'renaming-a-project', slug: 'renaming-a-project',
title : 'Renaming a project', title: 'Renaming a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '1bc6e7f9-b046-4f4f-9b18-741c9d5429f6', id: '1bc6e7f9-b046-4f4f-9b18-741c9d5429f6',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'displaying-a-project', slug: 'displaying-a-project',
title : 'Displaying a project', title: 'Displaying a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'a005d5f1-938d-45c5-8ed4-d0cf8d02e533', id: 'a005d5f1-938d-45c5-8ed4-d0cf8d02e533',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'deleting-a-project', slug: 'deleting-a-project',
title : 'Deleting a project', title: 'Deleting a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '43837279-dce2-4dc0-beac-30b5ba829f14', id: '43837279-dce2-4dc0-beac-30b5ba829f14',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'changing-the-visibility-of-a-project', slug: 'changing-the-visibility-of-a-project',
title : 'Changing the visibility of a project', title: 'Changing the visibility of a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '4cf5a435-eaa0-463c-8d2b-efde193c7fb3', id: '4cf5a435-eaa0-463c-8d2b-efde193c7fb3',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'adding-media-to-a-project', slug: 'adding-media-to-a-project',
title : 'Adding media to a project', title: 'Adding media to a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'cd3fb87e-e138-4721-9e29-a5c751bfd949', id: 'cd3fb87e-e138-4721-9e29-a5c751bfd949',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'removing-a-media-from-a-project', slug: 'removing-a-media-from-a-project',
title : 'Removing a media from a project', title: 'Removing a media from a project',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'f26205c6-882e-4713-b067-c73758b45551', id: 'f26205c6-882e-4713-b067-c73758b45551',
categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc', categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
slug : 'cropping-a-media', slug: 'cropping-a-media',
title : 'Cropping a media', title: 'Cropping a media',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
// Settings // Settings
{ {
id : '1cbdeaeb-bbf1-4d04-b43d-f37b55e6a229', id: '1cbdeaeb-bbf1-4d04-b43d-f37b55e6a229',
categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'general-settings', slug: 'general-settings',
title : 'General settings', title: 'General settings',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '98de7d4a-2ca2-4d47-bbe6-083ed26467db', id: '98de7d4a-2ca2-4d47-bbe6-083ed26467db',
categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'project-settings', slug: 'project-settings',
title : 'Project settings', title: 'Project settings',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '145f497c-1fdb-47b5-a6c1-31f856403571', id: '145f497c-1fdb-47b5-a6c1-31f856403571',
categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'media-settings', slug: 'media-settings',
title : 'Media settings', title: 'Media settings',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '0a007f59-a5ea-4875-991d-f22d6fd69898', id: '0a007f59-a5ea-4875-991d-f22d6fd69898',
categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'domain-settings', slug: 'domain-settings',
title : 'Domain settings', title: 'Domain settings',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '4707c8eb-31f9-415c-bd07-86f226c75feb', id: '4707c8eb-31f9-415c-bd07-86f226c75feb',
categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b', categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
slug : 'privacy-settings', slug: 'privacy-settings',
title : 'Privacy settings', title: 'Privacy settings',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
// Payments // Payments
{ {
id : 'c771bf0a-1e0c-4b6d-af7e-189e10cc6fb8', id: 'c771bf0a-1e0c-4b6d-af7e-189e10cc6fb8',
categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
slug : 'subscriptions', slug: 'subscriptions',
title : 'Subscriptions', title: 'Subscriptions',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '3d7150d2-feb3-4f20-bd3f-8e525cef77a4', id: '3d7150d2-feb3-4f20-bd3f-8e525cef77a4',
categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
slug : 'discounts', slug: 'discounts',
title : 'Discounts', title: 'Discounts',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '79239bc4-4fb5-428b-b30d-62c5289b061d', id: '79239bc4-4fb5-428b-b30d-62c5289b061d',
categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
slug : 'payment-methods', slug: 'payment-methods',
title : 'Payment methods', title: 'Payment methods',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '8d68c5e6-5404-450c-9d5f-d9800c164041', id: '8d68c5e6-5404-450c-9d5f-d9800c164041',
categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add', categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
slug : 'overdue-payments', slug: 'overdue-payments',
title : 'Overdue payments', title: 'Overdue payments',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
// Your account // Your account
{ {
id : '60df0d4c-dda1-439c-bd44-179c57a7597d', id: '60df0d4c-dda1-439c-bd44-179c57a7597d',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'changing-your-username', slug: 'changing-your-username',
title : 'Changing your username', title: 'Changing your username',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '0a9c3321-1db3-42bc-92b6-7e257368123e', id: '0a9c3321-1db3-42bc-92b6-7e257368123e',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'changing-your-email', slug: 'changing-your-email',
title : 'Changing your email', title: 'Changing your email',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '80ba5106-5f9c-4ed7-b8f3-8544035e3095', id: '80ba5106-5f9c-4ed7-b8f3-8544035e3095',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'changing-your-password', slug: 'changing-your-password',
title : 'Changing your password', title: 'Changing your password',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'db2e97a6-d657-4e9d-9b6c-5f213ea3301c', id: 'db2e97a6-d657-4e9d-9b6c-5f213ea3301c',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'closing-your-account', slug: 'closing-your-account',
title : 'Closing your account', title: 'Closing your account',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : '3374c887-2fb7-4223-9f40-7f2cbbf76795', id: '3374c887-2fb7-4223-9f40-7f2cbbf76795',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'account-limits', slug: 'account-limits',
title : 'Account limits', title: 'Account limits',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
{ {
id : 'cc65f92a-7d46-4557-b15b-6f8f59a60576', id: 'cc65f92a-7d46-4557-b15b-6f8f59a60576',
categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928', categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
slug : 'two-factor-authentication', slug: 'two-factor-authentication',
title : 'Two factor authentication', title: 'Two factor authentication',
subtitle : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', subtitle:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
}, },
]; ];

224
src/app/mock-api/apps/mailbox/api.ts
View File

@ -1,11 +1,16 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { filters as filtersData, folders as foldersData, labels as labelsData, mails as mailsData, settings as settingsData } from 'app/mock-api/apps/mailbox/data'; import {
filters as filtersData,
folders as foldersData,
labels as labelsData,
mails as mailsData,
settings as settingsData,
} from 'app/mock-api/apps/mailbox/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class MailboxMockApi export class MailboxMockApi {
{
private _filters: any[] = filtersData; private _filters: any[] = filtersData;
private _folders: any[] = foldersData; private _folders: any[] = foldersData;
private _mails: any[] = mailsData; private _mails: any[] = mailsData;
@ -15,8 +20,7 @@ export class MailboxMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -28,8 +32,7 @@ export class MailboxMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Settings - GET // @ Settings - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -42,8 +45,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/mailbox/settings') .onPatch('api/apps/mailbox/settings')
.reply(({request}) => .reply(({ request }) => {
{
// Get the settings // Get the settings
const settings = cloneDeep(request.body.settings); const settings = cloneDeep(request.body.settings);
@ -57,54 +59,51 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Folders - GET // @ Folders - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/mailbox/folders').reply(() => {
.onGet('api/apps/mailbox/folders') let count = 0;
.reply(() =>
{
let count = 0;
// Iterate through the folders // Iterate through the folders
this._folders.forEach((folder) => this._folders.forEach((folder) => {
{ // Get the mails of this folder
// Get the mails of this folder const mails = this._mails.filter(
const mails = this._mails.filter(mail => mail.folder === folder.id); (mail) => mail.folder === folder.id
);
// If we are counting the 'sent' or the 'trash' folder... // If we are counting the 'sent' or the 'trash' folder...
if ( folder.slug === 'sent' || folder.slug === 'trash' ) if (folder.slug === 'sent' || folder.slug === 'trash') {
{ // Always set the count to 0
// Always set the count to 0
count = 0;
}
// If we are counting the 'drafts' or the 'spam' folder...
else if ( folder.slug === 'drafts' || folder.slug === 'trash' || folder.slug === 'spam' )
{
// Set the count to the count of all mails
count = mails.length;
}
// Otherwise ('inbox')...
else
{
// Go through the mails and count the unread ones
mails.forEach((mail) =>
{
if ( mail.unread )
{
count++;
}
});
}
// Append the count to the folder mock-api
folder.count = count;
// Reset the count
count = 0; count = 0;
}); }
// If we are counting the 'drafts' or the 'spam' folder...
else if (
folder.slug === 'drafts' ||
folder.slug === 'trash' ||
folder.slug === 'spam'
) {
// Set the count to the count of all mails
count = mails.length;
}
// Otherwise ('inbox')...
else {
// Go through the mails and count the unread ones
mails.forEach((mail) => {
if (mail.unread) {
count++;
}
});
}
// Return the response // Append the count to the folder mock-api
return [200, cloneDeep(this._folders)]; folder.count = count;
// Reset the count
count = 0;
}); });
// Return the response
return [200, cloneDeep(this._folders)];
});
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Filters - GET // @ Filters - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -124,8 +123,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/mailbox/label') .onPost('api/apps/mailbox/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the label // Get the label
const label = cloneDeep(request.body.label); const label = cloneDeep(request.body.label);
@ -133,7 +131,8 @@ export class MailboxMockApi
label.id = FuseMockApiUtils.guid(); label.id = FuseMockApiUtils.guid();
// Generate a slug // Generate a slug
label.slug = label.title.toLowerCase() label.slug = label.title
.toLowerCase()
.replace(/ /g, '-') .replace(/ /g, '-')
.replace(/[-]+/g, '-') .replace(/[-]+/g, '-')
.replace(/[^\w-]+/g, ''); .replace(/[^\w-]+/g, '');
@ -144,17 +143,16 @@ export class MailboxMockApi
let sameSlug; let sameSlug;
let slugSuffix = 1; let slugSuffix = 1;
do do {
{ sameSlug = this._labels.filter(
sameSlug = this._labels.filter(item => item.slug === label.slug); (item) => item.slug === label.slug
);
if ( sameSlug.length > 0 ) if (sameSlug.length > 0) {
{
label.slug = originalSlug + '-' + slugSuffix; label.slug = originalSlug + '-' + slugSuffix;
slugSuffix++; slugSuffix++;
} }
} } while (sameSlug.length > 0);
while ( sameSlug.length > 0 );
// Add the label // Add the label
this._labels.push(label); this._labels.push(label);
@ -168,8 +166,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/mailbox/label') .onPatch('api/apps/mailbox/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and label // Get the id and label
const id = request.body.id; const id = request.body.id;
const label = cloneDeep(request.body.label); const label = cloneDeep(request.body.label);
@ -178,12 +175,11 @@ export class MailboxMockApi
let updatedLabel = null; let updatedLabel = null;
// Find the label and update it // Find the label and update it
this._labels.forEach((item, index, labels) => this._labels.forEach((item, index, labels) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the slug // Update the slug
label.slug = label.title.toLowerCase() label.slug = label.title
.toLowerCase()
.replace(/ /g, '-') .replace(/ /g, '-')
.replace(/[-]+/g, '-') .replace(/[-]+/g, '-')
.replace(/[^\w-]+/g, ''); .replace(/[^\w-]+/g, '');
@ -205,21 +201,21 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/mailbox/label') .onDelete('api/apps/mailbox/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the label and delete it // Find the label and delete it
const index = this._labels.findIndex(item => item.id === id); const index = this._labels.findIndex((item) => item.id === id);
this._labels.splice(index, 1); this._labels.splice(index, 1);
// Get all the mails that have the label // Get all the mails that have the label
const mailsWithLabel = this._mails.filter(mail => mail.labels.indexOf(id) > -1); const mailsWithLabel = this._mails.filter(
(mail) => mail.labels.indexOf(id) > -1
);
// Iterate through them and remove the label // Iterate through them and remove the label
mailsWithLabel.forEach((mail) => mailsWithLabel.forEach((mail) => {
{
mail.labels.splice(mail.labels.indexOf(id), 1); mail.labels.splice(mail.labels.indexOf(id), 1);
}); });
@ -232,8 +228,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/mailbox/mails', 625) .onGet('api/apps/mailbox/mails', 625)
.reply(({request}) => .reply(({ request }) => {
{
// First, decide if mails are requested by folder, filter or label // First, decide if mails are requested by folder, filter or label
const byFolder = request.params.get('folder'); const byFolder = request.params.get('folder');
const byFilter = request.params.get('filter'); const byFilter = request.params.get('filter');
@ -243,30 +238,36 @@ export class MailboxMockApi
let mails: any[] | null = cloneDeep(this._mails); let mails: any[] | null = cloneDeep(this._mails);
// Filter the mails depending on the requested by type // Filter the mails depending on the requested by type
mails = mails.filter((mail) => mails = mails.filter((mail) => {
{ if (byFolder) {
if ( byFolder ) return (
{ mail.folder ===
return mail.folder === this._folders.find(folder => folder.slug === byFolder).id; this._folders.find(
(folder) => folder.slug === byFolder
).id
);
} }
if ( byFilter ) if (byFilter) {
{
return mail[byFilter] === true; return mail[byFilter] === true;
} }
if ( byLabel ) if (byLabel) {
{ return mail.labels.includes(
return mail.labels.includes(this._labels.find(label => label.slug === byLabel).id); this._labels.find((label) => label.slug === byLabel)
.id
);
} }
}); });
// Sort by date - descending // Sort by date - descending
mails.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); mails.sort(
(a, b) =>
new Date(b.date).getTime() - new Date(a.date).getTime()
);
// Figure out the cc and bcc counts // Figure out the cc and bcc counts
mails.forEach((mail) => mails.forEach((mail) => {
{
mail.ccCount = mail.cc ? mail.cc.length : 0; mail.ccCount = mail.cc ? mail.cc.length : 0;
mail.bccCount = mail.bcc ? mail.bcc.length : 0; mail.bccCount = mail.bcc ? mail.bcc.length : 0;
}); });
@ -280,8 +281,11 @@ export class MailboxMockApi
// Calculate pagination details // Calculate pagination details
const begin = (page - 1) * resultsPerPage; const begin = (page - 1) * resultsPerPage;
const end = Math.min((resultsPerPage * page), mailsLength); const end = Math.min(resultsPerPage * page, mailsLength);
const lastPage = Math.max(Math.ceil(mailsLength / resultsPerPage), 1); const lastPage = Math.max(
Math.ceil(mailsLength / resultsPerPage),
1
);
// Prepare the pagination object // Prepare the pagination object
let pagination = {}; let pagination = {};
@ -290,26 +294,23 @@ export class MailboxMockApi
// the last possible page number, return null for // the last possible page number, return null for
// mails but also send the last possible page so // mails but also send the last possible page so
// the app can navigate to there // the app can navigate to there
if ( page > lastPage ) if (page > lastPage) {
{
mails = null; mails = null;
pagination = { pagination = {
lastPage, lastPage,
}; };
} } else {
else
{
// Paginate the results by 10 // Paginate the results by 10
mails = mails.slice(begin, end); mails = mails.slice(begin, end);
// Prepare the pagination mock-api // Prepare the pagination mock-api
pagination = { pagination = {
totalResults : mailsLength, totalResults: mailsLength,
resultsPerPage: resultsPerPage, resultsPerPage: resultsPerPage,
currentPage : page, currentPage: page,
lastPage : lastPage, lastPage: lastPage,
startIndex : begin, startIndex: begin,
endIndex : end - 1, endIndex: end - 1,
}; };
} }
@ -328,8 +329,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/mailbox/mail') .onGet('api/apps/mailbox/mail')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id from the params // Get the id from the params
const id = request.params.get('id'); const id = request.params.get('id');
@ -337,12 +337,9 @@ export class MailboxMockApi
const mails = cloneDeep(this._mails); const mails = cloneDeep(this._mails);
// Find the mail // Find the mail
const mail = mails.find(item => item.id === id); const mail = mails.find((item) => item.id === id);
return [ return [200, mail];
200,
mail,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -350,8 +347,7 @@ export class MailboxMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/mailbox/mail') .onPatch('api/apps/mailbox/mail')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and mail // Get the id and mail
const id = request.body.id; const id = request.body.id;
const mail = cloneDeep(request.body.mail); const mail = cloneDeep(request.body.mail);
@ -360,10 +356,8 @@ export class MailboxMockApi
let updatedMail = null; let updatedMail = null;
// Find the mail and update it // Find the mail and update it
this._mails.forEach((item, index, mails) => this._mails.forEach((item, index, mails) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the mail // Update the mail
mails[index] = assign({}, mails[index], mail); mails[index] = assign({}, mails[index], mail);

3333
src/app/mock-api/apps/mailbox/data.ts
View File

File diff suppressed because it is too large Load Diff

143
src/app/mock-api/apps/notes/api.ts
View File

@ -1,20 +1,21 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiUtils } from '@fuse/lib/mock-api'; import { FuseMockApiUtils } from '@fuse/lib/mock-api';
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data'; import {
labels as labelsData,
notes as notesData,
} from 'app/mock-api/apps/notes/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class NotesMockApi export class NotesMockApi {
{
private _labels: any[] = labelsData; private _labels: any[] = labelsData;
private _notes: any[] = notesData; private _notes: any[] = notesData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -26,38 +27,30 @@ export class NotesMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Labels - GET // @ Labels - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/notes/labels') .onGet('api/apps/notes/labels')
.reply(() => [ .reply(() => [200, cloneDeep(this._labels)]);
200,
cloneDeep(this._labels),
]);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Labels - POST // @ Labels - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/notes/labels') .onPost('api/apps/notes/labels')
.reply(({request}) => .reply(({ request }) => {
{
// Create a new label // Create a new label
const label = { const label = {
id : FuseMockApiUtils.guid(), id: FuseMockApiUtils.guid(),
title: request.body.title, title: request.body.title,
}; };
// Update the labels // Update the labels
this._labels.push(label); this._labels.push(label);
return [ return [200, cloneDeep(this._labels)];
200,
cloneDeep(this._labels),
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -65,16 +58,13 @@ export class NotesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/notes/labels') .onPatch('api/apps/notes/labels')
.reply(({request}) => .reply(({ request }) => {
{
// Get label // Get label
const updatedLabel = request.body.label; const updatedLabel = request.body.label;
// Update the label // Update the label
this._labels = this._labels.map((label) => this._labels = this._labels.map((label) => {
{ if (label.id === updatedLabel.id) {
if ( label.id === updatedLabel.id )
{
return { return {
...label, ...label,
title: updatedLabel.title, title: updatedLabel.title,
@ -84,10 +74,7 @@ export class NotesMockApi
return label; return label;
}); });
return [ return [200, cloneDeep(this._labels)];
200,
cloneDeep(this._labels),
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -95,24 +82,20 @@ export class NotesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/notes/labels') .onDelete('api/apps/notes/labels')
.reply(({request}) => .reply(({ request }) => {
{
// Get label id // Get label id
const id = request.params.get('id'); const id = request.params.get('id');
// Delete the label // Delete the label
this._labels = this._labels.filter(label => label.id !== id); this._labels = this._labels.filter((label) => label.id !== id);
// Go through notes and delete the label // Go through notes and delete the label
this._notes = this._notes.map(note => ({ this._notes = this._notes.map((note) => ({
...note, ...note,
labels: note.labels.filter(item => item !== id), labels: note.labels.filter((item) => item !== id),
})); }));
return [ return [200, cloneDeep(this._labels)];
200,
cloneDeep(this._labels),
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -120,26 +103,22 @@ export class NotesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/notes/tasks') .onPost('api/apps/notes/tasks')
.reply(({request}) => .reply(({ request }) => {
{
// Get note and task // Get note and task
let updatedNote = request.body.note; let updatedNote = request.body.note;
const task = request.body.task; const task = request.body.task;
// Update the note // Update the note
this._notes = this._notes.map((note) => this._notes = this._notes.map((note) => {
{ if (note.id === updatedNote.id) {
if ( note.id === updatedNote.id )
{
// Update the tasks // Update the tasks
if ( !note.tasks ) if (!note.tasks) {
{
note.tasks = []; note.tasks = [];
} }
note.tasks.push({ note.tasks.push({
id : FuseMockApiUtils.guid(), id: FuseMockApiUtils.guid(),
content : task, content: task,
completed: false, completed: false,
}); });
@ -154,44 +133,34 @@ export class NotesMockApi
return note; return note;
}); });
return [ return [200, updatedNote];
200,
updatedNote,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Notes - GET // @ Notes - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/notes/all').reply(() => {
.onGet('api/apps/notes/all') // Clone the labels and notes
.reply(() => const labels = cloneDeep(this._labels);
{ let notes = cloneDeep(this._notes);
// Clone the labels and notes
const labels = cloneDeep(this._labels);
let notes = cloneDeep(this._notes);
// Attach the labels to the notes // Attach the labels to the notes
notes = notes.map(note => ( notes = notes.map((note) => ({
{ ...note,
...note, labels: note.labels.map((labelId) =>
labels: note.labels.map(labelId => labels.find(label => label.id === labelId)), labels.find((label) => label.id === labelId)
} ),
)); }));
return [ return [200, notes];
200, });
notes,
];
});
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Notes - POST // @ Notes - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/notes') .onPost('api/apps/notes')
.reply(({request}) => .reply(({ request }) => {
{
// Get note // Get note
const note = request.body.note; const note = request.body.note;
@ -201,10 +170,7 @@ export class NotesMockApi
// Push the note // Push the note
this._notes.push(note); this._notes.push(note);
return [ return [200, note];
200,
note,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -212,16 +178,13 @@ export class NotesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/notes') .onPatch('api/apps/notes')
.reply(({request}) => .reply(({ request }) => {
{
// Get note // Get note
const updatedNote = request.body.updatedNote; const updatedNote = request.body.updatedNote;
// Update the note // Update the note
this._notes = this._notes.map((note) => this._notes = this._notes.map((note) => {
{ if (note.id === updatedNote.id) {
if ( note.id === updatedNote.id )
{
return { return {
...updatedNote, ...updatedNote,
}; };
@ -230,10 +193,7 @@ export class NotesMockApi
return note; return note;
}); });
return [ return [200, updatedNote];
200,
updatedNote,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -241,16 +201,13 @@ export class NotesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/notes') .onDelete('api/apps/notes')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the note and delete it // Find the note and delete it
this._notes.forEach((item, index) => this._notes.forEach((item, index) => {
{ if (item.id === id) {
if ( item.id === id )
{
this._notes.splice(index, 1); this._notes.splice(index, 1);
} }
}); });

549
src/app/mock-api/apps/notes/data.ts
View File

@ -6,378 +6,445 @@ const now = DateTime.now();
export const labels = [ export const labels = [
{ {
id : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0', id: 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
title: 'Family', title: 'Family',
}, },
{ {
id : 'e2f749f5-41ed-49d0-a92a-1c83d879e371', id: 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
title: 'Work', title: 'Work',
}, },
{ {
id : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', id: 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
title: 'Tasks', title: 'Tasks',
}, },
{ {
id : '6c288794-47eb-4605-8bdf-785b61a449d3', id: '6c288794-47eb-4605-8bdf-785b61a449d3',
title: 'Priority', title: 'Priority',
}, },
{ {
id : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', id: 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
title: 'Personal', title: 'Personal',
}, },
{ {
id : '2dc11344-3507-48e0-83d6-1c047107f052', id: '2dc11344-3507-48e0-83d6-1c047107f052',
title: 'Friends', title: 'Friends',
}, },
]; ];
export const notes = [ export const notes = [
{ {
id : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0', id: '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
title : '', title: '',
content : 'Find a new company name', content: 'Find a new company name',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 10, .set({
minute: 19, hour: 10,
}).minus({day: 98}).toISO(), minute: 19,
})
.minus({ day: 98 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'ced0a1ce-051d-41a3-b080-e2161e4ae621', id: 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
title : '', title: '',
content : 'Send the photos of last summer to John', content: 'Send the photos of last summer to John',
tasks : null, tasks: null,
image : 'images/cards/14-640x480.jpg', image: 'images/cards/14-640x480.jpg',
reminder : null, reminder: null,
labels : [ labels: [
'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
], ],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 15, .set({
minute: 37, hour: 15,
}).minus({day: 80}).toISO(), minute: 37,
})
.minus({ day: 80 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3', id: 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
title : '', title: '',
content : 'Update the design of the theme', content: 'Update the design of the theme',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : ['6c288794-47eb-4605-8bdf-785b61a449d3'], labels: ['6c288794-47eb-4605-8bdf-785b61a449d3'],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 19, .set({
minute: 27, hour: 19,
}).minus({day: 74}).toISO(), minute: 27,
updatedAt: now.set({ })
hour : 15, .minus({ day: 74 })
minute: 36, .toISO(),
}).minus({day: 50}).toISO(), updatedAt: now
.set({
hour: 15,
minute: 36,
})
.minus({ day: 50 })
.toISO(),
}, },
{ {
id : '89861bd4-0144-4bb4-8b39-332ca10371d5', id: '89861bd4-0144-4bb4-8b39-332ca10371d5',
title : '', title: '',
content : 'Theming support for all apps', content: 'Theming support for all apps',
tasks : null, tasks: null,
image : null, image: null,
reminder : now.set({ reminder: now
hour : 12, .set({
minute: 34, hour: 12,
}).plus({day: 50}).toISO(), minute: 34,
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], })
archived : false, .plus({ day: 50 })
createdAt: now.set({ .toISO(),
hour : 12, labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
minute: 34, archived: false,
}).minus({day: 59}).toISO(), createdAt: now
.set({
hour: 12,
minute: 34,
})
.minus({ day: 59 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92', id: 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
title : 'Gift Ideas', title: 'Gift Ideas',
content : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)', content:
tasks : [ "Stephanie's birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)",
tasks: [
{ {
id : '330a924f-fb51-48f6-a374-1532b1dd353d', id: '330a924f-fb51-48f6-a374-1532b1dd353d',
content : 'Scarf', content: 'Scarf',
completed: false, completed: false,
}, },
{ {
id : '781855a6-2ad2-4df4-b0af-c3cb5f302b40', id: '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
content : 'A new bike helmet', content: 'A new bike helmet',
completed: true, completed: true,
}, },
{ {
id : 'bcb8923b-33cd-42c2-9203-170994fa24f5', id: 'bcb8923b-33cd-42c2-9203-170994fa24f5',
content : 'Necklace', content: 'Necklace',
completed: false, completed: false,
}, },
{ {
id : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b', id: '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
content : 'Flowers', content: 'Flowers',
completed: false, completed: false,
}, },
], ],
image : null, image: null,
reminder : null, reminder: null,
labels : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'], labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 16, .set({
minute: 4, hour: 16,
}).minus({day: 47}).toISO(), minute: 4,
})
.minus({ day: 47 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '71d223bb-abab-4183-8919-cd3600a950b4', id: '71d223bb-abab-4183-8919-cd3600a950b4',
title : 'Shopping list', title: 'Shopping list',
content : '', content: '',
tasks : [ tasks: [
{ {
id : 'e3cbc986-641c-4448-bc26-7ecfa0549c22', id: 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
content : 'Bread', content: 'Bread',
completed: true, completed: true,
}, },
{ {
id : '34013111-ab2c-4b2f-9352-d2ae282f57d3', id: '34013111-ab2c-4b2f-9352-d2ae282f57d3',
content : 'Milk', content: 'Milk',
completed: false, completed: false,
}, },
{ {
id : '0fbdea82-cc79-4433-8ee4-54fd542c380d', id: '0fbdea82-cc79-4433-8ee4-54fd542c380d',
content : 'Onions', content: 'Onions',
completed: false, completed: false,
}, },
{ {
id : '66490222-743e-4262-ac91-773fcd98a237', id: '66490222-743e-4262-ac91-773fcd98a237',
content : 'Coffee', content: 'Coffee',
completed: true, completed: true,
}, },
{ {
id : 'ab367215-d06a-48b0-a7b8-e161a63b07bd', id: 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
content : 'Toilet Paper', content: 'Toilet Paper',
completed: true, completed: true,
}, },
], ],
image : null, image: null,
reminder : now.set({ reminder: now
hour : 10, .set({
minute: 44, hour: 10,
}).minus({day: 35}).toISO(), minute: 44,
labels : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'], })
archived : false, .minus({ day: 35 })
createdAt: now.set({ .toISO(),
hour : 10, labels: ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
minute: 44, archived: false,
}).minus({day: 35}).toISO(), createdAt: now
.set({
hour: 10,
minute: 44,
})
.minus({ day: 35 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '11fbeb98-ae5e-41ad-bed6-330886fd7906', id: '11fbeb98-ae5e-41ad-bed6-330886fd7906',
title : 'Keynote Schedule', title: 'Keynote Schedule',
content : '', content: '',
tasks : [ tasks: [
{ {
id : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb', id: '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
content : 'Breakfast', content: 'Breakfast',
completed: true, completed: true,
}, },
{ {
id : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7', id: 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
content : 'Opening ceremony', content: 'Opening ceremony',
completed: true, completed: true,
}, },
{ {
id : '7a721b6d-9d85-48e0-b6c3-f927079af582', id: '7a721b6d-9d85-48e0-b6c3-f927079af582',
content : 'Talk 1: How we did it!', content: 'Talk 1: How we did it!',
completed: true, completed: true,
}, },
{ {
id : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429', id: 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
content : 'Talk 2: How can you do it!', content: 'Talk 2: How can you do it!',
completed: false, completed: false,
}, },
{ {
id : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54', id: 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
content : 'Lunch break', content: 'Lunch break',
completed: false, completed: false,
}, },
], ],
image : null, image: null,
reminder : now.set({ reminder: now
hour : 11, .set({
minute: 27, hour: 11,
}).minus({day: 14}).toISO(), minute: 27,
labels : [ })
.minus({ day: 14 })
.toISO(),
labels: [
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
'e2f749f5-41ed-49d0-a92a-1c83d879e371', 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
], ],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 11, .set({
minute: 27, hour: 11,
}).minus({day: 24}).toISO(), minute: 27,
})
.minus({ day: 24 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a', id: 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
title : '', title: '',
content : 'Organize the dad\'s surprise retirement party', content: "Organize the dad's surprise retirement party",
tasks : null, tasks: null,
image : null, image: null,
reminder : now.set({ reminder: now
hour : 14, .set({
minute: 56, hour: 14,
}).minus({day: 25}).toISO(), minute: 56,
labels : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'], })
archived : false, .minus({ day: 25 })
createdAt: now.set({ .toISO(),
hour : 14, labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
minute: 56, archived: false,
}).minus({day: 20}).toISO(), createdAt: now
.set({
hour: 14,
minute: 56,
})
.minus({ day: 20 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '6bc9f002-1675-417c-93c4-308fba39023e', id: '6bc9f002-1675-417c-93c4-308fba39023e',
title : 'Plan the road trip', title: 'Plan the road trip',
content : '', content: '',
tasks : null, tasks: null,
image : 'images/cards/17-640x480.jpg', image: 'images/cards/17-640x480.jpg',
reminder : null, reminder: null,
labels : [ labels: [
'2dc11344-3507-48e0-83d6-1c047107f052', '2dc11344-3507-48e0-83d6-1c047107f052',
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
], ],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 9, .set({
minute: 32, hour: 9,
}).minus({day: 15}).toISO(), minute: 32,
updatedAt: now.set({ })
hour : 17, .minus({ day: 15 })
minute: 6, .toISO(),
}).minus({day: 12}).toISO(), updatedAt: now
.set({
hour: 17,
minute: 6,
})
.minus({ day: 12 })
.toISO(),
}, },
{ {
id : '15188348-78aa-4ed6-b5c2-028a214ba987', id: '15188348-78aa-4ed6-b5c2-028a214ba987',
title : 'Office Address', title: 'Office Address',
content : '933 8th Street Stamford, CT 06902', content: '933 8th Street Stamford, CT 06902',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 20, .set({
minute: 5, hour: 20,
}).minus({day: 12}).toISO(), minute: 5,
})
.minus({ day: 12 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '1dbfc685-1a0a-4070-9ca7-ed896c523037', id: '1dbfc685-1a0a-4070-9ca7-ed896c523037',
title : 'Tasks', title: 'Tasks',
content : '', content: '',
tasks : [ tasks: [
{ {
id : '004638bf-3ee6-47a5-891c-3be7b9f3df09', id: '004638bf-3ee6-47a5-891c-3be7b9f3df09',
content : 'Wash the dishes', content: 'Wash the dishes',
completed: true, completed: true,
}, },
{ {
id : '86e6820b-1ae3-4c14-a13e-35605a0d654b', id: '86e6820b-1ae3-4c14-a13e-35605a0d654b',
content : 'Walk the dog', content: 'Walk the dog',
completed: false, completed: false,
}, },
], ],
image : null, image: null,
reminder : now.set({ reminder: now
hour : 13, .set({
minute: 43, hour: 13,
}).minus({day: 2}).toISO(), minute: 43,
labels : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'], })
archived : false, .minus({ day: 2 })
createdAt: now.set({ .toISO(),
hour : 13, labels: ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
minute: 43, archived: false,
}).minus({day: 7}).toISO(), createdAt: now
.set({
hour: 13,
minute: 43,
})
.minus({ day: 7 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '49548409-90a3-44d4-9a9a-f5af75aa9a66', id: '49548409-90a3-44d4-9a9a-f5af75aa9a66',
title : '', title: '',
content : 'Dinner with parents', content: 'Dinner with parents',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : [ labels: [
'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0', 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
'6c288794-47eb-4605-8bdf-785b61a449d3', '6c288794-47eb-4605-8bdf-785b61a449d3',
], ],
archived : false, archived: false,
createdAt: now.set({ createdAt: now
hour : 7, .set({
minute: 12, hour: 7,
}).minus({day: 2}).toISO(), minute: 12,
})
.minus({ day: 2 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3', id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
title : '', title: '',
content : 'Re-fill the medicine cabinet', content: 'Re-fill the medicine cabinet',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : [ labels: [
'bbc73458-940b-421c-8d5f-8dcd23a9b0d6', 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
'6c288794-47eb-4605-8bdf-785b61a449d3', '6c288794-47eb-4605-8bdf-785b61a449d3',
], ],
archived : true, archived: true,
createdAt: now.set({ createdAt: now
hour : 17, .set({
minute: 14, hour: 17,
}).minus({day: 100}).toISO(), minute: 14,
})
.minus({ day: 100 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3', id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
title : '', title: '',
content : 'Update the icons pack', content: 'Update the icons pack',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'], labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
archived : true, archived: true,
createdAt: now.set({ createdAt: now
hour : 10, .set({
minute: 29, hour: 10,
}).minus({day: 85}).toISO(), minute: 29,
})
.minus({ day: 85 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
{ {
id : '46214383-f8e7-44da-aa2e-0b685e0c5027', id: '46214383-f8e7-44da-aa2e-0b685e0c5027',
title : 'Team Meeting', title: 'Team Meeting',
content : 'Talk about the future of the web apps', content: 'Talk about the future of the web apps',
tasks : null, tasks: null,
image : null, image: null,
reminder : null, reminder: null,
labels : [ labels: [
'e2f749f5-41ed-49d0-a92a-1c83d879e371', 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
'b1cde9ee-e54d-4142-ad8b-cf55dafc9528', 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
], ],
archived : true, archived: true,
createdAt: now.set({ createdAt: now
hour : 15, .set({
minute: 30, hour: 15,
}).minus({day: 69}).toISO(), minute: 30,
})
.minus({ day: 69 })
.toISO(),
updatedAt: null, updatedAt: null,
}, },
]; ];

254
src/app/mock-api/apps/scrumboard/api.ts
View File

@ -1,11 +1,16 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api'; import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { boards as boardsData, cards as cardsData, labels as labelsData, lists as listsData, members as membersData } from 'app/mock-api/apps/scrumboard/data'; import {
boards as boardsData,
cards as cardsData,
labels as labelsData,
lists as listsData,
members as membersData,
} from 'app/mock-api/apps/scrumboard/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ScrumboardMockApi export class ScrumboardMockApi {
{
// Private // Private
private _boards: any[] = boardsData; private _boards: any[] = boardsData;
private _cards: any[] = cardsData; private _cards: any[] = cardsData;
@ -16,8 +21,7 @@ export class ScrumboardMockApi
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -29,28 +33,27 @@ export class ScrumboardMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Boards - GET // @ Boards - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/scrumboard/boards') .onGet('api/apps/scrumboard/boards')
.reply(({request}) => .reply(({ request }) => {
{
// Clone the boards // Clone the boards
let boards = cloneDeep(this._boards); let boards = cloneDeep(this._boards);
// Go through the boards and inject the members // Go through the boards and inject the members
boards = boards.map(board => ({ boards = boards.map((board) => ({
...board, ...board,
members: board.members.map(boardMember => this._members.find(member => boardMember === member.id)), members: board.members.map((boardMember) =>
this._members.find(
(member) => boardMember === member.id
)
),
})); }));
return [ return [200, boards];
200,
boards,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -58,39 +61,43 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/scrumboard/board') .onGet('api/apps/scrumboard/board')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the board // Find the board
const board = this._boards.find(item => item.id === id); const board = this._boards.find((item) => item.id === id);
// Attach the board lists // Attach the board lists
board.lists = this._lists.filter(item => item.boardId === id).sort((a, b) => a.position - b.position); board.lists = this._lists
.filter((item) => item.boardId === id)
.sort((a, b) => a.position - b.position);
// Grab all cards that belong to this board and attach labels to them // Grab all cards that belong to this board and attach labels to them
let cards = this._cards.filter(item => item.boardId === id); let cards = this._cards.filter((item) => item.boardId === id);
cards = cards.map(card => ( cards = cards.map((card) => ({
{ ...card,
...card, labels: card.labels.map((cardLabelId) =>
labels: card.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId)), this._labels.find((label) => label.id === cardLabelId)
} ),
)); }));
// Attach the board cards into corresponding lists // Attach the board cards into corresponding lists
board.lists.forEach((list, index, array) => board.lists.forEach((list, index, array) => {
{ array[index].cards = cards
array[index].cards = cards.filter(item => item.boardId === id && item.listId === list.id).sort((a, b) => a.position - b.position); .filter(
(item) =>
item.boardId === id && item.listId === list.id
)
.sort((a, b) => a.position - b.position);
}); });
// Attach the board labels // Attach the board labels
board.labels = this._labels.filter(item => item.boardId === id); board.labels = this._labels.filter(
(item) => item.boardId === id
);
return [ return [200, cloneDeep(board)];
200,
cloneDeep(board),
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -98,8 +105,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/scrumboard/board/list') .onPost('api/apps/scrumboard/board/list')
.reply(({request}) => .reply(({ request }) => {
{
// Get the list // Get the list
const newList = cloneDeep(request.body.list); const newList = cloneDeep(request.body.list);
@ -109,10 +115,7 @@ export class ScrumboardMockApi
// Store the new list // Store the new list
this._lists.push(newList); this._lists.push(newList);
return [ return [200, newList];
200,
newList,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -120,8 +123,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/list') .onPatch('api/apps/scrumboard/board/list')
.reply(({request}) => .reply(({ request }) => {
{
// Get the list // Get the list
const list = cloneDeep(request.body.list); const list = cloneDeep(request.body.list);
@ -129,10 +131,8 @@ export class ScrumboardMockApi
let updatedList = null; let updatedList = null;
// Find the list and update it // Find the list and update it
this._lists.forEach((item, index, lists) => this._lists.forEach((item, index, lists) => {
{ if (item.id === list.id) {
if ( item.id === list.id )
{
// Update the list // Update the list
lists[index] = assign({}, lists[index], list); lists[index] = assign({}, lists[index], list);
@ -141,10 +141,7 @@ export class ScrumboardMockApi
} }
}); });
return [ return [200, updatedList];
200,
updatedList,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -152,8 +149,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/lists') .onPatch('api/apps/scrumboard/board/lists')
.reply(({request}) => .reply(({ request }) => {
{
// Get the lists // Get the lists
const lists = cloneDeep(request.body.lists); const lists = cloneDeep(request.body.lists);
@ -161,10 +157,11 @@ export class ScrumboardMockApi
const updatedLists = []; const updatedLists = [];
// Go through the lists // Go through the lists
lists.forEach((item) => lists.forEach((item) => {
{
// Find the list // Find the list
const index = this._lists.findIndex(list => item.id === list.id); const index = this._lists.findIndex(
(list) => item.id === list.id
);
// Update the list // Update the list
this._lists[index] = assign({}, this._lists[index], item); this._lists[index] = assign({}, this._lists[index], item);
@ -173,10 +170,7 @@ export class ScrumboardMockApi
updatedLists.push(item); updatedLists.push(item);
}); });
return [ return [200, updatedLists];
200,
updatedLists,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -184,22 +178,18 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/list') .onDelete('api/apps/scrumboard/board/list')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the list and delete it // Find the list and delete it
const index = this._lists.findIndex(item => item.id === id); const index = this._lists.findIndex((item) => item.id === id);
this._lists.splice(index, 1); this._lists.splice(index, 1);
// Filter out the cards that belonged to the list to delete them // Filter out the cards that belonged to the list to delete them
this._cards = this._cards.filter(card => card.listId !== id); this._cards = this._cards.filter((card) => card.listId !== id);
return [ return [200, true];
200,
true,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -207,8 +197,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPut('api/apps/scrumboard/board/card') .onPut('api/apps/scrumboard/board/card')
.reply(({request}) => .reply(({ request }) => {
{
// Get the card // Get the card
const newCard = cloneDeep(request.body.card); const newCard = cloneDeep(request.body.card);
@ -218,10 +207,7 @@ export class ScrumboardMockApi
// Unshift the new card // Unshift the new card
this._cards.push(newCard); this._cards.push(newCard);
return [ return [200, newCard];
200,
newCard,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -229,8 +215,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/card') .onPatch('api/apps/scrumboard/board/card')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and card // Get the id and card
const id = request.body.id; const id = request.body.id;
const card = cloneDeep(request.body.card); const card = cloneDeep(request.body.card);
@ -239,13 +224,11 @@ export class ScrumboardMockApi
let updatedCard = null; let updatedCard = null;
// Go through the labels and leave only ids of them // Go through the labels and leave only ids of them
card.labels = card.labels.map(itemLabel => itemLabel.id); card.labels = card.labels.map((itemLabel) => itemLabel.id);
// Find the card and update it // Find the card and update it
this._cards.forEach((item, index, cards) => this._cards.forEach((item, index, cards) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the card // Update the card
cards[index] = assign({}, cards[index], card); cards[index] = assign({}, cards[index], card);
@ -255,12 +238,11 @@ export class ScrumboardMockApi
}); });
// Attach the labels of the card // Attach the labels of the card
updatedCard.labels = updatedCard.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId)); updatedCard.labels = updatedCard.labels.map((cardLabelId) =>
this._labels.find((label) => label.id === cardLabelId)
);
return [ return [200, updatedCard];
200,
updatedCard,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -268,8 +250,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/cards') .onPatch('api/apps/scrumboard/board/cards')
.reply(({request}) => .reply(({ request }) => {
{
// Get the cards // Get the cards
const cards = cloneDeep(request.body.cards); const cards = cloneDeep(request.body.cards);
@ -277,28 +258,28 @@ export class ScrumboardMockApi
const updatedCards = []; const updatedCards = [];
// Go through the cards // Go through the cards
cards.forEach((item) => cards.forEach((item) => {
{
// Find the card // Find the card
const index = this._cards.findIndex(card => item.id === card.id); const index = this._cards.findIndex(
(card) => item.id === card.id
);
// Go through the labels and leave only ids of them // Go through the labels and leave only ids of them
item.labels = item.labels.map(itemLabel => itemLabel.id); item.labels = item.labels.map((itemLabel) => itemLabel.id);
// Update the card // Update the card
this._cards[index] = assign({}, this._cards[index], item); this._cards[index] = assign({}, this._cards[index], item);
// Attach the labels of the card // Attach the labels of the card
item.labels = item.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId)); item.labels = item.labels.map((cardLabelId) =>
this._labels.find((label) => label.id === cardLabelId)
);
// Store in the updated cards // Store in the updated cards
updatedCards.push(item); updatedCards.push(item);
}); });
return [ return [200, updatedCards];
200,
updatedCards,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -306,19 +287,15 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/card') .onDelete('api/apps/scrumboard/board/card')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the card and delete it // Find the card and delete it
const index = this._cards.findIndex(item => item.id === id); const index = this._cards.findIndex((item) => item.id === id);
this._cards.splice(index, 1); this._cards.splice(index, 1);
return [ return [200, true];
200,
true,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -326,26 +303,26 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/card/positions') .onPatch('api/apps/scrumboard/board/card/positions')
.reply(({request}) => .reply(({ request }) => {
{
// Get the cards // Get the cards
const cards = request.body.cards; const cards = request.body.cards;
// Go through the cards // Go through the cards
this._cards.forEach((card) => this._cards.forEach((card) => {
{
// Find this card's index within the cards array that comes with the request // Find this card's index within the cards array that comes with the request
// and assign that index as the new position number for the card // and assign that index as the new position number for the card
card.position = cards.findIndex(item => item.id === card.id && item.listId === card.listId && item.boardId === card.boardId); card.position = cards.findIndex(
(item) =>
item.id === card.id &&
item.listId === card.listId &&
item.boardId === card.boardId
);
}); });
// Clone the cards // Clone the cards
const updatedCards = cloneDeep(this._cards); const updatedCards = cloneDeep(this._cards);
return [ return [200, updatedCards];
200,
updatedCards,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -353,18 +330,16 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/scrumboard/board/labels') .onGet('api/apps/scrumboard/board/labels')
.reply(({request}) => .reply(({ request }) => {
{
// Get the board id // Get the board id
const boardId = request.params.get('boardId'); const boardId = request.params.get('boardId');
// Filter the labels // Filter the labels
const labels = this._labels.filter(item => item.boardId === boardId); const labels = this._labels.filter(
(item) => item.boardId === boardId
);
return [ return [200, cloneDeep(labels)];
200,
cloneDeep(labels),
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -372,8 +347,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPut('api/apps/scrumboard/board/label') .onPut('api/apps/scrumboard/board/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the label // Get the label
const newLabel = cloneDeep(request.body.label); const newLabel = cloneDeep(request.body.label);
@ -383,10 +357,7 @@ export class ScrumboardMockApi
// Unshift the new label // Unshift the new label
this._labels.unshift(newLabel); this._labels.unshift(newLabel);
return [ return [200, newLabel];
200,
newLabel,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -394,8 +365,7 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/scrumboard/board/label') .onPatch('api/apps/scrumboard/board/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and label // Get the id and label
const id = request.body.id; const id = request.body.id;
const label = cloneDeep(request.body.label); const label = cloneDeep(request.body.label);
@ -404,10 +374,8 @@ export class ScrumboardMockApi
let updatedLabel = null; let updatedLabel = null;
// Find the label and update it // Find the label and update it
this._labels.forEach((item, index, labels) => this._labels.forEach((item, index, labels) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the label // Update the label
labels[index] = assign({}, labels[index], label); labels[index] = assign({}, labels[index], label);
@ -416,10 +384,7 @@ export class ScrumboardMockApi
} }
}); });
return [ return [200, updatedLabel];
200,
updatedLabel,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -427,28 +392,25 @@ export class ScrumboardMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/scrumboard/board/label') .onDelete('api/apps/scrumboard/board/label')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the label and delete it // Find the label and delete it
const index = this._labels.findIndex(item => item.id === id); const index = this._labels.findIndex((item) => item.id === id);
this._labels.splice(index, 1); this._labels.splice(index, 1);
// Get the cards that have the label // Get the cards that have the label
const cardsWithLabel = this._cards.filter(card => card.labels.indexOf(id) > -1); const cardsWithLabel = this._cards.filter(
(card) => card.labels.indexOf(id) > -1
);
// Iterate through them and remove the label // Iterate through them and remove the label
cardsWithLabel.forEach((card) => cardsWithLabel.forEach((card) => {
{
card.tags.splice(card.tags.indexOf(id), 1); card.tags.splice(card.tags.indexOf(id), 1);
}); });
return [ return [200, true];
200,
true,
];
}); });
} }
} }

329
src/app/mock-api/apps/scrumboard/data.ts
View File

@ -6,24 +6,24 @@ const now = DateTime.now();
export const boards = [ export const boards = [
{ {
id : '2c82225f-2a6c-45d3-b18a-1132712a4234', id: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Admin Dashboard', title: 'Admin Dashboard',
description : 'Roadmap for the new project', description: 'Roadmap for the new project',
icon : 'heroicons_outline:rectangle-group', icon: 'heroicons_outline:rectangle-group',
lastActivity: now.startOf('day').minus({day: 1}).toISO(), lastActivity: now.startOf('day').minus({ day: 1 }).toISO(),
members : [ members: [
'9c510cf3-460d-4a8c-b3be-bcc3db578c08', '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
'baa88231-0ee6-4028-96d5-7f187e0f4cd5', 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
'18bb18f3-ea7d-4465-8913-e8c9adf6f568', '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
], ],
}, },
{ {
id : '0168b519-3dab-4b46-b2ea-0e678e38a583', id: '0168b519-3dab-4b46-b2ea-0e678e38a583',
title : 'Weekly Planning', title: 'Weekly Planning',
description : 'Job related tasks for the week', description: 'Job related tasks for the week',
icon : 'heroicons_outline:calendar', icon: 'heroicons_outline:calendar',
lastActivity: now.startOf('day').minus({day: 2}).toISO(), lastActivity: now.startOf('day').minus({ day: 2 }).toISO(),
members : [ members: [
'79ebb9ee-1e57-4706-810c-03edaec8f56d', '79ebb9ee-1e57-4706-810c-03edaec8f56d',
'319ecb5b-f99c-4ee4-81b2-3aeffd1d4735', '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
'5bf7ed5b-8b04-46b7-b364-005958b7d82e', '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
@ -35,303 +35,284 @@ export const boards = [
], ],
}, },
{ {
id : 'bc7db965-3c4f-4233-abf5-69bd70c3c175', id: 'bc7db965-3c4f-4233-abf5-69bd70c3c175',
title : 'Personal Tasks', title: 'Personal Tasks',
description : 'Personal tasks around the house', description: 'Personal tasks around the house',
icon : 'heroicons_outline:home', icon: 'heroicons_outline:home',
lastActivity: now.startOf('day').minus({week: 1}).toISO(), lastActivity: now.startOf('day').minus({ week: 1 }).toISO(),
members : [ members: ['6f6a1c34-390b-4b2e-97c8-ff0e0d787839'],
'6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
],
}, },
]; ];
export const lists = [ export const lists = [
{ {
id : 'a2df7786-519c-485a-a85f-c09a61cc5f37', id: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 65536, position: 65536,
title : 'To do', title: 'To do',
}, },
{ {
id : '83ca2a34-65af-49c0-a42e-94a34003fcf2', id: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 131072, position: 131072,
title : 'In progress', title: 'In progress',
}, },
{ {
id : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab', id: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 196608, position: 196608,
title : 'In review', title: 'In review',
}, },
{ {
id : '34cbef38-5687-4813-bd66-141a6df6d832', id: '34cbef38-5687-4813-bd66-141a6df6d832',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
position: 262144, position: 262144,
title : 'Completed', title: 'Completed',
}, },
]; ];
export const cards = [ export const cards = [
{ {
id : 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d', id: 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37', listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position : 65536, position: 65536,
title : 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards', title: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards',
description: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.', description:
labels : [ 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.',
labels: [
'e0175175-2784-48f1-a519-a1d2e397c9b3', 'e0175175-2784-48f1-a519-a1d2e397c9b3',
'51779701-818a-4a53-bc16-137c3bd7a564', '51779701-818a-4a53-bc16-137c3bd7a564',
'e8364d69-9595-46ce-a0f9-ce428632a0ac', 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
'caff9c9b-a198-4564-b1f4-8b3df1d345bb', 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
'f9eeb436-13a3-4208-a239-0d555960a567', 'f9eeb436-13a3-4208-a239-0d555960a567',
], ],
dueDate : now.startOf('day').minus({day: 10}).toISO(), dueDate: now.startOf('day').minus({ day: 10 }).toISO(),
}, },
{ {
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719', id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37', listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 131072, position: 131072,
title : 'Do a research about most needed admin applications', title: 'Do a research about most needed admin applications',
labels : [ labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
'e0175175-2784-48f1-a519-a1d2e397c9b3', dueDate: null,
],
dueDate : null,
}, },
{ {
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68', id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37', listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 196608, position: 196608,
title : 'Implement the Project dashboard', title: 'Implement the Project dashboard',
labels : [ labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
'caff9c9b-a198-4564-b1f4-8b3df1d345bb', dueDate: now.startOf('day').toISO(),
],
dueDate : now.startOf('day').toISO(),
}, },
{ {
id : '6da8747f-b474-4c9a-9eba-5ef212285500', id: '6da8747f-b474-4c9a-9eba-5ef212285500',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a2df7786-519c-485a-a85f-c09a61cc5f37', listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
position: 262144, position: 262144,
title : 'Implement the Analytics dashboard', title: 'Implement the Analytics dashboard',
labels : [ labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
'caff9c9b-a198-4564-b1f4-8b3df1d345bb', dueDate: now.startOf('day').minus({ day: 1 }).toISO(),
],
dueDate : now.startOf('day').minus({day: 1}).toISO(),
}, },
{ {
id : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1', id: '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2', listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
position: 65536, position: 65536,
title : 'Analytics dashboard design', title: 'Analytics dashboard design',
labels : [ labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'],
'e8364d69-9595-46ce-a0f9-ce428632a0ac', dueDate: null,
],
dueDate : null,
}, },
{ {
id : 'fc16f7d8-957d-43ed-ba85-20f99b5ce011', id: 'fc16f7d8-957d-43ed-ba85-20f99b5ce011',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '83ca2a34-65af-49c0-a42e-94a34003fcf2', listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
position: 131072, position: 131072,
title : 'Project dashboard design', title: 'Project dashboard design',
labels : [ labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'],
'e8364d69-9595-46ce-a0f9-ce428632a0ac', dueDate: null,
],
dueDate : null,
}, },
{ {
id : 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331', id: 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab', listId: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
position: 65536, position: 65536,
title : 'JWT Auth implementation', title: 'JWT Auth implementation',
labels : [ labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
'caff9c9b-a198-4564-b1f4-8b3df1d345bb', dueDate: null,
],
dueDate : null,
}, },
{ {
id : '532c2747-be79-464a-9897-6a682bf22b64', id: '532c2747-be79-464a-9897-6a682bf22b64',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832', listId: '34cbef38-5687-4813-bd66-141a6df6d832',
position: 65536, position: 65536,
title : 'Create low fidelity wireframes', title: 'Create low fidelity wireframes',
labels : [], labels: [],
dueDate : null, dueDate: null,
}, },
{ {
id : '1d908efe-c830-476e-9e87-d06e30d89bc2', id: '1d908efe-c830-476e-9e87-d06e30d89bc2',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832', listId: '34cbef38-5687-4813-bd66-141a6df6d832',
position: 131072, position: 131072,
title : 'Create high fidelity wireframes', title: 'Create high fidelity wireframes',
labels : [], labels: [],
dueDate : now.startOf('day').minus({day: 10}).toISO(), dueDate: now.startOf('day').minus({ day: 10 }).toISO(),
}, },
{ {
id : 'b1da11ed-7896-4826-962d-4b7b718896d4', id: 'b1da11ed-7896-4826-962d-4b7b718896d4',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832', listId: '34cbef38-5687-4813-bd66-141a6df6d832',
position: 196608, position: 196608,
title : 'Collect information about most used admin layouts', title: 'Collect information about most used admin layouts',
labels : [ labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
'e0175175-2784-48f1-a519-a1d2e397c9b3', dueDate: null,
],
dueDate : null,
}, },
{ {
id : '3b7f3ceb-107f-42bc-a204-c268c9a56cb4', id: '3b7f3ceb-107f-42bc-a204-c268c9a56cb4',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832', listId: '34cbef38-5687-4813-bd66-141a6df6d832',
position: 262144, position: 262144,
title : 'Do a research about latest UI trends', title: 'Do a research about latest UI trends',
labels : [ labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
'e0175175-2784-48f1-a519-a1d2e397c9b3', dueDate: null,
],
dueDate : null,
}, },
{ {
id : 'cd7f01c5-a941-4076-8cef-37da0354e643', id: 'cd7f01c5-a941-4076-8cef-37da0354e643',
boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
listId : '34cbef38-5687-4813-bd66-141a6df6d832', listId: '34cbef38-5687-4813-bd66-141a6df6d832',
position: 327680, position: 327680,
title : 'Learn more about UX', title: 'Learn more about UX',
labels : [ labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
'e0175175-2784-48f1-a519-a1d2e397c9b3', dueDate: null,
],
dueDate : null,
}, },
]; ];
export const labels = [ export const labels = [
{ {
id : 'e0175175-2784-48f1-a519-a1d2e397c9b3', id: 'e0175175-2784-48f1-a519-a1d2e397c9b3',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Research', title: 'Research',
}, },
{ {
id : '51779701-818a-4a53-bc16-137c3bd7a564', id: '51779701-818a-4a53-bc16-137c3bd7a564',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Wireframing', title: 'Wireframing',
}, },
{ {
id : 'e8364d69-9595-46ce-a0f9-ce428632a0ac', id: 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Design', title: 'Design',
}, },
{ {
id : 'caff9c9b-a198-4564-b1f4-8b3df1d345bb', id: 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Development', title: 'Development',
}, },
{ {
id : 'f9eeb436-13a3-4208-a239-0d555960a567', id: 'f9eeb436-13a3-4208-a239-0d555960a567',
boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234', boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
title : 'Bug', title: 'Bug',
}, },
]; ];
export const members = [ export const members = [
{ {
id : '6f6a1c34-390b-4b2e-97c8-ff0e0d787839', id: '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
name : 'Angeline Vinson', name: 'Angeline Vinson',
avatar: 'images/avatars/female-01.jpg', avatar: 'images/avatars/female-01.jpg',
}, },
{ {
id : '4ce4be48-c8c0-468d-9df8-ddfda14cdb37', id: '4ce4be48-c8c0-468d-9df8-ddfda14cdb37',
name : 'Roseann Greer', name: 'Roseann Greer',
avatar: 'images/avatars/female-02.jpg', avatar: 'images/avatars/female-02.jpg',
}, },
{ {
id : '9c510cf3-460d-4a8c-b3be-bcc3db578c08', id: '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
name : 'Lorraine Barnett', name: 'Lorraine Barnett',
avatar: 'images/avatars/female-03.jpg', avatar: 'images/avatars/female-03.jpg',
}, },
{ {
id : '7ec887d9-b01a-4057-b5dc-aaed18637cc1', id: '7ec887d9-b01a-4057-b5dc-aaed18637cc1',
name : 'Middleton Bradford', name: 'Middleton Bradford',
avatar: 'images/avatars/male-01.jpg', avatar: 'images/avatars/male-01.jpg',
}, },
{ {
id : '74975a82-addb-427b-9b43-4d2e03331b68', id: '74975a82-addb-427b-9b43-4d2e03331b68',
name : 'Sue Hays', name: 'Sue Hays',
avatar: 'images/avatars/female-04.jpg', avatar: 'images/avatars/female-04.jpg',
}, },
{ {
id : '18bb18f3-ea7d-4465-8913-e8c9adf6f568', id: '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
name : 'Keith Neal', name: 'Keith Neal',
avatar: 'images/avatars/male-02.jpg', avatar: 'images/avatars/male-02.jpg',
}, },
{ {
id : 'baa88231-0ee6-4028-96d5-7f187e0f4cd5', id: 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
name : 'Wilkins Gilmore', name: 'Wilkins Gilmore',
avatar: 'images/avatars/male-03.jpg', avatar: 'images/avatars/male-03.jpg',
}, },
{ {
id : '0d1eb062-13d5-4286-b8d4-e0bea15f3d56', id: '0d1eb062-13d5-4286-b8d4-e0bea15f3d56',
name : 'Baldwin Stein', name: 'Baldwin Stein',
avatar: 'images/avatars/male-04.jpg', avatar: 'images/avatars/male-04.jpg',
}, },
{ {
id : '5bf7ed5b-8b04-46b7-b364-005958b7d82e', id: '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
name : 'Bobbie Cohen', name: 'Bobbie Cohen',
avatar: 'images/avatars/female-05.jpg', avatar: 'images/avatars/female-05.jpg',
}, },
{ {
id : '93b1a72b-e2db-4f77-82d6-272047433508', id: '93b1a72b-e2db-4f77-82d6-272047433508',
name : 'Melody Peters', name: 'Melody Peters',
avatar: 'images/avatars/female-06.jpg', avatar: 'images/avatars/female-06.jpg',
}, },
{ {
id : 'd1f612e6-3e3b-481f-a8a9-f917e243b06e', id: 'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
name : 'Marquez Ryan', name: 'Marquez Ryan',
avatar: 'images/avatars/male-05.jpg', avatar: 'images/avatars/male-05.jpg',
}, },
{ {
id : '79ebb9ee-1e57-4706-810c-03edaec8f56d', id: '79ebb9ee-1e57-4706-810c-03edaec8f56d',
name : 'Roberta Briggs', name: 'Roberta Briggs',
avatar: 'images/avatars/female-07.jpg', avatar: 'images/avatars/female-07.jpg',
}, },
{ {
id : '6726643d-e8dc-42fa-83a6-b4ec06921a6b', id: '6726643d-e8dc-42fa-83a6-b4ec06921a6b',
name : 'Robbie Buckley', name: 'Robbie Buckley',
avatar: 'images/avatars/female-08.jpg', avatar: 'images/avatars/female-08.jpg',
}, },
{ {
id : '8af617d7-898e-4992-beda-d5ac1d7ceda4', id: '8af617d7-898e-4992-beda-d5ac1d7ceda4',
name : 'Garcia Whitney', name: 'Garcia Whitney',
avatar: 'images/avatars/male-06.jpg', avatar: 'images/avatars/male-06.jpg',
}, },
{ {
id : 'bcff44c4-9943-4adc-9049-08b1d922a658', id: 'bcff44c4-9943-4adc-9049-08b1d922a658',
name : 'Spencer Pate', name: 'Spencer Pate',
avatar: 'images/avatars/male-07.jpg', avatar: 'images/avatars/male-07.jpg',
}, },
{ {
id : '54160ca2-29c9-4475-88a1-31a9307ad913', id: '54160ca2-29c9-4475-88a1-31a9307ad913',
name : 'Monica Mcdaniel', name: 'Monica Mcdaniel',
avatar: 'images/avatars/female-09.jpg', avatar: 'images/avatars/female-09.jpg',
}, },
{ {
id : '51286603-3a43-444e-9242-f51fe57d5363', id: '51286603-3a43-444e-9242-f51fe57d5363',
name : 'Mcmillan Durham', name: 'Mcmillan Durham',
avatar: 'images/avatars/male-08.jpg', avatar: 'images/avatars/male-08.jpg',
}, },
{ {
id : '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735', id: '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
name : 'Jeoine Hebert', name: 'Jeoine Hebert',
avatar: 'images/avatars/female-10.jpg', avatar: 'images/avatars/female-10.jpg',
}, },
{ {
id : 'fe0fec0d-002b-406f-87ab-47eb87ba577c', id: 'fe0fec0d-002b-406f-87ab-47eb87ba577c',
name : 'Susanna Kline', name: 'Susanna Kline',
avatar: 'images/avatars/female-11.jpg', avatar: 'images/avatars/female-11.jpg',
}, },
{ {
id : '23a47d2c-c6cb-40cc-af87-e946a9df5028', id: '23a47d2c-c6cb-40cc-af87-e946a9df5028',
name : 'Suzette Singleton', name: 'Suzette Singleton',
avatar: 'images/avatars/female-12.jpg', avatar: 'images/avatars/female-12.jpg',
}, },
]; ];

196
src/app/mock-api/apps/tasks/api.ts
View File

@ -1,20 +1,21 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service'; import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
import { FuseMockApiUtils } from '@fuse/lib/mock-api/mock-api.utils'; import { FuseMockApiUtils } from '@fuse/lib/mock-api/mock-api.utils';
import { tags as tagsData, tasks as tasksData } from 'app/mock-api/apps/tasks/data'; import {
tags as tagsData,
tasks as tasksData,
} from 'app/mock-api/apps/tasks/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class TasksMockApi export class TasksMockApi {
{
private _tags: any[] = tagsData; private _tags: any[] = tagsData;
private _tasks: any[] = tasksData; private _tasks: any[] = tasksData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -26,25 +27,20 @@ export class TasksMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Tags - GET // @ Tags - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/tasks/tags') .onGet('api/apps/tasks/tags')
.reply(() => [ .reply(() => [200, cloneDeep(this._tags)]);
200,
cloneDeep(this._tags),
]);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Tags - POST // @ Tags - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/tasks/tag') .onPost('api/apps/tasks/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the tag // Get the tag
const newTag = cloneDeep(request.body.tag); const newTag = cloneDeep(request.body.tag);
@ -54,10 +50,7 @@ export class TasksMockApi
// Unshift the new tag // Unshift the new tag
this._tags.unshift(newTag); this._tags.unshift(newTag);
return [ return [200, newTag];
200,
newTag,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -65,8 +58,7 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/tasks/tag') .onPatch('api/apps/tasks/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and tag // Get the id and tag
const id = request.body.id; const id = request.body.id;
const tag = cloneDeep(request.body.tag); const tag = cloneDeep(request.body.tag);
@ -75,10 +67,8 @@ export class TasksMockApi
let updatedTag = null; let updatedTag = null;
// Find the tag and update it // Find the tag and update it
this._tags.forEach((item, index, tags) => this._tags.forEach((item, index, tags) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the tag // Update the tag
tags[index] = assign({}, tags[index], tag); tags[index] = assign({}, tags[index], tag);
@ -87,10 +77,7 @@ export class TasksMockApi
} }
}); });
return [ return [200, updatedTag];
200,
updatedTag,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -98,56 +85,46 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/tasks/tag') .onDelete('api/apps/tasks/tag')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the tag and delete it // Find the tag and delete it
const index = this._tags.findIndex(item => item.id === id); const index = this._tags.findIndex((item) => item.id === id);
this._tags.splice(index, 1); this._tags.splice(index, 1);
// Get the tasks that have the tag // Get the tasks that have the tag
const tasksWithTag = this._tasks.filter(task => task.tags.indexOf(id) > -1); const tasksWithTag = this._tasks.filter(
(task) => task.tags.indexOf(id) > -1
);
// Iterate through them and remove the tag // Iterate through them and remove the tag
tasksWithTag.forEach((task) => tasksWithTag.forEach((task) => {
{
task.tags.splice(task.tags.indexOf(id), 1); task.tags.splice(task.tags.indexOf(id), 1);
}); });
return [ return [200, true];
200,
true,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Tasks - GET // @ Tasks - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/apps/tasks/all').reply(() => {
.onGet('api/apps/tasks/all') // Clone the tasks
.reply(() => const tasks = cloneDeep(this._tasks);
{
// Clone the tasks
const tasks = cloneDeep(this._tasks);
// Sort the tasks by order // Sort the tasks by order
tasks.sort((a, b) => a.order - b.order); tasks.sort((a, b) => a.order - b.order);
return [ return [200, tasks];
200, });
tasks,
];
});
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Tasks Search - GET // @ Tasks Search - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/tasks/search') .onGet('api/apps/tasks/search')
.reply(({request}) => .reply(({ request }) => {
{
// Get the search query // Get the search query
const query = request.params.get('query'); const query = request.params.get('query');
@ -155,19 +132,34 @@ export class TasksMockApi
let results; let results;
// If the query exists... // If the query exists...
if ( query ) if (query) {
{
// Clone the tasks // Clone the tasks
let tasks = cloneDeep(this._tasks); let tasks = cloneDeep(this._tasks);
// Filter the tasks // Filter the tasks
tasks = tasks.filter(task => task.title && task.title.toLowerCase().includes(query.toLowerCase()) || task.notes && task.notes.toLowerCase() tasks = tasks.filter(
.includes(query.toLowerCase())); (task) =>
(task.title &&
task.title
.toLowerCase()
.includes(query.toLowerCase())) ||
(task.notes &&
task.notes
.toLowerCase()
.includes(query.toLowerCase()))
);
// Mark the found chars // Mark the found chars
tasks.forEach((task) => tasks.forEach((task) => {
{ const re = new RegExp(
const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig'); '(' +
query.replace(
/[-\/\\^$*+?.()|[\]{}]/g,
'\\$&'
) +
')',
'ig'
);
task.title = task.title.replace(re, '<mark>$1</mark>'); task.title = task.title.replace(re, '<mark>$1</mark>');
}); });
@ -175,15 +167,11 @@ export class TasksMockApi
results = tasks; results = tasks;
} }
// Otherwise, set the results to null // Otherwise, set the results to null
else else {
{
results = null; results = null;
} }
return [ return [200, results];
200,
results,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -191,26 +179,23 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/tasks/order') .onPatch('api/apps/tasks/order')
.reply(({request}) => .reply(({ request }) => {
{
// Get the tasks // Get the tasks
const tasks = request.body.tasks; const tasks = request.body.tasks;
// Go through the tasks // Go through the tasks
this._tasks.forEach((task) => this._tasks.forEach((task) => {
{
// Find this task's index within the tasks array that comes with the request // Find this task's index within the tasks array that comes with the request
// and assign that index as the new order number for the task // and assign that index as the new order number for the task
task.order = tasks.findIndex((item: any) => item.id === task.id); task.order = tasks.findIndex(
(item: any) => item.id === task.id
);
}); });
// Clone the tasks // Clone the tasks
const updatedTasks = cloneDeep(this._tasks); const updatedTasks = cloneDeep(this._tasks);
return [ return [200, updatedTasks];
200,
updatedTasks,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -218,8 +203,7 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/apps/tasks/task') .onGet('api/apps/tasks/task')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id from the params // Get the id from the params
const id = request.params.get('id'); const id = request.params.get('id');
@ -227,12 +211,9 @@ export class TasksMockApi
const tasks = cloneDeep(this._tasks); const tasks = cloneDeep(this._tasks);
// Find the task // Find the task
const task = tasks.find(item => item.id === id); const task = tasks.find((item) => item.id === id);
return [ return [200, task];
200,
task,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -240,34 +221,29 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/apps/tasks/task') .onPost('api/apps/tasks/task')
.reply(({request}) => .reply(({ request }) => {
{
// Generate a new task // Generate a new task
const newTask = { const newTask = {
id : FuseMockApiUtils.guid(), id: FuseMockApiUtils.guid(),
type : request.body.type, type: request.body.type,
title : '', title: '',
notes : null, notes: null,
completed: false, completed: false,
dueDate : null, dueDate: null,
priority : 1, priority: 1,
tags : [], tags: [],
order : 0, order: 0,
}; };
// Unshift the new task // Unshift the new task
this._tasks.unshift(newTask); this._tasks.unshift(newTask);
// Go through the tasks and update their order numbers // Go through the tasks and update their order numbers
this._tasks.forEach((task, index) => this._tasks.forEach((task, index) => {
{
task.order = index; task.order = index;
}); });
return [ return [200, newTask];
200,
newTask,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -275,8 +251,7 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/apps/tasks/task') .onPatch('api/apps/tasks/task')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and task // Get the id and task
const id = request.body.id; const id = request.body.id;
const task = cloneDeep(request.body.task); const task = cloneDeep(request.body.task);
@ -285,10 +260,8 @@ export class TasksMockApi
let updatedTask = null; let updatedTask = null;
// Find the task and update it // Find the task and update it
this._tasks.forEach((item, index, tasks) => this._tasks.forEach((item, index, tasks) => {
{ if (item.id === id) {
if ( item.id === id )
{
// Update the task // Update the task
tasks[index] = assign({}, tasks[index], task); tasks[index] = assign({}, tasks[index], task);
@ -297,10 +270,7 @@ export class TasksMockApi
} }
}); });
return [ return [200, updatedTask];
200,
updatedTask,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -308,19 +278,15 @@ export class TasksMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/apps/tasks/task') .onDelete('api/apps/tasks/task')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
// Find the task and delete it // Find the task and delete it
const index = this._tasks.findIndex(item => item.id === id); const index = this._tasks.findIndex((item) => item.id === id);
this._tasks.splice(index, 1); this._tasks.splice(index, 1);
return [ return [200, true];
200,
true,
];
}); });
} }
} }

1004
src/app/mock-api/apps/tasks/data.ts
View File

File diff suppressed because it is too large Load Diff

105
src/app/mock-api/common/auth/api.ts
View File

@ -6,19 +6,18 @@ import Utf8 from 'crypto-js/enc-utf8';
import HmacSHA256 from 'crypto-js/hmac-sha256'; import HmacSHA256 from 'crypto-js/hmac-sha256';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class AuthMockApi export class AuthMockApi {
{
private readonly _secret: any; private readonly _secret: any;
private _user: any = userData; private _user: any = userData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Set the mock-api // Set the mock-api
this._secret = 'YOUR_VERY_CONFIDENTIAL_SECRET_FOR_SIGNING_JWT_TOKENS!!!'; this._secret =
'YOUR_VERY_CONFIDENTIAL_SECRET_FOR_SIGNING_JWT_TOKENS!!!';
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
@ -31,57 +30,44 @@ export class AuthMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Forgot password - POST // @ Forgot password - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/auth/forgot-password', 1000) .onPost('api/auth/forgot-password', 1000)
.reply(() => .reply(() => [200, true]);
[
200,
true,
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Reset password - POST // @ Reset password - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/auth/reset-password', 1000) .onPost('api/auth/reset-password', 1000)
.reply(() => .reply(() => [200, true]);
[
200,
true,
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Sign in - POST // @ Sign in - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/auth/sign-in', 1500) .onPost('api/auth/sign-in', 1500)
.reply(({request}) => .reply(({ request }) => {
{
// Sign in successful // Sign in successful
if ( request.body.email === 'hughes.brian@company.com' && request.body.password === 'admin' ) if (
{ request.body.email === 'hughes.brian@company.com' &&
request.body.password === 'admin'
) {
return [ return [
200, 200,
{ {
user : cloneDeep(this._user), user: cloneDeep(this._user),
accessToken: this._generateJWTToken(), accessToken: this._generateJWTToken(),
tokenType : 'bearer', tokenType: 'bearer',
}, },
]; ];
} }
// Invalid credentials // Invalid credentials
return [ return [404, false];
404,
false,
];
}); });
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -89,20 +75,18 @@ export class AuthMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/auth/sign-in-with-token') .onPost('api/auth/sign-in-with-token')
.reply(({request}) => .reply(({ request }) => {
{
// Get the access token // Get the access token
const accessToken = request.body.accessToken; const accessToken = request.body.accessToken;
// Verify the token // Verify the token
if ( this._verifyJWTToken(accessToken) ) if (this._verifyJWTToken(accessToken)) {
{
return [ return [
200, 200,
{ {
user : cloneDeep(this._user), user: cloneDeep(this._user),
accessToken: this._generateJWTToken(), accessToken: this._generateJWTToken(),
tokenType : 'bearer', tokenType: 'bearer',
}, },
]; ];
} }
@ -119,42 +103,34 @@ export class AuthMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Sign up - POST // @ Sign up - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onPost('api/auth/sign-up', 1500).reply(() =>
.onPost('api/auth/sign-up', 1500) // Simply return true
.reply(() => [200, true]
);
// Simply return true
[
200,
true,
],
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Unlock session - POST // @ Unlock session - POST
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/auth/unlock-session', 1500) .onPost('api/auth/unlock-session', 1500)
.reply(({request}) => .reply(({ request }) => {
{
// Sign in successful // Sign in successful
if ( request.body.email === 'hughes.brian@company.com' && request.body.password === 'admin' ) if (
{ request.body.email === 'hughes.brian@company.com' &&
request.body.password === 'admin'
) {
return [ return [
200, 200,
{ {
user : cloneDeep(this._user), user: cloneDeep(this._user),
accessToken: this._generateJWTToken(), accessToken: this._generateJWTToken(),
tokenType : 'bearer', tokenType: 'bearer',
}, },
]; ];
} }
// Invalid credentials // Invalid credentials
return [ return [404, false];
404,
false,
];
}); });
} }
@ -168,8 +144,7 @@ export class AuthMockApi
* @param source * @param source
* @private * @private
*/ */
private _base64url(source: any): string private _base64url(source: any): string {
{
// Encode in classical base64 // Encode in classical base64
let encodedSource = Base64.stringify(source); let encodedSource = Base64.stringify(source);
@ -192,8 +167,7 @@ export class AuthMockApi
* *
* @private * @private
*/ */
private _generateJWTToken(): string private _generateJWTToken(): string {
{
// Define token header // Define token header
const header = { const header = {
alg: 'HS256', alg: 'HS256',
@ -203,7 +177,7 @@ export class AuthMockApi
// Calculate the issued at and expiration dates // Calculate the issued at and expiration dates
const date = new Date(); const date = new Date();
const iat = Math.floor(date.getTime() / 1000); const iat = Math.floor(date.getTime() / 1000);
const exp = Math.floor((date.setDate(date.getDate() + 7)) / 1000); const exp = Math.floor(date.setDate(date.getDate() + 7) / 1000);
// Define token payload // Define token payload
const payload = { const payload = {
@ -235,8 +209,7 @@ export class AuthMockApi
* @param token * @param token
* @private * @private
*/ */
private _verifyJWTToken(token: string): boolean private _verifyJWTToken(token: string): boolean {
{
// Split the token into parts // Split the token into parts
const parts = token.split('.'); const parts = token.split('.');
const header = parts[0]; const header = parts[0];
@ -244,9 +217,11 @@ export class AuthMockApi
const signature = parts[2]; const signature = parts[2];
// Re-sign and encode the header and payload using the secret // Re-sign and encode the header and payload using the secret
const signatureCheck = this._base64url(HmacSHA256(header + '.' + payload, this._secret)); const signatureCheck = this._base64url(
HmacSHA256(header + '.' + payload, this._secret)
);
// Verify that the resulting signature is valid // Verify that the resulting signature is valid
return (signature === signatureCheck); return signature === signatureCheck;
} }
} }

83
src/app/mock-api/common/messages/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { messages as messagesData } from 'app/mock-api/common/messages/data'; import { messages as messagesData } from 'app/mock-api/common/messages/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class MessagesMockApi export class MessagesMockApi {
{
private _messages: any = messagesData; private _messages: any = messagesData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class MessagesMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Messages - GET // @ Messages - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -38,8 +35,7 @@ export class MessagesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/messages') .onPost('api/common/messages')
.reply(({request}) => .reply(({ request }) => {
{
// Get the message // Get the message
const newMessage = cloneDeep(request.body.message); const newMessage = cloneDeep(request.body.message);
@ -58,8 +54,7 @@ export class MessagesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/common/messages') .onPatch('api/common/messages')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and message // Get the id and message
const id = request.body.id; const id = request.body.id;
const message = cloneDeep(request.body.message); const message = cloneDeep(request.body.message);
@ -68,17 +63,21 @@ export class MessagesMockApi
let updatedMessage = null; let updatedMessage = null;
// Find the message and update it // Find the message and update it
this._messages.forEach((item: any, index: number, messages: any[]) => this._messages.forEach(
{ (item: any, index: number, messages: any[]) => {
if ( item.id === id ) if (item.id === id) {
{ // Update the message
// Update the message messages[index] = assign(
messages[index] = assign({}, messages[index], message); {},
messages[index],
message
);
// Store the updated message // Store the updated message
updatedMessage = messages[index]; updatedMessage = messages[index];
}
} }
}); );
// Return the response // Return the response
return [200, updatedMessage]; return [200, updatedMessage];
@ -89,8 +88,7 @@ export class MessagesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/common/messages') .onDelete('api/common/messages')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
@ -98,7 +96,9 @@ export class MessagesMockApi
let deletedMessage = null; let deletedMessage = null;
// Find the message // Find the message
const index = this._messages.findIndex((item: any) => item.id === id); const index = this._messages.findIndex(
(item: any) => item.id === id
);
// Store the deleted message // Store the deleted message
deletedMessage = cloneDeep(this._messages[index]); deletedMessage = cloneDeep(this._messages[index]);
@ -115,15 +115,15 @@ export class MessagesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/common/messages/mark-all-as-read') .onGet('api/common/messages/mark-all-as-read')
.reply(() => .reply(() => {
{
// Go through all messages // Go through all messages
this._messages.forEach((item: any, index: number, messages: any[]) => this._messages.forEach(
{ (item: any, index: number, messages: any[]) => {
// Mark it as read // Mark it as read
messages[index].read = true; messages[index].read = true;
messages[index].seen = true; messages[index].seen = true;
}); }
);
// Return the response // Return the response
return [200, true]; return [200, true];
@ -134,8 +134,7 @@ export class MessagesMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/messages/toggle-read-status') .onPost('api/common/messages/toggle-read-status')
.reply(({request}) => .reply(({ request }) => {
{
// Get the message // Get the message
const message = cloneDeep(request.body.message); const message = cloneDeep(request.body.message);
@ -143,17 +142,17 @@ export class MessagesMockApi
let updatedMessage = null; let updatedMessage = null;
// Find the message and update it // Find the message and update it
this._messages.forEach((item: any, index: number, messages: any[]) => this._messages.forEach(
{ (item: any, index: number, messages: any[]) => {
if ( item.id === message.id ) if (item.id === message.id) {
{ // Update the message
// Update the message messages[index].read = message.read;
messages[index].read = message.read;
// Store the updated message // Store the updated message
updatedMessage = messages[index]; updatedMessage = messages[index];
}
} }
}); );
// Return the response // Return the response
return [200, updatedMessage]; return [200, updatedMessage];

140
src/app/mock-api/common/messages/data.ts
View File

@ -6,89 +6,95 @@ const now = DateTime.now();
export const messages = [ export const messages = [
{ {
id : '832276cc-c5e9-4fcc-8e23-d38e2e267bc9', id: '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
image : 'images/avatars/male-01.jpg', image: 'images/avatars/male-01.jpg',
title : 'Gary Peters', title: 'Gary Peters',
description: 'We should talk about that at lunch!', description: 'We should talk about that at lunch!',
time : now.minus({minutes: 25}).toISO(), // 25 minutes ago time: now.minus({ minutes: 25 }).toISO(), // 25 minutes ago
read : false, read: false,
}, },
{ {
id : '608b4479-a3ac-4e26-8675-3609c52aca58', id: '608b4479-a3ac-4e26-8675-3609c52aca58',
image : 'images/avatars/male-04.jpg', image: 'images/avatars/male-04.jpg',
title : 'Leo Gill (Client #8817)', title: 'Leo Gill (Client #8817)',
description: 'You can download the latest invoices now. Please check and let me know.', description:
time : now.minus({minutes: 50}).toISO(), // 50 minutes ago 'You can download the latest invoices now. Please check and let me know.',
read : false, time: now.minus({ minutes: 50 }).toISO(), // 50 minutes ago
read: false,
}, },
{ {
id : '22148c0c-d788-4d49-9467-447677d11b76', id: '22148c0c-d788-4d49-9467-447677d11b76',
image : 'images/avatars/female-01.jpg', image: 'images/avatars/female-01.jpg',
title : 'Sarah', title: 'Sarah',
description: 'Don\'t forget to pickup Jeremy after school!', description: "Don't forget to pickup Jeremy after school!",
time : now.minus({hours: 3}).toISO(), // 3 hours ago time: now.minus({ hours: 3 }).toISO(), // 3 hours ago
read : true, read: true,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : '492e2917-760c-4921-aa5a-3201a857cd48', id: '492e2917-760c-4921-aa5a-3201a857cd48',
image : 'images/avatars/female-12.jpg', image: 'images/avatars/female-12.jpg',
title : 'Nancy Salazar &bull; Joy Publishing', title: 'Nancy Salazar &bull; Joy Publishing',
description: 'I\'ll proof read your bio on next Monday.', description: "I'll proof read your bio on next Monday.",
time : now.minus({hours: 5}).toISO(), // 5 hours ago time: now.minus({ hours: 5 }).toISO(), // 5 hours ago
read : true, read: true,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : '214a46e5-cae7-4b18-9869-eabde7c7ea52', id: '214a46e5-cae7-4b18-9869-eabde7c7ea52',
image : 'images/avatars/male-06.jpg', image: 'images/avatars/male-06.jpg',
title : 'Matthew Wood', title: 'Matthew Wood',
description: 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!', description:
time : now.minus({hours: 7}).toISO(), // 7 hours ago 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!',
read : false, time: now.minus({ hours: 7 }).toISO(), // 7 hours ago
link : '/dashboards/project', read: false,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : '95930319-61cc-4c7e-9324-f1091865330c', id: '95930319-61cc-4c7e-9324-f1091865330c',
image : 'images/avatars/female-04.jpg', image: 'images/avatars/female-04.jpg',
title : 'Elizabeth (New assistant)', title: 'Elizabeth (New assistant)',
description: 'Boss, I\'ve sent all client invoices but Geoffrey refusing to pay.', description:
time : now.minus({hours: 9}).toISO(), // 9 hours ago "Boss, I've sent all client invoices but Geoffrey refusing to pay.",
read : false, time: now.minus({ hours: 9 }).toISO(), // 9 hours ago
link : '/dashboards/project', read: false,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : '802935e9-9577-48bc-98d1-308a4872afd7', id: '802935e9-9577-48bc-98d1-308a4872afd7',
image : 'images/avatars/male-06.jpg', image: 'images/avatars/male-06.jpg',
title : 'William Bell', title: 'William Bell',
description: 'Did you see this game? We should hang out and give it a shot sometime.', description:
time : now.minus({day: 1}).toISO(), // 1 day ago 'Did you see this game? We should hang out and give it a shot sometime.',
read : true, time: now.minus({ day: 1 }).toISO(), // 1 day ago
link : 'https://www.google.com', read: true,
useRouter : false, link: 'https://www.google.com',
useRouter: false,
}, },
{ {
id : '059f3738-633b-48ea-ad83-19016ce24c62', id: '059f3738-633b-48ea-ad83-19016ce24c62',
image : 'images/avatars/female-09.jpg', image: 'images/avatars/female-09.jpg',
title : 'Cheryl Obrien - HR', title: 'Cheryl Obrien - HR',
description: 'Why did\'t you still look at the kitten pictures I\'ve sent to you!', description:
time : now.minus({day: 3}).toISO(), // 3 days ago "Why did't you still look at the kitten pictures I've sent to you!",
read : false, time: now.minus({ day: 3 }).toISO(), // 3 days ago
link : '/dashboards/project', read: false,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : '5c2bb44d-5ca7-42ff-ad7e-46ced9f49a24', id: '5c2bb44d-5ca7-42ff-ad7e-46ced9f49a24',
image : 'images/avatars/female-15.jpg', image: 'images/avatars/female-15.jpg',
title : 'Joan Jones - Tech', title: 'Joan Jones - Tech',
description: 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?', description:
time : now.minus({day: 4}).toISO(), // 4 days ago 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?',
read : true, time: now.minus({ day: 4 }).toISO(), // 4 days ago
link : '/dashboards/project', read: true,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
]; ];

122
src/app/mock-api/common/navigation/api.ts
View File

@ -1,22 +1,29 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseNavigationItem } from '@fuse/components/navigation'; import { FuseNavigationItem } from '@fuse/components/navigation';
import { FuseMockApiService } from '@fuse/lib/mock-api'; import { FuseMockApiService } from '@fuse/lib/mock-api';
import { compactNavigation, defaultNavigation, futuristicNavigation, horizontalNavigation } from 'app/mock-api/common/navigation/data'; import {
compactNavigation,
defaultNavigation,
futuristicNavigation,
horizontalNavigation,
} from 'app/mock-api/common/navigation/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class NavigationMockApi export class NavigationMockApi {
{ private readonly _compactNavigation: FuseNavigationItem[] =
private readonly _compactNavigation: FuseNavigationItem[] = compactNavigation; compactNavigation;
private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation; private readonly _defaultNavigation: FuseNavigationItem[] =
private readonly _futuristicNavigation: FuseNavigationItem[] = futuristicNavigation; defaultNavigation;
private readonly _horizontalNavigation: FuseNavigationItem[] = horizontalNavigation; private readonly _futuristicNavigation: FuseNavigationItem[] =
futuristicNavigation;
private readonly _horizontalNavigation: FuseNavigationItem[] =
horizontalNavigation;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -28,61 +35,54 @@ export class NavigationMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Navigation - GET // @ Navigation - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService.onGet('api/common/navigation').reply(() => {
.onGet('api/common/navigation') // Fill compact navigation children using the default navigation
.reply(() => this._compactNavigation.forEach((compactNavItem) => {
{ this._defaultNavigation.forEach((defaultNavItem) => {
// Fill compact navigation children using the default navigation if (defaultNavItem.id === compactNavItem.id) {
this._compactNavigation.forEach((compactNavItem) => compactNavItem.children = cloneDeep(
{ defaultNavItem.children
this._defaultNavigation.forEach((defaultNavItem) => );
{ }
if ( defaultNavItem.id === compactNavItem.id )
{
compactNavItem.children = cloneDeep(defaultNavItem.children);
}
});
}); });
// Fill futuristic navigation children using the default navigation
this._futuristicNavigation.forEach((futuristicNavItem) =>
{
this._defaultNavigation.forEach((defaultNavItem) =>
{
if ( defaultNavItem.id === futuristicNavItem.id )
{
futuristicNavItem.children = cloneDeep(defaultNavItem.children);
}
});
});
// Fill horizontal navigation children using the default navigation
this._horizontalNavigation.forEach((horizontalNavItem) =>
{
this._defaultNavigation.forEach((defaultNavItem) =>
{
if ( defaultNavItem.id === horizontalNavItem.id )
{
horizontalNavItem.children = cloneDeep(defaultNavItem.children);
}
});
});
// Return the response
return [
200,
{
compact : cloneDeep(this._compactNavigation),
default : cloneDeep(this._defaultNavigation),
futuristic: cloneDeep(this._futuristicNavigation),
horizontal: cloneDeep(this._horizontalNavigation),
},
];
}); });
// Fill futuristic navigation children using the default navigation
this._futuristicNavigation.forEach((futuristicNavItem) => {
this._defaultNavigation.forEach((defaultNavItem) => {
if (defaultNavItem.id === futuristicNavItem.id) {
futuristicNavItem.children = cloneDeep(
defaultNavItem.children
);
}
});
});
// Fill horizontal navigation children using the default navigation
this._horizontalNavigation.forEach((horizontalNavItem) => {
this._defaultNavigation.forEach((defaultNavItem) => {
if (defaultNavItem.id === horizontalNavItem.id) {
horizontalNavItem.children = cloneDeep(
defaultNavItem.children
);
}
});
});
// Return the response
return [
200,
{
compact: cloneDeep(this._compactNavigation),
default: cloneDeep(this._defaultNavigation),
futuristic: cloneDeep(this._futuristicNavigation),
horizontal: cloneDeep(this._horizontalNavigation),
},
];
});
} }
} }

1290
src/app/mock-api/common/navigation/data.ts
View File

File diff suppressed because it is too large Load Diff

83
src/app/mock-api/common/notifications/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { notifications as notificationsData } from 'app/mock-api/common/notifications/data'; import { notifications as notificationsData } from 'app/mock-api/common/notifications/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class NotificationsMockApi export class NotificationsMockApi {
{
private _notifications: any = notificationsData; private _notifications: any = notificationsData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class NotificationsMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Notifications - GET // @ Notifications - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -38,8 +35,7 @@ export class NotificationsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/notifications') .onPost('api/common/notifications')
.reply(({request}) => .reply(({ request }) => {
{
// Get the notification // Get the notification
const newNotification = cloneDeep(request.body.notification); const newNotification = cloneDeep(request.body.notification);
@ -58,8 +54,7 @@ export class NotificationsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/common/notifications') .onPatch('api/common/notifications')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and notification // Get the id and notification
const id = request.body.id; const id = request.body.id;
const notification = cloneDeep(request.body.notification); const notification = cloneDeep(request.body.notification);
@ -68,17 +63,21 @@ export class NotificationsMockApi
let updatedNotification = null; let updatedNotification = null;
// Find the notification and update it // Find the notification and update it
this._notifications.forEach((item: any, index: number, notifications: any[]) => this._notifications.forEach(
{ (item: any, index: number, notifications: any[]) => {
if ( item.id === id ) if (item.id === id) {
{ // Update the notification
// Update the notification notifications[index] = assign(
notifications[index] = assign({}, notifications[index], notification); {},
notifications[index],
notification
);
// Store the updated notification // Store the updated notification
updatedNotification = notifications[index]; updatedNotification = notifications[index];
}
} }
}); );
// Return the response // Return the response
return [200, updatedNotification]; return [200, updatedNotification];
@ -89,8 +88,7 @@ export class NotificationsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/common/notifications') .onDelete('api/common/notifications')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
@ -98,7 +96,9 @@ export class NotificationsMockApi
let deletedNotification = null; let deletedNotification = null;
// Find the notification // Find the notification
const index = this._notifications.findIndex((item: any) => item.id === id); const index = this._notifications.findIndex(
(item: any) => item.id === id
);
// Store the deleted notification // Store the deleted notification
deletedNotification = cloneDeep(this._notifications[index]); deletedNotification = cloneDeep(this._notifications[index]);
@ -115,15 +115,15 @@ export class NotificationsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onGet('api/common/notifications/mark-all-as-read') .onGet('api/common/notifications/mark-all-as-read')
.reply(() => .reply(() => {
{
// Go through all notifications // Go through all notifications
this._notifications.forEach((item: any, index: number, notifications: any[]) => this._notifications.forEach(
{ (item: any, index: number, notifications: any[]) => {
// Mark it as read // Mark it as read
notifications[index].read = true; notifications[index].read = true;
notifications[index].seen = true; notifications[index].seen = true;
}); }
);
// Return the response // Return the response
return [200, true]; return [200, true];
@ -134,8 +134,7 @@ export class NotificationsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/notifications/toggle-read-status') .onPost('api/common/notifications/toggle-read-status')
.reply(({request}) => .reply(({ request }) => {
{
// Get the notification // Get the notification
const notification = cloneDeep(request.body.notification); const notification = cloneDeep(request.body.notification);
@ -143,17 +142,17 @@ export class NotificationsMockApi
let updatedNotification = null; let updatedNotification = null;
// Find the notification and update it // Find the notification and update it
this._notifications.forEach((item: any, index: number, notifications: any[]) => this._notifications.forEach(
{ (item: any, index: number, notifications: any[]) => {
if ( item.id === notification.id ) if (item.id === notification.id) {
{ // Update the notification
// Update the notification notifications[index].read = notification.read;
notifications[index].read = notification.read;
// Store the updated notification // Store the updated notification
updatedNotification = notifications[index]; updatedNotification = notifications[index];
}
} }
}); );
// Return the response // Return the response
return [200, updatedNotification]; return [200, updatedNotification];

125
src/app/mock-api/common/notifications/data.ts
View File

@ -6,88 +6,91 @@ const now = DateTime.now();
export const notifications = [ export const notifications = [
{ {
id : '493190c9-5b61-4912-afe5-78c21f1044d7', id: '493190c9-5b61-4912-afe5-78c21f1044d7',
icon : 'heroicons_mini:star', icon: 'heroicons_mini:star',
title : 'Daily challenges', title: 'Daily challenges',
description: 'Your submission has been accepted', description: 'Your submission has been accepted',
time : now.minus({minute: 25}).toISO(), // 25 minutes ago time: now.minus({ minute: 25 }).toISO(), // 25 minutes ago
read : false, read: false,
}, },
{ {
id : '6e3e97e5-effc-4fb7-b730-52a151f0b641', id: '6e3e97e5-effc-4fb7-b730-52a151f0b641',
image : 'images/avatars/male-04.jpg', image: 'images/avatars/male-04.jpg',
description: '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>', description:
time : now.minus({minute: 50}).toISO(), // 50 minutes ago '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>',
read : true, time: now.minus({ minute: 50 }).toISO(), // 50 minutes ago
link : '/dashboards/project', read: true,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : 'b91ccb58-b06c-413b-b389-87010e03a120', id: 'b91ccb58-b06c-413b-b389-87010e03a120',
icon : 'heroicons_mini:envelope', icon: 'heroicons_mini:envelope',
title : 'Mailbox', title: 'Mailbox',
description: 'You have 15 unread mails across 3 mailboxes', description: 'You have 15 unread mails across 3 mailboxes',
time : now.minus({hour: 3}).toISO(), // 3 hours ago time: now.minus({ hour: 3 }).toISO(), // 3 hours ago
read : false, read: false,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : '541416c9-84a7-408a-8d74-27a43c38d797', id: '541416c9-84a7-408a-8d74-27a43c38d797',
icon : 'heroicons_mini:arrow-path', icon: 'heroicons_mini:arrow-path',
title : 'Cron jobs', title: 'Cron jobs',
description: 'Your <em>Docker container</em> is ready to publish', description: 'Your <em>Docker container</em> is ready to publish',
time : now.minus({hour: 5}).toISO(), // 5 hours ago time: now.minus({ hour: 5 }).toISO(), // 5 hours ago
read : false, read: false,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : 'ef7b95a7-8e8b-4616-9619-130d9533add9', id: 'ef7b95a7-8e8b-4616-9619-130d9533add9',
image : 'images/avatars/male-06.jpg', image: 'images/avatars/male-06.jpg',
description: '<strong>Roger Murray</strong> accepted your friend request', description:
time : now.minus({hour: 7}).toISO(), // 7 hours ago '<strong>Roger Murray</strong> accepted your friend request',
read : true, time: now.minus({ hour: 7 }).toISO(), // 7 hours ago
link : '/dashboards/project', read: true,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : 'eb8aa470-635e-461d-88e1-23d9ea2a5665', id: 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
image : 'images/avatars/female-04.jpg', image: 'images/avatars/female-04.jpg',
description: '<strong>Sophie Stone</strong> sent you a direct message', description: '<strong>Sophie Stone</strong> sent you a direct message',
time : now.minus({hour: 9}).toISO(), // 9 hours ago time: now.minus({ hour: 9 }).toISO(), // 9 hours ago
read : true, read: true,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : 'b85c2338-cc98-4140-bbf8-c226ce4e395e', id: 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
icon : 'heroicons_mini:envelope', icon: 'heroicons_mini:envelope',
title : 'Mailbox', title: 'Mailbox',
description: 'You have 3 new mails', description: 'You have 3 new mails',
time : now.minus({day: 1}).toISO(), // 1 day ago time: now.minus({ day: 1 }).toISO(), // 1 day ago
read : true, read: true,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
{ {
id : '8f8e1bf9-4661-4939-9e43-390957b60f42', id: '8f8e1bf9-4661-4939-9e43-390957b60f42',
icon : 'heroicons_mini:star', icon: 'heroicons_mini:star',
title : 'Daily challenges', title: 'Daily challenges',
description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days', description:
time : now.minus({day: 3}).toISO(), // 3 days ago 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
read : true, time: now.minus({ day: 3 }).toISO(), // 3 days ago
link : '/dashboards/project', read: true,
useRouter : true, link: '/dashboards/project',
useRouter: true,
}, },
{ {
id : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69', id: '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
icon : 'heroicons_mini:arrow-path', icon: 'heroicons_mini:arrow-path',
title : 'Cron jobs', title: 'Cron jobs',
description: 'Your Vagrant container is ready to download', description: 'Your Vagrant container is ready to download',
time : now.minus({day: 4}).toISO(), // 4 days ago time: now.minus({ day: 4 }).toISO(), // 4 days ago
read : true, read: true,
link : '/dashboards/project', link: '/dashboards/project',
useRouter : true, useRouter: true,
}, },
]; ];

80
src/app/mock-api/common/search/api.ts
View File

@ -1,15 +1,18 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navigation'; import {
FuseNavigationItem,
FuseNavigationService,
} from '@fuse/components/navigation';
import { FuseMockApiService } from '@fuse/lib/mock-api'; import { FuseMockApiService } from '@fuse/lib/mock-api';
import { contacts } from 'app/mock-api/apps/contacts/data'; import { contacts } from 'app/mock-api/apps/contacts/data';
import { tasks } from 'app/mock-api/apps/tasks/data'; import { tasks } from 'app/mock-api/apps/tasks/data';
import { defaultNavigation } from 'app/mock-api/common/navigation/data'; import { defaultNavigation } from 'app/mock-api/common/navigation/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class SearchMockApi export class SearchMockApi {
{ private readonly _defaultNavigation: FuseNavigationItem[] =
private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation; defaultNavigation;
private readonly _contacts: any[] = contacts; private readonly _contacts: any[] = contacts;
private readonly _tasks: any[] = tasks; private readonly _tasks: any[] = tasks;
@ -18,9 +21,8 @@ export class SearchMockApi
*/ */
constructor( constructor(
private _fuseMockApiService: FuseMockApiService, private _fuseMockApiService: FuseMockApiService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService
) ) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -32,49 +34,51 @@ export class SearchMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// Get the flat navigation and store it // Get the flat navigation and store it
const flatNavigation = this._fuseNavigationService.getFlatNavigation(this._defaultNavigation); const flatNavigation = this._fuseNavigationService.getFlatNavigation(
this._defaultNavigation
);
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Search results - GET // @ Search results - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/search') .onPost('api/common/search')
.reply(({request}) => .reply(({ request }) => {
{
// Get the search query // Get the search query
const query = cloneDeep(request.body.query.toLowerCase()); const query = cloneDeep(request.body.query.toLowerCase());
// If the search query is an empty string, // If the search query is an empty string,
// return an empty array // return an empty array
if ( query === '' ) if (query === '') {
{ return [200, { results: [] }];
return [200, {results: []}];
} }
// Filter the contacts // Filter the contacts
const contactsResults = cloneDeep(this._contacts) const contactsResults = cloneDeep(this._contacts).filter(
.filter(contact => contact.name.toLowerCase().includes(query)); (contact) => contact.name.toLowerCase().includes(query)
);
// Filter the navigation // Filter the navigation
const pagesResults = cloneDeep(flatNavigation) const pagesResults = cloneDeep(flatNavigation).filter(
.filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query)))); (page) =>
page.title?.toLowerCase().includes(query) ||
(page.subtitle && page.subtitle.includes(query))
);
// Filter the tasks // Filter the tasks
const tasksResults = cloneDeep(this._tasks) const tasksResults = cloneDeep(this._tasks).filter((task) =>
.filter(task => task.title.toLowerCase().includes(query)); task.title.toLowerCase().includes(query)
);
// Prepare the results array // Prepare the results array
const results = []; const results = [];
// If there are contacts results... // If there are contacts results...
if ( contactsResults.length > 0 ) if (contactsResults.length > 0) {
{
// Normalize the results // Normalize the results
contactsResults.forEach((result) => contactsResults.forEach((result) => {
{
// Add a link // Add a link
result.link = '/apps/contacts/' + result.id; result.link = '/apps/contacts/' + result.id;
@ -84,36 +88,32 @@ export class SearchMockApi
// Add to the results // Add to the results
results.push({ results.push({
id : 'contacts', id: 'contacts',
label : 'Contacts', label: 'Contacts',
results: contactsResults, results: contactsResults,
}); });
} }
// If there are page results... // If there are page results...
if ( pagesResults.length > 0 ) if (pagesResults.length > 0) {
{
// Normalize the results // Normalize the results
pagesResults.forEach((result: any) => pagesResults.forEach((result: any) => {
{
// Add the page title as the value // Add the page title as the value
result.value = result.title; result.value = result.title;
}); });
// Add to the results // Add to the results
results.push({ results.push({
id : 'pages', id: 'pages',
label : 'Pages', label: 'Pages',
results: pagesResults, results: pagesResults,
}); });
} }
// If there are tasks results... // If there are tasks results...
if ( tasksResults.length > 0 ) if (tasksResults.length > 0) {
{
// Normalize the results // Normalize the results
tasksResults.forEach((result) => tasksResults.forEach((result) => {
{
// Add a link // Add a link
result.link = '/apps/tasks/' + result.id; result.link = '/apps/tasks/' + result.id;
@ -123,8 +123,8 @@ export class SearchMockApi
// Add to the results // Add to the results
results.push({ results.push({
id : 'tasks', id: 'tasks',
label : 'Tasks', label: 'Tasks',
results: tasksResults, results: tasksResults,
}); });
} }

46
src/app/mock-api/common/shortcuts/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
import { shortcuts as shortcutsData } from 'app/mock-api/common/shortcuts/data'; import { shortcuts as shortcutsData } from 'app/mock-api/common/shortcuts/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class ShortcutsMockApi export class ShortcutsMockApi {
{
private _shortcuts: any = shortcutsData; private _shortcuts: any = shortcutsData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class ShortcutsMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Shortcuts - GET // @ Shortcuts - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -38,8 +35,7 @@ export class ShortcutsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPost('api/common/shortcuts') .onPost('api/common/shortcuts')
.reply(({request}) => .reply(({ request }) => {
{
// Get the shortcut // Get the shortcut
const newShortcut = cloneDeep(request.body.shortcut); const newShortcut = cloneDeep(request.body.shortcut);
@ -58,8 +54,7 @@ export class ShortcutsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/common/shortcuts') .onPatch('api/common/shortcuts')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id and shortcut // Get the id and shortcut
const id = request.body.id; const id = request.body.id;
const shortcut = cloneDeep(request.body.shortcut); const shortcut = cloneDeep(request.body.shortcut);
@ -68,17 +63,21 @@ export class ShortcutsMockApi
let updatedShortcut = null; let updatedShortcut = null;
// Find the shortcut and update it // Find the shortcut and update it
this._shortcuts.forEach((item: any, index: number, shortcuts: any[]) => this._shortcuts.forEach(
{ (item: any, index: number, shortcuts: any[]) => {
if ( item.id === id ) if (item.id === id) {
{ // Update the shortcut
// Update the shortcut shortcuts[index] = assign(
shortcuts[index] = assign({}, shortcuts[index], shortcut); {},
shortcuts[index],
shortcut
);
// Store the updated shortcut // Store the updated shortcut
updatedShortcut = shortcuts[index]; updatedShortcut = shortcuts[index];
}
} }
}); );
// Return the response // Return the response
return [200, updatedShortcut]; return [200, updatedShortcut];
@ -89,8 +88,7 @@ export class ShortcutsMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onDelete('api/common/shortcuts') .onDelete('api/common/shortcuts')
.reply(({request}) => .reply(({ request }) => {
{
// Get the id // Get the id
const id = request.params.get('id'); const id = request.params.get('id');
@ -98,7 +96,9 @@ export class ShortcutsMockApi
let deletedShortcut = null; let deletedShortcut = null;
// Find the shortcut // Find the shortcut
const index = this._shortcuts.findIndex((item: any) => item.id === id); const index = this._shortcuts.findIndex(
(item: any) => item.id === id
);
// Store the deleted shortcut // Store the deleted shortcut
deletedShortcut = cloneDeep(this._shortcuts[index]); deletedShortcut = cloneDeep(this._shortcuts[index]);

80
src/app/mock-api/common/shortcuts/data.ts
View File

@ -1,67 +1,67 @@
/* eslint-disable */ /* eslint-disable */
export const shortcuts = [ export const shortcuts = [
{ {
id : 'a1ae91d3-e2cb-459b-9be9-a184694f548b', id: 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
label : 'Changelog', label: 'Changelog',
description: 'List of changes', description: 'List of changes',
icon : 'heroicons_outline:clipboard-document-list', icon: 'heroicons_outline:clipboard-document-list',
link : '/docs/changelog', link: '/docs/changelog',
useRouter : true, useRouter: true,
}, },
{ {
id : '989ce876-c177-4d71-a749-1953c477f825', id: '989ce876-c177-4d71-a749-1953c477f825',
label : 'Documentation', label: 'Documentation',
description: 'Getting started', description: 'Getting started',
icon : 'heroicons_outline:book-open', icon: 'heroicons_outline:book-open',
link : '/docs/guides/getting-started/introduction', link: '/docs/guides/getting-started/introduction',
useRouter : true, useRouter: true,
}, },
{ {
id : '2496f42e-2f25-4e34-83d5-3ff9568fd984', id: '2496f42e-2f25-4e34-83d5-3ff9568fd984',
label : 'Help center', label: 'Help center',
description: 'FAQs and guides', description: 'FAQs and guides',
icon : 'heroicons_outline:information-circle', icon: 'heroicons_outline:information-circle',
link : '/apps/help-center', link: '/apps/help-center',
useRouter : true, useRouter: true,
}, },
{ {
id : '3c48e75e-2ae7-4b73-938a-12dc655be28b', id: '3c48e75e-2ae7-4b73-938a-12dc655be28b',
label : 'Dashboard', label: 'Dashboard',
description: 'User analytics', description: 'User analytics',
icon : 'heroicons_outline:chart-pie', icon: 'heroicons_outline:chart-pie',
link : '/dashboards/analytics', link: '/dashboards/analytics',
useRouter : true, useRouter: true,
}, },
{ {
id : '2daac375-a2f7-4393-b4d7-ce6061628b66', id: '2daac375-a2f7-4393-b4d7-ce6061628b66',
label : 'Mailbox', label: 'Mailbox',
description: '5 new e-mails', description: '5 new e-mails',
icon : 'heroicons_outline:envelope', icon: 'heroicons_outline:envelope',
link : 'apps/mailbox', link: 'apps/mailbox',
useRouter : true, useRouter: true,
}, },
{ {
id : '56a0a561-17e7-40b3-bd75-0b6cef230b7e', id: '56a0a561-17e7-40b3-bd75-0b6cef230b7e',
label : 'Tasks', label: 'Tasks',
description: '12 unfinished tasks', description: '12 unfinished tasks',
icon : 'heroicons_outline:check-circle', icon: 'heroicons_outline:check-circle',
link : '/apps/tasks', link: '/apps/tasks',
useRouter : true, useRouter: true,
}, },
{ {
id : 'f5daf93e-b6f3-4199-8a0c-b951e92a6cb8', id: 'f5daf93e-b6f3-4199-8a0c-b951e92a6cb8',
label : 'Contacts', label: 'Contacts',
description: 'List all contacts', description: 'List all contacts',
icon : 'heroicons_outline:user-group', icon: 'heroicons_outline:user-group',
link : '/apps/contacts', link: '/apps/contacts',
useRouter : true, useRouter: true,
}, },
{ {
id : '0a240ab8-e19d-4503-bf68-20013030d526', id: '0a240ab8-e19d-4503-bf68-20013030d526',
label : 'Reload', label: 'Reload',
description: 'Reload the app', description: 'Reload the app',
icon : 'heroicons_outline:arrow-path', icon: 'heroicons_outline:arrow-path',
link : '/dashboards/project', link: '/dashboards/project',
useRouter : false, useRouter: false,
}, },
]; ];

14
src/app/mock-api/common/user/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
import { user as userData } from 'app/mock-api/common/user/data'; import { user as userData } from 'app/mock-api/common/user/data';
import { assign, cloneDeep } from 'lodash-es'; import { assign, cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class UserMockApi export class UserMockApi {
{
private _user: any = userData; private _user: any = userData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class UserMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ User - GET // @ User - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -38,8 +35,7 @@ export class UserMockApi
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
this._fuseMockApiService this._fuseMockApiService
.onPatch('api/common/user') .onPatch('api/common/user')
.reply(({request}) => .reply(({ request }) => {
{
// Get the user mock-api // Get the user mock-api
const user = cloneDeep(request.body.user); const user = cloneDeep(request.body.user);

6
src/app/mock-api/common/user/data.ts
View File

@ -1,8 +1,8 @@
/* eslint-disable */ /* eslint-disable */
export const user = { export const user = {
id : 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df', id: 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
name : 'Brian Hughes', name: 'Brian Hughes',
email : 'hughes.brian@company.com', email: 'hughes.brian@company.com',
avatar: 'images/avatars/brian-hughes.jpg', avatar: 'images/avatars/brian-hughes.jpg',
status: 'online', status: 'online',
}; };

11
src/app/mock-api/dashboards/analytics/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data'; import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class AnalyticsMockApi export class AnalyticsMockApi {
{
private _analytics: any = analyticsData; private _analytics: any = analyticsData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class AnalyticsMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Sales - GET // @ Sales - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------

1566
src/app/mock-api/dashboards/analytics/data.ts
View File

File diff suppressed because it is too large Load Diff

11
src/app/mock-api/dashboards/crypto/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
import { crypto as cryptoData } from 'app/mock-api/dashboards/crypto/data'; import { crypto as cryptoData } from 'app/mock-api/dashboards/crypto/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class CryptoMockApi export class CryptoMockApi {
{
private _crypto: any = cryptoData; private _crypto: any = cryptoData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class CryptoMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Crypto - GET // @ Crypto - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------

369
src/app/mock-api/dashboards/crypto/data.ts
View File

@ -5,17 +5,17 @@ const now = DateTime.now();
/* tslint:disable:max-line-length */ /* tslint:disable:max-line-length */
export const crypto = { export const crypto = {
btc : { btc: {
amount : 8878.48, amount: 8878.48,
trend : { trend: {
dir : 'up', dir: 'up',
amount: 0.17, amount: 0.17,
}, },
marketCap : 148752956966, marketCap: 148752956966,
volume : 22903438381, volume: 22903438381,
supply : 18168448, supply: 18168448,
allTimeHigh: 19891.00, allTimeHigh: 19891.0,
price : { price: {
series: [ series: [
{ {
name: 'Price', name: 'Price',
@ -62,7 +62,7 @@ export const crypto = {
}, },
{ {
x: -135, x: -135,
y: 6540.10, y: 6540.1,
}, },
{ {
x: -134, x: -134,
@ -142,7 +142,7 @@ export const crypto = {
}, },
{ {
x: -115, x: -115,
y: 6558.70, y: 6558.7,
}, },
{ {
x: -114, x: -114,
@ -150,15 +150,15 @@ export const crypto = {
}, },
{ {
x: -113, x: -113,
y: 6568.80, y: 6568.8,
}, },
{ {
x: -112, x: -112,
y: 6568.80, y: 6568.8,
}, },
{ {
x: -111, x: -111,
y: 6568.80, y: 6568.8,
}, },
{ {
x: -110, x: -110,
@ -178,7 +178,7 @@ export const crypto = {
}, },
{ {
x: -106, x: -106,
y: 6560.40, y: 6560.4,
}, },
{ {
x: -105, x: -105,
@ -194,7 +194,7 @@ export const crypto = {
}, },
{ {
x: -102, x: -102,
y: 6553.30, y: 6553.3,
}, },
{ {
x: -101, x: -101,
@ -210,11 +210,11 @@ export const crypto = {
}, },
{ {
x: -98, x: -98,
y: 6560.00, y: 6560.0,
}, },
{ {
x: -97, x: -97,
y: 6560.00, y: 6560.0,
}, },
{ {
x: -96, x: -96,
@ -246,7 +246,7 @@ export const crypto = {
}, },
{ {
x: -89, x: -89,
y: 6565.10, y: 6565.1,
}, },
{ {
x: -88, x: -88,
@ -378,7 +378,7 @@ export const crypto = {
}, },
{ {
x: -56, x: -56,
y: 6562.10, y: 6562.1,
}, },
{ {
x: -55, x: -55,
@ -434,11 +434,11 @@ export const crypto = {
}, },
{ {
x: -42, x: -42,
y: 6569.70, y: 6569.7,
}, },
{ {
x: -41, x: -41,
y: 6570.10, y: 6570.1,
}, },
{ {
x: -40, x: -40,
@ -494,7 +494,7 @@ export const crypto = {
}, },
{ {
x: -27, x: -27,
y: 6577.70, y: 6577.7,
}, },
{ {
x: -26, x: -26,
@ -506,7 +506,7 @@ export const crypto = {
}, },
{ {
x: -24, x: -24,
y: 6581.30, y: 6581.3,
}, },
{ {
x: -23, x: -23,
@ -574,11 +574,11 @@ export const crypto = {
}, },
{ {
x: -7, x: -7,
y: 6562.70, y: 6562.7,
}, },
{ {
x: -6, x: -6,
y: 6562.70, y: 6562.7,
}, },
{ {
x: -5, x: -5,
@ -598,20 +598,20 @@ export const crypto = {
}, },
{ {
x: -1, x: -1,
y: 6571.30, y: 6571.3,
}, },
], ],
}, },
], ],
}, },
}, },
prices : { prices: {
btc: 8878.48, btc: 8878.48,
eth: 170.46, eth: 170.46,
bch: 359.93, bch: 359.93,
xrp: 0.23512, xrp: 0.23512,
}, },
wallets : { wallets: {
btc: 24.97311243, btc: 24.97311243,
eth: 126.3212, eth: 126.3212,
bch: 78.454412, bch: 78.454412,
@ -619,11 +619,11 @@ export const crypto = {
}, },
watchlist: [ watchlist: [
{ {
title : 'Ethereum', title: 'Ethereum',
iso : 'ETH', iso: 'ETH',
amount: 170.46, amount: 170.46,
trend : { trend: {
dir : 'up', dir: 'up',
amount: 2.35, amount: 2.35,
}, },
series: [ series: [
@ -631,83 +631,83 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 154.36, y: 154.36,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 154.36, y: 154.36,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 146.94, y: 146.94,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 146.96, y: 146.96,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 146.11, y: 146.11,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 150.26, y: 150.26,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 146.11, y: 146.11,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 150.79, y: 150.79,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 145.36, y: 145.36,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 141.06, y: 141.06,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 140.10, y: 140.1,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 138.31, y: 138.31,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 138.42, y: 138.42,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 138.48, y: 138.48,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 138.71, y: 138.71,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 148.42, y: 148.42,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 146.87, y: 146.87,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 147.07, y: 147.07,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 135.07, y: 135.07,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 135.01, y: 135.01,
}, },
], ],
@ -715,11 +715,11 @@ export const crypto = {
], ],
}, },
{ {
title : 'Bitcoin Cash', title: 'Bitcoin Cash',
iso : 'BCH', iso: 'BCH',
amount: 359.93, amount: 359.93,
trend : { trend: {
dir : 'up', dir: 'up',
amount: 9.94, amount: 9.94,
}, },
series: [ series: [
@ -727,95 +727,95 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 374.77, y: 374.77,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 374.41, y: 374.41,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 375.08, y: 375.08,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 375.08, y: 375.08,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 374.09, y: 374.09,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 368.84, y: 368.84,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 367.49, y: 367.49,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 359.75, y: 359.75,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 366.65, y: 366.65,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 367.52, y: 367.52,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 367.59, y: 367.59,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 364.18, y: 364.18,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 370.11, y: 370.11,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 362.70, y: 362.7,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 362.70, y: 362.7,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 362.77, y: 362.77,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 369.46, y: 369.46,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 371.04, y: 371.04,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 371.48, y: 371.48,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 371.30, y: 371.3,
}, },
], ],
}, },
], ],
}, },
{ {
title : 'XRP', title: 'XRP',
iso : 'XRP', iso: 'XRP',
amount: 0.23512, amount: 0.23512,
trend : { trend: {
dir : 'down', dir: 'down',
amount: 0.35, amount: 0.35,
}, },
series: [ series: [
@ -823,95 +823,95 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 0.258, y: 0.258,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 0.256, y: 0.256,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 0.255, y: 0.255,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 0.255, y: 0.255,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 0.254, y: 0.254,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 0.248, y: 0.248,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 0.247, y: 0.247,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 0.249, y: 0.249,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 0.246, y: 0.246,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 0.247, y: 0.247,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 0.247, y: 0.247,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 0.244, y: 0.244,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 0.250, y: 0.25,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 0.242, y: 0.242,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 0.251, y: 0.251,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 0.251, y: 0.251,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 0.251, y: 0.251,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 0.249, y: 0.249,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 0.242, y: 0.242,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 0.240, y: 0.24,
}, },
], ],
}, },
], ],
}, },
{ {
title : 'Litecoin', title: 'Litecoin',
iso : 'LTC', iso: 'LTC',
amount: 60.15, amount: 60.15,
trend : { trend: {
dir : 'up', dir: 'up',
amount: 0.99, amount: 0.99,
}, },
series: [ series: [
@ -919,83 +919,83 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 62.54, y: 62.54,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 61.54, y: 61.54,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 62.55, y: 62.55,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 60.55, y: 60.55,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 59.54, y: 59.54,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 58.48, y: 58.48,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 54.47, y: 54.47,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 51.49, y: 51.49,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 51.46, y: 51.46,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 53.47, y: 53.47,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 52.47, y: 52.47,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 54.44, y: 54.44,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 59.50, y: 59.5,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 62.42, y: 62.42,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 61.42, y: 61.42,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 60.42, y: 60.42,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 58.49, y: 58.49,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 57.51, y: 57.51,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 54.51, y: 54.51,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 51.25, y: 51.25,
}, },
], ],
@ -1003,11 +1003,11 @@ export const crypto = {
], ],
}, },
{ {
title : 'Zcash', title: 'Zcash',
iso : 'ZEC', iso: 'ZEC',
amount: 58.41, amount: 58.41,
trend : { trend: {
dir : 'down', dir: 'down',
amount: 8.79, amount: 8.79,
}, },
series: [ series: [
@ -1015,83 +1015,83 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 53.54, y: 53.54,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 52.54, y: 52.54,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 52.55, y: 52.55,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 46.44, y: 46.44,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 49.50, y: 49.5,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 55.42, y: 55.42,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 54.42, y: 54.42,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 43.49, y: 43.49,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 43.46, y: 43.46,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 41.47, y: 41.47,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 41.47, y: 41.47,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 51.55, y: 51.55,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 48.54, y: 48.54,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 49.48, y: 49.48,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 45.47, y: 45.47,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 51.42, y: 51.42,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 49.49, y: 49.49,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 46.51, y: 46.51,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 41.51, y: 41.51,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 44.25, y: 44.25,
}, },
], ],
@ -1099,11 +1099,11 @@ export const crypto = {
], ],
}, },
{ {
title : 'Bitcoin Gold', title: 'Bitcoin Gold',
iso : 'BTG', iso: 'BTG',
amount: 12.23, amount: 12.23,
trend : { trend: {
dir : 'down', dir: 'down',
amount: 4.42, amount: 4.42,
}, },
series: [ series: [
@ -1111,84 +1111,84 @@ export const crypto = {
name: 'Price', name: 'Price',
data: [ data: [
{ {
x: now.minus({minutes: 20}).toFormat('HH:mm'), x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
y: 14.77, y: 14.77,
}, },
{ {
x: now.minus({minutes: 19}).toFormat('HH:mm'), x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
y: 14.41, y: 14.41,
}, },
{ {
x: now.minus({minutes: 18}).toFormat('HH:mm'), x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
y: 15.08, y: 15.08,
}, },
{ {
x: now.minus({minutes: 17}).toFormat('HH:mm'), x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
y: 15.08, y: 15.08,
}, },
{ {
x: now.minus({minutes: 16}).toFormat('HH:mm'), x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
y: 14.09, y: 14.09,
}, },
{ {
x: now.minus({minutes: 15}).toFormat('HH:mm'), x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
y: 18.84, y: 18.84,
}, },
{ {
x: now.minus({minutes: 14}).toFormat('HH:mm'), x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
y: 17.49, y: 17.49,
}, },
{ {
x: now.minus({minutes: 13}).toFormat('HH:mm'), x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
y: 19.75, y: 19.75,
}, },
{ {
x: now.minus({minutes: 12}).toFormat('HH:mm'), x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
y: 16.65, y: 16.65,
}, },
{ {
x: now.minus({minutes: 11}).toFormat('HH:mm'), x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
y: 17.52, y: 17.52,
}, },
{ {
x: now.minus({minutes: 10}).toFormat('HH:mm'), x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
y: 17.59, y: 17.59,
}, },
{ {
x: now.minus({minutes: 9}).toFormat('HH:mm'), x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
y: 14.18, y: 14.18,
}, },
{ {
x: now.minus({minutes: 8}).toFormat('HH:mm'), x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
y: 10.11, y: 10.11,
}, },
{ {
x: now.minus({minutes: 7}).toFormat('HH:mm'), x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
y: 12.70, y: 12.7,
}, },
{ {
x: now.minus({minutes: 6}).toFormat('HH:mm'), x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
y: 12.70, y: 12.7,
}, },
{ {
x: now.minus({minutes: 5}).toFormat('HH:mm'), x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
y: 12.77, y: 12.77,
}, },
{ {
x: now.minus({minutes: 4}).toFormat('HH:mm'), x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
y: 19.46, y: 19.46,
}, },
{ {
x: now.minus({minutes: 3}).toFormat('HH:mm'), x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
y: 11.04, y: 11.04,
}, },
{ {
x: now.minus({minutes: 2}).toFormat('HH:mm'), x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
y: 11.48, y: 11.48,
}, },
{ {
x: now.minus({minutes: 1}).toFormat('HH:mm'), x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
y: 11.30, y: 11.3,
}, },
], ],
}, },
@ -1196,4 +1196,3 @@ export const crypto = {
}, },
], ],
}; };

11
src/app/mock-api/dashboards/finance/api.ts
View File

@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
import { finance as financeData } from 'app/mock-api/dashboards/finance/data'; import { finance as financeData } from 'app/mock-api/dashboards/finance/data';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
@Injectable({providedIn: 'root'}) @Injectable({ providedIn: 'root' })
export class FinanceMockApi export class FinanceMockApi {
{
private _finance: any = financeData; private _finance: any = financeData;
/** /**
* Constructor * Constructor
*/ */
constructor(private _fuseMockApiService: FuseMockApiService) constructor(private _fuseMockApiService: FuseMockApiService) {
{
// Register Mock API handlers // Register Mock API handlers
this.registerHandlers(); this.registerHandlers();
} }
@ -24,8 +22,7 @@ export class FinanceMockApi
/** /**
* Register Mock API handlers * Register Mock API handlers
*/ */
registerHandlers(): void registerHandlers(): void {
{
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Sales - GET // @ Sales - GET
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------

1192
src/app/mock-api/dashboards/finance/data.ts
View File

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More