delete child elements

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -73,6 +73,7 @@ export const useElementsStore = defineStore('elements', () => {
     childElements.value = []
     error.value = null
     saveError.value = null
+    childActionError.value = null
     isLoading.value = true
 
     try {
@@ -139,6 +140,36 @@ export const useElementsStore = defineStore('elements', () => {
     }
   }
 
+  async function deleteChildElement(
+    parentElementId: string,
+    childElementId: number,
+  ): Promise<boolean> {
+    childActionError.value = null
+    isManagingChildren.value = true
+
+    try {
+      const encodedParentElementId = encodeURIComponent(parentElementId)
+      const encodedChildElementId = encodeURIComponent(
+        childElementId.toString(),
+      )
+      const response = await fetch(
+        `${ELEMENTS_URL}/${encodedParentElementId}`
+          + `/children/${encodedChildElementId}`,
+        {
+          method: 'DELETE',
+          credentials: 'include',
+        },
+      )
+
+      return await handleDeleteChildElementResponse(response, childElementId)
+    } catch {
+      childActionError.value = 'Network error - could not remove child element'
+      return false
+    } finally {
+      isManagingChildren.value = false
+    }
+  }
+
   async function clearElementIconImage(elementId: string): Promise<boolean> {
     return await saveElementPatch(
       elementId,
@@ -314,6 +345,34 @@ export const useElementsStore = defineStore('elements', () => {
     return data.element
   }
 
+  async function handleDeleteChildElementResponse(
+    response: Response,
+    childElementId: number,
+  ): Promise<boolean> {
+    if (response.status === 401) {
+      childActionError.value = 'Please log in again'
+      return false
+    }
+
+    if (response.status === 400 || response.status === 404) {
+      childActionError.value = await errorMessage(
+        response,
+        'Could not remove child element',
+      )
+      return false
+    }
+
+    if (!response.ok) {
+      childActionError.value = 'Could not remove child element'
+      return false
+    }
+
+    childElements.value = childElements.value.filter((childElement) => {
+      return childElement.id !== childElementId
+    })
+    return true
+  }
+
   async function errorMessage(
     response: Response,
     fallbackMessage: string,
@@ -341,6 +400,7 @@ export const useElementsStore = defineStore('elements', () => {
     fetchElement,
     updateElement,
     createChildElement,
+    deleteChildElement,
     uploadElementIconImage,
     uploadElementShortPdf,
     uploadElementLongPdf,

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>