feat: rework archival workflow

This adds proper labels and description for what is happening.

fixes #193

src/components/shows/AHousekeeping.vue

 <template>
   <div class="tw-bg-stripes tw-p-4 [background-size:14.14px_14.14px] tw-rounded">
     <div class="tw-bg-white tw-p-6 tw-shadow">
-      <h2 class="tw-text-xl tw-font-bold -tw-mt-2 tw-mb-3">Gefahrenzone</h2>
-      <FormGroup>
-        <div>
-          <button
-            v-if="isActive.value"
-            type="button"
-            class="btn btn-default"
-            @click="deactivateShow"
-          >
-            <Loading v-if="isActive.isSaving" class="tw-h-2" />
-            {{ t('show.editor.deactivation.label') }}
-          </button>
-          <button v-else type="button" class="btn btn-default" @click="isActive.value = true">
-            <Loading v-if="isActive.isSaving" class="tw-h-2" />
-            {{ t('show.editor.activation.label') }}
-          </button>
-        </div>
-      </FormGroup>
+      <h2 class="tw-text-xl tw-font-bold -tw-mt-2 tw-mb-3">{{ t('show.housekeeping.title') }}</h2>
+      <div class="tw-flex tw-gap-6 tw-flex-wrap">
+        <AHousekeepingSection :title="t('show.housekeeping.flows.archival')">
+          <AShowArchivalFlow :show="show" />
+        </AHousekeepingSection>
+      </div>
     </div>
   </div>
-
-  <ConfirmDeactivation v-slot="{ resolve }">
-    <AConfirmDialog
-      :title="t('show.editor.deactivation.label')"
-      :confirm-label="
-        t('show.editor.deactivation.confirm.confirmLabel', { show: sanitizedShowName })
-      "
-      :prompt-value="show.slug"
-      :prompt-label="t('show.editor.deactivation.confirm.prompt', { challenge: show.slug })"
-      @confirm="resolve(true)"
-      @cancel="resolve(false)"
-    >
-      <SafeHTML
-        as="p"
-        :html="t('show.editor.deactivation.confirm.text', { show: sanitizedShowName })"
-        sanitize-preset="inline-noninteractive"
-      />
-    </AConfirmDialog>
-  </ConfirmDeactivation>
 </template>
 
 <script setup lang="ts">
-import { createTemplatePromise } from '@vueuse/core'
-
-import { useAPIObjectFieldCopy } from '@/form'
-import { useI18n } from '@/i18n'
-import { useShowStore } from '@/stores'
 import { Show } from '@/types'
-import FormGroup from '@/components/generic/FormGroup.vue'
-import Loading from '@/components/generic/Loading.vue'
-import AConfirmDialog from '@/components/generic/AConfirmDialog.vue'
-import { sanitizeHTML } from '@/util'
-import SafeHTML from '@/components/generic/SafeHTML'
-import { computed } from 'vue'
+import AShowArchivalFlow from '@/components/shows/AShowArchivalFlow.vue'
+import AHousekeepingSection from '@/components/shows/AHousekeepingSection.vue'
+import { useI18n } from '@/i18n'
 
-const props = defineProps<{
+defineProps<{
   show: Show
 }>()
-const { t } = useI18n()
-const showStore = useShowStore()
-
-const sanitizedShowName = computed(() => sanitizeHTML(props.show.name))
-const isActive = useAPIObjectFieldCopy(showStore, () => props.show, 'isActive')
 
-const ConfirmDeactivation = createTemplatePromise<boolean>()
-
-async function deactivateShow() {
-  if (!(await ConfirmDeactivation.start())) return
-  isActive.value = false
-}
+const { t } = useI18n()
 </script>

src/components/shows/AHousekeepingSection.vue

+<template>
+  <div
+    class="tw-max-w-64 tw-px-6 tw-py-4 tw-border tw-border-gray-200 tw-border-solid tw-rounded-md"
+  >
+    <h3 class="tw-font-bold tw-text-base tw-pb-1">{{ title }}</h3>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string
+}>()
+</script>

src/components/shows/AShowArchivalFlow.vue

