@verisoft/store 18.0.1 → 18.3.0

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@verisoft/store",
-  "version": "18.0.1",
+  "version": "18.3.0",
   "peerDependencies": {
     "@ngrx/store": "^18.0.2",
-    "@verisoft/core": "18.0.0"
+    "@verisoft/core": "18.3.0",
+    "@ngrx/effects": "18.0.2",
+    "rxjs": "~7.8.0",
+    "@angular/router": "18.2.8"
   },
   "dependencies": {},
   "sideEffects": false

package/src/index.ts

@@ -7,3 +7,6 @@ export * from './lib/table-state/actions';
 export * from './lib/table-state/reducers';
 export * from './lib/table-state/effects';
 export * from './lib/table-state/models';
+
+export * from './lib/binding-state/binding.actions';
+export * from './lib/binding-state/binding.effects';

package/src/lib/binding-state/binding.actions.ts

@@ -0,0 +1,76 @@
+import { createAction, props } from '@ngrx/store';
+
+export function createAddBindingAction<TCreate>(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Add bindings`,
+    props<{ binding: TCreate }>()
+  );
+}
+
+export function createAddBindingsAction<TCreate>(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Add bindings`,
+    props<{ bindings: TCreate[] }>()
+  );
+}
+
+export function createAddBindingsFailureAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Add bindings failure`,
+    props<{ error: any }>()
+  );
+}
+
+export function createAddBindingsSuccessAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Add bindings success`
+  );
+}
+
+export function createEditBindingAction<TEdit>(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Edit binding`,
+    props<{ binding: TEdit }>()
+  );
+}
+
+export function createEditBindingFailureAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Edit binding failure`,
+    props<{ error: any }>()
+  );
+}
+
+export function createEditBindingSuccessAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Edit binding success`
+  );
+}
+
+export function createDeleteBindingAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Delete binding`,
+    props<{ id: number | string }>()
+  );
+}
+
+export function createDeleteBindingsAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Delete bindings`,
+    props<{ bindingIds: number[] }>()
+  );
+}
+
+export function createDeleteBindingsFailureAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Delete bindings failure`,
+    props<{ error: any }>()
+  );
+}
+
+export function createDeleteBindingsSuccessAction(bindingsRepository: string) {
+  return createAction(
+    `[${bindingsRepository}/API] Delete bindings success`
+  );
+}
+

package/src/lib/binding-state/binding.effects.ts

