chrv-components 1.0.2 → 1.0.3

package/src/lib/chr-form/chr-form.component.ts

@@ -1,173 +0,0 @@
-import { CdkPortal } from '@angular/cdk/portal';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { type } from './chr-validators/type-validator';
-import { ValidatorFn } from '@angular/forms';
-import {
-  FormBuilder,
-  FormGroup,
-  Validators,
-  FormControl,
-} from '@angular/forms';
-import { decimal } from './chr-validators/decimal-validator';
-import { maxDate } from './chr-validators/max-date-validator';
-
-export interface ISearchFilter {
-  display: string;
-  callback?: Function;
-  tooltip?: string;
-}
-
-export interface IControlValidation {
-  rule: string;
-  value?: any;
-  display?: string;
-}
-
-export interface IControl {
-  label?: string;
-  name: string;
-  span?: string;
-  placeholder?: any;
-  width?: 'col' | 'row';
-  type:
-    | 'text'
-    | 'password'
-    | 'textArea'
-    | 'number'
-    | 'date'
-    | 'searchSelect'
-    | 'select';
-  value?: any;
-  data?: any[];
-  icon?: string;
-  iconCallback?: Function;
-  iconCallbackDisabled?: boolean;
-  iconTooltip?: string;
-  fn?: Function;
-  filters?: ISearchFilter[];
-  validations?: IControlValidation[];
-}
-
-export interface IFormSection {
-  title?: string;
-  controls: IControl[];
-}
-@Component({
-  selector: 'app-chr-form',
-  templateUrl: './chr-form.component.html',
-  styleUrls: ['./chr-form.component.scss'],
-})
-export class ChrFormComponent {
-  @Input() sections: IFormSection[] = [];
-  @Input() valid: boolean = false;
-  @Output() validChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  @Input() model: any;
-  @Output() modelChange: EventEmitter<any> = new EventEmitter<any>();
-
-  @Input() disabled: boolean = false;
-
-  @Output() valuesChange: EventEmitter<any> = new EventEmitter();
-
-  public form: FormGroup;
-  constructor(private builder: FormBuilder) {
-    this.form = builder.group({});
-  }
-
-  ngOnInit(): void {
-    this._initValidators();
-    this.form.valueChanges.subscribe((res) => {
-      this.valid = this.form.valid;
-      this.validChange.emit(this.form.valid);
-      this.valuesChange.emit(res);
-    });
-  }
-
-  value = (input?: string) => {
-    if (input) return this.form.controls[input]?.value;
-    return this.form.value;
-  };
-
-  setValue = (input: string, value: any) => {
-    if (input) this.form.controls[input]?.setValue(value);
-  };
-
-  isValid = (input?: string) => {
-    if (input) return this.form.controls[input]?.valid;
-    return this.valid;
-  };
-
-  isControlRequired = (control: IControl) => {
-    return control.validations?.find((v) => v.rule.toLowerCase() == 'required');
-  };
-
-  patchValue = (key: string, value: any) => {
-    this.form.patchValue({ [key]: value });
-  };
-
-  reset = () => {
-    this.form.reset();
-  };
-
-  private _initValidators() {
-    for (const section of this.sections) {
-      for (const input of section.controls) {
-        if (input.type == 'searchSelect' && !input.fn)
-          throw new Error(
-            "An input of type 'searchSelect' needs a display function !"
-          );
-        const control = new FormControl(
-          input.value,
-          this._getValidators(input.validations)
-        );
-        this.form.addControl(input.name, control);
-      }
-    }
-  }
-
-  private _getValidators = (validations?: IControlValidation[]) => {
-    const validators: ValidatorFn[] = [];
-    if (!validations) return validators;
-    //Switch case breaks the mobile app so we'll do if statements
-    for (const validation of validations) {
-      const rule = validation.rule.toLocaleLowerCase();
-      if (rule == 'min') {
-        validation.display = 'Cette valeur est trop petite !';
-        validators.push(Validators.min(validation.value));
-      }
-      if (rule == 'max') {
-        validation.display = 'Cette valeur est trop grande !';
-        validators.push(Validators.max(validation.value));
-      }
-      if (rule == 'required') {
-        validation.display = 'Ce champs est requis !';
-        validators.push(Validators.required);
-      }
-      if (rule == 'email') {
-        validation.display = "Cette adresse email n'est pas valide !";
-        validators.push(Validators.email);
-      }
-      if (rule == 'minlength') {
-        validation.display = 'Cette valeur est trop petite !';
-        validators.push(Validators.minLength(validation.value));
-      }
-      if (rule == 'maxlength') {
-        validation.display = 'Cette valeur est trop grande !';
-        validators.push(Validators.maxLength(validation.value));
-      }
-      if (rule == 'type') {
-        validation.display = "Cette valeur n'est pas valide !";
-        validators.push(type(validation.value));
-      }
-      if (rule == 'decimal') {
-        validation.display = `Le nombre de décimal n'est pas valide (max: ${validation.value}) !`;
-        validators.push(decimal(validation.value));
-      }
-      if (rule == 'maxdate') {
-        validation.display = `Cette date est trop grande ! (max: ${validation.value}) !`;
-        validators.push(maxDate(validation.value));
-      }
-    }
-    return validators;
-  };
-}