+<template>
+  <FormGroup :errors="isActive.errors">
+    <div>
+      <template v-if="isActive.value">
+        <button
+          type="button"
+          class="btn btn-default tw-w-full tw-justify-center"
+          @click="confirmShowDeactivation"
+        >
+          <Loading v-if="isActive.isSaving" class="tw-h-2" />
+          {{ t('show.editor.deactivation.label') }}
+        </button>
+        <ADescription>{{ t('show.editor.deactivation.description') }}</ADescription>
+      </template>
+      <template v-else>
+        <button
+          type="button"
+          class="btn btn-default tw-w-full tw-justify-center"
+          @click="isActive.value = true"
+        >
+          <Loading v-if="isActive.isSaving" class="tw-h-2" />
+          {{ t('show.editor.activation.label') }}
+        </button>
+        <ADescription>{{ t('show.editor.activation.description') }}</ADescription>
+      </template>
+    </div>
+  </FormGroup>
+
+  <ConfirmDeactivation v-slot="{ resolve }">
+    <AConfirmDialog
+      :title="t('show.editor.deactivation.label')"
+      :confirm-label="
+        t('show.editor.deactivation.confirm.confirmLabel', { show: sanitizedShowName })
+      "
+      :prompt-value="show.slug"
+      :prompt-label="t('show.editor.deactivation.confirm.prompt', { challenge: show.slug })"
+      class="tw-max-w-xl"
+      @confirm="resolve(true)"
+      @cancel="resolve(false)"
+    >
+      <SafeHTML
+        as="p"
+        :html="t('show.editor.deactivation.confirm.text', { show: sanitizedShowName })"
+        sanitize-preset="inline-noninteractive"
+      />
+    </AConfirmDialog>
+  </ConfirmDeactivation>
+</template>
+<script setup lang="ts">
+import FormGroup from '@/components/generic/FormGroup.vue'
+import Loading from '@/components/generic/Loading.vue'
+import { createTemplatePromise } from '@vueuse/core'
+import SafeHTML from '@/components/generic/SafeHTML'
+import AConfirmDialog from '@/components/generic/AConfirmDialog.vue'
+import { computed } from 'vue'
+import { sanitizeHTML } from '@/util'
+import { useAPIObjectFieldCopy } from '@/form'
+import { Show } from '@/types'
+import { useI18n } from '@/i18n'
+import { useShowStore } from '@/stores'
+import ADescription from '@/components/generic/ADescription.vue'
+
+const props = defineProps<{
+  show: Show
+}>()
+
+const { t } = useI18n()
+const showStore = useShowStore()
+
+const ConfirmDeactivation = createTemplatePromise<boolean>()
+const sanitizedShowName = computed(() => sanitizeHTML(props.show.name))
+const isActive = useAPIObjectFieldCopy(showStore, () => props.show, 'isActive', { debounce: 0 })
+
+async function confirmShowDeactivation() {
+  if (await ConfirmDeactivation.start()) {
+    isActive.value = false
+  }
+}
+</script>

src/i18n/de.js

@@ -45,17 +45,28 @@ export default {
       typeId: 'Art',
       fundingCategoryId: 'Förderkategorie',
     },
+    housekeeping: {
+      title: 'Gefahrenzone',
+      flows: {
+        archival: 'Archivierung',
+      },
+    },
     editor: {
       deactivation: {
         label: 'Sendereihe deaktivieren',
+        description:
+          'Archiviert die Sendereihe und entfernt alle für die Zukunft geplanten Sendungen.',
         confirm: {
-          text: 'Bist du sicher, dass du <strong>%{show}</strong> deaktivieren willst?',
+          text:
+            'Alle für die Zukunft geplanten <strong>Sendungen</strong> und zugeordnete Informationen <strong>werden entfernt</strong>. ' +
+            'Bist du sicher, dass du <strong>%{show}</strong> deaktivieren willst?',
           prompt: 'Bitte gib <code>%{challenge}</code> als Bestätigung ein.',
           confirmLabel: 'Deaktiviere <strong>%{show}</strong>',
         },
       },
       activation: {
         label: 'Sendereihe aktivieren',
+        description: 'Dearchiviert die Sendereihe. Sendepläne müssen neu angelegt werden.',
       },
     },
   },

src/i18n/en.js

@@ -45,18 +45,27 @@ export default {
       typeId: 'Type',
       fundingCategoryId: 'Funding category',
     },
-
+    housekeeping: {
+      title: 'Danger Zone',
+      flows: {
+        archival: 'Archiving',
+      },
+    },
     editor: {
       deactivation: {
         label: 'Deactivate show',
+        description: 'Archives the show and removes all planned broadcasts.',
         confirm: {
-          text: 'Are you sure you want to deactivate <strong>%{show}</strong>?',
+          text:
+            'All future <strong>timeslots</strong> and related information <strong>will be removed</strong>. ' +
+            'Are you sure you want to deactivate <strong>%{show}</strong>?',
           prompt: 'Please enter <code>%{challenge}</code> in order to confirm.',
           confirmLabel: 'Deactivate <strong>%{show}</strong>',
         },
       },
       activation: {
         label: 'Activate show',
+        description: 'Dearchives the show. New broadcast schedules must be created.',
       },
     },
   },