@oxygen-cms/ui 1.7.1 → 1.8.0

package/{.eslintrc.js → .eslintrc.json}

@@ -1,4 +1,4 @@
-module.exports = {
+{
     "env": {
         "browser": true,
         "es2021": true,
@@ -11,7 +11,7 @@ module.exports = {
         "prettier"
     ],
     "parserOptions": {
-        "ecmaVersion": 12,
+        "ecmaVersion": 2022,
         "sourceType": "module"
     },
     "plugins": [
@@ -20,4 +20,4 @@ module.exports = {
     ],
     "rules": {
     }
-};
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oxygen-cms/ui.git"
   },
+  "type": "module",
   "author": "Chris Chamberlain <chris@chamberlain.id.au>",
   "license": "MIT",
   "private": false,
@@ -15,6 +16,12 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/vue-fontawesome": "^0.1.10",
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/extension-link": "^2.0.0-beta.209",
+    "@tiptap/extension-underline": "^2.0.0-beta.209",
+    "@tiptap/starter-kit": "^2.0.0-beta.209",
+    "@tiptap/suggestion": "^2.0.0-beta.209",
+    "@tiptap/vue-2": "^2.0.0-beta.209",
     "autoprefixer": "^9.8.5",
     "brace": "^0.11.1",
     "buefy": "^0.9.10",
@@ -23,6 +30,8 @@
     "downloadjs": "^1.4.7",
     "libphonenumber-js": "^1.9.11",
     "lodash": "^4.17.21",
+    "portal-vue": "^2.1.7",
+    "tippy.js": "^6.3.7",
     "title-case": "^3.0.3",
     "ua-parser-js": "^0.7.24",
     "v-hotkey": "^0.8.0",
@@ -32,16 +41,17 @@
     "vue-router": "^3.5.1",
     "vue-template-compiler": "^2.6.11",
     "vue2-ace-editor": "^0.0.15",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "zeed-dom": "^0.9.26"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
     "@babel/preset-env": "^7.13.5",
     "babel-jest": "^26.6.3",
     "babel-polyfill": "^6.26.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-vue": "^7.17.0",
     "jest": "^26.6.3",
     "regenerator-runtime": "^0.13.7",

package/src/CrudApi.js

@@ -9,12 +9,13 @@ export const getApiRoot = () => {
 
 export class CrudApi {
 
-    constructor($buefy) {
+    static setBuefy($buefy) {
         this.$buefy = $buefy;
     }
 
     request(method) {
-        return FetchBuilder.default(this.$buefy, method);
+        if(!CrudApi.$buefy) { throw new Error("need to call setBuefy() first"); }
+        return FetchBuilder.default(CrudApi.$buefy, method);
     }
 
     static getResourceName() {
@@ -31,12 +32,18 @@ export class CrudApi {
         return m;
     }
 
-    async list(inTrash, page, searchQuery) {
+    static convertModelFromAPI(data) {
+        return data;
+    }
+
+    async list({ inTrash, page, q, sortField, sortOrder }) {
         return this.request('get')
             .withQueryParams({
-                page: (searchQuery !== null && searchQuery !== '' ) ? null : page,
+                page: (q !== null && q !== '' ) ? null : page,
+                sortField: sortField,
+                sortOrder: sortOrder,
                 trash: (inTrash ? 'true' : 'false'),
-                q: (searchQuery !== null && searchQuery !== '' ) ? searchQuery : null
+                q: (q !== null && q !== '' ) ? q : null
             })
             .fetch(this.constructor.getResourceRoot());
     }
@@ -77,7 +84,7 @@ export class CrudApi {
 
     async confirmForceDelete(id) {
         const promise = new Promise((resolve) => {
-            this.$buefy.dialog.confirm({
+            CrudApi.$buefy.dialog.confirm({
                 message: 'Are you sure you want to delete this record forever?',
                 onConfirm: resolve
             });
@@ -85,20 +92,20 @@ export class CrudApi {
 
         await promise;
         let data = await this.forceDelete(id);
-        this.$buefy.toast.open(morphToNotification(data));
+        CrudApi.$buefy.toast.open(morphToNotification(data));
         return data;
     }
 
     async restoreAndNotify(id) {
         let data = await this.request('post')
             .fetch(this.constructor.getResourceRoot() + '/' + id + '/restore');
-        this.$buefy.toast.open(morphToNotification(data));
+        CrudApi.$buefy.toast.open(morphToNotification(data));
         return data;
     }
 
     async deleteAndNotify(id) {
         let data = await this.delete(id);
-        this.$buefy.toast.open(morphToNotification(data));
+        CrudApi.$buefy.toast.open(morphToNotification(data));
         return data;
     }
 
@@ -111,4 +118,11 @@ export class CrudApi {
         return this.request('post')
             .fetch(this.constructor.getResourceRoot() + '/' + id + '/make-head');
     }
+
+    async publish(id) {
+        let data = await this.request('post').fetch(this.constructor.getResourceRoot() + '/' + id + '/publish');
+        CrudApi.$buefy.toast.open(morphToNotification(data));
+        return data.item;
+    }
+
 }

package/src/MediaApi.js

@@ -33,12 +33,12 @@ export default class MediaApi extends CrudApi {
             .fetch(this.constructor.getResourceRoot());
     }
 
-    async list(inTrash, searchQuery, page, path) {
+    async list({ inTrash, q, page, path }) {
         return this.request('get')
             .withQueryParams({
                 path: path,
-                q: (searchQuery !== null && searchQuery !== '' ) ? searchQuery : null,
-                page: (searchQuery !== null && searchQuery !== '' ) ? null : page,
+                q: (q !== null && q !== '' ) ? q : null,
+                page: (q !== null && q !== '' ) ? null : page,
                 trash: (inTrash ? 'true' : 'false'),
             })
             .fetch(this.constructor.getResourceRoot());

package/src/PagesApi.js

@@ -0,0 +1,48 @@
+import  { CrudApi } from './CrudApi';
+import {getApiHost} from "./api.js";
+
+export default class PagesApi extends CrudApi {
+
+    static STAGE_DRAFT = 0;
+    static STAGE_PENDING_REVIEW = 1;
+    static STAGE_PUBLISHED = 2;
+    static STAGE_ARCHIVED = 3;
+
+    static getResourceName() {
+        return 'pages';
+    }
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        delete m.createdAt;
+        delete m.updatedAt;
+        delete m.deletedAt;
+        delete m.createdBy;
+        delete m.updatedBy;
+        delete m.headVersion;
+        return m;
+    }
+
+    static slugToUrl(slug) {
+        if(slug === '/') { slug = ''; }
+        return getApiHost() + slug;
+    }
+
+    async list({ inTrash, page, q, path, sortField, sortOrder }) {
+        if(!path) {
+            path = q ? null : '/';
+        }
+        return this.request('get')
+            .withQueryParams({
+                path: path,
+                page: (q !== null && q !== '' ) ? null : page,
+                trash: (inTrash ? 'true' : 'false'),
+                q: (q !== null && q !== '' ) ? q : null,
+                sortField,
+                sortOrder
+            })
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+}

package/src/PartialsApi.js

@@ -0,0 +1,30 @@
+import  { CrudApi } from './CrudApi';
+
+export default class PartialsApi extends CrudApi {
+
+    static STAGE_DRAFT = 0;
+    static STAGE_PUBLISHED = 1;
+
+    static getResourceName() {
+        return 'partials';
+    }
+
+    static prepareModelForAPI(data) {
+        let m = { ...data  };
+        delete m.id;
+        return m;
+    }
+
+    async list({ inTrash, page, q, sortField, sortOrder }) {
+        return this.request('get')
+            .withQueryParams({
+                page: (q !== null && q !== '' ) ? null : page,
+                trash: (inTrash ? 'true' : 'false'),
+                q: (q !== null && q !== '' ) ? q : null,
+                sortField,
+                sortOrder
+            })
+            .fetch(this.constructor.getResourceRoot());
+    }
+
+}

package/src/components/AuthenticatedLayout.vue

@@ -51,6 +51,8 @@
                 <router-view></router-view>
             </transition>
 
+            <portal-target name="editors"></portal-target>
+
         </div>
     </div>
 </template>
@@ -66,7 +68,7 @@ export default {
     emits: ["logout"],
     data() {
         return {
-            usersApi: new UsersApi(this.$buefy),
+            usersApi: new UsersApi(),
             setCollapsed: false,
             requestedCollapsed: false
         }

package/src/components/CodeEditor.vue

@@ -79,7 +79,7 @@ export default {
     props: {
         value: { type: String, default: null },
         height: { type: String, required: true },
-        lang: { type: String, required:  true }
+        lang: { type: String, required: true }
     },
     data() {
         return {

package/src/components/GroupsChooser.vue

@@ -30,7 +30,7 @@ export default {
     },
     data() {
         return {
-            groupsApi: new GroupsApi(this.$buefy),
+            groupsApi: new GroupsApi(),
             loading: true,
             users: []
         }
@@ -46,7 +46,7 @@ export default {
     methods: {
         async fetchData(name) {
             this.loading = true;
-            this.users = (await this.groupsApi.list(false, 1, name)).items;
+            this.users = (await this.groupsApi.list({ inTrash: false, page: 1, q: name })).items;
             this.loading = false;
         }
     }

package/src/components/GroupsList.vue

@@ -86,7 +86,7 @@ export default {
     components: { UserJoined, GenericEditableField, EditButtonOnRowHover },
     data() {
         return {
-            groupsApi: new GroupsApi(this.$buefy),
+            groupsApi: new GroupsApi(),
             paginatedItems: {items: null, totalItems: null, itemsPerPage: null, loading: false, currentPage: 1},
         }
     },
@@ -96,7 +96,7 @@ export default {
     methods: {
         async fetchData() {
             this.paginatedItems.loading = true;
-            let data = await this.groupsApi.list(false, this.paginatedItems.currentPage, null);
+            let data = await this.groupsApi.list({ inTrash: false, page: this.paginatedItems.currentPage, q: null });
             this.paginatedItems.items = data.items;
             this.paginatedItems.totalItems = data.totalItems;
             this.paginatedItems.itemsPerPage = data.itemsPerPage;

package/src/components/PageActions.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <b-button v-if="item.stage !== STAGE_PUBLISHED" rounded size="is-small" icon-left="globe-asia" class="mr-2" @click="publish">Publish</b-button>
+    </div>
+</template>
+
+<script>
+import PagesApi from "../PagesApi.js";
+
+export default {
+    name: "PageActions",
+    props: {
+        item: { type: Object, required: true }
+    },
+    data() {
+        return {
+            STAGE_PUBLISHED: PagesApi.STAGE_PUBLISHED,
+            pagesApi: new PagesApi()
+        }
+    },
+    methods: {
+        async publish() {
+            let item = await this.pagesApi.publish(this.item.id);
+            this.$emit('update', item);
+        }
+    }
+}
+</script>

package/src/components/PageEdit.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="full-height is-flex is-flex-direction-column is-align-items-stretch">
+        <div class="page-details is-flex is-flex-direction-row">
+            <div class="page-title is-flex-grow-1">
+                <transition name="fade" mode="out-in">
+                    <b-skeleton v-if="loading" key="skeleton"></b-skeleton>
+                    <span v-else key="name" class="title">Edit Page - {{ model.title }}</span>
+                </transition>
+            </div>
+            <div class="is-flex-grow-1"></div>
+            <div>
+                <b-switch :value="editable" @input="v => editable = v">Editable?</b-switch>
+                <b-button icon-left="cog" @click="editPageModalActive = true">Page Settings</b-button>
+                <b-button type="is-primary" icon-left="save" @click="save">Save</b-button>
+            </div>
+        </div>
+        <b-modal :active="editPageModalActive" has-modal-card trap-focus aria-modal auto-focus @update:active="v => editPageModalActive = v">
+            <div class="modal-card is-relative">
+                <div class="modal-card-head">
+                    <p class="modal-card-title">Edit Page Settings</p>
+                </div>
+                <div class="modal-card-body">
+                    <b-loading :active="loading" :is-full-page="false"></b-loading>
+                    <div v-if="!loading">
+                        <b-field label="Title">
+                            <b-input v-model="model.title" placeholder="Title"></b-input>
+                        </b-field>
+                        <b-field>
+                            <template #label>
+                                URL
+                                <b-tooltip multilined position="is-right" type="is-dark" label="The URL at which this page is located. It can only contain letters, numbers, slashes and dashes. Valid examples include: '/', 'my-page-123', 'some/nested/page'">
+                                    <b-icon size="is-small" icon="question-circle"></b-icon>
+                                </b-tooltip>
+                            </template>
+                            <b-input v-model="model.slug" placeholder="slug"></b-input>
+                        </b-field>
+                        <b-field label="Description">
+                            <b-input v-model="model.description" type="textarea" placeholder="page description"></b-input>
+                        </b-field>
+                        <b-field>
+                            <template #label>
+                                Tags
+                                <b-tooltip multilined position="is-right" type="is-dark" label="A list of keywords for this page. Used for SEO">
+                                    <b-icon size="is-small" icon="question-circle"></b-icon>
+                                </b-tooltip>
+                            </template>
+                            <b-taginput v-model="model.tags"></b-taginput>
+                        </b-field>
+<!--                        <b-collapse-->
+<!--                            class="card"-->
+<!--                            animation="slide"-->
+<!--                            :open="false">-->
+<!--                            <template #trigger="props">-->
+<!--                                <div-->
+<!--                                    class="card-header"-->
+<!--                                    role="button"-->
+<!--                                    :aria-expanded="props.open"-->
+<!--                                >-->
+<!--                                    <p class="card-header-title">-->
+<!--                                        Advanced Options-->
+<!--                                    </p>-->
+<!--                                    <a class="card-header-icon">-->
+<!--                                        <b-icon-->
+<!--                                            :icon="props.open ? 'caret-down' : 'caret-up'">-->
+<!--                                        </b-icon>-->
+<!--                                    </a>-->
+<!--                                </div>-->
+<!--                            </template>-->
+<!--                            <div class="card-content">-->
+<!--                                <div class="content">-->
+                        <div class="field">
+                            <label class="label">
+                                Metadata
+                                <b-tooltip multilined label="An HTML field used to inject custom metadata into the page. Used for SEO." position="is-right" type="is-dark">
+                                    <b-icon size="is-small" icon="question-circle"></b-icon>
+                                </b-tooltip>
+                            </label>
+                            <div class="control">
+                                <CodeEditor v-model="model.meta" lang="html" height="10rem" />
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label class="label">Options</label>
+                            <div class="control">
+                                <CodeEditor v-model="model.options" lang="json" height="10rem" />
+                            </div>
+                        </div>
+<!--                                </div>-->
+<!--                            </div>-->
+<!--                        </b-collapse>-->
+                    </div>
+                </div>
+            </div>
+        </b-modal>
+        <div class="is-relative editor-parent">
+            <b-loading :active="loading" :is-full-page="false"></b-loading>
+            <ContentEditor v-if="!loading" :editable="editable" :expanded="true" :content="model.richContent" @update:content="v => model.richContent = v" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ContentEditor from "./content/ContentEditor.vue";
+import PagesApi from "../PagesApi";
+import CodeEditor from "./CodeEditor.vue";
+import {morphToNotification} from "../api.js";
+export default {
+    name: "PageCreate",
+    components: {ContentEditor, CodeEditor},
+    data() {
+        return {
+            loading: true,
+            model: null,
+            serverModel: null,
+            editable: true,
+            editPageModalActive: false,
+            pagesApi: new PagesApi(),
+            // content: { type: 'doc', content: [{type:'paragraph',content:[{type:'text',text:'I’m running Tiptap with Vue.js. 🎉'}]}]}
+        }
+    },
+    mounted() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            this.loading = true;
+            let res = await this.pagesApi.get(this.$route.params.id);
+            console.log(res);
+            this.setModel(res.item);
+        },
+        setModel(model) {
+            this.loading = false;
+            this.model = model;
+            this.serverModel = model;
+        },
+        async save() {
+            // this.submittingForm = true;
+            let response = await this.pagesApi.update(this.model);
+            // this.submittingForm = false;
+            this.setModel(response.item);
+            this.$buefy.toast.open(morphToNotification(response));
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import "../components/util.css";
+
+    .page-details {
+        padding: 1rem;
+    }
+
+    .editor-parent {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    /*.editor-gutter {*/
+    /*    width: 160px;*/
+    /*    background-color: #444;*/
+    /*    box-shadow: inset -5px 0 10px 2px #222;*/
+    /*}*/
+</style>

package/src/components/PageNestedPagination.vue

@@ -0,0 +1,27 @@
+<template>
+    <tr v-if="pagesByParent[item.id] && pagesByParent[item.id].totalItems > pagesByParent[item.id].itemsPerPage" :class="'row-depth-' + depth">
+        <td></td>
+        <td colspan="5">
+            <div class="is-flex">
+                <div class="is-flex-grow-1"></div>
+                <b-pagination :total="pagesByParent[item.id].totalItems" :current="pagesByParent[item.id].currentPage" :per-page="pagesByParent[item.id].itemsPerPage" @change="p => paginate(item, p)"></b-pagination>
+            </div>
+        </td>
+    </tr>
+</template>
+
+<script>
+export default {
+    name: "PageNestedPagination",
+    props: {
+        item: Object,
+        pagesByParent: Object,
+        depth: Number,
+        paginate: Function
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/PageNestedRow.vue

@@ -0,0 +1,52 @@
+<template>
+    <tr :class="'row-depth-' + depth + (isFirst ? ' first-child' : '')">
+        <td>
+            <a v-if="item.numChildren > 0" role="button" class="expand-button" @click="event => $emit('toggle-expand', item)">
+                <b-icon :icon="expanded ? 'angle-down' : 'angle-right'"></b-icon>
+            </a>
+        </td>
+        <td>{{ item.title }} <PageStatusIcon :item="item"></PageStatusIcon></td>
+        <td><a :href="PagesApi.slugToUrl(item.slug)" class="is-size-7" target="_blank">{{ PagesApi.slugToUrl(item.slug) }} <b-icon icon="external-link-alt"></b-icon></a></td>
+        <td><div class="is-size-7">{{ item.description }}</div></td>
+        <td>
+            <div v-if="item" class="is-size-7"><Updated :model="item"></Updated></div>
+        </td>
+        <td><slot name="actions" :row="item"></slot></td>
+    </tr>
+</template>
+
+<script>
+import PageStatusIcon from "./PageStatusIcon.vue";
+import Updated from "./Updated.vue";
+import PagesApi from "../PagesApi.js";
+
+export default {
+    name: "PageNestedRow",
+    components: {PageStatusIcon, Updated},
+    props: {
+        item: Object,
+        isFirst: Boolean,
+        depth: Number,
+        expanded: Boolean
+    },
+    data() {
+        return {
+            PagesApi: PagesApi
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import "../styles/pages-table.scss";
+
+    //.has-darker-top-border {
+    ////border-top-color: $grey-dark;
+    ////border-top-width: 1px;
+    //    box-shadow: 0 10px 10px -10px inset $grey-dark;
+    //}
+
+    .expand-button:hover {
+        color: $primary !important;
+    }
+</style>

package/src/components/PageStatusIcon.vue

@@ -0,0 +1,33 @@
+<template>
+    <b-icon :icon="statusIcon"></b-icon>
+</template>
+
+<script>
+import PagesApi from "../PagesApi.js";
+
+export default {
+    name: "PageStatusIcon",
+    props: {
+        item: Object
+    },
+    computed: {
+        statusIcon() {
+            if(this.item.stage === PagesApi.STAGE_ARCHIVED) {
+                return 'archive';
+            } else if(this.item.stage === PagesApi.STAGE_DRAFT) {
+                return 'pen-square';
+            } else if(this.item.stage === PagesApi.STAGE_PENDING_REVIEW) {
+                return 'user-edit';
+            } else if(this.item.stage === PagesApi.STAGE_PUBLISHED) {
+                return 'globe-asia';
+            } else {
+                throw new Error('unknown stage ' + this.item.stage);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>