@smartsoft001/crud-shell-angular 1.2.90 → 2.69.0

package/.storybook/addons.js

@@ -0,0 +1 @@
+import '../../../../../.storybook/addons';

package/.storybook/config.js

@@ -0,0 +1,5 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { configure, addDecorator } from '@storybook/angular';
+
+addDecorator(withKnobs);
+configure(require.context('../src/lib', true, /\.stories\.(j|t)sx?$/), module);

package/.storybook/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["../src/test.ts", "../**/*.spec.ts", "../**/*.test.ts"],
+  "include": ["../src/**/*"]
+}

package/.storybook/webpack.config.js

@@ -0,0 +1,7 @@
+const rootWebpackConfig = require('../../../../../.storybook/webpack.config');
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  config = await rootWebpackConfig({ config, mode });
+
+  return config;
+};

package/jest.config.ts

@@ -0,0 +1,38 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  globals: {},
+  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+  transform: {
+    '^.+\\.(ts|js|mjs|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  displayName: 'crud-shell-angular',
+  coverageDirectory: '../../../../coverage/packages/crud/shell/angular',
+  preset: 'jest-preset-angular',
+  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
+  transformIgnorePatterns: ['node_modules/(?!(@angular|@ngrx)/)'],
+  snapshotFormat: { escapeString: true, printBasicPrototype: true },
+  moduleNameMapper: {
+    '^@smartsoft001/angular$':
+      '<rootDir>/../../../../packages/shared/angular/src/index.ts',
+    '^@smartsoft001/angular/(.*)$':
+      '<rootDir>/../../../../packages/shared/angular/src/$1',
+    '^@smartsoft001/models$':
+      '<rootDir>/../../../../packages/shared/models/src/index.ts',
+    '^@smartsoft001/models/(.*)$':
+      '<rootDir>/../../../../packages/shared/models/src/$1',
+  },
+};
+
+export default config;

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../../dist/packages/crud/shell/angular",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,36 +1,25 @@
 {
   "name": "@smartsoft001/crud-shell-angular",
-  "version": "1.2.90",
-  "description": "This library was generated with [Nx](https://nx.dev).",
+  "version": "2.69.0",
+  "description": "Utils and Angular components",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/emiljuchnikowski/smartsoft.git"
   },
   "author": "Emil Juchnikowski",
+  "contributors": [
+    {
+      "name": "Andrii Bilych"
+    }
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/emiljuchnikowski/smartsoft/issues"
   },
   "homepage": "https://github.com/emiljuchnikowski/smartsoft#readme",
-  "module": "fesm2022/smartsoft001-crud-shell-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/smartsoft001-crud-shell-angular.mjs",
-      "esm": "./esm2022/smartsoft001-crud-shell-angular.mjs",
-      "default": "./fesm2022/smartsoft001-crud-shell-angular.mjs"
-    }
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "@ngrx/store": "16.0.1",
-    "@smartsoft001/domain-core": "1.1.90",
-    "@smartsoft001/angular": "1.2.90"
-  },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@smartsoft001/angular": "^2.69.0",
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0"
+  }
 }

package/project.json

@@ -0,0 +1,49 @@
+{
+  "name": "crud-shell-angular",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "packages/crud/shell/angular/src",
+  "prefix": "smart",
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/crud/shell/angular/**/*.{ts,tsx,js,jsx}",
+          "packages/crud/shell/angular/package.json"
+        ],
+        "tsConfig": [
+          "packages/crud/shell/angular/tsconfig.lib.json",
+          "packages/crud/shell/angular/tsconfig.spec.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "options": {
+        "jestConfig": "packages/crud/shell/angular/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "outputs": ["{workspaceRoot}/coverage/packages/crud/shell/angular"]
+    },
+    "build": {
+      "executor": "@nx/angular:package",
+      "options": {
+        "tsConfig": "packages/crud/shell/angular/tsconfig.lib.json",
+        "project": "packages/crud/shell/angular/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/crud/shell/angular/tsconfig.lib.prod.json"
+        }
+      }
+    }
+  },
+  "generators": {
+    "@schematics/angular:component": {
+      "style": "scss"
+    }
+  },
+  "tags": ["scope:crud", "type:shell"]
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './lib/components';
+export * from './lib/crud.config';
+export * from './lib/crud.module';
+export * from './lib/crud-full.module';
+export * from './lib/factories/list-pagination/list-pagination.factory';
+export * from './lib/pipes';
+export * from './lib/services/crud/crud.service';
+export * from './lib/services/page/page.service';
+export * from './lib/services/search/search.service';
+export * from './lib/+state/crud.facade';
+export * from './lib/models';
+export * from './lib/pages';
+export * from './lib/providers/model-possibilities/model-possibilities.provider';

