feat: reload the preview if the layoutId has changed

Author: did

app/frontend/editor/components/page/edit.vue

@@ -58,6 +58,9 @@ export default {
         },
       ]
     },
+    hasLayoutIdChanged() {
+      return this.editedPage.layoutId !== this.page.layoutId
+    }
   },
   methods: {
     updatePage() {
@@ -74,6 +77,9 @@ export default {
             ...attributes,
             lockVersion: headers['page-lock-version'],
           })
+
+          if (this.hasLayoutIdChanged)
+            this.$store.dispatch('reloadPage', { id: pageId })
         })
         .catch(({ response: { status, data } }) => {
           console.log('[Maglev] could not update the page', status)

app/frontend/editor/design/components/modal.scss

@@ -20,7 +20,7 @@
 }
 
 .modal-body {
-  @apply flex flex-col flex-1 overflow-y-visible pt-4;
+  @apply flex flex-col flex-1 overflow-y-auto pt-4;
 }
 
 /*

app/frontend/editor/services/live-preview.js

@@ -67,6 +67,11 @@ export const start = (newIframe) => {
   listenMessages()
 }
 
+export const reload = () => {
+  if (!iframe) return
+  iframe.contentWindow.location.reload()
+}
+
 const listenMessages = () => {
   window.addEventListener('message', ({ data: { type, ...data } }) => {
     // a message MUST have a type

app/frontend/editor/store/actions/page.js

@@ -4,12 +4,10 @@ export default (services) => ({
   // editPage : Action triggered when the user wants to edit another page
   // or to change the locale of the current page.
   async editPage({ state, dispatch }, { id, locale }) {
-    console.log('editPage', id, locale)
-
     // display the loader
     dispatch('resetPreview')
 
-    if (state.locale !== locale) {
+    if (locale && state.locale !== locale) {
       dispatch('setLocale', locale)
       await Promise.all([dispatch('fetchPage', id), dispatch('fetchSite')])
     } else await dispatch('fetchPage', id)
@@ -21,6 +19,13 @@ export default (services) => ({
   setPage({ commit }, page) {
     commit('SET_PAGE', page)
   },
+
+  // Reload a page: get fresh content + reload the preview iframe
+  async reloadPage({ state, dispatch }, { id }) {
+    await dispatch('editPage', { id })
+    services.livePreview.reload()
+  },
+
   // Fetch a page from an id (or a path)
   async fetchPage({ commit, state: { site } }, id) {
     return services.page