@one-paragon/angular-utilities 0.1.19 → 0.1.21

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/http-request-state'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-utilities",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,36 +1,16 @@
-{
-  "name": "@one-paragon/angular-utilities",
-  "version": "0.1.19",
-  "peerDependencies": {
-    "@angular/common": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/material": "^14.0.0",
-    "@ngrx/component": "^14.0.0",
-    "@ngrx/component-store": "^14.0.0",
-    "@ngrx/effects": "^14.0.0",
-    "@ngrx/store": "^14.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.1.0"
-  },
-  "module": "fesm2015/one-paragon-angular-utilities.mjs",
-  "es2020": "fesm2020/one-paragon-angular-utilities.mjs",
-  "esm2020": "esm2020/one-paragon-angular-utilities.mjs",
-  "fesm2020": "fesm2020/one-paragon-angular-utilities.mjs",
-  "fesm2015": "fesm2015/one-paragon-angular-utilities.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/one-paragon-angular-utilities.mjs",
-      "es2020": "./fesm2020/one-paragon-angular-utilities.mjs",
-      "es2015": "./fesm2015/one-paragon-angular-utilities.mjs",
-      "node": "./fesm2015/one-paragon-angular-utilities.mjs",
-      "default": "./fesm2020/one-paragon-angular-utilities.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@one-paragon/angular-utilities",
+  "version": "0.1.21",
+  "peerDependencies": {
+    "@angular/common": "^15.0.1",
+    "@angular/core": "^15.0.1",
+    "@angular/material": "^15.0.0",
+    "@ngrx/component": "^14.3.2",
+    "@ngrx/component-store": "^14.3.2",
+    "@ngrx/effects": "^14.3.2",
+    "@ngrx/store": "^14.3.2"
+  },
+  "dependencies": {
+    "tslib": "^2.4.1"
+  }
+}

package/src/action-state/action-state-spinner/action-state-spinner.component.css

@@ -0,0 +1,16 @@
+#blocker {
+  position:fixed;
+  top: 0px;
+    left: 0px;
+  width:100%;
+  height:100%;
+  background-color:rgba(14, 13, 13, 0.411);
+  z-index:999999;
+}
+
+.spinner{
+  position: absolute;
+  top:50%;
+  left:40%;
+  transform: translate(-50%, -50%);
+}

package/src/action-state/action-state-spinner/action-state-spinner.component.html

@@ -0,0 +1,3 @@
+<div id="blocker" *ngIf="(serverActionStatus$ | async)?.status === serverStatusTypes.inProgress">
+  <mat-spinner class="spinner" [diameter]="200"></mat-spinner>
+</div>

package/src/action-state/action-state-spinner/action-state-spinner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionStateSpinnerComponent } from './action-state-spinner.component';
+
+describe('ActionStateSpinnerComponent', () => {
+  let component: ActionStateSpinnerComponent;
+  let fixture: ComponentFixture<ActionStateSpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionStateSpinnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionStateSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/action-state/action-state-spinner/action-state-spinner.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActionStatus, serverStatusTypes } from '../ngrx';
+import { delayOn } from '../../rxjs';
+
+@Component({
+  selector: 'lib-action-state-spinner',
+  templateUrl: './action-state-spinner.component.html',
+  styleUrls: ['./action-state-spinner.component.css']
+})
+export class ActionStateSpinnerComponent implements OnInit {
+
+  @Input() status$!: Observable<ActionStatus>;
+  serverActionStatus$!: Observable<ActionStatus>;
+  serverStatusTypes = serverStatusTypes;
+
+  ngOnInit() {
+    this.serverActionStatus$ = this.status$.pipe(
+      delayOn( a => a.status === serverStatusTypes.inProgress , 500)
+    );
+  }
+}

package/src/action-state/action-state-ui/action-state-ui.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActionStateSpinnerComponent } from '../action-state-spinner/action-state-spinner.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+
+@NgModule({
+  declarations: [
+    ActionStateSpinnerComponent,
+  ],
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+  ],
+  exports: [
+    ActionStateSpinnerComponent,
+  ]
+})
+export class ActionStateUiModule { }

package/{action-state/index.d.ts → src/action-state/index.ts}

@@ -1,3 +1,7 @@
+/*
+ * Public API Surface of action-state
+ */
+
 export * from './ngrx';
 export * from './ngrx-ext/ngrx-ext.module';
 export * from './action-state-ui/action-state-ui.module';

package/src/action-state/ngrx-ext/ngrx-ext.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { actionStatusReducer } from '../ngrx';
+import { StoreModule } from '@ngrx/store';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    StoreModule.forFeature('ActionStatus', actionStatusReducer),
+  ]
+})
+export class NgrxExtModule { }

