@cerema/cadriciel 1.1.0 → 1.1.1

package/aaaa/client/layout/config/app.config.component.ts

@@ -0,0 +1,241 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LayoutService } from '../service/app.layout.service';
+import { MenuService } from '../app.menu.service';
+import { MyLocalStorageService } from '../shared/core/storage/MyLocalStorageService';
+
+const NAME_KEY: string = 'TEMPLATE_NAME';
+const COLOR_KEY: string = 'TEMPLATE_COLOR';
+const SCALE_KEY: string = 'TEMPLATE_SCALE';
+const MENU_THEME_KEY: string = 'TEMPLATE_MENU_THEME';
+const MENU_MODE_KEY: string = 'TEMPLATE_MENU_MODE';
+const INPUT_STYLE_KEY: string = 'TEMPLATE_INPUT_STYLE';
+const RIPPLE_KEY: string = 'TEMPLATE_RIPPLE';
+
+@Component({
+  selector: 'app-config',
+  styleUrls: ['./app.config.component.scss'],
+  templateUrl: './app.config.component.html',
+})
+export class AppConfigComponent implements OnInit {
+  @Input() minimal: boolean = false;
+
+  componentThemes: any[] = [];
+
+  scales: number[] = [12, 13, 14, 15, 16];
+
+  constructor(
+    public layoutService: LayoutService,
+    public menuService: MenuService,
+    public storageService: MyLocalStorageService
+  ) {}
+
+  ngOnInit() {
+    this.componentThemes = [
+      { name: 'indigo', lightColor: '#4C63B6', darkColor: '#6A7EC2' },
+      { name: 'blue', lightColor: '#1992D4', darkColor: '#3BABE8' },
+      { name: 'green', lightColor: '#27AB83', darkColor: '#44D4A9' },
+      { name: 'deeppurple', lightColor: '#896FF4', darkColor: '#B1A0F8' },
+      { name: 'orange', lightColor: '#DE911D', darkColor: '#E8AB4F' },
+      { name: 'cyan', lightColor: '#00B9C6', darkColor: '#58CDD5' },
+      { name: 'yellow', lightColor: '#F9C404', darkColor: '#FDDD68' },
+      { name: 'pink', lightColor: '#C74B95', darkColor: '#D77FB4' },
+      { name: 'purple', lightColor: '#BA6FF4', darkColor: '#D1A0F8' },
+      { name: 'lime', lightColor: '#84BD20', darkColor: '#A3D44E' },
+    ];
+    this.restorePrefs();
+  }
+
+  private restorePrefs() {
+    // Si les deux préférences sont enregistrées on doit les restaurer en même temps,
+    // sinon on a une race condition entre les deux restaurations.
+    if (
+      this.storageService.getItem(NAME_KEY) &&
+      this.storageService.getItem(COLOR_KEY)
+    ) {
+      this.changeColorSchemeAndTheme(
+        this.storageService.getItem(COLOR_KEY) as string,
+        this.storageService.getItem(NAME_KEY) as string
+      );
+    } else {
+      if (this.storageService.getItem(NAME_KEY)) {
+        this.changeTheme(this.storageService.getItem(NAME_KEY) as string);
+      }
+      if (this.storageService.getItem(COLOR_KEY)) {
+        this.changeColorScheme(
+          this.storageService.getItem(COLOR_KEY) as string
+        );
+      }
+    }
+
+    if (this.storageService.getItem(SCALE_KEY)) {
+      this.scale = JSON.parse(this.storageService.getItem(SCALE_KEY) as string);
+      this.applyScale();
+    }
+    if (this.storageService.getItem(MENU_THEME_KEY)) {
+      this.menuTheme = this.storageService.getItem(MENU_THEME_KEY) as string;
+    }
+    if (this.storageService.getItem(MENU_MODE_KEY)) {
+      this.menuMode = this.storageService.getItem(MENU_MODE_KEY) as string;
+    }
+    if (this.storageService.getItem(INPUT_STYLE_KEY)) {
+      this.inputStyle = this.storageService.getItem(INPUT_STYLE_KEY) as string;
+    }
+    if (this.storageService.getItem(RIPPLE_KEY)) {
+      this.ripple = JSON.parse(
+        this.storageService.getItem(RIPPLE_KEY) as string
+      );
+    }
+  }
+
+  changeColorScheme(colorScheme: string) {
+    this.storageService.setItem(COLOR_KEY, colorScheme);
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const themeLinkHref = themeLink.getAttribute('href');
+    const currentColorScheme = 'theme-' + this.layoutService.config.colorScheme;
+    const newColorScheme = 'theme-' + colorScheme;
+    const newHref = themeLinkHref!.replace(currentColorScheme, newColorScheme);
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.colorScheme = colorScheme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  changeTheme(theme: string) {
+    this.storageService.setItem(NAME_KEY, theme);
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const newHref = themeLink
+      .getAttribute('href')!
+      .replace(this.layoutService.config.theme, theme);
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.theme = theme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  changeColorSchemeAndTheme(colorScheme: string, theme: string) {
+    this.storageService.setItem(COLOR_KEY, colorScheme);
+    this.storageService.setItem(NAME_KEY, theme);
+
+    const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+    const themeLinkHref = themeLink.getAttribute('href');
+
+    const currentColorScheme = 'theme-' + this.layoutService.config.colorScheme;
+    const newColorScheme = 'theme-' + colorScheme;
+
+    let newHref = themeLinkHref!.replace(currentColorScheme, newColorScheme);
+    newHref = newHref!.replace(this.layoutService.config.theme, theme);
+
+    this.replaceThemeLink(newHref, () => {
+      this.layoutService.config.colorScheme = colorScheme;
+      this.layoutService.config.theme = theme;
+      this.layoutService.onConfigUpdate();
+    });
+  }
+
+  replaceThemeLink(href: string, onComplete: Function) {
+    const id = 'theme-link';
+    const themeLink = <HTMLLinkElement>document.getElementById(id);
+    const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
+
+    cloneLinkElement.setAttribute('href', href);
+    cloneLinkElement.setAttribute('id', id + '-clone');
+
+    themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
+
+    cloneLinkElement.addEventListener('load', () => {
+      themeLink.remove();
+      cloneLinkElement.setAttribute('id', id);
+      onComplete();
+    });
+  }
+
+  isIE() {
+    return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+  }
+
+  onConfigButtonClick() {
+    this.layoutService.showConfigSidebar();
+  }
+
+  get currentTheme(): string {
+    return this.layoutService.config.theme;
+  }
+
+  get colorScheme(): string {
+    return this.layoutService.config.colorScheme;
+  }
+
+  set colorScheme(_val: string) {
+    this.changeColorScheme(_val);
+  }
+
+  get visible(): boolean {
+    return this.layoutService.state.configSidebarVisible;
+  }
+
+  set visible(_val: boolean) {
+    this.layoutService.state.configSidebarVisible = _val;
+  }
+
+  get scale(): number {
+    return this.layoutService.config.scale;
+  }
+
+  set scale(_val: number) {
+    this.storageService.setItem(SCALE_KEY, JSON.stringify(_val));
+    this.layoutService.config.scale = _val;
+  }
+
+  get menuTheme(): string {
+    return this.layoutService.config.layoutTheme;
+  }
+
+  set menuTheme(_val: string) {
+    this.storageService.setItem(MENU_THEME_KEY, _val);
+    this.layoutService.config.layoutTheme = _val;
+  }
+
+  get menuMode(): string {
+    return this.layoutService.config.menuMode;
+  }
+
+  set menuMode(_val: string) {
+    this.storageService.setItem(MENU_MODE_KEY, _val);
+    this.layoutService.config.menuMode = _val;
+    if (this.layoutService.isSlim()) {
+      this.menuService.reset();
+    }
+  }
+
+  get inputStyle(): string {
+    return this.layoutService.config.inputStyle;
+  }
+
+  set inputStyle(_val: string) {
+    this.storageService.setItem(INPUT_STYLE_KEY, _val);
+    this.layoutService.config.inputStyle = _val;
+  }
+
+  get ripple(): boolean {
+    return this.layoutService.config.ripple;
+  }
+
+  set ripple(_val: boolean) {
+    this.storageService.setItem(RIPPLE_KEY, JSON.stringify(_val));
+    this.layoutService.config.ripple = _val;
+  }
+
+  decrementScale() {
+    this.scale--;
+    this.applyScale();
+  }
+
+  incrementScale() {
+    this.scale++;
+    this.applyScale();
+  }
+
+  applyScale() {
+    document.documentElement.style.fontSize = this.scale + 'px';
+  }
+}

package/aaaa/client/layout/config/config.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SidebarModule } from 'primeng/sidebar';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { ButtonModule } from 'primeng/button';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { AppConfigComponent } from './app.config.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SidebarModule,
+    RadioButtonModule,
+    ButtonModule,
+    InputSwitchModule
+  ],
+  declarations: [
+    AppConfigComponent
+  ],
+  exports: [
+    AppConfigComponent
+  ]
+})
+export class AppConfigModule {
+}

