feat: delete a custom type

web/src/components/SchemaBuilderPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMediaQuery } from '@vueuse/core'
 import ApiPreview from '@/components/ApiPreview.vue'
@@ -9,7 +9,9 @@ import ApiPreviewSheet from '@/components/ApiPreviewSheet.vue'
 import BuilderActions from '@/components/BuilderActions.vue'
 import BuilderBadge from '@/components/BuilderBadge.vue'
 import BuilderInspector from '@/components/BuilderInspector.vue'
+import BuilderMoreMenu from '@/components/BuilderMoreMenu.vue'
 import BuilderTypeBar from '@/components/BuilderTypeBar.vue'
+import DeleteTypeDialog from '@/components/DeleteTypeDialog.vue'
 import FieldList from '@/components/FieldList.vue'
 import FieldSheet from '@/components/FieldSheet.vue'
 import RetryAlert from '@/components/RetryAlert.vue'
@@ -17,10 +19,12 @@ import SchemaForbidden from '@/components/SchemaForbidden.vue'
 import SchemaRefusalDialog from '@/components/SchemaRefusalDialog.vue'
 import SchemaReviewDialog from '@/components/SchemaReviewDialog.vue'
 import { useSchemaBuilder, type EditSource } from '@/composables/useSchemaBuilder'
+import { useSchemaDelete } from '@/composables/useSchemaDelete'
 import { useUnsavedChangesGuard } from '@/composables/useUnsavedChangesGuard'
 import { HOME_PATH } from '@/lib/routePaths'
 import { sampleJson } from '@/lib/schemaBuilderSample'
 import { entriesNotice } from '@/lib/schemaEntries'
+import { TOPBAR_ACTION_ID } from '@/lib/uiSlots'
 import { formatClock } from '@/lib/updateFormat'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
@@ -31,9 +35,15 @@ const router = useRouter()
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const builder = useSchemaBuilder(props.edit)
 const { form } = builder
+const remove = props.edit ? useSchemaDelete(() => props.edit!) : undefined
+const moreMenu = ref<InstanceType<typeof BuilderMoreMenu> | null>(null)
+const moreDisabled = computed(() => builder.saving.value || Boolean(remove?.pending.value))
+const forbidden = computed(
+	() => builder.failure.value === 'forbidden' || Boolean(remove?.forbidden.value),
+)
 
 useUnsavedChangesGuard({
-	isDirty: () => builder.dirty.value,
+	isDirty: () => builder.dirty.value && !remove?.done.value,
 	title: () => form.value.name.trim() || t('New content type'),
 })
 
@@ -63,6 +73,16 @@ const selectedName = computed(() => builder.selected.value?.label.trim() || t('U
 const sheetTitle = computed(() => t('Field: {0}', [selectedName.value]))
 const reviewName = computed(() => builder.baseline.value?.name ?? '')
 
+watch(
+	() => remove?.stage.value,
+	async (stage) => {
+		if (stage === 'closed') {
+			await nextTick()
+			moreMenu.value?.focus()
+		}
+	},
+)
+
 function goHome() {
 	router.push(HOME_PATH)
 }
@@ -106,7 +126,7 @@ async function restoreRowFocus() {
 </script>
 
 <template>
-	<SchemaForbidden v-if="builder.failure.value === 'forbidden'" @back="goHome" />
+	<SchemaForbidden v-if="forbidden" @back="goHome" />
 
 	<template v-else>
 		<div
@@ -139,7 +159,14 @@ async function restoreRowFocus() {
 							:saved-at="savedClock"
 							@save="builder.save"
 							@discard="builder.discard"
-						/>
+						>
+							<BuilderMoreMenu
+								v-if="remove"
+								ref="moreMenu"
+								:disabled="moreDisabled"
+								@delete="remove.open"
+							/>
+						</BuilderActions>
 					</template>
 				</BuilderTypeBar>
 			</div>
@@ -284,6 +311,9 @@ async function restoreRowFocus() {
 		</div>
 
 		<template v-if="!isDesktop">
+			<Teleport v-if="remove" :to="`#${TOPBAR_ACTION_ID}`" defer>
+				<BuilderMoreMenu ref="moreMenu" :disabled="moreDisabled" @delete="remove.open" />
+			</Teleport>
 			<ApiPreviewSheet v-model:open="apiSheetOpen" :key-value="form.key" :json="json" />
 			<FieldSheet
 				v-model:open="fieldSheetOpen"
@@ -316,6 +346,18 @@ async function restoreRowFocus() {
 			@apply="builder.apply"
 			@close="builder.closeReview"
 		/>
+		<DeleteTypeDialog
+			v-if="remove && remove.stage.value !== 'closed'"
+			:stage="remove.stage.value"
+			:name="remove.type.value.name"
+			:key-value="remove.type.value.key"
+			:total="remove.total.value"
+			:pending="remove.pending.value"
+			:offline="remove.offline.value"
+			@confirm="remove.confirm"
+			@close="remove.close"
+			@view-entries="remove.viewEntries"
+		/>
 		<SchemaRefusalDialog
 			v-if="builder.refusal.value === 'dialog'"
 			:causes="refusalCauses"