{{ item.name }}
+
+ {{ item.layoutGroupLabel }}
+
@@ -76,7 +82,7 @@ export default {
},
hasPageSections() {
return !this.isBlank(this.page?.sectionNames)
- },
+ }
},
methods: {
async fetchPageSectionNames() {
diff --git a/app/frontend/editor/components/page/edit.vue b/app/frontend/editor/components/page/edit.vue
index a80b419b..8e422cbc 100644
--- a/app/frontend/editor/components/page/edit.vue
+++ b/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)
diff --git a/app/frontend/editor/components/page/form/main.vue b/app/frontend/editor/components/page/form/main.vue
index ec62b71b..c71bb1d0 100644
--- a/app/frontend/editor/components/page/form/main.vue
+++ b/app/frontend/editor/components/page/form/main.vue
@@ -15,6 +15,15 @@
v-if="!isPageIndex || !page.id"
/>
+
-
-
-
-
-
-
-
-
-
-
diff --git a/app/frontend/editor/components/section-mirror-setup/actions.vue b/app/frontend/editor/components/section-mirror-setup/actions.vue
new file mode 100644
index 00000000..bee44666
--- /dev/null
+++ b/app/frontend/editor/components/section-mirror-setup/actions.vue
@@ -0,0 +1,25 @@
+
+
- {{ $t('sections.listPane.empty') }}
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/frontend/editor/components/section-mirror-setup/index.vue b/app/frontend/editor/components/section-mirror-setup/index.vue
new file mode 100644
index 00000000..d5b4f474
--- /dev/null
+++ b/app/frontend/editor/components/section-mirror-setup/index.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
diff --git a/app/frontend/editor/components/section-mirror-setup/selector.vue b/app/frontend/editor/components/section-mirror-setup/selector.vue
new file mode 100644
index 00000000..4379e918
--- /dev/null
+++ b/app/frontend/editor/components/section-mirror-setup/selector.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+ {{ page.title }}
+
+
+
+
+
+
+ {{ pageSection.name }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/frontend/editor/components/section-pane/index.vue b/app/frontend/editor/components/section-pane/index.vue
index bb026af5..270dec71 100644
--- a/app/frontend/editor/components/section-pane/index.vue
+++ b/app/frontend/editor/components/section-pane/index.vue
@@ -11,6 +11,7 @@
diff --git a/app/frontend/editor/components/section-pane/mirror-input.vue b/app/frontend/editor/components/section-pane/mirror-input.vue
new file mode 100644
index 00000000..c5e03378
--- /dev/null
+++ b/app/frontend/editor/components/section-pane/mirror-input.vue
@@ -0,0 +1,49 @@
+
+
+ {{ item.title }}
+
+ {{ item.path | formatPath }}
+
+
+
+
+ {{ item.name }}
+
+ {{ item.layoutGroupLabel }}
+
+
+
+
+
+
+
+
diff --git a/app/frontend/editor/components/section-pane/setting-list.vue b/app/frontend/editor/components/section-pane/setting-list.vue
index 3a4827de..9ec9aa68 100644
--- a/app/frontend/editor/components/section-pane/setting-list.vue
+++ b/app/frontend/editor/components/section-pane/setting-list.vue
@@ -1,27 +1,32 @@
-
+
+
+ {{ $t('mirrorSectionSetup.protectedMessage.title') }}
+{{ $t('mirrorSectionSetup.protectedMessage.message') }}
+
+
diff --git a/app/frontend/editor/components/sections-content/index.vue b/app/frontend/editor/components/sections-content/index.vue
new file mode 100644
index 00000000..bc6a34b2
--- /dev/null
+++ b/app/frontend/editor/components/sections-content/index.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/frontend/editor/components/section-list/list-item.vue b/app/frontend/editor/components/sections-content/list-item.vue
similarity index 52%
rename from app/frontend/editor/components/section-list/list-item.vue
rename to app/frontend/editor/components/sections-content/list-item.vue
index 81475773..0d1024d3 100644
--- a/app/frontend/editor/components/section-list/list-item.vue
+++ b/app/frontend/editor/components/sections-content/list-item.vue
@@ -1,13 +1,22 @@
-
- {{ name | truncate(40) }}
-
+
+
+
+ {{ name | truncate(40) }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/frontend/editor/components/sidebar-nav.vue b/app/frontend/editor/components/sidebar-nav.vue
index 568e8914..9d36d785 100644
--- a/app/frontend/editor/components/sidebar-nav.vue
+++ b/app/frontend/editor/components/sidebar-nav.vue
@@ -7,19 +7,6 @@
+
+
+
+ + {{ layoutGroup.label }} +
+
+
+ {{ $t('sections.listPane.empty.title') }}
+
+
-
-
-
-
- -- -
+
+ {{ $t('style.edit.submitButton') }}
+
+
+
![]()
{
@@ -70,7 +61,6 @@ export default {
})
},
imageLoaded() {
- // console.log('imageLoaded', this.section.name, event)
this.isImageLoaded = true
},
imageNotFound(event) {
diff --git a/app/frontend/editor/components/theme-section-list/mirror-button.vue b/app/frontend/editor/components/theme-section-list/mirror-button.vue
new file mode 100644
index 00000000..cc335b36
--- /dev/null
+++ b/app/frontend/editor/components/theme-section-list/mirror-button.vue
@@ -0,0 +1,44 @@
+
+
+
+
-
-
+
+
diff --git a/app/frontend/editor/components/theme-section-list/list-item.vue b/app/frontend/editor/components/theme-section-list/list-item.vue
index f38c1ec3..fba712be 100644
--- a/app/frontend/editor/components/theme-section-list/list-item.vue
+++ b/app/frontend/editor/components/theme-section-list/list-item.vue
@@ -1,10 +1,6 @@
{{ category.name }}
+ {{ category.label }}
{{ category.children.length }}
@@ -16,7 +16,8 @@
v-for="section in category.children"
:key="section.id"
:section="section"
- :insertAfter="insertAfter"
+ :layout-group-id="layoutGroupId"
+ :insert-after="insertAfter"
/>
+
+
+ {{ $t('themeSectionList.empty.title') }}
+{{ $t('themeSectionList.empty.message') }}
+
+
+
+
+
+
diff --git a/app/frontend/editor/layouts/slide-pane.vue b/app/frontend/editor/layouts/slide-pane.vue
index 4f1a12a4..16781387 100644
--- a/app/frontend/editor/layouts/slide-pane.vue
+++ b/app/frontend/editor/layouts/slide-pane.vue
@@ -17,6 +17,12 @@
+ + +
+
-
+
@@ -75,7 +81,9 @@ export default {
overflowY: { type: Boolean, default: true },
maxWidthPane: { type: Boolean, default: false },
withPreTitle: { type: Boolean, default: false },
- },
+ withCustomTitle: { type: Boolean, default: false },
+ closeRouteTo: { type: Object, default: () => ({ name: 'editPage' }) }
+ }
}
diff --git a/app/frontend/editor/locales/editor.ar.json b/app/frontend/editor/locales/editor.ar.json
index 3a5b142f..5cd1d2e8 100644
--- a/app/frontend/editor/locales/editor.ar.json
+++ b/app/frontend/editor/locales/editor.ar.json
@@ -258,5 +258,32 @@
}
}
}
+ },
+ "mirrorSectionSetup": {
+ "inputLabel": "تفعيل نسخ القسم",
+ "addButton": "...أو أضف قسماً منعكساً",
+ "tooltip": "هذا القسم تم نسخه من \"%{pageTitle}\".
سيتم تطبيق التغييرات التي تقوم بها هنا على جميع الصفحات التي تستخدم هذا القسم.",
+ "title": "إعداد نسخ القسم",
+ "errorMessage": "عذرًا! لا يمكنك نسخ هذا القسم. إما أنه موجود بالفعل في هذه الصفحة أو أنه يأتي من نفس الصفحة التي تقوم بتحريرها.",
+ "protectedMessage": {
+ "title": "هذا القسم محمي",
+ "message": "لتعديل محتواه، اذهب إلى الصفحة الأصلية حيث تم إنشاؤه."
+ },
+ "confirmButton": "إعداد",
+ "cancelButton": "إلغاء",
+ "page": {
+ "name": "صفحة",
+ "input": {
+ "label": "صفحة",
+ "placeholder": "اختر صفحة",
+ "searchPlaceholder": "بحث...",
+ "emptyLabel": "لم يتم العثور على صفحات"
+ },
+ "sectionInput": {
+ "label": "قسم",
+ "placeholder": "اختر قسماً",
+ "emptyLabel": "لم يتم اختيار أي قسم"
+ }
+ }
}
}
diff --git a/app/frontend/editor/locales/editor.en.json b/app/frontend/editor/locales/editor.en.json
index e6d24d2a..c9f403f5 100644
--- a/app/frontend/editor/locales/editor.en.json
+++ b/app/frontend/editor/locales/editor.en.json
@@ -23,7 +23,7 @@
},
"sidebarNav": {
"addNewSectionTooltip": "Add a new section at the bottom of the page",
- "managePageSectionsTooltip": "Re-order / delete the sections of the page",
+ "managePageSectionsTooltip": "Manange the sections composing the page",
"editStyleTooltip": "Change the style of your site",
"openImageLibraryTooltip": "Open the gallery of images",
"leaveEditorTooltip": "Back to the main app"
@@ -82,6 +82,7 @@
},
"title": "Title",
"path": "Path",
+ "layoutId": "Layout",
"visible": "Visible",
"visiblePlaceholder": "Show/Hide the page",
"seoTitle": "Meta title",
@@ -97,7 +98,10 @@
},
"listPane": {
"title": "Organize sections",
- "empty": "There are no sections."
+ "empty": {
+ "title": "No sections here yet.",
+ "button": "Add one to get started."
+ }
}
},
"sectionPane": {
@@ -118,13 +122,17 @@
}
},
"themeSectionList": {
+ "empty": {
+ "title": "No sections available for this area.",
+ "message": "This could be due to layout restrictions or because the section already exists and is recoverable."
+ },
"emptyCategory": "No sections"
},
"style": {
"edit": {
"title": "Style your site",
"submitButton": {
- "default": "Update style",
+ "default": "Persist style",
"inProgress": "Updating...",
"success": "Updated!",
"fail": "Fail!"
@@ -170,6 +178,33 @@
"title": "Icons",
"pickerTitle": "Pick an icon"
},
+ "mirrorSectionSetup": {
+ "inputLabel": "Enable section mirroring",
+ "addButton": "...or add a mirrored section",
+ "tooltip": "This section is mirrored from the \"%{pageTitle}\".
Changes made here will reflect across all pages using this section",
+ "title": "Setup mirror section",
+ "errorMessage": "Oops! You can’t mirror this section. It’s either already mirrored on this page, or it comes from the same page you're editing.",
+ "protectedMessage": {
+ "title": "This section is protected",
+ "message": "To edit its content, go to the original page where it was created."
+ },
+ "confirmButton": "Setup",
+ "cancelButton": "Cancel",
+ "page": {
+ "name": "Page",
+ "input": {
+ "label": "Page",
+ "placeholder": "Select a page",
+ "searchPlaceholder": "Search...",
+ "emptyLabel": "No pages found"
+ },
+ "sectionInput": {
+ "label": "Section",
+ "placeholder": "Select a section",
+ "emptyLabel": "No section selected"
+ }
+ }
+ },
"linkInput": {
"placeholder": "Click here to select a link",
"withNestedTextLabel": "Enable text",
diff --git a/app/frontend/editor/locales/editor.es.json b/app/frontend/editor/locales/editor.es.json
index 230e92b7..ab5b7fe0 100644
--- a/app/frontend/editor/locales/editor.es.json
+++ b/app/frontend/editor/locales/editor.es.json
@@ -82,6 +82,7 @@
},
"title": "Título",
"path": "Ruta",
+ "layoutId": "Disposición",
"visible": "Visible",
"visiblePlaceholder": "Mostrar/Ocultar la página",
"seoTitle": "Meta title",
@@ -97,7 +98,10 @@
},
"listPane": {
"title": "Organizar secciones",
- "empty": "No hay secciones."
+ "empty": {
+ "title": "Aún no hay secciones aquí.",
+ "button": "Agrega una para comenzar."
+ }
}
},
"sectionPane": {
@@ -118,6 +122,10 @@
}
},
"themeSectionList": {
+ "empty": {
+ "title": "No hay secciones disponibles para esta área.",
+ "message": "Esto puede deberse a las restricciones del grupo de diseño o a que la sección ya existe y es recuperable."
+ },
"emptyCategory": "No hay secciones"
},
"style": {
@@ -170,6 +178,33 @@
"title": "Iconos",
"pickerTitle": "Elige un icono"
},
+ "mirrorSectionSetup": {
+ "inputLabel": "Activar reflejo de sección",
+ "addButton": "...o añadir una sección reflejada",
+ "tooltip": "Esta sección está reflejada desde \"%{pageTitle}\".
Los cambios realizados aquí se aplicarán en todas las páginas que usen esta sección",
+ "title": "Configurar sección reflejada",
+ "errorMessage": "¡Ups! No puedes reflejar esta sección. Ya está reflejada en esta página o proviene de la misma página que estás editando.",
+ "protectedMessage": {
+ "title": "Esta sección está protegida",
+ "message": "Para editar su contenido, ve a la página original donde fue creada."
+ },
+ "confirmButton": "Configurar",
+ "cancelButton": "Cancelar",
+ "page": {
+ "name": "Página",
+ "input": {
+ "label": "Página",
+ "placeholder": "Selecciona una página",
+ "searchPlaceholder": "Buscar...",
+ "emptyLabel": "No se encontraron páginas"
+ },
+ "sectionInput": {
+ "label": "Sección",
+ "placeholder": "Selecciona una sección",
+ "emptyLabel": "Ninguna sección seleccionada"
+ }
+ }
+ },
"linkInput": {
"placeholder": "Pulsa aquí para seleccionar un enlace",
"withNestedTextLabel": "Activar texto",
diff --git a/app/frontend/editor/locales/editor.fr.json b/app/frontend/editor/locales/editor.fr.json
index 4391b80b..c4f985d7 100644
--- a/app/frontend/editor/locales/editor.fr.json
+++ b/app/frontend/editor/locales/editor.fr.json
@@ -82,6 +82,7 @@
},
"title": "Titre",
"path": "Chemin",
+ "layoutId": "Gabarit",
"visible": "Visible",
"visiblePlaceholder": "Afficher/Cacher la page",
"seoTitle": "Meta title",
@@ -97,7 +98,10 @@
},
"listPane": {
"title": "Organiser les sections",
- "empty": "Vous n'avez aucune section."
+ "empty": {
+ "title": "Aucune section ici pour l’instant.",
+ "button": "Ajoutez-en une pour commencer."
+ }
}
},
"sectionPane": {
@@ -117,11 +121,21 @@
}
},
"themeSectionList": {
+ "empty": {
+ "title": "Aucune section disponible pour cette zone.",
+ "message": "Cela peut être dû aux restrictions du groupe de mise en page ou à une section déjà présente et marquée comme récupérable."
+ },
"emptyCategory": "Aucune section"
},
"style": {
"edit": {
- "title": "Styler site"
+ "title": "Styler site",
+ "submitButton": {
+ "default": "Mettre à jour",
+ "inProgress": "En cours de mise à jour...",
+ "success": "Mise à jour !",
+ "fail": "Échec !"
+ }
}
},
"imageInput": {
@@ -163,6 +177,33 @@
"title": "Icônes",
"pickerTitle": "Sélectionner une icône"
},
+ "mirrorSectionSetup": {
+ "inputLabel": "Activer la mise en miroir de la section",
+ "addButton": "...ou ajouter une section en miroir",
+ "tooltip": "Cette section est en miroir depuis \"%{pageTitle}\".
Les modifications apportées ici seront répercutées sur toutes les pages utilisant cette section",
+ "title": "Configurer la section en miroir",
+ "errorMessage": "Oups ! Vous ne pouvez pas mettre cette section en miroir. Elle est déjà présente sur cette page ou provient de la page que vous êtes en train de modifier.",
+ "protectedMessage": {
+ "title": "Cette section est protégée",
+ "message": "Pour modifier son contenu, allez sur la page d'origine où elle a été créée."
+ },
+ "confirmButton": "Configurer",
+ "cancelButton": "Annuler",
+ "page": {
+ "name": "Page",
+ "input": {
+ "label": "Page",
+ "placeholder": "Sélectionnez une page",
+ "searchPlaceholder": "Rechercher...",
+ "emptyLabel": "Aucune page trouvée"
+ },
+ "sectionInput": {
+ "label": "Section",
+ "placeholder": "Sélectionnez une section",
+ "emptyLabel": "Aucune section sélectionnée"
+ }
+ }
+ },
"linkInput": {
"placeholder": "Cliquez ici pour sélectionner un lien",
"withNestedTextLabel": "Activer le texte",
diff --git a/app/frontend/editor/locales/editor.pt-BR.json b/app/frontend/editor/locales/editor.pt-BR.json
index d87f5851..42206395 100644
--- a/app/frontend/editor/locales/editor.pt-BR.json
+++ b/app/frontend/editor/locales/editor.pt-BR.json
@@ -97,7 +97,10 @@
},
"listPane": {
"title": "Organizar seções",
- "empty": "Não há seções."
+ "empty": {
+ "title": "Ainda não há seções aqui.",
+ "button": "Adicione uma para começar."
+ }
}
},
"sectionPane": {
@@ -118,6 +121,10 @@
}
},
"themeSectionList": {
+ "empty": {
+ "title": "Nenhuma seção disponível para esta área.",
+ "message": "Isso pode ocorrer devido às restrições do layout ou porque a seção já existe e é recuperável."
+ },
"emptyCategory": "Nenhuma seção"
},
"style": {
@@ -170,6 +177,33 @@
"title": "Ícones",
"pickerTitle": "Escolher um ícone"
},
+ "mirrorSectionSetup": {
+ "inputLabel": "Ativar espelhamento de seção",
+ "addButton": "...ou adicionar uma seção espelhada",
+ "tooltip": "Esta seção é espelhada da \"%{pageTitle}\".
As alterações feitas aqui serão refletidas em todas as páginas que usam esta seção.",
+ "title": "Configurar espelhamento de seção",
+ "errorMessage": "Ops! Você não pode espelhar esta seção. Ela já está espelhada nesta página ou pertence à mesma página que você está editando.",
+ "protectedMessage": {
+ "title": "Esta seção está protegida",
+ "message": "Para editar seu conteúdo, vá para a página original onde ela foi criada."
+ },
+ "confirmButton": "Configurar",
+ "cancelButton": "Cancelar",
+ "page": {
+ "name": "Página",
+ "input": {
+ "label": "Página",
+ "placeholder": "Selecione uma página",
+ "searchPlaceholder": "Pesquisar...",
+ "emptyLabel": "Nenhuma página encontrada"
+ },
+ "sectionInput": {
+ "label": "Seção",
+ "placeholder": "Selecione uma seção",
+ "emptyLabel": "Nenhuma seção selecionada"
+ }
+ }
+ },
"linkInput": {
"placeholder": "Clique aqui para selecionar um link",
"withNestedTextLabel": "Ativar texto",
diff --git a/app/frontend/editor/mixins/global.js b/app/frontend/editor/mixins/global.js
index 3f4347f4..d62846e5 100644
--- a/app/frontend/editor/mixins/global.js
+++ b/app/frontend/editor/mixins/global.js
@@ -37,18 +37,27 @@ Vue.mixin({
currentTheme() {
return this.$store.state.theme
},
+ currentSections() {
+ return this.$store.state.sections
+ },
currentSection() {
return this.$store.state.section
},
currentSectionI18nScope() {
return `${this.currentI18nScope}.sections.${this.currentSection.type}`
},
- currentSectionList() {
- return this.$store.getters.sectionList
+ currentSectionsContent() {
+ return this.$store.getters.sectionsContent
+ },
+ currentSectionTypes() {
+ return this.$store.getters.sectionTypes
},
currentSectionContent() {
return this.$store.getters.sectionContent
},
+ currentSectionLayoutGroupIdMap() {
+ return this.$store.getters.sectionLayoutGroupIdMap
+ },
currentSectionDefinition() {
return this.$store.state.sectionDefinition
},
@@ -88,6 +97,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
},
@@ -103,7 +115,7 @@ Vue.mixin({
deviceWidthMap() {
return {
mobile: 375,
- tablet: 1024,
+ tablet: 768,
}
},
},
diff --git a/app/frontend/editor/plugins/maglev_dummy.js b/app/frontend/editor/plugins/maglev_dummy.js
new file mode 100644
index 00000000..e72e7999
--- /dev/null
+++ b/app/frontend/editor/plugins/maglev_dummy.js
@@ -0,0 +1,2 @@
+ import setup from 'maglev_dummy'
+ setup()
diff --git a/app/frontend/editor/router/routes/section.js b/app/frontend/editor/router/routes/section.js
index 5c902c0e..a939c51d 100644
--- a/app/frontend/editor/router/routes/section.js
+++ b/app/frontend/editor/router/routes/section.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,
diff --git a/app/frontend/editor/services/__tests__/page.spec.js b/app/frontend/editor/services/__tests__/sections-content.spec.js
similarity index 56%
rename from app/frontend/editor/services/__tests__/page.spec.js
rename to app/frontend/editor/services/__tests__/sections-content.spec.js
index 783e4590..e3c5670d 100644
--- a/app/frontend/editor/services/__tests__/page.spec.js
+++ b/app/frontend/editor/services/__tests__/sections-content.spec.js
@@ -1,8 +1,8 @@
-import buildService from '../page'
+import buildService from '../sections-content'
import MockedServices from '@/spec/__mocks__/services'
-import { page } from '@/spec/__mocks__/page'
+import { sectionsContent } from '@/spec/__mocks__/sections-content'
-describe('PageService', () => {
+describe('SectionsContentService', () => {
let service = null
beforeEach(() => {
@@ -10,9 +10,9 @@ describe('PageService', () => {
})
describe('#normalize', () => {
- it('takes a Page object and normalize it into entities', () => {
- const output = service.normalize(page)
- expect(output.result).toEqual(1)
+ it('takes a SectionsContent object and normalize it into entities', () => {
+ const output = service.normalize(sectionsContent)
+ expect(output.result).toEqual(['header', 'main', 'footer'])
expect(Object.keys(output.entities.sections)).toStrictEqual([
'GrYZW-VP',
'8hKSujtd',
@@ -28,11 +28,7 @@ describe('PageService', () => {
'K3Xotn7f',
'Pst6WyU0',
])
- expect(output.entities.page['1'].sections).toStrictEqual([
- 'GrYZW-VP',
- '8hKSujtd',
- 'xM6f-kyh',
- ])
+ expect(output.entities.layoutGroups.header.sections).toStrictEqual(['GrYZW-VP'])
})
})
})
diff --git a/app/frontend/editor/services/index.js b/app/frontend/editor/services/index.js
index 4cbd3864..58ef9568 100644
--- a/app/frontend/editor/services/index.js
+++ b/app/frontend/editor/services/index.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),
diff --git a/app/frontend/editor/services/live-preview.js b/app/frontend/editor/services/live-preview.js
index 7ec61deb..68605a7d 100644
--- a/app/frontend/editor/services/live-preview.js
+++ b/app/frontend/editor/services/live-preview.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 ===
@@ -66,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
diff --git a/app/frontend/editor/services/page.js b/app/frontend/editor/services/page.js
index d31a614a..349ef35c 100644
--- a/app/frontend/editor/services/page.js
+++ b/app/frontend/editor/services/page.js
@@ -1,21 +1,9 @@
-import {
- normalize as coreNormalize,
- denormalize as coreDenormalize,
- schema,
-} from 'normalizr'
import { pick } from '@/misc/utils'
-export const BLOCK_SCHEMA = new schema.Entity('blocks')
-export const SECTION_SCHEMA = new schema.Entity('sections', {
- blocks: [BLOCK_SCHEMA],
-})
-export const PAGE_SCHEMA = new schema.Entity('page', {
- sections: [SECTION_SCHEMA],
-})
-
export const SETTING_ATTRIBUTES = [
'title',
'path',
+ 'layoutId',
'visible',
'seoTitle',
'ogTitle',
@@ -30,10 +18,11 @@ export default (api) => ({
return page.path === 'index' || page.path === '/index'
},
- build: () => {
+ build: ({ layoutId }) => {
return {
title: '',
path: '',
+ layoutId,
visible: true,
seoTitle: '',
metaDescription: '',
@@ -71,7 +60,7 @@ export default (api) => ({
},
update: (id, attributes, siteAttributes) => {
- console.log('[PageService] Updating page #', id)
+ console.log('🚨🚨🚨🚨🚨 [PageService] Updating page #', id)
return api.put(`/pages/${id}`, { page: attributes, site: siteAttributes })
},
@@ -96,12 +85,4 @@ export default (api) => ({
console.log('[PageService] Destroying page #', id)
return api.destroy(`/pages/${id}`)
},
-
- normalize: (page) => {
- return coreNormalize(page, PAGE_SCHEMA)
- },
-
- denormalize: (page, entities) => {
- return coreDenormalize(page, PAGE_SCHEMA, entities)
- },
})
diff --git a/app/frontend/editor/services/section.js b/app/frontend/editor/services/section.js
index 583c87e0..954bb2a1 100644
--- a/app/frontend/editor/services/section.js
+++ b/app/frontend/editor/services/section.js
@@ -1,6 +1,6 @@
import { isBlank, uuid8, camelize } from '@/misc/utils'
-import { normalize as coreNormalize } from 'normalizr'
-import { SECTION_SCHEMA } from './page'
+import { normalize as coreNormalize, denormalize as coreDenormalize, } from 'normalizr'
+import { SECTION_SCHEMA } from './sections-content'
const NUMBER_OF_DEFAULT_BLOCKS = 3
@@ -15,30 +15,42 @@ export const calculateMovingIndices = (sectionIds, sectionId, direction) => {
return { fromIndex, toIndex }
}
-export const canBeAddedToPage = (newSectionDefinition, sections) => {
- if (!newSectionDefinition.singleton) return true
- return !sections.some((section) => newSectionDefinition.id === section.type)
+export const canAddMirroredSection = ({ hasOneSinglePage, page, sections, mirrorOf }) => {
+ if (hasOneSinglePage) return false
+
+ // when canAddMirroredSection is called from the list of sections, let's assume everything is good
+ if (mirrorOf === undefined) return true
+
+ // mirroring a section from the current page
+ if (page.id === mirrorOf.pageId) return false
+
+ // mirroring a section already mirrored in the current page
+ if (Object.keys(sections).some((sectionId) => sectionId === mirrorOf.sectionId)) return false
+
+ return true
}
export const normalize = (section) => {
return coreNormalize(section, SECTION_SCHEMA)
}
-export const build = (definition, site) => {
+export const denormalize = (section, entities) => {
+ return coreDenormalize(section, SECTION_SCHEMA, entities)
+}
+
+export const build = (definition, siteScopedSections) => {
const type = definition.id
- const siteSection = site.sections.find(
- (siteSection) => siteSection.type === type,
- )
+ const siteScopedSection = siteScopedSections[type]
let settings, blocks
- if (definition.siteScoped && !isBlank(siteSection)) {
- settings = [].concat(siteSection.settings || [])
- blocks = [].concat(siteSection.blocks || [])
+ if (definition.siteScoped && !isBlank(siteScopedSection)) {
+ settings = [].concat(siteScopedSection.settings || [])
+ blocks = [].concat(siteScopedSection.blocks || [])
} else {
settings = buildSettings(definition, definition.sample?.settings)
blocks = buildBlocks(definition)
}
-
+
return { id: uuid8(), type, settings, blocks }
}
diff --git a/app/frontend/editor/services/sections-content.js b/app/frontend/editor/services/sections-content.js
new file mode 100644
index 00000000..1d9151c6
--- /dev/null
+++ b/app/frontend/editor/services/sections-content.js
@@ -0,0 +1,40 @@
+import {
+ normalize as coreNormalize,
+ denormalize as coreDenormalize,
+ schema,
+} from 'normalizr'
+import { pick } from '@/misc/utils'
+
+export const BLOCK_SCHEMA = new schema.Entity('blocks')
+export const SECTION_SCHEMA = new schema.Entity('sections', {
+ blocks: [BLOCK_SCHEMA],
+})
+export const LAYOUT_GROUP_SCHEMA = new schema.Entity('layoutGroups', {
+ sections: [SECTION_SCHEMA],
+})
+export const SECTIONS_CONTENT_SCHEMA = new schema.Array(LAYOUT_GROUP_SCHEMA)
+
+const findSectionsContent = (api, pageId) => {
+ return api.get(`/pages/${pageId}/sections_content`).then(({ data }) => data)
+}
+
+export default (api) => ({
+ normalize: (content) => {
+ return coreNormalize(content, SECTIONS_CONTENT_SCHEMA)
+ },
+ denormalize: (content, entities) => {
+ return coreDenormalize(content, SECTIONS_CONTENT_SCHEMA, entities)
+ },
+ find: (pageId) => {
+ return findSectionsContent(api, pageId)
+ },
+ update: (pageId, content) => {
+ console.log('[SectionsContentService] Updating content of page #', pageId)
+ return api.put(`/pages/${pageId}/sections_content`, { sections_content: content }).then(({ data }) => data)
+ },
+ findSingleSection: async (pageId, layoutGroupId, sectionId) => {
+ const pageContent = await findSectionsContent(api, pageId)
+ const layoutGroup = pageContent?.find(layoutGroup => layoutGroup.id === layoutGroupId)
+ return layoutGroup?.sections?.find(section => section.id === sectionId)
+ }
+})
diff --git a/app/frontend/editor/services/site.js b/app/frontend/editor/services/site.js
index e09e16c1..fed9698a 100644
--- a/app/frontend/editor/services/site.js
+++ b/app/frontend/editor/services/site.js
@@ -8,7 +8,7 @@ export default (api) => ({
return api.get(`/site`).then(({ data }) => data)
},
updateStyle(style) {
- return api.put(`/style`, { site: { style } }).then((response) => {
+ return api.put(`/style`, { style }).then((response) => {
return response.headers['lock-version']
})
},
diff --git a/app/frontend/editor/services/theme.js b/app/frontend/editor/services/theme.js
index e676ec4f..eee81e6b 100644
--- a/app/frontend/editor/services/theme.js
+++ b/app/frontend/editor/services/theme.js
@@ -1,8 +1,53 @@
-export const buildCategories = (theme) => {
- return theme.sectionCategories.map((category) => ({
- name: category.name,
- children: theme.sections
- .filter((section) => section.category == category.id)
- .sort((a, b) => a.name.localeCompare(b.name)),
+import { isBlank } from '@/misc/utils.js'
+
+export const buildLayoutOptions = (theme) => {
+ return theme.layouts.map((layout) => ({
+ value: layout.id,
+ label: layout.label
}))
+}
+
+export const buildCategories = ({ theme, layoutId, layoutGroupId, insertedSectionTypes }) => {
+ const layoutGroup = findLayoutGroup({ theme , layoutId, layoutGroupId })
+ return theme.sectionCategories
+ .map(category => buildCategory({ category, layoutGroup, sections: theme.sections, insertedSectionTypes }))
+ .filter((category) => category !== null)
+}
+
+const findLayoutGroup = ({ theme, layoutId, layoutGroupId }) => {
+ const layout = theme.layouts.find(layout => layout.id === layoutId)
+ return layout.groups.find(group => group.id === layoutGroupId)
+}
+
+const buildCategory = ({ category, sections, layoutGroup, insertedSectionTypes }) => {
+ const filterSections = sections.filter(section => filterSection({ section, categoryId: category.id, layoutGroup, insertedSectionTypes }))
+
+ if (filterSections.length === 0) return null
+
+ return {
+ label: category.label,
+ children: filterSections.sort((a, b) => a.name.localeCompare(b.name))
+ }
+}
+
+const filterSection = ({ section, categoryId, layoutGroup, insertedSectionTypes }) => {
+ if (section.category !== categoryId) return false
+
+ const recoverable = isBlank(layoutGroup.recoverable) ? [] : layoutGroup.recoverable
+ const accepts = isBlank(layoutGroup.accept) ? ['*'] : layoutGroup.accept
+
+ // reject if the section is singleton in the context of the layoutGroup AND
+ // if there is another same section type in the group.
+ if (recoverable.includes(section.id) && insertedSectionTypes.includes(section.id)) return false
+
+ // reject if the section is siteScoped or is a singleton and there is already a siteScoped section of the same type
+ if ((section.siteScoped || section.singleton) && insertedSectionTypes.includes(section.id)) return false
+
+ // Wildcard: accept all sections
+ if (accepts.includes("*")) return true
+
+ const sectionId = section.id
+ const scopedId = `${section.category}/${section.id}`
+
+ return accepts.includes(sectionId) || accepts.includes(scopedId) || accepts.includes(`${categoryId}/*`)
}
\ No newline at end of file
diff --git a/app/frontend/editor/spec/__mocks__/page.js b/app/frontend/editor/spec/__mocks__/page.js
index 9a30f74b..6d3c5f52 100644
--- a/app/frontend/editor/spec/__mocks__/page.js
+++ b/app/frontend/editor/spec/__mocks__/page.js
@@ -1,201 +1,8 @@
-export const pageSections = [
- {
- id: 'GrYZW-VP',
- type: 'navbar_01',
- blocks: [
- {
- id: 'RiEo8C3f',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: { href: '#', text: 'Home', linkType: 'url' },
- },
- ],
- },
- {
- id: 'P1fGieWs',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: { href: '#', text: 'About us', linkType: 'url' },
- },
- ],
- },
- {
- id: 'sDo-Dg85',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: {
- href: '//contact',
- text: 'Contact',
- email: null,
- linkId: 9,
- linkType: 'page',
- linkLabel: 'Contact us',
- sectionId: null,
- openNewWindow: false,
- },
- },
- ],
- },
- {
- id: 'K-C_zRcH',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: {
- href: '/products',
- text: 'Products #1',
- email: null,
- linkId: 'd870133f9a075477a96a58e7639d40c5',
- linkType: 'page',
- linkLabel: 'Products',
- sectionId: null,
- openNewWindow: true,
- },
- },
- ],
- },
- ],
- settings: [
- {
- id: 'logo',
- value: {
- id: 15,
- url: 'http://localhost:3000/maglev/assets/15',
- width: 572,
- height: 290,
- filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png',
- byteSize: 35070,
- },
- },
- ],
- },
- {
- id: '8hKSujtd',
- type: 'content_01',
- blocks: [],
- settings: [
- { id: 'pre_title', value: 'preTitle' },
- { id: 'title', value: 'My awesome title!' },
- {
- id: 'body',
- value:
- '\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.\u003c/p\u003e',
- },
- {
- id: 'image',
- value: {
- id: 14,
- url: 'http://localhost:3000/maglev/assets/14',
- width: 516,
- height: 320,
- filename: 'img-91-3.jpg',
- byteSize: 41683,
- },
- },
- { id: 'button', value: { url: '#', text: 'Click here' } },
- ],
- },
- {
- id: 'xM6f-kyh',
- type: 'list_01',
- blocks: [
- {
- id: 'fNIEuzF0',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 13,
- url: 'http://localhost:3000/maglev/assets/13',
- width: 1920,
- height: 1200,
- filename: 'img-97.jpg',
- byteSize: 458107,
- },
- },
- ],
- },
- {
- id: 'UVGOFAI5',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 9,
- url: 'http://localhost:3000/maglev/assets/9',
- width: 516,
- height: 400,
- filename: 'inner-74-2.jpg',
- byteSize: 63881,
- },
- },
- ],
- },
- {
- id: 'K3Xotn7f',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 12,
- url: 'http://localhost:3000/maglev/assets/12',
- width: 516,
- height: 320,
- filename: 'img-91-4.jpg',
- byteSize: 21808,
- },
- },
- ],
- },
- {
- id: 'Pst6WyU0',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 11,
- url: 'http://localhost:3000/maglev/assets/11',
- width: 1920,
- height: 1200,
- filename: 'img-91.jpg',
- byteSize: 180178,
- },
- },
- ],
- },
- ],
- settings: [
- { id: 'title', value: 'Home [EN] v1.2.11' },
- {
- id: 'body',
- value:
- '\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla \u003cstrong\u003e\u003cu\u003e\u003ca href="/" rel="noopener noreferrer nofollow" maglev-link-type="page" maglev-link-id="7"\u003evarius\u003c/a\u003e\u003c/u\u003e\u003c/strong\u003e sagittis nunc eget iaculis.\u003c/p\u003e',
- },
- { id: 'background_color', value: '#BFDBFE' },
- ],
- },
-]
-
export const page = {
- sections: pageSections,
id: 1,
title: 'Home page',
path: 'index',
+ layoutId: 'default',
pathHash: { en: 'index', fr: 'index' },
visible: true,
seoTitle: 'My awesome home page',
@@ -204,229 +11,6 @@ export const page = {
ogDescription: null,
ogImageUrl: null,
previewUrl: '/maglev/preview',
- sectionNames: [
- { id: 'GrYZW-VP', name: 'Navbar 01' },
- { id: '8hKSujtd', name: 'Content #1' },
- { id: 'xM6f-kyh', name: 'List #1' },
- ],
lockVersion: 1,
translated: true,
-}
-
-export const normalizedPage = {
- entities: {
- blocks: {
- RiEo8C3f: {
- id: 'RiEo8C3f',
- type: 'navbar_item',
- settings: [
- { id: 'link', value: { href: '#', text: 'Home', linkType: 'url' } },
- ],
- },
- P1fGieWs: {
- id: 'P1fGieWs',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: { href: '#', text: 'About us', linkType: 'url' },
- },
- ],
- },
- 'sDo-Dg85': {
- id: 'sDo-Dg85',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: {
- href: '//contact',
- text: 'Contact',
- email: null,
- linkId: 9,
- linkType: 'page',
- linkLabel: 'Contact us',
- sectionId: null,
- openNewWindow: false,
- },
- },
- ],
- },
- 'K-C_zRcH': {
- id: 'K-C_zRcH',
- type: 'navbar_item',
- settings: [
- {
- id: 'link',
- value: {
- href: '/products',
- text: 'Products #1',
- email: null,
- linkId: 'd870133f9a075477a96a58e7639d40c5',
- linkType: 'page',
- linkLabel: 'Products',
- sectionId: null,
- openNewWindow: true,
- },
- },
- ],
- },
- fNIEuzF0: {
- id: 'fNIEuzF0',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 13,
- url: 'http://localhost:3000/maglev/assets/13',
- width: 1920,
- height: 1200,
- filename: 'img-97.jpg',
- byteSize: 458107,
- },
- },
- ],
- },
- UVGOFAI5: {
- id: 'UVGOFAI5',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 9,
- url: 'http://localhost:3000/maglev/assets/9',
- width: 516,
- height: 400,
- filename: 'inner-74-2.jpg',
- byteSize: 63881,
- },
- },
- ],
- },
- K3Xotn7f: {
- id: 'K3Xotn7f',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 12,
- url: 'http://localhost:3000/maglev/assets/12',
- width: 516,
- height: 320,
- filename: 'img-91-4.jpg',
- byteSize: 21808,
- },
- },
- ],
- },
- Pst6WyU0: {
- id: 'Pst6WyU0',
- type: 'list_item',
- settings: [
- { id: 'title', value: 'Item title' },
- {
- id: 'image',
- value: {
- id: 11,
- url: 'http://localhost:3000/maglev/assets/11',
- width: 1920,
- height: 1200,
- filename: 'img-91.jpg',
- byteSize: 180178,
- },
- },
- ],
- },
- },
- sections: {
- 'GrYZW-VP': {
- id: 'GrYZW-VP',
- type: 'navbar_01',
- blocks: ['RiEo8C3f', 'P1fGieWs', 'sDo-Dg85', 'K-C_zRcH'],
- settings: [
- {
- id: 'logo',
- value: {
- id: 15,
- url: 'http://localhost:3000/maglev/assets/15',
- width: 572,
- height: 290,
- filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png',
- byteSize: 35070,
- },
- },
- ],
- },
- '8hKSujtd': {
- id: '8hKSujtd',
- type: 'content_01',
- blocks: [],
- settings: [
- { id: 'pre_title', value: 'preTitle' },
- { id: 'title', value: 'My awesome title!' },
- {
- id: 'body',
- value:
- '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.
', - }, - { - id: 'image', - value: { - id: 14, - url: 'http://localhost:3000/maglev/assets/14', - width: 516, - height: 320, - filename: 'img-91-3.jpg', - byteSize: 41683, - }, - }, - { id: 'button', value: { url: '#', text: 'Click here' } }, - ], - }, - 'xM6f-kyh': { - id: 'xM6f-kyh', - type: 'list_01', - blocks: ['fNIEuzF0', 'UVGOFAI5', 'K3Xotn7f', 'Pst6WyU0'], - settings: [ - { id: 'title', value: 'Home [EN] v1.2.11' }, - { - id: 'body', - value: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.
', - }, - { id: 'background_color', value: '#BFDBFE' }, - ], - }, - }, - page: { - 1: { - sections: ['GrYZW-VP', '8hKSujtd', 'xM6f-kyh'], - id: 1, - title: 'Home page', - path: 'index', - pathHash: { en: 'index', fr: 'index' }, - visible: true, - seoTitle: 'My awesome home page', - metaDescription: null, - ogTitle: null, - ogDescription: null, - ogImageUrl: null, - previewUrl: '/maglev/preview', - sectionNames: [ - { id: 'GrYZW-VP', name: 'Navbar 01' }, - { id: '8hKSujtd', name: 'Content #1' }, - { id: 'xM6f-kyh', name: 'List #1' }, - ], - lockVersion: 1, - translated: true, - }, - }, - }, - result: 1, -} +} \ No newline at end of file diff --git a/app/frontend/editor/spec/__mocks__/sections-content.js b/app/frontend/editor/spec/__mocks__/sections-content.js new file mode 100644 index 00000000..9560c195 --- /dev/null +++ b/app/frontend/editor/spec/__mocks__/sections-content.js @@ -0,0 +1,415 @@ +export const headerSections = [ + { + id: 'GrYZW-VP', + type: 'navbar_01', + deleted: false, + foobar: '42', + blocks: [ + { + id: 'RiEo8C3f', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { href: '#', text: 'Home', linkType: 'url' }, + }, + ], + }, + { + id: 'P1fGieWs', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { href: '#', text: 'About us', linkType: 'url' }, + }, + ], + }, + { + id: 'sDo-Dg85', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { + href: '//contact', + text: 'Contact', + email: null, + linkId: 9, + linkType: 'page', + linkLabel: 'Contact us', + sectionId: null, + openNewWindow: false, + }, + }, + ], + }, + { + id: 'K-C_zRcH', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { + href: '/products', + text: 'Products #1', + email: null, + linkId: 'd870133f9a075477a96a58e7639d40c5', + linkType: 'page', + linkLabel: 'Products', + sectionId: null, + openNewWindow: true, + }, + }, + ], + }, + ], + settings: [ + { + id: 'logo', + value: { + id: 15, + url: 'http://localhost:3000/maglev/assets/15', + width: 572, + height: 290, + filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png', + byteSize: 35070, + }, + }, + ] + } +] + +export const mainSections = [ + { + id: '8hKSujtd', + type: 'content_01', + blocks: [], + settings: [ + { id: 'pre_title', value: 'preTitle' }, + { id: 'title', value: 'My awesome title!' }, + { + id: 'body', + value: + '\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.\u003c/p\u003e', + }, + { + id: 'image', + value: { + id: 14, + url: 'http://localhost:3000/maglev/assets/14', + width: 516, + height: 320, + filename: 'img-91-3.jpg', + byteSize: 41683, + }, + }, + { id: 'button', value: { url: '#', text: 'Click here' } }, + ], + }, + { + id: 'xM6f-kyh', + type: 'list_01', + blocks: [ + { + id: 'fNIEuzF0', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 13, + url: 'http://localhost:3000/maglev/assets/13', + width: 1920, + height: 1200, + filename: 'img-97.jpg', + byteSize: 458107, + }, + }, + ], + }, + { + id: 'UVGOFAI5', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 9, + url: 'http://localhost:3000/maglev/assets/9', + width: 516, + height: 400, + filename: 'inner-74-2.jpg', + byteSize: 63881, + }, + }, + ], + }, + { + id: 'K3Xotn7f', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 12, + url: 'http://localhost:3000/maglev/assets/12', + width: 516, + height: 320, + filename: 'img-91-4.jpg', + byteSize: 21808, + }, + }, + ], + }, + { + id: 'Pst6WyU0', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 11, + url: 'http://localhost:3000/maglev/assets/11', + width: 1920, + height: 1200, + filename: 'img-91.jpg', + byteSize: 180178, + }, + }, + ], + }, + ], + settings: [ + { id: 'title', value: 'Home [EN] v1.2.11' }, + { + id: 'body', + value: + '\u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla \u003cstrong\u003e\u003cu\u003e\u003ca href="/" rel="noopener noreferrer nofollow" maglev-link-type="page" maglev-link-id="7"\u003evarius\u003c/a\u003e\u003c/u\u003e\u003c/strong\u003e sagittis nunc eget iaculis.\u003c/p\u003e', + }, + { id: 'background_color', value: '#BFDBFE' }, + ], + } +] + +export const sectionsContent = [ + { + id: 'header', + sections: headerSections, + lockVersion: 1, + }, + { + id: 'main', + sections: mainSections, + lockVersion: 1 + }, + { + id: 'footer', + sections: [], + lockVersion: 1 + } +] + +export const normalizedSectionsContent = { + entities: { + blocks: { + RiEo8C3f: { + id: 'RiEo8C3f', + type: 'navbar_item', + settings: [ + { id: 'link', value: { href: '#', text: 'Home', linkType: 'url' } }, + ], + }, + P1fGieWs: { + id: 'P1fGieWs', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { href: '#', text: 'About us', linkType: 'url' }, + }, + ], + }, + 'sDo-Dg85': { + id: 'sDo-Dg85', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { + href: '//contact', + text: 'Contact', + email: null, + linkId: 9, + linkType: 'page', + linkLabel: 'Contact us', + sectionId: null, + openNewWindow: false, + }, + }, + ], + }, + 'K-C_zRcH': { + id: 'K-C_zRcH', + type: 'navbar_item', + settings: [ + { + id: 'link', + value: { + href: '/products', + text: 'Products #1', + email: null, + linkId: 'd870133f9a075477a96a58e7639d40c5', + linkType: 'page', + linkLabel: 'Products', + sectionId: null, + openNewWindow: true, + }, + }, + ], + }, + fNIEuzF0: { + id: 'fNIEuzF0', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 13, + url: 'http://localhost:3000/maglev/assets/13', + width: 1920, + height: 1200, + filename: 'img-97.jpg', + byteSize: 458107, + }, + }, + ], + }, + UVGOFAI5: { + id: 'UVGOFAI5', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 9, + url: 'http://localhost:3000/maglev/assets/9', + width: 516, + height: 400, + filename: 'inner-74-2.jpg', + byteSize: 63881, + }, + }, + ], + }, + K3Xotn7f: { + id: 'K3Xotn7f', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 12, + url: 'http://localhost:3000/maglev/assets/12', + width: 516, + height: 320, + filename: 'img-91-4.jpg', + byteSize: 21808, + }, + }, + ], + }, + Pst6WyU0: { + id: 'Pst6WyU0', + type: 'list_item', + settings: [ + { id: 'title', value: 'Item title' }, + { + id: 'image', + value: { + id: 11, + url: 'http://localhost:3000/maglev/assets/11', + width: 1920, + height: 1200, + filename: 'img-91.jpg', + byteSize: 180178, + }, + }, + ], + }, + }, + sections: { + 'GrYZW-VP': { + id: 'GrYZW-VP', + type: 'navbar_01', + blocks: ['RiEo8C3f', 'P1fGieWs', 'sDo-Dg85', 'K-C_zRcH'], + settings: [ + { + id: 'logo', + value: { + id: 15, + url: 'http://localhost:3000/maglev/assets/15', + width: 572, + height: 290, + filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png', + byteSize: 35070, + }, + }, + ], + }, + '8hKSujtd': { + id: '8hKSujtd', + type: 'content_01', + blocks: [], + settings: [ + { id: 'pre_title', value: 'preTitle' }, + { id: 'title', value: 'My awesome title!' }, + { + id: 'body', + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.
', + }, + { + id: 'image', + value: { + id: 14, + url: 'http://localhost:3000/maglev/assets/14', + width: 516, + height: 320, + filename: 'img-91-3.jpg', + byteSize: 41683, + }, + }, + { id: 'button', value: { url: '#', text: 'Click here' } }, + ], + }, + 'xM6f-kyh': { + id: 'xM6f-kyh', + type: 'list_01', + blocks: ['fNIEuzF0', 'UVGOFAI5', 'K3Xotn7f', 'Pst6WyU0'], + settings: [ + { id: 'title', value: 'Home [EN] v1.2.11' }, + { + id: 'body', + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque odio purus, suscipit nec arcu id, tempor feugiat risus. Maecenas cursus vehicula sagittis. Nulla varius sagittis nunc eget iaculis.
', + }, + { id: 'background_color', value: '#BFDBFE' }, + ], + }, + }, + layoutGroups: { + header: { id: 'header', sections: [ 'GrYZW-VP' ], lockVersion: 1 }, + main: { id: 'main', sections: [ '8hKSujtd', 'xM6f-kyh' ], lockVersion: 1 }, + footer: { id: 'footer', sections: [], lockVersion: 1 } + }, + }, + result: [ 'header', 'main', 'footer' ] +} diff --git a/app/frontend/editor/spec/__mocks__/services.js b/app/frontend/editor/spec/__mocks__/services.js index ce3ea0eb..2de8b800 100644 --- a/app/frontend/editor/spec/__mocks__/services.js +++ b/app/frontend/editor/spec/__mocks__/services.js @@ -27,14 +27,19 @@ const pageService = { updateSettings: vi.fn(), setVisible: vi.fn(), clone: vi.fn(), - destroy: vi.fn(), + destroy: vi.fn() +} + +const sectionsContentService = { normalize: vi.fn(), denormalize: vi.fn(), + find: vi.fn(), + update: vi.fn(), + findSingleSection: vi.fn() } const sectionService = { calculateMovingIndices: vi.fn(), - canBeAddedToPage: vi.fn(), normalize: vi.fn(), build: vi.fn(), getSettings: vi.fn(), @@ -75,6 +80,7 @@ export default { site: siteService, theme: themeService, page: pageService, + sectionsContent: sectionsContentService, section: sectionService, block: blockService, image: imageService, diff --git a/app/frontend/editor/spec/__mocks__/site.js b/app/frontend/editor/spec/__mocks__/site.js index fef49241..f70b0860 100644 --- a/app/frontend/editor/spec/__mocks__/site.js +++ b/app/frontend/editor/spec/__mocks__/site.js @@ -1,89 +1,4 @@ export const site = { - sections: [ - { - id: 'BLpzw147', - type: 'footer_01', - blocks: [], - settings: [ - { id: 'title', value: 'Title' }, - { id: 'foo', value: 'icon-iconmonstr-target-3-icon' }, - ], - }, - { - id: 'sB8sSLsh', - type: 'navbar_01', - blocks: [ - { - id: 'RiEo8C3f', - type: 'navbar_item', - settings: [ - { id: 'link', value: { href: '#', text: 'Home', linkType: 'url' } }, - ], - }, - { - id: 'P1fGieWs', - type: 'navbar_item', - settings: [ - { - id: 'link', - value: { href: '#', text: 'About us', linkType: 'url' }, - }, - ], - }, - { - id: 'sDo-Dg85', - type: 'navbar_item', - settings: [ - { - id: 'link', - value: { - href: '//contact', - text: 'Contact', - email: null, - linkId: 9, - linkType: 'page', - linkLabel: 'Contact us', - sectionId: null, - openNewWindow: false, - }, - }, - ], - }, - { - id: 'K-C_zRcH', - type: 'navbar_item', - settings: [ - { - id: 'link', - value: { - href: '/products', - text: 'Products #1', - email: null, - linkId: 'd870133f9a075477a96a58e7639d40c5', - linkType: 'page', - linkLabel: 'Products', - sectionId: null, - openNewWindow: true, - }, - }, - ], - }, - ], - settings: [ - { - id: 'logo', - value: { - id: 15, - url: 'http://localhost:3000/maglev/assets/15', - width: 572, - height: 290, - filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png', - byteSize: 35070, - }, - }, - ], - }, - ], locales: [ { label: 'English', prefix: 'en' }, { label: 'French', prefix: 'fr' }, diff --git a/app/frontend/editor/spec/__mocks__/theme.js b/app/frontend/editor/spec/__mocks__/theme.js index be98e3cc..3bfec906 100644 --- a/app/frontend/editor/spec/__mocks__/theme.js +++ b/app/frontend/editor/spec/__mocks__/theme.js @@ -515,4 +515,25 @@ export const theme = { 'icon-shop', 'icon-workshop', ], + layouts: [ + { + id: 'default', + label: 'Default', + groups: [ + { + id: 'header', + label: 'Header', + recoverable: ['navbar_01'] + }, + { + id: 'main', + label: 'Main' + }, + { + id: 'footer', + label: 'Footer' + } + ] + } + ] } diff --git a/app/frontend/editor/store/__tests__/getters.spec.js b/app/frontend/editor/store/__tests__/getters.spec.js index d2487673..3c774440 100644 --- a/app/frontend/editor/store/__tests__/getters.spec.js +++ b/app/frontend/editor/store/__tests__/getters.spec.js @@ -6,6 +6,7 @@ import buildGetters from '@/store/getters' import buildMutations from '@/store/mutations' import MockedServices from '@/spec/__mocks__/services' import { page, normalizedPage } from '@/spec/__mocks__/page' +import { sectionsContent, normalizedSectionsContent } from '@/spec/__mocks__/sections-content' import { site } from '@/spec/__mocks__/site' import { theme } from '@/spec/__mocks__/theme' @@ -31,33 +32,20 @@ describe('Getters', () => { describe('#content', () => { it('returns the content of the sections for the page', () => { - mockedServices.page.denormalize = vi.fn(() => page) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) expect( - store.getters.content.pageSections.map((section) => section.id), - ).toStrictEqual(['GrYZW-VP', '8hKSujtd', 'xM6f-kyh']) - expect( - store.getters.content.siteSections.map((section) => section.id), - ).toStrictEqual([]) - }) - it('returns the site content sections since they have been touched', () => { - store.commit('TOUCH_SECTION', 'GrYZW-VP') - mockedServices.page.denormalize = vi.fn(() => page) - expect( - store.getters.content.pageSections.map((section) => section.id), - ).toStrictEqual(['GrYZW-VP', '8hKSujtd', 'xM6f-kyh']) - expect( - store.getters.content.siteSections.map((section) => section.id), + store.getters.content[0].sections.map((section) => section.id), ).toStrictEqual(['GrYZW-VP']) + expect( + store.getters.content[1].sections.map((section) => section.id), + ).toStrictEqual(['8hKSujtd', 'xM6f-kyh']) }) }) describe('#defaultPageAttributes', () => { describe("Given the page hasn't been translated", () => { it('returns the title + path', () => { - const newNormalizedPage = { ...normalizedPage } - newNormalizedPage.entities.page['1'].translated = false - mockedServices.page.normalize = vi.fn(() => normalizedPage) - store.commit('SET_PAGE', page) + store.commit('SET_PAGE', { ...page, translated: false }) expect(store.getters.defaultPageAttributes).toStrictEqual({ title: 'Home page', path: 'index', @@ -66,38 +54,100 @@ describe('Getters', () => { }) describe('Given the page has been translated', () => { it('returns an empty object', () => { - const newNormalizedPage = { ...normalizedPage } - newNormalizedPage.entities.page['1'].translated = true - mockedServices.page.normalize = vi.fn(() => normalizedPage) - store.commit('SET_PAGE', page) + store.commit('SET_PAGE', { ...page, translated: true }) expect(store.getters.defaultPageAttributes).toStrictEqual({}) }) }) }) - describe('#sectionList', () => { - it('returns a list of objects (id, type, name, viewportFixedPosition)', () => { - mockedServices.page.denormalize = vi.fn(() => page) - expect(store.getters.sectionList).toStrictEqual([ + describe('#sectionsContent', () => { + it('returns the sections grouped by layout groups', () => { + store.commit('SET_PAGE', page) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) + expect(store.getters.sectionsContent).toStrictEqual([ { - id: 'GrYZW-VP', - type: 'navbar_01', - name: 'Navbar 01', - viewportFixedPosition: false, + label: 'Header', + id: 'header', + sections: [ + { + id: 'GrYZW-VP', + isMirrored: false, + mirroredPageTitle: undefined, + name: 'Navbar 01', + type: 'navbar_01', + viewportFixedPosition: false, + } + ], + lockVersion: 1 }, { - id: '8hKSujtd', - type: 'content_01', - name: 'Content #1', - viewportFixedPosition: false, + label: 'Main', + id: 'main', + sections: [ + { + id: '8hKSujtd', + isMirrored: false, + mirroredPageTitle: undefined, + name: 'Content #1', + type: 'content_01', + viewportFixedPosition: false, + }, + { + id: 'xM6f-kyh', + isMirrored: false, + mirroredPageTitle: undefined, + name: 'List #1', + type: 'list_01', + viewportFixedPosition: false + } + ], + lockVersion: 1 }, { - id: 'xM6f-kyh', - type: 'list_01', - name: 'List #1', - viewportFixedPosition: false, - }, + label: 'Footer', + id: 'footer', + sections: [], + lockVersion: 1 + } ]) }) }) + + describe('#canAddSection', () => { + beforeEach(() => { + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + store.commit('SET_PAGE', page) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + }) + describe('the theme has many categories but without any sections', () => { + it('returns false', () => { + mockedServices.theme.buildCategories = vi.fn(() => ([ + { + label: 'Navbars', + children: [] + }, + { + label: 'Features', + children: [] + } + ])) + expect(store.getters.canAddSection('header')).toStrictEqual(false) + }) + }) + describe('the theme has many categories with sections', () => { + it('returns true', () => { + mockedServices.theme.buildCategories = vi.fn(() => ([ + { + label: 'Navbars', + children: [{ id: 'navbar_01' }, { id: 'navbar_02' }] + }, + { + label: 'Features', + children: [{ id: 'feature_01' }, { id: 'feature_02' }, { id: 'feature_03' }] + } + ])) + expect(store.getters.canAddSection('header')).toStrictEqual(true) + }) + }) + }) }) diff --git a/app/frontend/editor/store/actions/__tests__/page.spec.js b/app/frontend/editor/store/actions/__tests__/page.spec.js index 76c377c5..b9a61480 100644 --- a/app/frontend/editor/store/actions/__tests__/page.spec.js +++ b/app/frontend/editor/store/actions/__tests__/page.spec.js @@ -31,57 +31,6 @@ describe('Page Actions', () => { }) }) - describe('#persistPage', () => { - it('calls the API with both site and page attributes', async () => { - mockedServices.site.find = vi.fn(async () => site) - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) - mockedServices.page.findById = vi.fn(async () => page) - mockedServices.page.update = vi.fn(async () => ({ - response: { status: 200 }, - })) - store.commit('SET_PAGE', page) - await store.dispatch('persistPage') - expect(mockedServices.page.update).toHaveBeenCalledWith( - 1, - { - sections: expect.any(Array), - lockVersion: 1, - }, - { - style: null, - }, - ) - expect(store.state.ui.saveButtonState).toEqual('success') - }) - it('calls the API without the site attributes because no site scoped section has been modified', async () => { - mockedServices.site.find = vi.fn(async () => site) - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) - mockedServices.page.findById = vi.fn(async () => page) - mockedServices.page.update = vi.fn(async () => ({ - response: { status: 200 }, - })) - store.commit('SET_PAGE', page) - store.commit('TOUCH_SECTION', 'GrYZW-VP') - await store.dispatch('persistPage') - expect(mockedServices.page.update).toHaveBeenCalledWith( - 1, - { - sections: expect.any(Array), - lockVersion: 1, - }, - { - sections: expect.any(Array), - lockVersion: 1, - style: null, - }, - ) - expect(store.state.touchedSections).toEqual([]) - expect(store.state.ui.saveButtonState).toEqual('success') - }) - }) - describe('#setCurrentPageSettings', () => { it('does stuff', async () => { mockedServices.page.normalize = vi.fn(() => normalizedPage) diff --git a/app/frontend/editor/store/actions/__tests__/section-block.spec.js b/app/frontend/editor/store/actions/__tests__/section-block.spec.js index 1489ae97..0735a16e 100644 --- a/app/frontend/editor/store/actions/__tests__/section-block.spec.js +++ b/app/frontend/editor/store/actions/__tests__/section-block.spec.js @@ -13,6 +13,7 @@ import { } from '@/spec/__mocks__/section' import { site } from '@/spec/__mocks__/site' import { theme } from '@/spec/__mocks__/theme' +import { normalizedSectionsContent, sectionsContent, headerSections } from '@/spec/__mocks__/sections-content' const localVue = createLocalVue() localVue.use(Vuex) @@ -37,16 +38,16 @@ describe('SectionBlock Actions', () => { describe('#addSectionBlock', () => { it('marks the current section as touched', async () => { - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) mockedServices.section.normalize = vi.fn( () => normalizedNavContentSection, ) mockedServices.section.buildDefaultBlock = vi.fn( () => navContentSectionBlock, ) - store.commit('SET_PAGE', page) - store.commit('SET_SECTION', pageSections[0]) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + store.commit('SET_SECTION', headerSections[0]) await store.dispatch('addSectionBlock', { blockType: 'navbar_item', parentId: null, @@ -57,13 +58,13 @@ describe('SectionBlock Actions', () => { describe('#removeSectionBlock', () => { it('marks the current section as touched', async () => { - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) mockedServices.section.normalize = vi.fn( () => normalizedNavContentSection, ) - store.commit('SET_PAGE', page) - store.commit('SET_SECTION', pageSections[0]) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + store.commit('SET_SECTION', headerSections[0]) await store.dispatch('removeSectionBlock', 'RiEo8C3f') expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP']) }) @@ -71,13 +72,13 @@ describe('SectionBlock Actions', () => { describe('#sortSectionBlocks', () => { it('marks the current section as touched', async () => { - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) mockedServices.section.normalize = vi.fn( () => normalizedNavContentSection, ) - store.commit('SET_PAGE', page) - store.commit('SET_SECTION', pageSections[0]) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + store.commit('SET_SECTION', headerSections[0]) await store.dispatch('sortSectionBlocks', [ { id: 'P1fGieWs' }, { id: 'RiEo8C3f' }, @@ -90,14 +91,14 @@ describe('SectionBlock Actions', () => { describe('#updateSectionBlockContent', () => { it('marks the current section as touched', async () => { - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) mockedServices.section.normalize = vi.fn( () => normalizedNavContentSection, ) - store.commit('SET_PAGE', page) - store.commit('SET_SECTION', pageSections[0]) - store.commit('SET_SECTION_BLOCK', pageSections[0].blocks[0]) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + store.commit('SET_SECTION', headerSections[0]) + store.commit('SET_SECTION_BLOCK', headerSections[0].blocks[0]) await store.dispatch('updateSectionBlockContent', {}) expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP']) }) diff --git a/app/frontend/editor/store/actions/__tests__/section.spec.js b/app/frontend/editor/store/actions/__tests__/section.spec.js index b50f7269..c0a12ec6 100644 --- a/app/frontend/editor/store/actions/__tests__/section.spec.js +++ b/app/frontend/editor/store/actions/__tests__/section.spec.js @@ -6,13 +6,14 @@ import buildActions from '@/store/actions' import buildGetters from '@/store/getters' import buildMutations from '@/store/mutations' import MockedServices from '@/spec/__mocks__/services' -import { page, normalizedPage, pageSections } from '@/spec/__mocks__/page' import { simpleContentSection, normalizedSimpleContentSection, } from '@/spec/__mocks__/section' -import { site } from '@/spec/__mocks__/site' import { theme } from '@/spec/__mocks__/theme' +import { site } from '@/spec/__mocks__/site' +import { page } from '@/spec/__mocks__/page' +import { normalizedSectionsContent, sectionsContent, headerSections, mainSections } from '@/spec/__mocks__/sections-content' const localVue = createLocalVue() localVue.use(Vuex) @@ -36,27 +37,67 @@ describe('Section Actions', () => { }) describe('#addSection', () => { + beforeEach(() => { + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) + store.commit('SET_PAGE', page) + }) + it('marks the new section as touched', async () => { mockedServices.section.build = vi.fn(() => simpleContentSection) - mockedServices.page.normalize = vi.fn(() => normalizedPage) - mockedServices.page.denormalize = vi.fn(() => page) mockedServices.section.normalize = vi.fn( () => normalizedSimpleContentSection, ) - store.commit('SET_PAGE', page) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) await store.dispatch('addSection', { + layoutGroupId: 'main', sectionDefinition: theme.sections[0], insertAt: 'bottom', }) expect(store.state.touchedSections).toStrictEqual(['NEW-CONTENT-1']) }) + + it('recovers a deleted section', async () => { + const altNormalizedSectionsContent = JSON.parse(JSON.stringify(normalizedSectionsContent)) + altNormalizedSectionsContent.entities.sections['GrYZW-VP'].deleted = true + mockedServices.sectionsContent.normalize = vi.fn(() => altNormalizedSectionsContent) + store.commit('SET_SECTIONS_CONTENT',sectionsContent) + await store.dispatch('addSection', { + layoutGroupId: 'header', + sectionDefinition: theme.sections[1] + }) + expect(store.state.sections['GrYZW-VP'].deleted).toEqual(false) + }) }) describe('#updateSectionContent', () => { it('marks the modified section as touched', async () => { - store.commit('SET_SECTION', pageSections[0]) + store.commit('SET_SECTION', headerSections[0]) await store.dispatch('updateSectionContent', {}) expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP']) }) }) + + describe('#removeSection', () => { + beforeEach(() => { + mockedServices.sectionsContent.normalize = vi.fn(() => normalizedSectionsContent) + mockedServices.sectionsContent.denormalize = vi.fn(() => sectionsContent) + store.commit('SET_PAGE', page) + store.commit('SET_SECTIONS_CONTENT', sectionsContent) + }) + + it('removes the section from the layout group', () => { + store.dispatch('removeSection', mainSections[0].id) + expect(store.state.sections['GrYZW-VP'].deleted).toEqual(undefined) + expect(store.state.layoutGroups.main.sections).toStrictEqual(['xM6f-kyh']) + }) + + describe('the layout group mentions the section type as recoverable', () => { + it('flags the section as deleted', () => { + store.dispatch('removeSection', headerSections[0].id) + expect(store.state.sections['GrYZW-VP'].deleted).toEqual(true) + expect(store.state.layoutGroups.header.sections).toStrictEqual(['GrYZW-VP']) + }) + }) + }) }) diff --git a/app/frontend/editor/store/actions/index.js b/app/frontend/editor/store/actions/index.js index 7d8b867b..94696b2d 100644 --- a/app/frontend/editor/store/actions/index.js +++ b/app/frontend/editor/store/actions/index.js @@ -2,6 +2,7 @@ import buildSiteActions from './site' import buildPageActions from './page' import buildSectionActions from './section' import buildSectionBlockActions from './section-block' +import buildSectionsContentActions from './sections-content' export default (services) => ({ setDevice({ commit }, value) { @@ -31,4 +32,5 @@ export default (services) => ({ ...buildPageActions(services), ...buildSectionActions(services), ...buildSectionBlockActions(services), + ...buildSectionsContentActions(services), }) diff --git a/app/frontend/editor/store/actions/page.js b/app/frontend/editor/store/actions/page.js index e683e68d..b233ac64 100644 --- a/app/frontend/editor/store/actions/page.js +++ b/app/frontend/editor/store/actions/page.js @@ -3,63 +3,40 @@ import { isBlank } from '@/misc/utils' export default (services) => ({ // editPage : Action triggered when the user wants to edit another page // or to change the locale of the current page. - editPage({ state, dispatch }, { id, locale }) { - console.log('editPage', id, locale) - + async editPage({ state, dispatch }, { id, locale }) { // display the loader dispatch('resetPreview') - if (state.locale !== locale) { + if (locale && state.locale !== locale) { dispatch('setLocale', locale) - Promise.all([dispatch('fetchPage', id), dispatch('fetchSite')]) - } else dispatch('fetchPage', id) + await Promise.all([dispatch('fetchPage', id), dispatch('fetchSite')]) + } else await dispatch('fetchPage', id) + + dispatch('fetchSectionsContent', state.page.id) }, // Set page setPage({ commit }, page) { commit('SET_PAGE', page) }, + + // Set the oneSinglePage flag + setOneSinglePage({ commit }, oneSinglePage) { + commit('SET_ONE_SINGLE_PAGE', oneSinglePage) + }, + + // 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 .findById(site, id) .then((page) => commit('SET_PAGE', page)) - }, - // Persist the content of a page (including or not the site content) - async persistPage({ - commit, - dispatch, - state: { page, site, style }, - getters: { content, defaultPageAttributes }, - }) { - commit('SET_SAVE_BUTTON_STATE', 'inProgress') - - const pageAttributes = { - sections: content.pageSections, - lockVersion: page.lockVersion, - ...defaultPageAttributes, - } - const siteAttributes = isBlank(content.siteSections) - ? { style } - : { - sections: content.siteSections, - lockVersion: site.lockVersion, - style, - } - - return services.page - .update(page.id, pageAttributes, siteAttributes) - .then(() => { - commit('SET_SAVE_BUTTON_STATE', 'success') - commit('RESET_TOUCHED_SECTIONS') - Promise.all([dispatch('fetchPage', page.id), dispatch('fetchSite')]) - }) - .catch(({ response: { status } }) => { - commit('SET_SAVE_BUTTON_STATE', 'fail') - console.log('[Maglev] could not save the page', status) - if (status === 409) commit('OPEN_ERROR_MODAL', 'staleRecord') - }) - }, + }, setCurrentPageSettings({ commit }, pageSettings) { commit('SET_PAGE_SETTINGS', pageSettings) }, diff --git a/app/frontend/editor/store/actions/section-block.js b/app/frontend/editor/store/actions/section-block.js index ec20f217..a07b4760 100644 --- a/app/frontend/editor/store/actions/section-block.js +++ b/app/frontend/editor/store/actions/section-block.js @@ -21,7 +21,9 @@ export default (services) => ({ if (parentId) sectionBlock.parentId = parentId commit('ADD_SECTION_BLOCK', sectionBlock) commit('TOUCH_SECTION', section.id) + services.livePreview.addBlock( + getters.sectionLayoutGroupIdMap[section.id], getters.content, getters.denormalizedSection, sectionBlock, @@ -30,7 +32,9 @@ export default (services) => ({ removeSectionBlock({ commit, getters, state: { section } }, id) { commit('REMOVE_SECTION_BLOCK', id) commit('TOUCH_SECTION', section.id) + services.livePreview.removeBlock( + getters.sectionLayoutGroupIdMap[section.id], getters.content, getters.denormalizedSection, id, @@ -39,7 +43,12 @@ export default (services) => ({ sortSectionBlocks({ commit, getters, state: { section } }, change) { commit('SORT_SECTION_BLOCKS', change) commit('TOUCH_SECTION', section.id) - services.livePreview.moveBlock(getters.content, getters.denormalizedSection) + + services.livePreview.moveBlock( + getters.sectionLayoutGroupIdMap[section.id], + getters.content, + getters.denormalizedSection + ) }, updateSectionBlockContent( { commit, getters, state: { section, sectionBlock } }, @@ -47,7 +56,9 @@ export default (services) => ({ ) { commit('UPDATE_SECTION_BLOCK_CONTENT', change) commit('TOUCH_SECTION', section.id) + services.livePreview.updateBlock( + getters.sectionLayoutGroupIdMap[section.id], getters.content, getters.denormalizedSection, sectionBlock, diff --git a/app/frontend/editor/store/actions/section.js b/app/frontend/editor/store/actions/section.js index 93aa61e9..b74dd093 100644 --- a/app/frontend/editor/store/actions/section.js +++ b/app/frontend/editor/store/actions/section.js @@ -13,42 +13,103 @@ export default (services) => ({ commit('SET_HOVERED_SECTION', null) }, addSection( - { commit, getters, state: { site } }, - { sectionDefinition, insertAt }, + { commit, getters, state: { siteScopedSections } }, + { layoutGroupId, sectionDefinition, insertAt }, ) { - if (sectionDefinition.insertAt) insertAt = sectionDefinition.insertAt - const section = services.section.build(sectionDefinition, site) - commit('ADD_SECTION', { section, insertAt }) + let section = undefined + const deletedSection = getters.deletedSection(layoutGroupId, sectionDefinition.id) + + if (deletedSection) { + commit('RESTORE_SECTION', deletedSection.id) + section = getters.denormalizeSection(deletedSection.id) + } else { + if (sectionDefinition.insertAt) insertAt = sectionDefinition.insertAt + section = services.section.build(sectionDefinition, siteScopedSections) + commit('ADD_SECTION', { layoutGroupId, section, insertAt }) + } + commit('TOUCH_SECTION', section.id) - services.livePreview.addSection(getters.content, section, insertAt) + + services.livePreview.addSection(layoutGroupId, getters.content, section, insertAt) + return section }, - removeSection({ commit }, sectionId) { - commit('REMOVE_SECTION', sectionId) - services.livePreview.removeSection(sectionId) + removeSection({ commit, getters, state }, sectionId) { + const layoutGroupId = getters.sectionLayoutGroupIdMap[sectionId] + const recoverable = getters.layoutGroupDefinition(layoutGroupId).recoverable ?? [] + commit('REMOVE_SECTION', { layoutGroupId, sectionId, recoverable }) + services.livePreview.removeSection(layoutGroupId, sectionId) }, updateSectionContent({ commit, getters, state: { section } }, change) { commit('UPDATE_SECTION_CONTENT', change) commit('TOUCH_SECTION', section.id) + services.livePreview.updateSection( + getters.sectionLayoutGroupIdMap[section.id], getters.content, getters.denormalizedSection, change, ) }, + // source: the information related to the section we want to mirror in the current page + // target: the information about where to put the new section (layoutGroupId, insertAt) + async addMirroredSection( + { commit, getters }, + { source, target: { layoutGroupId, insertAt } }, + ) { + // get the content of the section we want to mirror + const section = await services.sectionsContent.findSingleSection(source.pageId, source.layoutGroupId, source.sectionId) + + section.mirrorOf = { enabled: true, ...source } + + commit('ADD_SECTION', { layoutGroupId, section, insertAt }) + commit('TOUCH_SECTION', section.id) + + services.livePreview.addSection(layoutGroupId, getters.content, section, insertAt) + + return section + }, + async toggleMirroredSectionEnabled({ commit, dispatch }, enabled) { + commit('SET_SECTION_MIRROR_OF_ENABLED', enabled) + + if (!enabled) return + + // update the content of the current section with the one from the mirror + dispatch('updateMirrorOfSectionContent') + }, + async updateMirrorOfSectionContent({ state, commit, getters }) { + const mirrorOf = state.section.mirrorOf + const section = await services.sectionsContent.findSingleSection(mirrorOf.pageId, mirrorOf.layoutGroupId, mirrorOf.sectionId) + + section.mirrorOf = { enabled: true, ...mirrorOf } + + commit('SET_SECTION', section) // required to update the current section form + commit('SET_SECTION_CONTENT', section) // required to prepare the update of the preview iframe + commit('TOUCH_SECTION', state.section.id) + + services.livePreview.updateSection( + getters.sectionLayoutGroupIdMap[state.section.id], + getters.content, + getters.denormalizedSection, + {}, + ) + }, moveSection( { commit, getters, - state: { - page: { sections }, - }, + state: { layoutGroups }, }, - { from, to }, + { layoutGroupId, from, to }, ) { if (isBlank(from) || isBlank(to)) return - commit('MOVE_HOVERED_SECTION', { fromIndex: from, toIndex: to }) + + const sections = layoutGroups[layoutGroupId].sections + + commit('MOVE_HOVERED_SECTION', { layoutGroupId, fromIndex: from, toIndex: to }) + services.livePreview.moveSection( + layoutGroupId, getters.content, sections[from], sections[to], @@ -60,16 +121,19 @@ export default (services) => ({ dispatch, state: { hoveredSection: { sectionId }, - page: { sections }, + layoutGroups, }, + getters }, direction, ) { + const layoutGroupId = getters.sectionLayoutGroupIdMap[sectionId] + const sections = layoutGroups[layoutGroupId].sections const indices = services.section.calculateMovingIndices( sections, sectionId, direction, - ) - dispatch('moveSection', { from: indices.fromIndex, to: indices.toIndex }) - }, + ) + dispatch('moveSection', { layoutGroupId, from: indices.fromIndex, to: indices.toIndex }) + } }) diff --git a/app/frontend/editor/store/actions/sections-content.js b/app/frontend/editor/store/actions/sections-content.js new file mode 100644 index 00000000..11fdc376 --- /dev/null +++ b/app/frontend/editor/store/actions/sections-content.js @@ -0,0 +1,37 @@ +import { isBlank } from '@/misc/utils' + +export default (services) => ({ + fetchSectionsContent({ commit }, pageId) { + services.sectionsContent.find(pageId) + .then((content) => commit('SET_SECTIONS_CONTENT', content)) + }, + setSectionsContent({ commit }, content) { + commit('SET_SECTIONS_CONTENT', content) + }, + setSiteScopedSections({ commit }, sections) { + commit('SET_SITE_SCOPED_SECTIONS', sections) + }, + // Persist the "content" of a page + async persistSectionsContent({ + commit, + dispatch, + state, + getters: { content, defaultPageAttributes }, + }) { + commit('SET_SAVE_BUTTON_STATE', 'inProgress') + + return services.sectionsContent + .update(state.page.id, content) + .then(({ lockVersions }) => { + commit('SET_SAVE_BUTTON_STATE', 'success') + commit('RESET_TOUCHED_SECTIONS') + + commit('SET_SECTIONS_CONTENT_LOCK_VERSIONS', lockVersions) + }) + .catch(({ response: { status } }) => { + commit('SET_SAVE_BUTTON_STATE', 'fail') + console.log('[Maglev] could not save the content', status) + if (status === 409) commit('OPEN_ERROR_MODAL', 'staleRecord') + }) + }, +}) diff --git a/app/frontend/editor/store/actions/site.js b/app/frontend/editor/store/actions/site.js index 04ad084f..afa9221e 100644 --- a/app/frontend/editor/store/actions/site.js +++ b/app/frontend/editor/store/actions/site.js @@ -5,6 +5,7 @@ export default (services) => ({ services.api.setSiteHandle(site.handle) commit('SET_SITE', rawSite) commit('SET_STYLE', style) + commit('SET_ONE_SINGLE_PAGE', site.numberOfPages === 1) }) }, loadPublishButtonState({ state, commit }) { diff --git a/app/frontend/editor/store/default-state.js b/app/frontend/editor/store/default-state.js index bc1590fd..fc3359a9 100644 --- a/app/frontend/editor/store/default-state.js +++ b/app/frontend/editor/store/default-state.js @@ -11,10 +11,14 @@ export default { hoveredSection: null, sectionBlock: null, sectionBlockDefinition: null, + sectionsContent: [], // array of layoutGroups + layoutGroups: {}, // each layoutGroup has a list of sections sections: {}, sectionBlocks: {}, + siteScopedSections: {}, // site-wide sections like headers/footers editorSettings: {}, touchedSections: [], + oneSinglePage: true, ui: { saveButtonState: 'default', publishButtonState: { diff --git a/app/frontend/editor/store/getters.js b/app/frontend/editor/store/getters.js index c6ccd81d..e92895ad 100644 --- a/app/frontend/editor/store/getters.js +++ b/app/frontend/editor/store/getters.js @@ -1,60 +1,131 @@ + import { isBlank } from '@/misc/utils.js' + export default (services) => ({ - sectionList: ( - { page, sections, sectionBlocks }, - { sectionDefinition: getSectiondefinition }, + // we need it to build the "Organize sections" pane + sectionsContent: ( + { sectionsContent, layoutGroups, sections, sectionBlocks }, + { sectionDefinition: getSectiondefinition, layoutGroupDefinition: getLayoutGroupDefinition }, ) => { - const pageContent = services.page.denormalize(page, { + const content = services.sectionsContent.denormalize(sectionsContent, { + layoutGroups, sections, - blocks: sectionBlocks, + blocks: sectionBlocks }) - if (!pageContent?.sections) return [] - return pageContent.sections.map((sectionContent) => { - const sectionDefinition = getSectiondefinition(sectionContent) + + return content.map(layoutGroup => { + const layoutDefinition = getLayoutGroupDefinition(layoutGroup.id) return { - id: sectionContent.id, - type: sectionContent['type'], - name: sectionDefinition.name, - viewportFixedPosition: !!sectionDefinition.viewportFixedPosition, + label: layoutDefinition.label, + ...layoutGroup, + sections: layoutGroup.sections.map(sectionContent => { + if (sectionContent.deleted) return + const sectionDefinition = getSectiondefinition(sectionContent) + return { + id: sectionContent.id, + type: sectionContent['type'], + name: sectionDefinition.name, + isMirrored: sectionContent.mirrorOf?.enabled ?? false, + mirroredPageTitle: sectionContent.mirrorOf?.pageTitle, + viewportFixedPosition: !!sectionDefinition.viewportFixedPosition, + } + }).filter(content => content) } }) }, - stickySectionList: (_, { sectionList }) => { - return sectionList.filter((section) => section.viewportFixedPosition) + + categoriesByLayoutGroupId: + ({ theme, page: { layoutId } }, { sectionsByLayoutGroupId }) => + (layoutGroupId) => { + const insertedSectionTypes = sectionsByLayoutGroupId(layoutGroupId).map(section => { + return isBlank(section.deleted) || section.deleted === false ? section.type : undefined + }).filter(section => section) + return services.theme.buildCategories({ + theme, + layoutId, + layoutGroupId, + insertedSectionTypes + }) + }, + + // return all the section types in the page + sectionTypes: ({ sections }) => { + return Object.values(sections).map((section) => section.type) + }, + stickySectionList: ({ sections }, { sectionDefinition: getSectiondefinition }) => { + return Object.values(sections).filter((sectionContent) => { + const sectionDefinition = getSectiondefinition(sectionContent) + return !!sectionDefinition.viewportFixedPosition + }) }, defaultPageAttributes: ({ page }) => { if (page.translated) return {} return { title: page.title, path: page.path } }, content: ( - { page, sections, sectionBlocks, touchedSections }, - { sectionDefinition: getSectiondefinition }, + { sectionsContent, layoutGroups, sections, sectionBlocks, touchedSections } ) => { - const pageContent = services.page.denormalize(page, { + return services.sectionsContent.denormalize(sectionsContent, { + layoutGroups, sections, blocks: sectionBlocks, }) - - const siteSections = pageContent.sections.filter( - (sectionContent) => getSectiondefinition(sectionContent).siteScoped, - ) - const hasModifiedSiteScopedSections = siteSections.some( - (sectionContent) => touchedSections.indexOf(sectionContent.id) !== -1, - ) - return { - pageSections: pageContent.sections, - siteSections: hasModifiedSiteScopedSections ? siteSections : [], - } }, - denormalizedSection: ({ page, sections, sectionBlocks, section }) => { - const pageContent = services.page.denormalize(page, { - sections, - blocks: sectionBlocks, - }) - return pageContent.sections.find((s) => s.id == section.id) + // denormalize the current section in the state + denormalizedSection: ({ section: { id: sectionId } }, { denormalizeSection }) => { + return denormalizeSection(sectionId) + }, + denormalizeSection: ({}, { content }) => + (sectionId) => { + for (const layoutGroupId in content) { + const sections = content[layoutGroupId].sections + const section = sections.find(s => s.id === sectionId) + if (section) return section + } + return null }, sectionContent: ({ section }) => { return section ? [...section.settings] : null }, + layoutDefinition: + ({ theme, page }) => { + return theme.layouts.find(layout => layout.id === page.layoutId) + }, + layoutGroupDefinition: + ({}, { layoutDefinition }) => + (layoutGroupId) => { + return layoutDefinition.groups.find(group => group.id === layoutGroupId) + }, + sectionLayoutGroupIdMap: + ({ layoutGroups }) => { + const memo = {} + for (const layoutGroupId in layoutGroups) { + layoutGroups[layoutGroupId].sections.forEach(sectionId => { + memo[sectionId] = layoutGroupId + }) + } + return memo + }, + sectionsByLayoutGroupId: + ({ layoutGroups, sections }) => + (layoutGroupId) => { + for (const groupId in layoutGroups) { + if (layoutGroupId !== groupId) continue + const layoutGroup = layoutGroups[groupId] + return layoutGroup.sections.map(sectionId => sections[sectionId]) + } + return [] + }, + deletedSection: + ({}, { layoutGroupDefinition, sectionsByLayoutGroupId }) => + (layoutGroupId, type) => { + const recoverable = layoutGroupDefinition(layoutGroupId).recoverable + + // if the section isn't recoverable, no need to get further + if (isBlank(recoverable) || recoverable.indexOf(type) === -1) return undefined + + const sections = sectionsByLayoutGroupId(layoutGroupId) + return sections.find(section => section.type === type && section.deleted) + }, sectionDefinition: ({ theme }) => (sectionContent) => { @@ -88,7 +159,6 @@ export default (services) => ({ return services.section.getBlockLabel(sectionBlock, definition, index) }, sectionBlockIndex: ({ section, sectionBlock }) => { - // console.log(section.blocks, sectionBlock) return sectionBlock ? section.blocks.indexOf(sectionBlock.id) + 1 : null }, sectionBlockContent: ({ sectionBlock }) => { @@ -99,4 +169,25 @@ export default (services) => ({ (advanced) => { return services.section.getSettings(sectionBlockDefinition, advanced) }, + canAddSection: + ({}, { categoriesByLayoutGroupId }) => + (layoutGroupId) => { + const categories = categoriesByLayoutGroupId(layoutGroupId) + return categories.some(({ children }) => children.length > 0) + }, + canAddMirroredSection: ({ theme, oneSinglePage }, { layoutGroupDefinition }) => + (layoutGroupId) => { + const layoutGroup = layoutGroupDefinition(layoutGroupId) + return theme.mirrorSection && layoutGroup.mirrorSection !== false && services.section.canAddMirroredSection({ + hasOneSinglePage: oneSinglePage + }) + }, + isMirroredSection: ({ section }) => { + return !isBlank(section.mirrorOf) + }, + isMirroredSectionEditable: ({ theme, section, page }, { isMirroredSection }) => { + if (!isMirroredSection) return false + if (section.mirrorOf.enabled === false) return true + return theme.mirrorSection === true || (theme.mirrorSection === 'protected' && section.mirrorOf?.pageId === page.id) + } }) diff --git a/app/frontend/editor/store/index.js b/app/frontend/editor/store/index.js index 585a24e9..da18b02a 100644 --- a/app/frontend/editor/store/index.js +++ b/app/frontend/editor/store/index.js @@ -22,6 +22,8 @@ store.dispatch('fetchSite', true) store.dispatch('setTheme', window.theme) store.dispatch('setPage', window.page) store.dispatch('setLocale', window.locale) +store.dispatch('setSectionsContent', window.sectionsContent) +store.dispatch('setSiteScopedSections', window.siteScopedSections) if (store.state.editorSettings.sitePublishable) store.dispatch('pollLastPublication') diff --git a/app/frontend/editor/store/mutations.js b/app/frontend/editor/store/mutations.js index a5e70eb6..323983dd 100644 --- a/app/frontend/editor/store/mutations.js +++ b/app/frontend/editor/store/mutations.js @@ -31,17 +31,44 @@ export default (services) => ({ state.theme = theme }, SET_PAGE(state, page) { - const { entities } = services.page.normalize(page) - state.page = entities.page[page.id] - state.sections = { ...state.sections, ...entities.sections } - state.sectionBlocks = { ...state.sectionBlocks, ...entities.blocks } - state.hoveredSection = null + state.page = page }, SET_PAGE_SETTINGS(state, page) { const attributes = pick(page, ...PAGE_SETTING_ATTRIBUTES) omitEmpty(attributes) state.page = { ...state.page, ...attributes } }, + SET_ONE_SINGLE_PAGE(state, oneSinglePage) { + state.oneSinglePage = oneSinglePage + }, + // === SECTIONS CONTENT === + SET_SECTIONS_CONTENT(state, content) { + const { entities, result } = services.sectionsContent.normalize(content) + + state.sectionsContent = [...result] + state.layoutGroups = { ...state.layoutGroups, ...entities.layoutGroups } + state.sections = { ...state.sections, ...entities.sections } + state.sectionBlocks = { ...state.sectionBlocks, ...entities.blocks } + state.hoveredSection = null + }, + SET_SITE_SCOPED_SECTIONS(state, sections) { + state.siteScopedSections = { ...sections } + }, + SET_SECTION_CONTENT(state, content) { + const { entities, result } = services.section.normalize(content) + + state.sections = { ...state.sections, ...entities.sections } + state.sectionBlocks = { ...state.sectionBlocks, ...entities.blocks } + }, + SET_SECTIONS_CONTENT_LOCK_VERSIONS(state, lockVersions) { + for (const { layoutGroupId, lockVersion } of lockVersions) { + state.layoutGroups[layoutGroupId] = { + ...state.layoutGroups[layoutGroupId], + lockVersion + } + } + }, + // === SECTION === SET_SECTION(state, section) { if (section) { const sectionDefinition = state.theme.sections.find( @@ -79,39 +106,62 @@ export default (services) => ({ state.sections[state.section.id] = updatedSection state.section = updatedSection }, - ADD_SECTION(state, { section, insertAt }) { + SET_SECTION_MIRROR_OF_ENABLED(state, enabled) { + let updatedSection = { ...state.section } + updatedSection.mirrorOf.enabled = enabled + + state.sections[state.section.id] = updatedSection + state.section = updatedSection + }, + ADD_SECTION(state, { layoutGroupId, section, insertAt }) { const { entities: { sections, blocks }, } = services.section.normalize(section) state.sections = { ...state.sections, [section.id]: sections[section.id] } state.sectionBlocks = { ...state.sectionBlocks, ...blocks } // hmmm??? - const updatedPage = { ...state.page } + const layoutGroup = { ...state.layoutGroups[layoutGroupId] } + // use a new mem reference for the list of sections + layoutGroup.sections = [...layoutGroup.sections] + switch (insertAt) { case 'top': - updatedPage.sections.unshift(section.id) + layoutGroup.sections.unshift(section.id) break case 'bottom': case undefined: case null: case '': - updatedPage.sections.push(section.id) + layoutGroup.sections.push(section.id) break default: - updatedPage.sections.splice( - updatedPage.sections.indexOf(insertAt) + 1, + layoutGroup.sections.splice( + layoutGroup.sections.indexOf(insertAt) + 1, 0, section.id, ) } - state.page = updatedPage - }, - REMOVE_SECTION(state, sectionId) { - state.page.sections.splice(state.page.sections.indexOf(sectionId), 1) + state.layoutGroups[layoutGroupId] = layoutGroup + }, + RESTORE_SECTION(state, sectionId) { + const section = state.sections[sectionId] + state.sections[sectionId] = { ...section, deleted: false } + }, + REMOVE_SECTION(state, { layoutGroupId, sectionId, recoverable }) { + const section = state.sections[sectionId] + + if (recoverable.indexOf(section.type) !== -1) { + // soft delete the section + state.sections[sectionId] = { ...section, deleted: true } + } else { + const sections = state.layoutGroups[layoutGroupId].sections + sections.splice(sections.indexOf(sectionId), 1) + } }, - MOVE_HOVERED_SECTION(state, { fromIndex, toIndex }) { - state.page.sections = arraymove(state.page.sections, fromIndex, toIndex) + MOVE_HOVERED_SECTION(state, { layoutGroupId, fromIndex, toIndex }) { + const layoutGroup = state.layoutGroups[layoutGroupId] + layoutGroup.sections = arraymove(layoutGroup.sections, fromIndex, toIndex) }, SET_SECTION_BLOCK(state, sectionBlock) { state.sectionBlock = sectionBlock diff --git a/app/frontend/editor/views/content-pane.vue b/app/frontend/editor/views/content-pane.vue index be755408..2fd50d79 100644 --- a/app/frontend/editor/views/content-pane.vue +++ b/app/frontend/editor/views/content-pane.vue @@ -4,6 +4,7 @@ :overflowY="false" :max-width-pane="isMaxWidthPane" :with-pre-title="isSectionBlockVersion" + :with-custom-title="isMirroredSection" >@@ -21,6 +22,20 @@
+ +
+
+ {{ title }}
+
+
+
+
@@ -11,10 +11,10 @@
diff --git a/app/frontend/live-preview-client/rails.js b/app/frontend/live-preview-client/rails.js
index 5837ba08..b340b7f2 100644
--- a/app/frontend/live-preview-client/rails.js
+++ b/app/frontend/live-preview-client/rails.js
@@ -34,8 +34,8 @@ export default { start }
// === Section related actions ===
const addSection = (event) => {
- const { content, section, insertAt } = event.detail
- debouncedUpdatePreviewDocument(content, section, insertAt)
+ const { layoutGroupId, content, section, insertAt } = event.detail
+ debouncedUpdatePreviewDocument(layoutGroupId, content, section, insertAt)
}
const moveSections = (event) => {
@@ -56,7 +56,7 @@ const moveSections = (event) => {
else
targetSectionElement.parentNode.insertBefore(
sectionElement,
- targetSectionElement.nextSibling,
+ targetSectionElement.nextElementSibling,
)
// scroll to the new placement of the section
@@ -64,8 +64,8 @@ const moveSections = (event) => {
}
const updateSection = (event) => {
- const { content, section, change } = event.detail
- updateSectionOrBlock(content, section, section, change)
+ const { layoutGroupId, content, section, change } = event.detail
+ updateSectionOrBlock(layoutGroupId, content, section, section, change)
}
const removeSection = (event) => {
@@ -78,13 +78,13 @@ const removeSection = (event) => {
// === Block related actions ===
const updateBlock = (event) => {
- const { content, section, sectionBlock, change } = event.detail
- updateSectionOrBlock(content, section, sectionBlock, change)
+ const { layoutGroupId, content, section, sectionBlock, change } = event.detail
+ updateSectionOrBlock(layoutGroupId, content, section, sectionBlock, change)
}
const replaceSection = (event) => {
- const { content, section } = event.detail
- debouncedUpdatePreviewDocument(content, section)
+ const { layoutGroupId, content, section } = event.detail
+ debouncedUpdatePreviewDocument(layoutGroupId, content, section)
}
// === Other actions ===
@@ -93,7 +93,7 @@ const updateStyle = async (event) => {
const { content, style } = event.detail
const doc = await getUpdatedDoc({
- pageSections: JSON.stringify(content.pageSections),
+ sectionsContent: JSON.stringify(content),
style: JSON.stringify(style),
})
@@ -109,9 +109,9 @@ const updateStyle = async (event) => {
// === Helpers ===
-const updateSectionOrBlock = (content, section, source, change) => {
+const updateSectionOrBlock = (layoutGroupId, content, section, source, change) => {
const foundSetting = updateSetting(source, change)
- if (!foundSetting) debouncedUpdatePreviewDocument(content, section)
+ if (!foundSetting) debouncedUpdatePreviewDocument(layoutGroupId, content, section)
}
const updateSetting = (source, change) => {
@@ -140,11 +140,14 @@ const updateTextSetting = (source, change) => {
return settings.length > 0
}
-const updatePreviewDocument = async (content, section, insertAt) => {
+const updatePreviewDocument = async (layoutGroupId, content, section, insertAt) => {
const doc = await getUpdatedDoc({
- pageSections: JSON.stringify([
- content.pageSections.find((s) => s.id == section.id), // no need to render the other sections
- ]),
+ sections_content: JSON.stringify([
+ {
+ id: layoutGroupId,
+ sections: [section]
+ }
+ ])
})
// NOTE: Instructions to refresh the whole document
@@ -162,7 +165,7 @@ const updatePreviewDocument = async (content, section, insertAt) => {
if (targetElement) {
targetElement.replaceWith(sourceElement)
} else {
- insertSectionInDOM(sourceElement, insertAt)
+ insertSectionInDOM(sourceElement, layoutGroupId, insertAt)
targetElement = previewDocument.querySelector(selector)
}
@@ -173,10 +176,11 @@ const updatePreviewDocument = async (content, section, insertAt) => {
const debouncedUpdatePreviewDocument = debounce(updatePreviewDocument, 300)
-const insertSectionInDOM = (element, insertAt) => {
+const insertSectionInDOM = (element, layoutGroupId, insertAt) => {
+ const dropzoneSelector = `[data-maglev-${layoutGroupId}-dropzone]`
switch (insertAt) {
case 'top': {
- const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+ const parentNode = previewDocument.querySelector(dropzoneSelector)
parentNode.prepend(element)
break
}
@@ -184,7 +188,7 @@ const insertSectionInDOM = (element, insertAt) => {
case undefined:
case null:
case '': {
- const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+ const parentNode = previewDocument.querySelector(dropzoneSelector)
parentNode.appendChild(element)
break
}
diff --git a/app/helpers/maglev/page_preview_helper.rb b/app/helpers/maglev/page_preview_helper.rb
index 985bd463..3d54295c 100644
--- a/app/helpers/maglev/page_preview_helper.rb
+++ b/app/helpers/maglev/page_preview_helper.rb
@@ -2,6 +2,21 @@
module Maglev
module PagePreviewHelper
+ def render_maglev_group(layout_group_id, site: nil, theme: nil, page: nil)
+ layout_group = maglev_page_sections.find { |group| group[:id] == layout_group_id.to_s }
+
+ unless layout_group
+ raise Maglev::Errors::UnknownLayoutGroup, "Layout group #{layout_group_id} hasn't been defined in the theme"
+ end
+
+ render_maglev_sections(
+ site: site,
+ theme: theme,
+ page: page,
+ page_sections: layout_group[:sections]
+ )
+ end
+
# rubocop:disable Rails/OutputSafety
def render_maglev_sections(site: nil, theme: nil, page: nil, page_sections: nil)
PageComponent.new(
@@ -14,19 +29,6 @@ def render_maglev_sections(site: nil, theme: nil, page: nil, page_sections: nil)
end
# rubocop:enable Rails/OutputSafety
- def render_maglev_section(type, site: nil, theme: nil, page: nil, page_sections: nil)
- sections = (page_sections || maglev_page_sections).find_all do |section|
- (section['type'] || section[:type]).start_with?(type.to_s)
- end
-
- render_maglev_sections(
- site: site,
- theme: theme,
- page: page,
- page_sections: sections
- )
- end
-
def render_maglev_alternate_links(links: nil, x_default_locale: nil)
links ||= maglev_page_fullpaths
x_default_locale ||= maglev_site.default_locale_prefix.to_sym
diff --git a/app/models/concerns/maglev/sections_concern.rb b/app/models/concerns/maglev/sections_concern.rb
index 462db56b..f3564f25 100644
--- a/app/models/concerns/maglev/sections_concern.rb
+++ b/app/models/concerns/maglev/sections_concern.rb
@@ -21,6 +21,26 @@ def prepare_sections_translations(theme)
end
end
+ def find_section_by_type(type)
+ sections&.find { |section| section['type'] == type }
+ end
+
+ def find_section(id)
+ sections.find { |section| section['id'] == id }
+ end
+
+ def update_section_content(id, attributes)
+ find_section(id).tap do |section|
+ replace_section_content(section, attributes) if section
+ end
+ end
+
+ def replace_section_content(section, attributes)
+ section['settings'] = attributes['settings']
+ section['blocks'] = attributes['blocks']
+ section
+ end
+
private
def prepare_section(theme, section)
diff --git a/app/models/maglev/page.rb b/app/models/maglev/page.rb
index fcc67c98..aa063e69 100644
--- a/app/models/maglev/page.rb
+++ b/app/models/maglev/page.rb
@@ -4,13 +4,17 @@ module Maglev
class Page < ApplicationRecord
## concerns ##
include Maglev::Translatable
- include Maglev::SectionsConcern
include Maglev::Page::PathConcern
include Maglev::Page::SearchConcern
+ ## associations ##
+ has_many :stores, class_name: 'Maglev::SectionsContentStore',
+ foreign_key: 'maglev_page_id', # required by Rails 7.0
+ dependent: :destroy,
+ inverse_of: :page
+
## translations ##
translates :title, presence: true
- translates :sections
translates :seo_title, :meta_description
translates :og_title, :og_description, :og_image_url
@@ -25,6 +29,9 @@ class Page < ApplicationRecord
where(paths: { locale: locale || Maglev::I18n.current_locale, value: path })
}
+ ## validation ##
+ validates :layout_id, presence: true
+
## methods ##
def index?
@@ -36,7 +43,7 @@ def static?
end
def translate_in(locale, source_locale)
- %i[title sections seo_title meta_description og_title og_description og_image_url].each do |attr|
+ %i[title seo_title meta_description og_title og_description og_image_url].each do |attr|
translate_attr_in(attr, locale, source_locale)
end
end
@@ -59,4 +66,9 @@ def translate_in(locale, source_locale)
# visible :boolean default(TRUE)
# created_at :datetime not null
# updated_at :datetime not null
+# layout_id :string
+#
+# Indexes
+#
+# index_maglev_pages_on_layout_id (layout_id)
#
diff --git a/app/models/maglev/page/path_concern.rb b/app/models/maglev/page/path_concern.rb
index 89a564ec..3f8dfc07 100644
--- a/app/models/maglev/page/path_concern.rb
+++ b/app/models/maglev/page/path_concern.rb
@@ -15,6 +15,7 @@ module Maglev::Page::PathConcern
## callbacks ##
before_validation { path } # force the initialization of a new path if it doesn't exist
+ after_validation :rewrite_path_error # use 'path' as the error attribute name
before_save :spawn_redirection, if: :spawn_redirection?
end
@@ -73,5 +74,12 @@ def spawn_redirection?
current_path.persisted? && current_path.will_save_change_to_value?
end
+
+ def rewrite_path_error
+ return if errors['paths.value'].blank?
+
+ errors['paths.value'].each { |message| errors.add(:path, message) }
+ errors.delete('paths.value')
+ end
end
# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/models/maglev/sections_content_store.rb b/app/models/maglev/sections_content_store.rb
new file mode 100644
index 00000000..79452ee7
--- /dev/null
+++ b/app/models/maglev/sections_content_store.rb
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Maglev
+ class SectionsContentStore < ApplicationRecord
+ ## concerns ##
+ include Maglev::Translatable
+ include Maglev::SectionsConcern
+
+ ## constants
+ SITE_HANDLE = '_site' # handle for the global site scoped sections
+
+ ## associations ##
+ belongs_to :page, class_name: 'Maglev::Page', foreign_key: 'maglev_page_id', optional: true, inverse_of: :stores
+
+ ## scopes ##
+ scope :by_handles, ->(handles) { where(Maglev::SectionsContentStore.arel_table[:handle].in(handles)) }
+
+ ## translations ##
+ translates :sections
+
+ validates :handle, presence: true, uniqueness: true
+
+ def translate_in(locale, source_locale)
+ translate_attr_in(:sections, locale, source_locale)
+ end
+ end
+end
+
+# == Schema Information
+#
+# Table name: maglev_sections_content_stores
+#
+# id :bigint not null, primary key
+# handle :string not null
+# lock_version :integer
+# sections_translations :jsonb
+# created_at :datetime not null
+# updated_at :datetime not null
+# maglev_page_id :bigint
+#
+# Indexes
+#
+# index_maglev_sections_content_stores_on_handle (handle)
+# index_maglev_sections_content_stores_on_maglev_page_id (maglev_page_id)
+#
+# Foreign Keys
+#
+# fk_rails_... (maglev_page_id => maglev_pages.id)
+#
diff --git a/app/models/maglev/site.rb b/app/models/maglev/site.rb
index e6802b86..7234bf90 100644
--- a/app/models/maglev/site.rb
+++ b/app/models/maglev/site.rb
@@ -4,11 +4,11 @@ module Maglev
class Site < ApplicationRecord
## concerns ##
include Maglev::Site::LocalesConcern
- include Maglev::SectionsConcern
- include Maglev::Translatable
+ # include Maglev::Translatable
+ # include Maglev::SectionsConcern # @deprecated Use SectionsContentStore instead
## translations ##
- translates :sections
+ # translates :sections # @deprecated Use SectionsContentStore instead
## validations ##
validates :name, presence: true
@@ -18,13 +18,15 @@ def api_attributes
%i[id name]
end
- def find_section(type)
- sections&.find { |section| section['type'] == type }
- end
+ # def find_section(type)
+ # ActiveSupport::Deprecation.warn('Not used anymore, replaced by SectionsContentStore')
+ # sections&.find { |section| section['type'] == type }
+ # end
- def translate_in(locale, source_locale)
- translate_attr_in(:sections, locale, source_locale)
- end
+ # def translate_in(locale, source_locale)
+ # ActiveSupport::Deprecation.warn('Not used anymore, replaced by SectionsContentStore')
+ # translate_attr_in(:sections, locale, source_locale)
+ # end
end
end
diff --git a/app/models/maglev/static_page.rb b/app/models/maglev/static_page.rb
index 64bb7c6a..a96e3626 100644
--- a/app/models/maglev/static_page.rb
+++ b/app/models/maglev/static_page.rb
@@ -36,5 +36,9 @@ def path_hash
def lock_version
0
end
+
+ def layout_id
+ 'default'
+ end
end
end
diff --git a/app/models/maglev/theme.rb b/app/models/maglev/theme.rb
index ee219314..924b9b1b 100644
--- a/app/models/maglev/theme.rb
+++ b/app/models/maglev/theme.rb
@@ -6,7 +6,8 @@ class Theme
include ActiveModel::Model
## attributes ##
- attr_accessor :id, :name, :description, :section_categories, :sections, :style_settings, :pages, :icons
+ attr_accessor :id, :name, :description, :section_categories, :sections, :layouts, :style_settings, :pages, :icons,
+ :mirror_section
## validations ##
validates :id, :name, presence: true
@@ -25,6 +26,14 @@ def find_setting(section_id, block_id, setting_id)
section_setting_types[key]
end
+ def find_layout(layout_id)
+ layouts.find { |layout| layout.id == layout_id }
+ end
+
+ def mirror_section?
+ !!mirror_section
+ end
+
private
def section_setting_types
diff --git a/app/models/maglev/theme/base_property.rb b/app/models/maglev/theme/base_property.rb
new file mode 100644
index 00000000..f2667f4a
--- /dev/null
+++ b/app/models/maglev/theme/base_property.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/ClassAndModuleChildren
+class Maglev::Theme::BaseProperty
+ ## concerns ##
+ include ActiveModel::Model
+
+ attr_accessor :id, :label
+
+ ## class methods ##
+
+ def self.build(_hash)
+ raise 'TO BE IMPLEMENTED'
+ end
+
+ def self.build_many(list)
+ (list || []).map { |hash| build(hash) }
+ end
+
+ def self.prepare_attributes(hash_or_string)
+ # rubocop:disable Style/StringHashKeys
+ hash = hash_or_string.is_a?(String) ? { 'label' => hash_or_string } : hash_or_string
+ # rubocop:enable Style/StringHashKeys
+
+ if hash['id'].present? || hash['label'].present?
+ hash['label'] ||= hash['id'].humanize
+ hash['id'] ||= hash['label'].parameterize(separator: '_')
+ end
+
+ hash
+ end
+end
+# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/models/maglev/theme/layout.rb b/app/models/maglev/theme/layout.rb
new file mode 100644
index 00000000..81d6f2ed
--- /dev/null
+++ b/app/models/maglev/theme/layout.rb
@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/ClassAndModuleChildren
+class Maglev::Theme::Layout < Maglev::Theme::BaseProperty
+ ## attributes ##
+ attr_accessor :groups
+
+ validates :id, :label, 'maglev/presence': true
+
+ ## class methods ##
+
+ def self.build(hash)
+ attributes = prepare_attributes(hash).slice('id', 'label', 'groups')
+
+ attributes['groups'] = Maglev::Theme::LayoutGroup.build_many(attributes['groups'])
+
+ new(attributes)
+ end
+
+ def self.build_many(list)
+ super(list.presence || [default_layout])
+ end
+
+ def self.default_layout
+ { id: 'default', label: 'Default', groups: [Maglev::Theme::LayoutGroup.default_group] }.with_indifferent_access
+ end
+end
+# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/models/maglev/theme/layout_group.rb b/app/models/maglev/theme/layout_group.rb
new file mode 100644
index 00000000..6b6e5a86
--- /dev/null
+++ b/app/models/maglev/theme/layout_group.rb
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/ClassAndModuleChildren
+class Maglev::Theme::LayoutGroup < Maglev::Theme::BaseProperty
+ ## attributes ##
+ attr_accessor :store, :accept, :recoverable, :mirror_section
+
+ validates :id, :label, 'maglev/presence': true
+
+ ## instance methods ##
+
+ def page_store?
+ store == 'page'
+ end
+
+ def guess_store_handle(page)
+ page_store? ? "#{id}-#{page.id}" : store
+ end
+
+ ## class methods ##
+
+ def self.build(hash)
+ attributes = prepare_attributes(hash).slice('id', 'label', 'store', 'accept', 'recoverable', 'mirror_section')
+
+ attributes['accept'] ||= ['*']
+ attributes['recoverable'] ||= []
+ attributes['store'] = attributes['id'] if attributes['store'] != false && attributes['store'].blank?
+
+ new(attributes)
+ end
+
+ def self.default_group
+ { id: 'main', label: 'Main' }.with_indifferent_access
+ end
+end
+# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/models/maglev/theme/section_category.rb b/app/models/maglev/theme/section_category.rb
index d8836175..d2e6f3d4 100644
--- a/app/models/maglev/theme/section_category.rb
+++ b/app/models/maglev/theme/section_category.rb
@@ -1,23 +1,14 @@
# frozen_string_literal: true
# rubocop:disable Style/ClassAndModuleChildren
-class Maglev::Theme::SectionCategory
- ## concerns ##
- include ActiveModel::Model
-
- ## attributes ##
- attr_accessor :name, :id
-
+class Maglev::Theme::SectionCategory < Maglev::Theme::BaseProperty
## class methods ##
def self.build(hash)
- attributes = hash.slice('name', 'id')
- attributes['id'] ||= attributes['name'].parameterize(separator: '_')
- new(attributes)
- end
+ # keep compatibility with the previous versions of Maglev
+ hash['label'] = hash['name'] if hash.respond_to?(:keys)
- def self.build_many(list)
- (list || []).map { |hash| build(hash) }
+ new(prepare_attributes(hash).slice('id', 'label'))
end
end
# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/models/maglev/theme/style_setting.rb b/app/models/maglev/theme/style_setting.rb
index 750d2ca9..b7ffd563 100644
--- a/app/models/maglev/theme/style_setting.rb
+++ b/app/models/maglev/theme/style_setting.rb
@@ -1,12 +1,9 @@
# frozen_string_literal: true
# rubocop:disable Style/ClassAndModuleChildren
-class Maglev::Theme::StyleSetting
- ## concerns ##
- include ActiveModel::Model
-
+class Maglev::Theme::StyleSetting < Maglev::Theme::BaseProperty
## attributes ##
- attr_accessor :id, :label, :type, :default, :options
+ attr_accessor :type, :default, :options
## validations ##
validates :id, :label, :type, :default, 'maglev/presence': true
@@ -30,14 +27,11 @@ def build_default_checkbox_content(default)
## class methods ##
def self.build(hash)
- attributes = hash.slice('id', 'label', 'type', 'default')
+ attributes = prepare_attributes(hash).slice('id', 'label', 'type', 'default')
+
options = hash.except('id', 'label', 'type', 'default')
new(attributes.merge(options: options))
end
-
- def self.build_many(list)
- list.map { |hash| build(hash) }
- end
end
# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/services/concerns/maglev/get_page_sections/transform_collection_item_concern.rb b/app/services/concerns/maglev/fetch_sections_content/transform_collection_item_concern.rb
similarity index 91%
rename from app/services/concerns/maglev/get_page_sections/transform_collection_item_concern.rb
rename to app/services/concerns/maglev/fetch_sections_content/transform_collection_item_concern.rb
index 88a62021..71859240 100644
--- a/app/services/concerns/maglev/get_page_sections/transform_collection_item_concern.rb
+++ b/app/services/concerns/maglev/fetch_sections_content/transform_collection_item_concern.rb
@@ -1,7 +1,7 @@
# frozen_string_literal: true
# rubocop:disable Style/ClassAndModuleChildren
-module Maglev::GetPageSections::TransformCollectionItemConcern
+module Maglev::FetchSectionsContent::TransformCollectionItemConcern
def transform_collection_item_content_setting(content, setting)
# the content might come from the default value of the collection_item setting
# rubocop:disable Style/StringHashKeys
diff --git a/app/services/concerns/maglev/get_page_sections/transform_link_concern.rb b/app/services/concerns/maglev/fetch_sections_content/transform_link_concern.rb
similarity index 94%
rename from app/services/concerns/maglev/get_page_sections/transform_link_concern.rb
rename to app/services/concerns/maglev/fetch_sections_content/transform_link_concern.rb
index 99d437e9..c91ff78a 100644
--- a/app/services/concerns/maglev/get_page_sections/transform_link_concern.rb
+++ b/app/services/concerns/maglev/fetch_sections_content/transform_link_concern.rb
@@ -1,7 +1,7 @@
# frozen_string_literal: true
# rubocop:disable Style/ClassAndModuleChildren
-module Maglev::GetPageSections::TransformLinkConcern
+module Maglev::FetchSectionsContent::TransformLinkConcern
def transform_link_content_setting(content, _setting)
return unless content['value'].is_a?(Hash) && %w[page static_page].include?(content.dig('value', 'link_type'))
diff --git a/app/services/concerns/maglev/fetch_sections_content/transform_section_concern.rb b/app/services/concerns/maglev/fetch_sections_content/transform_section_concern.rb
new file mode 100644
index 00000000..956ad0f1
--- /dev/null
+++ b/app/services/concerns/maglev/fetch_sections_content/transform_section_concern.rb
@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/ClassAndModuleChildren
+module Maglev::FetchSectionsContent::TransformSectionConcern
+ extend ActiveSupport::Concern
+
+ included do
+ include Maglev::FetchSectionsContent::TransformTextConcern
+ include Maglev::FetchSectionsContent::TransformLinkConcern
+ include Maglev::FetchSectionsContent::TransformCollectionItemConcern
+ end
+
+ private
+
+ def transform_section(section)
+ definition = theme.sections.find(section['type'])
+
+ raise_unknown_section_error(section['type']) unless definition
+
+ transform_section_blocks(section['blocks'], definition)
+ transform_section_settings(section, definition)
+
+ section
+ end
+
+ def transform_section_blocks(blocks, definition)
+ blocks.each do |block|
+ block_definition = definition.blocks.find { |bd| bd.type == block['type'] }
+
+ next unless block_definition
+
+ transform_section_settings(block, block_definition)
+ end
+ end
+
+ def transform_section_settings(section, definition)
+ remove_unused_settings(section, definition)
+
+ definition.settings.each do |setting|
+ section_setting = find_section_setting(section, setting.id)
+
+ next unless section_setting
+
+ transform_content_setting(section_setting, setting)
+ end
+ end
+
+ def transform_content_setting(content, setting)
+ case setting.type
+ when 'link'
+ transform_link_content_setting(content, setting)
+ when 'text'
+ transform_text_content_setting(content, setting)
+ when 'collection_item'
+ transform_collection_item_content_setting(content, setting)
+ end
+ end
+
+ def remove_unused_settings(section, definition)
+ section['settings'].select! do |setting|
+ definition.settings.any? do |definition_setting|
+ definition_setting.id == setting['id']
+ end
+ end
+ end
+
+ def find_section_setting(section, setting_id)
+ # NOTE: works for both sections and blocks
+ section['settings'].find { |setting| setting['id'] == setting_id }
+ end
+
+ def raise_unknown_section_error(type)
+ raise ::Maglev::Errors::UnknownSection, "Unknown Maglev section type (#{type})" unless Rails.env.production?
+
+ Rails.logger.warn "[#{theme.id}][#{handle}] unknown Maglev section type (#{type})"
+ end
+end
+# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/services/concerns/maglev/get_page_sections/transform_text_concern.rb b/app/services/concerns/maglev/fetch_sections_content/transform_text_concern.rb
similarity index 90%
rename from app/services/concerns/maglev/get_page_sections/transform_text_concern.rb
rename to app/services/concerns/maglev/fetch_sections_content/transform_text_concern.rb
index a97bc8c5..96feb453 100644
--- a/app/services/concerns/maglev/get_page_sections/transform_text_concern.rb
+++ b/app/services/concerns/maglev/fetch_sections_content/transform_text_concern.rb
@@ -1,11 +1,11 @@
# frozen_string_literal: true
# rubocop:disable Style/ClassAndModuleChildren
-module Maglev::GetPageSections::TransformTextConcern
+module Maglev::FetchSectionsContent::TransformTextConcern
def transform_text_content_setting(content, setting)
return unless setting.options['html']
- content['value'] = replace_links_in_text(content['value'])
+ content['value'] = replace_links_in_text(content['value'] || '')
end
def replace_links_in_text(text)
diff --git a/app/services/concerns/maglev/fetch_theme_concern.rb b/app/services/concerns/maglev/fetch_theme_concern.rb
new file mode 100644
index 00000000..1ba51cb4
--- /dev/null
+++ b/app/services/concerns/maglev/fetch_theme_concern.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# rubocop:disable Style/ClassAndModuleChildren
+module Maglev::FetchThemeConcern
+ def theme
+ @theme ||= fetch_theme.call
+ end
+
+ def layout
+ theme.find_layout(page.layout_id).tap do |layout|
+ raise Maglev::Errors::MissingLayout, "The page #{page.id} misses the layout_id property" if layout.nil?
+ end
+ end
+
+ def layout_page_groups
+ layout.groups.find_all(&:page_store?)
+ end
+
+ def sections_content_stores
+ Maglev::SectionsContentStore
+ end
+end
+# rubocop:enable Style/ClassAndModuleChildren
diff --git a/app/services/concerns/maglev/mirrored_sections_concern.rb b/app/services/concerns/maglev/mirrored_sections_concern.rb
new file mode 100644
index 00000000..4d1bfb45
--- /dev/null
+++ b/app/services/concerns/maglev/mirrored_sections_concern.rb
@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+# It requires the parent class to implement 2 methods:
+# - scoped_pages
+# - find_store
+module Maglev
+ module MirroredSectionsConcern
+ private
+
+ def persist_mirrored_sections(sections_content)
+ sections_content.map { |group| group['sections'] }.flatten.compact.find do |section|
+ next unless can_persist_mirrored_section?(section)
+
+ persist_mirrored_section(section.except('mirror_of'), section['mirror_of'])
+ end
+ end
+
+ def persist_mirrored_section(section, mirror_of)
+ store = find_store_from_mirrored_section(mirror_of)
+ mirror_section = store.update_section_content(mirror_of['section_id'], section)
+ store.save
+
+ # is the mirror section a mirrored section too?!
+ return unless mirror_section&.dig('mirror_of', 'enabled')
+
+ # No need to detect a circular dependency because this is impossible
+ # to change the mirror_of attributes of an existing section in the editor
+ persist_mirrored_section(mirror_section.except('mirror_of'), mirror_section['mirror_of'])
+ end
+
+ def replace_content_from_mirror_sections(store)
+ store.sections.each do |section|
+ next unless section.dig('mirror_of', 'enabled')
+
+ mirror_section = find_section_from_mirrored_section(section['mirror_of'])
+ next unless mirror_section
+
+ store.replace_section_content(section, mirror_section)
+ end
+ end
+
+ def find_store_from_mirrored_section(mirror_of)
+ other_page = scoped_pages.find_by(id: mirror_of['page_id'])
+ return unless other_page
+
+ layout = fetch_layout(other_page.layout_id)
+ layout_group = layout.groups.find { |group| group.id == mirror_of['layout_group_id'] }
+ return unless layout_group
+
+ find_store(layout_group, other_page)
+ end
+
+ def find_section_from_mirrored_section(mirror_of)
+ store = find_store_from_mirrored_section(mirror_of)
+ return unless store
+
+ store.find_section(mirror_of['section_id'])
+ end
+
+ def can_persist_mirrored_section?(section)
+ section.dig('mirror_of', 'enabled') && (
+ theme.mirror_section == true ||
+ (theme.mirror_section == 'protected' && section.dig('mirror_of', 'page_id') == page.id)
+ )
+ end
+ end
+end
diff --git a/app/services/concerns/maglev/site_scoped_sections_concern.rb b/app/services/concerns/maglev/site_scoped_sections_concern.rb
new file mode 100644
index 00000000..196d49d5
--- /dev/null
+++ b/app/services/concerns/maglev/site_scoped_sections_concern.rb
@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Maglev
+ module SiteScopedSectionsConcern
+ private
+
+ def persist_site_scoped_sections(sections_content)
+ sections_content.map { |group| group['sections'] }.flatten.compact.find do |section|
+ next unless site_scoped_section?(section)
+
+ update_site_scoped_section(section)
+ end
+ site_scoped_store.save!
+ end
+
+ def update_site_scoped_section(section)
+ store_section = site_scoped_store.find_section_by_type(section['type'])
+
+ if store_section.nil?
+ site_scoped_store.sections << section
+ else
+ site_scoped_store.replace_section_content(store_section, section)
+ end
+ end
+
+ def site_scoped_section?(section)
+ theme.sections.find(section['type']).site_scoped?
+ end
+
+ def replace_content_from_site_scoped_sections(store)
+ store.sections.each do |section|
+ next unless site_scoped_section?(section)
+
+ store_section = site_scoped_store.find_section_by_type(section['type'])
+ next unless store_section
+
+ store.replace_section_content(section, store_section)
+ end
+ end
+
+ def site_scoped_store
+ @site_scoped_store ||= scoped_stores.find_or_create_by(
+ handle: ::Maglev::SectionsContentStore::SITE_HANDLE
+ ) do |store|
+ store.sections_translations = site.locale_prefixes.index_with { |_locale| [] }
+ end
+ end
+ end
+end
diff --git a/app/services/maglev/add_site_locale.rb b/app/services/maglev/add_site_locale.rb
index 932290a3..43963962 100644
--- a/app/services/maglev/add_site_locale.rb
+++ b/app/services/maglev/add_site_locale.rb
@@ -19,22 +19,16 @@ def call
protected
def unsafe_call
- # Set a default content for site_scoped sections
- apply_to_site
-
site.save! # persist the new locale
# add a default content in the new locale to all the pages of the site
# based on the default locale. Also take care of the path.
apply_to_pages
- true
- end
+ # copy the content of the site to the new locale
+ apply_to_sections_content_stores
- def apply_to_site
- Maglev::I18n.with_locale(locale.prefix) do
- site.translate_in(locale.prefix, site.default_locale_prefix)
- end
+ true
end
def apply_to_pages
@@ -57,8 +51,21 @@ def default_page_path(page)
page.paths.find_by(locale: site.default_locale.prefix)&.value
end
+ def apply_to_sections_content_stores
+ store_resources.find_each do |store|
+ # set a default content which will be the same as in the default locale
+ store.translate_in(locale.prefix, site.default_locale_prefix)
+
+ store.save!
+ end
+ end
+
def resources
::Maglev::Page
end
+
+ def store_resources
+ ::Maglev::SectionsContentStore
+ end
end
end
diff --git a/app/services/maglev/app_container.rb b/app/services/maglev/app_container.rb
index 9bbea5e9..ad8dadf1 100644
--- a/app/services/maglev/app_container.rb
+++ b/app/services/maglev/app_container.rb
@@ -36,13 +36,18 @@ class AppContainer
dependency :fetch_page, class: Maglev::FetchPage, depends_on: %i[context fetch_site]
dependency :get_page_fullpath, class: Maglev::GetPageFullpath, depends_on: %i[fetch_site get_base_url]
- dependency :get_page_sections, class: Maglev::GetPageSections,
- depends_on: %i[fetch_site fetch_theme
+ dependency :fetch_sections_content, class: Maglev::FetchSectionsContent,
+ depends_on: %i[context fetch_site fetch_theme
fetch_static_pages
fetch_collection_items get_page_fullpath]
+ dependency :get_page_sections, class: Maglev::GetPageSections,
+ depends_on: %i[fetch_theme
+ fetch_sections_content fetch_collection_items]
+
+ dependency :get_site_scoped_sections, class: Maglev::GetSiteScopedSections, depends_on: :fetch_theme
dependency :get_page_section_names, class: Maglev::GetPageSectionNames, depends_on: :fetch_theme
- dependency :clone_page, class: Maglev::ClonePage, depends_on: :fetch_site
- dependency :persist_page, class: Maglev::PersistPage, depends_on: %i[fetch_theme]
+ dependency :clone_page, class: Maglev::ClonePage, depends_on: %i[fetch_site fetch_theme]
+ dependency :persist_sections_content, class: Maglev::PersistSectionsContent, depends_on: %i[fetch_theme]
def call
self
diff --git a/app/services/maglev/clone_page.rb b/app/services/maglev/clone_page.rb
index f8de5949..fc8db689 100644
--- a/app/services/maglev/clone_page.rb
+++ b/app/services/maglev/clone_page.rb
@@ -2,10 +2,13 @@
module Maglev
# Clone a page in all the locales.
- # The service also makes sure that
- # the path of the cloned page will be unique.
+ # The service also makes sure that the path of the cloned page will be unique.
class ClonePage
include Injectable
+ include Maglev::FetchThemeConcern
+
+ dependency :fetch_site
+ dependency :fetch_theme
argument :page
@@ -22,6 +25,7 @@ def create_page!
cloned_page.disable_spawn_redirection
clone_paths(cloned_page)
cloned_page.save!
+ clone_sections_content_stores(cloned_page)
end
end
@@ -29,13 +33,13 @@ def create_page!
def cloned_attributes
{
+ layout_id: page.layout_id,
title_translations: clone_title,
seo_title_translations: page.seo_title_translations,
meta_description_translations: page.meta_description_translations,
og_title_translations: page.og_title_translations,
og_description_translations: page.og_description_translations,
- og_image_url_translations: page.og_image_url_translations,
- sections_translations: page.sections_translations
+ og_image_url_translations: page.og_image_url_translations
}
end
@@ -58,5 +62,22 @@ def generate_clone_code(number)
charset = Array('A'..'Z') + Array('a'..'z')
Array.new(number) { charset.sample }.join
end
+
+ def clone_sections_content_stores(cloned_page)
+ layout_page_groups.each do |group|
+ store = sections_content_stores.find_by(handle: group.guess_store_handle(page))
+
+ next if store.nil?
+
+ clone_sections_content_store(store, group.guess_store_handle(cloned_page))
+ end
+ end
+
+ def clone_sections_content_store(store, handle)
+ sections_content_stores.create!(
+ handle: handle,
+ sections_translations: store.sections_translations
+ )
+ end
end
end
diff --git a/app/services/maglev/fetch_sections_content.rb b/app/services/maglev/fetch_sections_content.rb
new file mode 100644
index 00000000..90a887be
--- /dev/null
+++ b/app/services/maglev/fetch_sections_content.rb
@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Maglev
+ # Get the content of a store in a specific locale.
+ # The content comes from the sections of the store.
+ # Also replace the links by their real values based on the context (live editing or not).
+ class FetchSectionsContent
+ include Injectable
+ include Maglev::FetchSectionsContent::TransformSectionConcern
+ include Maglev::MirroredSectionsConcern
+ include Maglev::SiteScopedSectionsConcern
+
+ dependency :context
+ dependency :fetch_site
+ dependency :fetch_theme
+ dependency :fetch_collection_items
+ dependency :fetch_static_pages
+ dependency :get_page_fullpath
+
+ argument :handle
+ argument :locale, default: nil
+
+ def call
+ store = find_or_build_store
+ [transform_sections(store), store.lock_version]
+ end
+
+ private
+
+ def theme
+ @theme ||= fetch_theme.call
+ end
+
+ def site
+ @site ||= fetch_site.call
+ end
+
+ def find_or_build_store
+ scoped_stores.find_or_initialize_by(handle: handle) do |store|
+ store.sections_translations = site.locale_prefixes.index_with { |_locale| [] }
+ end
+ end
+
+ def transform_sections(store)
+ # look for mirrored sections / global site scoped sections and get the fresh content
+ replace_content_from_mirror_sections(store)
+ replace_content_from_site_scoped_sections(store)
+
+ store.sections.map do |section|
+ transform_section(section.dup)
+ end.compact
+ end
+
+ def fetch_layout(layout_id = nil)
+ theme.find_layout(layout_id || page.layout_id).tap do |layout|
+ if layout.nil?
+ raise Maglev::Errors::MissingLayout,
+ "#{layout_id || page.layout_id} doesn't match a layout of the theme"
+ end
+ end
+ end
+
+ def find_store(group, page)
+ scoped_stores.find_by(handle: group.guess_store_handle(page))
+ end
+
+ def scoped_stores
+ Maglev::SectionsContentStore
+ end
+
+ def scoped_pages
+ Maglev::Page
+ end
+ end
+end
diff --git a/app/services/maglev/fetch_theme_layout.rb b/app/services/maglev/fetch_theme_layout.rb
index e4d8544b..e30bd52e 100644
--- a/app/services/maglev/fetch_theme_layout.rb
+++ b/app/services/maglev/fetch_theme_layout.rb
@@ -10,7 +10,9 @@ class FetchThemeLayout
argument :page
def call
- 'theme/layout'
+ return 'theme/layout' if page.layout_id.blank?
+
+ "theme/layouts/#{page.layout_id}"
end
end
end
diff --git a/app/services/maglev/get_page_section_names.rb b/app/services/maglev/get_page_section_names.rb
index 4877853c..6dc8fce1 100644
--- a/app/services/maglev/get_page_section_names.rb
+++ b/app/services/maglev/get_page_section_names.rb
@@ -9,17 +9,58 @@ class GetPageSectionNames
argument :page
+ # [
+ # { id: 'abc', name: 'Navbar', layoutGroupId: 'header', layoutGroupLabel: 'Header' },
+ # { id: 'dfdf', name: 'Jumbotron', layoutGroupId: 'main', layoutGroupLabel: 'Main' },
+ # { id: 'gdgg', name: 'BigFooter', layoutGroupId: 'footer', layoutGroupLabel: 'Footer' }
+ # ]
def call
- (page.sections || []).map do |section|
- definition = theme.sections.find(section['type'])
- { id: section['id'], name: definition.name }
- end
+ fetch_stores.map do |(store, group)|
+ # if the store hasn't been translated yet, there won't any sections
+ (store.sections || []).map do |section|
+ build_item(section, group)
+ end
+ end.flatten
+ rescue Maglev::Errors::MissingLayout => e
+ # for instance, static pages might not have a defined layout
+ # AND by default, all the other pages must have a layout_id property
+ Rails.logger.warn e.message
+ []
end
protected
+ def build_item(section, group)
+ definition = theme.sections.find(section['type'])
+ {
+ id: section['id'],
+ name: definition.name,
+ layout_group_id: group.id,
+ layout_group_label: group.label
+ }
+ end
+
+ def fetch_stores
+ handles = layout.groups.index_by do |group|
+ group.guess_store_handle(page)
+ end
+ scoped_store.by_handles(handles.keys).map do |store|
+ [store, handles[store.handle]]
+ end
+ end
+
def theme
- fetch_theme.call
+ @theme ||= fetch_theme.call
+ end
+
+ def layout
+ theme.find_layout(page.layout_id).tap do |layout|
+ raise Maglev::Errors::MissingLayout, "The page #{page.id} misses the layout_id property" if layout.nil?
+ end
+ end
+
+ def scoped_store
+ Maglev::SectionsContentStore
end
end
end
diff --git a/app/services/maglev/get_page_sections.rb b/app/services/maglev/get_page_sections.rb
index 61c49724..3950510b 100644
--- a/app/services/maglev/get_page_sections.rb
+++ b/app/services/maglev/get_page_sections.rb
@@ -6,115 +6,70 @@ module Maglev
# Also replace the links by their real values based on the context (live editing or not).
class GetPageSections
include Injectable
- include Maglev::GetPageSections::TransformTextConcern
- include Maglev::GetPageSections::TransformLinkConcern
- include Maglev::GetPageSections::TransformCollectionItemConcern
+ include Maglev::FetchSectionsContent::TransformSectionConcern
- dependency :fetch_site
dependency :fetch_theme
+ dependency :fetch_sections_content
dependency :fetch_collection_items
- dependency :fetch_static_pages
- dependency :get_page_fullpath
argument :page
- argument :page_sections, default: nil
+ argument :sections_content, default: nil
argument :locale, default: nil
+ argument :include_deleted, default: false
def call
- (page_sections || page.sections || []).map do |section|
- transform_section(section.dup)
- end.compact
+ layout.groups.map do |group|
+ sections, lock_version = fetch_sections(group)
+ {
+ id: group.id,
+ sections: filter_sections(sections),
+ lock_version: lock_version
+ }
+ end
end
protected
def theme
- fetch_theme.call
- end
-
- def site
- fetch_site.call
- end
-
- def transform_section(section)
- definition = theme.sections.find(section['type'])
-
- raise_unknown_section_error(section['type']) unless definition
-
- transform_if_site_scoped(section, definition)
- transform_section_blocks(section['blocks'], definition)
- transform_section_settings(section, definition)
-
- section
- end
-
- # rubocop:disable Style/StringHashKeys
- def transform_if_site_scoped(section, definition)
- return unless definition.site_scoped?
-
- site_section = site.find_section(section['type'])
-
- return unless !page_sections && site_section
-
- # keep the same section id all over the pages
- section.merge!(
- 'id' => site_section['id'],
- 'settings' => site_section['settings'],
- 'blocks' => site_section['blocks']
- )
+ @theme ||= fetch_theme.call
end
- # rubocop:enable Style/StringHashKeys
- def transform_section_blocks(blocks, definition)
- blocks.each do |block|
- block_definition = definition.blocks.find { |bd| bd.type == block['type'] }
-
- next unless block_definition
-
- transform_section_settings(block, block_definition)
+ def layout
+ theme.find_layout(page.layout_id).tap do |layout|
+ raise Maglev::Errors::MissingLayout, "The page #{page.id} misses the layout_id property" if layout.nil?
end
end
- def transform_section_settings(section, definition)
- remove_unused_settings(section, definition)
-
- definition.settings.each do |setting|
- section_setting = find_section_setting(section, setting.id)
-
- next unless section_setting
-
- transform_content_setting(section_setting, setting)
+ def filter_sections(sections)
+ sections.select do |section|
+ include_deleted || section['deleted'].nil? || !section['deleted']
end
end
- def transform_content_setting(content, setting)
- case setting.type
- when 'link'
- transform_link_content_setting(content, setting)
- when 'text'
- transform_text_content_setting(content, setting)
- when 'collection_item'
- transform_collection_item_content_setting(content, setting)
+ def fetch_sections(group)
+ if sections_content
+ fetch_local_sections(group)
+ else
+ fetch_stored_sections(group)
end
end
- def remove_unused_settings(section, definition)
- section['settings'].select! do |setting|
- definition.settings.any? do |definition_setting|
- definition_setting.id == setting['id']
- end
- end
+ def fetch_stored_sections(group)
+ fetch_sections_content.call(
+ handle: group.guess_store_handle(page),
+ locale: locale
+ )
end
- def find_section_setting(section, setting_id)
- # NOTE: works for both sections and blocks
- section['settings'].find { |setting| setting['id'] == setting_id }
- end
+ def fetch_local_sections(layout_group)
+ content_group = sections_content.find { |group| group['id'] == layout_group.id }
- def raise_unknown_section_error(type)
- raise ::Maglev::Errors::UnknownSection, "Unknown Maglev section type (#{type})" unless Rails.env.production?
+ return [[], 0] if content_group.blank?
- Rails.logger.warn "[#{theme.id}] unknown Maglev section type (#{type})"
+ [
+ content_group['sections'].map { |section| transform_section(section) },
+ 0
+ ]
end
end
end
diff --git a/app/services/maglev/get_site_scoped_sections.rb b/app/services/maglev/get_site_scoped_sections.rb
new file mode 100644
index 00000000..26261573
--- /dev/null
+++ b/app/services/maglev/get_site_scoped_sections.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Maglev
+ # Get the content of the global site scoped sections.
+ # The content comes from the sections of the page.
+ # Also replace the links by their real values based on the context (live editing or not).
+ class GetSiteScopedSections
+ include Injectable
+ include Maglev::FetchSectionsContent::TransformSectionConcern
+
+ dependency :fetch_site
+ dependency :fetch_theme
+
+ def call
+ fetch_stored_sections.each_with_object({}) do |section, memo|
+ memo[section['type']] = transform_section(section.dup)
+ end
+ end
+
+ private
+
+ def fetch_stored_sections
+ scoped_stores.find_by(handle: Maglev::SectionsContentStore::SITE_HANDLE)&.sections || []
+ end
+
+ def scoped_stores
+ Maglev::SectionsContentStore
+ end
+
+ def theme
+ @theme ||= fetch_theme.call
+ end
+ end
+end
diff --git a/app/services/maglev/persist_page.rb b/app/services/maglev/persist_page.rb
deleted file mode 100644
index a6386310..00000000
--- a/app/services/maglev/persist_page.rb
+++ /dev/null
@@ -1,97 +0,0 @@
-# frozen_string_literal: true
-
-module Maglev
- class PersistPage
- include Injectable
-
- dependency :fetch_theme
-
- argument :page
- argument :page_attributes
- argument :site
- argument :site_attributes, default: nil
- argument :theme, default: nil
-
- def call
- ActiveRecord::Base.transaction do
- persist_page!
- persist_site!
- persist_style!
- page
- end
- end
-
- private
-
- def persist_page!
- page.attributes = page_attributes
-
- # the sections_translations attribute is put by the SetupPages service
- # when we generate a brand new site
- if page_attributes.key?(:sections_translations)
- page.prepare_sections_translations(theme)
- else
- page.prepare_sections(theme)
- end
-
- page.save!
- end
-
- def persist_site!
- return unless can_persist_site?
-
- assign_sections_to_site
-
- site.save!
- end
-
- def persist_style!
- return if site_attributes&.dig(:style).blank?
-
- site.style = site_attributes[:style]
- site.save!
- end
-
- def theme
- @theme ||= fetch_theme.call
- end
-
- # unlike the pages, we don't want to erase
- # the other global sections of a site if they're missing
- # from the site_attributes
- def site_attributes_with_consistent_sections
- attributes = site_attributes.dup
-
- site.sections&.each do |section|
- next if site_section_types.include?(section['type'])
-
- attributes[:sections].push(section)
- end
-
- attributes
- end
-
- def site_section_types
- @site_section_types ||= site_attributes[:sections].map { |section| section[:type] }
- end
-
- def can_persist_site?
- site_attributes.present? && (
- site_attributes[:sections].present? ||
- site_attributes[:sections_translations].present?
- )
- end
-
- def assign_sections_to_site
- # the sections_translations attribute is put by the SetupPages service
- # when we generate a brand new site
- if site_attributes.key?(:sections_translations)
- site.attributes = site_attributes
- site.prepare_sections_translations(theme)
- else
- site.attributes = site_attributes_with_consistent_sections
- site.prepare_sections(theme)
- end
- end
- end
-end
diff --git a/app/services/maglev/persist_sections_content.rb b/app/services/maglev/persist_sections_content.rb
new file mode 100644
index 00000000..93941509
--- /dev/null
+++ b/app/services/maglev/persist_sections_content.rb
@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Maglev
+ class PersistSectionsContent
+ include Injectable
+ include Maglev::MirroredSectionsConcern
+ include Maglev::SiteScopedSectionsConcern
+
+ dependency :fetch_theme
+
+ argument :site
+ argument :page
+ argument :sections_content
+ argument :theme, default: nil
+
+ def call
+ ActiveRecord::Base.transaction do
+ unsafe_call
+ end
+ end
+
+ def unsafe_call
+ content = layout.groups.map do |group|
+ [group.id, persist_group_content(group, extract_store_attributes(group))]
+ end.to_h
+
+ persist_mirrored_sections(sections_content)
+
+ persist_site_scoped_sections(sections_content)
+
+ content
+ end
+
+ private
+
+ def theme
+ @theme ||= fetch_theme.call
+ end
+
+ def site
+ @site ||= fetch_site.call
+ end
+
+ def layout
+ @layout ||= fetch_layout(page.layout_id)
+ end
+
+ def persist_group_content(group, attributes)
+ store = find_store(group, page)
+ store.attributes = attributes
+
+ if attributes.key?('sections_translations')
+ store.prepare_sections_translations(theme)
+ else
+ store.prepare_sections(theme)
+ end
+
+ store.save!
+ store
+ end
+
+ def extract_store_attributes(group)
+ (sections_content.find do |content_group|
+ content_group['id'] == group.id
+ end || {}).slice('sections', 'sections_translations', 'lock_version')
+ end
+
+ def find_store(group, page)
+ scoped_stores.find_or_create_by(handle: group.guess_store_handle(page)) do |store|
+ store.page = page if group.page_store?
+ store.sections_translations = site.locale_prefixes.index_with { |_locale| [] }
+ end
+ end
+
+ def fetch_layout(layout_id = nil)
+ theme.find_layout(layout_id || page.layout_id).tap do |layout|
+ if layout.nil?
+ raise Maglev::Errors::MissingLayout,
+ "#{layout_id || page.layout_id} doesn't match a layout of the theme"
+ end
+ end
+ end
+
+ def scoped_stores
+ Maglev::SectionsContentStore
+ end
+
+ def scoped_pages
+ Maglev::Page
+ end
+ end
+end
diff --git a/app/services/maglev/setup_pages.rb b/app/services/maglev/setup_pages.rb
index 5ad717e5..a10377f3 100644
--- a/app/services/maglev/setup_pages.rb
+++ b/app/services/maglev/setup_pages.rb
@@ -6,58 +6,61 @@ module Maglev
class SetupPages
include Injectable
- dependency :persist_page, class: Maglev::PersistPage
+ dependency :persist_sections_content, class: Maglev::PersistSectionsContent
argument :site
argument :theme
def call
- pages&.map do |page_attributes|
- create_page(
- attributes_in_all_locales(page_attributes.with_indifferent_access)
- )
+ preset_pages&.map do |raw_attributes|
+ create_resources(raw_attributes.with_indifferent_access)
end
end
private
- def pages
+ def preset_pages
theme&.pages
end
- def create_page(page_attributes)
- persist_page.call(
- site: site,
- site_attributes: site_attributes_from(page_attributes),
- theme: theme,
- page: Maglev::Page.new,
- page_attributes: page_attributes
- )
+ def create_resources(attributes)
+ create_page(page_attributes(attributes)).tap do |page|
+ create_sections_content(page, sections_content_attributes(attributes))
+ end
end
- def site_attributes_from(page_attributes)
- if page_attributes.include?(:sections_translations)
- { sections_translations: site_sections_translations(page_attributes) }
- else
- { sections: select_site_scoped_sections(page_attributes[:sections]) }
- end.compact || {}
+ def create_page(page_attributes)
+ scoped_pages.create!(page_attributes)
end
- def site_sections_translations(page_attributes)
- sections_translations = page_attributes[:sections_translations].transform_values do |sections|
- select_site_scoped_sections(sections)
- end
- sections_translations.any? { |_, sections| sections.blank? } ? nil : sections_translations
+ def create_sections_content(page, sections_content)
+ return if sections_content.blank?
+
+ persist_sections_content.call(
+ theme: theme,
+ site: site,
+ page: page,
+ sections_content: sections_content
+ )
end
- def attributes_in_all_locales(attributes)
+ def page_attributes(attributes)
{
title_translations: value_in_all_locales(attributes[:title]),
- sections_translations: value_in_all_locales(attributes[:sections]),
- path: value_in_all_locales(attributes[:path])
+ path: value_in_all_locales(attributes[:path]),
+ layout_id: attributes[:layout_id] || theme.layouts.first&.id
}
end
+ def sections_content_attributes(attributes)
+ attributes[:sections_content]&.keys&.map do |group_id|
+ {
+ id: group_id,
+ sections_translations: value_in_all_locales(attributes.dig(:sections_content, group_id))
+ }.with_indifferent_access
+ end
+ end
+
def value_in_all_locales(value)
if value.respond_to?(:each_pair)
default_value = value[site.default_locale_prefix]
@@ -71,14 +74,8 @@ def fill_translations(value)
site.locale_prefixes.index_with { |_locale| value }
end
- def select_site_scoped_sections(sections)
- (sections || []).find_all do |section|
- definition = theme.sections.find(section['type'])
-
- raise "[Maglev] Unknown section type: #{section['type']}" unless definition
-
- definition.site_scoped?
- end
+ def scoped_pages
+ ::Maglev::Page
end
end
end
diff --git a/app/services/maglev/upgrade_from_v1.rb b/app/services/maglev/upgrade_from_v1.rb
new file mode 100644
index 00000000..d2a7276e
--- /dev/null
+++ b/app/services/maglev/upgrade_from_v1.rb
@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Maglev
+ class UpgradeFromV1
+ include Injectable
+
+ argument :site
+ argument :theme
+
+ def call
+ ActiveRecord::Base.transaction do
+ unsafe_call
+ end
+ end
+
+ private
+
+ def unsafe_call
+ migrate_site_scoped_sections
+ migrate_pages
+ upgrade_layout_template
+ end
+
+ def migrate_site_scoped_sections
+ Maglev::SectionsContentStore.create!(
+ handle: ::Maglev::SectionsContentStore::SITE_HANDLE,
+ sections_translations: site['sections_translations']
+ )
+ end
+
+ def migrate_pages
+ pages.find_each do |page|
+ upgrade_page(page)
+ end
+ end
+
+ def upgrade_page(page)
+ create_sections_content_store(page)
+
+ page.update!(layout_id: default_layout.id)
+ end
+
+ def create_sections_content_store(page)
+ Maglev::SectionsContentStore.create!(
+ page: page,
+ handle: "#{default_layout_group.id}-#{page.id}",
+ sections_translations: page['sections_translations']
+ )
+ end
+
+ def upgrade_layout_template
+ template = load_old_layout_template
+ .gsub('data-maglev-dropzone',
+ "data-maglev-#{default_layout_group.id}-dropzone")
+ .gsub('render_maglev_sections', "render_maglev_group :#{default_layout_group.id}")
+
+ persist_layout_template(template, "#{default_layout.id}.html.erb")
+ end
+
+ def pages
+ Maglev::Page
+ end
+
+ def default_layout
+ theme.layouts.first
+ end
+
+ def default_layout_group
+ default_layout.groups.first
+ end
+
+ def load_old_layout_template
+ File.read(Rails.root.join('app/views/theme/layout.html.erb').to_s)
+ end
+
+ def persist_layout_template(template, filename)
+ File.write(Rails.root.join("app/views/theme/layouts/#{filename}").to_s, template)
+ end
+ end
+end
diff --git a/app/views/maglev/admin/themes/_section_categories.html.erb b/app/views/maglev/admin/themes/_section_categories.html.erb
index e5cbb699..f3a7a1c6 100644
--- a/app/views/maglev/admin/themes/_section_categories.html.erb
+++ b/app/views/maglev/admin/themes/_section_categories.html.erb
@@ -1,7 +1,7 @@
<% theme.section_categories.each_with_index do |category, index| %>
<%- selected = section_category_id == category.id %>
<%= link_to section_category_path(category), class: ['rounded-full text-sm px-4 py-1 mr-3 flex items-center transition-colors whitespace-nowrap', selected ? 'bg-purple-600 bg-opacity-25 text-purple-600' : 'bg-gray-300 text-gray-800 hover:bg-gray-400 hover:text-gray-900'].compact.join(' ') do %>
- <%= category.name.humanize %>
+ <%= category.label %>
<%= tag.span class: ['ml-2 font-bold text-xs text-white rounded-full w-4 h-4 flex items-center justify-center', selected ? 'bg-purple-600' : 'bg-gray-600'].compact.join(' ') do %>
<%= theme.sections.grouped_by_category[category.id]&.count || 0 %>
<% end %>
diff --git a/app/views/maglev/api/pages/_show.json.jbuilder b/app/views/maglev/api/pages/_show.json.jbuilder
index 39dbe9f3..464399a0 100644
--- a/app/views/maglev/api/pages/_show.json.jbuilder
+++ b/app/views/maglev/api/pages/_show.json.jbuilder
@@ -7,6 +7,7 @@ json.id page.id
json.title page.title || page.default_title
json.path page.path || page.default_path
json.path_hash page.path_hash
+json.layout_id page.layout_id
json.visible page.visible
json.seo_title page.seo_title
@@ -17,7 +18,7 @@ json.og_image_url page.og_image_url
json.preview_url services.get_page_fullpath.call(page: page, preview_mode: true, locale: content_locale)
json.live_url services.get_page_fullpath.call(page: page, preview_mode: false, locale: content_locale)
-json.section_names services.get_page_section_names.call(page: page)
-json.sections services.get_page_sections.call(page: page)
json.lock_version page.lock_version
json.translated page.path.present?
+
+json.section_names services.get_page_section_names.call(page: page)
diff --git a/app/views/maglev/api/pages/index.json.jbuilder b/app/views/maglev/api/pages/index.json.jbuilder
index c26c0079..0bd45fdd 100644
--- a/app/views/maglev/api/pages/index.json.jbuilder
+++ b/app/views/maglev/api/pages/index.json.jbuilder
@@ -4,6 +4,7 @@ json.array! @pages do |page|
json.id page.id
json.title page.title || page.default_title
json.path page.path || page.default_path
+ json.layout_id page.layout_id
json.visible page.visible
json.static page.static?
diff --git a/app/views/maglev/api/sections_content/_show.json.jbuilder b/app/views/maglev/api/sections_content/_show.json.jbuilder
new file mode 100644
index 00000000..cff5ffd2
--- /dev/null
+++ b/app/views/maglev/api/sections_content/_show.json.jbuilder
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+json.key_format! camelize: :lower
+json.deep_format_keys!
+
+json.array! sections_content do |group|
+ json.id group[:id]
+ json.sections group[:sections]
+ json.lock_version group[:lock_version]
+end
diff --git a/app/views/maglev/api/sections_content/_site_scoped_sections.json.jbuilder b/app/views/maglev/api/sections_content/_site_scoped_sections.json.jbuilder
new file mode 100644
index 00000000..56a81d72
--- /dev/null
+++ b/app/views/maglev/api/sections_content/_site_scoped_sections.json.jbuilder
@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+site_scoped_sections.each do |type, section|
+ json.set! type do
+ json.key_format! camelize: :lower
+ json.deep_format_keys!
+
+ json.merge! section
+ end
+end
diff --git a/app/views/maglev/api/sections_content/show.json.jbuilder b/app/views/maglev/api/sections_content/show.json.jbuilder
new file mode 100644
index 00000000..0bad3266
--- /dev/null
+++ b/app/views/maglev/api/sections_content/show.json.jbuilder
@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+json.partial!('show', sections_content: @sections_content)
diff --git a/app/views/maglev/api/sections_content/update.json.jbuilder b/app/views/maglev/api/sections_content/update.json.jbuilder
new file mode 100644
index 00000000..b0b44651
--- /dev/null
+++ b/app/views/maglev/api/sections_content/update.json.jbuilder
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+json.key_format! camelize: :lower
+json.deep_format_keys!
+
+json.lock_versions(@stores.transform_values(&:lock_version).to_a.map do |(layout_group_id, lock_version)|
+ { layout_group_id: layout_group_id, lock_version: lock_version }
+end)
diff --git a/app/views/maglev/api/sites/_show.json.jbuilder b/app/views/maglev/api/sites/_show.json.jbuilder
index e77dd05d..3c6c2627 100644
--- a/app/views/maglev/api/sites/_show.json.jbuilder
+++ b/app/views/maglev/api/sites/_show.json.jbuilder
@@ -3,13 +3,13 @@
json.key_format! camelize: :lower
json.deep_format_keys!
-json.sections site.sections || []
-
json.style services.fetch_style.call(site: site, theme: maglev_theme).as_json
json.locales site.locales
json.call(site, *site.api_attributes)
+
json.home_page_id home_page_id
+json.number_of_pages number_of_pages
json.lock_version site.lock_version
diff --git a/app/views/maglev/api/sites/show.json.jbuilder b/app/views/maglev/api/sites/show.json.jbuilder
index 7e264bfa..42ff65b1 100644
--- a/app/views/maglev/api/sites/show.json.jbuilder
+++ b/app/views/maglev/api/sites/show.json.jbuilder
@@ -1,3 +1,3 @@
# frozen_string_literal: true
-json.partial!('show', site: @site, home_page_id: @home_page_id)
+json.partial!('show', site: @site, home_page_id: @home_page_id, number_of_pages: @number_of_pages)
diff --git a/app/views/maglev/api/themes/_show.json.jbuilder b/app/views/maglev/api/themes/_show.json.jbuilder
index d664630c..a3f26403 100644
--- a/app/views/maglev/api/themes/_show.json.jbuilder
+++ b/app/views/maglev/api/themes/_show.json.jbuilder
@@ -15,3 +15,11 @@ end
json.section_categories theme.section_categories.as_json
json.icons theme.icons || []
json.style_settings theme.style_settings.as_json
+json.mirror_section theme.mirror_section
+json.layouts theme.layouts do |layout|
+ json.call(layout, :id, :label)
+ json.groups layout.groups do |group|
+ json.call(group, :id, :label, :store, :accept, :recoverable)
+ json.mirror_section group.mirror_section == false ? false : theme.mirror_section
+ end
+end
diff --git a/app/views/maglev/editor/show.html.erb b/app/views/maglev/editor/show.html.erb
index 5aa40a34..94ce096d 100644
--- a/app/views/maglev/editor/show.html.erb
+++ b/app/views/maglev/editor/show.html.erb
@@ -11,15 +11,17 @@
window.baseUrl = <%= h site_base_editor_path.to_json.html_safe %>;
window.leaveUrl = <%= site_leave_editor_path.to_json.html_safe %>;
window.apiBaseUrl = <%= h api_base_path.to_json.html_safe %>;
- window.site = <%= h render(partial: 'maglev/api/sites/show', formats: :json, locals: { site: maglev_site, home_page_id: maglev_home_page_id }).html_safe %>;
+ window.site = <%= h render(partial: 'maglev/api/sites/show', formats: :json, locals: { site: maglev_site, home_page_id: maglev_home_page_id, number_of_pages: maglev_pages_count }).html_safe %>;
window.page = <%= h render(partial: 'maglev/api/pages/show', formats: :json, locals: { page: maglev_page }).html_safe %>;
window.theme = <%= h render(partial: 'maglev/api/themes/show', formats: :json, locals: { theme: maglev_theme }).html_safe %>;
window.logoUrl = <%= editor_logo_url.to_json.html_safe %>;
window.primaryColor = <%= editor_primary_hex_color.to_json.html_safe %>;
window.sitePublishable = <%= editor_site_publishable.to_json %>;
window.customTranslations = <%= h editor_custom_translations.to_json.html_safe %>
+ window.sectionsContent = <%= h render(partial: 'maglev/api/sections_content/show', formats: :json, locals: { sections_content: maglev_page_sections }).html_safe %>
+ window.siteScopedSections = <%= h render(partial: 'maglev/api/sections_content/site_scoped_sections', formats: :json, locals: { site_scoped_sections: maglev_site_scoped_sections }).html_safe %>
<% end %>
-
+
<%= vite_client_tag %>
<%= vite_javascript_tag 'editor' %>
diff --git a/config/initializers/check_maglev_migration.rb b/config/initializers/check_maglev_migration.rb
new file mode 100644
index 00000000..acda6373
--- /dev/null
+++ b/config/initializers/check_maglev_migration.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+Rails.application.config.after_initialize do
+ # Skip in test environment
+ # Only check if we're running the server or console
+ if !Rails.env.test? && (defined?(Rails::Server) || defined?(Rails::Console))
+ site_exists = Maglev::Site.exists?
+ store_exists = Maglev::SectionsContentStore.exists?
+
+ if site_exists && !store_exists
+ Rails.logger.warn '🚨🚨🚨 Your Maglev site needs to be migrated to V2. Please run: rails maglev:upgrade_from_v1'
+ end
+ end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 57f89b7c..435e615e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -9,9 +9,11 @@
resource :site, only: :show
resources :pages do
resources :clones, controller: :page_clones, only: :create
+ resource :sections_content, controller: :sections_content, only: %i[show update]
end
resources :assets
resource :publication, only: %i[show create]
+ resource :style, only: :update
scope 'collections/:collection_id' do
get '/', to: 'collection_items#index', as: :collection_items
end
diff --git a/db/migrate/20250305221045_create_maglev_sections_content_stores.rb b/db/migrate/20250305221045_create_maglev_sections_content_stores.rb
new file mode 100644
index 00000000..7a73fe59
--- /dev/null
+++ b/db/migrate/20250305221045_create_maglev_sections_content_stores.rb
@@ -0,0 +1,19 @@
+class CreateMaglevSectionsContentStores < ActiveRecord::Migration[6.0]
+ def change
+ create_table :maglev_sections_content_stores do |t|
+ t.references :maglev_page, foreign_key: true, null: true
+
+ t.string :handle, null: false, index: true
+
+ if t.respond_to? :jsonb
+ t.jsonb :sections_translations, default: {}
+ else
+ t.json :sections_translations, default: {}
+ end
+
+ t.integer :lock_version
+
+ t.timestamps
+ end
+ end
+end
diff --git a/db/migrate/20250307104536_add_layout_id_to_pages.rb b/db/migrate/20250307104536_add_layout_id_to_pages.rb
new file mode 100644
index 00000000..881ed289
--- /dev/null
+++ b/db/migrate/20250307104536_add_layout_id_to_pages.rb
@@ -0,0 +1,6 @@
+class AddLayoutIdToPages < ActiveRecord::Migration[6.0]
+ def change
+ add_column :maglev_pages, :layout_id, :string, null: true
+ add_index :maglev_pages, :layout_id, using: :btree
+ end
+end
diff --git a/lib/generators/maglev/layout_generator.rb b/lib/generators/maglev/layout_generator.rb
new file mode 100644
index 00000000..ab17f618
--- /dev/null
+++ b/lib/generators/maglev/layout_generator.rb
@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Maglev
+ class LayoutGenerator < Rails::Generators::NamedBase
+ source_root File.expand_path('templates/layout', __dir__)
+
+ class_option :groups, type: :array, default: ['main'], desc: 'Layout group IDs (e.g., header main* footer)'
+
+ attr_reader :layout_name, :layout_groups
+
+ def set_layout_name
+ @layout_name = file_name.underscore
+ @layout_groups = options['groups'].map do |group_id|
+ OpenStruct.new(
+ id: group_id.gsub('*', ''),
+ label: group_id.gsub('*', '').humanize,
+ store: group_id.end_with?('*') ? 'page' : nil
+ )
+ end
+ end
+
+ def verify_theme_exists
+ raise Thor::Error, set_color('ERROR: You must first create a theme.', :red) if theme.nil?
+ end
+
+ def create_layout_files
+ directory 'app'
+ end
+
+ def update_theme_yml
+ inject_into_file 'app/theme/theme.yml', before: '# [LAYOUTS] DO NOT REMOVE THIS LINE' do
+ ERB.new(erb_template, trim_mode: '-').result(binding)
+ end
+ end
+
+ private
+
+ def theme
+ Maglev.local_themes&.first
+ end
+
+ def erb_template
+ # rubocop:disable Layout/HeredocIndentation
+ <<~ERB
+- name: <%= layout_name %>
+ groups:
+ <%- layout_groups.each do |group| -%>
+ - id: <%= group.id %>
+ label: "<%= group.label %>"
+ <%- if group.store -%>
+ store: <%= group.store %>
+ <%- else -%>
+ # store: <%= group.id %>
+ <%- end -%>
+ # accept: []
+ # recoverable: []
+ # mirror_section: false
+ <%- end -%>
+ ERB
+ # rubocop:enable Layout/HeredocIndentation
+ end
+ end
+end
diff --git a/lib/generators/maglev/templates/layout/app/views/theme/layouts/%file_name%.html.erb.tt b/lib/generators/maglev/templates/layout/app/views/theme/layouts/%file_name%.html.erb.tt
new file mode 100644
index 00000000..0d26fd85
--- /dev/null
+++ b/lib/generators/maglev/templates/layout/app/views/theme/layouts/%file_name%.html.erb.tt
@@ -0,0 +1,28 @@
+
+
+
+ <%%= maglev_page.seo_title.presence || maglev_site.name %>
+
+
+
+
+
+
+
+ <%%= render_maglev_alternate_links %>
+
+ <%%= maglev_live_preview_client_javascript_tag %>
+
+
+
+
+
+ <%%= maglev_page.seo_title.presence || maglev_site.name %>
+
+
+
+
+
+
+
+ <%%= render_maglev_alternate_links %>
+
+ <%%= maglev_live_preview_client_javascript_tag %>
+
+
+
+
+ <%# Header group for site-wide navigation and announcements %>
+
+ <%%= render_maglev_group :header %>
+
+
+ <%# Main content group for page-specific content %>
+
+ <%%= render_maglev_group :main %>
+
+
+ <%# Footer group for site-wide footer content %>
+
+
+
diff --git a/lib/maglev/errors.rb b/lib/maglev/errors.rb
index d35446db..7e9e80d9 100644
--- a/lib/maglev/errors.rb
+++ b/lib/maglev/errors.rb
@@ -3,6 +3,8 @@
module Maglev
module Errors
class NotAuthorized < StandardError; end
+ class MissingLayout < StandardError; end
+ class UnknownLayoutGroup < StandardError; end
class UnknownSection < StandardError; end
class UnknownSetting < StandardError
diff --git a/lib/maglev/theme_filesystem_loader.rb b/lib/maglev/theme_filesystem_loader.rb
index 1189e658..a30d5dc3 100644
--- a/lib/maglev/theme_filesystem_loader.rb
+++ b/lib/maglev/theme_filesystem_loader.rb
@@ -23,6 +23,7 @@ def add(hash)
attributes = hash.merge(
section_categories: Maglev::Theme::SectionCategory.build_many(hash['section_categories']),
style_settings: Maglev::Theme::StyleSetting.build_many(hash['style_settings']),
+ layouts: Maglev::Theme::Layout.build_many(hash['layouts']),
sections: []
)
diff --git a/lib/tasks/maglev_tasks.rake b/lib/tasks/maglev_tasks.rake
index 34205794..6f23ba3f 100644
--- a/lib/tasks/maglev_tasks.rake
+++ b/lib/tasks/maglev_tasks.rake
@@ -55,6 +55,15 @@ namespace :maglev do
end
end
+ desc 'Upgrade Maglev from V1 to V2'
+ task upgrade_from_v1: :environment do
+ Maglev::UpgradeFromV1.call(
+ site: Maglev::Site.first,
+ theme: Maglev.local_themes.first
+ )
+ puts '🛠️ Your site has been upgraded to V2 with success!'
+ end
+
namespace :vite do
desc 'Bundle frontend entrypoints using ViteRuby'
task build: :'vite:verify_install' do
diff --git a/spec/components/maglev/section_component_spec.rb b/spec/components/maglev/section_component_spec.rb
index b33fef2c..aa144c48 100644
--- a/spec/components/maglev/section_component_spec.rb
+++ b/spec/components/maglev/section_component_spec.rb
@@ -4,10 +4,12 @@
describe Maglev::SectionComponent do
let(:theme) { build(:theme) }
- let(:page) { build(:page, :with_navbar).tap { |page| page.prepare_sections(theme) } }
+ let(:page) { build(:page) }
+ let(:content_store) { build(:sections_content_store) }
+ let(:page_sections) { content_store.tap { |store| store.prepare_sections(theme) }.sections }
let(:config) { instance_double('MaglevConfig', asset_host: 'https://assets.maglev.local') }
let(:page_component) { instance_double('PageCommponent', page: page, config: config) }
- let(:attributes) { page.sections[1].deep_symbolize_keys }
+ let(:attributes) { page_sections[0].deep_symbolize_keys }
let(:definition) { build(:section, category: 'headers') }
let(:view_context) { FooController.new.view_context }
let(:templates_root_path) { 'theme' }
@@ -49,7 +51,7 @@
end
context 'using the fancy Maglev tags (ex: navbar)' do
- let(:attributes) { page.sections[0].deep_symbolize_keys }
+ let(:content_store) { build(:sections_content_store, :header) }
let(:definition) { build(:section, :navbar) }
before { create(:site) }
@@ -103,7 +105,7 @@
end
class FooController < ::ApplicationController
- include Maglev::StandaloneSectionsConcern
+ include Maglev::InAppRenderingConcern
helper_method :request
diff --git a/spec/dummy/app/controllers/products_controller.rb b/spec/dummy/app/controllers/products_controller.rb
index d6b8463b..580d147c 100644
--- a/spec/dummy/app/controllers/products_controller.rb
+++ b/spec/dummy/app/controllers/products_controller.rb
@@ -1,10 +1,11 @@
# frozen_string_literal: true
class ProductsController < ApplicationController
- include Maglev::StandaloneSectionsConcern
+ include Maglev::InAppRenderingConcern
+
+ before_action { fetch_maglev_sections_content(layout_id: 'default') }
def show
- fetch_maglev_site_scoped_sections
@product = Product.find(params[:id])
end
end
diff --git a/spec/dummy/app/theme/sections/headers/navbar.yml b/spec/dummy/app/theme/sections/headers/navbar.yml
index d58176be..7c5f20a3 100644
--- a/spec/dummy/app/theme/sections/headers/navbar.yml
+++ b/spec/dummy/app/theme/sections/headers/navbar.yml
@@ -5,16 +5,6 @@ category: headers
site_scoped: true
-# scope: page | site | .......... (section repository)
-
-# modal ->
-# SectionRepository
-# - name
-# - list of sections (like page or site)
-# - optimistic locking on it as well
-
-
-
# Definition of the settings:
# A setting type can be one of the following values: text, image, checkbox, link and color.
# Please visit: https://docs.maglev.dev/concepts/setting for more explanation.
diff --git a/spec/dummy/app/theme/theme.yml b/spec/dummy/app/theme/theme.yml
index ae793793..f36718df 100644
--- a/spec/dummy/app/theme/theme.yml
+++ b/spec/dummy/app/theme/theme.yml
@@ -1,6 +1,8 @@
id: "simple"
name: "My simple theme"
+mirror_section: protected
+
section_categories:
- name: Headers
id: headers
@@ -17,16 +19,47 @@ style_settings:
id: font_name
type: text
+layouts:
+- label: "Default"
+ id: "default"
+ groups:
+ - label: "Header"
+ id: "header"
+ store: "header" # the sections will be persisted in a SectionsContentStore model (handle: header)
+ accept: ["navbar"]
+ recoverable: ["navbar"]
+ mirror_section: false
+ - label: "Main"
+ id: "main" # in DB, store handle -> "main-"
+ store: "page" # by default, the Page model will be used as the storage unit
+ - "Footer"
+
+- label: "Sidebar"
+ groups:
+ - label: "Header"
+ id: "header"
+ store: "header" # the sections will be persisted in a SectionsContentStore model (handle: header)
+ accept: ["navbar"]
+
+ - label: "Main"
+ id: "main"
+ store: "page" # by default, the Page model will be used as the storage unit
+ - "Sidebar"
+ - "Footer"
+
+# [LAYOUTS] DO NOT REMOVE THIS LINE
+
pages:
- title: "Home page"
path: "index"
- sections:
- - type: "jumbotron"
- settings:
- title: "Let's create the product
your clients
will love." - body: "
your clients
will love." + body: "
+ <%= yield %>
+
+
+ <%= render_maglev_group :footer %>
+ <%- layout_groups.each do |group| %>
+
+
+
\ No newline at end of file
diff --git a/lib/generators/maglev/templates/theme/app/theme/theme.yml.tt b/lib/generators/maglev/templates/theme/app/theme/theme.yml.tt
index 8a90caa6..c7facfa0 100644
--- a/lib/generators/maglev/templates/theme/app/theme/theme.yml.tt
+++ b/lib/generators/maglev/templates/theme/app/theme/theme.yml.tt
@@ -6,17 +6,47 @@ name: "theme"
description: "A brief description of the theme"
section_categories:
-- name: content
+- name: Headers
+ id: headers
+- name: Content
+ id: content
+- name: Footers
+ id: footers
# Properties of your theme such as the primary color, font name, ...etc.
style_settings: []
+# Define layouts with organized groups
+layouts:
+- label: "Default"
+ id: "default"
+ groups:
+ - label: "Header"
+ id: "header"
+ accept: ["headers/*"] # Only allow sections from the headers group
+ recoverable: ["navbar"] # Make navbar recoverable
+ # mirror_section: false # Disable mirroring feature for consistency
+ - label: "Main"
+ id: "main"
+ store: "page" # Store content per-page
+ - label: "Footer"
+ id: "footer"
+ accept: ["footers/*"] # Only allow sections from the footers group
+
+# [LAYOUTS] DO NOT REMOVE THIS LINE
+
pages:
- title: "Home page"
- path: "/index"
+ path: "/index"
+ layout_id: "default" # Use the default layout
+ sections_content:
+ header: []
+ main: []
+ footer: []
# List of CSS class names used by your library of icons (font awesome, remixicons, ...etc)
icons: []
-
-
+# Enable the section mirroring feature (default: false)
+# mirror_section: true # # make mirrored sections editable from any page
+# mirror_section: protected # only allow editing the mirrored section from its original page.
diff --git a/lib/generators/maglev/templates/theme/app/views/theme/layouts/default.html.erb.tt b/lib/generators/maglev/templates/theme/app/views/theme/layouts/default.html.erb.tt
new file mode 100644
index 00000000..48d709fc
--- /dev/null
+++ b/lib/generators/maglev/templates/theme/app/views/theme/layouts/default.html.erb.tt
@@ -0,0 +1,34 @@
+
+
+
+ -dropzone %>>
+ <%%= render_maglev_group :<%= group.id -%> %>
+
+ <%- end %>
+ your clients
will love." - body: "
NoCoffee, passionated developers,
creators of web applications, mobiles apps and
fancy R&D projects.
your clients
will love." + body: "
NoCoffee, passionated developers,
creators of web applications, mobiles apps and
fancy R&D projects.