@antelopejs/dms-mailing 0.3.4 → 0.4.0

package/frontend-vue/app/components/editor/EditorVisibility.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { Block, Condition } from '../../types/mailing'
+import { useEditorContext } from '../../composables/useEditorContext'
+
+interface Props {
+	block: Block
+}
+
+const props = defineProps<Props>()
+
+const KEY = 'dms_mailing.editor.visibility'
+const ALWAYS = 'always'
+const ONLY_IF = 'only_if'
+
+const { t } = useI18n()
+const { editor, session } = useEditorContext()
+
+const items = computed(() => [
+	{ value: ALWAYS, label: t(`${KEY}.always`) },
+	{ value: ONLY_IF, label: t(`${KEY}.only_if`) },
+])
+
+const isPickingPath = ref(false)
+
+watch(
+	() => props.block.id,
+	() => (isPickingPath.value = false),
+)
+
+function firstPath(): string {
+	return editor.variables[0]?.path ?? session.detected[0] ?? ''
+}
+
+function setRule(rule: Condition | null): void {
+	editor.updateBlock(props.block.id, { visibleIf: rule })
+}
+
+function ruleOn(path: string): Condition {
+	return { path, operator: 'truthy', value: '' }
+}
+
+function startRule(): void {
+	const path = firstPath()
+	isPickingPath.value = !path
+	if (path) setRule(ruleOn(path))
+}
+
+function pickPath(value: unknown): void {
+	const path = String(value ?? '').trim()
+	if (!path) return
+	isPickingPath.value = false
+	setRule(ruleOn(path))
+}
+
+const mode = computed({
+	get: () => (props.block.visibleIf || isPickingPath.value ? ONLY_IF : ALWAYS),
+	set: (value: string | number | undefined) => {
+		if (value === ONLY_IF) return startRule()
+		isPickingPath.value = false
+		setRule(null)
+	},
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<p class="text-highlighted text-sm font-medium">{{ t(`${KEY}.label`) }}</p>
+		<DmsSegmented
+			v-model="mode"
+			size="xs"
+			:items="items"
+			:aria-label="t(`${KEY}.label`)"
+			class="w-full"
+		/>
+		<UFormField
+			v-if="isPickingPath && !block.visibleIf"
+			:help="t(`${KEY}.pick_path_help`)"
+			size="sm"
+		>
+			<USelectMenu
+				:items="[]"
+				create-item
+				icon="i-ph-brackets-curly"
+				class="w-full font-mono"
+				size="sm"
+				:placeholder="t(`${KEY}.pick_path`)"
+				:aria-label="t(`${KEY}.pick_path`)"
+				@update:model-value="pickPath"
+				@create="pickPath"
+			/>
+		</UFormField>
+		<MailingEditorConditionFields
+			v-if="block.visibleIf"
+			:condition="block.visibleIf"
+			outcome="visibility"
+			@update="setRule"
+		/>
+		<p class="text-muted text-xs">{{ t(`${KEY}.help`) }}</p>
+	</div>
+</template>

package/frontend-vue/app/components/editor/EditorWorkspace.vue

@@ -1,189 +1,102 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import type {
-	PreviewResponse,
-	TemplateContentResponse,
-	TemplateRow,
-	TemplateStatus,
-	VariableDefinition,
-} from '../../types/mailing'
-import { provideEditorContext } from '../../composables/useEditorContext'
+import { onMounted, watch } from 'vue'
+import type { TemplateContentResponse } from '../../types/mailing'
 import { useMailingApi } from '../../composables/useMailingApi'
+import { provideEditorContext } from '../../composables/useEditorContext'
+import { useEditorActions } from '../../composables/useEditorActions'
+import { useEditorSession } from '../../composables/useEditorSession'
+import {
+	useEditorLeaveGuard,
+	useEditorShortcuts,
+} from '../../composables/useEditorShortcuts'
 import { createEditorState } from '../../composables/useTemplateEditor'
-import { deepClone } from '../../utils/clone'
+import { apiErrorMessage } from '../../utils/api-error'
 
 interface Props {
 	loaded: TemplateContentResponse
 	templateId: string
-	requestedLocale: string | null
+	reload: () => Promise<void>
 }
 
 const props = defineProps<Props>()
+const locale = defineModel<string | null>('locale', { default: null })
+const emit = defineEmits<{ renamed: [string] }>()
 
-const { t } = useI18n()
 const toast = useToast()
 const { processApiMessage } = useTranslation()
-const { confirm } = useConfirm()
 const { uniqueLocales } = useUniqueLocales()
-const { registerGuard } = usePageLeaveGuard()
 const api = useMailingApi()
 
-const localeCodes = computed(() =>
-	uniqueLocales.value.map((locale) => locale.code),
-)
+const localeCodes = [
+	...new Set([
+		...uniqueLocales.value.map((entry) => entry.code),
+		...Object.keys(props.loaded.content.locales ?? {}),
+	]),
+]
 
 const editor = createEditorState(
 	props.loaded.content,
-	props.requestedLocale ?? props.loaded.fallbackLocale,
-	localeCodes.value,
-)
-
-const template = ref<TemplateRow>(props.loaded.template)
-const name = ref(props.loaded.template.name)
-const category = ref(props.loaded.template.category ?? '')
-const variables = ref<VariableDefinition[]>(props.loaded.variables ?? [])
-const detectedVariables = ref<string[]>(props.loaded.detectedVariables ?? [])
-const testData = ref(JSON.stringify(props.loaded.testData ?? {}, null, 2))
-const preview = ref<PreviewResponse | null>(null)
-const simulation = reactive<Record<string, boolean>>({})
-const savedContent = ref(deepClone(props.loaded.content))
-const testSendOpen = ref(false)
-
-registerGuard(
-	() =>
-		editor.dirty === 0 ||
-		confirm({
-			title: t('dms_mailing.editor.leave_guard'),
-			description: t('dms_mailing.editor.unsaved', { count: editor.dirty }),
-			confirmColor: 'error',
-		}),
+	locale.value ?? props.loaded.fallbackLocale,
+	localeCodes,
+	Date.now,
+	props.loaded.variables ?? [],
 )
 
-// The slug travels unchanged: `edit` replaces the writable fields, so omitting
-// it would null it.
-async function saveDetails(): Promise<void> {
-	const trimmed = name.value.trim() || template.value.name
-	const next = {
-		name: trimmed,
-		slug: template.value.slug,
-		category: category.value || undefined,
-	}
-	if (
-		next.name === template.value.name &&
-		next.category === (template.value.category || undefined)
-	) {
-		return
-	}
-	await api.saveTemplateDetails(props.templateId, next)
-	template.value = { ...template.value, ...next }
-	name.value = trimmed
-}
-
-/**
- * Surfaces a rejected call. Save and the status actions used to discard their
- * promise at the click handler, so a duplicate slug, a 403 or a dropped
- * connection left the author with no toast at all — and an editor that still
- * looked saved.
- */
 function reportFailure(error: unknown): void {
 	toast.add({
 		color: 'error',
-		title: processApiMessage(
-			(error as { data?: { message?: string } }).data?.message ?? error,
-		),
+		title: processApiMessage(apiErrorMessage(error)),
 	})
 }
 
-async function save(): Promise<void> {
-	try {
-		await saveDetails()
-		const { detectedVariables: detected } = await api.saveContent(
-			props.templateId,
-			deepClone(editor.content),
-		)
-		detectedVariables.value = detected ?? detectedVariables.value
-		savedContent.value = deepClone(editor.content)
-		editor.markSaved()
-		toast.add({ title: t('dms_mailing.editor.saved'), color: 'success' })
-	} catch (error) {
-		reportFailure(error)
-	}
-}
-
-type StatusAction = 'publish' | 'unpublish' | 'archive'
-
-async function runStatusAction(action: StatusAction): Promise<void> {
-	const calls = {
-		publish: api.publish,
-		unpublish: api.unpublish,
-		archive: api.archive,
-	}
-	try {
-		const { status } = await calls[action](props.templateId)
-		template.value = { ...template.value, status: status as TemplateStatus }
-		toast.add({
-			title: t(`dms_mailing.templates.actions.${action}`),
-			color: 'success',
-		})
-	} catch (error) {
-		reportFailure(error)
-	}
-}
-
-function publish(): Promise<void> {
-	return runStatusAction('publish')
-}
+const session = useEditorSession({
+	editor,
+	api,
+	templateId: props.templateId,
+	loaded: props.loaded,
+	onError: reportFailure,
+})
 
-async function discard(): Promise<void> {
-	const confirmed = await confirm({
-		title: t('dms_mailing.editor.discard_title'),
-		description: t('dms_mailing.editor.discard_description'),
-		confirmColor: 'error',
-	})
-	if (!confirmed) return
-	editor.reset(savedContent.value)
-}
+const actions = useEditorActions({
+	editor,
+	session,
+	api,
+	templateId: props.templateId,
+	reload: props.reload,
+	onError: reportFailure,
+})
 
 provideEditorContext({
 	editor,
+	session,
+	actions,
 	api,
 	templateId: props.templateId,
-	template,
-	variables,
-	detectedVariables,
-	name,
-	category,
-	runStatusAction,
-	testData,
-	preview,
-	simulation,
-	save,
-	publish,
-	discard,
-	openTestSend: () => (testSendOpen.value = true),
 })
-</script>
 
-<template>
-	<div class="flex h-full min-h-0 flex-col">
-		<DmsMailingEditorToolbar />
-		<DmsMailingEditorDraftBar v-if="editor.dirty > 0" />
+useEditorShortcuts(editor, actions)
+useEditorLeaveGuard(session)
+
+watch(
+	() => editor.locale,
+	(code) => (locale.value = code),
+)
+watch(
+	() => session.state.template.name,
+	(name) => emit('renamed', name),
+)
 
-		<div class="flex min-h-0 flex-1">
-			<DmsMailingEditorMissingLocale
-				v-if="!editor.current"
-				:fallback="loaded.fallbackLocale"
-			/>
-			<DmsMailingEditorCanvas v-else />
+onMounted(() => void session.loadPerformance())
+</script>
 
-			<aside
-				v-if="editor.railOpen"
-				class="border-default bg-default flex w-[340px] shrink-0 flex-col overflow-y-auto border-l"
-			>
-				<DmsMailingEditorRail />
-			</aside>
+<template>
+	<div class="bg-default flex h-full min-h-0 flex-1 flex-col">
+		<MailingEditorToolbar />
+		<MailingEditorNotice v-if="session.notice" :notice="session.notice" />
+		<div class="grid min-h-0 flex-1 grid-cols-[250px_minmax(0,1fr)_310px]">
+			<MailingEditorLeftPane />
+			<MailingEditorCanvas />
+			<MailingEditorInspector />
 		</div>
-
-		<DmsMailingEditorTestSendModal v-model:open="testSendOpen" />
 	</div>
 </template>

package/frontend-vue/app/composables/useBlockContext.ts

@@ -0,0 +1,16 @@
+import type { BlockContext } from '../utils/blocks'
+import { useEditorContext } from './useEditorContext'
+
+/**
+ * What a block added from the palette or an insertion point borrows from the
+ * template: its declared and detected variables and its category (the locale
+ * comes from the editor itself).
+ */
+export function useBlockContext(): () => BlockContext {
+	const { editor, session } = useEditorContext()
+	return () => ({
+		variables: editor.variables,
+		detected: session.detected,
+		category: session.state.template.category,
+	})
+}