@smartsoft001/crud-shell-angular 1.2.91 → 2.70.0

package/src/lib/pages/list/list.component.ts

@@ -0,0 +1,438 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentFactory,
+  computed,
+  inject,
+  Injector,
+  input,
+  OnDestroy,
+  OnInit,
+  Signal,
+  TemplateRef,
+  viewChild,
+  viewChildren,
+  ViewContainerRef,
+  WritableSignal,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+
+import {
+  CreateDynamicComponent,
+  DynamicComponentLoader,
+  DynamicContentDirective,
+  HardwareService,
+  IIconButtonOptions,
+  IListOptions,
+  IPageOptions,
+  ListMode,
+  MenuService,
+  PageComponent,
+} from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+import {
+  getModelFieldsWithOptions,
+  getModelOptions,
+  IFieldEditMetadata,
+  IFieldListMetadata,
+} from '@smartsoft001/models';
+import { SpecificationService } from '@smartsoft001/utils';
+
+import { CrudFacade } from '../../+state/crud.facade';
+import { ExportComponent } from '../../components';
+import { FiltersComponent } from '../../components';
+import { MultiselectComponent } from '../../components';
+import { CrudFullConfig } from '../../crud.config';
+import { CrudListPageBaseComponent } from './base/base.component';
+import { CrudListPaginationFactory } from '../../factories/list-pagination/list-pagination.factory';
+import { ICrudFilter } from '../../models';
+import { ListStandardComponent } from './standard/standard.component';
+import { PageService } from '../../services/page/page.service';
+import { CrudSearchService } from '../../services/search/search.service';
+
+@Component({
+  selector: 'smart-crud-list-page',
+  imports: [PageComponent, ListStandardComponent, NgTemplateOutlet],
+  template: `
+    @if (filter()) {
+      <smart-page [options]="pageOptions()">
+        <div #topTpl></div>
+
+        @if (template() === 'default') {
+          <smart-crud-list-standard-page [listOptions]="listOptions()">
+            <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+          </smart-crud-list-standard-page>
+        }
+        <ng-template #contentTpl>
+          <ng-content></ng-content>
+        </ng-template>
+        <div class="dynamic-content"></div>
+      </smart-page>
+    }
+  `,
+})
+export class ListComponent<T extends IEntity<string>>
+  extends CreateDynamicComponent<CrudListPageBaseComponent<any>>(
+    'crud-list-page',
+  )
+  implements OnInit, OnDestroy
+{
+  private facade = inject(CrudFacade<T>);
+  private router = inject(Router);
+  private dynamicComponentLoader = inject(DynamicComponentLoader<T>);
+  private injector = inject(Injector);
+  private cd = inject(ChangeDetectorRef);
+  private menuService = inject(MenuService);
+  private hardwareService = inject(HardwareService);
+  private paginationFacade = inject(CrudListPaginationFactory<T>);
+  private pageService = inject(PageService<T>);
+  public config = inject(CrudFullConfig<T>);
+  private searchService = inject(CrudSearchService);
+
+  private _cleanMultiSelected$ = new Subject<void>();
+
+  pageOptions: Signal<IPageOptions>;
+  listOptions: WritableSignal<IListOptions<T>>;
+  links: { next; prev };
+
+  filter: Signal<ICrudFilter> = this.facade.filter;
+
+  topTpl = viewChild<ViewContainerRef>('topTpl');
+
+  contentTpl = viewChild<TemplateRef<any>>('contentTpl');
+
+  dynamicContents = viewChildren<DynamicContentDirective>(
+    DynamicContentDirective,
+  );
+
+  constructor() {
+    super();
+
+    this.links = this.facade.links();
+  }
+
+  refreshProperties(): void {
+    this.baseComponentRef.setInput('listOptions', this.listOptions());
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.pageService.checkPermissions();
+
+    const options = getModelOptions(this.config.type);
+
+    let newFilter = null;
+
+    if (this.config.list?.resetQuery === 'beforeInit') {
+      newFilter = {
+        query: this.config.baseQuery ? [...this.config.baseQuery] : [],
+        paginationMode: this.config.list.paginationMode,
+        limit: this.config.pagination ? this.config.pagination.limit : null,
+        offset: this.config.pagination ? 0 : null,
+        sortBy: this.config.sort ? this.config.sort['default'] : null,
+        sortDesc: this.config.sort ? this.config.sort['defaultDesc'] : null,
+        ...this.searchService.filter,
+      };
+    } else if (this.filter()) {
+      newFilter = this.filter();
+    } else {
+      newFilter = {
+        paginationMode: this.config.list.paginationMode,
+        limit: this.searchService.filter?.limit
+          ? this.searchService.filter.limit
+          : this.config.pagination
+            ? this.config.pagination.limit
+            : null,
+        offset:
+          this.searchService.filter?.offset ||
+          this.searchService.filter?.offset === 0
+            ? this.searchService.filter.offset
+            : this.config.pagination
+              ? 0
+              : null,
+        sortBy: this.searchService.filter?.sortBy
+          ? this.searchService.filter.sortBy
+          : this.config.sort
+            ? this.config.sort['default']
+            : null,
+        sortDesc: this.searchService.filter?.sortDesc
+          ? this.searchService.filter.sortDesc
+          : this.config.sort
+            ? this.config.sort['defaultDesc']
+            : null,
+        query: this.config.baseQuery ? [...this.config.baseQuery] : [],
+        ...this.searchService.filter,
+      };
+    }
+
+    this.facade.read(newFilter);
+
+    const endButtons = this.getEndButtons();
+
+    this.pageOptions = computed(() => ({
+      title: this.config.title,
+      search: this.config.search
+        ? {
+            text: computed(() => this.filter().searchText ?? null),
+            set: (txt) => {
+              if (txt !== this.filter().searchText)
+                this.facade.read({
+                  ...this.filter(),
+                  searchText: txt,
+                  offset: 0,
+                });
+            },
+          }
+        : null,
+      endButtons: endButtons,
+    }));
+
+    const compiledComponents =
+      await this.dynamicComponentLoader.getComponentsWithFactories({
+        components: [
+          ...(this.config.details &&
+          this.config.details['components'] &&
+          this.config.details['components'].top
+            ? [this.config.details['components'].top]
+            : []),
+          ...(this.config.details &&
+          this.config.details['components'] &&
+          this.config.details['components'].bottom
+            ? [this.config.details['components'].bottom]
+            : []),
+          ...(this.config.list &&
+          this.config.list['components'] &&
+          this.config.list['components'].top
+            ? [this.config.list['components'].top]
+            : []),
+        ],
+      });
+
+    this.listOptions.set({
+      provider: {
+        getData: (filter): void => {
+          const global = {
+            ...this.filter(),
+            ...filter,
+          };
+          this.facade.read(global);
+        },
+        onChangeMultiSelected: async (list) => {
+          if (list.length && !this.menuService.openedEnd) {
+            await this.menuService.openEnd({
+              injector: this.injector,
+              component: MultiselectComponent,
+            });
+          } else if (!list.length && this.menuService.openedEnd) {
+            await this.menuService.closeEnd();
+          }
+
+          this.facade.multiSelect(list);
+        },
+        list: this.facade.list,
+        loading: this.facade.loading,
+        onCleanMultiSelected$: this._cleanMultiSelected$,
+      },
+      cellPipe: this.config.list ? this.config.list.cellPipe : null,
+      mode: this.config.list?.mode,
+      type: this.config.type,
+      details: this.config.details
+        ? {
+            provider: {
+              getData: (id) => {
+                this.facade.select(id);
+              },
+              clearData: () => {
+                this.facade.unselect();
+              },
+              item: this.facade.selected,
+              loading: this.facade.loading,
+            },
+            componentFactories: {
+              top:
+                this.config.details &&
+                this.config.details['components'] &&
+                this.config.details['components'].top
+                  ? compiledComponents.find(
+                      (cc) =>
+                        cc.component === this.config.details['components'].top,
+                    ).factory
+                  : null,
+              bottom:
+                this.config.details &&
+                this.config.details['components'] &&
+                this.config.details['components'].bottom
+                  ? compiledComponents.find(
+                      (cc) =>
+                        cc.component ===
+                        this.config.details['components'].bottom,
+                    ).factory
+                  : null,
+            },
+          }
+        : null,
+      item:
+        !!this.config.edit || this.config.details
+          ? {
+              options: {
+                routingPrefix: '/' + this.router.routerState.snapshot.url + '/',
+                edit: !!this.config.edit,
+              },
+            }
+          : null,
+      remove: this.config.remove
+        ? {
+            provider: {
+              invoke: (id) => this.facade.delete(id),
+              check: (item: T) => {
+                return options?.remove?.enabled
+                  ? SpecificationService.valid(item, options?.remove?.enabled)
+                  : true;
+              },
+            },
+          }
+        : null,
+      pagination: await this.paginationFacade.create({
+        mode: this.config.list.paginationMode,
+        limit: this.config.pagination.limit,
+        provider: {
+          getFilter: () => {
+            return this.filter();
+          },
+          getLinks: () => this.links,
+        },
+      }),
+      sort: this.config.sort,
+    });
+
+    this.cd.detectChanges();
+
+    this.initCloseMenu();
+    this.initTopComponent(compiledComponents);
+
+    this.refreshDynamicInstance();
+  }
+
+  private initCloseMenu() {
+    this.router.events.pipe(this.takeUntilDestroy).subscribe(async () => {
+      await this.clear();
+    });
+  }
+
+  private async clear() {
+    await this.menuService.closeEnd();
+
+    this.listOptions.update((val) => ({
+      ...val,
+      select: null,
+    }));
+
+    this.facade.multiSelect([]);
+  }
+
+  private getEndButtons(): Array<IIconButtonOptions> {
+    const fieldsWithOptions = getModelFieldsWithOptions(new this.config.type());
+    const modelOptions = getModelOptions(this.config.type);
+
+    const showFilters =
+      fieldsWithOptions.some(
+        (x) => (x.options?.list as IFieldListMetadata)?.filter,
+      ) || modelOptions?.filters?.length;
+
+    const showMultiEdit =
+      this.config.list?.components?.multi ||
+      (this.config.edit &&
+        fieldsWithOptions.some(
+          (x) => (x.options?.update as IFieldEditMetadata)?.multi,
+        ) &&
+        !this.hardwareService.isMobile &&
+        (!this.config?.list?.mode ||
+          this.config?.list?.mode === ListMode.desktop));
+
+    return [
+      ...(showMultiEdit
+        ? [
+            {
+              icon: 'checkbox-outline',
+              text: 'multi',
+              handler: () => {
+                this.facade.multiSelect([]);
+                this._cleanMultiSelected$.next();
+
+                setTimeout(async () => {
+                  this.listOptions.update((val) => ({
+                    ...val,
+                    select: val.select === 'multi' ? null : 'multi',
+                  }));
+                  if (this.menuService.openedEnd)
+                    await this.menuService.closeEnd();
+                  this.cd.detectChanges();
+                });
+              },
+            },
+          ]
+        : []),
+      ...(showFilters
+        ? [
+            {
+              icon: 'filter-outline',
+              text: 'filters',
+              handler: async () => {
+                await this.menuService.openEnd({
+                  injector: this.injector,
+                  component: FiltersComponent,
+                });
+              },
+            },
+          ]
+        : []),
+      ...(this.config.add
+        ? [
+            {
+              icon: 'add',
+              text: 'add',
+              handler: () => {
+                this.router.navigate([
+                  '/' + this.router.routerState.snapshot.url + '/add',
+                ]);
+              },
+            },
+          ]
+        : []),
+      ...(this.config.export
+        ? [
+            {
+              text: 'export',
+              icon: 'download-outline',
+              type: 'popover' as const,
+              component: ExportComponent,
+            },
+          ]
+        : []),
+      ...(this.config.buttons ? this.config.buttons : []),
+    ];
+  }
+
+  private initTopComponent(
+    compiledComponents: {
+      component: any;
+      factory: ComponentFactory<any>;
+    }[],
+  ) {
+    const factory =
+      this.config.list &&
+      this.config.list['components'] &&
+      this.config.list['components'].top
+        ? compiledComponents.find(
+            (cc) => cc.component === this.config.list['components'].top,
+          ).factory
+        : null;
+
+    setTimeout(() => {
+      if (factory && !this.topTpl().get(0)) {
+        this.topTpl().createComponent(factory);
+      }
+    });
+  }
+}

