Remove submit buttons

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/annotation-input.component.html

@@ -5,13 +5,13 @@ <h2 i18n>Parser input</h2>
     below.
 </p>
 
-<div class="d-flex flex-column gap-5">
-    @if (form(); as inputForm) {
-        <la-premises-form
-            [form]="inputForm"
-        />
-        <la-knowledge-base-form
-            [form]="inputForm"
-        />
-    }
+@if (form(); as inputForm) {
+<div class="d-flex flex-row gap-5">
+    <la-premises-form class="w-50" [form]="inputForm" />
+    <la-knowledge-base-form class="w-50" [form]="inputForm" />
 </div>
+<button type="submit" class="btn btn-success" [disabled]="inputForm?.invalid">
+    <fa-icon [icon]="faCheck" class="fa-sm" aria-hidden="true"></fa-icon>
+    <span class="ms-2" i18n>Submit</span>
+</button>
+}

frontend/src/app/annotate/annotation-input/annotation-input.component.ts

@@ -18,17 +18,19 @@ import {
 import { AnnotateService } from "../../services/annotate.service";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { ProblemResponse } from "../../types";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+type KnowledgeBaseItemsForm = FormGroup<{
+    entity1: FormControl<string>;
+    relationship: FormControl<KnowledgeBaseRelationship>;
+    entity2: FormControl<string>;
+}>;
 
 export type AnnotationInputForm = FormGroup<{
     premises: FormArray<FormControl<string>>;
     conclusion: FormControl<string>;
-    kbItems: FormArray<
-        FormGroup<{
-            entity1: FormControl<string>;
-            relationship: FormControl<KnowledgeBaseRelationship>;
-            entity2: FormControl<string>;
-        }>
-    >;
+    kbItems: FormArray<KnowledgeBaseItemsForm>;
 }>;
 
 @Component({
@@ -39,6 +41,7 @@ export type AnnotationInputForm = FormGroup<{
         PremisesFormComponent,
         KnowledgeBaseFormComponent,
         ReactiveFormsModule,
+        FontAwesomeModule,
     ],
     templateUrl: "./annotation-input.component.html",
     styleUrl: "./annotation-input.component.scss",
@@ -66,28 +69,12 @@ export class AnnotationInputComponent {
                 validators: [Validators.required],
                 nonNullable: true,
             }),
-            kbItems: new FormArray([
-                new FormGroup({
-                    entity1: new FormControl<string>("", {
-                        validators: [Validators.required],
-                        nonNullable: true,
-                    }),
-                    relationship: new FormControl<KnowledgeBaseRelationship>(
-                        KnowledgeBaseRelationship.EQUAL,
-                        {
-                            validators: [Validators.required],
-                            nonNullable: true,
-                        }
-                    ),
-                    entity2: new FormControl<string>("", {
-                        validators: [Validators.required],
-                        nonNullable: true,
-                    }),
-                }),
-            ]),
+            kbItems: new FormArray<KnowledgeBaseItemsForm>([]),
         });
     });
 
+    public faCheck = faCheck;
+
     constructor(private annotateService: AnnotateService) {}
 
     public onSubmit(): void {

frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html

@@ -1,17 +1,14 @@
+@if (form().controls.kbItems.controls.length > 0) {
 <section class="card">
     <header class="card-header">
         <h3 class="h5" i18n>Knowledge Base</h3>
     </header>
     <div class="card-body">
         <form [formGroup]="form()" (ngSubmit)="onSubmit()">
             <ul formArrayName="kbItems" class="ps-0 list-unstyled">
-                <li
-                    *ngFor="
-                        let kbItem of form().controls.kbItems.controls;
-                        let i = index
-                    "
-                    class="mb-3"
-                >
+                @for (kbItem of form().controls.kbItems.controls; let i =
+                $index; track $index) {
+                <li class="mb-3">
                     <div [formGroupName]="i" class="input-group">
                         <input
                             type="text"
@@ -27,9 +24,12 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                             <option value="" disabled selected i18n>
                                 Select Relationship
                             </option>
-                            <option *ngFor="let relationship of relationshipTypes" [value]="relationship">
+                            @for (relationship of relationshipTypes; track
+                            $index) {
+                            <option [value]="relationship">
                                 {{ getRelationshipTypeName(relationship) }}
                             </option>
+                            }
                         </select>
                         <input
                             type="text"
@@ -53,33 +53,32 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                         </button>
                     </div>
                 </li>
+                }
             </ul>
-            <div class="btn-group" role="group">
-                <button
-                    type="button"
-                    class="btn btn-primary"
-                    (click)="addKnowledgeBaseItem()"
-                >
-                    <fa-icon
-                        [icon]="faPlus"
-                        class="fa-sm"
-                        aria-hidden="true"
-                    ></fa-icon>
-                    <span class="ms-2" i18n>Add Item</span>
-                </button>
-                <button
-                    type="submit"
-                    class="btn btn-success"
-                    [disabled]="form().invalid"
-                >
-                    <fa-icon
-                        [icon]="faCheck"
-                        class="fa-sm"
-                        aria-hidden="true"
-                    ></fa-icon>
-                    <span class="ms-2" i18n>Submit</span>
-                </button>
-            </div>
+            <button
+                type="button"
+                class="btn btn-primary"
+                (click)="addKnowledgeBaseItem()"
+            >
+                <fa-icon
+                    [icon]="faPlus"
+                    class="fa-sm"
+                    aria-hidden="true"
+                ></fa-icon>
+                <span class="ms-2" i18n>Add Item</span>
+            </button>
         </form>
     </div>
 </section>
+} @else {
+<section>
+    <button
+        type="button"
+        class="btn btn-primary"
+        (click)="addKnowledgeBaseItem()"
+    >
+        <fa-icon [icon]="faPlus" class="fa-sm" aria-hidden="true"></fa-icon>
+        <span class="ms-2" i18n>Add knowledge base item</span>
+    </button>
+</section>
+}

frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts

@@ -1,9 +1,9 @@
 import { Component, input } from "@angular/core";
-import { FormArray, FormGroup, Validators, FormControl } from "@angular/forms";
+import { FormGroup, Validators, FormControl } from "@angular/forms";
 import { CommonModule } from "@angular/common";
 import { ReactiveFormsModule } from "@angular/forms";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
-import { faCheck, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { AnnotationInputForm } from "../annotation-input.component";
 
 export enum KnowledgeBaseRelationship {
@@ -32,7 +32,6 @@ export class KnowledgeBaseFormComponent {
 
     public relationshipTypes = Object.values(KnowledgeBaseRelationship);
 
-    public faCheck = faCheck;
     public faPlus = faPlus;
     public faTrash = faTrash;
 

frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html

@@ -65,19 +65,6 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
                     [formControl]="form().controls.conclusion"
                 />
             </div>
-
-            <button
-                type="submit"
-                class="btn btn-success"
-                [disabled]="form().invalid"
-            >
-                <fa-icon
-                    [icon]="faCheck"
-                    class="fa-sm"
-                    aria-hidden="true"
-                ></fa-icon>
-                <span class="ms-2" i18n>Submit</span>
-            </button>
         </form>
     </div>
 </section>