@oxygen-cms/ui 1.7.2 → 1.8.0

package/src/components/PageTable.vue

@@ -0,0 +1,156 @@
+<template>
+    <b-table
+        ref="table"
+        :data="pagesByParent[0].items"
+        :loading="pagesByParent[0].loading"
+        custom-row-key="id"
+        :paginated="pagesByParent[0].totalItems > pagesByParent[0].itemsPerPage"
+        backend-pagination
+        :total="pagesByParent[0].totalItems"
+        :per-page="pagesByParent[0].itemsPerPage"
+        :current-page="pagesByParent[0].currentPage"
+        detailed
+        :has-detailed-visible="rowHasChildren"
+        custom-detail-row
+        :backend-sorting="!!onSort"
+        default-sort-direction="asc"
+        :default-sort="[sortField, sortOrder]"
+        sticky-header
+        detail-key="id"
+        aria-next-label="Next page"
+        aria-previous-label="Previous page"
+        aria-page-label="Page"
+        aria-current-label="Current page"
+        class="full-height-flex full-height-container"
+        @page-change="onPageChange"
+        @details-open="item => setExpanded(item, true)"
+        @details-close="item => setExpanded(item, false)"
+        @sort="onSort">
+        <b-table-column v-slot="props" label="Title" :sortable="!!onSort" field="title">{{ props.row.title }} <PageStatusIcon :item="props.row"></PageStatusIcon></b-table-column>
+        <b-table-column v-slot="props" label="URL"  :sortable="!!onSort" field="slugPart"><a :href="PagesApi.slugToUrl(props.row.slug)" class="is-size-7" target="_blank">{{ PagesApi.slugToUrl(props.row.slug) }} <b-icon icon="external-link-alt"></b-icon></a></b-table-column>
+        <b-table-column v-slot="props" label="Description" width="30%" :sortable="!!onSort" field="description"><div class="is-size-7">{{ props.row.description }}</div></b-table-column>
+        <b-table-column v-slot="props" label="Last Updated" field="updatedAt" :sortable="!!onSort">
+            <div v-if="props.row.updatedAt" class="is-size-7"><Updated :model="props.row"></Updated></div>
+        </b-table-column>
+        <b-table-column v-slot="props" class="toolbar">
+            <slot name="actions" :row="props.row"></slot>
+        </b-table-column>
+        <!-- TODO: this is a massive hack, only supports up to a certain level of nesting -->
+        <template #detail="slot">
+            <template v-if="expanded[slot.row.id]">
+                <template v-for="(item1, i) in pagesByParent[slot.row.id].items">
+                    <PageNestedRow :key="item1.id" :item="item1" :is-first="i  === 0" :depth="1" :expanded="expanded[item1.id]" @toggle-expand="item => setExpanded(item, !expanded[item.id])">
+                        <template #actions="props"><slot name="actions" :row="props.row"></slot></template>
+                    </PageNestedRow>
+                    <template v-if="expanded[item1.id]">
+                        <template v-for="(item2, j) in pagesByParent[item1.id].items">
+                            <PageNestedRow :key="item2.id" :item="item2" :is-first="j === 0" :depth="2" :expanded="expanded[item2.id]" @toggle-expand="item => setExpanded(item, !expanded[item.id])">
+                                <template #actions="props"><slot name="actions" :row="props.row"></slot></template>
+                            </PageNestedRow>
+                            <template v-if="expanded[item2.id]">
+                            <template v-for="(item3, k) in pagesByParent[item2.id].items">
+                                <PageNestedRow :key="item3.id" :item="item3" :is-first="k === 0" :depth="3" :expanded="expanded[item3.id]" @toggle-expand="item => setExpanded(item, !expanded[item.id])">
+                                    <template #actions="props"><slot name="actions" :row="props.row"></slot></template>
+                                </PageNestedRow>
+                            </template></template>
+                            <PageNestedPagination v-if="expanded[item2.id]" :key="item2.key" :item="item2" :pages-by-parent="pagesByParent" :depth="3" :paginate="paginate"></PageNestedPagination>
+                        </template>
+                    </template>
+                    <PageNestedPagination v-if="expanded[item1.id]" :key="item1.key" :item="item1" :pages-by-parent="pagesByParent" :depth="2" :paginate="paginate"></PageNestedPagination>
+                </template>
+                <PageNestedPagination :item="slot.row" :pages-by-parent="pagesByParent" :depth="1" :paginate="paginate"></PageNestedPagination>
+            </template>
+        </template>
+    </b-table>
+</template>
+
+<script>
+import PageStatusIcon from "./PageStatusIcon.vue";
+import Updated from "./Updated.vue";
+import PagesApi from "../PagesApi.js";
+import Vue from "vue";
+import PageNestedRow from "./PageNestedRow.vue";
+import PageNestedPagination from "./PageNestedPagination.vue";
+
+export default {
+    name: "PageTable",
+    components: {PageNestedPagination, PageNestedRow, PageStatusIcon, Updated},
+    props: {
+        sortField: String,
+        sortOrder: String,
+        onSort: { type: Function, default: () => {} },
+        paginatedItems: { type: Object },
+        onPageChange: Function,
+    },
+    data() {
+        return {
+            pagesApi: new PagesApi(),
+            PagesApi: PagesApi,
+            expanded: {},
+            // `0` denotes the "root" level
+            pagesByParent: {0: {items: [], loading: true, totalItems: 0, itemsPerPage: 0, currentPage: 1}},
+        }
+    },
+    watch: {
+        'paginatedItems.items': 'loadAllDetails'
+    },
+    beforeMount() {
+        this.loadAllDetails();
+    },
+    methods: {
+        async loadAllDetails() {
+            this.pagesByParent[0].loading = true;
+            this.pagesByParent[0].items = await Promise.all(this.paginatedItems.items.map(this.loadChildren));
+            this.pagesByParent[0].totalItems = this.paginatedItems.totalItems;
+            this.pagesByParent[0].itemsPerPage = this.paginatedItems.itemsPerPage;
+            this.pagesByParent[0].currentPage = this.paginatedItems.currentPage;
+            this.pagesByParent[0].loading = false;
+        },
+        rowHasChildren(row) {
+            return row.numChildren > 0;
+        },
+        async loadChildren(page) {
+            return await this.paginate(page, 1);
+        },
+        async paginate(page, pageNum) {
+            if (!this.pagesByParent[page.id]) {
+                Vue.set(this.pagesByParent, page.id, {items: [], itemsPerPage: 1, totalItems: 0, currentPage: pageNum});
+            }
+
+            // if the slug is the root ( "/" ) then we don't show any child pages, since they're displayed as sibling pages.
+            if (page.slug !== '/' && page.numChildren > 0) {
+                console.log('loading children for', page.slug, 'page #', pageNum);
+                let result = await this.pagesApi.list({ inTrash: false, page: pageNum, q: null, path: page.slug, sortField: this.sortField, sortOrder: this.sortOrder });
+                // TODO: this currently recursively grabs all children ==> as many as N http requests where N is the number of pages in the site.
+                // Can we be more efficient?
+                this.pagesByParent[page.id].items = await Promise.all(result.items.map(this.loadChildren));
+                this.pagesByParent[page.id].itemsPerPage = result.itemsPerPage;
+                this.pagesByParent[page.id].totalItems = result.totalItems;
+                this.pagesByParent[page.id].currentPage = pageNum;
+            } else {
+                this.pagesByParent[page.id].items = [];
+                this.pagesByParent[page.id].itemsPerPage = 0;
+                this.pagesByParent[page.id].totalItems = 0;
+                this.pagesByParent[page.id].currentPage = 1;
+            }
+
+            return page;
+        },
+        async setExpanded(item, expanded) {
+            let o = {};
+            o[item.id] = expanded;
+            this.expanded = Object.assign({}, this.expanded, o);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import "./util.css";
+
+    ::v-deep .table-wrapper.has-sticky-header {
+        flex: 1 1 auto;
+    }
+
+    @import "../styles/pages-table";
+</style>

package/src/components/PartialActions.vue

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

package/src/components/PartialList.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="full-height-flex scroll-container">
+
+        <b-loading v-model="paginatedItems.loading" :is-full-page="false" :can-cancel="false"></b-loading>
+
+        <h2 v-if="!paginatedItems.loading && paginatedItems.items.length === 0" class="subtitle">
+            No items found.
+        </h2>
+
+        <div
+            v-for="item in paginatedItems.items"
+            :key="item.id"
+            class="card"
+            @click="$emit('choose', item)">
+            <span>{{ item.title }} ( <code>{{ item.key }}</code> )</span>
+            <ContentEditor :editable="false" :content="item.richContent" />
+        </div>
+    </div>
+</template>
+
+<script>
+import PartialsApi from "../PartialsApi.js";
+import ContentEditor from "./content/ContentEditor.vue";
+
+export default {
+    name: "PartialList",
+    components: {ContentEditor},
+    props: {
+        inTrash: {
+            type: Boolean,
+            default: false
+        },
+        searchQuery: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            partialsApi: new PartialsApi(),
+            paginatedItems: {items: [], totalItems: 0, itemsPerPage: 0, loading: false, currentPage: 1},
+        }
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            if(this.paginatedItems.loading) {
+                return;
+            }
+            this.paginatedItems.loading = true;
+            this.paginatedItems.items = [];
+
+            let data = await this.partialsApi.list({ inTrash: this.inTrash, page: this.paginatedItems.currentPage, q: this.searchQuery });
+
+            this.paginatedItems.items = data.items;
+            this.paginatedItems.loading = false;
+            this.paginatedItems.itemsPerPage = data.itemsPerPage;
+            this.paginatedItems.totalItems = data.totalItems;
+
+            console.log(data);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import "./util.css";
+
+    .card {
+        cursor: pointer;
+    }
+</style>

package/src/components/PartialStatusIcon.vue

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

package/src/components/PartialTable.vue

@@ -0,0 +1,65 @@
+<template>
+    <b-table
+        ref="table"
+        :data="(paginatedItems === null || paginatedItems.items === null) ? [] : paginatedItems.items"
+        :loading="paginatedItems === null || paginatedItems.items === null || paginatedItems.loading"
+        custom-row-key="id"
+        :paginated="paginatedItems !== null && (paginatedItems.totalItems > paginatedItems.itemsPerPage)"
+        backend-pagination
+        :total="paginatedItems !== null ? paginatedItems.totalItems : 0"
+        :per-page="paginatedItems !== null ? paginatedItems.itemsPerPage : 0"
+        :current-page="paginatedItems !== null ? paginatedItems.currentPage : 1"
+        :detailed="false"
+        :backend-sorting="!!onSort"
+        default-sort-direction="asc"
+        :default-sort="[sortField, sortOrder]"
+        sticky-header
+        aria-next-label="Next page"
+        aria-previous-label="Previous page"
+        aria-page-label="Page"
+        aria-current-label="Current page"
+        class="full-height-flex full-height-container"
+        @page-change="onPageChange"
+        @sort="onSort">
+        <b-table-column v-slot="props" label="Title" :sortable="!!onSort" field="title">{{ props.row.title }} <PartialStatusIcon :item="props.row"></PartialStatusIcon></b-table-column>
+        <b-table-column v-slot="props" label="Key"  :sortable="!!onSort" field="key">{{ props.row.key }}</b-table-column>
+        <b-table-column v-slot="props" label="Last Updated" field="updatedAt" :sortable="!!onSort">
+            <div v-if="props.row.updatedAt" class="is-size-7"><Updated :model="props.row"></Updated></div>
+        </b-table-column>
+        <b-table-column v-slot="props">
+            <slot name="actions" :row="props.row"></slot>
+        </b-table-column>
+    </b-table>
+</template>
+
+<script>
+import Updated from "./Updated.vue";
+import PartialStatusIcon from "./PartialStatusIcon.vue";
+
+export default {
+    name: "PartialTable",
+    components: {PartialStatusIcon, Updated},
+    props: {
+        detailed: Boolean,
+        sortField: String,
+        sortOrder: String,
+        onSort: { type: Function, default: () => {} },
+        paginatedItems: { type: Object, default: null },
+        onPageChange: Function,
+    },
+    data() {
+        return {
+        }
+    },
+    watch: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    ::v-deep .table-wrapper.has-sticky-header {
+        flex: 1 1 auto;
+    }
+</style>

package/src/components/ResourceList.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="full-height full-height-container pad">
+        <div class="top-bar">
+            <h1 v-if="!inTrash" class="title">{{ displayName }}</h1>
+            <b-button v-if="inTrash" tag="router-link" :to="'/' + routePrefix + '/'" outlined rounded icon-left="arrow-left">All {{ displayName }}</b-button>
+            <h1 v-if="inTrash" class="title">
+                Deleted {{ displayName }}
+            </h1>
+            <div class="is-flex-grow-1">
+            </div>
+            <b-input v-model.lazy="searchQuery" rounded :placeholder="'Search ' + displayName" icon="search" icon-pack="fas" class="mr-3"></b-input>
+            <b-button v-if="!inTrash" tag="router-link" :to="'/' + routePrefix + '/create'" type="is-success" icon-left="pencil-alt" class="mr-3">Create
+                {{ singularDisplayName }}</b-button>
+            <b-button v-if="!inTrash" tag="router-link" :to="'/' + routePrefix + '/trash'" type="is-danger" outlined icon-left="trash">Deleted
+                {{ displayName }}</b-button>
+        </div>
+
+        <div class="full-height full-height-container box">
+            <component :is="tableComponent" :paginated-items="paginatedItems" :on-page-change="page => paginatedItems.currentPage = page" :detailed="!searchQuery" :on-sort="onSort">
+                <template #actions="slotProps">
+                    <div class="buttons" style="min-width: 18rem">
+                        <component :is="actionsComponent" :item="slotProps.row" @update="updateItem"></component>
+                        <b-button rounded icon-left="pencil-alt" tag="router-link" :to="'/' + routePrefix + '/' + slotProps.row.id" size="is-small">Edit</b-button>
+                        <b-button
+                            v-if="inTrash" rounded outlined icon-left="recycle"
+                            size="is-small" @click="restoreItem(slotProps.row.id)">Restore
+                        </b-button>
+                        <b-button
+                            v-if="inTrash" rounded type="is-danger" outlined icon-left="trash"
+                            size="is-small" @click="forceDeleteItem(slotProps.row.id)">Delete Forever
+                        </b-button>
+                        <b-button
+                            v-if="!inTrash" rounded icon-left="trash"
+                            size="is-small" @click="deleteItem(slotProps.row.id)">Delete</b-button>
+                    </div>
+                </template>
+            </component>
+        </div>
+    </div>
+</template>
+
+<script>
+import ContentEditor from "./content/ContentEditor.vue";
+import {debounce} from "lodash";
+
+export default {
+    name: "ResourceList",
+    components: {ContentEditor},
+    props: {
+        routePrefix: String,
+        displayName: String,
+        singularDisplayName: String,
+        inTrash: {
+            type: Boolean,
+            default: false
+        },
+        defaultSortField: String,
+        defaultSortOrder: String,
+        tableComponent: Object,
+        actionsComponent: Object,
+        resourceApi: Object
+    },
+    data() {
+        return {
+            searchQuery: '',
+            sortField: this.defaultSortField,
+            sortOrder: this.defaultSortOrder,
+            paginatedItems: {items: [], totalItems: 0, itemsPerPage: 0, loading: false, currentPage: 1},
+        }
+    },
+    watch: {
+        'resourceApi': 'fetchData',
+        'inTrash': 'fetchData',
+        'sortField': 'fetchData',
+        'sortOrder': 'fetchData',
+        'searchQuery': 'debouncedFetchData',
+        'paginatedItems.currentPage': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        debouncedFetchData: debounce(async function() {
+            await this.fetchData()
+        }, 1000),
+        async fetchData() {
+            if(this.paginatedItems.loading) {
+                return;
+            }
+            this.paginatedItems.loading = true;
+            this.paginatedItems.items = [];
+
+            let data = await this.resourceApi.list({
+                q: this.searchQuery,
+                inTrash: this.inTrash,
+                page: this.paginatedItems.currentPage,
+                sortField: this.sortField,
+                sortOrder: this.sortOrder
+            });
+
+            this.paginatedItems.items = data.items;
+            this.paginatedItems.loading = false;
+            this.paginatedItems.itemsPerPage = data.itemsPerPage;
+            this.paginatedItems.totalItems = data.totalItems;
+        },
+        // updates a single item
+        updateItem(item) {
+            this.paginatedItems.items = this.paginatedItems.items.map(i => { return i.id === item.id ? item : i; });
+        },
+        onSort(field, order) {
+            this.sortField = field;
+            this.sortOrder = order;
+        },
+        async restoreItem(id) {
+            await this.resourceApi.restoreAndNotify(id);
+            await this.fetchData();
+        },
+        async forceDeleteItem(id) {
+            await this.resourceApi.confirmForceDelete(id);
+            await this.fetchData();
+        },
+        async deleteItem(id) {
+            await this.resourceApi.deleteAndNotify(id);
+            await this.fetchData();
+        },
+    }
+}
+</script>
+
+<style scoped>
+@import "./util.css";
+</style>

package/src/components/UserManagement.vue

@@ -100,7 +100,7 @@ export default {
         EditButtonOnRowHover, GroupsChooser, GenericEditableField, UserJoined, GroupsList},
     data() {
         return {
-            usersApi: new UsersApi(this.$buefy),
+            usersApi: new UsersApi(),
             selectedUser: null,
             searchQuery: null,
             isCreateUserModalActive: false,
@@ -116,7 +116,7 @@ export default {
     methods: {
         async fetchData() {
             this.paginatedItems.loading = true;
-            let data = await this.usersApi.list(false, this.paginatedItems.currentPage, this.searchQuery);
+            let data = await this.usersApi.list({ inTrash: false, page: this.paginatedItems.currentPage, q: this.searchQuery });
 
             this.paginatedItems.items = data.items;
             this.paginatedItems.totalItems = data.totalItems;

package/src/components/UserProfileForm.vue

@@ -144,7 +144,7 @@ export default {
             isChangePasswordModalActive: false,
             isUserPreferencesModalActive: false,
             authApi: new AuthApi(this.$buefy),
-            usersApi: new UsersApi(this.$buefy)
+            usersApi: new UsersApi()
         }
     },
     methods: {

package/src/components/UserProfilePage.vue

@@ -45,7 +45,7 @@ export default {
         return {
             model: null,
             loading: true,
-            usersApi: new UsersApi(this.$buefy)
+            usersApi: new UsersApi()
         }
     },
     computed: {

package/src/components/content/CommandsList.vue

@@ -0,0 +1,108 @@
+<template>
+    <b-dropdown ref="dropdown" v-model="selectedIndex" :inline="true" :scrollable="true" class="items" :style="{ top: (top + 30) + 'px', left: (left + 4) + 'px', display: !visible ? 'none !important' : 'inherit' }" @change="index => selectItem(items[index])">
+        <b-dropdown-item
+            v-for="(item, index) in items"
+            :key="index"
+            :value="index"
+            @click="selectItem(item)"
+        >
+            <b-icon :icon="item.icon"></b-icon>
+            {{ item.title }}
+        </b-dropdown-item>
+<!--        </b-dropdown-item>-->
+        <b-dropdown-item v-if="items.length === 0">
+            No result
+        </b-dropdown-item>
+    </b-dropdown>
+</template>
+
+<script>
+export default {
+    props: {
+        items: {
+            type: Array,
+            required: true,
+        },
+        command: {
+            type: Function,
+            required: true,
+        },
+        top: {
+            type: Number,
+            required: true
+        },
+        left: {
+            type: Number,
+            required: true
+        },
+        visible: {
+            type: Boolean,
+            required: true
+        }
+    },
+
+    data() {
+        return {
+            selectedIndex: 0,
+        }
+    },
+
+    watch: {
+        items() {
+            this.selectedIndex = 0
+        },
+    },
+
+    methods: {
+        onKeyDown({ event }) {
+            if (event.key === 'ArrowUp') {
+                this.upHandler()
+                return true
+            }
+
+            if (event.key === 'ArrowDown') {
+                this.downHandler()
+                return true
+            }
+
+            if (event.key === 'Enter') {
+                this.enterHandler()
+                return true
+            }
+
+            return false
+        },
+        upHandler() {
+            this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length;
+            let el = this.$refs.dropdown.$children[this.selectedIndex].$el;
+            el.scrollIntoView({
+                block: 'nearest'
+            });
+        },
+        downHandler() {
+            this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+            let el = this.$refs.dropdown.$children[this.selectedIndex].$el;
+            el.scrollIntoView({
+                block: 'nearest'
+            });
+        },
+        enterHandler() {
+            const item = this.items[this.selectedIndex];
+            this.selectItem(item)
+        },
+        selectItem(item) {
+            if (item) {
+                this.command(item)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.items {
+    left: 10;
+    position: absolute;
+    z-index: 9999;
+}
+</style>