@smartsoft001/crud-shell-angular 1.2.90 → 2.69.0

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

@@ -0,0 +1,69 @@
+import { Component, ElementRef, inject, OnInit } from '@angular/core';
+
+import {
+  BaseComponent,
+  ButtonComponent,
+  IButtonOptions,
+  PopoverService,
+  StyleService,
+} from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { CrudFacade } from '../../+state/crud.facade';
+
+@Component({
+  selector: 'smart-crud-export',
+  template: `
+    <div class="p-5">
+      <p class="my-2.5 mx-0">
+        <smart-button [options]="buttonExportCsvOptions" class="w-full block"
+          >CSV</smart-button
+        >
+      </p>
+      <p>
+        <smart-button [options]="buttonExportXlsxOptions" class="w-full block"
+          >XLSX</smart-button
+        >
+      </p>
+    </div>
+  `,
+  imports: [ButtonComponent],
+})
+export class ExportComponent<T extends IEntity<string>>
+  extends BaseComponent
+  implements OnInit
+{
+  private facade = inject(CrudFacade<T>);
+  private popoverService = inject(PopoverService);
+  private styleService = inject(StyleService);
+  private elementRef = inject(ElementRef);
+
+  buttonExportCsvOptions: IButtonOptions = this.initButtonExportOptions('csv');
+  buttonExportXlsxOptions: IButtonOptions =
+    this.initButtonExportOptions('xlsx');
+
+  ngOnInit(): void {
+    this.styleService.init(this.elementRef);
+  }
+
+  private initButtonExportOptions(format: string): IButtonOptions {
+    return {
+      click: () => {
+        this.facade.export(
+          {
+            ...this.facade.filter(),
+            offset: null,
+            limit: null,
+          },
+          format,
+        );
+
+        const loading = this.facade.loading();
+        if (loading) return;
+        this.popoverService.close();
+      },
+      loading: this.facade.loading,
+      expand: 'block',
+    };
+  }
+}

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

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

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

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

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

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

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

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

@@ -0,0 +1,109 @@
+<!--<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>-->
+}