@antelopejs/dms-mailing 0.3.3 → 0.4.0

package/frontend-vue/app/components/CategoriesInput.vue

@@ -1,18 +1,36 @@
 <script setup lang="ts">
+import draggable from 'vuedraggable'
+import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
+import { useMailingApi } from '../composables/useMailingApi'
+import { isMarketingCategory } from '../utils/system-variables'
 import {
-	parseCategories,
+	CATEGORY_ICONS,
+	DEFAULT_CATEGORY_ICON,
+	fromCategoryOption,
+	iconName,
+	keptCategories,
+	moveRow,
+	newCategoryIcon,
+	NO_CATEGORY,
+	redirectMoves,
 	serializeCategories,
-	slugifyId,
+	toStoredCategories,
+	withMoves,
+	type CategoryEntry,
+	type EditableCategory,
 } from '../utils/categories'
 import type { TemplateCategory } from '../types/mailing'
 
 interface CategoriesInputProps {
-	modelValue?: TemplateCategory[] | string | null
-	initialValue?: TemplateCategory[] | string | null
+	modelValue?: CategoryEntry[] | null
+	initialValue?: CategoryEntry[] | null
 	disabled?: boolean
 }
 
-const DEFAULT_ICON = 'i-ph-folder'
+interface MoveOption {
+	value: string
+	label: string
+}
 
 const props = withDefaults(defineProps<CategoriesInputProps>(), {
 	modelValue: null,
@@ -20,107 +38,335 @@ const props = withDefaults(defineProps<CategoriesInputProps>(), {
 	disabled: false,
 })
 
-const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const emit = defineEmits<{
+	'update:modelValue': [value: CategoryEntry[]]
+}>()
+
+const KEY_PREFIX = 'dms_mailing.settings.categories.'
+const HANDLE_SELECTOR = '[data-drag-handle]'
+const MOVE_UP = -1
+const MOVE_DOWN = 1
+const FIELD_NAME = 'categories'
+const MOVE_FIELD_ID = 'moveTo'
+const MOVE_FIELD_TYPE = 'string'
+const MOVE_FIELD_COMPONENT = 'DmsSelect'
+const LABEL_PART = 'label'
+const ROW_FIELD_UI = { error: 'mt-1 ps-9 text-[12px]' }
 
+const api = useMailingApi()
 const { t } = useI18n()
+const localized = useLocalizedDefaults()
+const { confirm } = useConfirm()
 
-const categories = ref<TemplateCategory[]>(
-	parseCategories(props.modelValue ?? props.initialValue).map((entry) => ({
-		...entry,
-	})),
-)
+let nextKey = 0
+const keyOf = (): string => `category-${nextKey++}`
+
+const root = ref<HTMLElement | null>(null)
+const source = computed(() => props.modelValue ?? props.initialValue ?? [])
+const rows = ref<EditableCategory[]>(toRows(source.value))
+const removed = ref<CategoryEntry[]>(movesOf(source.value))
+const usage = ref<Record<string, number>>({})
+const pickerOpen = ref<string | null>(null)
+let lastEmitted = serializeCategories(currentEntries())
+
+const key = (
+	path: string,
+	params: Record<string, unknown> = {},
+	plural = 1,
+): string => t(`${KEY_PREFIX}${path}`, params, plural)
+
+/**
+ * The form field of a row's label: the server names a refused row by its
+ * place in the list, and only that row shows the error, whatever part of
+ * the row it names.
+ */
+const labelFieldName = (index: number): string =>
+	`${FIELD_NAME}.${index}.${LABEL_PART}`
+
+const rowErrorPattern = (index: number): RegExp =>
+	new RegExp(`^${FIELD_NAME}\\.${index}\\.`)
+
+function toRows(value: CategoryEntry[]): EditableCategory[] {
+	return localized.categories(keptCategories(value)).map((category) => ({
+		...category,
+		key: keyOf(),
+		isNew: false,
+	}))
+}
+
+function movesOf(value: CategoryEntry[]): CategoryEntry[] {
+	return value.filter((entry) => entry.moveTo)
+}
+
+function currentEntries(): CategoryEntry[] {
+	return withMoves(toStoredCategories(rows.value), removed.value)
+}
 
 function onEdit(): void {
-	emit('update:modelValue', serializeCategories(categories.value))
+	const stored = toStoredCategories(rows.value)
+	stored.forEach((category, index) => {
+		const row = rows.value[index]
+		if (row) row.id = category.id
+	})
+	const entries = withMoves(stored, removed.value)
+	lastEmitted = serializeCategories(entries)
+	emit('update:modelValue', entries)
 }
 
-// The id is stored on every template, so it is derived once at creation and
-// never follows a later rename.
 function addCategory(): void {
-	categories.value.push({ id: '', label: '', icon: DEFAULT_ICON })
+	rows.value.push({
+		key: keyOf(),
+		id: '',
+		label: '',
+		icon: newCategoryIcon(rows.value),
+		isNew: true,
+	})
+}
+
+/** Templates a row holds once saved: its own, and those moving into it. */
+function pendingCount(row: EditableCategory): number {
+	if (row.isNew) return 0
+	const incoming = removed.value
+		.filter((entry) => entry.moveTo === row.id)
+		.reduce((total, entry) => total + (usage.value[entry.id] ?? 0), 0)
+	return (usage.value[row.id] ?? 0) + incoming
+}
+
+function dropRow(row: EditableCategory, target: string): void {
+	rows.value = rows.value.filter((entry) => entry.key !== row.key)
+	removed.value = redirectMoves(removed.value, row.id, target)
+	if (target) removed.value.push({ ...categoryOf(row), moveTo: target })
 	onEdit()
 }
 
-function onLabelInput(index: number): void {
-	const entry = categories.value[index]
-	if (entry && !entry.id) entry.id = slugifyId(entry.label)
+/** The marketing category carries the campaign rules: it is never removed. */
+function isRemovable(row: EditableCategory): boolean {
+	return row.isNew || !isMarketingCategory(row.id)
+}
+
+function categoryOf(row: EditableCategory): TemplateCategory {
+	return { id: row.id, label: row.label, icon: row.icon }
+}
+
+function moveOptions(row: EditableCategory): MoveOption[] {
+	const targets = rows.value
+		.filter((entry) => !entry.isNew && entry.key !== row.key)
+		.map((entry) => ({ value: entry.id, label: entry.label }))
+	return [{ value: NO_CATEGORY, label: key('move_none') }, ...targets]
+}
+
+/** The confirmation field naming where the removed row's templates go. */
+function moveField(row: EditableCategory, count: number) {
+	return {
+		id: MOVE_FIELD_ID,
+		label: key('move_to', {}, count),
+		type: MOVE_FIELD_TYPE,
+		component: {
+			componentName: MOVE_FIELD_COMPONENT,
+			options: {
+				items: moveOptions(row),
+				valueKey: 'value',
+				deselectable: false,
+				icon: 'i-ph-arrow-bend-down-right',
+			},
+		},
+		defaultValue: NO_CATEGORY,
+	}
+}
+
+async function removeCategory(row: EditableCategory): Promise<void> {
+	const count = pendingCount(row)
+	if (!count) return dropRow(row, '')
+	let target = NO_CATEGORY
+	const isConfirmed = await confirm({
+		title: key('remove_used_title', { label: row.label }),
+		description: key('remove_used_description', { count }, count),
+		color: 'warning',
+		icon: 'i-ph-tag',
+		confirmLabel: key('remove'),
+		cancelLabel: t('dms_mailing.common.cancel'),
+		initialFocus: 'cancel',
+		fields: [moveField(row, count)],
+		onConfirm: async (values) => {
+			target = String(values[MOVE_FIELD_ID] ?? NO_CATEGORY)
+		},
+	})
+	if (isConfirmed) dropRow(row, fromCategoryOption(target))
+}
+
+function pickIcon(row: EditableCategory, icon: string): void {
+	row.icon = icon
+	pickerOpen.value = null
 	onEdit()
 }
 
-function removeCategory(index: number): void {
-	categories.value.splice(index, 1)
+function usageLabel(row: EditableCategory): string {
+	const count = row.isNew ? 0 : (usage.value[row.id] ?? 0)
+	return key('usage', { count }, count)
+}
+
+/** Moves a row with the arrow keys on its handle, keeping the focus on it. */
+async function moveBy(index: number, offset: number): Promise<void> {
+	const moved = moveRow(rows.value, index, offset)
+	if (moved.index === index) return
+	rows.value = moved.rows
 	onEdit()
+	await nextTick()
+	const handles = root.value?.querySelectorAll<HTMLElement>(HANDLE_SELECTOR)
+	handles?.[moved.index]?.focus()
 }
 
+async function loadUsage(): Promise<void> {
+	try {
+		usage.value = (await api.categoryUsage()).counts
+	} catch {
+		usage.value = {}
+	}
+}
+
+watch(source, (value) => {
+	if (serializeCategories(value) === lastEmitted) return
+	rows.value = toRows(value)
+	removed.value = movesOf(value)
+	lastEmitted = serializeCategories(currentEntries())
+})
+
 watch(
-	() => props.modelValue,
+	() => props.initialValue,
 	(value) => {
-		const parsed = parseCategories(value)
-		if (serializeCategories(parsed) !== serializeCategories(categories.value)) {
-			categories.value = parsed.map((entry) => ({ ...entry }))
-		}
+		const saved = new Set((value ?? []).map((category) => category.id))
+		rows.value
+			.filter((row) => row.isNew && saved.has(row.id))
+			.forEach((row) => (row.isNew = false))
+		void loadUsage()
 	},
 )
+
+onMounted(loadUsage)
 </script>
 
 <template>
-	<div class="flex flex-col gap-2">
+	<div
+		ref="root"
+		class="border-default flex flex-col overflow-hidden rounded-lg border"
+	>
+		<draggable
+			v-model="rows"
+			item-key="key"
+			:handle="HANDLE_SELECTOR"
+			:disabled="disabled"
+			class="divide-default flex flex-col divide-y"
+			@end="onEdit"
+		>
+			<template #item="{ element, index }">
+				<UFormField
+					:name="labelFieldName(index)"
+					:error-pattern="rowErrorPattern(index)"
+					:ui="ROW_FIELD_UI"
+					class="px-3 py-2"
+				>
+					<div class="flex items-center gap-2.5">
+						<UButton
+							v-if="!disabled"
+							data-drag-handle
+							icon="i-ph-dots-six-vertical"
+							color="neutral"
+							variant="ghost"
+							size="xs"
+							square
+							class="text-dimmed shrink-0 cursor-grab"
+							:aria-label="key('drag')"
+							aria-keyshortcuts="ArrowUp ArrowDown"
+							@keydown.up.prevent="moveBy(index, MOVE_UP)"
+							@keydown.down.prevent="moveBy(index, MOVE_DOWN)"
+						/>
+						<UPopover
+							:open="pickerOpen === element.key"
+							@update:open="
+								(open: boolean) => (pickerOpen = open ? element.key : null)
+							"
+						>
+							<UButton
+								color="neutral"
+								variant="outline"
+								size="sm"
+								square
+								:icon="element.icon || DEFAULT_CATEGORY_ICON"
+								:disabled="disabled"
+								:aria-label="key('change_icon')"
+							/>
+							<template #content>
+								<div class="flex flex-col gap-2 p-2.5">
+									<DmsEyebrow :label="key('pick_icon')" />
+									<div class="grid grid-cols-8 gap-1">
+										<UButton
+											v-for="icon in CATEGORY_ICONS"
+											:key="icon"
+											:icon="icon"
+											size="sm"
+											square
+											:color="icon === element.icon ? 'primary' : 'neutral'"
+											:variant="icon === element.icon ? 'soft' : 'ghost'"
+											:aria-label="key(`icons.${iconName(icon)}`)"
+											:title="key(`icons.${iconName(icon)}`)"
+											:aria-pressed="icon === element.icon"
+											@click="pickIcon(element, icon)"
+										/>
+									</div>
+								</div>
+							</template>
+						</UPopover>
+						<DmsInputText
+							v-model="element.label"
+							:placeholder="key('label')"
+							:disabled="disabled"
+							size="sm"
+							class="min-w-0 flex-1"
+							@update:model-value="onEdit"
+						/>
+						<span
+							class="text-dimmed w-24 shrink-0 text-right font-mono text-[11px]"
+						>
+							{{ usageLabel(element) }}
+						</span>
+						<template v-if="!disabled">
+							<UButton
+								v-if="isRemovable(element)"
+								icon="i-ph-x"
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								square
+								:aria-label="key('remove')"
+								@click="removeCategory(element)"
+							/>
+							<span v-else class="size-6 shrink-0" aria-hidden="true" />
+						</template>
+					</div>
+					<template #error="{ error }">
+						<span v-if="error" role="alert">
+							{{ error }}
+						</span>
+					</template>
+				</UFormField>
+			</template>
+		</draggable>
+
+		<p v-if="!rows.length" class="text-muted px-4 py-3 text-[12.5px]">
+			{{ key('empty') }}
+		</p>
+
 		<div
-			v-for="(category, index) in categories"
-			:key="index"
-			class="flex items-center gap-2"
+			v-if="!disabled"
+			class="border-default flex items-center gap-2 border-t px-3 py-2"
 		>
-			<UIcon
-				:name="category.icon || DEFAULT_ICON"
-				class="text-dimmed size-4 shrink-0"
-				aria-hidden="true"
-			/>
-			<UInput
-				v-model="category.label"
-				:placeholder="t('dms_mailing.settings.categories.label')"
-				:disabled="disabled"
-				size="sm"
-				class="flex-1"
-				@update:model-value="onLabelInput(index)"
-			/>
-			<UInput
-				v-model="category.icon"
-				:placeholder="DEFAULT_ICON"
-				:disabled="disabled"
-				size="sm"
-				class="w-40 font-mono"
-				@update:model-value="onEdit"
-			/>
-			<code class="text-dimmed w-28 shrink-0 truncate font-mono text-[11px]">
-				{{ category.id }}
-			</code>
 			<UButton
-				v-if="!disabled"
-				icon="i-ph-x"
-				color="neutral"
+				icon="i-ph-plus"
 				variant="ghost"
-				size="xs"
-				:title="t('dms_mailing.settings.categories.remove')"
-				@click="removeCategory(index)"
+				size="sm"
+				:label="key('add')"
+				@click="addCategory"
 			/>
 		</div>
-
-		<p v-if="!categories.length" class="text-muted text-[12.5px]">
-			{{ t('dms_mailing.settings.categories.empty') }}
-		</p>
-
-		<UButton
-			v-if="!disabled"
-			icon="i-ph-plus"
-			variant="link"
-			size="sm"
-			class="self-start"
-			:label="t('dms_mailing.settings.categories.add')"
-			@click="addCategory"
-		/>
-
-		<p class="text-dimmed text-[11.5px]">
-			{{ t('dms_mailing.settings.categories.hint') }}
-		</p>
 	</div>
 </template>

package/frontend-vue/app/components/CategoryInput.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { useTemplateCategories } from '../composables/useTemplateCategories'
 import {
+	DEFAULT_CATEGORY_ICON,
 	fromCategoryOption,
 	NO_CATEGORY,
 	toCategoryOption,
 } from '../utils/categories'
-import type { TemplateCategory } from '../types/mailing'
 
 interface CategoryInputProps {
 	modelValue?: string | null
@@ -20,19 +21,25 @@ const props = withDefaults(defineProps<CategoryInputProps>(), {
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
 
-const api = useMailingApi()
 const { t } = useI18n()
 
-const categories = ref<TemplateCategory[]>([])
+const { categories } = useTemplateCategories()
 const selected = ref<string>(
 	toCategoryOption(props.modelValue ?? props.initialValue),
 )
 
+const UNCATEGORISED_ICON = 'i-ph-tray'
+
 const items = computed(() => [
-	{ label: t('dms_mailing.templates.uncategorised'), value: NO_CATEGORY },
+	{
+		label: t('dms_mailing.templates.uncategorised'),
+		value: NO_CATEGORY,
+		icon: UNCATEGORISED_ICON,
+	},
 	...categories.value.map((entry) => ({
 		label: entry.label,
 		value: entry.id,
+		icon: entry.icon || DEFAULT_CATEGORY_ICON,
 	})),
 ])
 
@@ -42,22 +49,14 @@ watch(
 		selected.value = toCategoryOption(value)
 	},
 )
-
-onMounted(async () => {
-	try {
-		const response = await api.listCategories()
-		categories.value = response.categories
-	} catch {
-		categories.value = []
-	}
-})
 </script>
 
 <template>
-	<USelect
+	<DmsSelect
 		v-model="selected"
 		:items="items"
 		value-key="value"
+		:deselectable="false"
 		:disabled="disabled"
 		class="w-full"
 		@update:model-value="

package/frontend-vue/app/components/CategoryLabel.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useTemplateCategories } from '../composables/useTemplateCategories'
+
+interface CategoryLabelProps {
+	/** A category id; empty when the template is uncategorised. */
+	value?: string | null
+}
+
+const EMPTY_CELL = '—'
+const UNKNOWN_ICON = 'i-ph-tag'
+
+const props = withDefaults(defineProps<CategoryLabelProps>(), {
+	value: null,
+})
+
+const { categories } = useTemplateCategories()
+
+const category = computed(() =>
+	categories.value.find((entry) => entry.id === props.value),
+)
+</script>
+
+<template>
+	<span v-if="!value" class="text-dimmed">{{ EMPTY_CELL }}</span>
+	<span v-else class="inline-flex min-w-0 items-center gap-1.5">
+		<UIcon
+			:name="category?.icon || UNKNOWN_ICON"
+			class="text-dimmed size-4 shrink-0"
+		/>
+		<span class="truncate" :class="category ? '' : 'text-dimmed font-mono'">
+			{{ category?.label ?? value }}
+		</span>
+	</span>
+</template>