feat: first working version of the EditorUI using the layouts (WIP)

Author: did

app/controllers/concerns/maglev/fetchers_concern.rb

@@ -35,10 +35,10 @@ def fetch_maglev_page
       )
     end
 
-    def fetch_maglev_page_sections(page_sections = nil)
+    def fetch_maglev_page_sections(sections_content = nil)
       @fetch_maglev_page_sections ||= maglev_services.get_page_sections.call(
         page: fetch_maglev_page,
-        page_sections: page_sections,
+        sections_content: sections_content,
         locale: content_locale
       )
     end

app/controllers/maglev/api/pages_controller.rb

@@ -49,6 +49,7 @@ def site_params
       end
 
       def persist!(page)
+        # TODO: don't use the PersistPage anymore, just use the AR methods
         services.persist_page.call(
           page: page,
           page_attributes: page_params,

app/controllers/maglev/api/sections_content_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Api
+    class SectionsContentController < ::Maglev::ApiController
+      before_action :set_page
+
+      def show
+        @sections_content = maglev_services.get_page_sections.call(
+          page: @page,
+          locale: content_locale
+        )
+      end
+
+      def update
+        @stores = services.persist_sections_content.call(
+          site: maglev_site,
+          page: @page,
+          sections_content: sections_content_params
+        )
+      end
+
+      private
+
+      def set_page
+        @page = resources.find(params[:page_id])
+      end
+
+      def sections_content_params
+        params.to_unsafe_hash[:sections_content]
+      end
+
+      def resources
+        ::Maglev::Page
+      end
+    end
+  end
+end

app/controllers/maglev/editor_controller.rb

@@ -13,7 +13,7 @@ class EditorController < ApplicationController
     before_action :set_content_locale, only: :show
 
     helper_method :maglev_home_page_id
-
+    
     def show
       fetch_maglev_page_content
       render layout: nil

app/controllers/maglev/page_preview_controller.rb

@@ -32,7 +32,7 @@ def fetch_maglev_site
     def fetch_maglev_page_sections
       return super if action_name == 'index'
 
-      super(JSON.parse(params[:page_sections]))
+      super(JSON.parse(params[:sections_content]))
     end
 
     def maglev_rendering_mode

app/frontend/editor/components/header-nav/save-button.vue

@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     async save() {
-      await this.$store.dispatch('persistPage')
+      await this.$store.dispatch('persistSectionsContent')
     },
   },
 }

app/frontend/editor/components/section-highlighter/bottom-actions.vue

@@ -6,7 +6,7 @@
     <router-link
       :to="{
         name: 'addSectionAfter',
-        params: { sectionId: hoveredSection.sectionId },
+        params: { layoutGroupId, sectionId }
       }"
       custom
       v-slot="{ navigate }"
@@ -35,6 +35,12 @@ export default {
       const { definition } = this.hoveredSection
       return definition.insertButton
     },
+    sectionId() {
+      return this.hoveredSection.sectionId
+    },
+    layoutGroupId() {
+      return this.currentSectionLayoutGroupIdMap[this.sectionId]
+    },
   },
 }
 </script>

app/frontend/editor/components/sections-content/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="divide-y">
+    <section-list 
+      v-for="layoutGroup in sectionsContent"
+      :key="['layout-group', layoutGroup.id].join('-')"
+      :layout-group="layoutGroup"
+      class="py-2"
+    />
+  </div>
+</template>
+
+<script>
+import SectionList from './list.vue'
+
+export default {
+  name: 'SectionsContent',
+  components: { SectionList },
+  computed: {
+    sectionsContent() {
+      return this.currentSectionsContent
+    },
+  }
+}
+</script>

app/frontend/editor/components/section-list/list-item.vue renamed to app/frontend/editor/components/sections-content/list-item.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <div v-if="isListEmpty" class="text-center mt-8">
+  <div class="space-y-4">
+    <h3 class="uppercase text-gray-800 antialiased text-xs font-semibold sticky top-0 bg-white pt-2">
+      {{ layoutGroup.label }}
+    </h3>
+    <div v-if="isListEmpty" class="text-center">
       <span class="text-gray-800">{{ $t('sections.listPane.empty') }}</span>
     </div>
     <draggable :list="list" @end="onSortEnd" v-bind="dragOptions" v-else>
@@ -15,11 +18,20 @@
         />
       </transition-group>
     </draggable>
