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,