http-request-manager 18.7.21 → 18.7.24

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.html

@@ -1,195 +0,0 @@
-<div style="margin: 2rem;">
-
-  <div style="display: flex; gap: 1rem">
-    <h2 style="padding-top: .5rem; display: flex;">
-      <div style="padding-top: .5rem;">Local Storage Manager</div>
-      <div>
-        <button mat-icon-button [matMenuTriggerFor]="menu">
-          <mat-icon>info</mat-icon>
-        </button>
-      </div>
-    </h2>
-    <span style="flex:1"></span>
-    <div style="padding-top: .25rem;">
-      <mat-button-toggle-group name="storage" [formControl]="typeControl" (change)="onCancel()">
-        <mat-button-toggle value="0">Local Storage</mat-button-toggle>
-        <mat-button-toggle value="1">Session Storage</mat-button-toggle>
-      </mat-button-toggle-group>
-    </div>
-    <div style="margin-top: .25rem;">
-      <button mat-icon-button (click)="onCreate()">
-        <mat-icon>add</mat-icon>
-      </button>
-    </div>
-  </div>
-
-  <ng-container *ngIf="storeProps?.storageName || storeProps?.storageSettingsName">
-    <div style="display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;"
-    >
-      <div style="display: flex;">
-        <div *ngIf="storeProps?.storageSettingsName" style="flex:1">
-          Database: <b>{{ storeProps?.storageSettingsName }}</b>
-        </div>
-        <div *ngIf="storeProps?.storageName" style="flex:1">
-          Data: <b>{{ storeProps?.storageName }}</b>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
-  <div style="margin-top: 2rem;" [formGroup]="newStoreForm" *ngIf="create; else LIST">
-
-    <h2>Create Store</h2>
-
-    <div style="display: flex; gap: 1rem;">
-      <div style="flex:1">
-        <mat-form-field appearance="outline">
-          <mat-label>Store Name</mat-label>
-          <input matInput placeholder="sample" formControlName="name">
-        </mat-form-field>
-      </div>
-      <div>
-        <mat-form-field appearance="outline">
-          <mat-label>Expires In...</mat-label>
-          <mat-select formControlName="expiresIn">
-            <mat-option value="0">None</mat-option>
-            <mat-option value="30s">30 Seconds</mat-option>
-            <mat-option value="1mn">1 Minute</mat-option>
-            <mat-option value="1hr">1 Hour</mat-option>
-            <mat-option value="1d">1 Day</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div style="margin-top: 1rem;">
-        <mat-slide-toggle formControlName="encrypted">Encrypted</mat-slide-toggle>
-      </div>
-    </div>
-
-    <div style="display: flex;">
-      <mat-form-field appearance="outline" style="flex: 1;">
-        <mat-label>Data (Must be an Object or Array of any)</mat-label>
-        <textarea matInput placeholder="[]" formControlName="data" #json></textarea>
-      </mat-form-field>
-    </div>
-    <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
-
-    <div style="display: flex;">
-      <span style="flex:1"></span>
-      <button mat-stroked-button (click)="onCreateStore()" [disabled]="!(isValid && isValidJSON(json.value))">
-        Save Store
-      </button>
-    </div>
-
-  </div>
-
-  <ng-template #LIST>
-
-    <div style="margin-top: 1rem;">
-      <mat-divider></mat-divider>
-    </div>
-{{ settings$ | async | json }}
-    <div *ngIf="filterData(settings$ | async) as data">
-      <ng-container *ngIf="data.length > 0; else NO_DATA">
-        <table mat-table [dataSource]="data">
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> Store </th>
-            <td mat-cell *matCellDef="let element" style="font-weight: bold; text-transform: uppercase;"> {{element.name}} </td>
-          </ng-container>
-
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef> ID </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-          </ng-container>
-
-          <ng-container matColumnDef="encrypted">
-            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Encrypted </th>
-            <td mat-cell *matCellDef="let element" style="text-align: center;">
-              <ng-container *ngIf="element.options.encrypted; else NO">YES</ng-container>
-              <ng-template #NO><span style="color:gray">NO</span></ng-template>
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="expires">
-            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Expires </th>
-            <td mat-cell *matCellDef="let element" style="text-align: center;">
-              <ng-container *ngIf="element.options.expires !== 0; else NO_DATA">
-                {{expiresIn(element.options.expires)}}
-              </ng-container>
-              <ng-template #NO_DATA>
-                ∞
-              </ng-template>
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="option">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let element" style="padding-right: 0;">
-              <div style="display: flex;justify-content: flex-end;">
-                <button mat-icon-button color="warn" (click)="onDelete(element); $event.stopPropagation()">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onSelectedRow(row)"></tr>
-        </table>
-      </ng-container>
-
-      <ng-template #NO_DATA>
-        <h3 style="margin-top: 1rem;">No Data</h3>
-      </ng-template>
-
-      <div *ngIf="(data$ | async) as data" style="margin-top: 2rem;">
-        <div style="margin-bottom: 1rem;">
-          <mat-divider></mat-divider>
-        </div>
-
-        <h3>STORE: <span style="font-weight: bold;">{{ store.name | uppercase }}</span></h3>
-        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>
-        <div style="display: flex;">
-          <mat-form-field appearance="outline" style="flex: 1;">
-            <mat-label>Data (Must be an Object or Array of any)</mat-label>
-            <textarea matInput placeholder="[]" #json [value]="data"></textarea>
-          </mat-form-field>
-        </div>
-        <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
-
-        <div style="display: flex; gap: .5rem;">
-          <span style="flex:1"></span>
-          <button mat-stroked-button (click)="onCancel()">Cancel</button>
-          <button mat-stroked-button (click)="onUpdate(store, json.value)" [disabled]="!(isValidJSON(json.value))">Update</button>
-        </div>
-      </div>
-    </div>
-
-  </ng-template>
-
-  <div style="margin-top: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 1rem;">
-    <button mat-stroked-button (click)="onReset()">Delete All Stores</button>
-  </div>
-
-</div>
-
-
-<mat-menu #menu="matMenu">
-  <div style="padding: 1rem;">
-    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>
-    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>
-    <mat-divider></mat-divider>
-  <div style="font-size: smaller; margin-top: .5rem;">
-    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>
-    <div style="background-color: whitesmoke; padding: 1rem;">
-      &#123;<br>
-        provide: APP_ID,<br>
-        useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",<br>
-      &#125;
-    </div>
-  </div>
-  </div>
-</mat-menu>

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.scss

