@bitblit/ngx-acute-common 6.0.146-alpha → 6.0.148-alpha

package/src/pipes/order-by.pipe.ts

@@ -0,0 +1,59 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteOderBy', pure: false, standalone: true })
+export class OrderByPipe implements PipeTransform {
+  static _orderByComparator(a: any, b: any): number {
+    if (isNaN(parseFloat(a)) || !isFinite(a) || isNaN(parseFloat(b)) || !isFinite(b)) {
+      //Isn't a number so lowercase the string to properly compare
+      if (String(a).toLowerCase() < String(b).toLowerCase()) return -1;
+      if (String(a).toLowerCase() > String(b).toLowerCase()) return 1;
+    } else {
+      //Parse strings as numbers to compare properly
+      if (parseFloat(a) < parseFloat(b)) return -1;
+      if (parseFloat(a) > parseFloat(b)) return 1;
+    }
+
+    return 0; //equal each other
+  }
+
+  transform(input: any, [config = '+']): any {
+    if (!Array.isArray(input)) return input;
+
+    if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1)) {
+      const propertyToCheck: string = !Array.isArray(config) ? config : config[0];
+      const desc = propertyToCheck.substr(0, 1) == '-';
+
+      //Basic array
+      if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
+        return !desc ? input.sort() : input.sort().reverse();
+      } else {
+        const property: string =
+          propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' ? propertyToCheck.substr(1) : propertyToCheck;
+
+        return input.sort(function (a: any, b: any) {
+          return !desc
+            ? OrderByPipe._orderByComparator(a[property], b[property])
+            : -OrderByPipe._orderByComparator(a[property], b[property]);
+        });
+      }
+    } else {
+      //Loop over property of the array in order and sort
+      return input.sort(function (a: any, b: any) {
+        for (const cEntry of config) {
+          //for (let i: number = 0; i < config.length; i++) {
+          const desc = cEntry.substr(0, 1) == '-';
+          const property = cEntry.substr(0, 1) == '+' || cEntry.substr(0, 1) == '-' ? cEntry.substr(1) : cEntry;
+
+          const comparison = !desc
+            ? OrderByPipe._orderByComparator(a[property], b[property])
+            : -OrderByPipe._orderByComparator(a[property], b[property]);
+
+          //Don't return 0 yet in case of needing to sort by next property
+          if (comparison != 0) return comparison;
+        }
+
+        return 0; //equal each other
+      });
+    }
+  }
+}

package/src/pipes/percent-formatted.pipe.ts

@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { NumberRatchet } from '@bitblit/ratchet-common/lang/number-ratchet';
+
+@Pipe({ name: 'ngxAcutePercent', standalone: true })
+export class PercentFormattedPipe implements PipeTransform {
+  transform(input: number): string {
+    return NumberRatchet.pctFormatted(input);
+  }
+}

package/src/pipes/plural.pipe.ts

@@ -0,0 +1,9 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcutePlural', standalone: true })
+export class PluralPipe implements PipeTransform {
+  transform(input: number, label: string, pluralLabel: string = ''): string {
+    input = input || 0;
+    return input === 1 ? `${input} ${label}` : pluralLabel ? `${input} ${pluralLabel}` : `${input} ${label}s`;
+  }
+}

package/src/pipes/round.pipe.ts

@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteRound', standalone: true })
+export class RoundPipe implements PipeTransform {
+  transform(input: number): number {
+    return Math.round(input);
+  }
+}

package/src/pipes/time-ago-formatted.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DurationRatchet } from '@bitblit/ratchet-common/lang/duration-ratchet';
+import { NumberRatchet } from '@bitblit/ratchet-common/lang/number-ratchet';
+
+@Pipe({ name: 'ngxAcuteTimeAgo', standalone: true })
+export class TimeAgoFormattedPipe implements PipeTransform {
+  transform(input: number): string {
+    return DurationRatchet.formatMsDuration(new Date().getTime() - NumberRatchet.safeNumber(input));
+  }
+}

package/src/pipes/timing.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ngxAcuteTiming', standalone: true })
+export class TimingPipe implements PipeTransform {
+  transform(time: number): string {
+    if (time) {
+      const minutes = Math.floor(time / 60);
+      const seconds = Math.floor(time % 60);
+      return `${this.initZero(minutes)}${minutes}:${this.initZero(seconds)}${seconds}`;
+    }
+
+    return '00:00';
+  }
+
+  private initZero(time: number): string {
+    return time < 10 ? '0' : '';
+  }
+}