package/src/action-state/ngrx.ts

@@ -0,0 +1,69 @@
+import { Action, createFeatureSelector, createSelector } from '@ngrx/store';
+import { createEntityAdapter, EntityState } from '@ngrx/entity';
+import { get } from 'lodash';
+
+// State
+export class AppStatusState {
+  readonly ActionStatusBar!: ActionStatus[];
+}
+
+export interface StatusState {
+  ids: string[];
+  entities: {[id: string]: ActionStatus};
+}
+
+export class ActionStatus {
+  id!: string;
+  displayName?: string;
+  status!: serverStatusTypes;
+  responsePayload?: any;
+}
+
+const intitalState: StatusState = {
+  ids: [],
+  entities: {}
+};
+
+export enum serverStatusTypes {
+  notStarted = 0,
+  inProgress = 1,
+  success = 2,
+  error = 3
+}
+
+// Entity and Selectors
+export const statusAdapter = createEntityAdapter<ActionStatus>(); // { selectId: a => a.id }
+export interface State extends EntityState<ActionStatus> {}
+export const initialState: StatusState = statusAdapter.getInitialState(intitalState);
+
+export const getStatusState = createFeatureSelector<State>('ActionStatus');
+export const {
+  selectIds,
+  selectEntities,
+  selectAll,
+  selectTotal
+} = statusAdapter.getSelectors(getStatusState);
+
+export const selectEntity = (id: string) => createSelector(
+  selectEntities,
+  (entities: any)  => entities[id]
+);
+
+// Reducers
+export function actionStatusReducer(state: StatusState = initialState, action: Action) {
+
+  const actionStatus: ActionStatus = get(action, 'payload.actionStatus' );
+
+  if ( actionStatus ) {
+    if ( state.ids.find(id => id === actionStatus.id) ) {
+      const modifiedObj = {...state.entities[actionStatus.id] };
+      modifiedObj.status = actionStatus.status;
+      modifiedObj.responsePayload = actionStatus.responsePayload;
+      return statusAdapter.upsertOne( modifiedObj, state);
+    } else {
+      return statusAdapter.addOne(actionStatus , state);
+    }
+
+  }
+  return state;
+}

package/src/http-request-state/HttpRequestStateFactory.ts

@@ -0,0 +1,26 @@
+import { Injectable, OnDestroy } from "@angular/core";
+import { HttpRequestFactory, RequestStateOptions } from "./types";
+import { HttpRequestStateStore } from './HttpRequestStateStore';
+import { Observable } from "rxjs";
+
+@Injectable()
+export class HttpRequestStateFactory  implements OnDestroy {
+
+  constructor() {}
+  ngOnDestroy(): void {
+    this.requestors.forEach( request => request.ngOnDestroy());
+  }
+  private requestors: OnDestroy[] = [];
+  create<TParam extends any[], T>( req: HttpRequestFactory<TParam,T>, options?: RequestStateOptions ) : HttpRequestStateStore<TParam,T> {
+    const requestor = new HttpRequestStateStore(req, options);
+    this.requestors.push(requestor);
+    return requestor;
+  }
+
+  createHttpClient<T>( r: (o: Observable<T> ) => Observable<T> , options?: RequestStateOptions )  {
+    const requestor = new HttpRequestStateStore(r, options);
+    this.requestors.push(requestor);
+    return requestor;
+  }
+
+}

package/src/http-request-state/HttpRequestStateStore.ts

