@oxygen-cms/ui 1.7.2 → 1.8.0

package/src/components/content/PartialNodeView.vue

@@ -0,0 +1,217 @@
+<template>
+    <NodeViewWrapper class="wrapper" :class="{editable: isEditable, selected: isEditable && selectedOrEditorFocused}">
+        <div v-if="isEditable" class="toolbar">
+            <div class="my-field has-addons" style="width: 100%">
+                <p v-if="!partial" class="control">
+                    <b-button size="is-small" @click="partialChooserActive = true">Choose an existing partial</b-button>
+                </p>
+                <p v-if="!partial" class="control">
+                    <b-button size="is-small" @click="createPartialModalActive = true">Create from scratch</b-button>
+                </p>
+                <div class="is-flex-grow-1"></div>
+                <p v-if="partial" class="control">
+                    <b-button size="is-small" type="is-dark" @click="partialChooserActive = true">{{ partial.key }}</b-button>
+                </p>
+<!--                <p class="control">-->
+<!--                    <b-button size="is-small" data-drag-handle type="is-dark" icon-left="grip-vertical"></b-button>-->
+<!--                </p>-->
+                <p v-if="partial" class="control">
+                    <b-button size="is-small" :disabled="!saveButtonEnabled" icon-left="save" type="is-dark" @click="savePartial"></b-button>
+                </p>
+                <p v-if="partial" class="control">
+                    <b-dropdown position="is-bottom-left">
+                        <template #trigger>
+                            <b-button icon-left="sliders-h" size="is-small" type="is-dark"></b-button>
+                        </template>
+                        <div class="modal-card">
+                            <header class="modal-card-head">
+                                <p class="modal-card-title">Edit Partial Settings</p>
+                            </header>
+                            <div v-if="partial" class="modal-card-body">
+<!--                                <h2></h2>-->
+                                <b-field label="Title" label-position="on-border">
+                                    <b-input :value="partial.title" @input="v => partial.title = v"></b-input>
+                                </b-field>
+                                <br>
+                                <b-field label="Slug" label-position="on-border">
+                                    <b-input :value="partial.key" @input="v => partial.key = v"></b-input>
+                                </b-field>
+                            </div>
+                        </div>
+                    </b-dropdown>
+                </p>
+                <p class="control"><b-button icon-left="trash" size="is-small" type="is-danger" @click="removeSelf"></b-button></p>
+            </div>
+        </div>
+        <b-modal :active="partialChooserActive" has-modal-card aria-role="dialog" aria-modal auto-focus @update:active="(v) => partialChooserActive = v">
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Choose a partial to use</p>
+                </header>
+                <section class="modal-card-body">
+                    <PartialList :in-trash="false" search-query="" @choose="selectPartial" />
+                </section>
+                <footer class="modal-card-foot"></footer>
+            </div>
+        </b-modal>
+        <b-modal :active="createPartialModalActive" has-modal-card aria-role="dialog" aria-modal auto-focus @update:active="(v) => createPartialModalActive = v">
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Partial</p>
+                </header>
+                <section class="modal-card-body">
+                    <p>A partial represents a fragment of reusable content which can be included in multiple places and/or on multiple pages.</p>
+                    <hr>
+                    <b-field label="Title" label-position="on-border">
+                        <b-input v-model="title" />
+                    </b-field>
+                    <br>
+                    <b-field label="Slug" label-position="on-border">
+                        <b-input v-model="slug" />
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="createPartialModalActive = false">Close</b-button>
+                    <b-button type="is-success" @click="createPartial">
+                        Create Partial
+                    </b-button>
+                </footer>
+            </div>
+        </b-modal>
+        <ContentEditor v-if="partial !== null" ref="editor" :editable="isEditable" :content="partial.richContent" class="editor-content" @update:content="updateContent" />
+        <em v-else-if="!isEditable">Unlinked partial block...</em>
+    </NodeViewWrapper>
+</template>
+
+<script>
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
+import ContentEditor from "./ContentEditor.vue";
+import PartialsApi from "../../PartialsApi.js";
+import PartialList from "../PartialList.vue";
+
+export default {
+    name: "PartialNodeView",
+    components: {ContentEditor, NodeViewWrapper, PartialList },
+    props: nodeViewProps,
+    data() {
+        return {
+            partialsApi: new PartialsApi(),
+            partialChooserActive: false,
+            createPartialModalActive: false,
+            partial: null,
+            serverPartial: null,
+            slug: 'layout.nav',
+            title: 'Navigation',
+        }
+    },
+    computed: {
+        isEditable() {
+            return this.editor.isEditable;
+        },
+        saveButtonEnabled() {
+            return this.partial && (JSON.stringify(this.partial) !== JSON.stringify(this.serverPartial));
+        },
+        selectedOrEditorFocused() {
+            return this.selected || (this.$refs.editor && this.$refs.editor.editor.isFocused);
+        }
+    },
+    watch: {
+        'node': 'loadPartial'
+    },
+    mounted() {
+        this.loadPartial()
+    },
+    methods: {
+        async loadPartial() {
+            if(this.node.attrs.id === null) {
+                return;
+            }
+            let response = await this.partialsApi.get(this.node.attrs.id);
+            this.selectPartial(response.item);
+        },
+        removeSelf() {
+            this.deleteNode();
+        },
+        async createPartial() {
+            let response = await this.partialsApi.create({
+                key: this.slug,
+                title: this.title
+            });
+            if(!response.item) {
+                return;
+            }
+            this.createPartialModalActive = false;
+            this.selectPartial(response.item);
+        },
+        selectPartial(partial) {
+            console.log('select partial', partial);
+            this.partial = { ...partial };
+            this.serverPartial = { ... partial };
+            this.partialChooserActive = false;
+            this.updateAttributes({ id: this.partial.id });
+            // let rect = this.$el.getBoundingClientRect();
+            // console.log(rect);
+            // this.absTop = rect.top;
+            // this.absLeft = rect.left;
+            // this.absWidth = rect.width;
+        },
+        updateContent(newContent) {
+            this.partial.richContent = newContent;
+        },
+        async savePartial() {
+            // force update the content
+            this.$refs.editor.onUpdate();
+
+            let res = await this.partialsApi.update(this.partial);
+            this.partial = { ... res.item };
+            this.serverPartial = { ... res.item };
+        }
+    }
+}
+</script>
+
+<style scoped>
+.wrapper {
+    position: relative;
+    background-color: #555;
+}
+.wrapper.editable {
+    outline: 2px dashed purple;
+    padding-top: 30px;
+}
+.wrapper.selected {
+    outline-style: solid;
+}
+
+::v-deep(.editor > .editor-content > .ProseMirror) {
+    min-height: 4rem;
+}
+
+.toolbar {
+    display: flex;
+    z-index: 11;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+
+.editor-content {
+    position: relative;
+}
+
+p.control {
+    margin-bottom: 0;
+}
+
+.my-field {
+    display: flex;
+}
+</style>
+
+<style>
+.my-field > .control > .button {
+    border-radius: 0;
+}
+</style>

package/src/components/content/commands.js

@@ -0,0 +1,72 @@
+import { Extension } from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+import {items} from './suggestion'
+
+export default Extension.create({
+    name: 'commands',
+
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                allowSpaces: true,
+                command: ({editor, range, props}) => {
+                    let command = editor.chain().focus().deleteRange(range);
+                    command = props.command({ editor, range, command });
+                    command.run();
+                },
+                items: items,
+                render: function() {
+                    let editorComponent
+                    return {
+                        onStart: (props) => {
+                            editorComponent = props.editor.editorComponent;
+                            if(!props.clientRect)
+                            {
+                                editorComponent.commandsListVisible = false;
+                                return;
+                            }
+
+                            let rect = props.clientRect();
+                            editorComponent.commandsListVisible = true;
+                            editorComponent.commandsListTop = rect.top;
+                            editorComponent.commandsListLeft = rect.left;
+                            editorComponent.commandsListItems = props.items;
+                            editorComponent.commandsListCommand = props.command;
+                        },
+
+                        onUpdate(props) {
+                            let rect = props.clientRect();
+                            editorComponent.commandsListTop = rect.top;
+                            editorComponent.commandsListLeft = rect.left;
+                            editorComponent.commandsListItems = props.items;
+                            editorComponent.commandsListCommand = props.command;
+                        },
+
+                        onKeyDown(props) {
+                            if (props.event.key === 'Escape') {
+                                editorComponent.commandsListVisible = false;
+                                return true;
+                            }
+                            return editorComponent.$refs['commandsList'].onKeyDown(props);
+                        },
+
+                        onExit() {
+                            editorComponent.commandsListVisible = false;
+                        },
+                    }
+                },
+            },
+        }
+    },
+
+    addProseMirrorPlugins() {
+        this.editor.editorComponent = this.options.editorComponent;
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ];
+    },
+})

