Merge pull request #6046 from simfeld/feature/edit-delete-checklists

feat: edit and delete checklists

Author: pmattmann

frontend/src/components/checklist/ChecklistDetail.vue

@@ -5,13 +5,69 @@
     class="ec-checklist"
     toolbar
     back
-    :title="checklist.name"
   >
+    <template #title>
+      <v-toolbar-title v-if="!editChecklistName" tag="h1" class="font-weight-bold">
+        {{ checklist.name }}
+      </v-toolbar-title>
+      <v-btn
+        v-if="!editChecklistName"
+        icon
+        class="ml-1 visible-on-hover"
+        width="24"
+        height="24"
+        @click="makeChecklistNameEditable()"
+      >
+        <v-icon small>mdi-pencil</v-icon>
+      </v-btn>
+      <api-form v-if="editChecklistName" :entity="checklist" class="mx-2 flex-grow-1">
+        <api-text-field
+          path="name"
+          :disabled="layoutMode"
+          dense
+          autofocus
+          :auto-save="false"
+          @finished="editChecklistName = false"
+        />
+      </api-form>
+    </template>
     <template #title-actions>
       <ChecklistItemCreate :checklist="checklist" />
+      <!-- hamburger menu -->
+      <v-menu offset-y>
+        <template #activator="{ on, attrs }">
+          <v-btn icon v-bind="attrs" v-on="on">
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <!-- remove checklist -->
+          <DialogEntityDelete
+            :entity="checklist"
+            :error-handler="deleteErrorHandler"
+            :success-handler="deleteSuccessHandler"
+          >
+            <template #activator="{ on }">
+              <v-list-item v-on="on">
+                <v-list-item-icon>
+                  <v-icon>mdi-delete</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>
+                  {{ $tc('global.button.delete') }}
+                </v-list-item-title>
+              </v-list-item>
+            </template>
+            {{ $tc('components.checklist.checklistDetail.deleteWarning') }}
+          </DialogEntityDelete>
+        </v-list>
+      </v-menu>
     </template>
     <v-list>
-      <SortableChecklist :parent="null" :checklist="checklist" />
+      <SortableChecklist
+        v-if="checklist && !checklist._meta.deleting"
+        :parent="null"
+        :checklist="checklist"
+      />
     </v-list>
   </content-card>
 </template>
@@ -20,28 +76,53 @@
 import ContentCard from '@/components/layout/ContentCard.vue'
 import ChecklistItemCreate from '@/components/checklist/ChecklistItemCreate.vue'
 import SortableChecklist from '@/components/checklist/SortableChecklist.vue'
+import ApiForm from '@/components/form/api/ApiForm.vue'
+import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
+import { checklistRoute } from '@/router.js'
 
 export default {
   name: 'ChecklistDetail',
   components: {
     SortableChecklist,
     ChecklistItemCreate,
     ContentCard,
+    ApiForm,
+    DialogEntityDelete,
   },
   props: {
+    camp: {
+      type: Object,
+      default: null,
+      required: false,
+    },
     checklist: {
       type: Object,
       default: null,
       required: false,
     },
   },
   data() {
-    return { dragging: false }
+    return { dragging: false, editChecklistName: false }
   },
   computed: {
     items() {
       return this.checklist.checklistItems().items.filter((item) => !item.parent)
     },
   },
+  methods: {
+    makeChecklistNameEditable() {
+      this.editChecklistName = true
+    },
+    deleteErrorHandler(e) {
+      if (e?.response?.status === 422 /* Validation Error */) {
+        return this.$tc('components.checklist.checklistDetail.deleteError')
+      }
+      return null
+    },
+    deleteSuccessHandler() {
+      // redirect to Checklist overview
+      this.$router.replace(checklistRoute(this.camp))
+    },
+  },
 }
 </script>

frontend/src/locales/de.json

@@ -206,6 +206,10 @@
         "delete": "Möchtest du diesen Eintrag wirklich löschen?",
         "title": "Checklisteneintrag bearbeiten"
       },
+      "checklistDetail": {
+        "deleteWarning": "Möchtest du diese Checkliste wirklich löschen? Der komplette Inhalt dieser Checkliste wird gelöscht.",
+        "deleteError": "Checkliste konnte nicht gelöscht werden. Überprüfe vor dem Löschen, dass die Checkliste nicht mehr in Aktivitäten verwendet wird."
+      },
       "sortableChecklist": {
         "add": "Zu \"{parent}\" hinzufügen"
       }

frontend/src/router.js

@@ -730,7 +730,9 @@ export function materialListFromRoute(route) {
 }
 
 export function checklistFromRoute(route) {
-  return apiStore.get().checklists({ id: route.params.checklistId })
+  return campFromRoute(route)
+    .checklists()
+    .allItems.find((c) => c.id === route.params.checklistId)
 }
 
 function getContentLayout(route) {
@@ -864,9 +866,15 @@ export function categoryRoute(camp, category, query = {}) {
 }
 
 export function checklistRoute(camp, checklist, query = {}) {
-  if (camp?._meta.loading || checklist._meta.loading) return {}
+  if (camp?._meta.loading || checklist?._meta.loading) return {}
 
   if (!camp) {
+    if (!checklist) {
+      return {
+        name: 'admin/checklists',
+        query,
+      }
+    }
     return {
       name: 'admin/checklists/checklist',
       params: {
@@ -877,6 +885,16 @@ export function checklistRoute(camp, checklist, query = {}) {
     }
   }
 
+  if (!checklist) {
+    return {
+      name: 'camp/admin/checklists',
+      params: {
+        campId: camp.id,
+        campTitle: slugify(camp.title),
+      },
+      query,
+    }
+  }
   return {
     name: 'camp/admin/checklists/checklist',
     params: {

frontend/src/views/camp/checklist/Checklist.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <ChecklistDetail :checklist="checklist" />
+    <ChecklistDetail :camp="camp" :checklist="checklist" />
   </v-container>
 </template>
 
@@ -13,6 +13,7 @@ export default {
     ChecklistDetail,
   },
   props: {
+    camp: { type: Object, required: true },
     checklist: {
       type: Object,
       default: null,