refact: Use the pagelist in the default site blueprint

refact: Convert blueprint sections to fields

refact: Collect blueprints and errors from fields

refact: Resolve field props for the model view

refact: New ModelForm component

docs: Deprecate the sections components

refact: Outsource normalizing logic into its own class

test: Add missing unit tests

Author: bastianallgeier

panel/src/components/Forms/Field/ModelListField.test.ts

@@ -0,0 +1,100 @@
+import { beforeEach, describe, expect, it, vi } from "@test/unit";
+import { mount } from "@vue/test-utils";
+import ModelListField from "./ModelListField.vue";
+
+const events = { emit: vi.fn(), off: vi.fn(), on: vi.fn() };
+const api = { get: vi.fn() };
+const panel = { error: vi.fn() };
+
+const initial = {
+	columns: {},
+	models: [],
+	pagination: { page: 1, total: 0 }
+};
+
+function factory() {
+	return mount(ModelListField, {
+		props: {
+			endpoints: { field: "pages/test/fields/drafts" },
+			initial,
+			name: "drafts"
+		},
+		shallow: true,
+		global: {
+			mocks: {
+				$api: api,
+				$events: events,
+				$panel: panel
+			}
+		}
+	});
+}
+
+/**
+ * The arguments of the last emitted event. The instance
+ * is compared by identity, as enumerating its keys warns.
+ */
+function lastEmit() {
+	return events.emit.mock.calls.at(-1) ?? [];
+}
+
+describe("ModelListField.vue", () => {
+	beforeEach(() => {
+		api.get.mockReset();
+		events.emit.mockClear();
+		panel.error.mockClear();
+	});
+
+	it("announces itself once it is mounted", () => {
+		const wrapper = factory();
+
+		expect(events.emit).toHaveBeenCalledTimes(1);
+		expect(lastEmit()[0]).toBe("field.loaded");
+		expect(lastEmit()[1]).toBe(wrapper.vm);
+	});
+
+	it("listens to model updates while mounted", () => {
+		const wrapper = factory();
+
+		expect(events.on).toHaveBeenCalledWith("model.update", expect.anything());
+
+		wrapper.unmount();
+
+		expect(events.off).toHaveBeenCalledWith("model.update", expect.anything());
+	});
+
+	it("announces itself again after a reload", async () => {
+		const state = { ...initial, pagination: { page: 2, total: 25 } };
+		api.get.mockResolvedValue(state);
+
+		const wrapper = factory();
+		await wrapper.vm.reload({ page: 2 });
+
+		expect(api.get).toHaveBeenCalledWith("pages/test/fields/drafts", {
+			page: 2,
+			searchterm: null
+		});
+
+		// the fresh state replaces the initial one
+		expect(wrapper.vm.state).toStrictEqual(state);
+
+		// once on mount, once after the reload
+		expect(events.emit).toHaveBeenCalledTimes(2);
+		expect(lastEmit()[0]).toBe("field.loaded");
+		expect(lastEmit()[1]).toBe(wrapper.vm);
+	});
+
+	it("announces itself even when the reload fails", async () => {
+		const error = new Error("Nope");
+		api.get.mockRejectedValue(error);
+
+		const wrapper = factory();
+		await wrapper.vm.reload();
+
+		expect(panel.error).toHaveBeenCalledWith(error);
+		expect(wrapper.vm.isProcessing).toBe(false);
+		expect(events.emit).toHaveBeenCalledTimes(2);
+		expect(lastEmit()[0]).toBe("field.loaded");
+		expect(lastEmit()[1]).toBe(wrapper.vm);
+	});
+});

panel/src/components/Forms/Field/ModelListField.vue

@@ -253,6 +253,9 @@ export default {
 			this.$events.on(event, this.onRefresh);
 		}
 	},