package/src/lib/chr-form/chr-validators/decimal-validator.ts

@@ -1,54 +0,0 @@
-import { Directive, forwardRef, Input, Injectable } from '@angular/core';
-import {
-  AbstractControl,
-  NG_VALIDATORS,
-  ValidationErrors,
-  Validator,
-  ValidatorFn,
-} from '@angular/forms';
-
-@Injectable({ providedIn: 'root' })
-@Directive({
-  selector: '[app-decimal]',
-  providers: [
-    {
-      provide: NG_VALIDATORS,
-      useExisting: DecimalValidatorDirective,
-      multi: true,
-    },
-  ],
-})
-export class DecimalValidatorDirective implements Validator {
-  @Input() amount: number;
-
-  validate(control: AbstractControl): ValidationErrors | null {
-    return this.amount ? decimal(this.amount)(control) : null;
-  }
-}
-
-export function decimal(amount: number): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const value = control.value;
-
-    if (!value) {
-      return null;
-    }
-
-    let isTooLong = false;
-
-    const str = `${value}`;
-    isTooLong =
-      str.indexOf(',') != -1
-        ? (str.split(',')[1] ? str.split(',')[1].length : 0) > amount
-        : str.indexOf('.') != -1
-        ? (str.split('.')[1] ? str.split('.')[1].length : 0) > amount
-        : false;
-
-    return isTooLong
-      ? ({
-          decimal: true,
-          max: amount,
-        } as ValidationErrors)
-      : null;
-  };
-}

package/src/lib/chr-form/chr-validators/max-date-validator.ts

@@ -1,48 +0,0 @@
-import { Directive, forwardRef, Input, Injectable } from '@angular/core';
-import {
-  AbstractControl,
-  NG_VALIDATORS,
-  ValidationErrors,
-  Validator,
-  ValidatorFn,
-} from '@angular/forms';
-import * as moment from 'moment';
-
-@Injectable({ providedIn: 'root' })
-@Directive({
-  selector: '[app-max-date]',
-  providers: [
-    {
-      provide: NG_VALIDATORS,
-      useExisting: MaxDateValidatorDirective,
-      multi: true,
-    },
-  ],
-})
-export class MaxDateValidatorDirective implements Validator {
-  @Input() date: Date;
-
-  validate(control: AbstractControl): ValidationErrors | null {
-    return this.date ? maxDate(this.date)(control) : null;
-  }
-}
-
-export function maxDate(date: Date): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const value = control.value;
-    if (!value) {
-      return null;
-    }
-
-    const maxDate = moment(date);
-    const inputDate = moment(value);
-
-    return !(inputDate.isValid() && inputDate.isBefore(maxDate))
-      ? ({
-          maxdate: true,
-          max: maxDate.toDate(),
-          actual: value,
-        } as ValidationErrors)
-      : null;
-  };
-}

package/src/lib/chr-form/chr-validators/type-validator.ts

