feat: add show deletion workflow

refs #102

src/components/shows/AHousekeeping.vue

@@ -6,6 +6,9 @@
         <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
           <AShowArchivalFlow :show="show" />
         </AHousekeepingSection>
+        <AHousekeepingSection :title="t('show.housekeeping.flows.deletion')">
+          <AShowDeletionFlow :show="show" />
+        </AHousekeepingSection>
       </div>
     </div>
   </div>
@@ -14,6 +17,7 @@
 <script setup lang="ts">
 import { Show } from '@/types'
 import AShowArchivalFlow from '@/components/shows/AShowArchivalFlow.vue'
+import AShowDeletionFlow from '@/components/shows/AShowDeletionFlow.vue'
 import AHousekeepingSection from '@/components/shows/AHousekeepingSection.vue'
 import { useI18n } from '@/i18n'
 

src/components/shows/AShowDeletionFlow.vue

+<template>
+  <FormGroup :errors="[error]">
+    <div>
+      <button
+        type="button"
+        class="btn btn-default tw-w-full tw-justify-center"
+        @click="confirmDeleteShow"
+      >
+        <Loading v-if="isProcessing" class="tw-h-2" />
+        {{ t('show.editor.deletion.label') }}
+      </button>
+      <ADescription>{{ t('show.editor.deletion.description') }}</ADescription>
+    </div>
+  </FormGroup>
+
+  <ConfirmDeactivation v-slot="{ resolve }">
+    <AConfirmDialog
+      :title="t('show.editor.deletion.label')"
+      :confirm-label="t('show.editor.deletion.confirm.confirmLabel', { show: sanitizedShowName })"
+      :prompt-value="show.slug"
+      :prompt-label="t('show.editor.deletion.confirm.prompt', { challenge: show.slug })"
+      class="tw-max-w-xl"
+      @confirm="resolve(true)"
+      @cancel="resolve(false)"
+    >
+      <SafeHTML
+        as="p"
+        :html="t('show.editor.deletion.confirm.text', { show: sanitizedShowName })"
+        sanitize-preset="inline-noninteractive"
+      />
+    </AConfirmDialog>
+  </ConfirmDeactivation>
+</template>
+<script setup lang="ts">
+import { createTemplatePromise } from '@vueuse/core'
+import { computed } from 'vue'
+import { sanitizeHTML, useAsyncFunction } from '@/util'
+import { Show } from '@/types'
+import { useI18n } from '@/i18n'
+import { useShowStore } from '@/stores'
+
+import FormGroup from '@/components/generic/FormGroup.vue'
+import Loading from '@/components/generic/Loading.vue'
+import SafeHTML from '@/components/generic/SafeHTML'
+import AConfirmDialog from '@/components/generic/AConfirmDialog.vue'
+import ADescription from '@/components/generic/ADescription.vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
+  show: Show
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const showStore = useShowStore()
+
+const ConfirmDeactivation = createTemplatePromise<boolean>()
+const sanitizedShowName = computed(() => sanitizeHTML(props.show.name))
+
+const {
+  fn: deleteShow,
+  isProcessing,
+  error,
+} = useAsyncFunction(() => showStore.remove(props.show.id))
+
+async function confirmDeleteShow() {
+  if (await ConfirmDeactivation.start()) {
+    try {
+      await deleteShow()
+      await router.push({ name: 'shows' })
+    } catch (e) {
+      // error handling is done above
+    }
+  }
+}
+</script>

src/i18n/de.js

@@ -49,6 +49,7 @@ export default {
       title: 'Gefahrenzone',
       flows: {
         archival: 'Archivierung',
+        deletion: 'Löschung',
       },
     },
     editor: {
@@ -68,6 +69,16 @@ export default {
         label: 'Sendereihe aktivieren',
         description: 'Dearchiviert die Sendereihe. Sendepläne müssen neu angelegt werden.',
       },
+      deletion: {
+        label: 'Sendereihe löschen',
+        description:
+          'Entfernt die Sendereihe und alle zu ihr hinterlegten Daten inkl. Ausstrahlungsschema und Sendungen.',
+        confirm: {
+          text: 'Alle Informationen zu dieser Sendereihe werden <strong>unwiederbringlich gelöscht</strong>. Eine spätere Wiederherstellung ist nicht möglich. Bist du sicher, dass du <strong>%{show}</strong> löschen willst?',
+          prompt: 'Bitte gib <code>%{challenge}</code> als Bestätigung ein.',
+          confirmLabel: 'Lösche <strong>%{show}</strong>',
+        },
+      },
     },
   },
 

src/i18n/en.js

@@ -49,6 +49,7 @@ export default {
       title: 'Danger Zone',
       flows: {
         archival: 'Archiving',
+        deletion: 'Deletion',
       },
     },
     editor: {
@@ -67,6 +68,16 @@ export default {
         label: 'Activate show',
         description: 'Dearchives the show. New broadcast schedules must be created.',
       },
+      deletion: {
+        label: 'Delete show',
+        description:
+          'Removes the show and all related information including schedules and broadcasts.',
+        confirm: {
+          text: 'All information on this series will be <strong>irretrievably deleted</strong>. It is not possible to restore it later. Are you sure you want to delete <strong>%{show}</strong>?',
+          prompt: 'Please enter <code>%{challenge}</code> in order to confirm.',
+          confirmLabel: 'Delete <strong>%{show}</strong>',
+        },
+      },
     },
   },