maglevcms 1.0.0.rc1

data/app/javascript/editor/store/__tests__/getters.spec.js

@@ -0,0 +1,102 @@
+import Vuex from 'vuex'
+import { createLocalVue } from '@vue/test-utils'
+import defaultState from '@/store/default-state'
+import buildGetters from '@/store/getters'
+import buildMutations from '@/store/mutations'
+import MockedServices from '@/spec/__mocks__/services'
+import { page, normalizedPage } from '@/spec/__mocks__/page'
+import { site } from '@/spec/__mocks__/site'
+import { theme } from '@/spec/__mocks__/theme'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('Getters', () => {
+  let store = null
+  let mockedServices = null
+
+  beforeEach(() => {
+    mockedServices = { ...MockedServices }
+    store = new Vuex.Store({
+      state: {
+        ...defaultState,
+        theme: { ...theme },
+      },
+      getters: buildGetters(mockedServices),
+      mutations: buildMutations(mockedServices),
+    })
+    store.commit('SET_SITE', site)
+  })
+
+  describe('#content', () => {
+    it('returns the content of the sections for the page', () => {
+      mockedServices.page.denormalize = jest.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),
+      ).toStrictEqual([])
+    })
+    it('returns the site content sections since they have been touched', () => {
+      store.commit('TOUCH_SECTION', 'GrYZW-VP')
+      mockedServices.page.denormalize = jest.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),
+      ).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+
+  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 = jest.fn(() => normalizedPage)
+        store.commit('SET_PAGE', page)
+        expect(store.getters.defaultPageAttributes).toStrictEqual({
+          title: 'Home page',
+          path: 'index',
+        })
+      })
+    })
+    describe('Given the page has been translated', () => {
+      it('returns an empty object', () => {
+        const newNormalizedPage = { ...normalizedPage }
+        newNormalizedPage.entities.page['1'].translated = true
+        mockedServices.page.normalize = jest.fn(() => normalizedPage)
+        store.commit('SET_PAGE', page)
+        expect(store.getters.defaultPageAttributes).toStrictEqual({})
+      })
+    })
+  })
+
+  describe('#sectionList', () => {
+    it('returns a list of objects (id, type, name, viewportFixedPosition)', () => {
+      mockedServices.page.denormalize = jest.fn(() => page)
+      expect(store.getters.sectionList).toStrictEqual([
+        {
+          id: 'GrYZW-VP',
+          type: 'navbar_01',
+          name: 'Navbar 01',
+          viewportFixedPosition: false,
+        },
+        {
+          id: '8hKSujtd',
+          type: 'content_01',
+          name: 'Content #1',
+          viewportFixedPosition: false,
+        },
+        {
+          id: 'xM6f-kyh',
+          type: 'list_01',
+          name: 'List #1',
+          viewportFixedPosition: false,
+        },
+      ])
+    })
+  })
+})

data/app/javascript/editor/store/actions/__tests__/page.spec.js

@@ -0,0 +1,93 @@
+import Vuex from 'vuex'
+import { createLocalVue } from '@vue/test-utils'
+import defaultState from '@/store/default-state'
+import buildActions from '@/store/actions'
+import buildGetters from '@/store/getters'
+import buildMutations from '@/store/mutations'
+import MockedServices from '@/spec/__mocks__/services'
+import { page, normalizedPage } from '@/spec/__mocks__/page'
+import { site } from '@/spec/__mocks__/site'
+import { theme } from '@/spec/__mocks__/theme'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('Page Actions', () => {
+  let mockedServices = null
+  let store = null
+
+  beforeEach(() => {
+    mockedServices = { ...MockedServices }
+    store = new Vuex.Store({
+      state: {
+        ...defaultState,
+        theme: { ...theme },
+        site,
+      },
+      actions: buildActions(mockedServices),
+      getters: buildGetters(mockedServices),
+      mutations: buildMutations(mockedServices),
+    })
+  })
+
+  describe('#persistPage', () => {
+    it('calls the API with both site and page attributes', async () => {
+      mockedServices.site.find = jest.fn(async () => site)
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.page.findById = jest.fn(async () => page)
+      mockedServices.page.update = jest.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,
+        },
+        {},
+      )
+      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 = jest.fn(async () => site)
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.page.findById = jest.fn(async () => page)
+      mockedServices.page.update = jest.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,
+        },
+      )
+      expect(store.state.touchedSections).toEqual([])
+      expect(store.state.ui.saveButtonState).toEqual('success')
+    })
+  })
+
+  describe('#setCurrentPageSettings', () => {
+    it('does stuff', async () => {
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      store.commit('SET_PAGE', page)
+      await store.dispatch('setCurrentPageSettings', {
+        title: 'UPDATED TITLE',
+        lockVersion: 2,
+      })
+      expect(store.state.page.title).toEqual('UPDATED TITLE')
+      expect(store.state.page.lockVersion).toEqual(2)
+    })
+  })
+})

