@smartsoft001/crud-shell-angular 2.76.0 → 2.80.0

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

@@ -1,157 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  inject,
-  input,
-  InputSignal,
-  OnInit,
-  Signal,
-  WritableSignal,
-} from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-
-import { MenuService, StyleService } from '@smartsoft001/angular';
-import { IEntity } from '@smartsoft001/domain-core';
-import {
-  FieldType,
-  getModelFieldsWithOptions,
-  getModelOptions,
-  IFieldListMetadata,
-  IModelFilter,
-} from '@smartsoft001/models';
-
-import { CrudFacade } from '../../+state/crud.facade';
-import { CrudConfig } from '../../crud.config';
-import { ICrudFilter } from '../../models';
-import { FilterComponent } from '../filter';
-
-/**
- * This component is only to use in crud module
- * @requires CrudModule
- * @example
- *
- * html: <smart-crud-filters></smart-crud-filters>
- *
- * use on the model:
- * @Model({
-    titleKey: 'body',
-    filters: [
-        {
-            label: 'testNegation',
-            key: 'body',
-            type: '!=',
-        },
-        {
-            label: 'fromDate',
-            key: 'createDate',
-            type: '<=',
-            fieldType: FieldType.dateWithEdit
-        },
-        {
-            label: 'select',
-            key: 'type',
-            type: '=',
-            fieldType: FieldType.radio,
-            possibilities$: of([
-                {
-                    id: 1, text: 'Test 1'
-                },
-                {
-                    id: 2, text: 'Test 2'
-                }
-            ])
-        }
-    ]
-})
- *
- * use on the field (list.filter property):
- * @Field({
-        create: modifyMetdata,
-        update: {
-            ...modifyMetdata,
-            multi: true
-        },
-        type: FieldType.longText,
-        details: true,
-        list: {
-            order: 2,
-            filter: true
-        }
-    })
- body: string;
- */
-@Component({
-  selector: 'smart-crud-filters',
-  template: `
-    <!--<ion-header [hidden]="hideMenu()">-->
-    <!--  <ion-toolbar>-->
-    <!--    <ion-buttons slot="end">-->
-    <!--      <ion-button (click)="onClose()">-->
-    <!--        <ion-icon slot="icon-only" name="close"> </ion-icon>-->
-    <!--      </ion-button>-->
-    <!--    </ion-buttons>-->
-    <!--    <ion-title>{{ 'filters' | translate }}</ion-title>-->
-    <!--  </ion-toolbar>-->
-    <!--</ion-header>-->
-    <!--<ion-content style="height: 100vh">-->
-    <!--  <ion-list>-->
-    @for (item of list(); track item) {
-      <smart-crud-filter [item]="item" [filter]="filter()"></smart-crud-filter>
-    }
-    <!--  </ion-list>-->
-    <div class="h-20">&nbsp;</div>
-    <!--</ion-content>-->
-  `,
-  imports: [FilterComponent, TranslatePipe],
-  styleUrls: ['./filters.component.scss'],
-})
-export class FiltersComponent<T extends IEntity<string>> implements OnInit {
-  private menuService = inject(MenuService);
-  private config = inject(CrudConfig<T>);
-  private facade = inject(CrudFacade<T>);
-  private styleService = inject(StyleService);
-  private elementRef = inject(ElementRef);
-
-  list: WritableSignal<Array<IModelFilter>>;
-
-  filter: Signal<ICrudFilter | undefined>;
-
-  /**
-   * Hide menu used only from MenuService
-   */
-  readonly hideMenu: InputSignal<boolean> = input<boolean>(false);
-
-  async onClose(): Promise<void> {
-    await this.menuService.closeEnd();
-  }
-
-  ngOnInit(): void {
-    this.styleService.init(this.elementRef);
-
-    const modelFilters = getModelOptions(this.config.type).filters;
-
-    this.list.set([
-      ...(modelFilters
-        ? modelFilters.map((item) => {
-            if (!item.label) {
-              item.label = 'MODEL.' + item.key;
-            }
-            return item;
-          })
-        : []),
-      ...getModelFieldsWithOptions(new this.config.type())
-        .filter((item) => (item.options?.list as IFieldListMetadata)?.filter)
-        .map((item) => ({
-          key: item.key,
-          type:
-            item.options.type === FieldType.text ||
-            item.options.type === FieldType.longText
-              ? ('~=' as const)
-              : ('=' as const),
-          label: 'MODEL.' + item.key,
-          fieldType: item.options.type,
-        })),
-    ]);
-    this.filter = this.facade.filter;
-  }
-}

