@smartsoft001/crud-shell-angular 2.76.0 → 2.80.0

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

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

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

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

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

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

@@ -1,57 +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 { 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

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

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

@@ -1,150 +0,0 @@
-: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;
-      }
-    }
-  }
-}