maglevcms 1.0.0.rc1

data/app/javascript/editor/components/kit/tabs.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="flex flex-col flex-1"
+    :class="{ 'overflow-y-hidden': enableOverflow }"
+  >
+    <nav class="flex flex-col sm:flex-row" :class="sharedClass">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="`tab-${index}`"
+        type="button"
+        class="text-gray-500 py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 border-transparent z-10"
+        :class="{
+          'text-editor-primary font-medium border-editor-primary':
+            index === currentIndex,
+        }"
+        @click="selectTab(index)"
+      >
+        {{ tab.name }}
+      </button>
+    </nav>
+    <div class="relative -mt-1/2" :class="sharedClass">
+      <div class="w-full border-gray-200 border-t-2 h-0"></div>
+    </div>
+    <div
+      class="flex-1 mt-4 pb-4"
+      :class="{
+        [sharedClass]: !isBlank(sharedClass),
+        'overflow-y-auto': enableOverflow,
+      }"
+    >
+      <transition :name="slideDirection" mode="out-in">
+        <component
+          :is="currentTabComponent"
+          :key="currentTabKey"
+          v-on="$listeners"
+          v-bind="{ ...otherProps, ...currentTabProps }"
+        />
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tabs',
+  props: {
+    tabs: { type: Array, default: () => [] },
+    firstIndex: { type: Number, default: 0 },
+    otherProps: { type: Object, default: () => ({}) },
+    sharedClass: { type: String, default: null },
+    enableOverflow: { type: Boolean, default: true },
+  },
+  data() {
+    return { currentIndex: 0, slideDirection: null }
+  },
+  computed: {
+    currentTab() {
+      return this.tabs[this.currentIndex]
+    },
+    currentTabComponent() {
+      return this.currentTab.tab
+    },
+    currentTabKey() {
+      return this.currentTab.type
+    },
+    currentTabProps() {
+      return this.currentTab.props ? this.currentTab.props() : {}
+    },
+  },
+  methods: {
+    selectTab(index) {
+      this.currentIndex = index
+      this.$emit('select-tab', index)
+    },
+  },
+  watch: {
+    firstIndex: {
+      immediate: true,
+      handler() {
+        this.currentIndex = this.firstIndex
+      },
+    },
+    currentIndex(newIndex, oldIndex) {
+      this.slideDirection = newIndex > oldIndex ? 'slide-left' : 'slide-right'
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/text-input.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <label
+      class="block font-semibold text-gray-800"
+      :for="name"
+      v-if="showLabel"
+    >
+      <span>{{ label }}</span>
+      <transition name="fade">
+        <span
+          class="text-red-700 bg-red-100 text-xs ml-4 py-1 px-3 rounded"
+          v-if="showError"
+          >{{ error[0] }}
+        </span>
+      </transition>
+    </label>
+    <input
+      type="text"
+      :value="value"
+      :placeholder="placeholder"
+      @blur="blur()"
+      @input="updateInput"
+      class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
+      autocomplete="off"
+      ref="input"
+    />
+  </div>
+</template>
+
+<script>
+import FocusedInputMixin from '@/mixins/focused-input'
+
+export default {
+  name: 'TextInput',
+  mixins: [FocusedInputMixin],
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'text' },
+    value: { type: String },
+    placeholder: { type: String, default: null },
+    showLabel: { type: Boolean, default: true },
+    error: { type: Array, default: null },
+  },
+  data() {
+    return { showError: false }
+  },
+  methods: {
+    updateInput(event) {
+      this.showError = false
+      this.$emit('input', event.target.value)
+    },
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+  watch: {
+    error() {
+      if (!this.isBlank(this.error)) this.showError = true
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/textarea-input.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label
+      class="block font-semibold text-gray-800 flex justify-between items-center"
+    >
+      <span>{{ label }}</span>
+      <span
+        v-if="maxLength"
+        class="text-xs"
+        :class="{
+          'text-red-600': isOverMaxLength,
+          'text-gray-600': !isOverMaxLength,
+        }"
+        >{{ numCharacters }} / {{ maxLength }}</span
+      >
+    </label>
+    <textarea
+      :value="value"
+      @blur="blur()"
+      @input="updateInput"
+      class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
+      autocomplete="off"
+      ref="input"
+      :rows="rows"
+    />
+  </div>
+</template>
+
+<script>
+import FocusedInputMixin from '@/mixins/focused-input'
+
+export default {
+  name: 'TextInput',
+  mixins: [FocusedInputMixin],
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'text' },
+    value: { type: String },
+    maxLength: { type: Number, default: null },
+    rows: { type: Number, default: 2 },
+  },
+  computed: {
+    numCharacters() {
+      return (this.value || '').length
+    },
+    isOverMaxLength() {
+      return this.numCharacters > this.maxLength
+    },
+  },
+  methods: {
+    updateInput(event) {
+      this.$emit('input', event.target.value)
+    },
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/link-picker/actions.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="mt-10 flex flex-col">
+    <button
+      class="big-submit-button bg-editor-primary"
+      type="button"
+      :disabled="disabled"
+      @click="$emit('select', link)"
+    >
+      {{ $t(`${i18nScope}.mainButton.${mode}`) }}
+    </button>
+
+    <button class="cancel-button" type="button" @click="$emit('on-close')">
+      {{ $t(`${i18nScope}.cancelButton`) }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkPickerActions',
+  props: {
+    link: { type: Object, required: true },
+    mode: { type: String, default: 'select' },
+    disabled: { type: Boolean, default: true },
+  },
+  computed: {
+    i18nScope() {
+      return 'linkPicker.shared'
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/link-picker/email.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <text-input
+      :label="$t(`linkPicker.email.input.label`)"
+      name="email"
+      v-model="emailInput"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkEmailPicker',
+  props: {
+    currentLink: { type: Object, default: undefined },
+  },
+  computed: {
+    emailInput: {
+      get() {
+        return this.currentLink.email
+      },
+      set(email) {
+        this.$emit('change', {
+          ...this.currentLink,
+          email,
+          href: `mailto:${email}`,
+        })
+      },
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/link-picker/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="mt-4">
+    <tabs
+      :tabs="tabs"
+      :firstIndex="firstTabIndex"
+      :otherProps="{ currentLink: link }"
+      sharedClass="px-1/2"
+      :enableOverflow="false"
+      @select-tab="onTabSelected"
+      @change="onChange"
+    />
+
+    <picker-actions
+      :link="link"
+      :mode="mode"
+      :disabled="!isValid"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import PickerActions from './actions'
+import PagePicker from './page'
+import UrlPicker from './url'
+import EmailPicker from './email'
+
+export default {
+  name: 'LinkPicker',
+  components: { PickerActions },
+  props: {
+    currentLink: { type: Object, default: undefined },
+    mode: { type: String, default: 'select' },
+  },
+  data() {
+    return { linkType: null, linksByTypes: {} }
+  },
+  computed: {
+    tabs() {
+      return [
+        {
+          name: this.$t('linkPicker.page.name'),
+          tab: PagePicker,
+          type: 'page',
+          subType: 'static_page',
+        },
+        { name: this.$t('linkPicker.url.name'), tab: UrlPicker, type: 'url' },
+        {
+          name: this.$t('linkPicker.email.name'),
+          tab: EmailPicker,
+          type: 'email',
+        },
+      ]
+    },
+    firstTabIndex() {
+      return this.tabs.findIndex(
+        (tab) => this.linkType === tab.type || this.linkType === tab.subType,
+      )
+    },
+    link() {
+      return (
+        this.linksByTypes[this.linkType] || {
+          linkType: this.linkType,
+          linkId: null,
+          href: null,
+          email: null,
+          openNewWindow: false,
+        }
+      )
+    },
+    isValid() {
+      return this.link && !this.isBlank(this.link.href)
+    },
+  },
+  methods: {
+    onTabSelected(index) {
+      this.linkType = this.tabs[index].type
+    },
+    onChange(link) {
+      const linkType = link.linkType || this.linkType
+      this.linksByTypes = {
+        ...this.linksByTypes,
+        [this.linkType]: { ...link, linkType },
+      }
+    },
+  },
+  watch: {
+    currentLink: {
+      immediate: true,
+      handler(link) {
+        this.linkType = link?.linkType || 'url'
+        this.linksByTypes[this.linkType] = link
+      },
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/link-picker/page.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <select-input
+      :label="$t(`linkPicker.page.input.label`)"
+      :placeholder="$t(`linkPicker.page.input.placeholder`)"
+      :searchEnabled="true"
+      :searchPlaceholder="$t(`linkPicker.page.input.searchPlaceholder`)"
+      :emptyLabel="$t(`linkPicker.page.input.emptyLabel`)"
+      :fetchList="(q) => services.page.findAll({ q })"
+      v-model="page"
+    >
+      <template v-slot:value>
+        {{ page.title }}
+      </template>
+      <template v-slot:item="{ item, hovered }">
+        <div class="flex items-center">
+          <span class="font-bold">{{ item.title }}</span>
+          <span
+            class="ml-auto"
+            :class="{ 'text-gray-500': !hovered, 'text-white': hovered }"
+          >
+            {{ item.path | formatPath }}
+          </span>
+        </div>
+      </template>
+    </select-input>
+
+    <div class="mt-6" v-if="hasPageSections">
+      <select-input
+        :label="$t(`linkPicker.page.sectionInput.label`)"
+        :placeholder="$t(`linkPicker.page.sectionInput.placeholder`)"
+        :emptyLabel="$t(`linkPicker.page.sectionInput.emptyLabel`)"
+        :fetchList="() => fetchPageSectionNames()"
+        :clearEnabled="true"
+        v-model="pageSection"
+      >
+        <template v-slot:value>
+          {{ pageSection.name }}
+        </template>
+        <template v-slot:item="{ item }">
+          <div class="flex items-center">
+            <span class="font-bold">{{ item.name }}</span>
+          </div>
+        </template>
+      </select-input>
+    </div>
+
+    <checkbox-input
+      :label="$t(`linkPicker.shared.newWindowInput.label`)"
+      name="openNewWindow"
+      class="mt-6"
+      v-model="openNewWindowInput"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkPagePicker',
+  props: {
+    currentLink: { type: Object, default: undefined },
+  },
+  data() {
+    return { page: null, pageSection: null }
+  },
+  computed: {
+    openNewWindowInput: {
+      get() {
+        return this.currentLink.openNewWindow
+      },
+      set(openNewWindow) {
+        this.$emit('change', { ...this.currentLink, openNewWindow })
+      },
+    },
+    hasPageSections() {
+      return !this.isBlank(this.page?.sectionNames)
+    },
+  },
+  methods: {
+    async fetchPageSectionNames() {
+      return this.page.sectionNames
+    },
+  },
+  watch: {
+    currentLink: {
+      immediate: true,
+      async handler(currentLink) {
+        if (
+          !currentLink ||
+          (currentLink.linkType !== 'page' &&
+            currentLink.linkType !== 'static_page') ||
+          this.isBlank(currentLink.linkId) ||
+          currentLink.linkId === this.page?.id
+        )
+          return
+        this.page = await this.services.page.findById(
+          this.currentSite,
+          currentLink.linkId,
+        )
+        if (this.page)
+          this.pageSection = this.page.sectionNames.find(
+            (item) => item.id === currentLink.sectionId,
+          )
+      },
+    },
+    page(page) {
+      this.$emit('change', {
+        ...this.currentLink,
+        linkType: page.static ? 'static_page' : 'page',
+        linkId: page.id,
+        linkLabel: page.title,
+        sectionId: null,
+        href: `/${page.path}`,
+      })
+    },
+    pageSection(pageSection) {
+      this.$emit('change', {
+        ...this.currentLink,
+        sectionId: pageSection?.id || null,
+      })
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/link-picker/url.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <text-input
+      :label="$t(`linkPicker.url.input.label`)"
+      name="href"
+      v-model="hrefInput"
+    />
+
+    <checkbox-input
+      :label="$t(`linkPicker.shared.newWindowInput.label`)"
+      name="openNewWindow"
+      class="mt-6"
+      v-model="openNewWindowInput"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkUrlPicker',
+  props: {
+    currentLink: { type: Object, default: undefined },
+  },
+  computed: {
+    hrefInput: {
+      get() {
+        return this.currentLink.href
+      },
+      set(href) {
+        this.$emit('change', { ...this.currentLink, href })
+      },
+    },
+    openNewWindowInput: {
+      get() {
+        return this.currentLink.openNewWindow
+      },
+      set(openNewWindow) {
+        this.$emit('change', { ...this.currentLink, openNewWindow })
+      },
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/page/edit.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="flex flex-col flex-1 overflow-y-hidden">
+    <tabs
+      :tabs="tabs"
+      :otherProps="{ page: editedPage, errors }"
+      sharedClass="px-1/2"
+      class="overflow-y-hidden pb-4"
+      @on-change="onChange"
+    />
+    <div class="mt-auto">
+      <submit-button
+        type="button"
+        class="big-submit-button"
+        defaultColorClass="bg-editor-primary"
+        :labels="$t('page.edit.submitButton')"
+        :buttonState="submitState"
+        @click="updatePage"
+      >
+        {{ $t('page.edit.submitButton') }}
+      </submit-button>
+      <button
+        class="cancel-button"
+        v-if="insideModal"
+        @click="$emit('on-close')"
+      >
+        {{ $t('page.edit.cancelButton') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import MainForm from './form/main'
+import SEOForm from './form/seo'
+
+export default {
+  name: 'EditPage',
+  props: {
+    page: { type: Object, required: true },
+    insideModal: { type: Boolean, default: false },
+  },
+  data() {
+    return { editedPage: null, errors: {}, submitState: 'default' }
+  },
+  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: {
+    updatePage() {
+      this.submitState = 'inProgress'
+      const { id: pageId, ...attributes } = this.editedPage
+      this.services.page
+        .updateSettings(pageId, {
+          ...attributes,
+          lockVersion: this.page.lockVersion,
+        })
+        .then(({ headers }) => {
+          this.submitState = 'success'
+          this.$emit('on-update', {
+            ...attributes,
+            lockVersion: headers['page-lock-version'],
+          })
+        })
+        .catch(({ response: { status, data } }) => {
+          console.log('[Maglev] could not update the page', status)
+          this.submitState = 'fail'
+          if (status === 409) this.openErrorModal('staleRecord')
+          if (status !== 400) return
+          this.errors = data.errors
+        })
+    },
+    onChange(changes) {
+      this.editedPage = { ...this.editedPage, ...changes }
+    },
+  },
+  watch: {
+    page: {
+      immediate: true,
+      handler() {
+        this.editedPage = { ...this.page }
+      },
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="mt-2 grid grid-cols-1 gap-4">
+    <text-input
+      :label="$t(`page.form.title`)"
+      name="title"
+      v-model="titleInput"
+      :error="errors.title"
+    />
+
+    <text-input
+      :label="$t(`page.form.path`)"
+      name="path"
+      v-model="pathInput"
+      :error="errors.path || errors.pathsValue"
+      v-if="!isPageIndex || !page.id"
+    />
+
+    <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>