package/src/services/css-theme.service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { CssThemeService } from "./css-theme.service";
+
+describe('CssThemeService', () => {
+  let service: CssThemeService<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CssThemeService);
+  });
+
+  test.skip('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/services/css-theme.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { StringRatchet } from "@bitblit/ratchet-common/lang/string-ratchet";
+
+/**
+ * For changing themes.
+ *
+ * Steps:
+ *
+ * In root css setup all the variables youll use like:
+ * // Default variable set
+ * :root {
+ *   --twBackgroundColor: #121212;
+ *   --twTextColor: #E0E0E0;
+ *   --twStatusLineBackgroundColor: #1E1E1E;
+ *   --twOffsetBackgroundColor: #1E1E1E;
+ *   --twStatusLineTextColor: #E0E0E0;
+ *   --twInputTextColor: #90caf9;
+ *   --twMainFont: Georgia, serif;
+ *
+ *   --twPlayingWidth: 80vw;
+ *   --twMainTextSize: 1em;
+ *   --twSubTextSize: .8em;
+ *   --twStatusLineTextSize: 1.2em;
+ *   --twMainHeaderSize: 4em;
+ *   --twSubHeaderSize: 2em;
+ * }
+ *
+ * Use the variables in your css
+ *
+ * Then use this to modify them
+ *
+ *
+ *
+ */
+
+@Injectable({providedIn: 'root'})
+export class CssThemeService<ThemeObject> {
+
+  public setCssVariable(name: string, value: string, scope: HTMLElement = document.documentElement, prefix: string='--'): void {
+    Logger.debug('Setting %s to %s', prefix+name, value);
+    scope.style.setProperty(prefix+name, value);
+  }
+
+  public getCssVariable(name: string, scope: HTMLElement = document.documentElement, prefix: string='--'): string | null {
+    return StringRatchet.trimToNull(getComputedStyle(scope).getPropertyValue(prefix+name));
+  }
+
+
+  public applyTheme(rec: ThemeObject, scope: HTMLElement = document.documentElement, prefix: string='--'): void {
+    Object.keys(rec).forEach(k => {
+      this.setCssVariable(k, rec[k],scope, prefix);
+    })
+  }
+
+  public setNumericVariable(name: string, value: number, suffix: string, scope: HTMLElement = document.documentElement, prefix: string='--'): void {
+      this.setCssVariable(name, value+suffix, scope, prefix);
+  }
+
+  public setNumericVariableBetweenBounds(name: string, value: number, minInclusive: number, maxExclusive: number, suffix: string, scope: HTMLElement = document.documentElement, prefix: string='--'): boolean {
+    if (value>=minInclusive && value<maxExclusive) {
+      this.setCssVariable(name, value+suffix, scope, prefix);
+      return true;
+    } else {
+      Logger.info('Ignoring out of bounds value %d', value);
+      return false;
+    }
+  }
+
+  public modifyNumericVariableBetweenBounds(name: string, delta: number, min: number, max: number, suffix: string, scope: HTMLElement = document.documentElement, prefix: string='--'): boolean {
+    const curValString: string | null = this.getCssVariable(name, scope, prefix);
+    if (curValString) {
+      const curVal: number = parseInt(curValString.substring(0, curValString.length-suffix.length));
+      const newVal: number = curVal + delta;
+      return this.setNumericVariableBetweenBounds(name, newVal, min, max, suffix, scope, prefix);
+    } else {
+      Logger.info('No current value for %s', name);
+      return false;
+    }
+
+  }
+
+
+}

package/src/services/google-analytics.service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { GraphqlQueryService } from './graphql-query.service';
+
+describe('GraphqlQueryService', () => {
+  let service: GraphqlQueryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GraphqlQueryService);
+  });
+
+  test.skip('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/services/google-analytics.service.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+declare let gtag: Function;
+
+@Injectable({
+  providedIn: 'root',
+})
+// See : https://lumin8media.com/blog/add-google-analytics-angular
+export class GoogleAnalyticsService {
+  private static readonly IS_PROD: boolean = true;
+
+  constructor(private router: Router) {}
+
+  public initialize() {
+    this.onRouteChange();
+
+    // dynamically add analytics scripts to document head
+    try {
+      const url: string = 'https://www.googletagmanager.com/gtag/js?id=';
+      const gTagScript = document.createElement('script');
+      gTagScript.async = true;
+      const tagId: string = GoogleAnalyticsService.IS_PROD ? 'G-7D5BBK4K8X' : null;
+      gTagScript.src = `${url}${tagId}`;
+      document.head.appendChild(gTagScript);
+
+      const dataLayerScript = document.createElement('script');
+      dataLayerScript.innerHTML = `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${tagId}', {'send_page_view': false});`;
+      document.head.appendChild(dataLayerScript);
+    } catch (e) {
+      Logger.error('Error adding Google Analytics', e, e);
+    }
+  }
+
+  // track visited routes
+  private onRouteChange() {
+    const tagId: string = GoogleAnalyticsService.IS_PROD ? 'G-7D5BBK4K8X' : null;
+
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        gtag('config', tagId, {
+          page_path: event.urlAfterRedirects,
+        });
+
+        Logger.info('Sending Google Analytics tracking for: ', event.urlAfterRedirects);
+        Logger.info('Google Analytics property ID: ', tagId);
+      }
+    });
+  }
+
+  // use gtag.js to send Google Analytics Events
+  public event(action: string, eventCategory?: string, eventLabel?: string, value?: string) {
+    gtag('event', action, {
+      ...(eventCategory && { event_category: eventCategory }),
+      ...(eventLabel && { event_label: eventLabel }),
+      ...(value && { value: value }),
+    });
+  }
+}

