diff --git a/panel/src/components/Views/ModelView.vue b/panel/src/components/Views/ModelView.vue index 6e847be6d6..bfb21b3ba2 100644 --- a/panel/src/components/Views/ModelView.vue +++ b/panel/src/components/Views/ModelView.vue @@ -62,6 +62,16 @@ export default { return this.lock.modified; } }, + watch: { + api: { + handler(newValue, oldValue) { + if (newValue !== oldValue) { + this.supportLegacyChanges(); + } + }, + immediate: true + } + }, mounted() { this.$events.on("beforeunload", this.onBeforeUnload); this.$events.on("content.save", this.onContentSave); @@ -113,6 +123,24 @@ export default { e?.preventDefault?.(); this.onSubmit(); }, + async supportLegacyChanges() { + const changes = this.$panel.content.legacyChanges(this.api); + + if (!changes) { + return; + } + + this.$panel.view.props.content = { + ...this.$panel.view.props.originals, + ...changes + }; + + // store the changes from local storage + await this.$panel.content.save(this.$panel.view.props.content, this.api); + + // remove the local storage key + window.localStorage.removeItem(this.$panel.content.legacyId(this.api)); + }, toNext(e) { if (this.next && e.target.localName === "body") { this.$go(this.next.link); diff --git a/panel/src/panel/content.js b/panel/src/panel/content.js index 98f2306b20..918008965a 100644 --- a/panel/src/panel/content.js +++ b/panel/src/panel/content.js @@ -88,6 +88,31 @@ export default (panel) => { */ isProcessing: false, + /** + * Returns legacy content changes, stored in + * localStorage if they exist. + */ + legacyChanges(api) { + if (this.isCurrent(api ?? panel.view.props.api) === false) { + throw new Error("The legacy state cannot be detected for another view"); + } + + const data = window.localStorage.getItem(this.legacyId(api)); + + if (!data) { + return null; + } + + return JSON.parse(data).changes; + }, + + /** + * Returns the localstorage id for legacy changes + */ + legacyId(api) { + return `kirby$content$${api}?language=${panel.language.code}`; + }, + /** * Get the lock state for the current view * @param {String} api