+
+    <p class="flex justify-center">
+      <router-link
+        :to="{ name: 'addSection', params: { layoutGroupId } }"
+        class="flex items-center space-x-1 transition-colors duration-200 text-gray-500 hover:text-editor-primary">
+        <uikit-icon name="add-box-line" size="1rem" />
+        <span>Add section</span>
+      </router-link>
+    </p>
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import draggable from 'vuedraggable'
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
 import ListItem from './list-item.vue'
@@ -28,12 +40,18 @@ export default {
   name: 'SectionList',
   mixins: [GroupedDropdownsMixin],
   components: { draggable, ListItem },
+  props: {
+    layoutGroup: { type: Object, required: true },
+  },
   computed: {
     list() {
-      return this.currentSectionList
+      return this.layoutGroup.sections
     },
     isListEmpty() {
-      return this.currentSectionList.length === 0
+      return this.list.length === 0
+    },
+    layoutGroupId() {
+      return this.layoutGroup.id
     },
     dragOptions() {
       return {
@@ -48,6 +66,7 @@ export default {
     ...mapActions(['moveSection']),
     onSortEnd(event) {
       this.moveSection({
+        layoutGroupId:this.layoutGroupId,
         from: event.oldIndex,
         to: event.newIndex,
       })

app/frontend/editor/components/section-list/index.vue renamed to app/frontend/editor/components/sections-content/list.vue

@@ -7,19 +7,6 @@
       <div class="w-6 bg-gray-200 rounded h-48 my-6"></div>
     </div>
     <ol class="divide-y divide-gray-300 px-4" v-else>
-      <li>
-        <router-link
-          :to="{ name: 'addSection' }"
-          class="flex justify-center py-5 -ml-4 -mr-4 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isAddSectionPaneActive,
-            'bg-editor-primary bg-opacity-5': isAddSectionPaneActive,
-          }"
-          v-tooltip.right="$t('sidebarNav.addNewSectionTooltip')"
-        >
-          <uikit-icon name="add-box-line" size="1.5rem" />
-        </router-link>
-      </li>
       <li>
         <router-link
           :to="{ name: 'listSections' }"

app/frontend/editor/components/sidebar-nav.vue

@@ -16,7 +16,8 @@
           v-for="section in category.children"
           :key="section.id"
           :section="section"
-          :insertAfter="insertAfter"
+          :layout-group-id="layoutGroupId"
+          :insert-after="insertAfter"
         />
 
         <div
@@ -37,6 +38,7 @@ export default {
   name: 'ThemeSectionList',
   components: { ListItem },
   props: {
+    layoutGroupId: { type: String, required: true },
     insertAfter: { type: String },
   },
   data() {

app/frontend/editor/components/theme-section-list/index.vue

@@ -42,6 +42,7 @@ export default {
   name: 'ThemeSectionListItem',
   props: {
     section: { type: Object, required: true, default: null },
+    layoutGroupId: { type: String, required: true },
     insertAfter: { type: String },
   },
   data() {
@@ -63,6 +64,7 @@ export default {
     select() {
       if (!this.canBeAdded) return
       this.addSection({
+        layoutGroupId: this.layoutGroupId,
         sectionDefinition: this.section,
         insertAt: this.insertAfter,
       }).then(() => {

app/frontend/editor/components/theme-section-list/list-item.vue

@@ -30,7 +30,7 @@
           </div>
 
           <div class="ml-auto">
-            <router-link :to="{ name: 'editPage' }">
+            <router-link :to="closeRouteTo">
               <uikit-icon name="ri-close-circle-line" />
             </router-link>
           </div>
@@ -75,7 +75,8 @@ export default {
     overflowY: { type: Boolean, default: true },
     maxWidthPane: { type: Boolean, default: false },
     withPreTitle: { type: Boolean, default: false },
-  },
+    closeRouteTo: { type: Object, default: () => ({ name: 'editPage' }) }
+  }
 }
 </script>
 

app/frontend/editor/layouts/slide-pane.vue

@@ -43,12 +43,19 @@ Vue.mixin({
     currentSectionI18nScope() {
       return `${this.currentI18nScope}.sections.${this.currentSection.type}`
     },
+    currentSectionsContent() {
+      return this.$store.getters.sectionsContent
+    },
     currentSectionList() {
-      return this.$store.getters.sectionList
+      console.log('🚨🚨🚨 currentSectionList is deprecated')
+      return []; //this.$store.getters.sectionList
     },
     currentSectionContent() {
       return this.$store.getters.sectionContent
     },
+    currentSectionLayoutGroupIdMap() {
+      return this.$store.getters.sectionLayoutGroupIdMap
+    },
     currentSectionDefinition() {
       return this.$store.state.sectionDefinition
     },
@@ -88,6 +95,9 @@ Vue.mixin({
     hasMultipleLocales() {
       return this.$store.state.site.locales.length > 1
     },
+    hasSections() {
+      return Object.keys(this.$store.state.sections).length > 0
+    },
     currentContent() {
       return this.$store.getters.content
     },

app/frontend/editor/mixins/global.js

@@ -5,7 +5,7 @@ import SectionListPane from '@/views/sections/list-pane.vue'
 
 export default [
   {
-    path: 'add-section',
+    path: 'add-section/:layoutGroupId',
     name: 'addSection',
     components: {
       default: PagePreview,
@@ -17,7 +17,7 @@ export default [
     },
   },
   {
-    path: 'add-section/:sectionId',
+    path: 'add-section/:layoutGroupId/:sectionId',
     name: 'addSectionAfter',
     components: {
       default: PagePreview,

app/frontend/editor/router/routes/section.js

@@ -2,6 +2,7 @@ import * as api from './api'
 import buildSiteService from './site'
 import * as theme from './theme'
 import buildPageService from './page'
+import buildSectionsContentService from './sections-content'
 import buildCollectionItemService from './collection-item'
 import buildImageService from './image'
 import * as section from './section'
@@ -13,6 +14,7 @@ export default {
   site: buildSiteService(api),
   theme,
   page: buildPageService(api),
+  sectionsContent: buildSectionsContentService(api),
   section,
   block,
   image: buildImageService(api),

app/frontend/editor/services/index.js

@@ -4,12 +4,13 @@ import store from '@/store'
 let iframe = null
 
 // === Section related actions ===
-export const addSection = (content, section, insertAt) => {
-  postMessage('section:add', { content, section, insertAt })
+export const addSection = (layoutGroupId, content, section, insertAt) => {
+  postMessage('section:add', { layoutGroupId, content, section, insertAt })
 }
 
-export const moveSection = (content, sectionId, targetSectionId, direction) => {
+export const moveSection = (layoutGroupId, content, sectionId, targetSectionId, direction) => {
   postMessage('section:move', {
+    layoutGroupId,
     content,
     sectionId,
     targetSectionId,
@@ -18,29 +19,29 @@ export const moveSection = (content, sectionId, targetSectionId, direction) => {
 }
 
 // the editor modifies the content of a section setting
-export const updateSection = (content, section, change) => {
-  postMessage('section:update', { content, section, change })
+export const updateSection = (layoutGroupId, content, section, change) => {
+  postMessage('section:update', { layoutGroupId, content, section, change })
 }
 
-export const removeSection = (sectionId) => {
-  postMessage('section:remove', { sectionId })
+export const removeSection = (layoutGroupId, sectionId) => {
+  postMessage('section:remove', { layoutGroupId, sectionId })
 }
 
 // === Block related actions ===
-export const addBlock = (content, section, sectionBlock) => {
-  postMessage('block:add', { content, section, sectionBlock })
+export const addBlock = (layoutGroupId, content, section, sectionBlock) => {
+  postMessage('block:add', { layoutGroupId, content, section, sectionBlock })
 }
 
-export const moveBlock = (content, section) => {
-  postMessage('block:move', { content, section })
+export const moveBlock = (layoutGroupId, content, section) => {
+  postMessage('block:move', { layoutGroupId, content, section })
 }
 
-export const updateBlock = (content, section, sectionBlock, change) => {
-  postMessage('block:update', { content, section, sectionBlock, change })
+export const updateBlock = (layoutGroupId, content, section, sectionBlock, change) => {
+  postMessage('block:update', { layoutGroupId, content, section, sectionBlock, change })
 }
 
-export const removeBlock = (content, section, sectionBlockId) => {
-  postMessage('block:remove', { content, section, sectionBlockId })
+export const removeBlock = (layoutGroupId, content, section, sectionBlockId) => {
+  postMessage('block:remove', { layoutGroupId, content, section, sectionBlockId })
 }
 
 // === Other actions ===