refact: Convert blueprint sections to fields

Author: bastianallgeier

config/api/models/FileBlueprint.php

@@ -9,7 +9,7 @@
 	'fields' => [
 		'name'    => fn (FileBlueprint $blueprint) => $blueprint->name(),
 		'options' => fn (FileBlueprint $blueprint) => $blueprint->options(),
-		'tabs'    => fn (FileBlueprint $blueprint) => $blueprint->tabs(),
+		'tabs'    => fn (FileBlueprint $blueprint) => array_values($blueprint->tabs()->toArray()),
 		'title'   => fn (FileBlueprint $blueprint) => $blueprint->title(),
 	],
 	'type'  => FileBlueprint::class,

config/api/models/PageBlueprint.php

@@ -12,7 +12,7 @@
 		'options' => fn (PageBlueprint $blueprint) => $blueprint->options(),
 		'preview' => fn (PageBlueprint $blueprint) => $blueprint->preview(),
 		'status'  => fn (PageBlueprint $blueprint) => $blueprint->status(),
-		'tabs'    => fn (PageBlueprint $blueprint) => $blueprint->tabs(),
+		'tabs'    => fn (PageBlueprint $blueprint) => array_values($blueprint->tabs()->toArray()),
 		'title'   => fn (PageBlueprint $blueprint) => $blueprint->title(),
 	],
 	'type'  => PageBlueprint::class,

config/api/models/SiteBlueprint.php

@@ -9,7 +9,7 @@
 	'fields' => [
 		'name'    => fn (SiteBlueprint $blueprint) => $blueprint->name(),
 		'options' => fn (SiteBlueprint $blueprint) => $blueprint->options(),
-		'tabs'    => fn (SiteBlueprint $blueprint) => $blueprint->tabs(),
+		'tabs'    => fn (SiteBlueprint $blueprint) => array_values($blueprint->tabs()->toArray()),
 		'title'   => fn (SiteBlueprint $blueprint) => $blueprint->title(),
 	],
 	'type'  => SiteBlueprint::class,

config/api/models/UserBlueprint.php

@@ -9,7 +9,7 @@
 	'fields' => [
 		'name'    => fn (UserBlueprint $blueprint) => $blueprint->name(),
 		'options' => fn (UserBlueprint $blueprint) => $blueprint->options(),
-		'tabs'    => fn (UserBlueprint $blueprint) => $blueprint->tabs(),
+		'tabs'    => fn (UserBlueprint $blueprint) => array_values($blueprint->tabs()->toArray()),
 		'title'   => fn (UserBlueprint $blueprint) => $blueprint->title(),
 	],
 	'type'  => UserBlueprint::class,

panel/src/components/Navigation/ModelTabs.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "@test/unit";
+import { mount } from "@vue/test-utils";
+import ModelTabs from "./ModelTabs.vue";
+
+const tabs = [
+	{
+		name: "main",
+		fields: ["headline", "Text"]
+	},
+	{
+		name: "meta",
+		fields: ["seo"]
+	}
+];
+
+type Badge = { text: number } | undefined;
+
+function badges(diff = {}): Badge[] {
+	const wrapper = mount(ModelTabs, { props: { tab: "main", tabs, diff } });
+	const withBadges = wrapper.vm.withBadges as { badge: Badge }[];
+	return withBadges.map((tab) => tab.badge);
+}
+
+describe("ModelTabs.vue", () => {
+	describe("element", () => {
+		it.rendersAs(() => mount(ModelTabs).find("k-tabs"), "K-TABS");
+	});
+
+	describe("withBadges", () => {
+		it("counts the changed fields of a tab", () => {
+			expect(badges({ headline: "a", seo: "b" })).toStrictEqual([
+				{ text: 1 },
+				{ text: 1 }
+			]);
+		});
+
+		it("compares the field names case-insensitively", () => {
+			expect(badges({ text: "a" })).toStrictEqual([{ text: 1 }, undefined]);
+		});
+
+		it("has no badge without changes", () => {
+			expect(badges()).toStrictEqual([undefined, undefined]);
+		});
+	});
+});

panel/src/components/Navigation/ModelTabs.vue

@@ -25,19 +25,8 @@ export default {
 			const changes = Object.keys(this.diff);
 
 			return this.tabs.map((tab) => {
-				// collect all fields per tab
-				const fields = [];
-
-				for (const column in tab.columns) {
-					for (const section in tab.columns[column].sections) {
-						if (tab.columns[column].sections[section].type === "fields") {
-							for (const field in tab.columns[column].sections[section]
-								.fields) {
-								fields.push(field);
-							}
-						}
-					}
-				}
+				// all field names of the tab
+				const fields = tab.fields ?? [];
 
 				// get count of changed fields in this tab
 				const changesInTab = fields.filter((field) =>

panel/src/components/Sections/FieldsSection.vue

@@ -26,6 +26,10 @@
 import SectionMixin from "@/mixins/section.js";
 
 /**
+ * A `fields` section is unwrapped into its fields on the
+ * blueprint level and never reaches the Panel anymore.
+ *
+ * @deprecated 6.0.0
  * @copyright Bastian Allgeier
  * @license   https://getkirby.com/license
  */

panel/src/components/Sections/Sections.vue

@@ -51,6 +51,10 @@
 
 <script>
 /**
+ * Sections are converted to fields on the blueprint level.
+ * Model views render `k-model-form` instead.
+ *
+ * @deprecated 6.0.0
  * @copyright Bastian Allgeier
  * @license   https://getkirby.com/license
  */

panel/src/components/Views/Files/FileView.vue

@@ -43,17 +43,17 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
+			:diff="diff"
 			:empty="
 				$panel.config.debug
 					? $panel.html($t('file.blueprint', { blueprint: $esc(blueprint) }))
 					: null
 			"
 			:lock="lock"
-			:parent="api"
-			:tab="tab"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

panel/src/components/Views/Pages/PageView.vue

@@ -36,17 +36,17 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
+			:diff="diff"
 			:empty="
 				$panel.config.debug
 					? $panel.html($t('page.blueprint', { blueprint: $esc(blueprint) }))
 					: null
 			"
 			:lock="lock"
-			:parent="api"
-			:tab="tab"
 			@input="onInput"
 			@submit="onSubmit"
 		/>