+	mounted() {
+		this.$events.emit("field.loaded", this);
+	},
 	unmounted() {
 		for (const event of this.refreshEvents()) {
 			this.$events.off(event, this.onRefresh);
@@ -305,6 +308,9 @@ export default {
 			} finally {
 				this.isProcessing = false;
 			}
+
+			await this.$nextTick();
+			this.$events.emit("field.loaded", this);
 		},
 		/**
 		 * Runs the callback and announces the change afterwards,

panel/src/components/Forms/ModelForm.test.js

@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import ModelForm from "./ModelForm.vue";
+
+const { disabled, isEmpty, resolvedColumns } = ModelForm.computed;
+const { fieldsWithAdditionalData } = ModelForm.methods;
+
+/**
+ * Builds a mocked component context
+ */
+function context(props = {}) {
+	const ctx = {
+		api: "pages/test",
+		columns: {},
+		diff: {},
+		...props
+	};
+
+	ctx.fieldsWithAdditionalData = fieldsWithAdditionalData.bind(ctx);
+
+	return ctx;
+}
+
+describe("ModelForm.vue", () => {
+	const columns = {
+		0: { width: "1/2", fields: { headline: { type: "text" } } },
+		1: { width: "1/2", sticky: true, fields: { text: { type: "textarea" } } }
+	};
+
+	it("renders a column for each column of the tab", () => {
+		const wrapper = mount(ModelForm, {
+			props: { api: "pages/test", columns, content: { headline: "Test" } }
+		});
+
+		const rendered = wrapper.findAll("k-column");
+
+		expect(wrapper.find("form.k-model-form").exists()).toBe(true);
+		expect(rendered.length).toBe(2);
+		expect(rendered[0].attributes("width")).toBe("1/2");
+		expect(rendered[1].attributes("sticky")).toBe("true");
+		expect(wrapper.findAll("k-fieldset").length).toBe(2);
+	});
+
+	it("renders the empty state instead of the form", () => {
+		const wrapper = mount(ModelForm, {
+			props: { columns: {}, empty: "No blueprint" }
+		});
+
+		expect(wrapper.find("k-box").exists()).toBe(true);
+		expect(wrapper.find("form").exists()).toBe(false);
+	});
+
+	it("passes on the input of a fieldset", async () => {
+		const wrapper = mount(ModelForm, {
+			props: { api: "pages/test", columns }
+		});
+
+		await wrapper.find("k-fieldset").trigger("input");
+
+		expect(wrapper.emitted("input")).toHaveLength(1);
+	});
+
+	it("submits the form and the fieldsets", async () => {
+		const wrapper = mount(ModelForm, {
+			props: { api: "pages/test", columns }
+		});
+
+		await wrapper.find("form").trigger("submit");
+		expect(wrapper.emitted("submit")).toHaveLength(1);
+
+		// the submit of a fieldset bubbles up to the form as well
+		await wrapper.find("k-fieldset").trigger("submit");
+		expect(wrapper.emitted("submit")).toHaveLength(3);
+	});
+});
+
+describe("ModelForm.fieldsWithAdditionalData()", () => {
+	it("points regular fields at the field endpoint", () => {
+		const ctx = context();
+		const fields = ctx.fieldsWithAdditionalData({
+			headline: { type: "text" }
+		});
+
+		expect(fields.headline.endpoints).toStrictEqual({
+			model: "pages/test",
+			field: "pages/test/fields/headline"
+		});
+	});
+
+	it("points section fields at the section endpoint", () => {
+		const ctx = context();
+		const fields = ctx.fieldsWithAdditionalData({
+			mysection: { type: "section" }
+		});
+
+		expect(fields.mysection.endpoints).toStrictEqual({
+			model: "pages/test",
+			section: "pages/test/sections/mysection"
+		});
+	});
+
+	it("flags fields with unsaved changes", () => {
+		const ctx = context({ diff: { headline: "changed" } });
+		const fields = ctx.fieldsWithAdditionalData({
+			headline: { type: "text" },
+			text: { type: "textarea" }
+		});
+
+		expect(fields.headline.hasDiff).toBe(true);
+		expect(fields.text.hasDiff).toBe(false);
+	});
+
+	it("survives a missing diff", () => {
+		const ctx = context({ diff: undefined });
+		const fields = ctx.fieldsWithAdditionalData({
+			headline: { type: "text" }
+		});
+
+		expect(fields.headline.hasDiff).toBe(false);
+	});
+});
+
+describe("ModelForm.resolvedColumns()", () => {
+	it("keeps the column props and resolves its fields", () => {
+		const ctx = context({
+			columns: {
+				0: { width: "2/3", fields: { headline: { type: "text" } } }
+			}
+		});
+
+		const columns = resolvedColumns.call(ctx);
+
+		expect(columns[0].width).toBe("2/3");
+		expect(columns[0].fields.headline.endpoints.field).toBe(
+			"pages/test/fields/headline"
+		);
+	});
+});
+
+describe("ModelForm.disabled()", () => {
+	it("is disabled while the model is locked", () => {
+		expect(disabled.call({ lock: { state: "lock" } })).toBe(true);
+		expect(disabled.call({ lock: { state: "unlock" } })).toBe(false);
+		expect(disabled.call({ lock: false })).toBe(false);
+	});
+});
+
+describe("ModelForm.isEmpty()", () => {
+	it("only reports empty when there are no columns and a text to show", () => {
+		expect(isEmpty.call({ columns: {}, empty: "No blueprint" })).toBe(
+			"No blueprint"
+		);
+		expect(isEmpty.call({ columns: {}, empty: null })).toBeFalsy();
+		expect(isEmpty.call({ columns: { 0: {} }, empty: "No blueprint" })).toBe(
+			false
+		);
+	});
+});

panel/src/components/Forms/ModelForm.vue

@@ -0,0 +1,100 @@
+<template>
+	<k-box v-if="isEmpty" :html="true" :text="empty" theme="info" />
+
+	<form
+		v-else
+		class="k-model-form"
+		method="POST"
+		@submit.prevent="$emit('submit', $event)"
+	>
+		<k-grid variant="columns">
+			<k-column
+				v-for="(column, columnKey) in resolvedColumns"
+				:key="api + '-column-' + columnKey"
+				:width="column.width"
+				:sticky="column.sticky"
+			>
+				<k-fieldset
+					ref="fieldsets"
+					:disabled="disabled"
+					:fields="column.fields"
+					:value="content"
+					@input="$emit('input', $event)"
+					@submit="$emit('submit', $event)"
+				/>
+			</k-column>
+		</k-grid>
+	</form>
+</template>
+
+<script>
+/**
+ * Renders all columns of a model view tab as a single form.
+ *
+ * Sections are converted to fields on the blueprint level,
+ * so a model view is nothing but a form.
+ *
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     6.0.0
+ */
+export default {
+	props: {
+		api: String,
+		columns: [Array, Object],
+		content: Object,
+		diff: Object,
+		/**
+		 * Text to show when the model has no columns at all
+		 */
+		empty: String,
+		lock: [Boolean, Object]
+	},
+	emits: ["input", "submit"],
+	computed: {
+		disabled() {
+			return this.lock?.state === "lock";
+		},
+		isEmpty() {
+			return Object.keys(this.columns ?? {}).length === 0 && this.empty;
+		},
+		resolvedColumns() {
+			const columns = {};
+
+			for (const key in this.columns) {
+				columns[key] = {
+					...this.columns[key],
+					fields: this.fieldsWithAdditionalData(this.columns[key].fields)
+				};
+			}
+
+			return columns;
+		}
+	},
+	methods: {
+		fieldsWithAdditionalData(fields) {
+			const result = {};
+
+			for (const name in fields) {
+				const field = fields[name];
+
+				// section fields talk to the section endpoint,
+				// all other fields to the field endpoint
+				// TODO: drop this once we use field endpoints
+				const endpoints =
+					field.type === "section"
+						? { model: this.api, section: this.api + "/sections/" + name }
+						: { model: this.api, field: this.api + "/fields/" + name };
+
+				result[name] = {
+					...field,
+					endpoints,
+					hasDiff: Object.hasOwn(this.diff ?? {}, name)
+				};
+			}
+
+			return result;
+		}
+	}
+};
+</script>

panel/src/components/Forms/index.js

@@ -5,6 +5,7 @@ import Fieldset from "./Fieldset.vue";
 import Form from "./Form.vue";
 import FormControls from "./FormControls.vue";
 import Input from "./Input.vue";
+import ModelForm from "./ModelForm.vue";
 
 /* Form parts */
 import Blocks from "./Blocks/index.js";
@@ -24,6 +25,7 @@ export default {
 		app.component("k-form", Form);
 		app.component("k-form-controls", FormControls);
 		app.component("k-input", Input);
+		app.component("k-model-form", ModelForm);
 
 		app.use(Blocks);
 		app.use(Inputs);