Improve template tab form validity checking

UST-QuAntiL · Aug 5, 2024 · 424b370 · 424b370
1 parent fd15d7e
commit 424b370
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
@@ -12,6 +12,7 @@ <h2>Template Tab</h2>
     <mat-form-field class="form-field" [hidden]="!templateForm.value.location || templateForm.value.location === 'workspace'">
         <mat-label>Tab Group:</mat-label>
         <input matInput formControlName="locationExtra">
+        <mat-hint>The group key of the tab this tab should be grouped under. (Use '.' to separate group keys for nested groups.)</mat-hint>
     </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Name:</mat-label>
@@ -35,10 +36,11 @@ <h2>Template Tab</h2>
     </div>
     <mat-form-field class="form-field">
         <mat-label>Group Key:</mat-label>
-        <input matInput formControlName="groupKey">
-        <mat-hint>Establish this tab as its own tab group.</mat-hint>
+        <input matInput pattern="[^\.]*" formControlName="groupKey">
+        <mat-hint>Establish this tab as its own tab group. (Cannot contain '.')</mat-hint>
     </mat-form-field>
     <qhana-plugin-filter-editor [tabLink]="tabLink"
         (filterEmitter)="filterString = $event" [hidden]="templateForm.value.groupKey"></qhana-plugin-filter-editor>
-    <button mat-raised-button class="submit-button" type="submit" color="primary">{{templateLink ? 'Create' : 'Update'}} Tab</button>
+    <p class="form-error" *ngIf="templateForm?.errors?.groupKeyForbidden">Group key cannot be used in experiment workspace tabs!</p>
+    <button mat-raised-button class="submit-button" type="submit" color="primary" [disabled]="templateForm.errors">{{templateLink ? 'Create' : 'Update'}} Tab</button>
 </form>
diff --git a/src/app/components-small/template-details/template-details.component.sass b/src/app/components-small/template-details/template-details.component.sass
@@ -19,3 +19,6 @@
 
 .submit-button
     margin-block-start: 2rem
+
+.form-error
+    color: var(--warn-text)
diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { ApiLink, ApiResponse } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TAB_GROUP_NAME_OVERRIDES, TemplateApiObject, TemplateTabApiObject } from 'src/app/services/templates.service';
@@ -60,6 +60,18 @@ export class TemplateDetailsComponent implements OnInit {
     constructor(private registry: PluginRegistryBaseService, private fb: FormBuilder) { }
 
     ngOnInit() {
+        this.templateForm.addValidators((control): ValidationErrors | null => {
+            const loc = control.get("location")?.getRawValue() ?? "";
+            if (loc === "workspace") {
+                const groupKey = control.get("groupKey")?.getRawValue() ?? "";
+                if (groupKey) {
+                    return {
+                        groupKeyForbidden: true,
+                    };
+                }
+            }
+            return null;
+        });
         if (this.tabLink != null) {
             this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
                 const location = response?.data?.location ?? this.initialValues.location