@smartsoft001/crud-shell-angular 2.76.0 → 2.80.0

package/src/lib/components/filter/base/base.component.ts

@@ -1,175 +0,0 @@
-import {
-  Directive,
-  inject,
-  input,
-  InputSignal,
-  OnInit,
-  Signal,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { Debounce } from 'lodash-decorators';
-
-import { IEntity } from '@smartsoft001/domain-core';
-import { FieldType, IModelFilter } from '@smartsoft001/models';
-
-import { CrudFacade } from '../../../+state/crud.facade';
-import { ICrudFilter } from '../../../models';
-
-@Directive()
-export class BaseComponent<T extends IEntity<string>> implements OnInit {
-  protected facade = inject(CrudFacade<T>);
-  protected translateService = inject(TranslateService);
-
-  possibilities: Signal<{ id: any; text: string }[]>;
-
-  readonly item: InputSignal<IModelFilter> = input<IModelFilter>();
-  readonly filter: InputSignal<ICrudFilter> = input<ICrudFilter>();
-
-  get value(): any {
-    if (this.isArrayType()) {
-      return this.filter()
-        .query.filter(
-          (q) => q.key === this.item().key && q.type === this.item().type,
-        )
-        .map((q) => q.value);
-    }
-
-    const query = this.filter().query.find(
-      (q) => q.key === this.item().key && q.type === this.item().type,
-    );
-    return query?.value;
-  }
-
-  set value(val: any) {
-    this.refresh(val);
-  }
-
-  get minValue(): any {
-    if (this.isArrayType()) {
-      return this.filter()
-        .query.filter((q) => q.key === this.item().key && q.type === '>=')
-        .map((q) => q.value);
-    }
-
-    const query = this.filter().query.find(
-      (q) => q.key === this.item().key && q.type === '>=',
-    );
-    return query?.value;
-  }
-
-  set minValue(val: any) {
-    this.refresh(val, '>=');
-  }
-
-  get maxValue(): any {
-    if (this.isArrayType()) {
-      return this.filter()
-        .query.filter((q) => q.key === this.item().key && q.type === '<=')
-        .map((q) => q.value);
-    }
-
-    const query = this.filter().query.find(
-      (q) => q.key === this.item().key && q.type === '<=',
-    );
-    return query?.value;
-  }
-
-  set maxValue(val: any) {
-    this.refresh(val, '<=');
-  }
-
-  get lang(): string {
-    return this.translateService.currentLang;
-  }
-
-  @Debounce(500)
-  refresh(val: any, type = null): void {
-    if (!type) type = this.item().type;
-
-    this.filter().offset = 0;
-
-    if (this.isArrayType()) {
-      this.refreshForArray(val as [], type);
-      return;
-    }
-
-    let query = this.filter().query.find(
-      (q) => q.key === this.item().key && q.type === type,
-    );
-
-    if (val === null || val === undefined || val === '') {
-      const index = this.filter().query.indexOf(query);
-      if (index > -1) {
-        this.filter().query.splice(index, 1);
-      }
-
-      this.facade.read(this.filter());
-      return;
-    }
-
-    if (!query) {
-      query = {
-        key: this.item().key,
-        type: type,
-        value: null,
-      };
-
-      this.filter().query.push(query);
-    }
-
-    query.value = val;
-    query.label = this.item().label;
-
-    this.facade.read(this.filter());
-  }
-
-  clear(): void {
-    this.filter().query = this.filter().query.filter(
-      (q) => q.key !== this.item().key,
-    );
-    this.filter().offset = 0;
-    this.facade.read(this.filter());
-  }
-
-  ngOnInit(): void {
-    this.initPossibilities();
-  }
-
-  private initPossibilities(): void {
-    this.possibilities = this.item().possibilities;
-  }
-
-  private isArrayType(): boolean {
-    return this.item()?.fieldType === FieldType.check;
-  }
-
-  private refreshForArray(vals: [], type): void {
-    const queries = this.filter().query.filter(
-      (q) => q.key === this.item().key && q.type === type,
-    );
-
-    queries.forEach((query) => {
-      const index = this.filter().query.indexOf(query);
-      if (index > -1) {
-        this.filter().query.splice(index, 1);
-      }
-    });
-
-    if (vals === null || vals === undefined || !vals.length) {
-      this.facade.read(this.filter());
-      return;
-    }
-
-    vals.forEach((val) => {
-      const query = {
-        key: this.item().key,
-        type: type,
-        value: val,
-      };
-
-      this.filter().query.push(query);
-    });
-
-    this.facade.read(this.filter());
-  }
-}

package/src/lib/components/filter/check/check.component.scss

@@ -1,25 +0,0 @@
-:host {
-  width: 100%;
-  margin-bottom: 1.2rem;
-
-  ion-item-divider {
-    //--padding-end: 0.8rem;
-    //--ion-background-color: linear-gradient(
-    //  90deg,
-    //  transparent,
-    //  var(--ion-color-light)
-    //);
-    ion-icon {
-      //--color: var(--ion-color-primary);
-    }
-    ion-label {
-      //--padding: var(--smart-button-padding-left) / 2
-      //  var(--smart-button-padding-top) / 2 var(--smart-button-padding-right) /
-      //  2 var(--smart-button-padding-bottom) / 2;
-    }
-    .square-button {
-      //--padding-start: 0.2em;
-      //--padding-end: 0.2em;
-    }
-  }
-}

package/src/lib/components/filter/check/check.component.ts

@@ -1,72 +0,0 @@
-import { AfterContentInit, Component, computed, Signal } from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-
-import { IEntity } from '@smartsoft001/domain-core';
-
-import { BaseComponent } from '../base/base.component';
-
-@Component({
-  selector: 'smart-crud-filter-check',
-  template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-item-divider class="text-xl font-light">-->
-    <!--          <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
-    <!--          <ion-label>-->
-    {{ item().label | translate }}
-    <!--          </ion-label>-->
-    @if (value?.length) {
-      <!--            <ion-button-->
-      <!--              slot="end"-->
-      <!--              color="danger"-->
-      <!--              (click)="refresh([])"-->
-      <!--              class="square-button m-0 p-0 text-lg h-9 w-9"-->
-      <!--            >-->
-      <!--              <ion-icon class="text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--            </ion-button>-->
-    }
-    <!--        </ion-item-divider>-->
-
-    @for (entry of list(); track entry) {
-      <!--          <ion-item>-->
-      <!--<ion-label>-->{{ entry.value.text | translate
-      }}<!--</ion-label>-->
-      <!--            <ion-checkbox-->
-      <!--              slot="end"-->
-      <!--              [checked]="entry.isCheck"-->
-      <!--              (ionChange)="onCheckChange($event.detail.checked, entry)"-->
-      <!--            ></ion-checkbox>-->
-      <!--          </ion-item>-->
-    }
-    <!--      </ion-col>-->
-    <!--    </ion-row>-->
-  `,
-  imports: [TranslatePipe],
-  styleUrls: ['./check.component.scss'],
-})
-export class FilterCheckComponent<T extends IEntity<string>>
-  extends BaseComponent<T>
-  implements AfterContentInit
-{
-  list: Signal<{ value: any; isCheck: boolean }[]>;
-
-  ngAfterContentInit(): void {
-    this.list = computed(() => {
-      const possibilities = this.possibilities();
-      return possibilities.map((pos) => ({
-        value: pos,
-        isCheck: this.value.some((r) => r === pos.id),
-      }));
-    });
-  }
-
-  onCheckChange(checked: boolean, entry: { value: any; isCheck: boolean }) {
-    if (checked && !this.value.some((r) => r === entry.value.id)) {
-      this.value = [...this.value, entry.value.id];
-    }
-
-    if (!checked && this.value.some((r) => r === entry.value.id)) {
-      this.value = this.value.filter((r) => r !== entry.value.id);
-    }
-  }
-}

package/src/lib/components/filter/date/date.component.html

@@ -1,30 +0,0 @@
-<!--<ion-row>-->
-<!--  <ion-col>-->
-<!--    <ion-label>-->
-{{ item().label | translate }}
-<!--    </ion-label>-->
-<!--    <ion-item button="true" id="open-date-input-{{ id }}" color="primary">-->
-<!--      <ion-text>-->
-{{ customValue ? customValue : ('select' | translate) }}
-<!--      </ion-text>-->
-<!--      <ion-popover trigger="open-date-input-{{ id }}" show-backdrop="false">-->
-<ng-template>
-  <!--          <ion-datetime-->
-  <!--            displayFormat="YYYY-MM-DD"-->
-  <!--            pickerFormat="YYYY-MM-DD"-->
-  <!--            [(ngModel)]="customValue"-->
-  <!--            presentation="date"-->
-  <!--          ></ion-datetime>-->
-</ng-template>
-<!--      </ion-popover>-->
-<!--    </ion-item>-->
-<!--  </ion-col>-->
-
-@if (value) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button color="danger" (click)="refresh(null)" class="square-button m-3">-->
-  <!--        <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-<!--</ion-row>-->

package/src/lib/components/filter/date/date.component.ts

@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import moment from 'moment';
-
-import { IEntity } from '@smartsoft001/domain-core';
-import { GuidService } from '@smartsoft001/utils';
-
-import { BaseComponent } from '../base/base.component';
-
-@Component({
-  selector: 'smart-crud-filter-date',
-  templateUrl: './date.component.html',
-  imports: [FormsModule, TranslatePipe],
-  styles: [
-    `
-      :host {
-        width: 100%;
-        .square-button {
-          height: var(--smart-button-height) !important;
-        }
-      }
-    `,
-  ],
-})
-export class FilterDateComponent<
-  T extends IEntity<string>,
-> extends BaseComponent<T> {
-  id = GuidService.create();
-
-  get allowAdvanced(): boolean {
-    return this.item()?.type === '=';
-  }
-
-  set customValue(val) {
-    const momentDate = moment(val);
-    this.value =
-      (val as string)?.length >= 10 && momentDate.isValid()
-        ? momentDate.format('YYYY-MM-DD')
-        : val;
-  }
-
-  get customValue(): any {
-    return this.value;
-  }
-
-  set customMinValue(val) {
-    const momentDate = moment(val);
-    this.minValue =
-      (val as string)?.length >= 10 && momentDate.isValid()
-        ? momentDate.format('YYYY-MM-DD')
-        : val;
-  }
-
-  get customMinValue(): any {
-    return this.minValue;
-  }
-
-  set customMaxValue(val) {
-    const momentDate = moment(val);
-    this.maxValue =
-      (val as string)?.length >= 10 && momentDate.isValid()
-        ? momentDate.format('YYYY-MM-DD')
-        : val;
-  }
-
-  get customMaxValue(): any {
-    return this.maxValue;
-  }
-}

package/src/lib/components/filter/date-time/date-time.component.html

@@ -1,62 +0,0 @@
-<!--<ion-row>-->
-<!--  <ion-col>-->
-<!--    <ion-label>-->
-{{ item().label | translate }}
-<!--    </ion-label>-->
-<!--  </ion-col>-->
-@if (value || minValue || maxValue) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button color="danger" (click)="clear()" class="square-button m-3">-->
-  <!--        <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-<!--</ion-row>-->
-<!--<ion-row>-->
-<!--  <ion-col>-->
-<!--    <ion-item>-->
-<!--      <ion-label>-->
-{{ 'from' | translate }}
-<!--      </ion-label>-->
-<!--      <ion-input-->
-<!--        placeholder="YYYY-MM-DD HH:mm:ss"-->
-<!--        [(ngModel)]="customMinValue"-->
-<!--        pattern="^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$"-->
-<!--      ></ion-input>-->
-<!--    </ion-item>-->
-<!--  </ion-col>-->
-@if (customMinValue) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button-->
-  <!--        color="danger"-->
-  <!--        (click)="refresh(null, '>=')"-->
-  <!--        class="square-button m-3"-->
-  <!--      >-->
-  <!--        <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-<!--  <ion-col>-->
-<!--    <ion-item>-->
-<!--      <ion-label>-->
-{{ 'to' | translate }}
-<!--      </ion-label>-->
-<!--      <ion-input-->
-<!--        placeholder="YYYY-MM-DD HH:mm:ss"-->
-<!--        [(ngModel)]="customMaxValue"-->
-<!--        pattern="^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$"-->
-<!--      ></ion-input>-->
-<!--    </ion-item>-->
-<!--  </ion-col>-->
-@if (customMaxValue) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button-->
-  <!--        color="danger"-->
-  <!--        (click)="refresh(null, '<=')"-->
-  <!--        class="square-button m-3"-->
-  <!--      >-->
-  <!--        <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-<!--</ion-row>-->

package/src/lib/components/filter/date-time/date-time.component.ts

@@ -1,56 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-
-import { IEntity } from '@smartsoft001/domain-core';
-import { GuidService } from '@smartsoft001/utils';
-
-import { FilterDateComponent } from '../date/date.component';
-
-@Component({
-  selector: 'smart-crud-filter-date-time',
-  templateUrl: './date-time.component.html',
-  imports: [TranslatePipe, FormsModule],
-  styles: [
-    `
-      :host {
-        width: 100%;
-        .square-button {
-          height: var(--smart-button-height) !important;
-        }
-      }
-    `,
-  ],
-})
-export class FilterDateTimeComponent<T extends IEntity<string>>
-  extends FilterDateComponent<T>
-  implements OnInit, OnDestroy
-{
-  private _subscriptions = new Subscription();
-
-  id = GuidService.create();
-
-  // @ViewChild(IonDatetime, { read: IonDatetime, static: false })
-  // dateTimePicker: IonDatetime;
-
-  ngOnInit(): void {
-    super.ngOnInit();
-
-    // if (this.dateTimePicker) {
-    //   this._subscriptions.add(
-    //     this.dateTimePicker.ionChange.subscribe((val: CustomEvent) => {
-    //       this.customValue = val.detail.value;
-    //     }),
-    //   );
-    // } else {
-    //   console.error('dateTimePicker not found!');
-    // }
-  }
-
-  ngOnDestroy(): void {
-    if (this._subscriptions) {
-      this._subscriptions.unsubscribe();
-    }
-  }
-}

package/src/lib/components/filter/date-with-edit/date-with-edit.component.html

@@ -1,109 +0,0 @@
-<!--<ion-row>-->
-<!--  <ion-col>-->
-<!--    <ion-label>-->
-{{ item().label | translate }}
-<!--    </ion-label>-->
-
-@if (!advanced()) {
-  <!--      <ion-input-->
-  <!--        placeholder="YYYY-MM-DD"-->
-  <!--        [(ngModel)]="customValue"-->
-  <!--        [pattern]="'([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))'"-->
-  <!--      ></ion-input>-->
-}
-<!--  </ion-col>-->
-
-@if (!advanced()) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button id="open-date-input-{{ id }}" class="square-button m-3">-->
-  <!--        <ion-icon slot="icon-only" name="calendar-outline"></ion-icon>-->
-  <!--        <ion-popover trigger="open-date-input-{{ id }}" show-backdrop="false">-->
-  <ng-template>
-    <!--            <ion-datetime-->
-    <!--              displayFormat="YYYY-MM-DD"-->
-    <!--              pickerFormat="YYYY-MM-DD"-->
-    <!--              [(ngModel)]="customValue"-->
-    <!--              presentation="date"-->
-    <!--              first-day-of-week="1"-->
-    <!--              locale="{{ lang }}"-->
-    <!--            ></ion-datetime>-->
-  </ng-template>
-  <!--        </ion-popover>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-@if (allowAdvanced) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button-->
-  <!--        (click)="toggleAdvanced()"-->
-  <!--        class="square-button m-3"-->
-  <!--        [disabled]="minValue || maxValue"-->
-  <!--      >-->
-  @if (!advanced()) {
-    <!--          <ion-icon slot="icon-only" name="settings-outline"></ion-icon>-->
-  } @else {
-    <!--          <ion-icon slot="icon-only" name="settings"></ion-icon>-->
-  }
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-@if (value || minValue || maxValue) {
-  <!--    <ion-col size="auto">-->
-  <!--      <ion-button color="danger" (click)="clear()" class="square-button m-3">-->
-  <!--        <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-  <!--      </ion-button>-->
-  <!--    </ion-col>-->
-}
-<!--</ion-row>-->
-
-@if ((advanced() || minValue || maxValue) && allowAdvanced) {
-  <!--  <ion-row>-->
-  <!--    <ion-col>-->
-  <!--      <ion-item>-->
-  <!--        <ion-label>-->
-  {{ 'from' | translate }}
-  <!--        </ion-label>-->
-  <!--        <ion-input-->
-  <!--          placeholder="YYYY-MM-DD"-->
-  <!--          [(ngModel)]="customMinValue"-->
-  <!--          [pattern]="'([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))'"-->
-  <!--        ></ion-input>-->
-  <!--      </ion-item>-->
-  <!--    </ion-col>-->
-  @if (customMinValue) {
-    <!--      <ion-col size="auto">-->
-    <!--        <ion-button-->
-    <!--          color="danger"-->
-    <!--          (click)="refresh(null, '>=')"-->
-    <!--          class="square-button m-3"-->
-    <!--        >-->
-    <!--          <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-    <!--        </ion-button>-->
-    <!--      </ion-col>-->
-  }
-  <!--    <ion-col>-->
-  <!--      <ion-item>-->
-  <!--        <ion-label>-->
-  {{ 'to' | translate }}
-  <!--        </ion-label>-->
-  <!--        <ion-input-->
-  <!--          placeholder="YYYY-MM-DD"-->
-  <!--          [(ngModel)]="customMaxValue"-->
-  <!--          [pattern]="'([12]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))'"-->
-  <!--        ></ion-input>-->
-  <!--      </ion-item>-->
-  <!--    </ion-col>-->
-
-  @if (customMaxValue) {
-    <!--      <ion-col size="auto">-->
-    <!--        <ion-button-->
-    <!--          color="danger"-->
-    <!--          (click)="refresh(null, '<=')"-->
-    <!--          class="square-button m-3"-->
-    <!--        >-->
-    <!--          <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-    <!--        </ion-button>-->
-    <!--      </ion-col>-->
-  }
-  <!--  </ion-row>-->
-}

package/src/lib/components/filter/date-with-edit/date-with-edit.component.ts

@@ -1,70 +0,0 @@
-import {
-  Component,
-  OnDestroy,
-  OnInit,
-  signal,
-  WritableSignal,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-
-import { IEntity } from '@smartsoft001/domain-core';
-import { GuidService } from '@smartsoft001/utils';
-
-import { FilterDateComponent } from '../date/date.component';
-
-@Component({
-  selector: 'smart-crud-filter-date-with-edit',
-  templateUrl: './date-with-edit.component.html',
-  imports: [TranslatePipe, FormsModule],
-  styles: [
-    `
-      :host {
-        width: 100%;
-        .square-button {
-          height: var(--smart-button-height) !important;
-        }
-      }
-    `,
-  ],
-})
-export class FilterDateWithEditComponent<T extends IEntity<string>>
-  extends FilterDateComponent<T>
-  implements OnInit, OnDestroy
-{
-  private _subscriptions = new Subscription();
-
-  advanced: WritableSignal<boolean> = signal(false);
-  id = GuidService.create();
-
-  // @ViewChild(IonDatetime, { read: IonDatetime, static: false })
-  // dateTimePicker: IonDatetime;
-
-  toggleAdvanced(): void {
-    this.advanced.update((val) => !val);
-    if (this.advanced) {
-      this.value = null;
-    }
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-
-    // if (this.dateTimePicker) {
-    //   this._subscriptions.add(
-    //     this.dateTimePicker.ionChange.subscribe((val: CustomEvent) => {
-    //       this.customValue = val.detail.value;
-    //     }),
-    //   );
-    // } else {
-    //   console.error('dateTimePicker not found!');
-    // }
-  }
-
-  ngOnDestroy(): void {
-    if (this._subscriptions) {
-      this._subscriptions.unsubscribe();
-    }
-  }
-}