v-editor-suite

A complete editor suite based on v-simple-cms and v-supabase-data-iterator.

Requirements

• nuxt
• nuxt-supabase (https://github.com/rotemrevivo91/nuxt-supabase)
• vuex
• v-simple-cms
• If CMS is enabled then a EditorCms.vue component must be registered globally.

Inatallation

npm i v-editor-suite

As a nuxt plugin:

import Vue from "vue"
import { EditorSuite, SupabaseDataIterator } from "v-editor-suite"
import EditorCms from "@/components/editor/EditorCms.vue"

export default async ({ store }) => {
  const modules = ["supabase", "suite"]
  for (const module of modules) {
    const storeModule = await import(`v-editor-suite/store/${module}`)
    store.registerModule(module, storeModule.default)
  }
  Vue.component("EditorCms", EditorCms)
  Vue.component("VEditorSuite", EditorSuite)
  Vue.component("SupabaseDataIterator", SupabaseDataIterator)
}

Enable Vuetify treeshakable components

In nuxt.conf.js:

import { components as vesComponents, directives as vesDirectives } from "v-editor-suite/assets/treeshake"
import { components as vesComponents, directives as vesDirectives } from "v-editor-cms/assets/treeshake"

let treeShakeComponents = [...vscmsComponents, ...vlhComponents, ...vesComponents]
let treeShakeDirectives = [...vscmsDirectives, ...vlhDirectives, ...vesDirectives]

{
  ...
  vuetify: {
    ...
    treeShake: {
      components: vesComponents,
      directives: vesDirectives
    },
    ...
  }
  ...
}

Included components

<template>
  <v-editor-suite
    supabase="$supabase"
    :cms-props="{
      componentName: 'EditorCms',
      disableActions: ['publications', 'mails'],
      externalTemplateKeys: ['image', 'text', 'body', 'topics']
    }"
    :supabase-data-iterator-props="{
      menuItems: [{
        name: 'Fetch Publications',
        icon: 'mdi-reload',
        class: '',
        action: () => $store.dispatch('setAction', {name: 'fetchPublications', args: ['fetch_publications']}),
      }],
      transformations,
      sortItems,
      headers,
      defaultSortModel: sortModel,
      editable: true,
      serverTable: 'publications'
    }"
    :create-user-props="{
      name: 'bAIome',
      url: 'https://baiome-v3.netlify.app/user/signin',
      serviceUrl: '/services/mailer/send'
    }"
    :file-viewer-props="{
      baseUrl: 'https://files.ims.bio/',
      baseKey: 'baiome.org/images',
      serviceUrl: '/services/sftp',
    }"
  />
</template>

