@cityway/bo-ui 1.0.0 → 1.0.1

package/src/lib/components/form-field/form-field.component.ts

@@ -0,0 +1,256 @@
+import { Component, EventEmitter, HostBinding, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { FormFieldOption, FormFieldTypeEnum } from '../../enum/field-type.enum';
+import { NgxSliderModule, Options } from '@angular-slider/ngx-slider';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { NgbDropdownModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { ShowHidePasswordDirective } from '../../directives/show-hide-password';
+import { IconComponent } from '../icon/icon.component';
+
+export function rangeValidator(group: AbstractControl, type: 'date' | 'time' | 'datetime'): ValidationErrors | null {
+  const startControl = group.get('start');
+  const endControl = group.get('end');
+  const start = startControl?.value;
+  const end = endControl?.value;
+
+  if (!start || !end) return null;
+
+  let startValue: number;
+  let endValue: number;
+
+  switch (type) {
+    case 'time':
+      startValue = parseTime(start);
+      endValue = parseTime(end);
+      break;
+    case 'datetime':
+      startValue = new Date(start).getTime();
+      endValue = new Date(end).getTime();
+      break;
+    default: // date
+      startValue = new Date(start).setHours(0, 0, 0, 0);
+      endValue = new Date(end).setHours(0, 0, 0, 0);
+  }
+
+  if (startValue > endValue) {
+    // Marquer les enfants comme invalid
+    startControl?.setErrors({ ...startControl.errors, rangeInvalid: true });
+    endControl?.setErrors({ ...endControl.errors, rangeInvalid: true });
+    return { rangeInvalid: true };
+  } else {
+    // Supprimer l’erreur rangeInvalid si présente
+    if (startControl?.errors?.['rangeInvalid']) {
+      const { rangeInvalid, ...rest } = startControl.errors!;
+      startControl.setErrors(Object.keys(rest).length ? rest : null);
+    }
+    if (endControl?.errors?.['rangeInvalid']) {
+      const { rangeInvalid, ...rest } = endControl.errors!;
+      endControl.setErrors(Object.keys(rest).length ? rest : null);
+    }
+  }
+  return null;
+}
+
+function parseTime(time: string): number {
+  const [h, m] = time.split(':').map(Number);
+  return h * 60 + m;
+}
+
+
+@Component({
+  selector: 'app-form-field',
+  templateUrl: './form-field.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgSelectModule,
+    NgbDropdownModule,
+    NgxSliderModule,
+    NgbPopover,
+    ShowHidePasswordDirective,
+    IconComponent
+  ]
+})
+
+export class FormFieldComponent implements OnInit {
+
+  @Input() control!: AbstractControl;
+  @Input() formGroup!: FormGroup;
+  @Input() type: FormFieldTypeEnum;
+  @Input() label!: string;
+  @Input() name!: string;
+  @Input() placeholder!: string;
+  @Input() options: FormFieldOption[] = [];
+  @Input() isRequired = false;
+  @Input() help!: string;
+  @Input() tooltip!: string;
+  @Input() addonLeft!: TemplateRef<any>;
+  @Input() addonRight!: TemplateRef<any>;
+  @Input() isInAddon = false;
+  @Input() isReadonly = false;
+  @Input() isDisabled = false;
+  @Input() sliderValue!: number;
+  @Input() sliderOptions!: Options;
+  @Input() cssClass!: string;
+  @Input() inTableFilter = false;
+
+  @Output() clearFieldFilter = new EventEmitter<string>();
+  @Output() refreshEvent = new EventEmitter<void>();
+
+  public typeField = FormFieldTypeEnum;
+
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return 'position-relative';
+  }
+
+  constructor() { }
+
+  public get isRange(): boolean {
+    if (!this.control) return false;
+    return this.control instanceof FormGroup &&
+      'start' in (this.control as any).controls &&
+      'end' in (this.control as any).controls;
+  }
+
+  public get formControl(): FormControl {
+    return this.control as FormControl;
+  }
+
+  public get controlOrGroup() {
+    return this.control ?? this.formGroup?.get(this.name);
+  }
+
+  ngOnInit(): void {
+
+    console.log(this.isRange, this.control);
+
+    if (this.formGroup && this.name) {
+      const group = this.formGroup.get(this.name);
+      if (group instanceof FormGroup) {
+        switch (this.type) {
+          case this.typeField.dateToDate:
+            group.setValidators(g => rangeValidator(g, 'date'));
+            break;
+          case this.typeField.timeToTime:
+            group.setValidators(g => rangeValidator(g, 'time'));
+            break;
+          case this.typeField.dateTimeToDateTime:
+            group.setValidators(g => rangeValidator(g, 'datetime'));
+            break;
+        }
+        group.updateValueAndValidity();
+      }
+    }
+  }
+
+  public onCheckboxChange(event: Event) {
+    const checkbox = event.target as HTMLInputElement;
+    const valueArray = this.control.value || [];
+
+    if (checkbox.checked) {
+      this.control.setValue([...valueArray, checkbox.value]);
+    } else {
+      this.control.setValue(valueArray.filter((v: string) => v !== checkbox.value));
+    }
+
+    this.control.markAsTouched();
+  }
+
+  public onBlur() {
+    if (this.control && !this.control.touched) {
+      this.control.markAsTouched();
+    }
+  }
+
+  public isInInputGroup(): boolean {
+    const inInputGroup = [
+      this.typeField.text,
+      this.typeField.date,
+      this.typeField.time,
+      this.typeField.dateTime,
+      this.typeField.number,
+      this.typeField.email,
+      this.typeField.textarea,
+      this.typeField.password,
+    ].includes(this.type)
+    return inInputGroup;
+  }
+
+  public getControl(path: 'start' | 'end'): FormControl | null {
+    if (!this.isRange) return null;
+    const group = this.control as FormGroup<{ start: FormControl; end: FormControl }>;
+    return group.get(path) as FormControl;
+  }
+
+  public getInputType(): string {
+    switch (this.type) {
+      case this.typeField.dateToDate:
+        return 'date';
+      case this.typeField.timeToTime:
+        return 'time';
+      case this.typeField.dateTimeToDateTime:
+        return 'datetime-local';
+      default:
+        return 'text';
+    }
+  }
+
+  public onClearFieldFilter() {
+    this.clearFieldFilter.emit();
+  }
+
+  public onClearFieldPeriod(path: 'start' | 'end'): void {
+    const ctrl = this.getControl(path);
+    if (ctrl) {
+      ctrl.setValue(null);
+      ctrl.markAsPristine();
+      ctrl.markAsUntouched();
+    }
+  }
+
+  public onClearField(control: FormControl): void {
+    control?.setValue(null);
+    control?.markAsPristine();
+    control?.markAsUntouched();
+  }
+
+  public onDateAddDay(direction: 'prev' | 'next'): void {
+    const current = this.getDateValue();
+    if (current) {
+      const delta = direction === 'prev' ? -1 : 1;
+      current.setDate(current.getDate() + delta);
+      this.formControl.setValue(this.formatDate(current));
+    }
+  }
+
+  public onTodayAddDay(days: number): void {
+    const today = new Date();
+    today.setDate(today.getDate() + days);
+    this.formControl.setValue(this.formatDate(today));
+  }
+
+  public onRefresh(): void {
+    this.refreshEvent.emit();
+  }
+
+  private getDateValue(): Date | null {
+    const value = this.formControl.value;
+    if (!value) return null;
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+  }
+
+  private formatDate(date: Date): string {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+}

package/src/lib/components/icon/icon.component.html

@@ -0,0 +1,9 @@
+<span [class]="font + ' icon'" [ngClass]="[icon, !withOnlyIcon ? 'me-2' : '', iconCssClass ? iconCssClass : '']" aria-hidden="true"
+ [attr.style]="iconColorCustom ? 'color: ' + iconColorCustom : null"></span>
+
+@if (!withOnlyIcon) {
+  <span>{{ label }}</span>
+}
+@else {
+  <span class="visually-hidden">{{ label }}</span>
+}

package/src/lib/components/icon/icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/icon/icon.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+  standalone: true,
+  imports: [
+    CommonModule
+  ]
+})
+export class IconComponent implements OnInit {
+
+  @Input() icon = 'cw-alert-help';
+  @Input() font = 'optyweb';
+  @Input() withOnlyIcon = false;
+  @Input() label: string;
+  @Input() iconCssClass?: string;
+  @Input() iconColorCustom?: string;
+
+  constructor() { }
+
+  @HostBinding('class')
+
+  get hostClasses(): string {
+    return 'd-inline-flex align-items-center';
+  }
+
+  ngOnInit(): void {
+  }
+}

