http-request-manager 18.15.34 → 18.16.1

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

@@ -1,622 +0,0 @@
-<div style="margin: 2rem;">
-
-  <h2>
-    HTTP Request Manager
-  </h2>
-
-  <div [formGroup]="requestForm" style="margin-top: 2rem;">
-    <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()" class="btn">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>
-  </div>
-
-  <div style="margin-bottom: 1rem; margin-top: 2rem;">
-    @if ((isPending$ | async)) {
-      <mat-progress-bar mode="indeterminate"
-      ></mat-progress-bar>
-    }
-    @if (pollingState.checked && !(isPending$ | async)) {
-      <mat-progress-bar mode="determinate"
-        [value]="(this.countdown$ | async)"
-      ></mat-progress-bar>
-    }
-  </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</h2>
-      <div>
-        <button mat-raised-button (click)="onGetRequest()" 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>
-    }
-
-    @if ((GET$ | async); as dataRecord) {
-      <div style="margin-top: 1rem;">
-        <!-- <div [innerHTML]="(GET$ | async) | jsonv"></div> -->
-        {{ dataRecord | json }}
-      </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()" 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>
-    }
-
-    @if ((POST$ | async); as dataRecord) {
-      <div style="margin-top: 1rem;">
-        <!-- <div [innerHTML]="(POST$ | async) | jsonv"></div> -->
-        {{ dataRecord | json }}
-      </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()" 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>
-    }
-
-    <h3>Include Record ID in the RestPath</h3>
-
-    @if ((PUT$ | async); as dataRecord) {
-      <div style="margin-top: 1rem;">
-        <!-- <div [innerHTML]="(PUT$ | async) | jsonv"></div> -->
-        {{ dataRecord | json }}
-      </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()" class="btn">Request</button>
-      </div>
-    </div>
-
-    <h3>Include Record ID in the RestPath</h3>
-
-    @if ((DELETE_error$ | async); as delete_error) {
-      <div style="margin-top: .5rem;">
-        <mat-error>{{ delete_error }}</mat-error>
-      </div>
-    }
-
-    @if ((DELETE$ | async); as dataRecord) {
-      <div style="margin-top: 1rem;">
-        <!-- <div [innerHTML]="(DELETE$ | async) | jsonv"></div> -->
-        {{ dataRecord | json }}
-      </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">Request</button>
-      </div>
-    </div>
-
-    <!-- <div *ngIf="(STREAM_error$ | async) as stream_error" 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(', ') }} | Records: {{ data.length }}
-        </div>
-      </div>
-    }
-  </div>
-
-</div>
-
-<div style="margin-top: 2rem">
-  <mat-divider></mat-divider>
-</div>
-
-<div style="margin-top: 2rem">
-  <!-- Parallel Requests Section -->
-  <div>
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
-      <h2 style="flex: 1; margin: 0;">Parallel Requests</h2>
-      <button
-        mat-raised-button
-        color="primary"
-        (click)="onExecuteParallelBatch()"
-        [disabled]="isParallelLoading"
-        style="min-width: 200px;">
-        <mat-icon>sync</mat-icon>
-        <span style="margin-left: 8px;">
-          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}
-        </span>
-      </button>
-    </div>
-
-    <!-- Loading Indicator -->
-    @if (isParallelLoading) {
-      <div style="margin: 1rem 0;">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        <p style="margin-top: 0.5rem; color: #666;">
-          Executing parallel requests (concurrency: 3)...
-        </p>
-      </div>
-    }
-
-    <!-- Results -->
-    @if (parallelResults) {
-      <div style="margin: 1rem 0;">
-        <mat-card appearance="outlined">
-          <mat-card-content>
-            <div style="display: grid; gap: 0.5rem;">
-              @for (result of parallelResults; track $index; let i = $index) {
-                <div
-                  style="padding: 0.75rem; border-radius: 4px; border: 1px solid;
-                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :
-                            'background: #ffebee; border-color: #f44336;' }}">
-                  @if (result) {
-                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
-                      <div style="display: flex; align-items: center; gap: 0.5rem;">
-                        <mat-icon style="color: #2196f3; font-size: 18px;">check_circle</mat-icon>
-                        <strong>User #{{ result.id }}:</strong>
-                        <span>{{ result.name }}</span>
-                      </div>
-                      <span style="color: #2196f3; font-weight: bold;">Complete</span>
-                    </div>
-                  } @else {
-                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
-                      <div style="display: flex; align-items: center; gap: 0.5rem;">
-                        <mat-icon style="color: #f44336; font-size: 18px;">error</mat-icon>
-                        <strong>Request {{ i + 1 }}:</strong>
-                        <span>Failed</span>
-                      </div>
-                      <span style="color: #f44336; font-weight: bold;">Error</span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </mat-card-content>
-        </mat-card>
-      </div>
-    }
-
-    <!-- Execution Metrics -->
-    @if (parallelExecutionTime !== undefined) {
-      <div style="background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
-        <div style="display: flex; gap: 2rem;">
-          <div>
-            <strong>⏱Execution Time:</strong>
-            <span style="margin-left: 0.5rem; color: #4caf50;">
-              {{ formatTime(parallelExecutionTime) }}
-            </span>
-          </div>
-          <div>
-            <strong>Mode:</strong>
-            <span style="margin-left: 0.5rem;">Parallel</span>
-          </div>
-        </div>
-      </div>
-    }
-
-    <!-- Error Display -->
-    @if (parallelError) {
-      <div style="margin-top: 1rem;">
-        <mat-error>{{ parallelError }}</mat-error>
-      </div>
-    }
-  </div>
-
-  <!-- Sequential Requests Section -->
-  <div>
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
-      <h2 style="flex: 1; margin: 0;">Sequential Requests</h2>
-      <button
-        mat-raised-button
-        color="accent"
-        (click)="onExecuteSequentialBatch()"
-        [disabled]="isSequentialLoading"
-        style="min-width: 200px;">
-        <mat-icon>timeline</mat-icon>
-        <span style="margin-left: 8px;">
-          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}
-        </span>
-      </button>
-    </div>
-
-    <!-- Loading Indicator -->
-    @if (isSequentialLoading) {
-      <div style="margin: 1rem 0;">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        <p style="margin-top: 0.5rem; color: #666;">
-          Executing sequential requests (one at a time)...
-        </p>
-      </div>
-    }
-
-    <!-- Results -->
-    @if (sequentialResults) {
-      <div style="margin: 1rem 0;">
-        <mat-card appearance="outlined">
-          <mat-card-content>
-            <div style="display: grid; gap: 0.5rem;">
-              @for (result of sequentialResults; track $index; let i = $index) {
-                <div
-                  style="padding: 0.75rem; border-radius: 4px; border: 1px solid;
-                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :
-                            'background: #ffebee; border-color: #f44336;' }}">
-                  @if (result) {
-                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
-                      <div style="display: flex; align-items: center; gap: 0.5rem;">
-                        <mat-icon style="color: #2196f3; font-size: 18px;">check_circle</mat-icon>
-                        <strong>Todo #{{ result.id }}:</strong>
-                        <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                          {{ result.title }}
-                        </span>
-                      </div>
-                    </div>
-                  } @else {
-                    <div style="display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;">
-                      <div style="display: flex; align-items: center; gap: 0.5rem;">
-                        <mat-icon style="color: #f44336; font-size: 18px;">error</mat-icon>
-                        <strong>Request {{ i + 1 }}:</strong>
-                        <span>Failed</span>
-                      </div>
-                      <span style="color: #f44336; font-weight: bold;">Error</span>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </mat-card-content>
-        </mat-card>
-      </div>
-    }
-
-    <!-- Execution Metrics -->
-    @if (sequentialExecutionTime !== undefined) {
-      <div style="background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
-        <div style="display: flex; gap: 2rem;">
-          <div>
-            <strong>Execution Time:</strong>
-            <span style="margin-left: 0.5rem; color: #4caf50;">
-              {{ formatTime(sequentialExecutionTime) }}
-            </span>
-          </div>
-          <div>
-            <strong>Mode:</strong>
-            <span style="margin-left: 0.5rem;">Sequential</span>
-          </div>
-        </div>
-      </div>
-    }
-  </div>
-
-  <!-- Stream Mode Section -->
-  <div>
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
-      <h2 style="flex: 1; margin: 0;">Stream Mode (Real-time States)</h2>
-      <button
-        mat-raised-button
-        color="primary"
-        (click)="onExecuteStreamBatch()"
-        [disabled]="isStreamLoading"
-        style="min-width: 200px;">
-        <mat-icon>auto_awesome</mat-icon>
-        <span style="margin-left: 8px;">
-          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}
-        </span>
-      </button>
-    </div>
-
-    <!-- Loading Indicator -->
-    @if (isStreamLoading) {
-      <div style="margin: 1rem 0;">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-        <p style="margin-top: 0.5rem; color: #666;">
-          Executing parallel requests with real-time state updates...
-        </p>
-      </div>
-    }
-
-    <!-- Progress Bar -->
-    @if (streamProgress) {
-      <div style="background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;">
-        <div style="display: flex; gap: 2rem; margin-bottom: 0.5rem;">
-          <div>
-            <strong>Execution Time:</strong>
-            <span style="margin-left: 0.5rem; color: #4caf50;">
-              {{ formatTime(streamExecutionTime || 0) }}
-            </span>
-          </div>
-          <div>
-            <strong>Progress:</strong>
-            <span style="margin-left: 0.5rem;">
-              {{ streamProgress.completed }} / {{ streamProgress.total }} completed
-            </span>
-          </div>
-          <div>
-            <strong>Pending:</strong>
-            <span style="margin-left: 0.5rem;">
-              {{ streamProgress.pending }}
-            </span>
-          </div>
-          <div>
-            <strong>Failed:</strong>
-            <span style="margin-left: 0.5rem;">
-              {{ streamProgress.failed }}
-            </span>
-          </div>
-        </div>
-        <mat-progress-bar
-          mode="determinate"
-          [value]="streamProgress.percent"
-          color="accent">
-        </mat-progress-bar>
-        <p style="margin-top: 0.5rem; text-align: right; color: #666;">
-          {{ streamProgress.percent }}%
-        </p>
-      </div>
-    }
-
-    <!-- Error Display -->
-    @if (streamError) {
-      <div style="margin-top: 1rem;">
-        <mat-error>{{ streamError }}</mat-error>
-      </div>
-    }
-
-    <!-- Individual Request States -->
-    @if (streamBatchStates.length > 0) {
-      <div style="margin-top: 1rem;">
-        <mat-card appearance="outlined">
-          <mat-card-content>
-            <div style="display: grid; gap: 0.5rem;">
-              @for (state of filteredStreamStates; track state.index; let i = $index) {
-                <div
-                  style="padding: 0.75rem; border-radius: 4px; border: 1px solid;
-                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :
-                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :
-                            'background: #ffebee; border-color: #f44336;' }}">
-                  @if (isPendingState(state)) {
-                    <div style="display: flex; align-items: center; gap: 0.5rem;">
-                      <mat-spinner diameter="16" style="margin-right: 0.5rem;"></mat-spinner>
-                      <strong>Request {{ state.index + 1 }}:</strong>
-                      <span>Loading...</span>
-                    </div>
-                  } @else if (isSuccessState(state)) {
-                    <div style="display: flex; align-items: center; gap: 0.5rem;">
-                      <mat-icon style="color: #2196f3; font-size: 18px;">check_circle</mat-icon>
-                      <strong>Post #{{ state.data.id }}:</strong>
-                      <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                        {{ state.data.title }}
-                      </span>
-                    </div>
-                  } @else {
-                    <div style="display: flex; align-items: center; gap: 0.5rem;">
-                      <mat-icon style="color: #f44336; font-size: 18px;">error</mat-icon>
-                      <strong>Request {{ state.index + 1 }}:</strong>
-                      <span>Failed</span>
-                      <mat-chip style="margin-left: auto; font-size: 0.8em; background: #f44336; color: white;">
-                        Error
-                      </mat-chip>
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          </mat-card-content>
-        </mat-card>
-      </div>
-    }
-  </div>
-
-  <!-- Comparison Info -->
-  <div style="padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;">
-    <h4 style="margin-top: 0;">Key Differences</h4>
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-      <div>
-        <strong>Parallel:</strong>
-        <ul style="margin: 0.5rem 0 0 1rem; padding: 0;">
-          <li>Faster execution (concurrent)</li>
-          <li>Multiple requests simultaneously</li>
-          <li>Results may complete out of order</li>
-          <li>Best for: Independent requests</li>
-        </ul>
-      </div>
-      <div>
-        <strong>Sequential:</strong>
-        <ul style="margin: 0.5rem 0 0 1rem; padding: 0;">
-          <li>Slower execution (one-by-one)</li>
-          <li>Requests execute in order</li>
-          <li>Results always in request order</li>
-          <li>Best for: Dependent requests</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-</div>