@@ -1,47 +0,0 @@
-import { Directive, forwardRef, Input, Injectable } from '@angular/core';
-import {
-  AbstractControl,
-  NG_VALIDATORS,
-  ValidationErrors,
-  Validator,
-  ValidatorFn,
-} from '@angular/forms';
-
-@Injectable({ providedIn: 'root' })
-@Directive({
-  selector: '[app-type]',
-  providers: [
-    {
-      provide: NG_VALIDATORS,
-      useExisting: TypeValidatorDirective,
-      multi: true,
-    },
-  ],
-})
-export class TypeValidatorDirective implements Validator {
-  @Input() type: string;
-
-  validate(control: AbstractControl): ValidationErrors | null {
-    return this.type ? type(this.type)(control) : null;
-  }
-}
-
-export function type(type: string): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const value = control.value;
-
-    if (!value) {
-      return null;
-    }
-
-    const isType = typeof value == type;
-
-    return !isType
-      ? ({
-          type: true,
-          requiredType: type,
-          actualType: typeof value,
-        } as ValidationErrors)
-      : null;
-  };
-}

package/src/lib/chr-search-select/chr-search-select.component.html

@@ -1,19 +0,0 @@
-<div *ngIf="predicate" class="w-full dark:bg-slate-600 rounded-lg relative">
-  <div class="w-full relative">
-    <input #input type="text" matInput [formControl]="searchSelect" [(ngModel)]="model"
-      class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="{{ placeholder }}" required (keyup)="keyup.emit($event)" [matAutocomplete]="auto" />
-    <span *ngIf="filters" [matTooltip]="filters[filterIndex].tooltip || ''" matTooltipPosition="above"
-      class="absolute cursor-pointer top-[1px] right-[1.5px] h-[calc(100%_-_2px)] text-gray-900 dark:text-gray-400 px-1 border-l border-gray-300 rounded-r-md text-end opacity-100 bg-gray-50 dark:bg-gray-700 flex justify-center align-middle items-center"
-      (click)="filters ? increment() : void">{{ filters[filterIndex].display }}
-    </span>
-  </div>
-
-  <mat-autocomplete class="dark:!bg-slate-600 dark:!text-white rounded-lg" #auto="matAutocomplete" id="auto"
-    [displayWith]="getModelDisplay.bind(this)" (optionSelected)="emit($event.option.value)">
-    <mat-option class="dark:!bg-slate-600 dark:!text-gray-400 rounded-lg"
-      *ngFor="let model of filteredModelOptions | async" [value]="model" selected>
-      {{ getModelDisplay(model) }}
-    </mat-option>
-  </mat-autocomplete>
-</div>

package/src/lib/chr-search-select/chr-search-select.component.scss

@@ -1,3 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@import '../../../styles.scss';

package/src/lib/chr-search-select/chr-search-select.component.spec.ts

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

package/src/lib/chr-search-select/chr-search-select.component.ts

