refact: New ModelForm component

Author: bastianallgeier

panel/src/components/Forms/ModelForm.vue

@@ -0,0 +1,57 @@
+<template>
+	<form
+		class="k-model-form"
+		method="POST"
+		@submit.prevent="$emit('submit', $event)"
+	>
+		<k-grid variant="columns">
+			<k-column
+				v-for="(column, columnIndex) in columns"
+				:key="api + '-column-' + columnIndex"
+				:width="column.width"
+				:sticky="column.sticky"
+			>
+				<k-fieldset
+					ref="fields"
+					:disabled="lock && lock.state === 'lock'"
+					:fields="fieldsWithAdditionalData(column.fields)"
+					:value="content"
+					:validate="true"
+					@input="$emit('input', $event)"
+					@submit="$emit('submit', $event)"
+				/>
+			</k-column>
+		</k-grid>
+	</form>
+</template>
+
+<script>
+export default {
+	props: {
+		api: String,
+		columns: Object,
+		content: Object,
+		diff: Object,
+		lock: [Boolean, Object]
+	},
+	emits: ["input", "submit"],
+	methods: {
+		fieldsWithAdditionalData(fields) {
+			const result = {};
+
+			for (const name in fields) {
+				result[name] = {
+					...fields[name],
+					endpoints: {
+						field: this.api + "/fields/" + name,
+						model: this.api
+					},
+					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";
@@ -22,6 +23,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);

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

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

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

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

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

@@ -37,13 +37,12 @@
 
 		<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
 
-		<k-sections
-			:blueprint="blueprint"
+		<k-model-form
+			:api="api"
+			:columns="tab.columns"
 			:content="content"
-			:empty="$panel.config.debug ? $t('site.blueprint') : null"
+			:diff="diff"
 			:lock="lock"
-			:tab="tab"
-			parent="site"
 			@input="onInput"
 			@submit="onSubmit"
 		/>

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

@@ -21,17 +21,16 @@
 		</header>
 
 		<div class="k-preview-form-body">
-			<k-sections
-				:blueprint="blueprint"
+			<k-model-form
+				:api="api"
+				:columns="tab.columns"
 				:content="content"
 				:empty="
 					$panel.config.debug
 						? $t('page.blueprint', { blueprint: $esc(blueprint) })
 						: null
 				"
 				:lock="lock"
-				:parent="api"
-				:tab="tab"
 				@input="$emit('input', $event)"
 				@submit="$emit('submit', $event)"
 			/>

panel/src/components/Views/Users/UserView.vue

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