maglevcms 2.1.0 → 3.0.0.beta1

data/app/frontend/editor/components/page/form/main.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="mt-2 grid grid-cols-1 gap-4">
-    <uikit-text-input
-      :label="$t(`page.form.title`)"
-      name="title"
-      v-model="titleInput"
-      :error="errors.title"
-    />
-
-    <uikit-text-input
-      :label="$t(`page.form.path`)"
-      name="path"
-      v-model="pathInput"
-      :error="errors.path || errors['paths.value'] || errors['pathsValue']"
-      v-if="!isPageIndex || !page.id"
-    />
-
-    <uikit-checkbox-input
-      :label="$t(`page.form.visible`)"
-      :placeholder="$t(`page.form.visiblePlaceholder`)"
-      name="visible"
-      v-model="visibleInput"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PageMainForm',
-  props: {
-    page: { type: Object, required: true },
-    errors: { type: Object, default: () => {} },
-  },
-  computed: {
-    isPageIndex() {
-      return this.services.page.isIndex(this.page)
-    },
-    titleInput: {
-      get() {
-        return this.page.title
-      },
-      set(title) {
-        this.$emit('on-change', { title })
-      },
-    },
-    pathInput: {
-      get() {
-        return this.page.path
-      },
-      set(path) {
-        this.$emit('on-change', { path })
-      },
-    },
-    visibleInput: {
-      get() {
-        return this.page.visible
-      },
-      set(visible) {
-        this.$emit('on-change', { visible })
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/page/form/seo.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="mt-2 grid grid-cols-1 gap-4">
-    <uikit-textarea-input
-      :label="$t(`page.form.seoTitle`)"
-      name="seo-title"
-      :max-length="60"
-      :rows="2"
-      v-model="seoTitleInput"
-    />
-
-    <uikit-textarea-input
-      :label="$t(`page.form.metaDescription`)"
-      name="meta-description"
-      :max-length="155"
-      :rows="5"
-      v-model="metaDescriptionInput"
-    />
-
-    <uikit-textarea-input
-      :label="$t(`page.form.ogTitle`)"
-      name="og-title"
-      :max-length="60"
-      :rows="2"
-      v-model="ogTitleInput"
-    />
-
-    <uikit-textarea-input
-      :label="$t(`page.form.ogDescription`)"
-      name="og-description"
-      :max-length="200"
-      :rows="6"
-      v-model="ogDescriptionInput"
-    />
-
-    <uikit-image-input
-      :label="$t(`page.form.ogImageUrl`)"
-      name="og-image-url"
-      :hasAltText="false"
-      v-model="ogImageUrlInput"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PageSEOForm',
-  props: {
-    page: { type: Object, required: true },
-    errors: { type: Object, default: () => {} },
-  },
-  computed: {
-    seoTitleInput: {
-      get() {
-        return this.page.seoTitle
-      },
-      set(seoTitle) {
-        this.$emit('on-change', { seoTitle })
-      },
-    },
-    metaDescriptionInput: {
-      get() {
-        return this.page.metaDescription
-      },
-      set(metaDescription) {
-        this.$emit('on-change', { metaDescription })
-      },
-    },
-    ogTitleInput: {
-      get() {
-        return this.page.ogTitle
-      },
-      set(ogTitle) {
-        this.$emit('on-change', { ogTitle })
-      },
-    },
-    ogDescriptionInput: {
-      get() {
-        return this.page.ogDescription
-      },
-      set(ogDescription) {
-        this.$emit('on-change', { ogDescription })
-      },
-    },
-    ogImageUrlInput: {
-      get() {
-        return { url: this.page.ogImageUrl }
-      },
-      set(ogImage) {
-        this.$emit('on-change', { ogImageUrl: ogImage?.url ?? null })
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/page/list/actions-button.vue

@@ -1,159 +0,0 @@
-<template>
-  <uikit-dropdown v-on="$listeners" popoverClass="tooltip-menu" ref="dropdown">
-    <template v-slot:button>
-      <uikit-icon-button :iconName="compact ? 'ri-more-fill' : 'ri-more-2-fill'" class="shrink-0" />
-    </template>
-    <template v-slot:content>
-      <div class="flex flex-col w-48 text-gray-800">
-        <button
-          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          @click.stop="editPage"
-        >
-          <uikit-icon name="ri-settings-5-line" />
-          <span class="ml-2 whitespace-nowrap">{{
-            $t('page.actions.edit')
-          }}</span>
-        </button>
-        <button
-          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          @click.stop="clonePage"
-        >
-          <uikit-icon name="ri-shadow-line" />
-          <span class="ml-2">{{ $t('page.actions.clone') }}</span>
-        </button>
-        <button
-          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          @click.stop="hidePage"
-          v-if="!compact &&isVisible"
-        >
-          <uikit-icon name="ri-eye-off-line" />
-          <span class="ml-2">{{ $t('page.actions.hide') }}</span>
-        </button>
-
-        <button
-          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          @click.stop="showPage"
-          v-if="!compact && !isVisible"
-        >
-          <uikit-icon name="ri-eye-line" />
-          <span class="ml-2">{{ $t('page.actions.show') }}</span>
-        </button>
-
-        <button
-          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          :class="{ 'text-green-500': copied }"
-          @click.stop="copyUrlToClipboard"
-        >
-          <uikit-icon name="clipboard-line" v-if="!copied" />
-          <uikit-icon name="ri-check-line" v-else />
-          <span class="ml-2" v-if="!copied">{{ $t('page.actions.copyUrlToClipboard') }}</span>
-          <span class="ml-2" v-else>{{ $t('page.actions.copyUrlToClipboardSuccess') }}</span>
-        </button>
-
-        <uikit-confirmation-button
-          @confirm="deletePage"
-          ref="deleteDropdown"
-          v-if="!isIndexPage"
-        >
-          <button
-            class="flex items-center w-full px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-          >
-            <uikit-icon name="delete-bin-line" />
-            <span class="ml-2">{{ $t('page.actions.delete') }}</span>
-          </button>
-        </uikit-confirmation-button>
-      </div>
-    </template>
-  </uikit-dropdown>    
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import EditPageModal from '@/components/page/edit.vue'
-
-export default {
-  name: 'PageActionsButton',
-  props: {
-    page: { type: Object, required: true },
-    compact: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      copied: false,
-    }
-  },
-  computed: {
-    ...mapGetters(['currentPageUrl']),    
-    isIndexPage() {
-      return this.services.page.isIndex(this.page)
-    },
-    isCurrentPage() {
-      return this.currentPage.id === this.page.id
-    },
-    isVisible() {
-      return this.page.visible
-    },
-  },
-  methods: {
-    copyUrlToClipboard() {
-      this.copied = true
-      navigator.clipboard.writeText(this.currentPageUrl)
-      const timeout = setTimeout((() => { this.copied = false }).bind(this), 2000)
-      this.$once('hook:beforeDestroy', () => clearTimeout(timeout))
-    },
-    editPage() {
-      this.$refs.dropdown.close()
-      if (!this.compact) {
-        this.openEditPageModal()
-      } else if (this.$route.name !== 'editPageSettings') {        
-        this.$router.push({ name: 'editPageSettings' })
-      }
-    },
-    openEditPageModal() {
-      this.openModal({
-        title: this.$t('page.edit.title'),
-        component: EditPageModal,
-        closeOnClick: false,
-        props: {
-          page: this.page,
-          insideModal: true,
-          modalClass: 'w-120 h-144',
-        },
-        listeners: {
-          'on-update': (editedPage) => this.onUpdate(editedPage),
-        },
-      })
-    },
-    onUpdate(editedPage) {
-      this.closeDropdown()
-      if (this.isCurrentPage) this.setCurrentPageSettings(editedPage)
-      this.$emit('on-update')
-    },
-    clonePage() {
-      this.services.page.clone(this.page.id).then(page => this.$emit('on-clone', page))
-    },
-    showPage() {
-      this.services.page
-        .setVisible(this.page.id, true)
-        .then(() => this.$emit('on-update'))
-    },
-    hidePage() {
-      this.services.page
-        .setVisible(this.page.id, false)
-        .then(() => this.$emit('on-update'))
-    },
-    deletePage() {
-      this.closeDropdown()
-      this.services.page.destroy(this.page.id).then(() => {
-        this.$emit('on-delete')
-        if (this.isCurrentPage)
-          this.$router.push({ name: 'editPage', params: { pageId: 'index' } })
-      })
-    },
-    closeDropdown() {
-      if (!this.$refs.deleteDropdown) return
-      this.$refs.deleteDropdown.close()
-    },
-  }
-}
-</script>

data/app/frontend/editor/components/page/list/index.vue

@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <div key="empty-list" class="pt-4 text-center" v-if="isEmpty">
-      No pages found
-    </div>
-    <div key="list" v-else>
-      <list-item
-        v-for="page in previewablePages"
-        :key="page.id"
-        :page="page"
-        @on-update="fetch"
-        @on-clone="fetch"
-        @on-delete="fetch"
-        @on-dropdown-toggle="onDropdownToggle"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import ListItem from './list-item.vue'
-
-export default {
-  name: 'PageList',
-  mixins: [GroupedDropdownsMixin],
-  components: { ListItem },
-  props: {
-    q: { type: String, required: false },
-  },
-  data() {
-    return { pages: [], isLoading: true }
-  },
-  computed: {
-    isEmpty() {
-      return this.previewablePages.length === 0 && !this.isLoading
-    },
-    previewablePages() {
-      return this.pages.filter((page) => !!page.previewUrl && !page.static)
-    },
-  },
-  methods: {
-    async fetch() {
-      this.isLoading = true
-      this.pages = await this.services.page.findAll({ q: this.q })
-      this.isLoading = false
-    },
-  },
-  watch: {
-    q: {
-      immediate: true,
-      handler() {
-        this.fetch()
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/page/list/list-item.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    class="flex items-center pl-6 pr-2 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-  >
-    <router-link
-      :to="{ name: 'editPage', params: { pageId: page.path } }"
-      class="flex items-center text-gray-800 overflow-hidden w-full py-3.5"
-      :title="page.title"
-    >
-      <uikit-page-icon :page="page" class="shrink-0" />
-      <span class="ml-4 truncate">{{ page.title }}</span>
-      <uikit-icon
-        class="ml-4 text-gray-400"
-        name="ri-eye-off-line"
-        size="1rem"
-        v-if="!isVisible"
-      />
-    </router-link>
-    <div class="ml-auto pr-2 relative">
-      <page-actions-button :page="page" v-on="$listeners" />
-    </div>
-  </div>
-</template>
-
-<script>
-import EditPageModal from '@/components/page/edit.vue'
-import PageActionsButton from './actions-button.vue'
-
-export default {
-  name: 'PageListItem',
-  components: {
-    PageActionsButton,
-  },
-  props: {
-    page: { type: Object, required: true },
-  },
-  computed: {
-    isIndexPage() {
-      return this.services.page.isIndex(this.page)
-    },
-    isCurrentPage() {
-      return this.currentPage.id === this.page.id
-    },
-    isVisible() {
-      return this.page.visible
-    },
-  },
-  methods: {
-    openEditPageModal() {
-      this.openModal({
-        title: this.$t('page.edit.title'),
-        component: EditPageModal,
-        closeOnClick: false,
-        props: {
-          page: this.page,
-          insideModal: true,
-          modalClass: 'w-120 h-144',
-        },
-        listeners: {
-          'on-update': (editedPage) => this.onUpdate(editedPage),
-        },
-      })
-    },
-    onUpdate(editedPage) {
-      this.closeDropdown()
-      if (this.isCurrentPage) this.setCurrentPageSettings(editedPage)
-      this.$emit('on-update')
-    },
-    clonePage() {
-      this.services.page.clone(this.page.id).then(() => this.$emit('on-clone'))
-    },
-    showPage() {
-      this.services.page
-        .setVisible(this.page.id, true)
-        .then(() => this.$emit('on-update'))
-    },
-    hidePage() {
-      this.services.page
-        .setVisible(this.page.id, false)
-        .then(() => this.$emit('on-update'))
-    },
-    deletePage() {
-      this.closeDropdown()
-      this.services.page.destroy(this.page.id).then(() => {
-        this.$emit('on-delete')
-        if (this.isCurrentPage)
-          this.$router.push({ name: 'editPage', params: { pageId: 'index' } })
-      })
-    },
-    closeDropdown() {
-      if (!this.$refs.deleteDropdown) return
-      this.$refs.deleteDropdown.close()
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/page/new.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="flex flex-col flex-1 overflow-y-hidden">
-    <uikit-tabs
-      :tabs="tabs"
-      :otherProps="{ page, errors }"
-      navClass="mx-1"
-      panelClass=""
-      class="overflow-y-hidden pb-4"
-      @on-change="onChange"
-    />
-    <div class="mt-auto">
-      <uikit-submit-button
-        type="button"
-        class="big-submit-button"
-        defaultColorClass="bg-editor-primary"
-        :labels="$t('page.new.submitButton')"
-        :buttonState="submitState"
-        @click="createPage"
-      >
-        {{ $t('page.new.submitButton') }}
-      </uikit-submit-button>
-      <button class="cancel-button" @click="$emit('on-close')">
-        {{ $t('page.new.cancelButton') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import MainForm from './form/main.vue'
-import SEOForm from './form/seo.vue'
-
-export default {
-  name: 'NewPage',
-  data() {
-    return { page: {}, errors: {}, submitState: 'default' }
-  },
-  mounted() {
-    this.page = this.services.page.build()
-  },
-  computed: {
-    tabs() {
-      return [
-        {
-          name: this.$t('page.form.tabs.main'),
-          tab: MainForm,
-          type: 'main',
-        },
-        {
-          name: this.$t('page.form.tabs.seo'),
-          tab: SEOForm,
-          type: 'seo',
-        },
-      ]
-    },
-  },
-  methods: {
-    createPage() {
-      this.submitState = 'inProgress'
-      this.services.page
-        .create(this.page)
-        .then(() => {
-          this.submitState = 'success'
-          this.$emit('on-close')
-          this.$emit('on-refresh')
-        })
-        .catch(({ response: { status, data } }) => {
-          console.log('[Maglev] could not create the page', status)
-          this.submitState = 'fail'
-          if (status !== 400) return
-          this.errors = data.errors
-        })
-    },
-    onChange(changes) {
-      this.page = { ...this.page, ...changes }
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/section-block-pane/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <uikit-tabs
-    :tabs="tabs"
-    :firstIndex="tabIndexFromRoute"
-    :otherProps="{ sectionBlockId: currentSectionBlock.id, settingId }"
-    sharedClass="px-4"
-    ref="tabs"
-  />
-</template>
-
-<script>
-import SettingList from './setting-list.vue'
-
-export default {
-  name: 'SectionBlockPane',
-  props: {
-    settingId: { type: String, default: undefined },
-  },
-  computed: {
-    unfilteredTabs() {
-      return [
-        {
-          name: this.$t('sectionBlockPane.tabs.settings'),
-          tab: SettingList,
-          type: 'content',
-          condition: () => this.hasSettings,
-        },
-        {
-          name: this.$t('sectionBlockPane.tabs.advanced'),
-          tab: SettingList,
-          type: 'advanced',
-          condition: () => this.hasAdvancedSettings,
-          props: () => ({ advanced: true }),
-        },
-      ]
-    },
-    tabs() {
-      return this.unfilteredTabs.filter(
-        (tab) => !tab.condition || tab.condition(),
-      )
-    },
-    tabIndexFromRoute() {
-      return this.findTabIndexFromRoute()
-    },
-    hasSettings() {
-      return !this.isBlank(this.currentSectionBlockSettings)
-    },
-    hasAdvancedSettings() {
-      return !this.isBlank(this.currentSectionBlockAdvancedSettings)
-    },
-  },
-  methods: {
-    findTabIndexFromRoute() {
-      const type = this.$route.hash.replace('#', '')
-      const index = this.tabs.findIndex((tab) => tab.type === type)
-      return index === -1 ? 0 : index
-    },
-  },
-  watch: {
-    '$route.hash': {
-      immediate: true,
-      handler() {
-        if (!this.$refs.tabs) return
-        this.$refs.tabs.selectTab(this.findTabIndexFromRoute())
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/section-block-pane/setting-list.vue

@@ -1,53 +0,0 @@
-<template>
-  <dynamic-form
-    class="mt-2"
-    :parentKey="currentSectionBlock.id"
-    :settings="sectionBlockSettings"
-    :content="currentSectionBlockContent"
-    :focusedSetting="settingId"
-    :i18nScope="i18nScope"
-    @blur="onBlur"
-    @change="updateSectionBlockContent"
-  />
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form/index.vue'
-
-export default {
-  name: 'SectionBlockSettingList',
-  components: { DynamicForm },
-  props: {
-    sectionBlockId: { type: String, default: undefined },
-    settingId: { type: String, default: undefined },
-    advanced: { type: Boolean, default: false },
-  },
-  computed: {
-    sectionBlockSettings() {
-      return this.advanced
-        ? this.currentSectionBlockAdvancedSettings
-        : this.services.section.filterSettings(
-            this.currentSectionBlockSettings,
-            this.currentSectionBlockContent,
-          )
-    },
-    i18nScope() {
-      return `${this.currentSectionBlockI18nScope}.settings`
-    },
-  },
-  methods: {
-    ...mapActions(['updateSectionBlockContent']),
-    onBlur() {
-      this.$router
-        .push({
-          name: 'editSectionBlock',
-          params: { sectionBlockId: this.sectionBlockId },
-        })
-        .catch((err) => {
-          if (err.name !== 'NavigationDuplicated') throw err
-        })
-    },
-  },
-}
-</script>