package/src/lib/components/layout/admin-layout/admin-layout.component.html

@@ -0,0 +1,17 @@
+<ngx-loading-bar></ngx-loading-bar>
+
+<app-skip-links></app-skip-links>
+
+
+<div class="wrapper">
+  <app-sidebar [isOpened]="isMenuOpened" class="bg-cover" [ngClass]="{'bg-closed' : !isMenuOpened, 'bg-opened' : isMenuOpened, 'responsive-menu': menuReponsiveMode}" (toggleSidenav)="onToggleMenu()"></app-sidebar>
+  <div class="wrapper-content flex-grow-1" [ngClass]="{'wrapper-content-closed' : !isMenuOpened, 'wrapper-content-opened' : isMenuOpened, 'wrapper-content-responsive': menuReponsiveMode}">
+    <app-header (toggleSidenav)="onToggleMenu()" [heading]="routeOptions.heading" [isMenuOpened]="isMenuOpened"
+      [headingUrlParamsOptions]="urlParamsOptions.value" [parent]="parentProperties"></app-header>
+    <main role="main" id="content" class="main-content">
+      <router-outlet>
+      </router-outlet>
+    </main>
+    <app-footer></app-footer>
+  </div>
+</div>

package/src/lib/components/layout/admin-layout/admin-layout.component.ts