package/src/components/content/suggestion.js

@@ -0,0 +1,211 @@
+export function items({ query, canConvert }) {
+    let items = [
+        {
+            title: 'Paragraph',
+            icon: 'paragraph',
+            canConvert: true,
+            node: ({editor}) => {
+                  return editor.schema.node('paragraph');
+            },
+            command: ({ command }) => {
+                return command.setParagraph();
+            },
+        },
+        {
+            title: 'H1',
+            icon: 'heading',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('heading', {level: 1});
+            },
+            command: ({ command }) => {
+                return command.setParagraph().setNode('heading', {level: 1});
+            },
+        },
+        {
+            title: 'H2',
+            icon: 'heading',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('heading', {level: 2});
+            },
+            command: ({ command }) => {
+                return command.setParagraph().setNode('heading', {level: 2});
+            },
+        },
+        {
+            title: 'H3',
+            icon: 'heading',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('heading', {level: 3});
+            },
+            command: ({ command }) => {
+                return command.setParagraph().setNode('heading', {level: 3});
+            },
+        },
+        {
+            title: 'Blockquote',
+            icon: 'quote-left',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('blockquote', {}, [editor.schema.node('paragraph', {}, [])]);
+            },
+            command: ({ command }) => {
+                return command.setParagraph().setBlockquote();
+            },
+        },
+        {
+            title: 'Ordered List',
+            icon: 'list-ol',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('orderedList', {}, [editor.schema.node('listItem', {}, [editor.schema.node('paragraph', {}, [])])]);
+            },
+            command: ({ command }) => {
+                return command.setParagraph().toggleOrderedList();
+            },
+        },
+        {
+            title: 'Unordered List',
+            icon: 'list-ul',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('bulletList', {}, [editor.schema.node('listItem', {}, [editor.schema.node('paragraph', {}, [])])]);
+            },
+            command: ({ command }) => {
+                return command.setParagraph().toggleBulletList();
+            },
+        },
+        {
+            title: 'Horizontal Rule',
+            icon: 'ruler-horizontal',
+            canConvert: true,
+            node: ({editor}) => {
+                return editor.schema.node('horizontalRule');
+            },
+            command: ({ command }) => {
+                return command.setParagraph().setHorizontalRule();
+            },
+        },
+        // {
+        //     title: 'Bold',
+        //     icon: 'bold',
+        //     command: ({ editor, range }) => {
+        //         editor
+        //             .chain()
+        //             .focus()
+        //             .deleteRange(range)
+        //             .setMark('bold')
+        //             .run()
+        //     },
+        // },
+        // {
+        //     title: 'Italic',
+        //     icon: 'italic',
+        //     command: ({ editor, range }) => {
+        //         editor
+        //             .chain()
+        //             .focus()
+        //             .deleteRange(range)
+        //             .setMark('italic')
+        //             .run()
+        //     },
+        // },
+        {
+            title: 'Media',
+            icon: 'photo-video',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('mediaItem');
+            },
+            command: ({ command }) => {
+                return command
+                    .insertContent({
+                        type: 'mediaItem'
+                    });
+            },
+        },
+        {
+            title: 'Raw HTML',
+            icon: 'code',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('rawHtml');
+            },
+            command: ({ command}) => {
+                return command
+                    .insertContent({
+                        type: 'rawHtml'
+                    });
+            },
+        },
+        {
+            title: 'Grid Row',
+            icon: 'th-large',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('gridRow');
+            },
+            command: ({ command }) => {
+               return command
+                    .insertContent({
+                        type: 'gridRow'
+                    });
+            },
+        },
+        {
+            title: 'Partial',
+            icon: 'puzzle-piece',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('partial');
+            },
+            command: ({ command }) => {
+                return command
+                    .insertContent({
+                        type: 'partial'
+                    });
+            },
+        },
+        {
+            title: 'Link to Page',
+            icon: 'file-alt',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('objectLink', { type: 'page', id: null, content: null});
+            },
+            command: ({ command }) => {
+                return command
+                    .insertContent({
+                        type: 'objectLink',
+                        attrs: {
+                            type: 'page', id: null, content: null
+                        }
+                    });
+            },
+        },
+        {
+            title: 'Link to Media',
+            icon: 'file-image',
+            canConvert: false,
+            node: ({editor}) => {
+                return editor.schema.node('objectLink', { type: 'media', id: null, content: null});
+            },
+            command: ({ command }) => {
+                return command
+                    .insertContent({
+                        type: 'objectLink',
+                        attrs: {
+                            type: 'media', id: null, content: null
+                        }
+                    });
+            },
+        },
+    ];
+    items = items.filter(item => item.title.toLowerCase().includes(query.toLowerCase()));
+    if(canConvert) {
+        items = items.filter(item => item.canConvert);
+    }
+    return items;
+}