@@ -0,0 +1,147 @@
+import { Observable, of, Subscription } from 'rxjs';
+import { ComponentStore } from '@ngrx/component-store';
+import { HttpRequestFactory, HttpRequestStrategy, HttpRequestStatus, HttpRequestState, RequestStateOptions, HttpRequestStateCancelled } from './types';
+import { createFailure, createSuccess, inProgress, isErrorState, isSuccessOrErrorState, isSuccessState, notStarted } from './helpers';
+import { concatMap, filter, map, mergeMap, pluck, startWith, switchMap, tap } from 'rxjs/operators';
+import { HttpErrorResponse } from '@angular/common/http';
+import { mapError } from '../rxjs/mapError';
+import { defaultShareReplay } from '../rxjs/defaultShareReplay';
+import { Directive } from '@angular/core';
+
+export interface RequestResponse<TParam extends any[],T> {
+  requestParams: [...TParam];
+  response: HttpRequestState<T>;
+}
+
+@Directive()
+export class HttpRequestStateStore<TParam extends any[], T> extends ComponentStore<RequestResponse<TParam,T>> {
+
+    constructor(private req: HttpRequestFactory<TParam,T> ,private options?: RequestStateOptions) {
+      super({ requestParams: null as any ,response: notStarted });
+      this.request = (this.options?.strategy === HttpRequestStrategy.singleUse) ? this.singleUseRequest :  this.flattenedRequest;
+    }
+
+    reset() {
+      this.setState({ requestParams:null as any, response: notStarted });
+    }
+
+    private flatteningStrategy = () => {
+      if(this.options?.strategy === HttpRequestStrategy.concurrent)
+        return mergeMap( (params: [...TParam]) => this.createRequest(...params));
+      if(this.options?.strategy === HttpRequestStrategy.sequential)
+        return concatMap( (params: [...TParam]) => this.createRequest(...params));
+      return switchMap( (params: [...TParam]) => ((params[0] as any) instanceof CancellationToken) ?
+        of({ requestParams: params[0], response: { status: HttpRequestStatus.cancelled } as HttpRequestStateCancelled } ) : this.createRequest(...params) );
+    }
+
+    private requestEffect: (value: [...TParam] ) => Subscription = this.effect((obs: Observable<[...TParam]>) => {
+      return (obs).pipe(
+        this.flatteningStrategy(),
+        tap<RequestResponse<TParam, T>>(state => this.setState(state)),
+      );
+    });
+
+    private flattenedRequest = (...value: [...TParam]) => {
+      return this.requestEffect(value) as Subscription;
+    }
+    private singleUseRequest = (...value: [...TParam]) => {
+      if (this.get().response.status !== HttpRequestStatus.notStarted) {
+        throw new Error("state can not be reused. either reset the state by calling reset() or use a state requester that allows concurrent requests.");
+      }
+      return this.requestEffect(value) as Subscription;
+    }
+
+    selectHttpState$ = this.state$.pipe(map(a => a.response));
+
+    selectStatus$ = this.selectHttpState$.pipe(map(a => a.status));
+
+    selectError$ = this.state$.pipe(
+      map(r => r.response),
+      filter(isErrorState),
+      map( state => state.error)
+    );
+
+    selectResponse$ = this.state$.pipe(
+      map(r => r.response),
+      filter(isSuccessState),
+      map( state => state.body)
+    );
+    selectSuccessOrError$ = this.state$.pipe(
+      map(r => r.response),
+      filter(isSuccessOrErrorState),
+      map( () => null)
+    );
+
+    errorHandled = false;
+    onError( cb: (error: HttpErrorResponse) => void) {
+      this.errorHandled = true;
+      this.on(this.selectError$, cb);
+      return this;
+    }
+
+    onSuccess( cb: (body: T) => void) {
+      this.on(this.selectResponse$, cb);
+      return this;
+    }
+
+    onSuccessOrError(cb: () => void){
+      this.on(this.selectSuccessOrError$, cb);
+      return this;
+    }
+
+    onSuccessWithRequest(func: (state: {
+      requestParams: [...TParam];
+      body: T;
+    }) => void) {
+      this.onUpdate(({ requestParams, response }) => {
+        if(isSuccessState(response)){
+          func({requestParams,body: response.body});
+        }
+      });
+      return this;
+    }
+
+    onErrorWithRequest(func: (state: {
+      error: HttpErrorResponse;
+      requestParams: [...TParam];
+    }) => void) {
+      this.onUpdate( ({ requestParams, response }) => {
+        if(isErrorState(response)){
+          func({ requestParams, error: response.error });
+        }
+      });
+      return this;
+    }
+
+    private createRequest(...params: [...TParam]): Observable<RequestResponse<TParam,T>> {
+      return this.req(...params).pipe(
+        map(createSuccess),
+        mapError(createFailure),
+        startWith(inProgress),
+        map( state => ({ requestParams: params, response: state })),
+        defaultShareReplay()
+      );
+    }
+
+    onUpdate(func: (state: {
+      requestParams: [...TParam];
+      response: HttpRequestState<T>;
+    }) => void) {
+      this.on(this.state$, func);
+    }
+
+    on = <V>(srcObservable: Observable<V>, func: (obj: V) => void): Subscription => {
+      return this.effect((src: Observable<V>) => {
+        return src.pipe(tap(func));
+      })(srcObservable) as Subscription;
+    }
+
+    request: (...value: [...TParam] ) => Subscription;
+
+    ngOnDestroy() {
+      super.ngOnDestroy();
+    }
+
+  }
+
+  export class CancellationToken {}

package/src/http-request-state/directives/HttpStateDirectiveBase.ts

