feat: New field.loaded event in ModelListField

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/Views/Preview/PreviewForm.test.ts

@@ -0,0 +1,145 @@
+import { beforeEach, describe, expect, it, vi } from "@test/unit";
+import { mount } from "@vue/test-utils";
+import PreviewForm from "./PreviewForm.vue";
+
+const events = { off: vi.fn(), on: vi.fn() };
+const panel = {
+	config: { debug: false },
+	view: { path: "/pages/test" }
+};
+
+function factory() {
+	return mount(PreviewForm, {
+		props: {
+			api: "pages/test",
+			blueprint: "default",
+			content: {},
+			tab: { name: "main" },
+			tabs: [{ name: "main" }]
+		},
+		shallow: true,
+		global: {
+			mocks: {
+				$events: events,
+				$panel: panel
+			}
+		}
+	});
+}
+
+type Link = HTMLAnchorElement & {
+	__vue__: { onClick: (event: Event) => void; to?: string };
+};
+
+/**
+ * Creates a fake field or section instance with links
+ * for the given urls, wrapped in item titles
+ */
+function loaded(...urls: (string | undefined)[]) {
+	const $el = document.createElement("div");
+	const links = urls.map((to) => {
+		const title = document.createElement("p");
+		title.className = "k-item-title";
+
+		const link = document.createElement("a") as Link;
+		link.className = "k-link";
+		link.__vue__ = { onClick: original, to };
+
+		title.append(link);
+		$el.append(title);
+
+		return link;
+	});
+
+	return { $el, links };
+}
+
+const original = vi.fn();
+
+describe("PreviewForm.vue", () => {
+	beforeEach(() => {
+		events.off.mockClear();
+		events.on.mockClear();
+		original.mockClear();
+	});
+
+	it("listens to loaded fields and sections while mounted", () => {
+		const wrapper = factory();
+
+		expect(events.on).toHaveBeenCalledWith("field.loaded", wrapper.vm.fixLinks);
+		expect(events.on).toHaveBeenCalledWith(
+			"section.loaded",
+			wrapper.vm.fixLinks
+		);
+
+		const fixLinks = wrapper.vm.fixLinks;
+		wrapper.unmount();
+
+		expect(events.off).toHaveBeenCalledWith("field.loaded", fixLinks);
+		expect(events.off).toHaveBeenCalledWith("section.loaded", fixLinks);
+	});
+
+	it("redirects page links to the preview form", () => {
+		const wrapper = factory();
+		const { $el, links } = loaded("/pages/test+child");
+
+		wrapper.vm.fixLinks({ $el });
+
+		const event = { preventDefault: vi.fn() };
+		links[0].__vue__.onClick(event as unknown as Event);
+
+		expect(event.preventDefault).toHaveBeenCalled();
+		expect(original).not.toHaveBeenCalled();
+		expect(wrapper.emitted("navigate")).toStrictEqual([
+			["/pages/test+child/preview/form"]
+		]);
+	});
+
+	it("redirects all page links of the element", () => {
+		const wrapper = factory();
+		const { $el, links } = loaded("/pages/a", "/pages/b");
+
+		wrapper.vm.fixLinks({ $el });
+
+		for (const link of links) {
+			link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
+		}
+
+		expect(wrapper.emitted("navigate")).toStrictEqual([
+			["/pages/a/preview/form"],
+			["/pages/b/preview/form"]
+		]);
+	});
+
+	it("keeps links that don't point to a page view", () => {
+		const wrapper = factory();
+		const { $el, links } = loaded(
+			"/pages/test+child/files/test.jpg",
+			"/users/test",
+			undefined
+		);
+
+		wrapper.vm.fixLinks({ $el });
+
+		for (const link of links) {
+			expect(link.__vue__.onClick).toBe(original);
+
+			link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
+		}
+
+		expect(original).toHaveBeenCalledTimes(3);
+		expect(wrapper.emitted("navigate")).toBeUndefined();
+	});
+
+	it("ignores links outside of item titles", () => {
+		const wrapper = factory();
+		const { $el, links } = loaded("/pages/test+child");
+
+		// move the link out of the item title
+		$el.append(links[0]);
+
+		wrapper.vm.fixLinks({ $el });
+
+		expect(links[0].__vue__.onClick).toBe(original);
+	});
+});

panel/src/components/Views/Preview/PreviewForm.vue

@@ -73,18 +73,20 @@ export default {
 		}
 	},
 	mounted() {
-		this.$events.on("section.loaded", this.fixLinksInSection);
+		this.$events.on("field.loaded", this.fixLinks);
+		this.$events.on("section.loaded", this.fixLinks);
 	},
 	unmounted() {
-		this.$events.off("section.loaded", this.fixLinksInSection);
+		this.$events.off("field.loaded", this.fixLinks);
+		this.$events.off("section.loaded", this.fixLinks);
 	},
 	methods: {
 		/**
-		 * Overwrites all links to page views in the section
+		 * Overwrites all links to page views in the field or section
 		 * to open the corresponding page preview view instead
 		 */
-		fixLinksInSection(section) {
-			const links = section.$el.querySelectorAll(".k-item-title > .k-link");
+		fixLinks(element) {
+			const links = element.$el.querySelectorAll(".k-item-title > .k-link");
 			for (const link of links) {
 				const url = link.__vue__.to;