http-request-manager 18.7.21 → 18.7.24

package/src/lib/http-request-services-demo/request-manager-state-demo/request-manager-state-demo.component.html

@@ -1,393 +0,0 @@
-<div style="margin: 2rem;">
-
-  <h2>
-    HTTP Request State Manager
-  </h2>
-
-  <div [formGroup]="requestForm" style="margin-top: 2rem;">
-    <div style="display: flex; gap: .5rem">
-      <mat-form-field appearance="outline">
-        <mat-label>State Data Type</mat-label>
-        <mat-select formControlName="datatype">
-          <mat-option value="ARRAY">Array</mat-option>
-          <mat-option value="OBJECT">Object</mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
-    <div style="display: flex; gap: .5rem">
-      <mat-form-field appearance="outline">
-        <mat-label>Adapter (Model)</mat-label>
-        <mat-select formControlName="adapter" #adapterSelect>
-          <mat-option>None</mat-option>
-          @for (adapter of sampleAdaptors; track adapter) {
-            <mat-option [value]="adapter.value">
-              {{adapter.label}}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field appearance="outline">
-        <mat-label>Mapper (Model)</mat-label>
-        <mat-select formControlName="mapper" #mapperSelect>
-          <mat-option>None</mat-option>
-          @for (mapper of sampleMappers; track mapper) {
-            <mat-option [value]="mapper.value">
-              {{mapper.label}}
-            </mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    </div>
-
-    @if (adapterSelect.value || mapperSelect.value) {
-      <div style="display: flex; margin-bottom: 2rem;">
-        <div style="flex:1" class="box">
-          <h3>Adapter (Incoming)</h3>
-          @if (adapterSelect.value) {
-            <div>
-              {{ props(adapterSelect.value) | json }}
-            </div>
-          } @else {
-            No Transformation
-          }
-        </div>
-        <div style="flex:1" class="box">
-          <h3>Mapper (Outgoing)</h3>
-          @if (mapperSelect.value) {
-            <div>
-              {{ props(mapperSelect.value) | json }}
-            </div>
-          } @else {
-            No Transformation
-          }
-        </div>
-      </div>
-    }
-
-    <div>
-      <mat-form-field appearance="outline">
-        <mat-label>RestPath (/ delimited)</mat-label>
-        <input matInput placeholder="clients/list" formControlName="path">
-      </mat-form-field>
-    </div>
-    <div>
-      <div formArrayName="headers">
-        @for (task of headers.controls; track task; let i = $index) {
-          <div [formGroupName]="i">
-            <div style="display: flex; gap: .5rem">
-              <mat-form-field appearance="outline">
-                <mat-label>Key</mat-label>
-                <input matInput placeholder="authentication" formControlName="key">
-              </mat-form-field>
-              <mat-form-field appearance="outline" style="flex:1">
-                <mat-label>Value</mat-label>
-                <input matInput placeholder="sample" formControlName="value">
-              </mat-form-field>
-              <div style="margin-top: .5rem;">
-                <button mat-icon-button (click)="removeHeader(i)">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
-      <button mat-stroked-button (click)="addHeader()">Add Header</button>
-    </div>
-    <div style="margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;">
-      <div>
-        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>
-        @if (failedState.checked) {
-          <div style="display: flex; gap: .5rem; margin-top: 1rem;" formGroupName="retry">
-            <mat-form-field appearance="outline">
-              <mat-label>#of Times</mat-label>
-              <input matInput placeholder="3" formControlName="times" value="3">
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-              <mat-label>Delay Until Next</mat-label>
-              <input matInput placeholder="3" formControlName="delay" value="3">
-            </mat-form-field>
-          </div>
-        }
-      </div>
-      <div>
-        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>
-        @if (pollingState.checked) {
-          <div>
-            <mat-form-field appearance="outline" style="margin-top: 1rem">
-              <mat-label>#of Seconds</mat-label>
-              <input matInput placeholder="3" formControlName="polling" value="3">
-            </mat-form-field>
-          </div>
-        }
-      </div>
-      <div>
-        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>
-        @if (DBState.checked) {
-          <div style="display: flex; gap: .5rem; margin-top: 1rem" formGroupName="database">
-            <mat-form-field appearance="outline">
-              <mat-label>Table Name</mat-label>
-              <input matInput placeholder="table" formControlName="table" value="">
-            </mat-form-field>
-            <div>
-              <mat-form-field appearance="outline">
-                <mat-label>Expires In</mat-label>
-                <mat-select formControlName="expiresIn">
-                  <mat-option value="1m">One Minute</mat-option>
-                  <mat-option value="1h">One Hour</mat-option>
-                  <mat-option value="1d">One Day</mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-          </div>
-        }
-      </div>
-      <div style="margin-top: 1rem; display: flex;">
-        <span style="flex:1"></span>
-        <button mat-stroked-button (click)="onSetStateOptions()" [disabled]="!hasChanged">
-          Set API Request Options
-        </button>
-      </div>
-      <div>
-        @if ((error$ | async); as error) {
-          <mat-error>
-            {{ error }}
-          </mat-error>
-        }
-      </div>
-    </div>
-  </div>
-
-  <div style="margin-bottom: 1rem; margin-top: 2rem;">
-    @if ((isPending$ | async)) {
-      <mat-progress-bar mode="indeterminate"
-      ></mat-progress-bar>
-    }
-    @if (pollingState.checked) {
-      <div>
-        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {
-          <mat-progress-bar mode="determinate"
-            [value]="(this.countdown$ | async)"
-          ></mat-progress-bar>
-        }
-      </div>
-    }
-
-  </div>
-
-  @if ((GET$ | async); as data) {
-    <div style="margin-top: 2rem">
-      <div style="display: flex;">
-        <h2 style="flex:1;">CURRENT STATE ({{ dataType }})</h2>
-      </div>
-      @if (data.length > 1) {
-        <div>
-          <mat-form-field appearance="outline">
-            <mat-label>Records</mat-label>
-            <mat-select [formControl]="selectedRecord" [disabled]="data === null && data?.length === 0">
-              <mat-option [value]="">None</mat-option>
-              @for (item of data; track item) {
-                <mat-option [value]="item">
-                  {{item.name || (item.first_name) | titlecase}}
-                </mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-        </div>
-      }
-      @if ((dataObservable$ | async); as dataRecord) {
-        <div>
-          @if ((selectedRecord$ | async); as record) {
-            <div>
-              {{ record | json }}
-            </div>
-          } @else {
-            No Record Selected from State
-          }
-        </div>
-      }
-      <div style="margin-top: 1rem;">
-        @if (data !== null && data?.length > 0) {
-          <span>
-            State contains a Total of {{ data.length }} Records
-          </span>
-        } @else {
-          No Records
-        }
-        <div style="display: flex; gap: .5rem; text-align: end; justify-content: flex-end;">
-          <button class="btn" mat-stroked-button (click)="onClearRecords()">Clear</button>
-        </div>
-      </div>
-    </div>
-  }
-
-
-
-
-  <div style="margin-top: 1rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">GET Request ({{ dataType }})</h2>
-      <div>
-        <button mat-raised-button (click)="onGetRequest()" [disabled]="hasChanged" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if ((GET_error$ | async); as get_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ get_error }}</mat-error>
-      </div>
-    }
-
-    <div style="margin-top: 1rem;">
-      <!-- <div [innerHTML]="(GET$ | async) | jsonv"></div> -->
-      @if ((GET$ | async); as getData) {
-        <div>{{ getData | json }}</div>
-      }
-    </div>
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">POST Request</h2>
-      <div>
-        <button mat-raised-button (click)="onCreateRequest()" [disabled]="hasChanged" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if ((POST_error$ | async); as post_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ post_error }}</mat-error>
-      </div>
-    }
-
-    <div style="margin-top: 1rem;">
-      <!-- <div [innerHTML]="(POST$ | async) | jsonv"></div> -->
-      @if ((POST$ | async); as postData) {
-        <div>{{ postData | json }}</div>
-      }
-    </div>
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">PUT Request</h2>
-      <div>
-        <button mat-raised-button (click)="onUpdateRequest()" [disabled]="hasChanged" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if ((PUT_error$ | async); as put_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ put_error }}</mat-error>
-      </div>
-    }
-
-    <div style="margin-top: 1rem;">
-      <!-- <div [innerHTML]="(PUT$ | async) | jsonv"></div> -->
-      @if ((PUT$ | async); as putData) {
-        <div>{{ putData | json }}</div>
-      }
-    </div>
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">DELETE Request</h2>
-      <div>
-        <button mat-raised-button (click)="onDeleteRequest()" [disabled]="hasChanged" class="btn">Request</button>
-      </div>
-    </div>
-
-    @if ((DELETE_error$ | async); as delete_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ delete_error }}</mat-error>
-      </div>
-    }
-
-    <div style="margin-top: 1rem;">
-      <!-- <div [innerHTML]="(DELETE$ | async) | jsonv"></div> -->
-      @if ((DELETE$ | async); as deleteData) {
-        <div>{{ deleteData | json }}</div>
-      }
-    </div>
-
-  </div>
-
-  <div style="margin-top: 2rem">
-    <mat-divider></mat-divider>
-  </div>
-
-  <div style="margin-top: 2rem">
-    <div style="display: flex;">
-      <h2 style="flex:1">Streaming GET Request</h2>
-        <div style="display: flex; gap: 1rem; align-items: center;">
-          <div style="display: flex; gap: 1rem; align-items: center;">
-            {{ streamType }}
-            <button mat-icon-button [matMenuTriggerFor]="menu">
-              <mat-icon>data_usage</mat-icon>
-            </button>
-          </div>
-          <mat-menu #menu="matMenu">
-            <button mat-menu-item *ngFor="let item of streamTypes" (click)="onStreamType(item.id)">{{ item.value }}</button>
-          </mat-menu>
-        <button mat-raised-button (click)="onStreamRequest()" class="btn" [disabled]="hasChanged">Request</button>
-      </div>
-    </div>
-
-    @if ((STREAM_error$ | async); as stream_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ stream_error }}</mat-error>
-      </div>
-    }
-
-    <div style="margin-top: 1rem;">
-      @if ((STREAM$ | async); as data) {
-        <div class="container">
-          <table mat-table [dataSource]="data" class="mat-elevation-z8">
-            
-            <!-- Dynamic columns -->
-            <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
-              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>
-              <td mat-cell *matCellDef="let element"> 
-                @if (isObject(element[column]); as objValue) {
-                  <pre style="margin: 0; font-size: 0.8em; white-space: pre-wrap;">{{ objValue | json }}</pre>
-                } @else {
-                  {{ element[column] }}
-                }
-              </td>
-            </ng-container>
-            
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-          </table>
-          
-          <!-- Debug info -->
-          <div style="margin-top: 1rem; font-size: 0.8em; color: #666;">
-            Columns: {{ displayedColumns.join(', ') }} | Data received
-          </div>
-        </div>
-      }
-    </div>
-
-  </div>
-
-</div>

package/src/lib/http-request-services-demo/request-manager-state-demo/request-manager-state-demo.component.scss

@@ -1,24 +0,0 @@
-.btn {
-    min-width: 120px;
-}
-
-.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;
-    background-color: whitesmoke;
-  }
-
-  .container {
-    height: 400px;
-    overflow: auto;
-  }
-
-  .box {
-    padding: 10px;
-    border: 1px solid #ccc;
-  }