package/aaaa/client/layout/main/main.component.html

@@ -0,0 +1,15 @@
+<div class="layout-container" [ngClass]="containerClass">
+  <app-topbar></app-topbar>
+  <app-sidebar></app-sidebar>
+  <div class="layout-content-wrapper">
+    <div class="layout-content">
+      <div class="layout-content-inner">
+        <app-breadcrumb></app-breadcrumb>
+        <router-outlet></router-outlet>
+        <app-footer></app-footer>
+      </div>
+    </div>
+  </div>
+  <app-config></app-config>
+</div>
+

package/aaaa/client/layout/main/main.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, testBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+import { HttpClienttestingModule } from '@angular/common/http/testing';
+import { RouterModule } from '@angular/router';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('AccueilComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async () => {
+    await testBed
+      .configuretestingModule({
+        declarations: [MainComponent],
+        providers: [],
+        imports: [
+          HttpClienttestingModule,
+          RouterModule.forRoot([], { relativeLinkResolution: 'corrected' }),
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      })
+      .compileComponents();
+  });
+  beforeEach(() => {
+    fixture = testBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/aaaa/client/layout/main/main.component.ts

@@ -0,0 +1,186 @@
+import { Component, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { UserService } from '../shared/service/user.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { filter, Subscription } from 'rxjs';
+import { AppSidebarComponent } from '../app.sidebar.component';
+import { AppTopBarComponent } from '../app.topbar.component';
+import { MenuService } from '../app.menu.service';
+import { LayoutService } from '../service/app.layout.service';
+import { TabCloseEvent } from '../api/tabcloseevent';
+import { Claims } from '../shared/entities/claims.model';
+
+@Component({
+  selector: 'app-accueil',
+  templateUrl: './main.component.html',
+})
+export class MainComponent implements OnInit {
+  overlayMenuOpenSubscription: Subscription;
+  tabOpenSubscription: Subscription;
+  tabCloseSubscription: Subscription;
+  menuOutsideClickListener: any;
+
+  @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+  @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
+
+  constructor(
+    private menuService: MenuService,
+    public layoutService: LayoutService,
+    public renderer: Renderer2,
+    public router: Router,
+    private oAuthService: OAuthService,
+    private userService: UserService,
+    private activatedRoute: ActivatedRoute
+  ) {
+    this.overlayMenuOpenSubscription =
+      this.layoutService.overlayOpen$.subscribe(() => {
+        if (!this.menuOutsideClickListener) {
+          this.menuOutsideClickListener = this.renderer.listen(
+            'document',
+            'click',
+            (event) => {
+              const isOutsideClicked = !(
+                this.appSidebar.el.nativeElement.isSameNode(event.target) ||
+                this.appSidebar.el.nativeElement.contains(event.target) ||
+                this.appTopbar.menuButton.nativeElement.isSameNode(
+                  event.target
+                ) ||
+                this.appTopbar.menuButton.nativeElement.contains(event.target)
+              );
+              if (isOutsideClicked) {
+                this.hideMenu();
+              }
+            }
+          );
+        }
+
+        if (this.layoutService.state.staticMenuMobileActive) {
+          this.blockBodyScroll();
+        }
+      });
+
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => {
+        this.hideMenu();
+      });
+
+    this.tabOpenSubscription = this.layoutService.tabOpen$.subscribe((tab) => {
+      this.router.navigate(tab.routerLink);
+      this.layoutService.openTab(tab);
+    });
+
+    this.tabCloseSubscription = this.layoutService.tabClose$.subscribe(
+      (event: TabCloseEvent) => {
+        if (
+          this.router.isActive(event.tab.routerLink[0], {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+          })
+        ) {
+          const tabs = this.layoutService.tabs;
+
+          if (tabs.length > 1) {
+            if (event.index === tabs.length - 1)
+              this.router.navigate(tabs[tabs.length - 2].routerLink);
+            else this.router.navigate(tabs[event.index + 1].routerLink);
+          } else {
+            this.router.navigate(['/']);
+          }
+        }
+
+        this.layoutService.closeTab(event.index);
+      }
+    );
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.data.subscribe((data) => {
+      this.userService.currentUser = data.user.body;
+      this.userService.addInfoFromClaims(
+        <Claims>this.oAuthService.getIdentityClaims()
+      );
+    });
+  }
+
+  blockBodyScroll(): void {
+    if (document.body.classList) {
+      document.body.classList.add('blocked-scroll');
+    } else {
+      document.body.className += ' blocked-scroll';
+    }
+  }
+
+  unblockBodyScroll(): void {
+    if (document.body.classList) {
+      document.body.classList.remove('blocked-scroll');
+    } else {
+      document.body.className = document.body.className.replace(
+        new RegExp(
+          '(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)',
+          'gi'
+        ),
+        ' '
+      );
+    }
+  }
+
+  hideMenu() {
+    this.layoutService.state.overlayMenuActive = false;
+    this.layoutService.state.staticMenuMobileActive = false;
+    this.layoutService.state.menuHoverActive = false;
+    this.menuService.reset();
+    if (this.menuOutsideClickListener) {
+      this.menuOutsideClickListener();
+      this.menuOutsideClickListener = null;
+    }
+    this.unblockBodyScroll();
+  }
+
+  get containerClass() {
+    return {
+      'layout-slim': this.layoutService.config.menuMode === 'slim',
+      'layout-static': this.layoutService.config.menuMode === 'static',
+      'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+      'layout-static-inactive':
+        this.layoutService.state.staticMenuDesktopInactive &&
+        this.layoutService.config.menuMode === 'static',
+      'p-input-filled': this.layoutService.config.inputStyle === 'outlined',
+      'p-ripple-disabled': !this.layoutService.config.ripple,
+      'layout-light':
+        this.layoutService.config.layoutTheme === 'colorScheme' &&
+        this.layoutService.config.colorScheme === 'light',
+      'layout-dark':
+        this.layoutService.config.layoutTheme === 'colorScheme' &&
+        this.layoutService.config.colorScheme === 'dark',
+      'layout-primary':
+        this.layoutService.config.colorScheme !== 'dark' &&
+        this.layoutService.config.layoutTheme === 'primaryColor',
+    };
+  }
+
+  ngOnDestroy() {
+    if (this.overlayMenuOpenSubscription) {
+      this.overlayMenuOpenSubscription.unsubscribe();
+    }
+
+    if (this.menuOutsideClickListener) {
+      this.menuOutsideClickListener();
+    }
+
+    if (this.tabOpenSubscription) {
+      this.tabOpenSubscription.unsubscribe();
+    }
+
+    if (this.tabCloseSubscription) {
+      this.tabCloseSubscription.unsubscribe();
+    }
+  }
+
+  onLogoutClick(event: MouseEvent) {
+    this.oAuthService.logOut();
+    event.preventDefault();
+  }
+}

package/aaaa/client/layout/main.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from './shared/shared.module';
+import { MainComponent } from './main/main.component';
+import { MainRoutingModule } from '../main-routing.module';
+import { DevRoutingModule } from './shared/dev/dev-routing.module';
+import { MenuModule } from 'primeng/menu';
+import { HttpClientModule } from '@angular/common/http';
+import { StyleClassModule } from 'primeng/styleclass';
+import { AppConfigModule } from './config/config.module';
+import { AppMenuitemComponent } from './app.menuitem.component';
+import { AppTopBarComponent } from './app.topbar.component';
+import { AppSidebarComponent } from './app.sidebar.component';
+import { AppFooterComponent } from './app.footer.component';
+import { AppMenuComponent } from './shared/components/app.menu.component';
+import { AppBreadcrumbComponent } from './app.breadcrumb.component';
+import { AppComponent } from '../app.component';
+import { InputTextModule } from 'primeng/inputtext';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+  declarations: [
+    MainComponent,
+    AppMenuitemComponent,
+    AppTopBarComponent,
+    AppSidebarComponent,
+    AppFooterComponent,
+    AppMenuComponent,
+    AppBreadcrumbComponent,
+    AppComponent,
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    MainRoutingModule,
+    DevRoutingModule,
+    HttpClientModule,
+    MenuModule,
+    StyleClassModule,
+    AppConfigModule,
+    InputTextModule,
+    TranslateModule,
+  ],
+})
+export class MainModule {}

