Skip to content
Snippets Groups Projects
AHousekeeping.vue 2.42 KiB
Newer Older
<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>
    </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'

const props = 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
}
</script>