data/app/javascript/editor/store/actions/__tests__/section-block.spec.js

@@ -0,0 +1,104 @@
+import Vuex from 'vuex'
+import { createLocalVue } from '@vue/test-utils'
+import defaultState from '@/store/default-state'
+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 {
+  normalizedNavContentSection,
+  navContentSectionBlock,
+} from '@/spec/__mocks__/section'
+import { site } from '@/spec/__mocks__/site'
+import { theme } from '@/spec/__mocks__/theme'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('SectionBlock Actions', () => {
+  let mockedServices = null
+  let store = null
+
+  beforeEach(() => {
+    mockedServices = { ...MockedServices }
+    store = new Vuex.Store({
+      state: {
+        ...defaultState,
+        theme: { ...theme },
+        site,
+      },
+      actions: buildActions(mockedServices),
+      getters: buildGetters(mockedServices),
+      mutations: buildMutations(mockedServices),
+    })
+  })
+
+  describe('#addSectionBlock', () => {
+    it('marks the current section as touched', async () => {
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.section.normalize = jest.fn(
+        () => normalizedNavContentSection,
+      )
+      mockedServices.section.buildDefaultBlock = jest.fn(
+        () => navContentSectionBlock,
+      )
+      store.commit('SET_PAGE', page)
+      store.commit('SET_SECTION', pageSections[0])
+      await store.dispatch('addSectionBlock', {
+        blockType: 'navbar_item',
+        parentId: null,
+      })
+      expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+
+  describe('#removeSectionBlock', () => {
+    it('marks the current section as touched', async () => {
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.section.normalize = jest.fn(
+        () => normalizedNavContentSection,
+      )
+      store.commit('SET_PAGE', page)
+      store.commit('SET_SECTION', pageSections[0])
+      await store.dispatch('removeSectionBlock', 'RiEo8C3f')
+      expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+
+  describe('#sortSectionBlocks', () => {
+    it('marks the current section as touched', async () => {
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.section.normalize = jest.fn(
+        () => normalizedNavContentSection,
+      )
+      store.commit('SET_PAGE', page)
+      store.commit('SET_SECTION', pageSections[0])
+      await store.dispatch('sortSectionBlocks', [
+        { id: 'P1fGieWs' },
+        { id: 'RiEo8C3f' },
+        { id: 'sDo-Dg85' },
+        { id: 'K-C_zRcH' },
+      ])
+      expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+
+  describe('#updateSectionBlockContent', () => {
+    it('marks the current section as touched', async () => {
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.section.normalize = jest.fn(
+        () => normalizedNavContentSection,
+      )
+      store.commit('SET_PAGE', page)
+      store.commit('SET_SECTION', pageSections[0])
+      store.commit('SET_SECTION_BLOCK', pageSections[0].blocks[0])
+      await store.dispatch('updateSectionBlockContent', {})
+      expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+})

data/app/javascript/editor/store/actions/__tests__/section.spec.js

@@ -0,0 +1,61 @@
+import Vuex from 'vuex'
+import { createLocalVue } from '@vue/test-utils'
+import defaultState from '@/store/default-state'
+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'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('Section Actions', () => {
+  let mockedServices = null
+  let store = null
+
+  beforeEach(() => {
+    mockedServices = { ...MockedServices }
+    store = new Vuex.Store({
+      state: {
+        ...defaultState,
+        theme: { ...theme },
+        site,
+      },
+      actions: buildActions(mockedServices),
+      getters: buildGetters(mockedServices),
+      mutations: buildMutations(mockedServices),
+    })
+  })
+
+  describe('#addSection', () => {
+    it('marks the new section as touched', async () => {
+      mockedServices.section.build = jest.fn(() => simpleContentSection)
+      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.section.normalize = jest.fn(
+        () => normalizedSimpleContentSection,
+      )
+      store.commit('SET_PAGE', page)
+      await store.dispatch('addSection', {
+        sectionDefinition: theme.sections[0],
+        insertAt: 'bottom',
+      })
+      expect(store.state.touchedSections).toStrictEqual(['NEW-CONTENT-1'])
+    })
+  })
+
+  describe('#updateSectionContent', () => {
+    it('marks the modified section as touched', async () => {
+      store.commit('SET_SECTION', pageSections[0])
+      await store.dispatch('updateSectionContent', {})
+      expect(store.state.touchedSections).toStrictEqual(['GrYZW-VP'])
+    })
+  })
+})

data/app/javascript/editor/store/actions/index.js

@@ -0,0 +1,37 @@
+import buildSiteActions from './site'
+import buildPageActions from './page'
+import buildSectionActions from './section'
+import buildSectionBlockActions from './section-block'
+
+export default (services) => ({
+  setDevice({ commit }, value) {
+    commit('SET_DEVICE', value)
+  },
+  setTheme({ commit }, theme) {
+    commit('SET_THEME', theme)
+  },
+  setLocale({ commit }, locale) {
+    services.api.setLocale(locale)
+    commit('SET_LOCALE', locale)
+  },
+  setPreviewDocument({ commit }, previewDocument) {
+    commit('SET_PREVIEW_DOCUMENT', previewDocument)
+    if (previewDocument) {
+      services.inlineEditing.setup(previewDocument)
+    } else {
+      commit('SET_SECTION', null)
+      commit('SET_HOVERED_SECTION', null)
+    }
+  },
+  fetchEditorSettings({ commit }) {
+    commit('SET_EDITOR_SETTINGS', {
+      logoUrl: window.logoUrl,
+      primaryColor: window.primaryColor,
+      sitePublishable: window.sitePublishable,
+    })
+  },
+  ...buildSiteActions(services),
+  ...buildPageActions(services),
+  ...buildSectionActions(services),
+  ...buildSectionBlockActions(services),
+})

data/app/javascript/editor/store/actions/page.js

@@ -0,0 +1,52 @@
+import { isBlank } from '@/utils'
+
+export default (services) => ({
+  // Fetch a page from an id (or a path)
+  fetchPage({ commit, state: { site } }, id) {
+    setTimeout(
+      () =>
+        services.page
+          .findById(site, id)
+          .then((page) => commit('SET_PAGE', page)),
+      100,
+    )
+  },
+  // 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,
+        }
+
+    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)
+  },
+})

data/app/javascript/editor/store/actions/section-block.js

@@ -0,0 +1,74 @@
+export default (services) => ({
+  fetchSectionBlock({ commit, state: { sections, sectionBlocks } }, id) {
+    const sectionBlock = sectionBlocks[id]
+    if (sectionBlock) {
+      const section = Object.values(sections).find(
+        (section) => (section.blocks || []).indexOf(sectionBlock?.id) !== -1,
+      )
+      commit('SET_SECTION', section) // NOTE: order is important here
+      commit('SET_SECTION_BLOCK', sectionBlock)
+    }
+    return sectionBlock
+  },
+  addSectionBlock(
+    { commit, getters, state: { previewDocument, section, sectionDefinition } },
+    { blockType, parentId },
+  ) {
+    const sectionBlock = services.section.buildDefaultBlock(
+      blockType,
+      sectionDefinition,
+    )
+    if (parentId) sectionBlock.parentId = parentId
+    commit('ADD_SECTION_BLOCK', sectionBlock)
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.updateSectionSetting(
+      previewDocument,
+      getters.content,
+      section,
+      sectionBlock,
+      null,
+    )
+  },
+  removeSectionBlock(
+    { commit, getters, state: { previewDocument, section } },
+    id,
+  ) {
+    commit('REMOVE_SECTION_BLOCK', id)
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.updateSectionSetting(
+      previewDocument,
+      getters.content,
+      section,
+      null,
+      null,
+    )
+  },
+  sortSectionBlocks(
+    { commit, getters, state: { previewDocument, section } },
+    change,
+  ) {
+    commit('SORT_SECTION_BLOCKS', change)
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.updateSectionSetting(
+      previewDocument,
+      getters.content,
+      section,
+      null,
+      null,
+    )
+  },
+  updateSectionBlockContent(
+    { commit, getters, state: { previewDocument, section, sectionBlock } },
+    change,
+  ) {
+    commit('UPDATE_SECTION_BLOCK_CONTENT', change)
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.updateSectionSetting(
+      previewDocument,
+      getters.content,
+      section,
+      sectionBlock,
+      change,
+    )
+  },
+})

data/app/javascript/editor/store/actions/section.js

@@ -0,0 +1,86 @@
+import { isBlank } from '@/utils'
+
+export default (services) => ({
+  fetchSection({ commit, state: { sections } }, id) {
+    const section = sections[id]
+    commit('SET_SECTION', section)
+    return section
+  },
+  hoverSection({ commit }, hoveredSection) {
+    commit('SET_HOVERED_SECTION', hoveredSection)
+  },
+  leaveSection({ commit }) {
+    commit('SET_HOVERED_SECTION', null)
+  },
+  addSection(
+    { commit, getters, state: { site, previewDocument } },
+    { sectionDefinition, insertAt },
+  ) {
+    if (sectionDefinition.insertAt) insertAt = sectionDefinition.insertAt
+    const section = services.section.build(sectionDefinition, site)
+    commit('ADD_SECTION', { section, insertAt })
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.addSection(
+      previewDocument,
+      getters.content,
+      section,
+      insertAt,
+    )
+    return section
+  },
+  removeSection({ commit, state: { previewDocument } }, sectionId) {
+    commit('REMOVE_SECTION', sectionId)
+    services.inlineEditing.removeSection(previewDocument, sectionId)
+  },
+  updateSectionContent(
+    { commit, getters, state: { previewDocument, section } },
+    change,
+  ) {
+    commit('UPDATE_SECTION_CONTENT', change)
+    commit('TOUCH_SECTION', section.id)
+    services.inlineEditing.updateSectionSetting(
+      previewDocument,
+      getters.content,
+      section,
+      null,
+      change,
+    )
+  },
+  moveSection(
+    {
+      commit,
+      state: {
+        previewDocument,
+        page: { sections },
+      },
+    },
+    { from, to },
+  ) {
+    // console.log('moveSection', from, sections[from], 'to', sections[to], to)
+    if (isBlank(from) || isBlank(to)) return
+    commit('MOVE_HOVERED_SECTION', { fromIndex: from, toIndex: to })
+    services.inlineEditing.updateMoveSection(
+      previewDocument,
+      sections[from],
+      sections[to],
+      from < to ? 'down' : 'up',
+    )
+  },
+  moveHoveredSection(
+    {
+      dispatch,
+      state: {
+        hoveredSection: { sectionId },
+        page: { sections },
+      },
+    },
+    direction,
+  ) {
+    const indices = services.section.calculateMovingIndices(
+      sections,
+      sectionId,
+      direction,
+    )
+    dispatch('moveSection', { from: indices.fromIndex, to: indices.toIndex })
+  },
+})

data/app/javascript/editor/store/actions/site.js

@@ -0,0 +1,32 @@
+export default (services) => ({
+  fetchSite({ commit }, locally) {
+    services.site.find(locally).then((site) => {
+      const { style, ...rawSite } = site
+      services.api.setSiteHandle(site.handle)
+      commit('SET_SITE', rawSite)
+      commit('SET_STYLE', style)
+    })
+  },
+  loadPublishButtonState({ commit }) {
+    services.site
+      .getLastPublication()
+      .then((data) => commit('SET_PUBLISH_BUTTON_STATE', data))
+  },
+  async publishSite({ commit }) {
+    services.site
+      .publish()
+      .then((data) => commit('SET_PUBLISH_BUTTON_STATE', data))
+  },
+  pollLastPublication({ dispatch }) {
+    dispatch('loadPublishButtonState')
+    setInterval(() => dispatch('loadPublishButtonState'), 5000)
+  },
+  previewStyle({ commit, getters, state: { previewDocument } }, newStyle) {
+    commit('SET_STYLE', newStyle)
+    services.inlineEditing.previewStyle(
+      previewDocument,
+      getters.content,
+      newStyle,
+    )
+  },
+})

data/app/javascript/editor/store/default-state.js

@@ -0,0 +1,28 @@
+export default {
+  device: 'desktop',
+  previewReady: false,
+  previewDocument: null,
+  site: null,
+  style: null,
+  locale: null,
+  theme: null,
+  page: null,
+  section: null,
+  sectionDefinition: null,
+  hoveredSection: null,
+  sectionBlock: null,
+  sectionBlockDefinition: null,
+  sections: {},
+  sectionBlocks: {},
+  editorSettings: {},
+  touchedSections: [],
+  ui: {
+    saveButtonState: 'default',
+    publishButtonState: {
+      status: null,
+      label: null,
+    },
+    openErrorModal: false,
+    errorModalType: null,
+  },
+}