@smartsoft001/crud-shell-angular 1.2.91 → 2.69.0

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

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

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

@@ -0,0 +1,52 @@
+<!--<ion-item>-->
+@switch (item().fieldType) {
+  @case (FieldType.date) {
+    <smart-crud-filter-date
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-date>
+  }
+  @case (FieldType.dateWithEdit) {
+    <smart-crud-filter-date-with-edit
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-date-with-edit>
+  }
+  @case (FieldType.dateTime) {
+    <smart-crud-filter-date-time
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-date-time>
+  }
+  @case (FieldType.radio) {
+    <smart-crud-filter-radio
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-radio>
+  }
+  @case (FieldType.check) {
+    <smart-crud-filter-check
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-check>
+  }
+  @case (FieldType.flag) {
+    <smart-crud-filter-flag
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-flag>
+  }
+  @case (FieldType.int) {
+    <smart-crud-filter-int
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-int>
+  }
+  @default {
+    <smart-crud-filter-text
+      [item]="item()"
+      [filter]="filter()"
+    ></smart-crud-filter-text>
+  }
+}
+<!--</ion-item>-->

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

@@ -0,0 +1,34 @@
+import { Component, input } from '@angular/core';
+
+import { FieldType, IModelFilter } from '@smartsoft001/models';
+
+import { ICrudFilter } from '../../models';
+import { FilterCheckComponent } from './check/check.component';
+import { FilterDateComponent } from './date/date.component';
+import { FilterDateTimeComponent } from './date-time/date-time.component';
+import { FilterDateWithEditComponent } from './date-with-edit/date-with-edit.component';
+import { FilterFlagComponent } from './flag/flag.component';
+import { FilterIntComponent } from './int/int.component';
+import { FilterRadioComponent } from './radio/radio.component';
+import { FilterTextComponent } from './text/text.component';
+
+@Component({
+  selector: 'smart-crud-filter',
+  templateUrl: './filter.component.html',
+  imports: [
+    FilterTextComponent,
+    FilterIntComponent,
+    FilterFlagComponent,
+    FilterCheckComponent,
+    FilterRadioComponent,
+    FilterDateTimeComponent,
+    FilterDateWithEditComponent,
+    FilterDateComponent,
+  ],
+})
+export class FilterComponent {
+  FieldType = FieldType;
+
+  item = input<IModelFilter>();
+  filter = input<ICrudFilter>();
+}

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

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-filter-flag',
+  template: `
+    <!--    <ion-row>-->
+    <!--      <ion-col>-->
+    <div
+      class="flag-container w-full flex flex-row flex-nowrap justify-between pr-5"
+    >
+      <!--          <ion-label class="align-middle my-6" position="static">-->
+      {{ item().label | translate }}
+      <!--          </ion-label>-->
+      <!--          <ion-checkbox [(ngModel)]="value" slot="end"></ion-checkbox>-->
+    </div>
+    <!--      </ion-col>-->
+    @if (typeof value === 'boolean') {
+      <!--        <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>-->
+  `,
+  imports: [TranslatePipe, FormsModule],
+  styles: [
+    `
+      :host {
+        width: 100%;
+        .flag-container {
+          ion-label {
+            /*--color: var(--smart-color-dark);*/
+          }
+        }
+        .square-button {
+          height: var(--smart-button-height) !important;
+        }
+      }
+    `,
+  ],
+})
+export class FilterFlagComponent<
+  T extends IEntity<string>,
+> extends BaseComponent<T> {}

package/src/lib/components/filter/index.ts

@@ -0,0 +1,9 @@
+export * from './filter.component';
+export * from './date/date.component';
+export * from './date-with-edit/date-with-edit.component';
+export * from './date-time/date-time.component';
+export * from './radio/radio.component';
+export * from './text/text.component';
+export * from './flag/flag.component';
+export * from './check/check.component';
+export * from './int/int.component';

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