package/src/lib/pages/list/standard/standard.component.ts

@@ -0,0 +1,42 @@
+import { Component, computed, inject, Signal } from '@angular/core';
+
+import { ListComponent } from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { CrudFacade } from '../../../+state/crud.facade';
+import { FiltersConfigComponent, GroupComponent } from '../../../components';
+import { CrudFullConfig } from '../../../crud.config';
+import { CrudListGroupService } from '../../../services/list-group/list-group.service';
+import { CrudListPageBaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-list-standard-page',
+  template: `
+    <smart-crud-filters-config></smart-crud-filters-config>
+    @let groups = config.list?.groups;
+    @if (listOptions) {
+      <smart-list
+        [hidden]="groups && !isSearch()"
+        [options]="listOptions()"
+      ></smart-list>
+    }
+    @if (groups && !isSearch()) {
+      <smart-crud-group
+        [groups]="groups"
+        [listOptions]="listOptions()"
+      ></smart-crud-group>
+    }
+  `,
+  imports: [FiltersConfigComponent, ListComponent, GroupComponent],
+  providers: [CrudListGroupService],
+})
+export class ListStandardComponent<
+  T extends IEntity<string>,
+> extends CrudListPageBaseComponent<T> {
+  private readonly facade = inject(CrudFacade<T>);
+  public readonly config = inject(CrudFullConfig<T>);
+
+  isSearch: Signal<boolean> = computed(
+    () => !!this.facade.filter()?.searchText,
+  );
+}