@@ -1,17 +0,0 @@
-  .mat-mdc-row .mat-mdc-cell {
-    border-bottom: 1px solid transparent;
-    border-top: 1px solid transparent;
-    cursor: pointer;
-  }
-
-  .mat-mdc-row:hover .mat-mdc-cell {
-    border-color: currentColor;
-  }
-
-  .demo-row-is-clicked {
-    font-weight: bold;
-  }
-
-  .mat-mdc-menu-panel.mat-mdc-menu-panel {
-    max-width: 280px !important;
-  }

package/src/lib/http-request-services-demo/local-storage-demo/local-storage-demo.component.ts

@@ -1,206 +0,0 @@
-import { Component, Inject, inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { LocalStorageManagerService, SettingOptions, StorageOption, StorageType } from '../../services/local-storage-manager-service';
-import { FormBuilder, Validators } from '@angular/forms';
-import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
-import { ConfigOptions, LocalStorageOptions, UtilsService } from '../../services';
-import { switchMap, tap, map } from 'rxjs/operators';
-import { CONFIG_SETTINGS_TOKEN } from '../../models/config-token.model';
-
-@Component({
-    selector: 'app-local-storage-demo',
-    templateUrl: './local-storage-demo.component.html',
-    styleUrls: ['./local-storage-demo.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    standalone: false
-})
-export class LocalStorageDemoComponent implements OnInit {
-
-  fb = inject(FormBuilder)
-  utils = inject(UtilsService)
-
-  type$ = new BehaviorSubject(StorageType.GLOBAL)
-  get type() {
-    return (this.typeControl.value) ? +this.typeControl.value : 0
-  }
-
-  typeControl = this.fb.control(StorageType.GLOBAL.toString())
-
-  localStorageManagerService = inject(LocalStorageManagerService)
-
-  settings$: Observable<any> = this.localStorageManagerService.settings$
-
-  setting$ = (store: string) => this.localStorageManagerService.setting$(store)
-
-  storageForm = this.fb.group({
-    store: this.fb.control<string|null>(null),
-    type: 'local',
-    settingType: 'local',
-    encrypted: false,
-    data: this.fb.control<string>('', Validators.required),
-  })
-
-  newStoreForm = this.fb.group({
-    name: this.fb.control<string|null>(null, Validators.required),
-    storage: 'local',
-    encrypted: false,
-    data: this.fb.control<string>('', Validators.required),
-    expiresIn: this.fb.control('0')
-  })
-
-  store$?: Observable<any>
-
-  storeData$ = this.storageForm.get('store')?.valueChanges
-  .pipe(
-    switchMap((data: any) => {
-      return data
-        ? this.localStorageManagerService.store$(data.name)
-        : of('')
-    }),
-    tap(data => {
-      this.storageForm.get('data')?.patchValue(data, { emitEvent: false })
-    })
-  )
-
-  expiresIn = (epoch: number) => this.utils.expiresIn(epoch)
-
-  get isValid() {
-    return this.newStoreForm.valid
-  }
-
-  get isValidData() {
-    return this.storageForm.valid
-  }
-
-  isValidJSON = (str: string) => {
-    try {
-      JSON.parse(str)
-      return true
-    } catch (e) {
-      return false
-    }
-  }
-
-  displayedColumns: string[] = ['name', 'id', 'encrypted', 'expires', "option"];
-
-  filterData = (values: SettingOptions[]) => {
-    if(!values) return []
-    return values.filter((item: any) => item.options.storage === +this.type)
-  }
-
-  data$?: Observable<any>
-
-  store: any
-
-  create = false
-
-  storeProps?: LocalStorageOptions
-  options?: SettingOptions
-
-  constructor(@Inject(CONFIG_SETTINGS_TOKEN) private configOptions?: ConfigOptions) { }
-
-  ngOnInit() {
-
-    this.storeProps = this.configOptions?.LocalStorageOptions
-    this.options = this.storeProps?.options
-
-    if(this.options?.storage) {
-      this.typeControl.patchValue(this.options.storage.toString())
-      this.typeControl.disable()
-    } else {
-      this.typeControl.enable()
-    }
-
-    if(this.options?.expiresIn) {
-      this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn)
-      this.newStoreForm.get('expiresIn')?.disable()
-    } else {
-      this.newStoreForm.get('expiresIn')?.enable()
-    }
-
-    if(this.options?.encrypted) {
-      this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted)
-      this.newStoreForm.get('encrypted')?.disable()
-    } else {
-      this.newStoreForm.get('encrypted')?.enable()
-    }
-
-  }
-
-  onCreateStore() {
-
-    if(!this.isValid) return
-
-    const store = this.newStoreForm.value
-    if(!store.name || store.name === '') return
-
-    const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn }
-
-    this.localStorageManagerService.createStore({
-      name: store.name,
-      data: store.data,
-      options: SettingOptions.adapt(options)
-    })
-
-    this.newStoreForm.reset()
-    this.create = false
-  }
-
-  onUpdateStore(store: any) {
-
-    if(!this.storageForm.valid) return
-
-    const storeData = this.storageForm.value
-
-    const data = JSON.parse(storeData.data || '')
-
-    const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION
-
-    this.localStorageManagerService.updateStore({
-      name: store.name,
-      data
-    })
-
-  }
-
-  onSelectedRow(store: any) {
-    this.store = store
-    this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)))
-    this.create = false
-  }
-
-  onCreate() {
-    this.onCancel()
-    this.create = true
-  }
-
-  onDelete(store: StorageOption) {
-
-    this.localStorageManagerService.deleteStore({
-      name: store.name,
-    })
-
-    this.onCancel()
-  }
-
-  onCancel() {
-    this.data$ = EMPTY
-    this.store = null
-    this.create = false
-  }
-
-  onUpdate(store: StorageOption, data: any) {
-
-    this.localStorageManagerService.updateStore({
-      name: store.name,
-      data: JSON.parse(data)
-    })
-
-    this.onCancel()
-
-  }
-
-  onReset() {
-    this.localStorageManagerService.resetStore()
-  }
-
-}