@@ -0,0 +1,74 @@
+<!--<ion-row>-->
+<!--  <ion-col>-->
+<!--    <ion-label>-->
+{{ item().label | translate }}
+<!--    </ion-label>-->
+@if (!advanced()) {
+  <!--      <ion-input [(ngModel)]="value" type="number" step="1"></ion-input>-->
+}
+<!--  </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 [(ngModel)]="minValue" type="number" step="1"></ion-input>-->
+  <!--      </ion-item>-->
+  <!--    </ion-col>-->
+  @if (minValue) {
+    <!--      <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 [(ngModel)]="maxValue" type="number" step="1"></ion-input>-->
+  <!--      </ion-item>-->
+  <!--    </ion-col>-->
+  @if (maxValue) {
+    <!--      <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/int/int.component.ts

@@ -0,0 +1,57 @@
+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 { BaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-filter-int',
+  templateUrl: './int.component.html',
+  imports: [TranslatePipe, FormsModule],
+  styles: [
+    `
+      :host {
+        width: 100%;
+        .square-button {
+          height: var(--smart-button-height) !important;
+        }
+      }
+    `,
+  ],
+})
+export class FilterIntComponent<T extends IEntity<string>>
+  extends BaseComponent<T>
+  implements OnInit, OnDestroy
+{
+  private _subscriptions = new Subscription();
+
+  advanced: WritableSignal<boolean> = signal<boolean>(false);
+
+  get allowAdvanced(): boolean {
+    return this.item()?.type === '=';
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy(): void {
+    if (this._subscriptions) {
+      this._subscriptions.unsubscribe();
+    }
+  }
+
+  toggleAdvanced(): void {
+    this.advanced.update((val) => !val);
+    if (this.advanced) this.value = null;
+  }
+}

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

@@ -0,0 +1,74 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-filter-radio',
+  template: `
+    <!--    <ion-row>-->
+    <!--      <ion-col>-->
+    <!--        <ion-radio-group [(ngModel)]="value">-->
+    <!--          <ion-item-divider class="font-light text-xl">-->
+    <!--            <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
+    <!--            <ion-label>-->
+    {{ item().label | translate }}
+    <!--            </ion-label>-->
+    @if (value || value === false) {
+      <!--              <ion-button-->
+      <!--                slot="end"-->
+      <!--                color="danger"-->
+      <!--                (click)="refresh(null)"-->
+      <!--                class="square-button m-0 text-lg h-9 w-9 p-0"-->
+      <!--              >-->
+      <!--                <ion-icon class="mr-6 text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
+      <!--              </ion-button>-->
+    }
+    <!--          </ion-item-divider>-->
+
+    @for (item of possibilities(); track item) {
+      <!--            <ion-item>-->
+      <!--              <ion-label>{{ item.text | translate }}</ion-label>-->
+      <!--              <ion-radio class="mr-10" [value]="item.id"></ion-radio>-->
+      <!--            </ion-item>-->
+    }
+    <!--        </ion-radio-group>-->
+    <!--      </ion-col>-->
+    <!--    </ion-row>-->
+  `,
+  imports: [TranslatePipe, FormsModule],
+  styles: [
+    `
+      :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;
+          }
+        }
+      }
+    `,
+  ],
+})
+export class FilterRadioComponent<
+  T extends IEntity<string>,
+> extends BaseComponent<T> {}

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

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { BaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-filter-text',
+  template: `
+    <!--    <ion-row>-->
+    <!--      <ion-col>-->
+    <!--        <ion-label position="floating">-->
+    {{ item().label | translate }}
+    <!--        </ion-label>-->
+    <!--        <ion-input [(ngModel)]="value"></ion-input>-->
+    <!--      </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>-->
+  `,
+  imports: [TranslatePipe, FormsModule],
+  styles: [
+    `
+      :host {
+        width: 100%;
+        .square-button {
+          height: var(--smart-button-height) !important;
+        }
+      }
+    `,
+  ],
+})
+export class FilterTextComponent<
+  T extends IEntity<string>,
+> extends BaseComponent<T> {}

package/src/lib/components/filters/filters.component.scss