package/src/lib/pipes/form-options/form-options.pipe.ts

@@ -0,0 +1,61 @@
+import { inject, Pipe, PipeTransform, Type } from '@angular/core';
+
+import { IFormOptions, InputBaseComponent } from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { CRUD_MODEL_POSSIBILITIES_PROVIDER } from '../../providers/model-possibilities/model-possibilities.provider';
+
+@Pipe({
+  name: 'smartFormOptions',
+})
+export class FormOptionsPipe<T extends IEntity<string>>
+  implements PipeTransform
+{
+  private modelPossibilitiesProvider = inject(
+    CRUD_MODEL_POSSIBILITIES_PROVIDER,
+  );
+
+  transform(
+    item: T,
+    mode: string,
+    type: any,
+    uniqueProvider?: (values: Record<keyof T, any>) => Promise<boolean>,
+    inputComponents?: { [key: string]: Type<InputBaseComponent<any>> },
+  ): IFormOptions<T> {
+    if (!mode || !type) return null;
+
+    let possibilities = {};
+
+    if (type && this.modelPossibilitiesProvider) {
+      possibilities = this.modelPossibilitiesProvider.get(type);
+    }
+
+    if (mode === 'create') {
+      return {
+        mode: 'create',
+        possibilities,
+        inputComponents,
+        uniqueProvider,
+        model: new type(),
+        show: true,
+      };
+    } else {
+      const model = new type();
+
+      if (item) {
+        Object.keys(item).forEach((key) => {
+          model[key] = item[key];
+        });
+      }
+
+      return {
+        mode: mode,
+        uniqueProvider,
+        possibilities: possibilities,
+        inputComponents,
+        model: model,
+        show: true,
+      };
+    }
+  }
+}

package/src/lib/pipes/index.ts

@@ -0,0 +1,2 @@
+export * from './pipes.module';
+export * from './form-options/form-options.pipe';

package/src/lib/pipes/pipes.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { FormOptionsPipe } from './form-options/form-options.pipe';
+
+@NgModule({
+  exports: [FormOptionsPipe],
+  imports: [FormOptionsPipe],
+})
+export class CrudPipesModule {}

package/src/lib/providers/model-possibilities/model-possibilities.provider.ts

@@ -0,0 +1,19 @@
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * @deprecated - please, use IModelPossibilitiesProvider from @smartsoft001/angular
+ */
+export abstract class ICrudModelPossibilitiesProvider {
+  abstract get<T>(type: any): {
+    [key: string]: Observable<{ id: any; text: string }[]>;
+  };
+}
+
+/**
+ * @deprecated - please, use MODEL_POSSIBILITIES_PROVIDER from @smartsoft001/angular
+ */
+export const CRUD_MODEL_POSSIBILITIES_PROVIDER =
+  new InjectionToken<ICrudModelPossibilitiesProvider>(
+    'CRUD_MODEL_POSSIBILITIES_PROVIDER',
+  );