purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 03:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(app.resolver) Use services to request the initial data

Browse Source 
(layouts) Common components of layouts now requests their data directly from their service rather than getting it from route data
(core) New navigation service to request and store the navigation data
This commit is contained in:
sercan 2021-06-08 17:29:45 +03:00
parent 89f5a4ec69
commit 9005f08ac7
51 changed files with 397 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/app.resolvers.ts
View File

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

19
src/app/app.types.ts
View File

@ -1,19 +0,0 @@
import { FuseNavigationItem } from '@fuse/components/navigation';
import { Message } from 'app/layout/common/messages/messages.types';
import { Notification } from 'app/layout/common/notifications/notifications.types';
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
import { User } from 'app/core/user/user.types';
export interface InitialData
{
messages: Message[];
navigation: {
compact: FuseNavigationItem[];
default: FuseNavigationItem[];
futuristic: FuseNavigationItem[];
horizontal: FuseNavigationItem[];
};
notifications: Notification[];
shortcuts: Shortcut[];
user: User;
}

2
src/app/core/config/app.config.ts
View File

@ -24,7 +24,7 @@ export interface AppConfig
* FuseConfigService and its methods.
*/
export const appConfig: AppConfig = {
layout: 'classy',
layout: 'classic',
scheme: 'light',
theme : 'default'
};

48
src/app/core/navigation/navigation.service.ts Normal file
View File

@ -0,0 +1,48 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Navigation } from 'app/core/navigation/navigation.types';
@Injectable({
providedIn: 'root'
})
export class NavigationService
{
private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for navigation
*/
get navigation$(): Observable<Navigation>
{
return this._navigation.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get all navigation data
*/
get(): Observable<Navigation>
{
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
tap((navigation) => {
this._navigation.next(navigation);
})
);
}
}

9
src/app/core/navigation/navigation.types.ts Normal file
View File

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

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

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import { User } from 'app/core/user/user.types';
@Injectable({
@ -42,6 +42,18 @@ export class UserService
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get the current logged in user data
*/
get(): Observable<User>
{
return this._httpClient.get<User>('api/common/user').pipe(
tap((user) => {
this._user.next(user);
})
);
}
/**
* Update the user
*
@ -51,7 +63,6 @@ export class UserService
{
return this._httpClient.patch<User>('api/common/user', {user}).pipe(
map((response) => {
// Execute the observable
this._user.next(response);
})
);

0
src/app/layout/common/language/language.component.html → src/app/layout/common/languages/languages.component.html
View File

8
src/app/layout/common/language/language.component.ts → src/app/layout/common/languages/languages.component.ts
View File

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

8
src/app/layout/common/language/language.module.ts → src/app/layout/common/languages/languages.module.ts
View File

@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { LanguageComponent } from 'app/layout/common/language/language.component';
import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
import { SharedModule } from 'app/shared/shared.module';
@NgModule({
declarations: [
LanguageComponent
LanguagesComponent
],
imports : [
MatButtonModule,
@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
SharedModule
],
exports : [
LanguageComponent
LanguagesComponent
]
})
export class LanguageModule
export class LanguagesModule
{
}

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { MatButton } from '@angular/material/button';
@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service';
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'messages'
})
export class MessagesComponent implements OnInit, OnChanges, OnDestroy
export class MessagesComponent implements OnInit, OnDestroy
{
@Input() messages: Message[];
@ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
@ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
messages: Message[];
unreadCount: number = 0;
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -40,21 +40,6 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Messages
if ( 'messages' in changes )
{
// Store the messages on the service
this._messagesService.store(changes.messages.currentValue);
}
}
/**
* On init
*/

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

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

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { MatButton } from '@angular/material/button';
@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'notifications'
})
export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
export class NotificationsComponent implements OnInit, OnDestroy
{
@Input() notifications: Notification[];
@ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
@ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
notifications: Notification[];
unreadCount: number = 0;
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -40,21 +40,6 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Notifications
if ( 'notifications' in changes )
{
// Store the notifications on the service
this._notificationsService.store(changes.notifications.currentValue);
}
}
/**
* On init
*/

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

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

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

@ -21,7 +21,15 @@
[svgIcon]="'heroicons_solid:x'"></mat-icon>
</button>
</div>
<div class="text-lg font-medium leading-10">Shortcuts</div>
<div class="flex items-center text-lg font-medium leading-10">
<span class="">Shortcuts</span>
<ng-container *ngIf="mode !== 'view'">
<span class="ml-1">
<ng-container *ngIf="mode === 'add'">- Add new</ng-container>
<ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
</span>
</ng-container>
</div>
<div class="ml-auto">
<!-- View mode -->

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

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'shortcuts'
})
export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
export class ShortcutsComponent implements OnInit, OnDestroy
{
@Input() shortcuts: Shortcut[];
@ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
@ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
shortcutForm: FormGroup;
shortcuts: Shortcut[];
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -43,21 +43,6 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Shortcuts
if ( 'shortcuts' in changes )
{
// Store the shortcuts on the service
this._shortcutsService.store(changes.shortcuts.currentValue);
}
}
/**
* On init
*/

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

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

0
src/app/layout/common/user-menu/user-menu.component.html → src/app/layout/common/user/user.component.html
View File

8
src/app/layout/common/user-menu/user-menu.component.ts → src/app/layout/common/user/user.component.ts
View File

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

