disable generate products button (products tab) while a request is in flight...

disable generate products button (products tab) while a request is in flight as to avoid double clicking on it. If a successful response is received from the request, the form is reset and closed to avoid double submission.

src/app/app.module.ts

@@ -37,6 +37,7 @@ import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
 import {LoadingComponent} from './loading/loading.component';
 import {QueueSettingsComponent} from './settings/queue-settings/queue-settings.component';
 import {WINDOW_PROVIDERS} from "./env/window.provider";
+import {FutureProductComponent} from './products/product/product-details/future-product/future-product.component';
 
 /*
 We will 'provide' this function below to load and set the global configuration from the
@@ -75,7 +76,8 @@ export function init_app(configService: ConfigurationService) {
     JobspecExecutionComponent,
     ExecutionDetailComponent,
     LoadingComponent,
-    QueueSettingsComponent
+    QueueSettingsComponent,
+    FutureProductComponent
   ],
   imports: [
     BrowserModule,

src/app/model/product.ts

@@ -53,6 +53,8 @@ export class Product {
   epoch: number;
   extraInfoForJobName: string;
   fileNames: Array<string>;
+  futureProductId: number;
+  futureProductName: string;
   id: number;
   latestProductVersion: object;
   minitiles: Array<Tile>;

src/app/products/product/product-details/future-product/future-product.component.html

+<div class="row mx-1 pt-1 border-bottom">
+  <div class="col-auto">
+    <span class="badge badge-light border">Calibration</span>
+  </div>
+  <div class="col">
+    <a [routerLink]="['/products']" [queryParams]="{pattern: product.futureProductId, type: 'calibration'}">
+      {{product.futureProductName }}
+    </a>
+    <button type="button" class="btn btn-xs btn-outline-primary border-0 ml-2" (click)="showDetails = !showDetails"
+    *ngIf="futureProduct">
+      <fa-icon [icon]="faCaretDown" *ngIf="!showDetails"></fa-icon>
+      <fa-icon [icon]="faCaretUp" *ngIf="showDetails"></fa-icon>
+    </button>
+    <div class="bg-light shadow p-2" *ngIf="showDetails">
+      <app-product-details [product]="futureProduct"></app-product-details>
+    </div>
+  </div>
+</div>

src/app/products/product/product-details/future-product/future-product.component.spec.ts

+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {FutureProductComponent} from './future-product.component';
+
+describe('FutureProductComponent', () => {
+  let component: FutureProductComponent;
+  let fixture: ComponentFixture<FutureProductComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FutureProductComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FutureProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/products/product/product-details/future-product/future-product.component.ts

+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Product} from "../../../../model/product";
+import {faCaretDown, faCaretUp} from "@fortawesome/free-solid-svg-icons";
+import {ProductsService} from "../../../../services/products.service";
+import {takeUntil} from "rxjs/operators";
+import {Subject} from "rxjs";
+
+@Component({
+  selector: 'app-future-product',
+  templateUrl: './future-product.component.html',
+  styleUrls: ['./future-product.component.scss']
+})
+export class FutureProductComponent implements OnInit, OnDestroy {
+
+  @Input() product: Product;
+  private ngUnsubscribe = new Subject();
+  public futureProduct: Product;
+  public faCaretDown = faCaretDown;
+  public faCaretUp = faCaretUp;
+
+  showDetails = false;
+
+  constructor(private productService: ProductsService) {
+  }
+
+  ngOnInit(): void {
+    this.productService.getProductById(this.product.futureProductId.toString()).pipe(takeUntil(this.ngUnsubscribe))
+      .subscribe((fp: Product) => {
+        this.futureProduct = fp;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+  }
+
+}

src/app/products/product/product-details/product-details.component.html

@@ -34,6 +34,15 @@
   </form>
 </ng-container>
 
+<div class="mt-2" *ngIf="product.typeId === 11">
+  <h5 class="pb-2 m-0">
+    <fa-icon [icon]="faChevronCircleRight"></fa-icon>
+    Future Product
+  </h5>
+     <app-future-product [product]="product" *ngIf="product.futureProductId"></app-future-product>
+  <span *ngIf="!product.futureProductId">- none -</span>
+</div>
+
 <div class="mt-2" *ngIf="product.versions.length > 0">
   <h5 class="pb-2 m-0">
     <fa-icon [icon]="faList"></fa-icon>

src/app/products/product/product-details/product-details.component.ts

@@ -4,7 +4,7 @@ import {FormControl, FormGroup} from "@angular/forms";
 import {Observable, Subject, Subscription} from "rxjs";
 import {ProductsService} from "../../../services/products.service";
 import {JobsService} from "../../../services/jobs.service";
-import {faCubes, faEdit, faFileCode, faList} from "@fortawesome/free-solid-svg-icons";
+import {faChevronCircleRight, faCubes, faEdit, faFileCode, faList} from "@fortawesome/free-solid-svg-icons";
 import {AlertService} from "../../../services/alert.service";
 import {takeUntil} from "rxjs/operators";
 import {Action} from "../../../model/action";
@@ -36,6 +36,7 @@ export class ProductDetailsComponent implements OnInit, OnChanges, OnDestroy {
   public faList = faList;
   public faCubes = faCubes;
   public faFileCode = faFileCode;
+  public faChevronCircleRight = faChevronCircleRight;
 
   private lastAction: Action;