@@ -0,0 +1,150 @@
+:host {
+  ion-toolbar {
+    //--background: linear-gradient(
+    //  33deg,
+    //  var(--ion-color-light),
+    //  var(--ion-color-light-shade)
+    //);
+    //--color: var(--ion-color-dark);
+    ion-modal & {
+      //--background: linear-gradient(
+      //  33deg,
+      //  var(--ion-color-light),
+      //  var(--ion-color-light-shade)
+      //);
+      //--color: var(--ion-color-dark);
+    }
+    // @media (max-width: var(--smart-tablet-breakpoint)) {
+    @media only screen and (max-width: 992px) {
+      //--background: linear-gradient(
+      //  33deg,
+      //  var(--ion-color-primary),
+      //  var(--ion-color-tertiary)
+      //);
+      //--color: var(--ion-color-light);
+      ion-modal & {
+        //--background: linear-gradient(
+        //  33deg,
+        //  var(--ion-color-light),
+        //  var(--ion-color-light-shade)
+        //);
+        //color: var(--ion-color-dark);
+      }
+    }
+    // @media (max-width: var(--smart-phone-breakpoint)) {
+    @media only screen and (max-width: 420px) {
+      //--background: linear-gradient(
+      //  33deg,
+      //  var(--ion-color-primary),
+      //  var(--ion-color-tertiary)
+      //);
+      //--color: var(--ion-color-light);
+      ion-modal & {
+        //--background: linear-gradient(
+        //  33deg,
+        //  var(--ion-color-light),
+        //  var(--ion-color-light-shade)
+        //);
+        //color: var(--ion-color-dark);
+      }
+    }
+    // TODO: verify ios can exist on the component, if not remove
+    &.ios {
+      height: 4.6rem;
+      //--background: linear-gradient(
+      //  33deg,
+      //  var(--ion-color-light),
+      //  var(--ion-color-light-shade)
+      //);
+      //--color: var(--ion-color-dark);
+      // @media (max-width: var(--smart-tablet-breakpoint)) {
+      @media only screen and (max-width: 992px) {
+        //--background: linear-gradient(
+        //  33deg,
+        //  var(--ion-color-primary),
+        //  var(--ion-color-tertiary)
+        //);
+        //--color: var(--ion-color-light);
+        ion-title {
+          //text-align: left;
+          //padding-left: 5.2rem;
+        }
+        ion-icon {
+          //color: var(--ion-color-light);
+        }
+      }
+      // @media (max-width: var(--smart-phone-breakpoint)) {
+      @media only screen and (max-width: 420px) {
+        //--background: linear-gradient(
+        //  33deg,
+        //  var(--ion-color-primary),
+        //  var(--ion-color-tertiary)
+        //);
+        //--color: var(--ion-color-light);
+        ion-title {
+          //text-align: left;
+          //padding-left: 5.2rem;
+        }
+        ion-icon {
+          //color: var(--ion-color-light);
+        }
+      }
+      .modal-wrapper & {
+        //--background: linear-gradient(
+        //  33deg,
+        //  var(--ion-color-light),
+        //  var(--ion-color-light-shade)
+        //);
+        //--color: var(--ion-color-dark);
+        // @media (max-width: var(--smart-tablet-breakpoint)) {
+        @media only screen and (max-width: 992px) {
+          //--background: linear-gradient(
+          //  33deg,
+          //  var(--ion-color-light),
+          //  var(--ion-color-light-shade)
+          //);
+          //color: var(--ion-color-dark);
+          ion-title {
+            //text-align: left;
+            //padding-left: 1.2rem;
+          }
+          ion-icon {
+            //color: var(--ion-color-dark);
+          }
+          ion-buttons {
+            //margin: 0;
+          }
+        }
+        // @media (max-width: var(--smart-phone-breakpoint)) {
+        @media only screen and (max-width: 420px) {
+          //--background: linear-gradient(
+          //  33deg,
+          //  var(--ion-color-light),
+          //  var(--ion-color-light-shade)
+          //);
+          //color: var(--ion-color-dark);
+          //ion-title {
+          //  text-align: left;
+          //  padding-left: 1.2rem;
+          //}
+          //ion-icon {
+          //  color: var(--ion-color-dark);
+          //}
+          //ion-buttons {
+          //  margin: 0;
+          //}
+        }
+      }
+    }
+    ion-menu-button {
+      //color: var(--ion-color-light);
+    }
+    ion-buttons {
+      //height: var(--smart-button-height);
+      &.ios {
+        height: var(--smart-button-height);
+        margin: 0;
+      }
+    }
+  }
+}