NAC-305: Add conversion names & information to recompute fields for N…

…XQL query
nuxeo · Oct 17, 2024 · 914063a · 914063a
1 parent b2b2eb9
commit 914063a
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 7 deletions.
diff --git a/...res/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.html b/...res/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.html
@@ -1,13 +1,30 @@
-<form [formGroup]="inputForm" (ngSubmit)="onFormSubmit()" class="nxql-tab-container">
+<form [formGroup]="inputForm" (ngSubmit)="onFormSubmit()" class="nxql-tab-container"  [ngClass]="{'vertical-flex': isFeatureVideoRenditions()}">
     <p id="requiredField"> {{ GENERIC_LABELS.REQUIRED_FIELD_INDICATOR }}</p>
     <mat-form-field hyFormField>
         <mat-label>{{ GENERIC_LABELS.NXQL_QUERY }}</mat-label>
-        <textarea matInput [placeholder]="inputPlaceholder" formControlName="inputIdentifier"
-            id="inputIdentifier" required cdkTextareaAutosize cdkAutosizeMinRows="1" cdkAutosizeMaxRows="10" class="resizable-textarea"></textarea>
+        <textarea matInput [placeholder]="inputPlaceholder" formControlName="inputIdentifier" id="inputIdentifier"
+            required cdkTextareaAutosize cdkAutosizeMinRows="1" cdkAutosizeMaxRows="10"
+            class="resizable-textarea"></textarea>
         <mat-error *ngIf="inputForm?.get('inputIdentifier')?.invalid">{{getErrorMessage()}}</mat-error>
     </mat-form-field>
-
-    <button mat-flat-button color="primary" type="submit" class="nxql-tab-container__button" [disabled]="isSubmitBtnDisabled">
+    <ng-container
+        *ngIf="isFeatureVideoRenditions() && inputForm.get(VIDEO_RENDITIONS_LABELS.CONVERSION_NAME_KEY) && inputForm.get(VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL_VIDEO_INFO_KEY)">
+        <mat-form-field hyFormField [ngClass]="{'video-renditions': isFeatureVideoRenditions()}">
+            <mat-label>{{VIDEO_RENDITIONS_LABELS.CONVERSION_NAMES}}</mat-label>
+            <input matInput placeholder="Conversion Names" type="text" formControlName="conversionNames"
+                id="conversionNames" />
+        </mat-form-field>
+        <p class="conversion-helper-text">{{VIDEO_RENDITIONS_LABELS.CONVERSION_NAMES_HELPER_TEXT}}</p>
+        <mat-form-field hyFormField class="recompute" [ngClass]="{'video-renditions': isFeatureVideoRenditions()}">
+            <mat-label>{{VIDEO_RENDITIONS_LABELS.RECOMPUTE_VIDEO_INFO}}</mat-label>
+            <select matNativeControl formControlName="recomputeAllVideoInfo" id="recomputeAllVideoInfo">
+                <option value="true" selected>{{VIDEO_RENDITIONS_LABELS.RECOMPUTE_MISSING_ONLY}}</option>
+                <option value="false">{{VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL}}</option>
+            </select>
+        </mat-form-field>
+    </ng-container>
+    <button mat-flat-button color="primary" type="submit" class="nxql-tab-container__button"
+        [ngClass]="{'video-renditions': isFeatureVideoRenditions()}" [disabled]="isSubmitBtnDisabled">
         {{ templateLabels.submitBtnLabel }}
     </button>
     <div class="nxql-tab-hint" [innerHTML]="nxqlQueryHintSanitized"></div>

diff --git a/...res/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.scss b/...res/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.scss
@@ -6,13 +6,22 @@
     font-weight: 400;
     font-family: "Open Sans";
   }
