Skip to content
Snippets Groups Projects
AShowArchivalFlow.vue 2.62 KiB
Newer Older
<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>