delete child elements

frontend/rabbi_gerzi/src/views/AdminElementPage.vue

@@ -143,6 +143,29 @@ async function handleAddChild(): Promise<void> {
   })
 }
 
+async function handleRemoveChild(childElementId: number): Promise<void> {
+  if (elementId.value === '') {
+    return
+  }
+
+  const confirmed = window.confirm(
+    'Delete this child element and all of its descendants?',
+  )
+  if (!confirmed) {
+    return
+  }
+
+  childStatus.value = null
+  const deleted = await elementsStore.deleteChildElement(
+    elementId.value,
+    childElementId,
+  )
+
+  if (deleted) {
+    childStatus.value = 'Child element removed'
+  }
+}
+
 function chooseIconImage(): void {
   iconImageInput.value?.click()
 }
@@ -500,23 +523,35 @@ function resetInput(changeEvent: Event): void {
               v-for="childElement in childElements"
               :key="childElement.id"
               class="admin-element-page__child-item"
+              data-cy="admin-child-item"
             >
-              <RouterLink
-                :to="{
-                  name: 'admin-element',
-                  params: { id: childElement.id },
-                }"
-                class="admin-element-page__child-link"
-                data-cy="admin-child-edit-link"
+              <div class="admin-element-page__child-body">
+                <RouterLink
+                  :to="{
+                    name: 'admin-element',
+                    params: { id: childElement.id },
+                  }"
+                  class="admin-element-page__child-link"
+                  data-cy="admin-child-edit-link"
+                >
+                  {{ childElement.title }}
+                </RouterLink>
+                <p
+                  v-if="childElement.description !== ''"
+                  class="admin-element-page__child-description"
+                >
+                  {{ childElement.description }}
+                </p>
+              </div>
+              <button
+                class="admin-element-page__secondary-button"
+                data-cy="admin-remove-child"
+                type="button"
+                :disabled="isManagingChildren"
+                @click="handleRemoveChild(childElement.id)"
               >
-                {{ childElement.title }}
-              </RouterLink>
-              <p
-                v-if="childElement.description !== ''"
-                class="admin-element-page__child-description"
-              >
-                {{ childElement.description }}
-              </p>
+                Remove
+              </button>
             </li>
           </ul>
           <p
@@ -700,13 +735,22 @@ function resetInput(changeEvent: Event): void {
 
 .admin-element-page__child-item {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.7rem;
   padding: 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
 }
 
+.admin-element-page__child-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 .admin-element-page__child-link {
   color: var(--color-slate);
   font-size: 0.95rem;
@@ -833,5 +877,9 @@ function resetInput(changeEvent: Event): void {
     align-items: stretch;
     flex-direction: column;
   }
+
+  .admin-element-page__child-item {
+    flex-direction: column;
+  }
 }
 </style>