@cityway/bo-ui 1.0.1 → 1.0.3

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

@@ -1,256 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,181 +0,0 @@
-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

@@ -1,51 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-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();
-  }
-
-}