package/src/lib/http-request-services-demo/local-storage-signals-demo/local-storage-signals-demo.component.html

@@ -1,200 +0,0 @@
-<div style="margin: 2rem;">
-
-  <div style="display: flex; gap: 1rem">
-    <h2 style="padding-top: .5rem; display: flex;">
-      <div style="padding-top: .5rem;">
-        <span>Local Storage Manager</span>
-        <span style="margin-left: .5rem;">
-          <mat-icon color="accent">fiber_new</mat-icon>
-        </span>
-      </div>
-      <div>
-        <button mat-icon-button [matMenuTriggerFor]="menu">
-          <mat-icon>info</mat-icon>
-        </button>
-      </div>
-    </h2>
-    <span style="flex:1"></span>
-    <div style="padding-top: .25rem;">
-      <mat-button-toggle-group name="storage" [formControl]="typeControl" (change)="onCancel()">
-        <mat-button-toggle value="0">Local Storage</mat-button-toggle>
-        <mat-button-toggle value="1">Session Storage</mat-button-toggle>
-      </mat-button-toggle-group>
-    </div>
-    <div style="margin-top: .25rem;">
-      <button mat-icon-button (click)="onCreate()">
-        <mat-icon>add</mat-icon>
-      </button>
-    </div>
-  </div>
-
-  <ng-container *ngIf="storeProps?.storageName || storeProps?.storageSettingsName">
-    <div style="display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;"
-    >
-      <div style="display: flex;">
-        <div *ngIf="storeProps?.storageSettingsName" style="flex:1">
-          Database: <b>{{ storeProps?.storageSettingsName }}</b>
-        </div>
-        <div *ngIf="storeProps?.storageName" style="flex:1">
-          Data: <b>{{ storeProps?.storageName }}</b>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
-  <div style="margin-top: 2rem;" [formGroup]="newStoreForm" *ngIf="create; else LIST">
-
-    <h2>Create Store</h2>
-
-    <div style="display: flex; gap: 1rem;">
-      <div style="flex:1">
-        <mat-form-field appearance="outline">
-          <mat-label>Store Name</mat-label>
-          <input matInput placeholder="sample" formControlName="name">
-        </mat-form-field>
-      </div>
-      <div>
-        <mat-form-field appearance="outline">
-          <mat-label>Expires In...</mat-label>
-          <mat-select formControlName="expiresIn">
-            <mat-option value="0">None</mat-option>
-            <mat-option value="30s">30 Seconds</mat-option>
-            <mat-option value="1mn">1 Minute</mat-option>
-            <mat-option value="1hr">1 Hour</mat-option>
-            <mat-option value="1d">1 Day</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div style="margin-top: 1rem;">
-        <mat-slide-toggle formControlName="encrypted">Encrypted</mat-slide-toggle>
-      </div>
-    </div>
-
-    <div style="display: flex;">
-      <mat-form-field appearance="outline" style="flex: 1;">
-        <mat-label>Data (Must be an Object or Array of any)</mat-label>
-        <textarea matInput placeholder="[]" formControlName="data" #json></textarea>
-      </mat-form-field>
-    </div>
-    <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
-
-    <div style="display: flex;">
-      <span style="flex:1"></span>
-      <button mat-stroked-button (click)="onCreateStore()" [disabled]="!(isValid && isValidJSON(json.value))">
-        Save Store
-      </button>
-    </div>
-
-  </div>
-
-  <ng-template #LIST>
-
-    <div style="margin-top: 1rem;">
-      <mat-divider></mat-divider>
-    </div>
-{{ settings() | json }}
-  <div *ngIf="filterData(settings()) as data">
-      <ng-container *ngIf="data.length > 0; else NO_DATA">
-        <table mat-table [dataSource]="data">
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> Store </th>
-            <td mat-cell *matCellDef="let element" style="font-weight: bold; text-transform: uppercase;"> {{element.name}} </td>
-          </ng-container>
-
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef> ID </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-          </ng-container>
-
-          <ng-container matColumnDef="encrypted">
-            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Encrypted </th>
-            <td mat-cell *matCellDef="let element" style="text-align: center;">
-              <ng-container *ngIf="element.options.encrypted; else NO">YES</ng-container>
-              <ng-template #NO><span style="color:gray">NO</span></ng-template>
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="expires">
-            <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Expires </th>
-            <td mat-cell *matCellDef="let element" style="text-align: center;">
-              <ng-container *ngIf="element.options.expires !== 0; else NO_DATA">
-                {{expiresIn(element.options.expires)}}
-              </ng-container>
-              <ng-template #NO_DATA>
-                ∞
-              </ng-template>
-            </td>
-          </ng-container>
-
-          <ng-container matColumnDef="option">
-            <th mat-header-cell *matHeaderCellDef></th>
-            <td mat-cell *matCellDef="let element" style="padding-right: 0;">
-              <div style="display: flex;justify-content: flex-end;">
-                <button mat-icon-button color="warn" (click)="onDelete(element); $event.stopPropagation()">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onSelectedRow(row)"></tr>
-        </table>
-      </ng-container>
-
-      <ng-template #NO_DATA>
-        <h3 style="margin-top: 1rem;">No Data</h3>
-      </ng-template>
-
-  <div *ngIf="storeSelected() as selectedStore" style="margin-top: 2rem;">
-        <div style="margin-bottom: 1rem;">
-          <mat-divider></mat-divider>
-        </div>
-
-  <h3>STORE: <span style="font-weight: bold;">{{ selectedStore.name | uppercase }}</span></h3>
-  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>
-        <div style="display: flex;">
-          <mat-form-field appearance="outline" style="flex: 1;">
-            <mat-label>Data (Must be an Object or Array of any)</mat-label>
-            <textarea matInput placeholder="[]" #json [value]="selectedStoreData()"></textarea>
-          </mat-form-field>
-        </div>
-        <mat-error *ngIf="!isValidJSON(json.value)">Not Valid Data</mat-error>
-
-        <div style="display: flex; gap: .5rem;">
-          <span style="flex:1"></span>
-          <button mat-stroked-button (click)="onCancel()">Cancel</button>
-          <button mat-stroked-button (click)="onUpdate(selectedStore, json.value)" [disabled]="!(isValidJSON(json.value))">Update</button>
-        </div>
-      </div>
-    </div>
-
-  </ng-template>
-
-  <div style="margin-top: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 1rem;">
-    <button mat-stroked-button (click)="onReset()">Delete All Stores</button>
-  </div>
-
-</div>
-
-
-<mat-menu #menu="matMenu">
-  <div style="padding: 1rem;">
-    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>
-    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>
-    <mat-divider></mat-divider>
-  <div style="font-size: smaller; margin-top: .5rem;">
-    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>
-    <div style="background-color: whitesmoke; padding: 1rem;">
-      &#123;<br>
-        provide: APP_ID,<br>
-        useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",<br>
-      &#125;
-    </div>
-  </div>
-  </div>
-</mat-menu>

package/src/lib/http-request-services-demo/local-storage-signals-demo/local-storage-signals-demo.component.scss

@@ -1,17 +0,0 @@
-  .mat-mdc-row .mat-mdc-cell {
-    border-bottom: 1px solid transparent;
-    border-top: 1px solid transparent;
-    cursor: pointer;
-  }
-
-  .mat-mdc-row:hover .mat-mdc-cell {
-    border-color: currentColor;
-  }
-
-  .demo-row-is-clicked {
-    font-weight: bold;
-  }
-
-  .mat-mdc-menu-panel.mat-mdc-menu-panel {
-    max-width: 280px !important;
-  }