Muxdbs 102 delete checklist

docs/deployment-p13n.md

@@ -36,9 +36,10 @@ Shows first (max 2) checklists of the current user to be displayed on an overvie
 
 Shows detailed data of a specific checklist.
 
-| Property            | Type   | Description                  | Default |
-| ------------------- | ------ | ---------------------------- | ------- |
-| `my-checklists-url` | string | URL to the my checklist page | -       |
+| Property                 | Type   | Description                        | Default |
+| ------------------------ | ------ | ---------------------------------- | ------- |
+| `my-checklists-url`      | string | URL to the my checklist page       | -       |
+| `checklist-overview-url` | string | URL to the checklist overview page | -       |
 
 | Query-Parameter | Description                    |
 | --------------- | ------------------------------ |

personalization-webcomponents/index-checklist-detail.html

@@ -51,6 +51,7 @@
     <div>
       <checklist-detail
         my-checklists-url="index-my-checklists.html"
+        checklist-overview-url="index-my-checklists.html"
       ></checklist-detail>
     </div>
   </body>

personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -65,6 +65,7 @@
     <checklist-header
       v-else-if="checklist"
       :checklist="checklist"
+      :checklist-overview-url="checklistOverviewUrl"
     ></checklist-header>
     <muc-intro
       v-else
@@ -191,6 +192,7 @@ import { QUERY_PARAM_CHECKLIST_ID, setAccessToken } from "@/util/Constants.ts";
 
 defineProps<{
   myChecklistsUrl: string;
+  checklistOverviewUrl: string;
 }>();
 
 const checklist = ref<ChecklistServiceNavigator | null>(null);

personalization-webcomponents/src/api/persservice/ChecklistService.ts

@@ -49,6 +49,20 @@ export default class ChecklistService {
     });
   }
 
+  deleteChecklist(id: string): Promise<Response> {
+    //todo replace with openapi generated client when backend is finished
+    const url = getAPIBaseURL() + "/clients/api/p13n-backend/checklist/" + id;
+
+    return fetch(url, {
+      method: "DELETE",
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    });
+  }
+
   checkChecklistentry(
     checklistID: string,
     serviceID: string

personalization-webcomponents/src/components/ChecklistHeader.vue

@@ -47,23 +47,77 @@
         </td>
       </tr>
     </table>
+
+    <div style="padding-top: 32px">
+      <muc-button
+        icon="trash"
+        variant="secondary"
+        @click="openAcceptDeleteDialog = true"
+      >
+        Checkliste löschen
+      </muc-button>
+    </div>
   </muc-intro>
+
+  <muc-modal
+    :open="openAcceptDeleteDialog"
+    @close="openAcceptDeleteDialog = false"
+    @cancel="openAcceptDeleteDialog = false"
+  >
+    <template #title> Löschen der Checkliste</template>
+
+    <template #body>
+      <muc-banner
+        noIcon
+        type="warning"
+      >
+        <p>
+          Mit dieser Aktion entfernen Sie die Checkliste
+          <strong>„{{ checklist.title }}”</strong> und alle enthaltenen Aufgaben
+          endgültig aus Ihrem Bereich.
+        </p>
+      </muc-banner>
+    </template>
+    <template #buttons>
+      <muc-button
+        icon="trash"
+        @click="deleteChecklist"
+      >
+        Checkliste löschen
+      </muc-button>
+      <muc-button
+        variant="secondary"
+        @click="openAcceptDeleteDialog = false"
+      >
+        Abbrechen
+      </muc-button>
+    </template>
+  </muc-modal>
 </template>
 
 <script setup lang="ts">
 import type ChecklistServiceNavigator from "@/api/persservice/ChecklistServiceNavigator.ts";
 
-import { MucIntro } from "@muenchen/muc-patternlab-vue";
-import { computed, onMounted } from "vue";
+import {
+  MucBanner,
+  MucButton,
+  MucIntro,
+  MucModal,
+} from "@muenchen/muc-patternlab-vue";
+import { computed, onMounted, ref } from "vue";
 
+import ChecklistService from "@/api/persservice/ChecklistService.ts";
 import MucChip from "@/components/common/MucChip.vue";
 import {
   getChecklistIconBySituationId,
   getDateInGermanDateFormat,
 } from "@/util/Constants.ts";
 
+const openAcceptDeleteDialog = ref(false);
+
 const props = defineProps<{
   checklist: ChecklistServiceNavigator;
+  checklistOverviewUrl: string;
 }>();
 
 onMounted(() => {
@@ -106,6 +160,19 @@ const doneCount = computed(() => {
     return undefined;
   }
 });
+
+function deleteChecklist() {
+  const service = new ChecklistService();
+  service.deleteChecklist(props.checklist.id).then((resp) => {
+    if (resp.ok) {
+      location.href = props.checklistOverviewUrl;
+    } else {
+      resp.text().then((errBody) => {
+        throw Error(errBody);
+      });
+    }
+  });
+}
 </script>
 <style>
 .m-intro-vertical__title {