@@ -0,0 +1,181 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { SkipLinksComponent } from '../skip-links/skip-links.component';
+import { FooterComponent } from '../footer/footer.component';
+import { HeaderComponent } from '../header/header.component';
+
+const SMALL_WIDTH_BREAKPOINT = 1300;
+
+export interface Options {
+  heading?: string;
+  parent?: Parent | Array<Parent>;
+  removeFooter?: boolean;
+}
+
+export interface Parent {
+  title: string;
+  link: string;
+}
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin-layout.component.html',
+  standalone: true,
+  imports: [
+    LoadingBarRouterModule,
+    CommonModule,
+    SidebarComponent,
+    SkipLinksComponent,
+    FooterComponent,
+    HeaderComponent
+  ]
+})
+export class AdminLayoutComponent implements OnInit, OnDestroy {
+
+  @ViewChild('sidebar', { static: false }) sidebar;
+  @ViewChild('sideMenu', { static: false }) sideMenu;
+
+  public parentProperties: Parent | Array<Parent>;
+  public routeOptions: Options;
+  public urlParamsOptions: any;
+  public formattedHeading: string;
+  public options = {
+    lang: 'en',
+    theme: 'test',
+    settings: false,
+    docked: false,
+    boxed: false,
+    opened: false
+  };
+  public lang: string = 'lang-fr';
+  public isMenuOpened: boolean = true;
+  public menuReponsiveMode: boolean;
+
+  private _router: Subscription;
+  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 992px)`);
+  private mediaMatcherLg: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
+
+  constructor(
+    private _element: ElementRef,
+    private router: Router,
+    private route: ActivatedRoute,
+    public translate: TranslateService,
+    private titleService: Title,
+    private zone: NgZone
+  ) {
+    this.mediaMatcherLg.addEventListener('change', this.handleMediaMatcherLg);
+    this.mediaMatcher.addEventListener('change', this.handleMediaMatcher);
+
+  }
+
+  ngOnInit(): void {
+    this._router = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+      // Scroll to top on view load
+      document.querySelector('.main-content').scrollTop = 0;
+      if (this.isOver()) {
+        this.sideMenu.close();
+      }
+      this.runOnRouteChange();
+    });
+    this.runOnRouteChange();
+    this.onLangChange();
+
+    this.lang = 'lang-' + localStorage.getItem('lang');
+
+    // Check résolution pour menu au chargement
+    this.handleMediaMatcherLg(this.mediaMatcherLg);
+    this.handleMediaMatcher(this.mediaMatcher);
+  }
+
+  ngOnDestroy() {
+    this._router.unsubscribe();
+
+    this.mediaMatcherLg.removeEventListener('change', this.handleMediaMatcherLg);
+    this.mediaMatcher.removeEventListener('change', this.handleMediaMatcher);
+  }
+
+  public isOver(): boolean {
+    return this.mediaMatcherLg.matches;
+  }
+
+  public isClosed(): void {
+    if (this.mediaMatcherLg.matches) {
+    }
+    console.log(this.sideMenu.opened);
+  }
+
+  public receiveMessage($event) {
+    this.options = $event;
+  }
+
+  public toggleFullscreen(): void {
+    const elem = this._element.nativeElement.querySelector('.main-content');
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullScreen) {
+      elem.msRequestFullScreen();
+    }
+  }
+
+  private runOnRouteChange(): void {
+    this.route.children.forEach((route: ActivatedRoute) => {
+      let activeRoute: ActivatedRoute = route;
+      while (activeRoute.firstChild) {
+        activeRoute = activeRoute.firstChild;
+      }
+      this.routeOptions = activeRoute.snapshot.data;
+      this.urlParamsOptions = activeRoute.params;
+    });
+
+    if (this.routeOptions.hasOwnProperty('heading')) {
+      // init a null des data qui seront envoye (permet d'avoir toujours un changement pour le OnChange dans l'enfant)
+      this.parentProperties = null;
+      // Si notre route a bien la propriete "Parent"
+      if (this.routeOptions.hasOwnProperty('parent')) {
+        // alors on remplie la variable qui sera envoyer a l'enfant
+        this.parentProperties = this.routeOptions.parent;
+      }
+      // set du titre
+      this.setTitle(this.translate.instant(this.routeOptions.heading, this.urlParamsOptions.value));
+    }
+  }
+
+  private onLangChange() {
+    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.setTitle(this.translate.instant(this.routeOptions.heading, this.urlParamsOptions.value));
+    });
+  }
+
+  private setTitle(newTitle: string) {
+    this.titleService.setTitle(
+      this.translate.instant(newTitle));
+  }
+
+  public onToggleMenu() {
+    this.isMenuOpened = !this.isMenuOpened;
+  }
+
+  private handleMediaMatcherLg = (event: MediaQueryList | MediaQueryListEvent) => {
+    this.zone.run(() => {
+      this.isMenuOpened = !event.matches;
+    });
+  };
+
+  private handleMediaMatcher = (event: MediaQueryList | MediaQueryListEvent) => {
+    this.zone.run(() => {
+      this.menuReponsiveMode = event.matches;
+    });
+  };
+
+}

package/src/lib/components/layout/footer/footer.component.html

@@ -0,0 +1,51 @@
+<footer role="contentinfo">
+  <nav class="navbar custom-navbar main-footer px-3">
+    <ul class="list-inline text-center mb-0">
+      <li class="list-inline-item">
+        <span class="me-1">Copyright &copy; {{today | date:'yyyy'}}</span>
+        Cityway
+      </li>
+      <!-- <li class="list-inline-item">
+        <a href="mailto:{{configuration.appSettings.emailSupport}}">{{configuration.appSettings.emailSupport}}</a>
+      </li>
+      <li class="list-inline-item">
+        @if (versions) {
+          <button type="button" class="btn btn-link p-0 border-0" (click)="open(modalversion, 'md')">
+            {{versions.bundle.version}}
+          </button>
+        }
+        @else {
+          {{configuration.appSettings.version}}
+        }
+      </li> -->
+    </ul>
+  </nav>
+</footer>
+
+<!-- <ng-template #modalversion let-c="close" let-d="dismiss">
+  <div class="modal-header">
+    <h1 id="modal-basic-title" class="modal-title">{{productVersion.name}} - {{productVersion.version}} </h1>
+    <button type="button" class="btn-close" attr.aria-label="{{'_COMMON._ACTION.CLOSE' | translate}}" (click)="close()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <p class="fw-bold">{{'_COMMON._VERSION.INCLUDED' | translate}}</p>
+
+    <table class="table table-bordered table-striped">
+      <caption class="visually-hidden"
+        [innerHTML]="'_COMMON._TABLE.CAPTION' | translate: { label: '_COMMON._VERSION.INCLUDED' | translate } ">
+      </caption>
+      <tbody>
+        <tr *ngFor="let version of versions.bundle.projects">
+          <td>{{version.name}}</td>
+          <td>{{version.version}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" (click)="close()">
+      {{'_COMMON._ACTION.CLOSE' | translate}}
+    </button>
+  </div>
+</ng-template> -->

package/src/lib/components/layout/footer/footer.component.ts

@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+// import { Configuration } from '../../../models/configuration/configuration';
+// import { KeyVersion, Version } from '../../../models/version';
+// import { VersionService } from '../../../services/version.service';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    CommonModule
+  ]
+})
+export class FooterComponent implements OnInit {
+  // public configuration: Configuration;
+  // public versions: Version;
+  // public productVersion: KeyVersion;
+  public modalRef: NgbModalRef;
+
+  private _today: number = Date.now();
+
+  constructor(
+    // private versionService: VersionService,
+    private modalService: NgbModal
+  ) {
+    // this.configuration = JSON.parse(localStorage.getItem('configuration')) as Configuration;
+  }
+
+  public get today(): number {
+    return this._today;
+  }
+  public set today(value: number) {
+    this._today = value;
+  }
+
+  ngOnInit(): void {
+    // this.versionService.get().subscribe({
+    //   next: (version: Version) => {
+    //     this.versions = version;
+    //     const keys = this.versions.bundle.projects.filter(x => x.name === this.configuration.appSettings.name);
+    //     if (keys[0]) {
+    //       this.productVersion = keys[0];
+    //     }
+    //   }
+    // });
+  }
+
+  public open(content, size: string = 'lg'): void {
+
+    this.modalRef = this.modalService.open(content, {
+      size,
+      ariaLabelledBy: 'modal-basic-title',
+      centered: true
+    });
+  }
+
+  public close(): void {
+    this.modalRef.dismiss();
+  }
+
+}