@@ -0,0 +1,38 @@
+import { Directive, Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { HttpRequestState } from '../types';
+import { HttpRequestStateDirective } from './request-state-directive';
+
+@Directive()
+export abstract class HttpStateDirectiveBase {
+    hasView = false;
+    constructor(
+        private injector: Injector,
+        protected templateRef: TemplateRef<any>,
+        protected viewContainer: ViewContainerRef,
+    ) {
+
+    }
+
+    ngOnInit() {
+        const parent = this.injector.get(HttpRequestStateDirective);
+        if(parent == null) {
+            throw new Error('You can only use an http state directive as a child of the httpRequestState directive.');
+        }
+        parent.hooks.push(this.baseRender);
+        this.baseRender(parent.ViewContext.state);
+    }
+
+    ngOnDestroy() {
+        
+    }
+
+    private baseRender = (state:HttpRequestState ) : void => {
+        if (this.hasView) {
+            this.viewContainer.clear();
+            this.hasView = false;
+        }
+        this.hasView = this.render(state);
+    }
+
+    abstract render: (state: HttpRequestState) => boolean;
+}

package/src/http-request-state/directives/http-error-state-directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { isErrorState } from '../helpers';
+import { HttpRequestState } from '../types';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+
+@Directive({ selector: '[httpErrorState]' })
+export class HttpErrorStateDirective<TParam extends any[], T> extends HttpStateDirectiveBase {
+
+  constructor(
+    injector: Injector,
+    templateRef: TemplateRef<any>,
+    viewContainer: ViewContainerRef,
+  ) {
+    super(injector, templateRef, viewContainer);
+  }
+
+  render = (state: HttpRequestState<any>) => {
+    if (isErrorState(state)) {
+      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: state.error });
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+  }
+}

package/src/http-request-state/directives/http-inProgress-state-directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+import { HttpRequestState, HttpRequestStatus } from '../types'
+
+
+@Directive({ selector: '[httpInProgressState]' })
+export class HttpInProgressStateDirective  extends HttpStateDirectiveBase {
+    render = (state: HttpRequestState<any>) => {
+        if(state.status === HttpRequestStatus.inProgress){
+            this.viewContainer.createEmbeddedView(this.templateRef );
+            return true;
+        }
+        return false;
+    };
+
+    constructor(
+       injector: Injector,
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+    ) {
+        super(injector,templateRef,viewContainer);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+    }
+
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+
+}

package/src/http-request-state/directives/http-notStarted-state-directive.ts

@@ -0,0 +1,31 @@
+import { Directive, Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { HttpRequestState, HttpRequestStatus } from '../types';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+
+
+@Directive({ selector: '[httpNotStartedState]' })
+export class HttpNotStartedStateDirective<TParam extends any[],T> extends HttpStateDirectiveBase {
+    render = (state: HttpRequestState<any>) => {
+        if(state.status === HttpRequestStatus.notStarted){
+            this.viewContainer.createEmbeddedView(this.templateRef );
+            return true;
+        }
+        return false;
+    };
+
+    constructor(
+        injector: Injector,
+        templateRef: TemplateRef<any>,
+        viewContainer: ViewContainerRef,
+    ) {
+        super(injector,templateRef,viewContainer);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+    }
+
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/src/http-request-state/directives/http-success-state-directive.ts

@@ -0,0 +1,31 @@
+import { Directive,  Injector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { isSuccessState } from '../helpers';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+import { HttpRequestState } from '../types';
+
+@Directive({ selector: '[httpSuccessState]'})
+export class HttpSuccessStateDirective<T> extends HttpStateDirectiveBase {
+    render = (state: HttpRequestState<any>) => {
+        if(isSuccessState(state)){
+            this.viewContainer.createEmbeddedView(this.templateRef,{ $implicit: state.body} );
+            return true;
+        }
+        return false;
+    };
+
+    constructor(
+        injector: Injector,
+        templateRef: TemplateRef<{$implicit: T}>,
+        viewContainer: ViewContainerRef,
+    ) {
+        super(injector,templateRef,viewContainer);
+    }
+
+    ngOnInit() {
+        super.ngOnInit();
+    }
+
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}

package/{http-request-state/directives/index.d.ts → src/http-request-state/directives/index.ts}

@@ -1,5 +1,5 @@
-export * from './http-error-state-directive';
-export * from './http-inProgress-state-directive';
-export * from './http-notStarted-state-directive';
-export * from './http-success-state-directive';
-export * from './request-state-directive';
+export * from './http-error-state-directive';
+export * from './http-inProgress-state-directive';
+export * from './http-notStarted-state-directive';
+export * from './http-success-state-directive';
+export * from './request-state-directive';