+  &.vertical-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
   &__button {
     border-radius: 4px !important;
     width: 110px;
     height: 45px;
     position: relative;
     left: 20px;
     font-size: 16px;
+    &.video-renditions {
+      left: 0;
+      bottom: 0;
+    }
   }
 }
 .spinner-overlay {
@@ -39,6 +48,9 @@ mat-form-field.hy-form-field {
   margin-bottom: 20px;
   max-width: 600px;
   width: 80%;
+  &.video-renditions {
+    margin-top: 30px;
+  }
 }
 
 .resizable-textarea {
@@ -49,3 +61,8 @@ mat-form-field.hy-form-field {
 .nxql-es-reindex-hint {
   margin-top: 3px;
 }
+
+.conversion-helper-text {
+  font-size: 14px;
+  margin-top: -15px;
+}
diff --git a/.../sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.spec.ts b/.../sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.spec.ts
@@ -36,6 +36,7 @@ import { ErrorModalComponent } from "../error-modal/error-modal.component";
 import { featureMap, FEATURES } from "../../generic-multi-feature-layout.mapping";
 import { PICTURE_RENDITIONS_LABELS } from "../../../../pictures/pictures-renditions.constants";
 import { THUMBNAIL_GENERATION_LABELS } from "../../../../thumbnail-generation/thumbnail-generation.constants";
+import { VIDEO_RENDITIONS_LABELS } from "../../../../video-renditions-generation/video-renditions-generation.constants";
 
 
 describe("NXQLTabComponent", () => {
@@ -354,4 +355,22 @@ describe("NXQLTabComponent", () => {
       expect(result.data.bodyParam.query).toBe(THUMBNAIL_GENERATION_LABELS.NXQL_QUERY);
     });
   });
+
+  it('should add form controls for video renditions when isFeatureVideoRenditions() returns true', () => {
+    spyOn(component, 'isFeatureVideoRenditions').and.returnValue(true);
+
+    component.ngOnInit();
+
+    expect(component.inputForm.contains(VIDEO_RENDITIONS_LABELS.CONVERSION_NAME_KEY)).toBe(true);
+    expect(component.inputForm.contains(VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL_VIDEO_INFO_KEY)).toBe(true);
+  });
+
+  it('should not add form controls for video renditions when isFeatureVideoRenditions() returns false', () => {
+    spyOn(component, 'isFeatureVideoRenditions').and.returnValue(false);
+
+    component.ngOnInit();
+
+    expect(component.inputForm.contains(VIDEO_RENDITIONS_LABELS.CONVERSION_NAME_KEY)).toBe(false);
+    expect(component.inputForm.contains(VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL_VIDEO_INFO_KEY)).toBe(false);
+  });
 });
diff --git a/...tures/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.ts b/...tures/sub-features/generic-multi-feature-layout/components/nxql-tab/nxql-tab.component.ts
@@ -1,7 +1,8 @@
+import { VIDEO_RENDITIONS_LABELS } from './../../../../video-renditions-generation/video-renditions-generation.constants';
 import { REST_END_POINTS } from "./../../../../../shared/constants/rest-end-ponts.constants";
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { Component, OnDestroy, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
 import { Store, select } from "@ngrx/store";
 import { Observable, Subscription } from "rxjs";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
@@ -67,6 +68,7 @@ export class NXQLTabComponent implements OnInit, OnDestroy {
     GenericModalClosedInfo
   > = {} as MatDialogRef<GenericModalComponent, GenericModalClosedInfo>;
   GENERIC_LABELS = GENERIC_LABELS;
+  VIDEO_RENDITIONS_LABELS = VIDEO_RENDITIONS_LABELS;
   nuxeo: Nuxeo;
   isSubmitBtnDisabled = false;
   templateConfigData: FeatureData = {} as FeatureData;
@@ -124,6 +126,17 @@ export class NXQLTabComponent implements OnInit, OnDestroy {
           this.spinnerVisible = status;
         }
       );
+
+    if (this.isFeatureVideoRenditions()) {
+      this.inputForm.addControl(
+        VIDEO_RENDITIONS_LABELS.CONVERSION_NAME_KEY,
+        new FormControl("")
+      );
+      this.inputForm.addControl(
+        VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL_VIDEO_INFO_KEY,
+        new FormControl("true")
+      );
+    }
     this.nxqlActionLaunchedSubscription = this.nxqlActionLaunched$.subscribe(
       (data) => {
         if (data?.commandId) {
@@ -144,6 +157,13 @@ export class NXQLTabComponent implements OnInit, OnDestroy {
     );
   }
 
+  isFeatureVideoRenditions(): boolean {
+    return (
+      this.activeFeature ===
+      (FEATURES.VIDEO_RENDITIONS_GENERATION as FeaturesKey)
+    );
+  }
+
   showActionErrorModal(error: ErrorDetails): void {
     this.genericMultiFeatureUtilitiesService.spinnerStatus.next(false);
     this.errorDialogRef = this.dialogService.open(ErrorModalComponent, {
@@ -326,7 +346,7 @@ export class NXQLTabComponent implements OnInit, OnDestroy {
               requestUrl,
               requestParams,
               featureEndpoint: REST_END_POINTS[featureKey as FeaturesKey],
-              requestHeaders
+              requestHeaders,
             })
           );
         } else {

diff --git a/...eatures/sub-features/generic-multi-feature-layout/generic-multi-feature-layout.mapping.ts b/...eatures/sub-features/generic-multi-feature-layout/generic-multi-feature-layout.mapping.ts
@@ -229,6 +229,8 @@ export const featureMap = () => ({
         data = {
           bodyParam: {
             query: `${VIDEO_RENDITIONS_LABELS.NXQL_QUERY}`,
+            [VIDEO_RENDITIONS_LABELS.CONVERSION_NAME_KEY]: `{conversionNames}`,
+            [VIDEO_RENDITIONS_LABELS.RECOMPUTE_ALL_VIDEO_INFO_KEY]: `{recomputeAllVideoInfo}`,
           },
           requestHeaders: {
             "Content-Type": "application/x-www-form-urlencoded",