Verified Commit cb61ee8d authored by uncol's avatar uncol
Browse files

clarity partial loading

parent bfcf1fff
Pipeline #20967 passed with stages
in 13 minutes and 6 seconds
......@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
import * as fromRoot from '../reducers';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
@Component({
selector: 'noc-admin-home',
......@@ -34,7 +34,7 @@ export class HomeComponent implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.isNotApplication());
this.store.dispatch(LayoutActions.isNotApplication());
});
}
}
......@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
import * as fromRoot from '../reducers';
@Component({
......@@ -25,7 +25,7 @@ export class Item1Component implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
this.store.dispatch(LayoutActions.setApplication());
});
}
}
......@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromRoot from '../reducers';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
@Component({
selector: 'noc-admin-item2',
......@@ -23,7 +23,7 @@ export class Item2Component implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
this.store.dispatch(LayoutActions.setApplication());
});
}
}
......@@ -6,8 +6,8 @@ import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { metaReducers, ROOT_REDUCERS } from './reducers';
import { AppRoutingModule } from './app-routing.module';
import { metaReducers, ROOT_REDUCERS } from './reducers';
import { environment } from '../environments/environment';
import { CoreModule } from './core';
......
......@@ -3,3 +3,6 @@ import { createAction, props } from '@ngrx/store';
export const expandSidenav = createAction('[Layout] Expand Sidenav');
export const collapseSidenav = createAction('[Layout] Collapse Sidenav');
export const sidenavChangeTo = createAction('[Layout] Sidenav Change to', props<{ isCollapsed: boolean }>());
export const setApplication = createAction('[Layout] Set Application On');
export const isNotApplication = createAction('[Layout] Set Application Off');
......@@ -6,5 +6,3 @@ export const loadProjectsSuccess = createAction('[Navigation] Load Projects Succ
export const loadProjectsFailure = createAction('[Navigation] Load Projects Failure', props<{ error: string }>());
export const loadProjectMenu = createAction('[Navigation] Load Project Menu Items', props<{ verticalItems: VerticalNavItem[] }>());
export const cleanProjectMenu = createAction('[Navigation] Clean Project Menu');
export const setApplication = createAction('[Navigation] Set Application On');
export const isNotApplication = createAction('[Navigation] Set Application Off');
import { NgModule } from '@angular/core';
import { ClarityModule } from '@clr/angular';
import { ClrIconModule, ClrMainContainerModule, ClrNavigationModule, ClrVerticalNavModule } from '@clr/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
const modules = [BrowserAnimationsModule, ClarityModule];
const modules = [BrowserAnimationsModule, ClrIconModule, ClrNavigationModule, ClrVerticalNavModule, ClrMainContainerModule];
@NgModule({
declarations: [],
......
import { Component, Input } from '@angular/core';
import { VerticalNavItem } from '../models';
@Component({
selector: 'noc-header',
template: `
<clr-header class="header-6">
<header class="header-6">
<div class="branding">
<a href="/" class="nav-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="36px">
......@@ -29,7 +30,7 @@ import { VerticalNavItem } from '../models';
<clr-icon [attr.shape]="action.icon"></clr-icon>
</a>
</div>
</clr-header>
</header>
`,
styles: []
})
......
......@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ClrModule } from '../clarity';
import { ClrModule } from './clarity';
import {
HeaderComponent,
LayoutComponent,
......
......@@ -6,17 +6,22 @@ export const layoutFeatureKey = 'layout';
export interface State {
verticalNavCollapsed: boolean;
isNav: boolean;
}
const initialState: State = {
verticalNavCollapsed: true
verticalNavCollapsed: true,
isNav: true
};
export const reducer = createReducer(
initialState,
on(LayoutActions.collapseSidenav, () => ({verticalNavCollapsed: true})),
on(LayoutActions.expandSidenav, () => ({verticalNavCollapsed: false})),
on(LayoutActions.sidenavChangeTo, (state, {isCollapsed}) => ({...state, verticalNavCollapsed: isCollapsed}))
on(LayoutActions.collapseSidenav, (state) => ({...state, verticalNavCollapsed: true})),
on(LayoutActions.expandSidenav, (state) => ({...state, verticalNavCollapsed: false})),
on(LayoutActions.sidenavChangeTo, (state, {isCollapsed}) => ({...state, verticalNavCollapsed: isCollapsed})),
on(LayoutActions.isNotApplication, (state) => ({...state, isNav: true})),
on(LayoutActions.setApplication, (state) => ({...state, isNav: false}))
);
export const verticalNavCollapsed = (state: State) => state.verticalNavCollapsed;
export const isNav = (state: State) => state.isNav;
......@@ -8,7 +8,6 @@ export const navigationFeatureKey = 'navigation';
export interface State {
headerLinks: VerticalNavItem[];
verticalLinks: VerticalNavItem[];
isNav: boolean;
loading: boolean;
error: string | null;
}
......@@ -16,7 +15,6 @@ export interface State {
const initialState: State = {
headerLinks: [],
verticalLinks: [],
isNav: true,
loading: false,
error: null
};
......@@ -27,12 +25,10 @@ export const reducer = createReducer(
on(NavigationActions.loadProjectsSuccess, (state, {projects}) => ({...state, loading: false, headerLinks: projects})),
on(NavigationActions.loadProjectsFailure, (state, {error}) => ({...state, loading: false, error})),
on(NavigationActions.loadProjectMenu, (state, {verticalItems}) => ({...state, verticalLinks: verticalItems})),
on(NavigationActions.cleanProjectMenu, (state) => ({...state, verticalLinks: []})),
on(NavigationActions.isNotApplication, (state) => ({...state, isNav: true})),
on(NavigationActions.setApplication, (state) => ({...state, isNav: false}))
on(NavigationActions.cleanProjectMenu, (state) => ({...state, verticalLinks: []}))
);
export const headerLinks = (state: State) => state.headerLinks;
export const verticalLinks = (state: State) => state.verticalLinks;
export const headerLoading = (state: State) => state.loading;
export const isNav = (state: State) => state.isNav;
......@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
import * as fromRoot from '../reducers';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
@Component({
selector: 'noc-monitor-home',
......@@ -27,7 +27,7 @@ export class HomeComponent implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.isNotApplication());
this.store.dispatch(LayoutActions.isNotApplication());
});
}
......
......@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromRoot from '../reducers';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
@Component({
selector: 'noc-monitor-item1',
......@@ -23,7 +23,7 @@ export class Item1Component implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
this.store.dispatch(LayoutActions.setApplication());
});
}
}
......@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromRoot from '../reducers';
import { VerticalNavItem } from '../core/models';
import { NavigationActions } from '../core/actions';
import { LayoutActions, NavigationActions } from '../core/actions';
@Component({
selector: 'noc-monitor-item2',
......@@ -23,7 +23,7 @@ export class Item2Component implements OnInit {
];
setTimeout(() => {
this.store.dispatch(NavigationActions.loadProjectMenu({verticalItems: navItems}));
this.store.dispatch(NavigationActions.setApplication());
this.store.dispatch(LayoutActions.setApplication());
});
}
}
......@@ -49,6 +49,12 @@ export const verticalNavCollapsed = createSelector(
fromLayout.verticalNavCollapsed
);
export const isNav = createSelector(
selectLayoutState,
fromLayout.isNav
);
/**
* Navigation Reducers
*/
......@@ -70,8 +76,3 @@ export const verticalLinks = createSelector(
selectNavigationState,
fromNavigate.verticalLinks
);
export const isNav = createSelector(
selectNavigationState,
fromNavigate.isNav
);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment