inicontent 1.0.0

package/app/components/Form/index.vue

@@ -0,0 +1,621 @@
+<template>
+	<NForm :model="modelValue" ref="formValidationRef">
+		<slot :data="modelValue" :schema>
+			<FieldS v-model="modelValue" v-model:schema="schema" />
+		</slot>
+	</NForm>
+</template>
+
+<script lang="ts" setup>
+import { flattenSchema, isArrayOfObjects } from "inibase/utils";
+import type { FormInst } from "naive-ui";
+import { debounce } from "~/composables";
+import { normalizeTranslationValue } from "~/composables/translationValue";
+
+const props = defineProps<{
+	// biome-ignore lint/correctness/noVueDuplicateKeys: false positive with translation POST body's `table` key
+	table?: string;
+	onBeforeCreate?: (data?: Item) => any;
+	onAfterCreate?: (data?: Item) => any;
+	onBeforeUpdate?: (data?: Item) => any;
+	onAfterUpdate?: (data?: Item) => any;
+	onBeforeDelete?: (data?: Item) => any;
+	onAfterDelete?: (data?: Item) => any;
+}>();
+
+const schema = defineModel<Schema>("schema", { default: () => reactive([]) });
+defineSlots<{
+	default(data?: Item, schema?: Schema): any;
+}>();
+
+const modelValue = defineModel<Item>({ default: () => reactive({}) });
+
+defineExpose<FormRef>({
+	create: CREATE,
+	update: UPDATE,
+	delete: DELETE,
+	schema: schema as unknown as Schema,
+	data: modelValue.value,
+});
+
+const config = useRuntimeConfig();
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+const route = useRoute();
+const database = useState<Database>("database");
+const table = useState<Table>("table");
+
+function countItems(items: Schema): number {
+	return items.reduce((count, item) => {
+		return (
+			count +
+			1 +
+			(item.children && isArrayOfObjects(item.children)
+				? countItems(item.children)
+				: 0)
+		);
+	}, 0);
+}
+
+function mergeItems(existing: Schema, updated: Schema): Schema {
+	const mergedSchema: Schema = [];
+	const customItemsIndex = existing
+		.map((item, index) =>
+			item.id === undefined ||
+			(typeof item.id === "string" && (item.id as string).startsWith("temp-"))
+				? index
+				: -1,
+		)
+		.filter((index) => index !== -1);
+
+	for (let index = 0; index < updated.length; index++) {
+		const item = updated[index];
+		if (!item) continue;
+
+		const existingItem = existing.find(
+			(_item, index) =>
+				!customItemsIndex.includes(index) && _item.id === item.id,
+		);
+
+		// Fields that only exist in the updated schema (e.g. fields the server
+		// adds after a role change) have no counterpart to merge with — keep
+		// them as-is instead of dropping them from the rendered form.
+		if (!existingItem) {
+			mergedSchema.push(item);
+			continue;
+		}
+
+		if (
+			item.children &&
+			isArrayOfObjects(item.children) &&
+			existingItem?.children &&
+			isArrayOfObjects(existingItem.children)
+		)
+			item.children = mergeItems(
+				existingItem.children as Schema,
+				item.children as Schema,
+			);
+
+		const prioritizedFields = {
+			options: existingItem.options ?? item.options,
+			type: existingItem.type ?? item.type,
+			render: existingItem.render ?? item.render,
+			extraButtons: existingItem.extraButtons ?? item.extraButtons,
+			extraActions: existingItem.extraActions ?? item.extraActions,
+			itemExtraButtons: existingItem.itemExtraButtons ?? item.itemExtraButtons,
+			itemExtraActions: existingItem.itemExtraActions ?? item.itemExtraActions,
+			onDelete: existingItem.onDelete ?? item.onDelete,
+			onCreate: existingItem.onCreate ?? item.onCreate,
+		};
+
+		mergedSchema.push({
+			...existingItem,
+			...item,
+			...prioritizedFields,
+		});
+	}
+
+	for (let index = 0; index < customItemsIndex.length; index++) {
+		const elementIndex = customItemsIndex[index];
+
+		if (elementIndex === undefined || !existing[elementIndex]) continue;
+
+		if (elementIndex === 0) mergedSchema.unshift(existing[elementIndex]);
+		else if (
+			existing[elementIndex - 1] &&
+			!updated.some((item) => item.key === existing[elementIndex]?.key)
+		) {
+			const prevItemIndex = mergedSchema.findIndex(
+				(item) => item.id === existing[elementIndex - 1]?.id,
+			);
+			if (prevItemIndex !== -1)
+				mergedSchema.splice(prevItemIndex + 1, 0, existing[elementIndex]);
+		}
+	}
+
+	return mergedSchema;
+}
+
+const Language = useScopedCookie<LanguagesType>(
+	"language",
+	database.value?.slug,
+);
+const PostSchemaResp = useState<
+	Record<string, apiResponse<{ schema: Schema; data: Item }>>
+>("PostSchema", () => ({}));
+const filterDefaultColumns = (field: Field) =>
+	!["id", "createdAt", "createdBy", "updatedAt", "updatedBy"].includes(
+		field.key,
+	);
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+
+function hasFunctionsProperties(items: Schema): boolean {
+	return items.some((item) => {
+		if (
+			item.render !== undefined ||
+			item.itemExtraActions !== undefined ||
+			item.itemExtraButtons !== undefined ||
+			item.extraActions !== undefined ||
+			item.extraButtons !== undefined ||
+			item.onDelete !== undefined ||
+			item.onCreate !== undefined
+		)
+			return true;
+
+		if (item.children && isArrayOfObjects(item.children))
+			return hasFunctionsProperties(item.children as Schema);
+
+		return false;
+	});
+}
+const oldModelValue = ref();
+let schemaFetchSequence = 0;
+// Fetch schema and data dynamically from the correct endpoint
+async function fetchSchemaAndData() {
+	const bodyContent = toRaw(modelValue.value);
+	const requestSequence = ++schemaFetchSequence;
+
+	let response: apiResponse<{ schema: Schema; data: Item }>;
+	let setSchema = false;
+
+	try {
+		const currentPOSTSchemaResp =
+			PostSchemaResp.value[
+				props.table ?? table.value?.slug ?? route.params.table
+			];
+
+		if (
+			currentPOSTSchemaResp &&
+			(Object.keys(bodyContent).length === 0 ||
+				JSON.stringify(bodyContent) ===
+					JSON.stringify(currentPOSTSchemaResp?.result.data))
+		)
+			response = currentPOSTSchemaResp as apiResponse<{
+				schema: Schema;
+				data: Item;
+			}>;
+		else {
+			Loading.value.SCHEMA = true;
+
+			response = await $fetch<apiResponse<{ schema: Schema; data: Item }>>(
+				`${config.public.apiBase}${database.value.slug}/${props.table ?? table.value?.slug ?? route.params.table}/schema`,
+				{
+					method: bodyContent?.id ? "PUT" : "POST",
+					body: bodyContent,
+					params: {
+						locale: Language.value,
+						[`${database.value.slug}_sid`]: sessionID.value,
+					},
+					credentials: "include",
+				},
+			);
+
+			if (Object.keys(bodyContent).length === 0) setSchema = true;
+		}
+
+		// A newer edit already started another request; don't let this
+		// stale response overwrite the schema/data the user is now seeing.
+		if (requestSequence !== schemaFetchSequence) return;
+
+		const currentSchema = schema.value.filter(filterDefaultColumns);
+
+		// Update the schema
+		if (response.result?.schema) {
+			response.result.schema =
+				response.result.schema.filter(filterDefaultColumns);
+			if (!currentSchema?.length) {
+				if (props.table) {
+					const targetTableSchema = database.value.tables
+						?.find(
+							({ slug }) =>
+								slug ===
+								(props.table ?? table.value?.slug ?? route.params.table),
+						)
+						?.schema?.filter(filterDefaultColumns);
+					if (targetTableSchema)
+						response.result.schema = mergeItems(
+							targetTableSchema,
+							response.result.schema,
+						);
+				} else if (table.value?.schema)
+					response.result.schema = mergeItems(
+						table.value.schema.filter(filterDefaultColumns),
+						response.result.schema,
+					);
+			} else if (
+				countItems(currentSchema) !== countItems(response.result.schema) ||
+				hasFunctionsProperties(currentSchema)
+			)
+				response.result.schema = mergeItems(
+					currentSchema,
+					response.result.schema,
+				);
+
+			if (hasFunctionsProperties(response.result.schema))
+				delete PostSchemaResp.value[
+					props.table ?? table.value?.slug ?? route.params.table
+				];
+			else if (setSchema)
+				PostSchemaResp.value[
+					props.table ?? table.value?.slug ?? route.params.table
+				] = response;
+
+			schema.value = response.result.schema;
+		}
+
+		// Update data only if the API sends changes
+		if (response.result?.data) {
+			if (modelValue.value)
+				Object.assign(modelValue.value, response.result.data);
+			else modelValue.value = response.result.data;
+		}
+	} catch (error) {
+		// The /schema endpoint needs the network and can be unreachable when
+		// offline (device on Wi-Fi/LAN without internet, captive portal, etc.).
+		// Queuing an "error fetching schema" toast for that is pure noise — it
+		// would also re-fire on every debounced refetch while the user types.
+		//
+		// Render the form from the table's default schema (the cached database
+		// metadata, the same source the success path merges in) whenever there
+		// are no fields yet: an empty create drawer must never be blocked by an
+		// unreachable /schema call, and the create button stays clickable so the
+		// drawer can complete and close.
+		const defaultSchema = props.table
+			? database.value.tables?.find(
+					({ slug }) =>
+						slug === (props.table ?? table.value?.slug ?? route.params.table),
+				)?.schema
+			: table.value?.schema;
+		if (!schema.value.length && defaultSchema?.length)
+			schema.value = defaultSchema.filter(filterDefaultColumns);
+
+		// Network failures and junk (HTML-stub) responses are silent. Only
+		// genuine server errors (HTTP status, valid JSON API) get a toast.
+		if (!isNetworkError(error) && !isJunkResponse(error)) {
+			console.error("Error fetching schema:", error);
+			window.$message.error(t("errorFetchingSchema"));
+		}
+		return;
+	} finally {
+		oldModelValue.value = JSON.parse(JSON.stringify(modelValue.value));
+		Loading.value.SCHEMA = false;
+	}
+}
+
+// Debounced version of fetchSchemaAndData
+const debouncedFetchSchemaAndData = debounce(async () => {
+	await fetchSchemaAndData();
+}, 1000);
+
+// Debounce the change check itself so a fast typist doesn't pay the cost
+// of deep-diffing the whole form object on every keystroke.
+const debouncedCheckForChanges = debounce((v: Item) => {
+	if (JSON.stringify(oldModelValue.value) !== JSON.stringify(v))
+		debouncedFetchSchemaAndData();
+}, 300);
+
+// Trigger schema fetch on input changes with debounce
+watch(
+	modelValue,
+	(v) => {
+		debouncedCheckForChanges(v);
+	},
+	{ deep: true, immediate: true },
+);
+
+onMounted(async () => {
+	// Save on Ctrl+S or Command+S
+	document.onkeydown = (e) => {
+		if (
+			!(
+				(e.ctrlKey || e.metaKey) &&
+				(e.key.toLowerCase() === "s" || e.key === "س")
+			)
+		)
+			return;
+		e.preventDefault();
+		if (modelValue.value?.id) UPDATE();
+		else CREATE();
+	};
+});
+
+const formValidationRef = ref<FormInst>();
+
+async function UPDATE() {
+	if (Loading.value.UPDATE) return;
+
+	formValidationRef.value?.validate(async (errors) => {
+		if (!errors) {
+			const bodyContent = toRaw(modelValue.value);
+
+			if (props.onBeforeUpdate)
+				modelValue.value = props.onBeforeUpdate(bodyContent);
+
+			Loading.value.UPDATE = true;
+			const data = await useOfflineFetch()
+				.request(
+					`${config.public.apiBase}${database.value.slug}/${
+						props.table ?? table.value?.slug ?? route.params.table
+					}/${bodyContent?.id}`,
+					{
+						method: "PUT",
+						body: bodyContent,
+						params: {
+							return: false,
+							locale: Language.value,
+							[`${database.value.slug}_sid`]: sessionID.value,
+						},
+						credentials: "include",
+						offline: {
+							database: database.value.slug,
+							table:
+								props.table ?? table.value?.slug ?? route.params.table ?? "",
+						},
+					},
+				)
+				.catch(() => {
+					window.$message.error(t("updateFailed"));
+					return null;
+				});
+			Loading.value.UPDATE = false;
+
+			if (isOfflineQueuedResult(data)) {
+				window.$message.warning(t("queuedOfflineToast"));
+				useOfflineSync().refreshCounts();
+				return;
+			}
+
+			if (
+				(typeof (data as any)?.result === "boolean" &&
+					(data as any).result === true) ||
+				(typeof (data as any)?.result !== "boolean" &&
+					(data as any)?.result?.id)
+			) {
+				window.$message.success((data as any).message);
+				if (props.onAfterUpdate) return props.onAfterUpdate(bodyContent);
+			} else window.$message.error((data as any).message);
+		} else window.$message.error(t("inputsAreInvalid"));
+	});
+}
+
+async function DELETE() {
+	if (Loading.value.DELETE) return;
+
+	const bodyContent = toRaw(modelValue.value);
+
+	if (props.onBeforeDelete) props.onBeforeDelete(bodyContent);
+
+	Loading.value.DELETE = true;
+	const data = await useOfflineFetch()
+		.request(
+			`${config.public.apiBase}${database.value.slug}/${
+				props.table ?? table.value?.slug ?? route.params.table
+			}/${bodyContent?.id}`,
+			{
+				method: "DELETE",
+				params: {
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+				offline: {
+					database: database.value.slug,
+					table: props.table ?? table.value?.slug ?? route.params.table ?? "",
+				},
+			},
+		)
+		.catch(() => {
+			window.$message.error(t("deleteFailed"));
+			return null;
+		});
+	Loading.value.DELETE = false;
+
+	if (isOfflineQueuedResult(data)) {
+		window.$message.warning(t("queuedOfflineToast"));
+		useOfflineSync().refreshCounts();
+		return;
+	}
+
+	if ((data as any)?.result) {
+		window.$message.success((data as any).message);
+		await refreshNuxtData(
+			`${database.value.slug}/${props.table ?? table.value?.slug ?? route.params.table}`,
+		);
+
+		if (props.onAfterDelete) return props.onAfterDelete((data as any).result);
+
+		await navigateTo(
+			`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${props.table ?? table.value?.slug ?? route.params.table}`,
+		);
+		return;
+	}
+	window.$message.error((data as any)?.message);
+}
+
+// Submit form data
+async function CREATE() {
+	if (Loading.value.CREATE) return;
+
+	formValidationRef.value?.validate(async (errors) => {
+		if (!errors) {
+			const bodyContent = toRaw(modelValue.value);
+
+			if (props.onBeforeCreate)
+				modelValue.value = props.onBeforeCreate(bodyContent);
+
+			Loading.value.CREATE = true;
+			const data = await useOfflineFetch()
+				.request(
+					`${config.public.apiBase}${database.value.slug}/${props.table ?? table.value?.slug ?? route.params.table}`,
+					{
+						method: "POST",
+						body: bodyContent,
+						params: {
+							locale: Language.value,
+							[`${database.value.slug}_sid`]: sessionID.value,
+						},
+						credentials: "include",
+						offline: {
+							database: database.value.slug,
+							table:
+								props.table ?? table.value?.slug ?? route.params.table ?? "",
+						},
+					},
+				)
+				.catch(() => {
+					window.$message.error(t("createFailed"));
+					return null;
+				});
+			Loading.value.CREATE = false;
+
+			if (isOfflineQueuedResult(data)) {
+				window.$message.warning(t("queuedOfflineToast"));
+				useOfflineSync().refreshCounts();
+				// Re-read the (cached) table data so the new item shows up in
+				// the list — Table/index.vue merges queued creates into view.
+				await refreshNuxtData(
+					`${database.value.slug}/${props.table ?? table.value?.slug ?? route.params.table}`,
+				);
+				return navigateTo(
+					`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${props.table ?? table.value?.slug ?? route.params.table}`,
+				);
+			}
+
+			if (!(data as any)?.result || !(data as any)?.result.id)
+				return window.$message.error((data as any)?.message);
+
+			// When creating an item in a secondary language, also post the
+			// entered values as translations for that language.
+			if (Language.value && Language.value !== database.value?.primaryLanguage)
+				await postTranslationsForNewItem(bodyContent, String(data.result.id));
+
+			window.$message.success(data.message);
+			await refreshNuxtData(
+				`${database.value.slug}/${props.table ?? table.value?.slug ?? route.params.table}`,
+			);
+
+			if (props.onAfterCreate) return props.onAfterCreate(data.result);
+
+			return navigateTo(
+				`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${props.table ?? table.value?.slug ?? route.params.table}/${data.result.id}/edit`,
+			);
+		}
+		window.$message.error(t("inputsAreInvalid"));
+	});
+}
+
+// ── Post translations when creating an item in a secondary language ──────────
+
+const notTranslatableKeys = new Set([
+	"id",
+	"createdAt",
+	"createdBy",
+	"updatedAt",
+	"updatedBy",
+	"password",
+	"email",
+	"color",
+	"icon",
+	"link",
+	"role",
+]);
+
+const extraTranslatableKeys = new Set([
+	"url",
+	"table",
+	"asset",
+	"array-table",
+	"array-asset",
+]);
+
+const translatableTypes = new Set(["string", "text", "textarea", "html"]);
+
+function isArrayField(field: Field): boolean {
+	const type = Array.isArray(field.type) ? field.type[0] : field.type;
+	return (
+		field.isArray === true ||
+		type === "array" ||
+		(type === "multiple" && field.subType !== "select")
+	);
+}
+
+function isTranslatableField(field: Field): boolean {
+	const type = Array.isArray(field.type) ? field.type[0] : field.type;
+	const subType = field.subType;
+	const resolved = (subType ?? type) as string;
+	if (notTranslatableKeys.has(resolved)) return false;
+	if (["ids", "id"].includes(field.key)) return false;
+	if (translatableTypes.has(resolved)) return true;
+	if (extraTranslatableKeys.has(resolved)) return true;
+	if (isArrayField(field)) return true;
+	return false;
+}
+
+function normalizeValue(field: Field, value: unknown): string {
+	// References are stored as their id(s) and arrays with Inison, matching the
+	// translation drawer so both writers produce identical records.
+	return normalizeTranslationValue(field, value);
+}
+
+async function postTranslationsForNewItem(
+	bodyContent: Item,
+	newItemId: string,
+) {
+	if (!table.value?.schema) return;
+	const fields = flattenSchema(table.value.schema, true).filter(
+		(field) => !field.key.includes(".") && isTranslatableField(field),
+	);
+	const ops: Promise<any>[] = [];
+
+	for (const field of fields) {
+		const raw = (bodyContent as any)[field.key];
+		const value = normalizeValue(field, raw);
+		if (!value) continue;
+		ops.push(
+			$fetch(`${config.public.apiBase}${database.value.slug}/translations`, {
+				method: "POST",
+				body: {
+					translation: value,
+					locale: Language.value,
+					table: table.value.id,
+					field: field.id,
+					item: newItemId,
+				},
+				params: {
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			}),
+		);
+	}
+
+	if (ops.length) {
+		try {
+			await Promise.all(ops);
+		} catch (e) {
+			console.error("[Form] failed to post translations", e);
+		}
+	}
+}
+</script>