Merge pull request #6799 from getkirby/v5/changes/content

Improvements for the content.js module

panel/lab/components/formcontrols/index.vue

@@ -15,7 +15,7 @@
 					/>
 
 					<k-form-controls
-						:is-unsaved="isUnsaved"
+						:has-changes="hasChanges"
 						:is-locked="isLocked"
 						editor="editor@getkirby.com"
 						modified="2024-10-01T17:00:00"
@@ -35,9 +35,9 @@
 			>
 				<k-input
 					type="toggle"
-					:value="isUnsaved"
-					text="is-unsaved"
-					@input="isUnsaved = $event"
+					:value="hasChanges"
+					text="has-changes"
+					@input="hasChanges = $event"
 				/>
 				<k-input
 					type="toggle"
@@ -48,9 +48,9 @@
 			</k-grid>
 		</k-lab-example>
 
-		<k-lab-example label="Unsaved">
+		<k-lab-example label="Changes">
 			<k-form-controls
-				:is-unsaved="true"
+				:has-changes="true"
 				editor="editor@getkirby.com"
 				modified="2024-10-01T17:00:00"
 				preview="https://getkirby.com"
@@ -75,8 +75,8 @@
 export default {
 	data() {
 		return {
-			isLocked: false,
-			isUnsaved: false
+			hasChanges: false,
+			isLocked: false
 		};
 	},
 	methods: {

panel/src/api/index.js

@@ -44,7 +44,7 @@ export default (panel) => {
 		api.requests.push(id);
 
 		// start the loader if it's not a silent request
-		if (silent === false) {
+		if (silent === false && options.silent !== true) {
 			panel.isLoading = true;
 		}
 

panel/src/components/Forms/FormControls.vue

@@ -58,8 +58,8 @@
 export default {
 	props: {
 		editor: String,
+		hasChanges: Boolean,
 		isLocked: Boolean,
-		isUnsaved: Boolean,
 		modified: [String, Date],
 		/**
 		 * Preview URL for changes
@@ -81,7 +81,7 @@ export default {
 				];
 			}
 
-			if (this.isUnsaved === true) {
+			if (this.hasChanges === true) {
 				return [
 					{
 						theme: "notice",

panel/src/components/Navigation/ModelTabs.vue

@@ -8,6 +8,7 @@
  */
 export default {
 	props: {
+		changes: Object,
 		tab: String,
 		tabs: {
 			type: Array,
@@ -16,7 +17,7 @@ export default {
 	},
 	computed: {
 		withBadges() {
-			const changes = Object.keys(this.$panel.content.changes);
+			const changes = Object.keys(this.changes);
 
 			return this.tabs.map((tab) => {
 				// collect all fields per tab

panel/src/components/View/Buttons/LanguagesDropdown.vue

@@ -67,7 +67,7 @@ export default {
 			// any other backend request that would update `hasChanges`
 			if (this.hasChanges || this.$panel.content.hasChanges) {
 				return {
-					theme: this.$panel.content.lock.isLocked ? "red" : "orange"
+					theme: this.$panel.content.isLocked() ? "red" : "orange"
 				};
 			}
 

panel/src/components/View/Buttons/SettingsButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<k-view-button
 		v-bind="$props"
-		:disabled="$panel.content.isLocked"
+		:disabled="$panel.content.isLocked()"
 		@action="$emit('action', $event)"
 	/>
 </template>

panel/src/components/View/Buttons/StatusButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<k-view-button
 		v-bind="$props"
-		:disabled="disabled || $panel.content.isLocked"
+		:disabled="disabled || $panel.content.isLocked()"
 	/>
 </template>
 

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

@@ -21,8 +21,8 @@
 				<k-view-buttons :buttons="buttons" @action="onAction" />
 				<k-form-controls
 					:editor="editor"
+					:has-changes="hasChanges"
 					:is-locked="isLocked"
-					:is-unsaved="isUnsaved"
 					:modified="modified"
 					@discard="onDiscard"
 					@submit="onSubmit"
@@ -38,7 +38,7 @@
 			@submit="onSubmit"
 		/>
 
-		<k-model-tabs :tab="tab.name" :tabs="tabs" />
+		<k-model-tabs :changes="changes" :tab="tab.name" :tabs="tabs" />
 
 		<k-sections
 			:blueprint="blueprint"

panel/src/components/Views/ModelView.vue

@@ -1,5 +1,5 @@
 <script>
-import throttle from "@/helpers/throttle.js";
+import { length } from "@/helpers/object";
 
 /**
  * @internal
@@ -37,92 +37,91 @@ export default {
 		},
 		uuid: String
 	},
+	data() {
+		return {
+			isSaved: true
+		};
+	},
 	computed: {
 		changes() {
-			return this.$panel.content.changes;
+			return this.$panel.content.changes(this.api);
 		},
 		editor() {
 			return this.lock.user.email;
 		},
+		hasChanges() {
+			return length(this.changes) > 0;
+		},
 		hasTabs() {
 			return this.tabs.length > 1;
 		},
 		isLocked() {
 			return this.lock.isLocked;
 		},
-		isUnsaved() {
-			return this.$panel.content.hasChanges;
-		},
 		modified() {
 			return this.lock.modified;
-		},
-		protectedFields() {
-			return [];
 		}
 	},
 	mounted() {
-		this.autosave = throttle(this.autosave, 1000, {
-			leading: true,
-			trailing: true
-		});
-
-		this.$events.on("model.reload", this.$reload);
+		this.$events.on("beforeunload", this.onBeforeUnload);
+		this.$events.on("content.save", this.onContentSave);
 		this.$events.on("keydown.left", this.toPrev);
 		this.$events.on("keydown.right", this.toNext);
-		this.$events.on("view.save", this.onSave);
+		this.$events.on("model.reload", this.$reload);
+		this.$events.on("view.save", this.onViewSave);
 	},
 	destroyed() {
-		this.$events.off("model.reload", this.$reload);
+		this.$events.off("beforeunload", this.onBeforeUnload);
+		this.$events.off("content.save", this.onContentSave);
 		this.$events.off("keydown.left", this.toPrev);
 		this.$events.off("keydown.right", this.toNext);
-		this.$events.off("view.save", this.onSave);
+		this.$events.off("model.reload", this.$reload);
+		this.$events.off("view.save", this.onViewSave);
 	},
 	methods: {
-		autosave() {
-			if (this.isLocked === true) {
-				return false;
+		onBeforeUnload(e) {
+			if (this.$panel.content.isProcessing === true || this.isSaved === false) {
+				e.preventDefault();
+				e.returnValue = "";
 			}
-
-			this.$panel.content.save();
 		},
-		async onDiscard() {
-			if (this.isLocked === true) {
-				return false;
+		onContentSave({ api }) {
+			if (api === this.api) {
+				this.isSaved = true;
 			}
-
-			await this.$panel.content.discard();
-			this.$panel.view.reload();
+		},
+		async onDiscard() {
+			await this.$panel.content.discard(this.api);
+			this.$panel.view.refresh();
 		},
 		onInput(values) {
-			if (this.isLocked === true) {
-				return false;
-			}
+			// update the content for the current view
+			// this will also refresh the content prop
+			this.$panel.content.update(values, this.api);
+		},
+		async onSubmit() {
+			await this.$panel.content.publish(this.content, this.api);
 
-			this.$panel.content.update(values);
-			this.autosave();
+			this.$panel.notification.success();
+			this.$events.emit("model.update");
+
+			// the view needs to be refreshed to get an updated set of props
+			// this will also rerender sections if needed
+			await this.$panel.view.refresh();
 		},
-		onSave(e) {
+		onViewSave(e) {
 			e?.preventDefault?.();
 			this.onSubmit();
 		},
-		async onSubmit(values = {}) {
-			if (this.isLocked === true) {
-				return false;
+		toNext(e) {
+			if (this.next && e.target.localName === "body") {
+				this.$go(this.next.link);
 			}
-
-			this.$panel.content.update(values);
-			await this.$panel.content.publish();
-			await this.$panel.view.refresh();
 		},
 		toPrev(e) {
 			if (this.prev && e.target.localName === "body") {
 				this.$go(this.prev.link);
 			}
-		},
-		toNext(e) {
-			if (this.next && e.target.localName === "body") {
-				this.$go(this.next.link);
-			}
 		}
 	}
 };

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

@@ -21,8 +21,8 @@
 				<k-view-buttons :buttons="buttons" />
 				<k-form-controls
 					:editor="editor"
+					:has-changes="hasChanges"
 					:is-locked="isLocked"
-					:is-unsaved="isUnsaved"
 					:modified="modified"
 					:preview="permissions.preview ? api + '/preview/compare' : false"
 					@discard="onDiscard"
@@ -31,7 +31,7 @@
 			</template>
 		</k-header>
 
-		<k-model-tabs :tab="tab.name" :tabs="tabs" />
+		<k-model-tabs :changes="changes" :tab="tab.name" :tabs="tabs" />
 
 		<k-sections
 			:blueprint="blueprint"
@@ -53,11 +53,6 @@ export default {
 	extends: ModelView,
 	props: {
 		title: String
-	},
-	computed: {
-		protectedFields() {
-			return ["title"];
-		}
 	}
 };
 </script>

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

@@ -17,8 +17,8 @@
 				<k-view-buttons :buttons="buttons" />
 				<k-form-controls
 					:editor="editor"
+					:has-changes="hasChanges"
 					:is-locked="isLocked"
-					:is-unsaved="isUnsaved"
 					:modified="modified"
 					:preview="api + '/preview/compare'"
 					@discard="onDiscard"
@@ -27,7 +27,7 @@
 			</template>
 		</k-header>
 
-		<k-model-tabs :tab="tab.name" :tabs="tabs" />
+		<k-model-tabs :changes="changes" :tab="tab.name" :tabs="tabs" />
 
 		<k-sections
 			:blueprint="blueprint"

panel/src/components/Views/PreviewView.vue

@@ -80,16 +80,16 @@
 						/>
 						<k-form-controls
 							:editor="editor"
+							:has-changes="hasChanges"
 							:is-locked="isLocked"
-							:is-unsaved="isUnsaved"
 							:modified="modified"
 							size="sm"
 							@discard="onDiscard"
 							@submit="onSubmit"
 						/>
 					</k-button-group>
 				</header>
-				<iframe v-if="isUnsaved" :src="src.changes"></iframe>
+				<iframe v-if="hasChanges" :src="src.changes"></iframe>
 				<k-empty v-else>
 					{{ $t("lock.unsaved.empty") }}
 					<k-button icon="edit" variant="filled" :link="back">
@@ -153,28 +153,12 @@ export default {
 
 			this.$panel.view.open(this.link + "/preview/" + mode);
 		},
-		async onDiscard() {
-			if (this.isLocked === true) {
-				return false;
-			}
-
-			await this.$panel.content.discard();
-			await this.$panel.view.reload();
-		},
 		onExit() {
 			if (this.$panel.overlays().length > 0) {
 				return;
 			}
 
 			this.$panel.view.open(this.link);
-		},
-		async onSubmit() {
-			if (this.isLocked === true) {
-				return false;
-			}
-
-			await this.$panel.content.publish();
-			await this.$panel.view.reload();
 		}
 	}
 };

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

@@ -26,8 +26,8 @@
 				<k-view-buttons :buttons="buttons" />
 				<k-form-controls
 					:editor="editor"
+					:has-changes="hasChanges"
 					:is-locked="isLocked"
-					:is-unsaved="isUnsaved"
 					:modified="modified"
 					@discard="onDiscard"
 					@submit="onSubmit"
@@ -49,7 +49,7 @@
 			:role="role"
 		/>
 
-		<k-model-tabs :tab="tab.name" :tabs="tabs" />
+		<k-model-tabs :changes="changes" :tab="tab.name" :tabs="tabs" />
 
 		<k-sections
 			:blueprint="blueprint"