NgRx crud example

client/src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {LoginComponent} from './login/login.component';
 import {SetupComponent} from './setup/setup.component';
 import {SetupGuardService} from './setup/setup-guard.service';
-import {KazukuAuthGuardService} from './common/auth/kazuku-auth-guard.service';
+import {KazukuAuthGuardService} from '@common/auth/kazuku-auth-guard.service';
 import {IconNamesEnum} from "ngx-bootstrap-icons";
 import {faGauge} from "@fortawesome/free-solid-svg-icons/faGauge";
 import {faPlaneDeparture} from "@fortawesome/free-solid-svg-icons/faPlaneDeparture";

client/src/app/app.component.ts

@@ -1,12 +1,10 @@
 import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';
-import {AuthService} from './common/auth/auth.service';
+import {AuthService} from '@common/auth/auth.service';
 import {Store} from '@ngrx/store';
 import {SideBarComponent} from "./layout/side-bar/side-bar.component";
-import {AuthActions} from './common/auth/store';
+import {AuthActions} from '@common/auth/store';
 import {tap} from 'rxjs/operators';
 
-// import {LoadAuth} from './common/auth/store/actions/auth.actions';
-
 @Component({
     selector: 'kz-root',
     templateUrl: './app.component.html',

client/src/app/app.module.ts

@@ -11,18 +11,18 @@ import {SiteService} from './sites/site.service';
 import {LoginComponent} from './login/login.component';
 import {UserListComponent} from './users/user-list.component';
 import {QueryService} from './queries/query.service';
-import {AuthService} from './common/auth/auth.service';
+import {AuthService} from '@common/auth/auth.service';
 import {SetupComponent} from './setup/setup.component';
 import {SetupService} from './setup/setup.service';
 import {SetupGuardService} from './setup/setup-guard.service';
-import {KazukuAuthGuardService} from './common/auth/kazuku-auth-guard.service';
+import {KazukuAuthGuardService} from '@common/auth/kazuku-auth-guard.service';
 import {CustomDataComponent} from './custom-data/custom-data.component';
 import {CustomDataService} from './custom-data/custom-data.service';
-import {UnAuthenticatedResponseInterceptor} from './common/interceptors/unauthenticated-response.interceptor';
-import {HttpService} from './common/http.service';
+import {UnAuthenticatedResponseInterceptor} from '@common/interceptors/unauthenticated-response.interceptor';
+import {HttpService} from '@common/http.service';
 import {ContextComponent} from './layout/context/context.component';
-import {AutofocusDirective} from './common/ui/autofocus.directive';
-import {BaseComponent} from './common/base-component';
+import {AutofocusDirective} from '@common/ui/autofocus.directive';
+import {BaseComponent} from '@common/base-component';
 import {WorkspaceActionsComponent} from './layout/workspace-actions/workspace-actions.component';
 import {DashboardModule} from './dashboard/dashboard.module';
 import {OrganizationsModule} from './organizations/organizations.module';
@@ -36,16 +36,16 @@ import {environment} from '../environments/environment';
 import {EffectsModule} from '@ngrx/effects';
 import {RouterState, StoreRouterConnectingModule} from '@ngrx/router-store';
 
-import {IdbService} from './common/indexed-db/idb.service';
-import {AuthTokenCacheService} from './common/auth/auth-token-cache.service';
-import {AuthRequestInterceptor} from './common/interceptors/auth-request.interceptor';
-import {KazukuAuthProviderService} from './common/auth/kazuku-auth-provider.service';
+import {IdbService} from '@common/indexed-db/idb.service';
+import {AuthTokenCacheService} from '@common/auth/auth-token-cache.service';
+import {AuthRequestInterceptor} from '@common/interceptors/auth-request.interceptor';
+import {KazukuAuthProviderService} from '@common/auth/kazuku-auth-provider.service';
 import {registerLocaleData} from '@angular/common';
 import en from '@angular/common/locales/en';
 import {FormsModule} from '@angular/forms';
 import {SideBarComponent} from './layout/side-bar/side-bar.component';
 import {appReducer, metaReducers} from './store/app.reducer';
-import {AuthEffects} from './common/auth/store/auth.effects';
+import {AuthEffects} from '@common/auth/store/auth.effects';
 
 registerLocaleData(en);
 

client/src/app/common/auth/kazuku-auth-provider.service.ts

@@ -85,6 +85,6 @@ export class KazukuAuthProviderService implements IAuthProvider {
 
     private handleRequestTokenError(error) {
       console.error(error);
-      return observableThrowError(() => error || 'Server error');
+      return observableThrowError(() => error ?? 'Server error');
     }
 }

client/src/app/common/generic.service.ts

@@ -2,7 +2,7 @@ import {throwError as observableThrowError, Observable} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {environment} from '../../environments/environment';
 import {BaseModel} from './base.model';
-import JsonUtils from './utils/json-utils';
+import JsonUtils from './utils/json.utils';
 import {HttpService} from './http.service';
 import {catchError, map} from 'rxjs/operators';
 
@@ -78,6 +78,6 @@ export class GenericService<T extends BaseModel> {
 
     handleError(error) {
         console.error(error);
-        return observableThrowError(error || 'Server error');
+        return observableThrowError(() => error ?? 'Server error');
     }
 }

client/src/app/common/utils/ngrx.utils.ts

@@ -0,0 +1,17 @@
+// This class is kept simple for easier consumption.  You must not add any dependencies that require injection here.  If you
+//  need anything injected, you need to change this to a service and provide it in the app module, inject into constructors, etc, etc.
+export default class NgRxUtils {
+    static getUpdateObjectFor(item) {
+        if (!item.id) {
+            console.error(`item must have id property in NgRxUtils.getUpdateObjectFor()`)
+        }
+
+        const update = {
+            id: item.id,
+            changes: {...item} // changes must be serializable and not have a custom constructor
+        };
+
+        return update;
+    }
+
+}

client/src/app/content/content-model.service.ts

@@ -1,7 +1,7 @@
 import {Inject, Injectable} from '@angular/core';
-import {GenericService} from '../common/generic.service';
+import {GenericService} from '@common/generic.service';
 import {CustomSchema} from '../custom-schemas/custom-schema.model';
-import {HttpService} from '../common/http.service';
+import {HttpService} from '@common/http.service';
 import {catchError, map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
 

client/src/app/content/content-models/create-model/create-model.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
 import {CustomSchema} from '../../../custom-schemas/custom-schema.model';
-import {BaseComponent} from '../../../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {ActivatedRoute, Router} from '@angular/router';
 import {CustomSchemaService} from '../../../custom-schemas/custom-schema.service';
 import {ContentModelService} from '../../content-model.service';

client/src/app/content/content-models/model-details/model-details.component.ts

@@ -4,7 +4,7 @@ import {CustomSchema} from '../../../custom-schemas/custom-schema.model';
 import {ActivatedRoute, Params} from '@angular/router';
 import {ContentModelService} from '../../content-model.service';
 import {share, switchMap, tap} from 'rxjs/operators';
-import {BaseComponent} from '../../../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
 
 @Component({

client/src/app/content/content-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {ContentDashboardComponent} from './container/content-dashboard/content-dashboard.component';
-import {KazukuAuthGuardService} from "../common/auth/kazuku-auth-guard.service";
+import {KazukuAuthGuardService} from "@common/auth/kazuku-auth-guard.service";
 import {CustomDataComponent} from "../custom-data/custom-data.component";
 
 

client/src/app/content/content.service.ts

@@ -1,6 +1,6 @@
 import {Inject, Injectable} from '@angular/core';
-import {GenericService} from '../common/generic.service';
-import {HttpService} from '../common/http.service';
+import {GenericService} from '@common/generic.service';
+import {HttpService} from '@common/http.service';
 import {catchError, map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
 

client/src/app/custom-data/custom-data.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {CustomSchema} from '../custom-schemas/custom-schema.model';
-import {BaseComponent} from '../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {CustomDataService} from './custom-data.service';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {CustomSchemaService} from '../custom-schemas/custom-schema.service';

client/src/app/custom-data/custom-data.service.ts

@@ -3,8 +3,8 @@ import {environment} from '../../environments/environment';
 import {Observable} from 'rxjs';
 
 
-import {GenericService} from '../common/generic.service';
-import {HttpService} from '../common/http.service';
+import {GenericService} from '@common/generic.service';
+import {HttpService} from '@common/http.service';
 import {catchError, map} from 'rxjs/operators';
 
 @Injectable()

client/src/app/custom-schemas/custom-schema.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit, OnDestroy} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
-import {BaseComponent} from '../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {CustomSchema} from './custom-schema.model';
 import {CustomSchemaService} from './custom-schema.service';
 import {NgForm, FormArray, FormGroup, FormControl, Validators, AbstractControl} from '@angular/forms';

client/src/app/custom-schemas/custom-schema.service.ts

@@ -1,7 +1,7 @@
 import {Injectable, Inject} from '@angular/core';
 import {Observable} from 'rxjs';
-import {GenericService} from '../common/generic.service';
-import {HttpService} from '../common/http.service';
+import {GenericService} from '@common/generic.service';
+import {HttpService} from '@common/http.service';
 import {catchError, map} from 'rxjs/operators';
 import {CustomSchema} from './custom-schema.model';
 

client/src/app/custom-schemas/field-builder.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-import {BaseComponent} from '../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {FormGroup} from '@angular/forms';
 
 

client/src/app/custom-schemas/model-fields/model-field/field-settings/field-settings.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
-import {BaseComponent} from '../../../../common/base-component';
-import {FieldTypes} from '../../../../common/constants/field-types.constants';
+import {BaseComponent} from '@common/base-component';
+import {FieldTypes} from '@common/constants/field-types.constants';
 import {BasicFieldSettingsComponent} from './basic-field-settings/basic-field-settings.component';
 import {FormGroup} from '@angular/forms';
 import {TabsetComponent} from 'ngx-bootstrap/tabs';

client/src/app/custom-schemas/model-fields/model-field/model-field.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {FieldTypes, FieldTypesUI} from '../../../common/constants/field-types.constants';
-import {BaseComponent} from '../../../common/base-component';
+import {FieldTypes, FieldTypesUI} from '@common/constants/field-types.constants';
+import {BaseComponent} from '@common/base-component';
 import {FieldSettingsComponent} from './field-settings/field-settings.component';
 import {FormControl, FormGroup} from '@angular/forms';
 import {BsModalRef, BsModalService} from 'ngx-bootstrap/modal';

client/src/app/custom-schemas/model-fields/model-fields.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {BaseComponent} from '../../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {FormGroup} from '@angular/forms';
-import {FieldTypes} from '../../common/constants/field-types.constants';
+import {FieldTypes} from '@common/constants/field-types.constants';
 
 @Component({
     selector: 'kz-model-fields',

client/src/app/custom-schemas/schema-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {CustomSchemaListComponent} from './custom-schema-list.component';
-import {KazukuAuthGuardService} from '../common/auth/kazuku-auth-guard.service';
+import {KazukuAuthGuardService} from '@common/auth/kazuku-auth-guard.service';
 import {CustomSchemaComponent} from './custom-schema.component';
 
 const routes: Routes = [

client/src/app/layout/context/context.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {AuthService} from '../../common/auth/auth.service';
-import {BaseComponent} from '../../common/base-component';
-import {IUserContext} from '../../common/auth/user-context.model';
+import {AuthService} from '@common/auth/auth.service';
+import {BaseComponent} from '@common/base-component';
+import {IUserContext} from '@common/auth/user-context.model';
 import {map, takeUntil, tap} from 'rxjs/operators';
 import {faAtom} from '@fortawesome/free-solid-svg-icons';
 import {Observable} from 'rxjs';
-import {AuthSelectors} from '../../common/auth/store';
+import {AuthSelectors} from '@common/auth/store';
 import {Store} from '@ngrx/store';
 
 @Component({

client/src/app/layout/nav-bar/nav-bar.component.ts

@@ -1,10 +1,10 @@
 import {Component, OnInit, OnDestroy, Input} from '@angular/core';
 import {Router} from '@angular/router';
 import {Observable, Subject} from 'rxjs';
-import {IUserContext} from '../../common/auth/user-context.model';
+import {IUserContext} from '@common/auth/user-context.model';
 import {filter, takeUntil, tap} from 'rxjs/operators';
 import {Store} from '@ngrx/store';
-import {AuthActions, AuthSelectors} from '../../common/auth/store';
+import {AuthActions, AuthSelectors} from '@common/auth/store';
 
 @Component({
     selector: 'kz-nav-bar',

client/src/app/layout/workspace-actions/workspace-action-items.ts

@@ -1,4 +1,4 @@
-import {WorkspaceActionItem} from '../../common/models/workspace-actions.model';
+import {WorkspaceActionItem} from '@common/models/workspace-actions.model';
 import {faCoffee} from '@fortawesome/free-solid-svg-icons';
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {faUser} from '@fortawesome/free-solid-svg-icons';

client/src/app/layout/workspace-actions/workspace-actions.component.ts

@@ -1,9 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {Observable} from 'rxjs';
-import {WorkspaceActionItem} from '../../common/models/workspace-actions.model';
+import {WorkspaceActionItem} from '@common/models/workspace-actions.model';
 import {WorkspaceActionsService} from './workspace-actions.service';
-import {IUserContext} from '../../common/auth/user-context.model';
-import {AuthActions, AuthSelectors} from '../../common/auth/store';
+import {IUserContext} from '@common/auth/user-context.model';
+import {AuthActions, AuthSelectors} from '@common/auth/store';
 import {Store} from '@ngrx/store';
 
 @Component({

client/src/app/layout/workspace-actions/workspace-actions.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Observable, of} from 'rxjs';
-import {WorkspaceActionItem} from '../../common/models/workspace-actions.model';
+import {WorkspaceActionItem} from '@common/models/workspace-actions.model';
 import {WorkspaceActionItems} from './workspace-action-items';
 
 @Injectable({

client/src/app/login/login.component.ts

@@ -1,8 +1,9 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {AuthService} from '../common/auth/auth.service';
-import {User} from '../common/auth/user.model';
+import {AuthService} from '@common/auth/auth.service';
+import {User} from '@common/auth/user.model';
 
 import {ActivatedRoute, Router} from '@angular/router';
+import * as AuthActions from '@common/auth/store/auth.actions';
 import * as AuthActions from '../common/auth/store/auth.actions';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {Store} from '@ngrx/store';

client/src/app/organizations/organization-list/organization-list.component.ts

@@ -1,13 +1,13 @@
 import {Component, OnInit} from '@angular/core';
-import {Organization} from '../../common/auth/organization.model';
+import {Organization} from '@common/auth/organization.model';
 import {OrganizationService} from '../shared/organization.service';
 import {Router} from '@angular/router';
-import {AuthService} from '../../common/auth/auth.service';
-import {BaseComponent} from '../../common/base-component';
-import {IUserContext} from '../../common/auth/user-context.model';
+import {AuthService} from '@common/auth/auth.service';
+import {BaseComponent} from '@common/base-component';
+import {IUserContext} from '@common/auth/user-context.model';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {Observable} from 'rxjs';
-import {AuthActions, AuthSelectors} from '../../common/auth/store';
+import {AuthActions, AuthSelectors} from '@common/auth/store';
 import {Store} from '@ngrx/store';
 
 @Component({

client/src/app/organizations/organization/organization.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit, OnDestroy} from '@angular/core';
 import {ActivatedRoute, ParamMap, Params, Router} from '@angular/router';
-import {BaseComponent} from '../../common/base-component';
-import {Organization} from '../../common/auth/organization.model';
+import {BaseComponent} from '@common/base-component';
+import {Organization} from '@common/auth/organization.model';
 import {OrganizationService} from '../shared/organization.service';
 import {FormControl, FormGroup, NgForm, Validators} from '@angular/forms';
 import {iif, Observable, of} from 'rxjs';
-import {filter, flatMap, mergeMap, share, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {filter, mergeMap, share, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 @Component({
     selector: 'kz-organization',

client/src/app/organizations/organizations-routing.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {OrganizationListComponent} from './organization-list/organization-list.component';
 import {OrganizationComponent} from './organization/organization.component';
-import {KazukuAuthGuardService} from '../common/auth/kazuku-auth-guard.service';
+import {KazukuAuthGuardService} from '@common/auth/kazuku-auth-guard.service';
 
 const routes: Routes = [
     {

client/src/app/organizations/shared/organization.service.ts

@@ -1,9 +1,9 @@
 import {Injectable, Inject} from '@angular/core';
 
-import {Organization} from '../../common/auth/organization.model';
+import {Organization} from '@common/auth/organization.model';
 import {catchError, map} from 'rxjs/operators';
-import {GenericService} from '../../common/generic.service';
-import {HttpService} from '../../common/http.service';
+import {GenericService} from '@common/generic.service';
+import {HttpService} from '@common/http.service';
 
 @Injectable()
 export class OrganizationService extends GenericService<Organization> {

client/src/app/pages/page.component.ts

@@ -3,7 +3,7 @@ import {ActivatedRoute, Params, Router} from '@angular/router';
 import {NgForm} from '@angular/forms';
 import {Template} from '../templates/template.model';
 import {TemplateService} from '../templates/template.service';
-import {BaseComponent} from '../common/base-component';
+import {BaseComponent} from '@common/base-component';
 import {Observable} from 'rxjs';
 
 import {Site} from '../sites/site.model';

client/src/app/queries/queries-routing.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {QueriesComponent} from './queries.component';
-import {KazukuAuthGuardService} from "../common/auth/kazuku-auth-guard.service";
+import {KazukuAuthGuardService} from "@common/auth/kazuku-auth-guard.service";
 import {QueryComponent} from "./query-details/query.component";
 
 const routes: Routes = [