AShowSlugRenamingFlow.vue

<template>
  <FormGroup v-slot="attrs" :errors="slug.errors">
    <div>
      <div class="tw-flex tw-gap-2 tw-flex-wrap">
        <input v-model="newSlug" type="text" v-bind="attrs" class="tw-min-w-48 tw-flex-[2]" />
        <button
          type="button"
          class="btn btn-default tw-whitespace-nowrap tw-flex-none"
          :disabled="newSlug === show.slug"
          @click="confirmSlugRenaming"
        >
          <Loading v-if="slug.isSaving" class="tw-h-2" />
          {{ t('show.editor.slugRenaming.label') }}
        </button>
      </div>

      <ADescription>{{ t('show.editor.slugRenaming.description') }}</ADescription>
    </div>
  </FormGroup>

  <ConfirmSlugRenaming v-slot="{ resolve }">
    <AConfirmDialog
      :title="t('show.editor.slugRenaming.dialogTitle')"
      :confirm-label="
        t('show.editor.slugRenaming.confirm.confirmLabel', { show: sanitizedShowName })
      "
      :prompt-value="show.slug"
      :prompt-label="t('show.editor.slugRenaming.confirm.prompt', { challenge: show.slug })"
      class="tw-max-w-xl"
      @confirm="resolve(true)"
      @cancel="resolve(false)"
    >
      <SafeHTML
        as="p"
        :html="t('show.editor.slugRenaming.confirm.text', { show: sanitizedShowName })"
        sanitize-preset="inline-noninteractive"
      />
    </AConfirmDialog>
  </ConfirmSlugRenaming>
</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, ref, watchEffect } 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 ConfirmSlugRenaming = createTemplatePromise<boolean>()
const sanitizedShowName = computed(() => sanitizeHTML(props.show.name))
const slug = useAPIObjectFieldCopy(showStore, () => props.show, 'slug', { debounce: 0 })
const newSlug = ref(slug.value)

watchEffect(() => (newSlug.value = slug.value))

async function confirmSlugRenaming() {
  if (await ConfirmSlugRenaming.start()) {
    slug.value = newSlug.value
  }
}
</script>