@one-paragon/angular-utilities 2.8.2 → 2.8.4

package/karma.conf.js

@@ -0,0 +1,43 @@
+// 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')
+    ],
+    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,27 +1,15 @@
-{
-  "name": "@one-paragon/angular-utilities",
-  "version": "2.8.2",
-  "peerDependencies": {
-    "@angular/common": "21.1.0",
-    "@angular/core": "21.1.0",
-    "@angular/material": "21.1.0",
-    "@ngrx/component-store": "21.0.1",
-    "@ngrx/effects": "21.0.1",
-    "@ngrx/store": "21.0.1"
-  },
-  "dependencies": {
-    "tslib": "2.8.1"
-  },
-  "module": "fesm2022/one-paragon-angular-utilities.mjs",
-  "typings": "types/one-paragon-angular-utilities.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/one-paragon-angular-utilities.d.ts",
-      "default": "./fesm2022/one-paragon-angular-utilities.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@one-paragon/angular-utilities",
+  "version": "2.8.4",
+  "peerDependencies": {
+    "@angular/common": "21.1.0",
+    "@angular/core": "21.1.0",
+    "@angular/material": "21.1.0",
+    "@ngrx/component-store": "21.0.1",
+    "@ngrx/effects": "21.0.1",
+    "@ngrx/store": "21.0.1"
+  },
+  "dependencies": {
+    "tslib": "2.8.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,7 @@
+@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)
+{
+  <div id="blocker">
+    <mat-spinner class="spinner" [diameter]="200" />
+  </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,26 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActionStatus, serverStatusTypes } from '../ngrx';
+import { delayOn } from '../../rxjs';
+import { AsyncPipe } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'lib-action-state-spinner',
+  templateUrl: './action-state-spinner.component.html',
+  styleUrls: ['./action-state-spinner.component.css'],
+  imports: [AsyncPipe, MatProgressSpinnerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+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,13 @@
+import { NgModule } from '@angular/core';
+import { ActionStateSpinnerComponent } from '../action-state-spinner/action-state-spinner.component';
+
+
+@NgModule({
+  imports: [
+    ActionStateSpinnerComponent,
+  ],
+  exports: [
+    ActionStateSpinnerComponent,
+  ]
+})
+export class ActionStateUiModule { }

package/src/action-state/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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';
+export * from './action-state-spinner/action-state-spinner.component';

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

@@ -0,0 +1,14 @@
+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 InitialState: StatusState = {
+  ids: [],
+  entities: {}
+};
+
+export enum serverStatusTypes {
+  notStarted = 0,
+  inProgress = 1,
+  success = 2,
+  error = 3
+}
+
+// Entity and Selectors
+export const statusAdapter = createEntityAdapter<ActionStatus>();
+export interface State extends EntityState<ActionStatus> {}
+export const initialState: StatusState = statusAdapter.getInitialState(InitialState);
+
+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' ) as any;
+
+  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/RequestStateFactory.ts

@@ -0,0 +1,56 @@
+import { Injectable, Injector, OnDestroy, assertInInjectionContext, inject, runInInjectionContext } from "@angular/core";
+import { RequestFactory, RequestStateOptions, RequestCreatorOptions } from "./types";
+import { RequestStateStore } from './RequestStateStore';
+import { Observable } from "rxjs";
+
+@Injectable()
+export class RequestStateFactory implements OnDestroy {
+
+  constructor() {}
+  ngOnDestroy(): void {
+    this.requestors.forEach( request => request.destroy());
+  }
+  private requestors: RequestStateStore<any, any, any>[] = [];
+
+  create<TParam extends any[], V>( req: RequestFactory<TParam, V>, options?: RequestStateOptions<TParam>) : RequestStateStore<TParam, V>
+  create<TParam extends any[], V, R, T = R>( req: RequestFactory<TParam, V>, project: (v: V) => R, options?: RequestStateOptions<TParam>) : RequestStateStore<TParam, V, T>
+  create<TParam extends any[], V, R = null, T = R extends null ? V : R>(req: RequestFactory<TParam, V>, optionsOrProject?: RequestStateOptions<TParam> | ((v: V) => R), options?: RequestStateOptions<TParam> ) : RequestStateStore<TParam, V, R, T> {
+    const requestor = (typeof (optionsOrProject) === 'function' ? new RequestStateStore<TParam, V, R, T>(req, options, optionsOrProject) : new RequestStateStore<TParam, V, R, T>(req, optionsOrProject));
+    this.requestors.push(requestor);
+    return requestor;
+  }
+
+  createHttpClient<T>( r: (o: Observable<T> ) => Observable<T>, options?: RequestStateOptions<any> ) {
+    const requestor = new RequestStateStore(r, options);
+    this.requestors.push(requestor);
+    return requestor;
+  }
+}
+
+export function createRequestor<TParam extends any[], V>( req: RequestFactory<TParam, V>, options?: RequestCreatorOptions<TParam>) : RequestStateStore<TParam, V>
+export function createRequestor<TParam extends any[], V, R, T = R>( req: RequestFactory<TParam, V>, project: (v: V) => R, options?: RequestCreatorOptions<TParam>) : RequestStateStore<TParam, V, T>
+export function createRequestor<TParam extends any[], V, R = null, T = R extends null ? V : R>( req: RequestFactory<TParam, V>, optionsOrProject?: RequestCreatorOptions<TParam> | ((v: V) => R), options?: RequestCreatorOptions<TParam> ) : RequestStateStore<TParam, V, R, T>{
+  const ops = typeof (optionsOrProject) === 'function' ? options : optionsOrProject;
+  const injector = getInjector(ops);
+  return runInInjectionContext(injector, () => {
+    const requestStore = typeof (optionsOrProject) === 'function' ?
+      new RequestStateStore<TParam, V, R, T>(req, options, optionsOrProject)
+      : new RequestStateStore<TParam, V, R, T>(req, optionsOrProject);
+
+    return requestStore;
+  })
+}
+
+function getInjector(options?: RequestCreatorOptions<any>){
+  const providedInjector = options?.injector;
+
+  if(!providedInjector){
+    try {
+      assertInInjectionContext(createRequestor);
+    } catch (error) {
+      throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
+    }
+  }
+
+  return providedInjector ?? inject(Injector);
+}