package/src/lib/components/filters-config/filters-config.component.ts

@@ -1,69 +0,0 @@
-import {
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  OnInit,
-  Signal,
-} from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-
-import { StyleService } from '@smartsoft001/angular';
-
-import { CrudFacade } from '../../+state/crud.facade';
-import { ICrudFilterQueryItem } from '../../models';
-
-@Component({
-  selector: 'smart-crud-filters-config',
-  template: `
-    @let query = this.query();
-    @if (query && query?.length) {
-      <!--  <ion-toolbar>-->
-      @for (item of query; track item) {
-        <!--      <ion-chip (click)="onRemoveQuery(item)" color="medium" outline="true">-->
-        <!--        <ion-icon name="filter-circle-outline" color="primary"></ion-icon>-->
-        <!--        <ion-label>-->
-        {{ 'MODEL.' + item.key | translate }} {{ item.type }}
-        {{ item.value | translate }}
-        <!--        </ion-label>-->
-        <!--        <ion-icon name="close" color="danger"></ion-icon>-->
-        <!--      </ion-chip>-->
-      }
-      <!--  </ion-toolbar>-->
-    }
-  `,
-  imports: [TranslatePipe],
-  styles: [
-    `
-      :host {
-        ion-label {
-          font-size: var(--small-font-size);
-        }
-      }
-    `,
-  ],
-})
-export class FiltersConfigComponent implements OnInit {
-  private readonly facade = inject(CrudFacade<any>);
-  private styleService = inject(StyleService);
-  private elementRef = inject(ElementRef);
-
-  query: Signal<ICrudFilterQueryItem[]>;
-
-  onRemoveQuery(item: ICrudFilterQueryItem): void {
-    const index = this.facade.filter().query.indexOf(item);
-    if (index > -1) {
-      this.facade.filter().query.splice(index, 1);
-    }
-    this.facade.read(this.facade.filter());
-  }
-
-  ngOnInit(): void {
-    this.styleService.init(this.elementRef);
-
-    this.query = computed(() => {
-      const filter = this.facade.filter();
-      return filter?.query?.filter((i) => !i.hidden);
-    });
-  }
-}

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

