@smartsoft001/crud-shell-angular 2.76.0 → 2.80.0

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

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

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

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

@@ -1,77 +0,0 @@
-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>
-    `,
-  }),
-};