@@ -1,164 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  forwardRef,
-  ViewChild,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormControl,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import {
-  MatAutocomplete,
-  MatAutocompleteTrigger,
-} from '@angular/material/autocomplete';
-import {
-  Observable,
-  startWith,
-  map,
-  of,
-  combineLatest,
-  combineLatestAll,
-} from 'rxjs';
-
-export interface IInputSearchFilter {
-  display: string;
-  callback?: Function;
-  tooltip?: string;
-}
-
-@Component({
-  selector: 'app-chr-search-select',
-  templateUrl: './chr-search-select.component.html',
-  styleUrls: ['./chr-search-select.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: ChrSearchSelectComponent,
-    },
-  ],
-})
-export class ChrSearchSelectComponent implements ControlValueAccessor {
-  public predicate: boolean = true;
-
-  public searchSelect: FormControl = new FormControl();
-  public filteredModelOptions: Observable<any>;
-
-  public onTouched: any = () => {};
-
-  @Input() placeholder: string;
-  @Input() data: any[] = [];
-  @Input() display: Function;
-  @Input() disabled: boolean = false;
-  @Input() model: any | null = null;
-  @Output() modelChange: EventEmitter<any> = new EventEmitter();
-  @Output() keyup: EventEmitter<KeyboardEvent> =
-    new EventEmitter<KeyboardEvent>();
-
-  @Input() filters?: IInputSearchFilter[];
-  public filterIndex: number = 0;
-
-  ngOnInit() {
-    this.registerFilters();
-    this.registerAutoComplete();
-  }
-
-  getModelDisplay(model: any) {
-    return this.display?.(model);
-  }
-
-  emit(event: any) {
-    this.modelChange.emit(event);
-  }
-
-  writeValue(obj: any): void {
-    this.searchSelect.setValue(obj);
-  }
-
-  registerOnChange(fn: any): void {
-    this.searchSelect.valueChanges.subscribe((value) => {
-      this.checkNull(value);
-      fn(value);
-    });
-  }
-
-  checkNull(value: any | null) {
-    if (typeof value == 'string')
-      if (value == '' || value.trim() == '') this.setNull;
-    if (value == null || value == '') {
-      this.setNull();
-    }
-  }
-
-  setNull() {
-    this.emit(null);
-    this.model = null;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.searchSelect.markAsTouched = fn;
-  }
-
-  registerFilters = () => {
-    this.filteredModelOptions = this.searchSelect.valueChanges.pipe(
-      startWith(''),
-      map((value) => this._filterModel(value! || -1)),
-      map((values) => {
-        return this.filters && this.filters[this.filterIndex].callback
-          ? values.filter((r) => this.filters![this.filterIndex].callback!(r))
-          : values;
-      })
-    );
-  };
-
-  registerAutoComplete = () => {
-    //If there is only one value left,
-    this.filteredModelOptions.subscribe((values) => {
-      if (values.length == 1) {
-        this.emit(values[0]);
-      }
-    });
-  };
-
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    isDisabled ? this.searchSelect.disable() : this.searchSelect.enable();
-  }
-
-  increment = () => {
-    this.writeValue('');
-    const modulo = this.filters ? this.filters.length : 1;
-    this.filterIndex = (this.filterIndex + 1) % modulo;
-  };
-
-  getValue = () => {
-    return this.searchSelect.value;
-  };
-
-  void = () => {};
-
-  private _filterModel(value: number | string): any[] {
-    return typeof value == 'string'
-      ? this._doFilterModelString(`${value}`)
-      : this._doFilterModelInt(value);
-  }
-
-  private _doFilterModelInt = (id: number) => {
-    const tmp = this.data.find((r) => r.id == id);
-    return tmp ? tmp : [];
-  };
-
-  private _doFilterModelString(input: string) {
-    return this.data.filter((r) => this._filterValues(r, input));
-  }
-
-  private _filterValues(value: any, input: string) {
-    return `${this.getModelDisplay(value)}`
-      .toLowerCase()
-      .includes(input.toLowerCase());
-  }
-}

package/src/lib/chr-searchbar/chr-searchbar.component.html

@@ -1,10 +0,0 @@
-<div class="w-full">
-  <label>{{ label }}</label>
-  <input
-    matInput
-    [formControl]="searchBy"
-    placeholder="{{ placeholder }}"
-    type="text"
-    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-  />
-</div>

package/src/lib/chr-searchbar/chr-searchbar.component.spec.ts

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

package/src/lib/chr-searchbar/chr-searchbar.component.ts

@@ -1,23 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'app-chr-searchbar',
-  templateUrl: './chr-searchbar.component.html',
-  styleUrls: ['./chr-searchbar.component.scss'],
-})
-export class ChrSearchbarComponent {
-  @Input() model: string | null;
-  @Output() modelChange: EventEmitter<string> = new EventEmitter();
-  @Input() placeholder: string | null;
-  @Input() label: string | null;
-  public searchBy = new FormControl<string>('');
-
-  constructor() {
-    this.searchBy.valueChanges.subscribe((value) => this.emit(value));
-  }
-
-  emit(event: any) {
-    this.modelChange.emit(event);
-  }
-}

package/src/lib/chr-separator/chr-separator.component.html

@@ -1,3 +0,0 @@
-<div class="py-4">
-  <hr class="" />
-</div>

package/src/lib/chr-separator/chr-separator.component.scss

@@ -1,24 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@import '../../../styles.scss';
-
-$color-config: mat.get-color-config($chr-theme);
-$primary-palette: map.get($color-config, 'primary');
-$accent-palette: map.get($color-config, 'accent');
-
-
-table {
-    width: 100%;
-}
-
-.mat-column-actions {
-    text-align: right;
-}
-
-.mat-mdc-header-row {
-    background-color: mat.get-color-from-palette($accent-palette, A200);
-}
-
-::ng-deep .arrow-color .mat-sort-header-arrow {
-    color: black;
-}

package/src/lib/chr-separator/chr-separator.component.spec.ts

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

package/src/lib/chr-separator/chr-separator.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-chr-separator',
-  templateUrl: './chr-separator.component.html',
-  styleUrls: ['./chr-separator.component.scss']
-})
-export class ChrSeparatorComponent {
-
-}