1. EditorSuite - The main component of the package. It organizes a left-panel navigator with currently enabled functionallity:

   1. CreateUser - Generate new supabase user by entering an email and automatically generating a random password. An email is sent to the user with their credentials and instructions.

   2. RuntimeConfig - Allows manipulation of complex JSON runtime configuratiom. The configuration JSON must be present in supabase (defined by default when baiome/imsb supabase instance is built) and to have following structure:

      {
        "title": "Dirmon Frontend",
        "pages": [{
          "class": "",
          "file": "",
          "hidden": false,
          "icon": "mdi-file-delimited",
          "name": "Csv",
          "path": "/csv",
          "short": "csv",
          "style": ""
        }],
        "adminTemplates": [],
        "editorTemplates": [],
        "userTemplates": [],
        "footer": {
          "text": "Dirmon",
          "links": [],
          "chips": [
            {
              "refName": "baiome",
              "href": "https://baiome-v3.ntelify.app",
              "imgSrc": "https://files.ims.bio/baiome.org/images/favicon.ico",
              "text": "bAIome",
              "condition": true
            },
            {
              "refName": "imsb",
              "href": "https://ims.bio/",
              "imgSrc": "I",
              "text": "IMSB",
              "condition": true
            }
          ],
          "infoIcons": []
        },
        "mode": "header"
      }

      • pages - could by dynamic pages or static vue pages. Static vue pages can link to a markdown file that can be renderd as follows:

        <template>
          <v-md-preview v-if="markdown" :text="markdown" />
        </template>
        <script lang="ts">
        import Vue from "vue"
        export default Vue.extend({
          async created () {
            const data = await this.$axios.get("pages/csv.md")
            this.markdown = data.data
          },
          data: () => ({
            markdown: null
          })
        })
        </script>

      • adminTemplates - user defined v-simple-cms configuration template that can be used only by an admin user.

      • editorTemplates - user defined v-simple-cms configuration template that can be used only by an editor user.

      • userTemplates - user defined v-simple-cms configuration template that can be used only by any user.

      • footer - user defined v-layout-helpers footer configuration.

      • mode - control how pages and tags are showen and where:

        • header - top view header. Only (automatically scrapped h1 tags) tags are shown. Pages are (to be)linked in the footer extension template.
        • header+treeview - top view header. Only (automatically scrapped h1 tags) tags are shown. And a right-side navigation menu where pages are linked.
        • header+extension - top view double row header. In the first row, pages links are shown and in the second, only (automatically scrapped h1 tags) tags are shown.
        • treeview - left side navigation menu with pages and their respectful links (automatically scrapped h1 tags) in a tree view.

   3. FileViewer - Allows an admin user to show, upload, delete, move files on a file-server.

   4. SupabaseDataIterator - A table component to view supabase table data with server-side sorting, filtering and pagination. Full description:

      Setting up

      <supabase-data-iterator
        :headers="headers"
        :sort-items="sortItems"
        :default-sort-model="sortModel"
        :items-per-page="itemsPerPage"
        :transformations="transformations"
        editable
        supabase="$supabase"
        server-table="folders"
      />

      0. serverless

      Default: false

      A boolean determining if supabase and serverTable props are required. When set to true filtering and pagination is handeled by the v-data-table or the user.

      1. supabase [REQUIRED (serverless is false)]

      A string representing the global supabase variable. When using nuxt-supabase this variable is $supabase.

      2. server-table [REQUIRED (serverless is false)]

      A string representing the supabase table to be fetched.

      3. Headers [REQUIRED]

      A list of all viewable columns of a supabase table. It's not necessarily a full representation of all columns in the table.

      headers: [
        {
          text: "#",
          value: "index"
        },
        {
          text: "Name",
          value: "name",
          justify: "end",
          align: "start",
          width: "250px",
          filterable: false
        },
        ..
      ]

      The two most common attributes of each header item is the text that will show up in the table header and value which is the eaxct name of a column in the table. Other attributes can be found here: https://vuetifyjs.com/en/components/data-tables/#header Remark: Index does not have to be a column in the table.

      4. sort-items [REQUIRED]

      An object of filterable and sortable columns:

      sortItems: {
        Name: "name",
        Owner: "owner"
      }

      The key is used as text in the sort selection and the value is the eaxct name of a column in the table.

      5. default-sort-model [REQUIRED]

      A string which is used to fetch the data initially and sort it accordingly.

      6. items-per-page [OPTIONAL]

      Default: 20

      A number determining how many rows to show per page.

      7. transformations [OPTIONAL]

      default: {}

      An object of column names as keys that allows transforming the input by passing a rendering component, a transformation function and its arguments. Remark: The arguments do not include the text itself.

      transformations: {
        name: {
          component: "div",
          func: boldText,
          args: []
        },
          created: {
          component: "div",
          func: formatDate,
          args: [true]
        },
        tags: {
          component: "v-textarea"
          func: null,
          args: []
        },
        ..
      }

      Ex: boldText

      const boldText = (text) => {
        return `<b>${text}</b>`
      }

      Ex: formatDate

      const formatDate = (dateTime: {seconds: number, nanoseconds: number} | string, time = false): string => {
        let options = {
          year: "numeric",
          month: "long",
          day: "numeric",
          timeZone: "UTC"
        }
        const extend = { hour: "2-digit", minute: "2-digit" }
        let dateArr
        if (typeof dateTime === "string") {
          if (time) {
            options = { ...options, ...extend }
          }
          // @ts-ignore
          dateArr = new Date(dateTime as string).toLocaleString("en-GB", options).split(" ")
        }
        const day = dayFormatter(dateArr.shift() as number)
        return `${day} ${dateArr.join(" ")}`.replace(/,/, "")
      }

      8. editable [OPTIONAL]

      default: false

      A boolean that allows the user to interact with a table cell, edit it and save it back to the database. Requirements: A matching entry in the transformations object must be present with func set to null and the rendering component must be an input component. For example tags.

      9. disable-search [OPTIONAL]

      default: false

      A boolean that allows to disable search on the database.

      10. filters [OPTIONAL]

      default: [[], {}]

      A list of size 2 where:

      1. The first item is a list of strings representing supabase filter functions. Legal values: "eq", "gt", "gte", "lt", "lte", "ilike"
      2. The second item is an object of key-value pairs where the key is a string present in the first item (see 1) and the value is a list of arguments for that filter function.

      Ex: [["eq","gt"], {eq: [COLUMN_NAME, VALUE], gt: [COLUMN_NAME, value]}]

      Remark: These filters will always apply to each search, pagination and future filters.

      11. default-sort-desc [OPTIONAL]

      default: false

      A boolean that determines in which direction sorting is done.

      12. cards [OPTIONAL]

      default: false

      A boolean that when set to true will use v-data-iterator instead of v-data-table and a custom component must be passed as a template.

      <supabase-data-iterator
      ..
      >
        <template #default="{item}">
          ..
        </template>
      </supabase-data-iterator>

      13. cols [OPTIONAL]

      default: false

      A boolean used in conjunction with the cards prop to set the amount of cards in a row dynamically.

   5. CsvDataIterator - A wrapper component to SupabaseDataIterator which allows it to work in serverless mode process csv files.