package/src/lib/+state/crud.facade.ts

@@ -0,0 +1,82 @@
+import { computed, Injectable, Signal } from '@angular/core';
+
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { CrudConfig } from '../crud.config';
+import { ICrudCreateManyOptions, ICrudFilter } from '../models';
+import { createCrudFeatureStore } from './crud.feature.store';
+
+@Injectable()
+export class CrudFacade<T extends IEntity<string>> {
+  private store = createCrudFeatureStore<T>();
+
+  loaded: Signal<boolean> = this.store.getLoaded;
+  loading: Signal<boolean> = computed(() => !this.store.getLoaded());
+  selected: Signal<T> = this.store.getSelected;
+  multiSelected: Signal<T[]> = this.store.getMultiSelected;
+  list: Signal<T[]> = this.store.getList;
+  filter: Signal<ICrudFilter> = this.store.getFilter;
+  totalCount: Signal<number> = this.store.getTotalCount;
+  links: Signal<any> = this.store.getLinks;
+  error: Signal<any> = this.store.getError;
+
+  constructor(private config: CrudConfig<T>) {}
+
+  create(item: T): void {
+    this.store.create(item);
+  }
+
+  createMany(items: Array<T>, options: ICrudCreateManyOptions): void {
+    this.store.createMany({ items, options });
+  }
+
+  read(filter: ICrudFilter = null): void {
+    let baseQuery = [];
+    if (this.config.baseQuery) {
+      baseQuery = this.config.baseQuery;
+    }
+
+    const fullFilter = {
+      ...(filter ? filter : {}),
+      query: filter && filter.query ? filter.query : baseQuery,
+    };
+
+    this.store.read(fullFilter);
+  }
+
+  clear(): void {
+    this.store.clear();
+  }
+
+  select(id: string): void {
+    this.store.select(id);
+  }
+
+  unselect(): void {
+    this.store.unselect();
+  }
+
+  multiSelect(items: Array<T>): void {
+    this.store.multiSelect(items);
+  }
+
+  update(item: T): void {
+    this.store.update(item);
+  }
+
+  export(filter: ICrudFilter = null, format = null): void {
+    this.store.export(filter, format);
+  }
+
+  updatePartial(item: Partial<T> & { id: string }): void {
+    this.store.updatePartial(item);
+  }
+
+  updatePartialMany(items: (Partial<T> & { id: string })[]) {
+    this.store.updatePartialMany(items);
+  }
+
+  delete(id: string): void {
+    this.store.delete(id);
+  }
+}

package/src/lib/+state/crud.feature.methods.ts