@@ -1,93 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-  Component,
-  ElementRef,
-  inject,
-  input,
-  InputSignal,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-
-import {
-  AccordionBodyComponent,
-  AccordionComponent,
-  AccordionHeaderComponent,
-  BaseComponent,
-  IListOptions,
-  ListComponent,
-  StyleService,
-} from '@smartsoft001/angular';
-import { IEntity } from '@smartsoft001/domain-core';
-
-import { ICrudListGroup } from '../../models';
-import { CrudListGroupService } from '../../services/list-group/list-group.service';
-
-@Component({
-  selector: 'smart-crud-group',
-  template: `
-    @for (item of groups(); track item.key) {
-      <smart-accordion [show]="item.show" (showChange)="change($event, item)">
-        <smart-accordion-header [ngClass]="{ 'font-bold': item.show }"
-          >{{ item.text | translate }}
-        </smart-accordion-header>
-        <smart-accordion-body>
-          @if (item.show && !item.children && listOptions) {
-            <smart-list [options]="listOptions()"></smart-list>
-          }
-          @if (item.children) {
-            <div style="margin-left: 50px">
-              <smart-crud-group
-                [groups]="item.children"
-                [listOptions]="listOptions()"
-              ></smart-crud-group>
-            </div>
-          }
-        </smart-accordion-body>
-      </smart-accordion>
-    }
-    <br /><br /><br />
-  `,
-  imports: [
-    AccordionComponent,
-    AccordionHeaderComponent,
-    AccordionBodyComponent,
-    ListComponent,
-    NgClass,
-    TranslatePipe,
-  ],
-})
-export class GroupComponent<T extends IEntity<string>>
-  extends BaseComponent
-  implements OnInit, OnDestroy
-{
-  private styleService = inject(StyleService);
-  private elementRef = inject(ElementRef);
-  private groupService = inject(CrudListGroupService<T>);
-
-  readonly groups: InputSignal<Array<ICrudListGroup>> =
-    input<Array<ICrudListGroup>>();
-  readonly listOptions: InputSignal<IListOptions<T>> = input<IListOptions<T>>();
-
-  change(val: boolean, item: ICrudListGroup, force = false): void {
-    this.groups()
-      .filter((i) => i.value !== item.value || i.key !== item.key)
-      .forEach((i) => {
-        i.show = false;
-      });
-
-    this.groupService.change(val, item, force);
-
-    item.show = val;
-  }
-
-  ngOnInit(): void {
-    this.styleService.init(this.elementRef);
-  }
-
-  ngOnDestroy(): void {
-    this.groupService.destroy(this.groups());
-    super.ngOnDestroy();
-  }
-}

package/src/lib/components/index.ts

@@ -1,7 +0,0 @@
-export * from './export/export.component';
-export * from './filter';
-export * from './filters/filters.component';
-export * from './filters-config/filters-config.component';
-export * from './multiselect/multiselect.component';
-export * from './group/group.component';
-export * from './components.module';

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

@@ -1,41 +0,0 @@
-@let list = this.list();
-@if (list) {
-  <!--  <ion-header>-->
-  <!--    <ion-toolbar>-->
-  <!--      <ion-buttons slot="end">-->
-  <!--        <ion-button (click)="onClose()">-->
-  <!--          <ion-icon slot="icon-only" name="close"> </ion-icon>-->
-  <!--        </ion-button>-->
-  <!--      </ion-buttons>-->
-  <!--<ion-title>-->{{ 'selected' | translate }}: {{ list?.length
-  }}<!--</ion-title>-->
-  <!--    </ion-toolbar>-->
-  <!--  </ion-header>-->
-
-  @if (config?.list?.components?.multi) {
-    <div>
-      <ng-template
-        [ngComponentOutlet]="config?.list?.components?.multi"
-        [ndcDynamicInputs]="{ items: list }"
-      ></ng-template>
-    </div>
-  }
-
-  @if (showForm && item) {
-    <div>
-      <smart-form
-        [options]="item | smartFormOptions: 'multiUpdate' : config.type"
-        (valuePartialChange)="onPartialChange($event, list)"
-        (validChange)="onValidChange($event)"
-      ></smart-form>
-
-      <smart-button
-        style="float: right"
-        [disabled]="lock || !valid"
-        [options]="buttonOptions"
-      >
-        {{ 'change' | translate }}
-      </smart-button>
-    </div>
-  }
-}

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

@@ -1,125 +0,0 @@
-//:host {
-//  ion-toolbar {
-//    --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);
-//    }
-//    // @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);
-//    }
-//    &.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;
-//      }
-//    }
-//  }
-//}

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

