@smartsoft001/crud-shell-angular 1.2.91 → 2.69.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+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>> {}