@@ -0,0 +1,258 @@
+import { inject } from '@angular/core';
+import { patchState } from '@ngrx/signals';
+
+import { PaginationMode } from '@smartsoft001/angular';
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { ICrudCreateManyOptions, ICrudFilter } from '../models';
+import { initialState } from './crud.feature.store';
+import { CrudService } from '../services/crud/crud.service';
+
+// "Actions, Reducers, Effects" in a normal store
+export function CrudMethodsFactory<T extends IEntity<string>>() {
+  return (store: any, crudService = inject(CrudService<T>)) => {
+    const methods = {
+      async create(item: T) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.create(item);
+          await this.createSuccess();
+        } catch (error) {
+          methods.defaultFailure(error);
+        }
+      },
+
+      async createSuccess() {
+        patchState(store, {
+          loaded: true,
+          error: null,
+        });
+
+        await methods.read(
+          store.filter ? { ...store.filter, offset: 0 } : null,
+        );
+      },
+
+      async createMany(data: { items: T[]; options: ICrudCreateManyOptions }) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.createMany(data.items, data.options);
+          await methods.createManySuccess();
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      async createManySuccess() {
+        patchState(store, {
+          loaded: true,
+          error: null,
+        });
+
+        await methods.read(
+          store.filter ? { ...store.filter, offset: 0 } : null,
+        );
+      },
+
+      async export(filter: ICrudFilter, format: any) {
+        patchState(store, {
+          loaded: false,
+        });
+
+        try {
+          await crudService.exportList(filter, format);
+          methods.exportSuccess();
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      exportSuccess() {
+        patchState(store, {
+          loaded: true,
+        });
+      },
+
+      async read(filter: ICrudFilter) {
+        patchState(store, {
+          loaded: false,
+          filter,
+          error: null,
+          totalCount: null,
+          links: null,
+        });
+
+        try {
+          const result = await crudService.getList<T>(filter);
+          methods.readSuccess<T>({
+            list: result.data,
+            filter,
+            totalCount: result.totalCount,
+            links: result.links,
+          });
+        } catch (error) {
+          methods.defaultFailure(error);
+        }
+      },
+
+      readSuccess<T>(data: {
+        list: T[];
+        filter?: ICrudFilter;
+        totalCount?: number;
+        links?: any;
+      }) {
+        let list = [];
+
+        if (
+          data.filter?.offset &&
+          store.list() &&
+          data.filter.paginationMode !== PaginationMode.singlePage
+        ) {
+          list = [...store.list(), ...data.list];
+        } else {
+          list = data.list;
+        }
+
+        patchState(store, {
+          loaded: true,
+          list,
+          totalCount: data.totalCount,
+          links: data.links,
+          error: null,
+        });
+      },
+
+      clear() {
+        store.set(() => ({ ...initialState }));
+      },
+
+      async select(id: string) {
+        patchState(store, {
+          loaded: false,
+          selected: null,
+          error: null,
+        });
+
+        try {
+          const result = await crudService.getById(id);
+          methods.selectSuccess(result);
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      selectSuccess(selected: T) {
+        patchState(store, {
+          loaded: true,
+          selected,
+          error: null,
+        });
+      },
+
+      unselect() {
+        patchState(store, {
+          loaded: true,
+          selected: null,
+          error: null,
+        });
+      },
+
+      multiSelect(items: Array<T>) {
+        patchState(store, {
+          multiSelected: [...items],
+        });
+      },
+
+      async update(item: Partial<T> & { id: string }) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.updatePartial(item);
+          await methods.updateSuccess(item.id);
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      async updateSuccess(id: string) {
+        await methods.read({ ...store.filter, offset: 0 });
+        await methods.select(id);
+      },
+
+      async updatePartial(item: Partial<T> & { id: string }) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.updatePartial(item);
+          await methods.updatePartialSuccess(item.id);
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      async updatePartialSuccess(id: string) {
+        await methods.read({ ...store.filter, offset: 0 });
+        await methods.select(id);
+      },
+
+      async updatePartialMany(items: Array<Partial<T> & { id: string }>) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.updatePartialMany(items);
+          await methods.updatePartialManySuccess();
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      async updatePartialManySuccess() {
+        await methods.read({ ...store.filter, offset: 0 });
+      },
+
+      async delete(id: string) {
+        patchState(store, {
+          loaded: false,
+          error: null,
+        });
+
+        try {
+          await crudService.delete(id);
+          await methods.deleteSuccess();
+        } catch (e) {
+          methods.defaultFailure(e);
+        }
+      },
+
+      async deleteSuccess() {
+        await methods.read({ ...store.filter, offset: 0 });
+      },
+
+      defaultFailure(error: string) {
+        patchState(store, {
+          loaded: true,
+          error,
+        });
+      },
+    };
+
+    return methods;
+  };
+}

package/src/lib/+state/crud.feature.store.ts

@@ -0,0 +1,77 @@
+import { computed, Signal } from '@angular/core';
+import {
+  signalStore,
+  withState,
+  withMethods,
+  withComputed,
+} from '@ngrx/signals';
+
+import { IEntity } from '@smartsoft001/domain-core';
+
+import { ICrudCreateManyOptions, ICrudFilter } from '../models';
+import { CrudMethodsFactory } from './crud.feature.methods';
+
+export interface CrudState<T> {
+  selected?: T;
+  multiSelected?: Array<T>;
+  list?: T[];
+  totalCount?: number;
+  filter?: ICrudFilter;
+  links?: any;
+  loaded: boolean; // has the Auth list been loaded
+  error?: string | null; // last none error (if any)
+}
+
+export const initialState: CrudState<any> = {
+  loaded: false,
+};
+
+interface CrudStore<T> extends CrudState<T> {
+  // State properties are inherited from CrudState
+
+  // Computed properties
+  getError: Signal<string | null | undefined>;
+  getLoaded: Signal<boolean>;
+  getSelected: Signal<T | undefined>;
+  getMultiSelected: Signal<Array<T> | undefined>;
+  getList: Signal<Array<T> | undefined>;
+  getTotalCount: Signal<number | undefined>;
+  getLinks: Signal<any>;
+  getFilter: Signal<ICrudFilter | undefined>;
+
+  // Methods
+  create(item: T): void;
+  createMany(data: { items: T[]; options: ICrudCreateManyOptions }): void;
+  export(filter: ICrudFilter, format: any): void;
+  read(filter: ICrudFilter): void;
+  clear(): void;
+  select(id: string): void;
+  multiSelect(items: Array<T>): void;
+  unselect(): void;
+  update(item: Partial<T> & { id: string }): void;
+  updatePartial(item: Partial<T> & { id: string }): void;
+  updatePartialMany(items: Array<Partial<T> & { id: string }>): void;
+  delete(id: string): void;
+}
+
+export function createCrudFeatureStore<T extends IEntity<string>>() {
+  return signalStore(
+    { providedIn: 'root' },
+    withState<CrudState<T>>(initialState),
+    withComputed((store) => ({
+      getError: computed(() => store.error()),
+      getLoaded: computed(() => store.loaded()),
+      getSelected: computed(() => store.selected()),
+      getMultiSelected: computed(() => store.multiSelected()),
+      getList: computed(() => store.list()),
+      getTotalCount: computed(() => store.totalCount()),
+      getLinks: computed(() => store.links()),
+      getFilter: computed(() => store.filter()),
+    })),
+    withMethods(CrudMethodsFactory<T>()),
+  ) as unknown as CrudStore<T>;
+}
+
+export type CrudFeatureStore<T extends IEntity<string>> = ReturnType<
+  typeof createCrudFeatureStore<T>
+>;

package/src/lib/components/components.module.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DynamicIoModule } from 'ng-dynamic-component';
+
+import { SharedModule } from '@smartsoft001/angular';
+
+import { ExportComponent } from './export/export.component';
+import {
+  FilterComponent,
+  FilterDateComponent,
+  FilterDateWithEditComponent,
+  FilterFlagComponent,
+  FilterRadioComponent,
+  FilterTextComponent,
+  FilterCheckComponent,
+  FilterIntComponent,
+  FilterDateTimeComponent,
+} from './filter';
+import { CrudPipesModule } from '../pipes';
+import { FiltersComponent } from './filters/filters.component';
+import { FiltersConfigComponent } from './filters-config/filters-config.component';
+import { MultiselectComponent } from './multiselect/multiselect.component';
+import { CrudFacade } from '../+state/crud.facade';
+import { GroupComponent } from './group/group.component';
+import { CrudListPaginationFactory } from '../factories/list-pagination/list-pagination.factory';
+import { CrudService } from '../services/crud/crud.service';
+
+const COMPONENTS = [
+  ExportComponent,
+  FilterComponent,
+  FilterTextComponent,
+  FiltersConfigComponent,
+  FilterDateComponent,
+  FilterDateWithEditComponent,
+  FilterDateTimeComponent,
+  FilterRadioComponent,
+  FiltersComponent,
+  FilterFlagComponent,
+  FilterCheckComponent,
+  FilterIntComponent,
+  MultiselectComponent,
+  GroupComponent,
+];
+
+@NgModule({
+  imports: [
+    ...COMPONENTS,
+    SharedModule,
+    CrudPipesModule,
+    FormsModule,
+    CommonModule,
+    DynamicIoModule,
+  ],
+  exports: [CrudPipesModule, ...COMPONENTS],
+  providers: [CrudService, CrudFacade, CrudListPaginationFactory],
+})
+export class CrudComponentsModule {}