@@ -1,104 +0,0 @@
-import { NgComponentOutlet } from '@angular/common';
-import { Component, computed, inject, Signal } from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-import * as _ from 'lodash';
-import { DynamicIoDirective } from 'ng-dynamic-component';
-
-import {
-  ButtonComponent,
-  FormComponent,
-  IButtonOptions,
-  MenuService,
-} from '@smartsoft001/angular';
-import { IEntity } from '@smartsoft001/domain-core';
-import {
-  getModelFieldsWithOptions,
-  IFieldEditMetadata,
-} from '@smartsoft001/models';
-
-import { CrudFacade } from '../../+state/crud.facade';
-import { CrudFullConfig } from '../../crud.config';
-import { FormOptionsPipe } from '../../pipes';
-
-@Component({
-  selector: 'smart-crud-multiselect',
-  templateUrl: './multiselect.component.html',
-  imports: [
-    TranslatePipe,
-    NgComponentOutlet,
-    DynamicIoDirective,
-    FormOptionsPipe,
-    FormComponent,
-    ButtonComponent,
-  ],
-  styleUrls: ['./multiselect.component.scss'],
-})
-export class MultiselectComponent<T extends IEntity<string>> {
-  private facade = inject(CrudFacade<T>);
-  public config = inject(CrudFullConfig<T>);
-  private menuService = inject(MenuService);
-
-  private _list: Array<T>;
-  private _changes: Partial<T>;
-
-  item: T;
-  valid: boolean;
-  buttonOptions: IButtonOptions = {
-    click: async () => {
-      const result = this._list.map((item) => {
-        return {
-          ...this._changes,
-          id: item.id,
-        };
-      });
-
-      this.facade.updatePartialMany(result);
-      await this.menuService.closeEnd();
-    },
-    confirm: true,
-  };
-  lock: boolean;
-  showForm = false;
-
-  list: Signal<T[]>;
-
-  constructor() {
-    this.list = computed(() => {
-      const list = this.facade.multiSelected();
-      this.lock = true;
-      const model = new this.config.type();
-
-      const fieldsWithOptions = getModelFieldsWithOptions(model).filter(
-        (f) => (f.options.update as IFieldEditMetadata)?.multi,
-      );
-
-      this.showForm = !!fieldsWithOptions.length;
-
-      fieldsWithOptions.forEach(({ key }) => {
-        const uniques = _.uniq(list.map((i) => i[key]));
-
-        if (uniques.length === 1) {
-          model[key] = uniques[0];
-        }
-      });
-
-      this.item = model;
-
-      return list;
-    });
-  }
-
-  async onClose(): Promise<void> {
-    await this.menuService.closeEnd();
-  }
-
-  onPartialChange(changes: Partial<T>, list: Array<T>) {
-    this.lock = false;
-    this._list = list;
-    this._changes = changes;
-  }
-
-  onValidChange(valid: boolean) {
-    this.valid = valid;
-  }
-}

package/src/lib/crud-full.module.ts

@@ -1,51 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import { SharedModule } from '@smartsoft001/angular';
-import { IEntity } from '@smartsoft001/domain-core';
-
-import { CrudFacade } from './+state/crud.facade';
-import { CrudComponentsModule } from './components';
-import { CrudListPaginationFactory } from './factories/list-pagination/list-pagination.factory';
-import { ListComponent } from './pages';
-import { ItemComponent } from './pages';
-import { ListStandardComponent } from './pages';
-import { ItemStandardComponent } from './pages';
-import { CrudPipesModule } from './pipes';
-import { CrudService } from './services/crud/crud.service';
-import { CrudListGroupService } from './services/list-group/list-group.service';
-import { PageService } from './services/page/page.service';
-
-export const PAGES = [
-  ItemComponent,
-  ListComponent,
-  ListStandardComponent,
-  ItemStandardComponent,
-];
-
-@NgModule({
-  imports: [
-    ...PAGES,
-    SharedModule,
-    CrudPipesModule,
-    RouterModule.forChild([
-      { path: '', component: ListComponent },
-      { path: 'add', component: ItemComponent },
-      { path: ':id', component: ItemComponent },
-    ]),
-    FormsModule,
-    CommonModule,
-    CrudComponentsModule,
-  ],
-  exports: [...PAGES, CrudComponentsModule],
-  providers: [
-    CrudService,
-    CrudListGroupService,
-    PageService,
-    CrudFacade,
-    CrudListPaginationFactory,
-  ],
-})
-export class CrudFullModule<T extends IEntity<string>> {}