package/src/components/media/MediaChooseDirectory.vue

@@ -67,7 +67,7 @@ export default {
     },
     data() {
         return {
-            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy),
+            mediaDirectoryApi: new MediaDirectoryApi(),
             newDirectory: null,
             isLoading: false,
             searchQuery: '',
@@ -92,7 +92,7 @@ export default {
     methods: {
         async fetchData() {
             this.isLoading = true;
-            let data = await this.mediaDirectoryApi.list(false, 1, null);
+            let data = await this.mediaDirectoryApi.list({ inTrash: false, page: 1, q: null });
             this.directoriesList = data.items;
             this.directoriesList.sort((a, b) => {
                 return getDirectoryPathString(a).localeCompare(getDirectoryPathString(b))

package/src/components/media/MediaDirectory.vue

@@ -57,7 +57,7 @@ export default {
             isEditModalActive: false,
             newName: '',
             newSlug: '',
-            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy)
+            mediaDirectoryApi: new MediaDirectoryApi()
         }
     },
     computed: {

package/src/components/media/MediaInsertModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <b-modal :active.sync="active" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus width="80%" class="media-insert-modal">
+    <b-modal :active="active" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus width="80%" class="media-insert-modal" @update:active="updateActive">
         <div class="modal-card">
             <header class="modal-card-head">
                 <slot name="title"><p class="modal-card-title">Choose an item to insert</p></slot>
@@ -9,7 +9,7 @@
             </section>
             <footer class="modal-card-foot is-flex">
                 <div class="is-flex-grow-1"></div>
-                <b-button @click="emitClose">Close</b-button>
+                <b-button @click="emitClose">{{ closeVerb }}</b-button>
                 <b-button :disabled="selectedFiles.length === 0 || (!multiselectAllowed && selectedFiles.length > 1)" type="is-primary" @click="doInsert">
                     <span v-if="selectedFiles.length === 0">{{ actionVerb }}</span>
                     <span v-else-if="selectedFiles.length === 1">{{actionVerb }} item</span>
@@ -36,6 +36,10 @@ export default {
         actionVerb: {
             type: String,
             default: 'Insert'
+        },
+        closeVerb: {
+            type: String,
+            default: 'Close'
         }
     },
     data() {
@@ -62,6 +66,11 @@ export default {
         },
         doInsert() {
             this.$emit('select', this.selectedFiles);
+        },
+        updateActive(newVal) {
+            if(!newVal) {
+                this.emitClose();
+            }
         }
     }
 }

package/src/components/media/MediaItem.vue

@@ -185,7 +185,7 @@ export default {
             versions: [],
             caption: null,
             description: null,
-            mediaApi: new MediaApi(this.$buefy),
+            mediaApi: new MediaApi(),
             Internationalize
         }
     },

package/src/components/media/MediaItemPreview.vue

@@ -1,19 +1,22 @@
 <template>
     <div class="media-icon-container">
-        <img v-if="item.type === TYPE_IMAGE && !loadingError" :src="'/content/media/' + item.filename" :alt="item.caption ? item.caption : item.name" @error="loadingFailed">
+        <img v-if="item.type === TYPE_IMAGE && !loadingError" :src="getApiHost() + 'content/media/' + item.filename" :alt="item.caption ? item.caption : item.name" @error="loadingFailed">
         <b-tooltip v-else-if="item.type === TYPE_IMAGE" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
             <b-icon type="is-danger" icon="file-image" size="is-large" class="media-icon"></b-icon>
         </b-tooltip>
-        <img v-if="item.type === TYPE_DOCUMENT && !loadingError" :src="'/oxygen/api/media/' + item.id + '/preview'" alt="PDF preview" @error="loadingFailed">
+        <img v-if="item.type === TYPE_DOCUMENT && !loadingError" :src="getApiRoot() + 'media/' + item.id + '/preview'" alt="PDF preview" @error="loadingFailed">
         <b-tooltip v-else-if="item.type === TYPE_DOCUMENT" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
             <b-icon type="is-danger" icon="file-pdf" size="is-large" class="media-icon"></b-icon>
         </b-tooltip>
         <b-icon v-else-if="item.type === TYPE_AUDIO" icon="music" size="is-large" class="media-icon"></b-icon>
+        <div class="media-icon-toolbar"><slot></slot></div>
     </div>
 </template>
 
 <script>
 import MediaApi from "../../MediaApi";
+import {getApiRoot} from "../../CrudApi.js";
+import {getApiHost} from "../../api.js";
 
 export default {
     name: "MediaItemPreview",
@@ -26,13 +29,19 @@ export default {
     },
     data() {
         return {
+            getApiHost: getApiHost,
+            getApiRoot: getApiRoot,
             TYPE_IMAGE: MediaApi.TYPE_IMAGE,
             TYPE_AUDIO: MediaApi.TYPE_AUDIO,
             TYPE_DOCUMENT: MediaApi.TYPE_DOCUMENT,
             loadingError: false
         }
     },
+    watch: { 'item': 'resetLoadingFailed' },
     methods: {
+        resetLoadingFailed() {
+            this.loadingError = false;
+        },
         loadingFailed() {
             this.loadingError = true;
         }
@@ -42,4 +51,11 @@ export default {
 
 <style scoped lang="scss">
     @import './media.scss';
+
+    .media-icon-toolbar {
+        z-index: 10;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
 </style>

package/src/components/media/MediaList.vue

@@ -1,5 +1,4 @@
 <template>
-
     <div class="full-height full-height-container media-container">
         <div class="top-bar">
             <div v-if="!paginatedItems.loading && !inTrash && !searchQuery" class="breadcrumb">
@@ -20,7 +19,7 @@
                 <b-button outlined rounded icon-left="arrow-left" class="action-bar-pad" @click="navigateTo({ currentPath: '' })">All Items</b-button>
                 <div class="title action-bar-pad">Search results for "{{ searchQuery }}"</div>
             </div>
-            <ul v-else>
+            <ul v-else class="breadcrumb">
                 <li><b-skeleton :animated="true" size="is-large" :width="100"></b-skeleton></li>
             </ul>
 
@@ -140,8 +139,8 @@ export default {
             isCreateDirectoryModalActive: false,
             newDirectoryName: '',
             searchDebounce: null,
-            mediaApi: new MediaApi(this.$buefy),
-            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy),
+            mediaApi: new MediaApi(),
+            mediaDirectoryApi: new MediaDirectoryApi(),
             getDirectoryBreadcrumbItems: getDirectoryBreadcrumbItems
         }
     },
@@ -174,7 +173,7 @@ export default {
             this.paginatedItems.files = []
             this.paginatedItems.directories = [];
 
-            let data = await this.mediaApi.list(this.inTrash, this.searchQuery, this.paginatedItems.currentPage, this.searchQuery ? '' : this.currentPath);
+            let data = await this.mediaApi.list({ inTrash: this.inTrash, q: this.searchQuery, page: this.paginatedItems.currentPage, path: this.searchQuery ? '' : this.currentPath });
 
             this.paginatedItems.currentDirectory = data.currentDirectory;
             this.paginatedItems.directories = data.directories.map(dir => { dir.selected = false; return dir; });

package/src/components/media/MediaUpload.vue

@@ -56,7 +56,7 @@ export default {
         return {
             filesToUpload: [],
             isUploading: false,
-            mediaApi: new MediaApi(this.$buefy)
+            mediaApi: new MediaApi()
         }
     },
     computed: {