package/aaaa/client/layout/service/app.layout.service.ts

@@ -0,0 +1,124 @@
+import { Injectable } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Subject } from 'rxjs';
+import { TabCloseEvent } from '../api/tabcloseevent';
+
+export interface AppConfig {
+  inputStyle: string;
+  colorScheme: string;
+  theme: string;
+  ripple: boolean;
+  menuMode: string;
+  layoutTheme: string;
+  scale: number;
+}
+
+interface LayoutState {
+  staticMenuDesktopInactive: boolean;
+  overlayMenuActive: boolean;
+  profileSidebarVisible: boolean;
+  configSidebarVisible: boolean;
+  staticMenuMobileActive: boolean;
+  menuHoverActive: boolean;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LayoutService {
+
+  config: AppConfig = {
+    ripple: true,
+    inputStyle: 'filled',
+    menuMode: 'slim',
+    colorScheme: 'light',
+    theme: 'blue',
+    layoutTheme: 'primaryColor',
+    scale: 13
+  };
+
+  state: LayoutState = {
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+  };
+
+  tabs: MenuItem[] = [];
+
+  private configUpdate = new Subject<AppConfig>();
+
+  private overlayOpen = new Subject<any>();
+
+  private tabOpen = new Subject<MenuItem>();
+
+  private tabClose = new Subject<TabCloseEvent>();
+
+  configUpdate$ = this.configUpdate.asObservable();
+
+  overlayOpen$ = this.overlayOpen.asObservable();
+
+  tabOpen$ = this.tabOpen.asObservable();
+
+  tabClose$ = this.tabClose.asObservable();
+
+  onMenuToggle() {
+    if (this.isDesktop()) {
+      this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
+    } else {
+      this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+
+      if (this.state.staticMenuMobileActive) {
+        this.overlayOpen.next(null);
+      }
+    }
+  }
+
+  onOverlaySubmenuOpen() {
+    this.overlayOpen.next(null);
+  }
+
+  showProfileSidebar() {
+    this.state.profileSidebarVisible = true;
+  }
+
+  showConfigSidebar() {
+    this.state.configSidebarVisible = true;
+  }
+
+  isDesktop() {
+    return window.innerWidth > 991;
+  }
+
+  isSlim() {
+    return this.config.menuMode === 'slim';
+  }
+
+  isMobile() {
+    return !this.isDesktop();
+  }
+
+  onConfigUpdate() {
+    this.configUpdate.next(this.config);
+  }
+
+  onTabOpen(value: MenuItem) {
+    this.tabOpen.next(value);
+  }
+
+  openTab(value: MenuItem) {
+    this.tabs = [...this.tabs, value];
+  }
+
+  onTabClose(value: MenuItem, index: number) {
+    this.tabClose.next({tab: value, index: index});
+  }
+
+  closeTab(index: number) {
+    this.tabs.splice(index, 1);
+    this.tabs = [...this.tabs];
+  }
+
+}