@smartsoft001/crud-shell-angular 1.2.90 → 2.69.0

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

@@ -0,0 +1,513 @@
+import { Location, NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentFactory,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  Signal,
+  signal,
+  TemplateRef,
+  viewChild,
+  viewChildren,
+  ViewContainerRef,
+  WritableSignal,
+} from '@angular/core';
+import {
+  AbstractControl,
+  UntypedFormArray,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Subscription } from 'rxjs';
+
+import {
+  CreateDynamicComponent,
+  DetailsService,
+  DynamicComponentLoader,
+  DynamicContentDirective,
+  ICellPipe,
+  IDetailsOptions,
+  IIconButtonOptions,
+  IPageOptions,
+  PageComponent,
+  StyleService,
+  ToastService,
+} from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+import { getModelOptions } from '@smartsoft001/models';
+import { SpecificationService } from '@smartsoft001/utils';
+
+import { CrudFacade } from '../../+state/crud.facade';
+import { CrudFullConfig } from '../../crud.config';
+import { ICrudFilter } from '../../models';
+import { CrudItemPageBaseComponent } from './base/base.component';
+import { ItemStandardComponent } from './standard/standard.component';
+import { CrudService } from '../../services/crud/crud.service';
+import { PageService } from '../../services/page/page.service';
+
+@Component({
+  selector: 'smart-crud-item-page',
+  imports: [PageComponent, ItemStandardComponent, NgTemplateOutlet],
+  template: `
+    <smart-page [options]="pageOptions()">
+      <div #topTpl class="text-xl py-2.5 separator"></div>
+      @if (template() === 'default') {
+        <smart-crud-item-standard-page
+          [detailsOptions]="detailsOptions()"
+          [mode]="mode"
+          [uniqueProvider]="uniqueProvider()"
+          (onPartialChange)="onPartialChange($event)"
+          (onChange)="onChange($event)"
+          (onValidChange)="onValidChange($event)"
+        >
+          <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+        </smart-crud-item-standard-page>
+      }
+      <ng-template #contentTpl>
+        <ng-content></ng-content>
+      </ng-template>
+      <div class="dynamic-content"></div>
+      <div #bottomTpl class="text-xl py-2.5 separator"></div>
+    </smart-page>
+  `,
+})
+export class ItemComponent<T extends IEntity<string>>
+  extends CreateDynamicComponent<CrudItemPageBaseComponent<any>>(
+    'crud-item-page',
+  )
+  implements OnInit, OnDestroy
+{
+  private router = inject(Router);
+  private activeRoute = inject(ActivatedRoute);
+  private facade = inject(CrudFacade<T>);
+  private service = inject(CrudService<T>);
+  private dynamicComponentLoader = inject(DynamicComponentLoader<T>);
+  private translateService = inject(TranslateService);
+  public config = inject(CrudFullConfig<T>);
+  private location = inject(Location);
+  private cd = inject(ChangeDetectorRef);
+  private styleService = inject(StyleService);
+  private elementRef = inject(ElementRef);
+  private toastService = inject(ToastService);
+  private pageService = inject(PageService<T>);
+  private detailsService = inject(DetailsService);
+
+  private _mode: WritableSignal<string>;
+
+  pageOptions: WritableSignal<IPageOptions> = signal({
+    title: '',
+    showBackButton: true,
+    hideMenuButton: true,
+  });
+  detailsOptions: WritableSignal<IDetailsOptions<T>>;
+  id: string;
+  formValue: T;
+  formValid = false;
+  item: T;
+  formPartialValue: Partial<T>;
+  uniqueProvider: WritableSignal<
+    (values: Record<keyof T, any>) => Promise<boolean>
+  >;
+
+  set mode(val: string) {
+    this._mode = signal(val);
+    this.refreshDynamicInstance();
+  }
+  get mode(): string {
+    return this._mode();
+  }
+
+  selected: Signal<T>;
+
+  standardComponents = viewChildren(ItemStandardComponent);
+  // @ViewChild(IonContent, { static: true }) content: IonContent; //TODO: rewrite when rewriting ionic
+
+  contentTpl = viewChild<TemplateRef<any>>('contentTpl');
+
+  topTpl = viewChild<ViewContainerRef>('topTpl');
+
+  bottomTpl = viewChild<ViewContainerRef>('bottomTpl');
+
+  dynamicContents = viewChildren<DynamicContentDirective>(
+    DynamicContentDirective,
+  );
+
+  subscription = new Subscription();
+
+  constructor() {
+    super();
+
+    this.selected = this.facade.selected;
+  }
+
+  refreshProperties() {
+    this.baseComponentRef.setInput('detailsOptions', this.detailsOptions());
+    this.baseComponentRef.setInput('mode', this.mode);
+    this.baseComponentRef.setInput('uniqueProvider', this.uniqueProvider());
+    this.subscription.add(
+      this.baseInstance.onPartialChange.subscribe((val) =>
+        this.onPartialChange(val),
+      ),
+    );
+    this.subscription.add(
+      this.baseInstance.onChange.subscribe((val) => this.onChange(val)),
+    );
+    this.subscription.add(
+      this.baseInstance.onValidChange.subscribe((val) =>
+        this.onValidChange(val),
+      ),
+    );
+  }
+
+  async ngOnInit() {
+    this.detailsService.init();
+    this.styleService.init(this.elementRef);
+
+    this.pageService.checkPermissions();
+
+    if (this.router.routerState.snapshot.url.split('?')[0].endsWith('/add')) {
+      this.mode = 'create';
+      await this.generateComponents('add');
+    } else {
+      this.mode = this.config.details ? 'details' : 'update';
+
+      if (this.mode === 'update') {
+        await this.generateComponents('edit');
+      }
+
+      this.activeRoute.params
+        .pipe(this.takeUntilDestroy)
+        .subscribe(({ id }) => {
+          this.facade.select(id);
+          this.id = id;
+        });
+
+      this.activeRoute.queryParams
+        .pipe(this.takeUntilDestroy)
+        .subscribe(({ edit }) => {
+          if (edit) {
+            this.mode = 'update';
+            this.generateComponents('edit');
+          }
+        });
+    }
+
+    this.uniqueProvider.set(async (values) => {
+      const filter: ICrudFilter = {
+        query: [],
+      };
+
+      Object.keys(values).forEach((key) => {
+        filter.query.push({
+          key: key,
+          value: values[key],
+          type: '=',
+        });
+      });
+
+      if (this.id) {
+        filter.query.push({
+          key: 'id',
+          value: this.id,
+          type: '!=',
+        });
+      }
+      const { totalCount } = await this.service.getList(filter);
+
+      return !totalCount;
+    });
+
+    if (this.config.details) {
+      const compiledComponents: {
+        component: any;
+        factory: ComponentFactory<any>;
+      }[] = 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.detailsOptions.set({
+        type: this.config.type,
+        item: this.facade.selected,
+        cellPipe: this.config.details
+          ? (this.config.details as { cellPipe?: ICellPipe<T> }).cellPipe
+          : null,
+        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,
+        },
+      });
+    }
+
+    this.initPageOptions();
+
+    effect(() => {
+      this.item = this.facade.selected();
+      this.initPageOptions();
+      this.cd.detectChanges();
+    });
+
+    this.refreshDynamicInstance();
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+
+    this.subscription.unsubscribe();
+  }
+
+  private async generateComponents(mode: 'add' | 'edit') {
+    const compiledComponents =
+      await this.dynamicComponentLoader.getComponentsWithFactories({
+        components: [
+          ...(this.config[mode] &&
+          this.config[mode]['components'] &&
+          this.config[mode]['components'].top
+            ? [this.config[mode]['components'].top]
+            : []),
+          ...(this.config[mode] &&
+          this.config[mode]['components'] &&
+          this.config[mode]['components'].bottom
+            ? [this.config[mode]['components'].bottom]
+            : []),
+        ],
+      });
+
+    const topComponentFactory = compiledComponents.find(
+      (cc) => cc.component === this.config[mode]['components']?.top,
+    )?.factory;
+
+    const bottomComponentFactory = compiledComponents.find(
+      (cc) => cc.component === this.config[mode]['components']?.bottom,
+    )?.factory;
+
+    if (!this.topTpl().get(0) && topComponentFactory) {
+      this.topTpl().createComponent(topComponentFactory);
+    }
+
+    if (!this.bottomTpl().get(0) && bottomComponentFactory) {
+      this.bottomTpl().createComponent(bottomComponentFactory);
+    }
+  }
+
+  onPartialChange(val: Partial<T>) {
+    this.formPartialValue = val;
+  }
+
+  onChange(val: T) {
+    this.formValue = val;
+  }
+
+  onValidChange(val: boolean) {
+    this.formValid = val;
+  }
+
+  private initPageOptions(): void {
+    this.pageOptions.set({
+      ...this.pageOptions(),
+      title: this.getTitle(),
+      endButtons: this.getButtons(),
+    });
+  }
+
+  private getButtons(): Array<IIconButtonOptions> {
+    const options = getModelOptions(this.config.type);
+
+    switch (this.mode) {
+      case 'create':
+        return [
+          {
+            icon: 'add',
+            text: 'add',
+            handler: () => {
+              if (this.checkFirstInvalid()) {
+                return;
+              }
+
+              this.facade.create(this.formValue);
+              this.location.back();
+            },
+          },
+        ];
+      case 'update':
+        return [
+          ...(this.config.details
+            ? [
+                {
+                  icon: 'close',
+                  text: 'cancel',
+                  handler: () => {
+                    this.mode = 'details';
+                    this.initPageOptions();
+                    this.topTpl().clear();
+                    this.bottomTpl().clear();
+                  },
+                  disabled$: new BehaviorSubject(false),
+                },
+              ]
+            : []),
+          {
+            icon: 'save',
+            text: 'save',
+            handler: () => {
+              if (this.checkFirstInvalid()) {
+                return;
+              }
+
+              this.formPartialValue.id = this.id;
+              this.facade.updatePartial(this.formPartialValue as any);
+
+              if (this.config.details) {
+                this.mode = 'details';
+                this.initPageOptions();
+              } else {
+                this.location.back();
+              }
+            },
+          },
+        ];
+      case 'details':
+        return this.config.edit &&
+          (!options?.update?.enabled ||
+            SpecificationService.valid(this.item, options?.update?.enabled))
+          ? [
+              {
+                icon: 'create',
+                text: 'edit',
+                handler: () => {
+                  this.mode = 'update';
+                  this.generateComponents('edit');
+                  this.initPageOptions();
+                },
+                disabled$: new BehaviorSubject(false),
+              },
+            ]
+          : [];
+    }
+  }
+
+  private getTitle(): string {
+    const options = getModelOptions(this.config.type);
+
+    const prefix =
+      options.titleKey && this.item
+        ? this.removeParagraph(this.item[options.titleKey]) + ' - '
+        : '';
+
+    switch (this.mode) {
+      case 'create':
+        return 'add';
+      case 'update':
+        return prefix + this.translateService.instant('change');
+      case 'details':
+        return prefix + this.translateService.instant('details');
+    }
+  }
+
+  private removeParagraph(val: string): string {
+    if (!val || val.indexOf('<p>') !== 0) return val;
+
+    const div = document.createElement('div');
+    div.innerHTML = val;
+
+    const item = div.querySelectorAll('p').item(0);
+
+    return item.innerHTML;
+  }
+
+  private checkFirstInvalid(): boolean {
+    this.cd.detectChanges();
+
+    const form =
+      this.template() === 'default'
+        ? this.standardComponents()?.[0]?.formComponents?.[0].form
+        : this.baseInstance.formComponents()[0].form;
+
+    this.cd.detectChanges();
+
+    if (form.valid) return false;
+
+    const invalidFields = [];
+
+    this.getInvalidFields(form, invalidFields, '');
+
+    this.toastService.info({
+      title: this.translateService.instant('INPUT.ERRORS.requires'),
+      message: invalidFields.slice(0, 3).join('<br/>'),
+    });
+
+    return true;
+  }
+
+  private getInvalidFields(
+    control: AbstractControl,
+    invalidFields: any[],
+    baseField: string,
+    key = null,
+  ) {
+    if (control.valid) return;
+
+    const field = key
+      ? baseField + ' > ' + this.translateService.instant('MODEL.' + key)
+      : baseField;
+
+    if (control.errors?.customMessage) {
+      invalidFields.push(field + ` (${control.errors.customMessage})`);
+      return;
+    }
+
+    if (control instanceof UntypedFormControl) {
+      invalidFields.push(field);
+    }
+
+    if (control instanceof UntypedFormGroup) {
+      Object.keys(control.controls).forEach((groupKey) => {
+        this.getInvalidFields(
+          control.controls[groupKey],
+          invalidFields,
+          field,
+          groupKey,
+        );
+      });
+    }
+
+    if (control instanceof UntypedFormArray) {
+      control.controls.forEach((c, index) => {
+        this.getInvalidFields(c, invalidFields, field + `(${index + 1})`);
+      });
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { DetailsComponent, FormComponent } from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { FormOptionsPipe } from '../../../pipes';
+import { CrudItemPageBaseComponent } from '../base/base.component';
+
+@Component({
+  selector: 'smart-crud-item-standard-page',
+  template: `
+    @if (mode() === 'details') {
+      @if (detailsOptions()) {
+        <smart-details [options]="detailsOptions()"></smart-details>
+      }
+    } @else {
+      <ng-container [ngTemplateOutlet]="editTpl"></ng-container>
+    }
+
+    <ng-template #editTpl>
+      <smart-form
+        [options]="
+          selected()
+            | smartFormOptions
+              : mode()
+              : config?.type
+              : uniqueProvider()
+              : config.inputComponents
+        "
+        (valuePartialChange)="onPartialChange.emit($event)"
+        (valueChange)="onChange.emit($event)"
+        (validChange)="onValidChange.emit($event)"
+      ></smart-form>
+    </ng-template>
+
+    <br /><br />
+  `,
+  styleUrls: ['./standard.component.scss'],
+  imports: [
+    DetailsComponent,
+    FormComponent,
+    FormOptionsPipe,
+    NgTemplateOutlet,
+    FormComponent,
+  ],
+})
+export class ItemStandardComponent<
+  T extends IEntity<string>,
+> extends CrudItemPageBaseComponent<T> {}

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

@@ -0,0 +1,29 @@
+import {
+  Directive,
+  inject,
+  input,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core';
+
+import {
+  BaseComponent,
+  DynamicComponentType,
+  IListOptions,
+} from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { CrudFullConfig } from '../../../crud.config';
+
+@Directive()
+export abstract class CrudListPageBaseComponent<
+  T extends IEntity<string>,
+> extends BaseComponent {
+  public config = inject(CrudFullConfig<T>);
+
+  static smartType: DynamicComponentType = 'crud-list-page';
+
+  contentTpl = viewChild<ViewContainerRef>('contentTpl');
+
+  listOptions = input<IListOptions<T>>();
+}

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

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { SharedModule } from '@smartsoft001/angular';
+import { Field, Model } from '@smartsoft001/models';
+
+import { CrudModule } from '../../crud.module';
+
+@Component({
+  template: ` <p>Test details</p> `,
+})
+export class TestDetailsComponent {}
+
+@Model({})
+export class Note {
+  @Field({ list: true })
+  title: string;
+
+  @Field({ list: true })
+  body: string;
+}
+
+const meta: Meta = {
+  title: 'Smart-Crud/List Page',
+  component: 'smart-crud-list-page',
+  decorators: [
+    moduleMetadata({
+      declarations: [TestDetailsComponent],
+      imports: [
+        CommonModule,
+        SharedModule,
+        TranslateModule.forRoot(),
+        RouterModule.forRoot([], { useHash: true }),
+        CrudModule.forFeature({
+          routing: true,
+          config: {
+            type: Note,
+            title: 'Note',
+            entity: 'notes',
+            export: true,
+            pagination: { limit: 25 },
+            apiUrl: 'http://207.180.210.142:1201/api/notes',
+          },
+        }),
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Export: Story = {
+  name: 'Z eksportem',
+  render: () => ({
+    template: `
+      <div style="height: 400px">
+          <smart-crud-list-page></smart-crud-list-page>
+      </div>
+    `,
+  }),
+};
+
+export const CustomDetails: Story = {
+  name: 'Niestandardowe szczegóły',
+  render: () => ({
+    template: `
+      <div style="height: 400px">
+          <smart-crud-list-page></smart-crud-list-page>
+      </div>
+    `,
+  }),
+};