@@ -0,0 +1,472 @@
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import {
+  catchError,
+  map,
+  Observable,
+  of,
+  switchMap,
+  tap,
+  withLatestFrom,
+} from 'rxjs';
+import {
+  createAddBindingAction,
+  createAddBindingsAction,
+  createAddBindingsFailureAction,
+  createAddBindingsSuccessAction,
+  createDeleteBindingAction,
+  createDeleteBindingsAction,
+  createDeleteBindingsFailureAction,
+  createDeleteBindingsSuccessAction,
+  createEditBindingAction,
+  createEditBindingFailureAction,
+  createEditBindingSuccessAction,
+} from './binding.actions';
+
+export function createSingleBindingEffectsWithEdit<
+  T extends { id: number | string },
+  TCreate,
+  TEdit extends { id?: number | string }
+>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingSingularName: string,
+  bindingPluralName: string,
+  addFunction: (
+    bindings: TCreate,
+  ) => Observable<any>,
+  editFunction: (binding: TEdit, detailId: number | string) => Observable<any>,
+  deleteFunction: (
+    bindingIds: string | number,
+    detailId: number | string
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any,
+  tableService: any,
+  overrideDetailWithBinding = false,
+) {
+  const addEffect = createAddBindingEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    addFunction,
+    snackbar,
+    translateService,
+  );
+
+  const editEffect = createEditBindingEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingSingularName,
+    editFunction,
+    snackbar,
+    translateService,
+    overrideDetailWithBinding
+  );
+
+  const deleteEffect = createDeleteBindingEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    deleteFunction,
+    snackbar,
+    translateService
+  );
+
+  const modifiedSuccessEffect = createBindingModifiedSuccessEffect(
+    bindingsRepository,
+    actions$,
+    tableService
+  );
+
+  return { addEffect, editEffect, deleteEffect, modifiedSuccessEffect };
+}
+
+export function createBindingsEffectsWithEdit<
+  T extends { id: number | string },
+  TCreate,
+  TEdit extends { id?: number | string }
+>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingSingularName: string,
+  bindingPluralName: string,
+  addFunction: (
+    bindings: TCreate[],
+    detailId: number | string
+  ) => Observable<any>,
+  editFunction: (binding: TEdit, detailId: number | string) => Observable<any>,
+  deleteFunction: (
+    bindingIds: number[],
+    detailId: number | string
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any,
+  tableService: any,
+  overrideDetailWithBinding = false,
+) {
+  const addEffect = createAddBindingsEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    addFunction,
+    snackbar,
+    translateService
+  );
+
+  const editEffect = createEditBindingEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingSingularName,
+    editFunction,
+    snackbar,
+    translateService,
+    overrideDetailWithBinding
+  );
+
+  const deleteEffect = createDeleteBindingsEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    deleteFunction,
+    snackbar,
+    translateService
+  );
+
+  const modifiedSuccessEffect = createBindingModifiedSuccessEffect(
+    bindingsRepository,
+    actions$,
+    tableService
+  );
+
+  return { addEffect, editEffect, deleteEffect, modifiedSuccessEffect };
+}
+
+export function createBindingsEffects<
+  T extends { id: number | string },
+  TCreate
+>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingPluralName: string,
+  addFunction: (
+    bindings: TCreate[],
+    detailId: number | string
+  ) => Observable<any>,
+  deleteFunction: (
+    bindingIds: number[],
+    detailId: number | string
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any,
+  tableService: any
+) {
+  const addEffect = createAddBindingsEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    addFunction,
+    snackbar,
+    translateService
+  );
+
+  const deleteEffect = createDeleteBindingsEffect(
+    bindingsRepository,
+    actions$,
+    detail$,
+    bindingPluralName,
+    deleteFunction,
+    snackbar,
+    translateService
+  );
+
+  const modifiedSuccessEffect = createBindingModifiedSuccessEffect(
+    bindingsRepository,
+    actions$,
+    tableService
+  );
+
+  return { addEffect, deleteEffect, modifiedSuccessEffect };
+}
+
+function createAddBindingEffect<T extends { id: number | string }, TCreate>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingPluralName: string,
+  addFunction: (
+    bindings: TCreate,
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any,
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createAddBindingAction<TCreate>(bindingsRepository)),
+      withLatestFrom(detail$),
+      switchMap(([{ binding }, detail]) => {
+        const translatedPluralName =
+          translateService.instant(bindingPluralName);
+        const successMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.SUCCESS_ADD'
+        )} ${translatedPluralName}!`;
+        const failureMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.FAILURE_ADD'
+        )} ${translatedPluralName}!`;
+
+        return addFunction(binding).pipe(
+          map(() => {
+            snackbar.showSuccess(successMessage);
+            return createAddBindingsSuccessAction(bindingsRepository)();
+          }),
+          catchError((error) => {
+            snackbar.showError(failureMessage);
+            return of(
+              createAddBindingsFailureAction(bindingsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+function createAddBindingsEffect<T extends { id: number | string }, TCreate>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingPluralName: string,
+  addFunction: (
+    bindings: TCreate[],
+    detailId: number | string
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createAddBindingsAction<TCreate>(bindingsRepository)),
+      withLatestFrom(detail$),
+      switchMap(([{ bindings }, detail]) => {
+        const translatedPluralName =
+          translateService.instant(bindingPluralName);
+        const successMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.SUCCESS_ADD'
+        )} ${translatedPluralName}!`;
+        const failureMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.FAILURE_ADD'
+        )} ${translatedPluralName}!`;
+
+        if (!detail?.id) {
+          snackbar.showError(failureMessage);
+          return of(
+            createAddBindingsFailureAction(bindingsRepository)({
+              error: failureMessage,
+            })
+          );
+        }
+
+        return addFunction(bindings, detail.id).pipe(
+          map(() => {
+            snackbar.showSuccess(successMessage);
+            return createAddBindingsSuccessAction(bindingsRepository)();
+          }),
+          catchError((error) => {
+            snackbar.showError(failureMessage);
+            return of(
+              createAddBindingsFailureAction(bindingsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+function createEditBindingEffect<
+  T extends { id: number | string },
+  TEdit extends { id?: number | string }
+>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingSingularName: string,
+  editFunction: (binding: TEdit, detailId: number | string) => Observable<any>,
+  snackbar: any,
+  translateService: any,
+  overrideDetailWithBinding = false,
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createEditBindingAction<TEdit>(bindingsRepository)),
+      withLatestFrom(detail$),
+      switchMap(([{ binding }, detail]) => {
+        const translatedPluralName =
+          translateService.instant(bindingSingularName);
+        const successMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.SUCCESS_EDIT'
+        )} ${translatedPluralName}!`;
+        const failureMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.FAILURE_EDIT'
+        )} ${translatedPluralName}!`;
+
+        const id = overrideDetailWithBinding ? binding?.id : detail?.id;
+        if (!id) {
+          snackbar.showError(failureMessage);
+          return of(
+            createEditBindingFailureAction(bindingsRepository)({
+              error: failureMessage,
+            })
+          );
+        }
+
+        return editFunction(binding, id).pipe(
+          map(() => {
+            snackbar.showSuccess(successMessage);
+            return createEditBindingSuccessAction(bindingsRepository)();
+          }),
+          catchError((error) => {
+            snackbar.showError(failureMessage);
+            return of(
+              createEditBindingFailureAction(bindingsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+function createDeleteBindingEffect<T extends { id: number | string }>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingPluralName: string,
+  deleteFunction: (
+    bindingIds: string | number,
+    detailId: string | number
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createDeleteBindingAction(bindingsRepository)),
+      withLatestFrom(detail$),
+      switchMap(([{ id }, detail]) => {
+        const translatedPluralName =
+          translateService.instant(bindingPluralName);
+        const successMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.SUCCESS_DELETE'
+        )} ${translatedPluralName}!`;
+        const failureMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.FAILURE_DELETE'
+        )} ${translatedPluralName}!`;
+
+        if (!id && !detail?.id) {
+          snackbar.showError(failureMessage);
+          return of(
+            createDeleteBindingsFailureAction(bindingsRepository)({
+              error: failureMessage,
+            })
+          );
+        }
+
+        return deleteFunction(id, id ?? detail?.id).pipe(
+          map(() => {
+            snackbar.showSuccess(successMessage);
+            return createDeleteBindingsSuccessAction(bindingsRepository)();
+          }),
+          catchError((error) => {
+            snackbar.showError(failureMessage);
+            return of(
+              createDeleteBindingsFailureAction(bindingsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+function createDeleteBindingsEffect<T extends { id: number | string }>(
+  bindingsRepository: string,
+  actions$: Actions,
+  detail$: Observable<T | undefined>,
+  bindingPluralName: string,
+  deleteFunction: (
+    bindingIds: number[],
+    detailId: string | number
+  ) => Observable<any>,
+  snackbar: any,
+  translateService: any
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createDeleteBindingsAction(bindingsRepository)),
+      withLatestFrom(detail$),
+      switchMap(([{ bindingIds }, detail]) => {
+        const translatedPluralName =
+          translateService.instant(bindingPluralName);
+        const successMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.SUCCESS_DELETE'
+        )} ${translatedPluralName}!`;
+        const failureMessage = `${translateService.instant(
+          'BINDINGS_EFFECTS.FAILURE_DELETE'
+        )} ${translatedPluralName}!`;
+
+        if (!detail?.id) {
+          snackbar.showError(failureMessage);
+          return of(
+            createDeleteBindingsFailureAction(bindingsRepository)({
+              error: failureMessage,
+            })
+          );
+        }
+
+        return deleteFunction(bindingIds, detail.id).pipe(
+          map(() => {
+            snackbar.showSuccess(successMessage);
+            return createDeleteBindingsSuccessAction(bindingsRepository)();
+          }),
+          catchError((error) => {
+            snackbar.showError(failureMessage);
+            return of(
+              createDeleteBindingsFailureAction(bindingsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+function createBindingModifiedSuccessEffect(
+  bindingsRepository: string,
+  actions$: Actions,
+  tableService: any
+) {
+  return createEffect(
+    () =>
+      actions$.pipe(
+        ofType(
+          createAddBindingsSuccessAction(bindingsRepository),
+          createEditBindingSuccessAction(bindingsRepository),
+          createDeleteBindingsSuccessAction(bindingsRepository)
+        ),
+        tap(() => {
+          tableService.forceReload();
+        })
+      ),
+    { dispatch: false }
+  );
+}

package/src/lib/detail-state/detail.actions.ts

@@ -8,6 +8,10 @@ export function createInitDetailAction(detailsRepository: string) {
   );
 }
 
+export function createInitNewDetailAction(detailsRepository: string) {
+  return createAction(`[${detailsRepository} Page] Init New`);
+}
+
 export function createLoadDetailSuccessAction<T>(detailsRepository: string) {
   return createAction(
     `[${detailsRepository}/API] Load ${detailsRepository} Success`,
@@ -29,6 +33,13 @@ export function createUpdateDetailAction<T>(detailsRepository: string) {
   );
 }
 
+export function createUpdateDetailSetErrorsAction(detailsRepository: string) {
+  return createAction(
+    `[${detailsRepository}/API] Update Validation Errors ${detailsRepository}`,
+    props<{ error: any }>()
+  )
+}
+
 export function createUpdateFormStateAction(detailsRepository: string) {
   return createAction(
     `[${detailsRepository}/API] Update Form State`,
@@ -61,3 +72,18 @@ export function createUpdateSaveDetailAction(detailsRepository: string) {
 export function createResetStateAction(detailsRepository: string) {
   return createAction(`[${detailsRepository}/API] Reset State`);
 }
+
+export function createDeleteDetailAction(detailsRepository: string) {
+  return createAction(`[${detailsRepository}/API] Delete Detail`);
+}
+
+export function createDeleteDetailSuccessAction(detailsRepository: string) {
+  return createAction(`[${detailsRepository}/API] Delete Detail Success`);
+}
+
+export function createDeleteDetailFailureAction(detailsRepository: string) {
+  return createAction(
+    `[${detailsRepository}/API] Delete Detail Failure`,
+    props<{ error: any }>()
+  );
+}

package/src/lib/detail-state/detail.effects.ts

@@ -1,3 +1,4 @@
+import { Router } from '@angular/router';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { BaseHttpService } from '@verisoft/core';
 import {
@@ -11,7 +12,11 @@ import {
   withLatestFrom,
 } from 'rxjs';
 import {
+  createDeleteDetailAction,
+  createDeleteDetailFailureAction,
+  createDeleteDetailSuccessAction,
   createInitDetailAction,
+  createInitNewDetailAction,
   createLoadDetailFailureAction,
   createLoadDetailSuccessAction,
   createSaveDetailAction,
@@ -24,9 +29,19 @@ export interface CreateInitFormConfig<T> {
   get?: (obj: any) => Observable<T>;
   snackbar?: any;
   errorMessage?: string;
+  notFoundMessage?: string;
   successMessge?: string;
 }
 
+export interface DetailEffectConfig<T> {
+  detail$: Observable<T | undefined>;
+  snackbar?: any;
+  router?: Router;
+  redirectPath?: string;
+  useItemId?: boolean;
+  navigationMap?: Map<keyof T, string>;
+}
+
 export function createInitDetailEffect<T>(
   detailsRepository: string,
   actions$: Actions,
@@ -38,14 +53,19 @@ export function createInitDetailEffect<T>(
       switchMap(({ obj }) => {
         const get$: Observable<any> = (config?.service?.get(obj as any) ??
           config?.get?.(obj)) as Observable<any>;
-          if(!get$) return EMPTY;
+        if (!get$) return EMPTY;
         return get$?.pipe(
           map((item) => {
             return createLoadDetailSuccessAction(detailsRepository)({ item });
           }),
           catchError((error) => {
+            if (error.status === 404) {
+              config?.snackbar?.showError(config?.notFoundMessage ?? error);
+            } else {
+              config?.snackbar?.showError(config?.errorMessage ?? error);
+            }
+
             console.error('Error', error);
-            config?.snackbar?.showError(config?.errorMessage ?? error);
             return of(
               createLoadDetailFailureAction(detailsRepository)({ error })
             );
@@ -56,53 +76,98 @@ export function createInitDetailEffect<T>(
   });
 }
 
-  export function createSaveDetailEffect<
-    T extends { id: number },
-    SERVICE extends BaseHttpService<T>
-  >(
-    detailsRepository: string,
-    actions$: Actions,
-    service: SERVICE,
-    detail$: Observable<T | undefined>,
-  ) {
-    return createEffect(() =>
+export function createInitNewDetailEffect(
+  detailsRepository: string,
+  actions$: Actions
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createInitNewDetailAction(detailsRepository)),
+      map(() => {
+        return createLoadDetailSuccessAction(detailsRepository)({ item: null });
+      })
+    )
+  );
+}
+
+export function createSaveDetailEffect<
+  T extends { id: number | string },
+  SERVICE extends BaseHttpService<T>
+>(
+  detailsRepository: string,
+  actions$: Actions,
+  service: SERVICE,
+  config: DetailEffectConfig<T>
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createSaveDetailAction(detailsRepository)),
+      withLatestFrom(config.detail$),
+      switchMap(([, savedItem]) => {
+        const isNew = !savedItem?.id;
+        const saveAction = isNew
+          ? service.post(savedItem as T)
+          : service.put(savedItem.id, savedItem);
+        return saveAction.pipe(
+          map((item) => {
+            if (isNew && config?.router && config?.redirectPath) {
+              const suffix = config?.useItemId ? '/' + item.id : '';
+              config.router.navigateByUrl(config.redirectPath + suffix);
+            }
+
+            if (isNew && config?.router && config?.navigationMap) {
+              const url = constructUrlFromNavigationMap(item, config.navigationMap)
+              config.router.navigateByUrl(url);
+            }
+
+            return createSaveDetailSuccessAction(detailsRepository)({
+              item: item,
+            });
+          }),
+          catchError((error) => {
+            console.error('Error', error);
+            return of(
+              createSaveDetailFailureAction(detailsRepository)({ error })
+            );
+          })
+        );
+      })
+    )
+  );
+}
+
+export function createSaveDetailSuccessEffect(
+  detailsRepository: string,
+  actions$: Actions,
+  config?: CreateInitFormConfig<unknown>
+) {
+  return createEffect(
+    () =>
       actions$.pipe(
-        ofType(createSaveDetailAction(detailsRepository)),
-        withLatestFrom(detail$),
-        switchMap(([, savedItem]) => {
-          const isNew = !savedItem?.id;
-          const saveAction = isNew
-            ? service.post(savedItem as T)
-            : service.put(savedItem.id, savedItem);
-          return saveAction.pipe(
-            map((item) => {
-              return createSaveDetailSuccessAction(detailsRepository)({
-                item: item,
-              });
-            }),
-            catchError((error) => {
-              console.error('Error', error);
-              return of(
-                createSaveDetailFailureAction(detailsRepository)({ error })
-              );
-            })
+        ofType(createSaveDetailSuccessAction(detailsRepository)),
+        map((data: any) => {
+          config?.snackbar?.showSuccess(
+            config?.successMessge ?? `Item successfully saved.`
           );
+          return createInitDetailAction(detailsRepository)({ obj: data.item.id });
         })
       )
-    );
-  }
+  );
+}
 
-export function createSaveDetailSuccessEffect(
+export function createSaveDetailFailureEffect(
   detailsRepository: string,
   actions$: Actions,
-  config?: CreateInitFormConfig<unknown>,
+  config?: CreateInitFormConfig<unknown>
 ) {
   return createEffect(
     () =>
       actions$.pipe(
-        ofType(createSaveDetailSuccessAction(detailsRepository)),
-        tap(() => {
-          config?.snackbar?.showSuccess(config?.successMessge ?? `Item successfully saved.`);
+        ofType(createSaveDetailFailureAction(detailsRepository)),
+        tap(({ error }) => {
+          config?.snackbar?.showError(
+            config.errorMessage ?? `Error saving item. ${error.message}`
+          );
         })
       ),
     {
@@ -111,21 +176,108 @@ export function createSaveDetailSuccessEffect(
   );
 }
 
-  export function createSaveDetailFailureEffect(
-    detailsRepository: string,
-    actions$: Actions,
-    config?: CreateInitFormConfig<unknown>,
-  ) {
-    return createEffect(
-      () =>
-        actions$.pipe(
-          ofType(createSaveDetailFailureAction(detailsRepository)),
-          tap(({error}) => {
-            config?.snackbar?.showError(config.errorMessage ?? `Error saving item. ${error.message}`);
+export function createDeleteDetailEffect<
+  T extends { id: number | string },
+  SERVICE extends BaseHttpService<T>
+>(
+  detailsRepository: string,
+  actions$: Actions,
+  service: SERVICE,
+  config: DetailEffectConfig<T>,
+) {
+  return createEffect(() =>
+    actions$.pipe(
+      ofType(createDeleteDetailAction(detailsRepository)),
+      withLatestFrom(config.detail$),
+      switchMap(([, savedItem]) => {
+        const id = savedItem?.id;
+        if (!id) {
+          return of(
+            createSaveDetailFailureAction(detailsRepository)({
+              error: 'Item has no id',
+            })
+          );
+        }
+
+        return service.delete(id).pipe(
+          map(() => {
+            if (config?.router && config?.redirectPath) {
+              config.router.navigateByUrl(`${config.redirectPath}`);
+            }
+
+            if (config?.router && config?.navigationMap) {
+              const url = constructUrlFromNavigationMap(savedItem, config.navigationMap)
+              config.router.navigateByUrl(url);
+            }
+
+            return createDeleteDetailSuccessAction(detailsRepository)();
+          }),
+          catchError((error) => {
+            console.error('Error', error);
+            config.snackbar?.showError('Failed to delete item.');
+            return of(
+              createDeleteDetailFailureAction(detailsRepository)({ error })
+            );
           })
-        ),
-      {
-        dispatch: false,
-      }
-    );
+        );
+      })
+    )
+  );
+}
+
+export function createDeleteDetailSuccessEffect(
+  detailsRepository: string,
+  actions$: Actions,
+  config?: CreateInitFormConfig<unknown>
+) {
+  return createEffect(
+    () =>
+      actions$.pipe(
+        ofType(createDeleteDetailSuccessAction(detailsRepository)),
+        tap(() => {
+          config?.snackbar?.showSuccess(
+            config.successMessge ?? `Item successfully deleted.`
+          );
+        })
+      ),
+    {
+      dispatch: false,
+    }
+  );
+}
+
+export function createDeleteDetailFailureEffect(
+  detailsRepository: string,
+  actions$: Actions,
+  config?: CreateInitFormConfig<unknown>
+) {
+  return createEffect(
+    () =>
+      actions$.pipe(
+        ofType(createDeleteDetailFailureAction(detailsRepository)),
+        tap(({ error }) => {
+          config?.snackbar?.showError(
+            config.errorMessage ?? `Error deleting item. ${error.message}`
+          );
+        })
+      ),
+    {
+      dispatch: false,
+    }
+  );
+}
+
+function constructUrlFromNavigationMap<T extends object>(
+  item: T,
+  navigationMap: Map<keyof T, string>)
+  : string {
+  let url = '';
+  navigationMap.forEach((urlPartValue, suffixPropertyKey) => {
+    const suffix = item[suffixPropertyKey];
+    if (suffix) {
+      url += `${urlPartValue}/${suffix}`;
+    }
+  });
+
+  return url;
 }

package/src/lib/detail-state/detail.models.ts

@@ -3,20 +3,20 @@ export interface DetailState<T> {
   item?: T;
   formState?: FormState;
   error?: string | null;
+  saveItemState: SaveItemState;
+  backendValidationErrors: BackendValidationError[];
 }
 
-export interface ChosenRowsState<T> { 
-  rows: Array<T>;
+export interface BackendValidationError {
+  code: string;
+  message: string;
+  parameters: string;
 }
 
-export const INITIAL_CHOSEN_ROW_STATE: ChosenRowsState<any> = {
-  rows: []
+export interface ChosenRowsState<T> { 
+  rows: Array<T>;
 }
 
-export const INITIAL_DETAIL_STATE: DetailState<any> = {
-  loaded: false,
-};
-
 export interface SaveItemState {
   saveInProgress: boolean;
   error?: string | null;
@@ -26,6 +26,16 @@ export const INITIAL_SAVE_ITEM_STATE: SaveItemState = {
   saveInProgress: false,
 };
 
+export const INITIAL_CHOSEN_ROW_STATE: ChosenRowsState<any> = {
+  rows: []
+}
+
+export const INITIAL_DETAIL_STATE: DetailState<any> = {
+  loaded: false,
+  saveItemState: INITIAL_SAVE_ITEM_STATE,
+  backendValidationErrors: [],
+};
+
 export interface FormState {
   dirty: boolean;
   valid: boolean;

package/src/lib/detail-state/detail.reducer.ts

@@ -1,6 +1,7 @@
 import { ActionCreator, createReducer, on, ReducerTypes } from '@ngrx/store';
 import {
   createInitDetailAction,
+  createInitNewDetailAction,
   createLoadDetailFailureAction,
   createLoadDetailSuccessAction,
   createResetStateAction,
@@ -8,6 +9,7 @@ import {
   createSaveDetailFailureAction,
   createSaveDetailSuccessAction,
   createUpdateDetailAction,
+  createUpdateDetailSetErrorsAction,
   createUpdateFormStateAction,
 } from './detail.actions';
 import {
@@ -34,6 +36,14 @@ export function createDetailReducers<
       };
     }),
 
+    on(createInitNewDetailAction(detailRepository), (state) => {
+      return {
+        ...state,
+        loaded: false,
+        error: null,
+      };
+    }),
+
     on(createLoadDetailSuccessAction(detailRepository), (state, { item }) => {
       return {
         ...state,
@@ -61,6 +71,13 @@ export function createDetailReducers<
       };
     }),
 
+    on(createUpdateDetailSetErrorsAction(detailRepository), (state, { error }) => {
+      return {
+        ...state,
+        backendValidationErrors: error
+      }
+    }),
+
     on(
       createUpdateFormStateAction(detailRepository),
       (state, { formState }) => {
@@ -80,11 +97,19 @@ export function createDetailReducers<
         },
       };
     }),
+    
     on(createResetStateAction(detailRepository), () => {
       return {
         ...(initialState as any),
       };
     }),
+    
+    on(createSaveDetailFailureAction(detailRepository), (state, { error }) => {
+      return {
+        ...state,
+        backendValidationErrors: error.error
+      }
+    }),
     ...ons
   );
 }

package/src/lib/table-state/effects.ts

@@ -84,13 +84,13 @@ export function createRemoveRangeTableEffect<T>(
     return actions$.pipe(
       ofType(createRemoveRangeTableAction(tableRepository)),
       withLatestFrom(selectedItems),
-      switchMap(([, {selectedItems}]) => {
+      switchMap(([, { selectedItems }]) => {
         return config.service!.removeRange(selectedItems).pipe(
-          map(() => { 
+          map(() => {
             return createGetPageTableAction(tableRepository)
             ({ page: 0, size: DEFAULT_SEARCH_LIMIT })
           }),
-          catchError(error => { 
+          catchError(error => {
             return of(createDataLoadErrorTableAction(tableRepository)({ error }))
           })
         );