package/src/services/graphql-query-execution-display-style.ts

@@ -0,0 +1,5 @@
+export enum GraphqlQueryExecutionDisplayStyle {
+  Modal = 'Modal',
+  Monitored = 'Monitored',
+  Silent = 'Silent',
+}

package/src/services/graphql-query-execution-options.ts

@@ -0,0 +1,10 @@
+import { AuthorizationStyle } from "@bitblit/ratchet-graphql/graphql/authorization-style";
+import { ErrorHandlingApproach } from "@bitblit/ratchet-common/lang/error-handling-approach";
+import { GraphqlQueryExecutionDisplayStyle } from "./graphql-query-execution-display-style";
+
+export interface GraphqlQueryExecutionOptions {
+  blockMessage?: string;
+  authStyle: AuthorizationStyle;
+  errorHandling: ErrorHandlingApproach;
+  displayStyle: GraphqlQueryExecutionDisplayStyle;
+}

package/src/services/graphql-query.service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { GraphqlQueryService } from './graphql-query.service';
+
+describe('GraphqlQueryService', () => {
+  let service: GraphqlQueryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GraphqlQueryService);
+  });
+
+  test.skip('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/services/graphql-query.service.ts

@@ -0,0 +1,85 @@
+import { Injectable } from "@angular/core";
+import { Logger } from "@bitblit/ratchet-common/logger/logger";
+import { GraphqlRatchet } from "@bitblit/ratchet-graphql/graphql/graphql-ratchet";
+import { AuthorizationStyle } from "@bitblit/ratchet-graphql/graphql/authorization-style";
+import { ErrorHandlingApproach } from "@bitblit/ratchet-common/lang/error-handling-approach";
+import { ErrorRatchet } from "@bitblit/ratchet-common/lang/error-ratchet";
+import { LoggerLevelName } from "@bitblit/ratchet-common/logger/logger-level-name";
+import { ProcessMonitorService } from "./process-monitor/process-monitor-service";
+import { GraphqlQueryExecutionOptions } from "./graphql-query-execution-options";
+import { GraphqlQueryExecutionDisplayStyle } from "./graphql-query-execution-display-style";
+import { StringRatchet } from "@bitblit/ratchet-common/lang/string-ratchet";
+
+@Injectable({ providedIn: 'root' })
+export class GraphqlQueryService {
+  constructor(
+    private graphqlRatchet: GraphqlRatchet,
+    private processMonitorService: ProcessMonitorService
+  ) {}
+
+  public fullOptions(input?: Partial<GraphqlQueryExecutionOptions>): GraphqlQueryExecutionOptions {
+    const rval: GraphqlQueryExecutionOptions = Object.assign({
+      blockMessage: null,
+      authStyle: AuthorizationStyle.TokenRequired,
+      errorHandling: ErrorHandlingApproach.LogAndPassThru,
+      displayStyle: GraphqlQueryExecutionDisplayStyle.Monitored
+    },input??{});
+
+    if (StringRatchet.trimToNull(rval.blockMessage) && rval.displayStyle!==GraphqlQueryExecutionDisplayStyle.Modal) {
+      throw ErrorRatchet.fErr('Block message specified but display style is not modal');
+    }
+    return rval;
+  }
+
+  public async executeQuery<T>(
+    queryName: string,
+    variables: any,
+    inOptions?: Partial<GraphqlQueryExecutionOptions>
+  ): Promise<T | null> {
+    let rval: T | null = null;
+    Logger.debug('eq: %j -: %s --: %s ---: %j', queryName, variables);
+    const opts: GraphqlQueryExecutionOptions = this.fullOptions(inOptions);
+
+    try {
+      switch (opts.displayStyle) {
+        case GraphqlQueryExecutionDisplayStyle.Silent: rval = await this.graphqlRatchet.executeQuery<T>(queryName, variables, opts.authStyle);break;
+        case GraphqlQueryExecutionDisplayStyle.Monitored: rval = await this.processMonitorService.monitorProcessSimple(this.graphqlRatchet.executeQuery<T>(queryName, variables, opts.authStyle), 'Running query', false);break;
+        case GraphqlQueryExecutionDisplayStyle.Modal: rval = await this.processMonitorService.monitorProcessSimple(
+            this.graphqlRatchet.executeQuery<T>(queryName, variables, opts.authStyle),
+            opts.blockMessage ?? 'Running query...',true); break;
+        default:
+          throw ErrorRatchet.fErr('Cannot happen - no such display style as %s', opts.displayStyle);
+      }
+    } catch (err) {
+      ErrorRatchet.handleErrorByApproach(err, opts.errorHandling, LoggerLevelName.error, 'GraphQL Error : %s');
+    }
+
+    return rval;
+  }
+
+  public async executeMutate<T>(
+    queryName: string,
+    variables: any,
+    inOptions?: Partial<GraphqlQueryExecutionOptions>
+  ): Promise<T | null> {
+    let rval: T | null = null;
+    const opts: GraphqlQueryExecutionOptions = this.fullOptions(inOptions);
+    Logger.debug('em: %j -: %s --: %s ---: %j', queryName, variables);
+    try {
+
+      switch (opts.displayStyle) {
+        case GraphqlQueryExecutionDisplayStyle.Silent: rval = await this.graphqlRatchet.executeMutate<T>(queryName, variables, opts.authStyle);break;
+        case GraphqlQueryExecutionDisplayStyle.Monitored: rval = await this.processMonitorService.monitorProcessSimple(this.graphqlRatchet.executeMutate<T>(queryName, variables, opts.authStyle), 'Running query', false);break;
+        case GraphqlQueryExecutionDisplayStyle.Modal: rval = await this.processMonitorService.monitorProcessSimple(
+          this.graphqlRatchet.executeMutate<T>(queryName, variables, opts.authStyle),
+          opts.blockMessage ?? 'Running change...',true); break;
+        default:
+          throw ErrorRatchet.fErr('Cannot happen - no such display style as %s', opts.displayStyle);
+      }
+    } catch (err) {
+      ErrorRatchet.handleErrorByApproach(err, opts.errorHandling, LoggerLevelName.error, 'GraphQL Error : %s');
+    }
+    return rval;
+  }
+
+}

package/src/services/local-storage.service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { LocalStorageService } from './local-storage.service';
+
+describe('LocalStorageService', () => {
+  let service: LocalStorageService<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LocalStorageService);
+  });
+
+  test.skip('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/services/local-storage.service.ts

@@ -0,0 +1,114 @@
+import { Inject, Injectable } from "@angular/core";
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { ACUTE_APPLICATION_NAME } from "../constants";
+import { RequireRatchet } from "@bitblit/ratchet-common/lang/require-ratchet";
+
+/**
+ * To use LocalStorageService, you should define a provider with your application
+ * name like so:
+ *
+ * providers: [
+ *     { provide: ACUTE_APPLICATION_NAME, useValue: 'yourAppName' }
+ *   ]
+ */
+
+export function storageFinder(): Storage | null {
+  if (typeof window !== 'undefined') {
+    if (typeof window.localStorage !== 'undefined') {
+      return window.localStorage;
+    }
+  }
+  return null;
+}
+
+export function sessionStorageFinder(): Storage | null {
+  if (typeof window !== 'undefined') {
+    if (typeof window.sessionStorage !== 'undefined') {
+      return window.sessionStorage;
+    }
+  }
+  return null;
+}
+
+
+@Injectable({ providedIn: 'root' })
+export class LocalStorageService<LocalType, SessionType> {
+
+  constructor(@Inject(ACUTE_APPLICATION_NAME) private appName: string) {
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(appName);
+    Logger.debug('Starting local storage service with application name %s', this.appName);
+  }
+
+  public get storageReady(): boolean {
+    return !!storageFinder();
+  }
+
+  public get sessionStorageReady(): boolean {
+    return !!sessionStorageFinder();
+  }
+
+  private get storageName(): string {
+    return this.appName+'AcuteLocalStorage';
+  }
+
+  public clear(): void {
+    this.update({} as LocalType);
+  }
+
+  public clearSession(): void {
+    this.updateSession({} as SessionType);
+  }
+
+  public update(value: LocalType): LocalType {
+    return this.updateInternal(value, 'local', storageFinder(), this.storageReady);
+  }
+
+  public updatePartial(value: Partial<LocalType>): LocalType {
+    const oldValue: LocalType = this.fetch();
+    const newValue: LocalType = Object.assign({}, oldValue, value);
+    return this.update(newValue);
+  }
+
+  public fetch(): LocalType {
+    return this.fetchInternal('local', storageFinder(), this.storageReady);
+  }
+
+  public updateSession(value: SessionType): SessionType {
+    return this.updateInternal(value, 'session', sessionStorageFinder(), this.sessionStorageReady);
+  }
+
+  public updateSessionPartial(value: Partial<SessionType>): SessionType {
+    const oldValue: SessionType = this.fetchSession();
+    const newValue: SessionType = Object.assign({}, oldValue, value);
+    return this.updateSession(newValue);
+  }
+
+  public fetchSession(): SessionType {
+    return this.fetchInternal('session', sessionStorageFinder(), this.sessionStorageReady);
+  }
+
+  private updateInternal<T>(value: T, storageLabel: string, storage: Storage, ready: boolean): T {
+    if (ready) {
+      const toSave: T = value || ({} as T);
+      const saveString: string = JSON.stringify(toSave);
+      Logger.info('Updating %s to %s',storageLabel,saveString);
+      storage.setItem(this.storageName, saveString);
+      return toSave;
+    } else {
+      Logger.info('Skipping update - %s storage not ready : %j', storageLabel, value);
+      return {} as T;
+    }
+  }
+
+  public fetchInternal<T>(storageLabel: string, storage: Storage, ready: boolean): T {
+    if (ready) {
+      const loadString: string = storage.getItem(this.storageName) || '{}';
+      const rval: T = JSON.parse(loadString) as T;
+      return rval;
+    } else {
+      Logger.info('Skipping %s fetch - storage not ready', storageLabel);
+      return {} as T;
+    }
+  }
+
+}

package/src/services/process-monitor/monitored-processes.ts

@@ -0,0 +1,5 @@
+import { ProcessHolder } from "./process-holder";
+
+export interface MonitoredProcesses {
+  processes: ProcessHolder<any>[];
+}

package/src/services/process-monitor/process-holder.ts

@@ -0,0 +1,10 @@
+import {ProcessMonitorState} from "./process-monitor-state";
+import { WritableSignal } from "@angular/core";
+
+export interface ProcessHolder<T> {
+  guid: string;
+  proc: Promise<T>;
+  input: WritableSignal<ProcessMonitorState>;
+  group: string;
+  modal: boolean;
+}

package/src/services/process-monitor/process-monitor-display-mode.ts

@@ -0,0 +1,6 @@
+
+/** This is all the stuff that can be updated during a process */
+export enum ProcessMonitorDisplayMode {
+  Standard = 'Standard',
+  Modal = 'Modal',
+}