add actionpoint validation

puzzle · Jan 28, 2025 · b3a4277 · b3a4277
1 parent b65441f
commit b3a4277
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -9,7 +9,7 @@
     id="action-list"
   >
     <div
-      class="action-point-item"
+      class="container-fluid action-point-item"
       *ngFor="let item of getFormControlArray().controls!; index as i; trackBy: trackByFn"
       [formGroupName]="i"
       cdkDrag
@@ -23,27 +23,37 @@
           alt="Drag indicator"
         />
       </div>
-      <input
-        #listItem
-        (keydown.arrowUp)="changeItemPosition(i, i - 1)"
-        (keydown.arrowDown)="changeItemPosition(i, i + 1)"
-        class="action-input"
-        formControlName="item"
-        [attr.data-testId]="'action-input'"
-      />
-      <button
-        (keydown.enter)="removeAction(i)"
-        (click)="removeAction(i)"
-        class="btn btn-link"
-        *ngIf="onDelete"
+      <span class="row">
+        <input
+          #listItem
+          (keydown.arrowUp)="changeItemPosition(i, i - 1)"
+          (keydown.arrowDown)="changeItemPosition(i, i + 1)"
+          class="action-input col"
+          formControlName="item"
+          [attr.data-testId]="'action-input'"
+        />
 
-      ><img
+        <button
+          (keydown.enter)="removeAction(i)"
+          (click)="removeAction(i)"
+          class="btn btn-link col-auto"
+          *ngIf="onDelete"
+
+        ><img
+
+            class="icons bin-icon cursor-pointer focus-outline"
+            src="assets/icons/delete-icon.svg"
+            alt="Delete bin"
+          />
+        </button>
+      </span>
+
+      <app-error
+        [controlPath]="['actionList.'+i, 'item']"
+        [name]="'Element'"
+        class="col-12"
+      ></app-error>
 
-          class="icons bin-icon cursor-pointer focus-outline"
-          src="assets/icons/delete-icon.svg"
-          alt="Delete bin"
-        />
-      </button>
     </div>
   </div>
 
@@ -63,7 +73,9 @@
           class="add-cross-button"
           id="add-action-icon"
         />
-        Weitere Action hinzufügen
+        <ng-content select="add-text">Weitere Action hinzufügen</ng-content>
+
+        <ng-content/>
       </span>
     </button>
   </div>

diff --git a/frontend/src/app/components/action-plan/action-plan.component.scss b/frontend/src/app/components/action-plan/action-plan.component.scss
@@ -1,10 +1,5 @@
 .action-point-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
   font-size: 14px;
-  height: 32px;
 }
 
 .cdk-drag-preview {
@@ -51,8 +46,8 @@
 }
 
 .action-input {
-  width: 100%;
-  height: 100%;
+  //width: 100%;
+  height: 32px;
   padding: 0.437rem 0.625rem 0.375rem 0.625rem !important;
 }