8
src/app/layout/common/user-menu/user-menu.module.ts → src/app/layout/common/user/user.module.ts
View File

@ -3,12 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
import { UserComponent } from 'app/layout/common/user/user.component';
import { SharedModule } from 'app/shared/shared.module';
@NgModule({
declarations: [
UserMenuComponent
UserComponent
],
imports : [
MatButtonModule,
@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
SharedModule
],
exports : [
UserMenuComponent
UserComponent
]
})
export class UserMenuModule
export class UserModule
{
}

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

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

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

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

8
src/app/layout/layouts/horizontal/centered/centered.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/horizontal/material/material.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/horizontal/modern/modern.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/vertical/classic/classic.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

@ -3,7 +3,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -16,8 +16,8 @@
</div>
<!-- Components -->
<div class="flex items-center ml-auto">
<notifications [notifications]="data.notifications"></notifications>
<user-menu [showAvatar]="false"></user-menu>
<notifications></notifications>
<user [showAvatar]="false"></user>
</div>
</div>
<!-- User -->
@ -25,20 +25,20 @@
<div class="relative w-24 h-24">
<img
class="w-full h-full rounded-full"
*ngIf="data.user.avatar"
[src]="data.user.avatar"
*ngIf="user.avatar"
[src]="user.avatar"
alt="User avatar">
<mat-icon
class="icon-size-24"
*ngIf="!data.user.avatar"
*ngIf="!user.avatar"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
</div>
<div class="flex flex-col items-center justify-center w-full mt-6">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
{{data.user.name}}
{{user.name}}
</div>
<div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
{{data.user.email}}
{{user.email}}
</div>
</div>
</div>
@ -66,11 +66,11 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<shortcuts></shortcuts>
<messages></messages>
</div>
</div>

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

@ -1,10 +1,13 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { User } from 'app/core/user/user.types';
import { UserService } from 'app/core/user/user.service';
@Component({
selector : 'classy-layout',
@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
})
export class ClassyLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
user: User;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +27,8 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,10 +56,19 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
});
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to the user service
this._userService.user$
.pipe((takeUntil(this._unsubscribeAll)))
.subscribe((user: User) => {
this.user = user;
});
// Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$

8
src/app/layout/layouts/vertical/classy/classy.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/vertical/compact/compact.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/vertical/dense/dense.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

@ -3,7 +3,7 @@
class="dark bg-indigo-800 text-white print:hidden"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.futuristic"
[navigation]="navigation.futuristic"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationHeader>
@ -18,10 +18,10 @@
<ng-container fuseVerticalNavigationFooter>
<!-- User -->
<div class="flex items-center w-full px-6 py-8 border-t">
<user-menu></user-menu>
<user></user>
<div class="flex flex-col w-full ml-4 overflow-hidden">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
{{data.user.name}}
{{user.name}}
</div>
<div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
brian.hughes@company.com
@ -45,12 +45,12 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
</div>
</div>

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

@ -1,10 +1,13 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { User } from 'app/core/user/user.types';
import { UserService } from 'app/core/user/user.service';
@Component({
selector : 'futuristic-layout',
@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
})
export class FuturisticLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
user: User;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +27,8 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,10 +56,19 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
});
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to the user service
this._userService.user$
.pipe((takeUntil(this._unsubscribeAll)))
.subscribe((user: User) => {
this.user = user;
});
// Subscribe to media changes
this._fuseMediaWatcherService.onMediaChange$

8
src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

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

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

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

8
src/app/layout/layouts/vertical/thin/thin.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

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

@ -4,7 +4,7 @@ import * as moment from 'moment';
export const notifications = [
{
id : '493190c9-5b61-4912-afe5-78c21f1044d7',
icon : 'heroicons_outline:star',
icon : 'heroicons_solid:star',
title : 'Daily challenges',
description: 'Your submission has been accepted',
time : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
@ -21,7 +21,7 @@ export const notifications = [
},
{
id : 'b91ccb58-b06c-413b-b389-87010e03a120',
icon : 'heroicons_outline:mail',
icon : 'heroicons_solid:mail',
title : 'Mailbox',
description: 'You have 15 unread mails across 3 mailboxes',
time : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
@ -31,7 +31,7 @@ export const notifications = [
},
{
id : '541416c9-84a7-408a-8d74-27a43c38d797',
icon : 'heroicons_outline:refresh',
icon : 'heroicons_solid:refresh',
title : 'Cron jobs',
description: 'Your <em>Docker container</em> is ready to publish',
time : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
@ -59,7 +59,7 @@ export const notifications = [
},
{
id : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
icon : 'heroicons_outline:mail',
icon : 'heroicons_solid:mail',
title : 'Mailbox',
description: 'You have 3 new mails',
time : moment().subtract(1, 'day').toISOString(), // 1 day ago
@ -69,7 +69,7 @@ export const notifications = [
},
{
id : '8f8e1bf9-4661-4939-9e43-390957b60f42',
icon : 'heroicons_outline:star',
icon : 'heroicons_solid:star',
title : 'Daily challenges',
description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
time : moment().subtract(3, 'days').toISOString(), // 3 days ago
@ -79,7 +79,7 @@ export const notifications = [
},
{
id : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
icon : 'heroicons_outline:refresh',
icon : 'heroicons_solid:refresh',
title : 'Cron jobs',
description: 'Your Vagrant container is ready to download',
time : moment().subtract(4, 'day').toISOString(), // 4 days ago

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

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