v-editor-suite
v0.1.0
Published
A complete editor suite based on v-simple-cms and v-supabase-data-iterator.
Downloads
10
Maintainers
Readme
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>
- EditorSuite - The main component of the package. It organizes a left-panel navigator with currently enabled functionallity:
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.
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.
FileViewer - Allows an admin user to show, upload, delete, move files on a file-server.
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 ifsupabase
andserverTable
props are required. When set totrue
filtering and pagination is handeled by thev-data-table
or the user.1. supabase [REQUIRED (serverless is false)]
A
string
representing the globalsupabase
variable. When usingnuxt-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 andvalue
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 thevalue
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 thetransformations
object must be present withfunc
set to null and the rendering component must be an input component. For exampletags
.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:- The first item is a
list
ofstrings
representing supabase filter functions. Legal values:"eq", "gt", "gte", "lt", "lte", "ilike"
- The second item is an
object
of key-value pairs where thekey
is a string present in the first item (see 1) and thevalue
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 usev-data-iterator
instead ofv-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 thecards
prop to set the amount of cards in a row dynamically.- The first item is a
CsvDataIterator - A wrapper component to SupabaseDataIterator which allows it to work in serverless mode process csv files.