@oxygen-cms/ui 1.7.2 → 1.8.0

package/src/components/media/media.scss

@@ -45,6 +45,7 @@
 }
 
 .media-icon-container {
+  position: relative;
   display: flex;
   align-items: center;
   flex-direction: column;

package/src/components/pages/PageList.vue

@@ -0,0 +1,65 @@
+<template>
+    <PageTable :paginated-items="paginatedItems" :sort-field="sortField" :sort-order="sortOrder" :on-page-change="p => paginatedItems.currentPage = p" :on-sort="onSort">
+        <template #actions="props">
+            <slot name="actions" :row="props.row"></slot>
+        </template>
+    </PageTable>
+</template>
+
+<script>
+import PageTable from "../PageTable.vue";
+import PagesApi from "../../PagesApi.js";
+
+export default {
+    name: "PageList",
+    components: {PageTable},
+    data() {
+        return {
+            searchQuery: '',
+            sortField: this.defaultSortField,
+            sortOrder: this.defaultSortOrder,
+            paginatedItems: {items: [], totalItems: 0, itemsPerPage: 0, loading: false, currentPage: 1},
+            pagesApi: new PagesApi()
+        }
+    },
+    watch: {
+        'paginatedItems.currentPage': 'fetchData',
+        'searchQuery': 'fetchData',
+        'sortField': 'fetchData',
+        'sortOrder': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        onSort(field, order) {
+            this.sortField = field;
+            this.sortOrder = order;
+        },
+        async fetchData() {
+            if(this.paginatedItems.loading) {
+                return;
+            }
+            this.paginatedItems.loading = true;
+            this.paginatedItems.items = [];
+
+            let data = await this.pagesApi.list({
+                q: this.searchQuery,
+                inTrash: false,
+                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;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/users/CreateUserModal.vue

@@ -47,7 +47,7 @@ export default {
             fullName: '',
             group: null,
             submitting: false,
-            usersApi: new UsersApi(this.$buefy)
+            usersApi: new UsersApi()
         }
     },
     methods: {

package/src/components/util.css

@@ -43,5 +43,5 @@
 }
 
 .top-bar .title:not(:first-child) {
-    margin-left: 1rem;
+    margin-left: 0.8rem;
 }

package/src/icons.js

@@ -74,7 +74,35 @@ import {
     faFolderOpen,
     faImages,
     faMinusCircle,
-    faCalendarPlus, faPaperPlane, faHandshakeSlash, faHandshake, faExclamation, faMousePointer, faUnlink, faAngry
+    faCalendarPlus,
+    faPaperPlane,
+    faHandshakeSlash,
+    faHandshake,
+    faExclamation,
+    faMousePointer,
+    faUnlink,
+    faAngry,
+    faGripVertical,
+    faHeading,
+    faQuoteLeft,
+    faListUl,
+    faListOl,
+    faBold,
+    faItalic,
+    faParagraph,
+    faCode,
+    faThLarge,
+    faSave,
+    faSlidersH,
+    faRulerHorizontal,
+    faStrikethrough,
+    faUnderline,
+    faRemoveFormat,
+    faLink,
+    faCog,
+    faArchive,
+    faGlobeAsia,
+    faPenSquare, faKey
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -83,9 +111,9 @@ export const addIconsToLibrary = () => {
         faArrowUp, faAngleRight, faEnvelope, faAngleLeft, faTicketAlt, faUserCog, faTags, faCalendarDay, faTimesCircle,
         faMusic, faPencilAlt, faRedoAlt, faBan, faExternalLinkAlt,
         faSearch, faAngleDown, faUserAlt, faCogs, faPhotoVideo, faPuzzlePiece, faPlus, faUserPlus, faMailBulk, faUsers,
-        faArrowLeft, faRecycle, faList, faStamp, faCalendarAlt, faAddressCard, faFileImport, faFileExport, faDownload,
+        faArrowLeft, faRecycle, faList, faStamp, faCalendarAlt, faAddressCard, faHeading, faQuoteLeft, faListUl, faListOl, faSave, faSlidersH, faCode, faThLarge, faBold, faItalic, faParagraph, faFileImport, faFileExport, faDownload,
         faFileExcel, faFileCsv, faChevronCircleDown, faChevronCircleUp, faTrash,
-        faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faUser, faFolder, faHome, faFilePdf, faSignOutAlt, faTag,
-        faFolderPlus, faTimes, faQuestionCircle, faFileUpload, faLandmark,
-        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash, faExclamation, faMousePointer, faUnlink, faAngry);
+        faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faUser, faFolder, faHome, faFilePdf, faSignOutAlt, faTag, faStrikethrough, faUnderline, faRemoveFormat, faLink,
+        faFolderPlus, faTimes, faQuestionCircle, faFileUpload, faLandmark, faRulerHorizontal, faCog, faArchive, faGlobeAsia, faPenSquare, faKey,
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faGripVertical, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash, faExclamation, faMousePointer, faUnlink, faAngry);
 };

package/src/main.js

@@ -13,6 +13,8 @@ import createStore from "./store/index";
 import { checkAuthenticated } from "./AuthApi";
 import Error404 from "./components/Error404.vue";
 import Preferences from "./components/preferences/Preferences.vue";
+import PortalVue from "portal-vue";
+import {CrudApi} from "./CrudApi.js";
 
 /**
  * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
@@ -82,6 +84,7 @@ export default class OxygenUI {
         this.Vue.use(VHotkey);
         this.Vue.use(AsyncComputed);
         this.Vue.use(Router);
+        this.Vue.use(PortalVue);
 
         const store = createStore(this.Vue);
 
@@ -136,6 +139,7 @@ export default class OxygenUI {
         FetchBuilder.setStore(store);
         UserPermissions.setBuefy(this.app.$buefy);
         UserPreferences.setBuefy(this.app.$buefy)
+        CrudApi.setBuefy(this.app.$buefy);
         return this;
     }
 

package/src/modules/PagesPartials.js

@@ -1,5 +1,13 @@
 import LegacyPage from "../components/LegacyPage.vue";
 import { WEB_CONTENT } from "../main.js";
+import PageEdit from "../components/PageEdit.vue";
+import ResourceList from "../components/ResourceList.vue";
+import PageTable from "../components/PageTable.vue";
+import PagesApi from "../PagesApi.js";
+import PartialsApi from "../PartialsApi.js";
+import PartialTable from "../components/PartialTable.vue";
+import PageActions from "../components/PageActions.vue";
+import PartialActions from "../components/PartialActions.vue";
 
 export default function(ui) {
     ui.addMainMenuGroup(WEB_CONTENT, {
@@ -24,10 +32,24 @@ export default function(ui) {
         items: {
         }
     });
+
+    const partialsProps = { displayName: 'Partials', routePrefix: 'partials', inTrash: false, tableComponent: PartialTable, actionsComponent: PartialActions, singularDisplayName: 'Partial', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PartialsApi() }
+    const pagesProps = { displayName: 'Pages', routePrefix: 'pages', inTrash: false, tableComponent: PageTable, actionsComponent: PageActions, singularDisplayName: 'Page', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PagesApi() }
+
     ui.addAuthenticatedRoutes([
         {
-            // will match everything, try to render a legacy Oxygen page...
-            path: '(pages|partials)/:subpath*',
+            path: '(pages|partials)/create',
+            component: LegacyPage,
+            props: (route) => {
+                return {
+                    fullPath: route.fullPath,
+                    legacyPrefix: '/oxygen/view',
+                    adminPrefix: '/oxygen'
+                }
+            }
+        },
+        {
+            path: '(pages|partials)/:subpath/edit',
             component: LegacyPage,
             props: (route) => {
                 return {
@@ -36,6 +58,56 @@ export default function(ui) {
                     adminPrefix: '/oxygen'
                 }
             }
+        },
+        {
+            path: 'partials/trash',
+            name: 'partials.trash',
+            component: ResourceList,
+            meta: { title: 'Deleted Partials' },
+            props: { ...partialsProps, inTrash: true }
+        },
+        {
+            path: 'partials',
+            name: 'partials.list',
+            component: ResourceList,
+            meta: { title: 'List Partials' },
+            props: { ...partialsProps, inTrash: false }
+        },
+        {
+            path: 'partials/:id',
+            redirect: to => {
+                return { path: 'partials/' + to.params.id + '/edit' }
+            }
+        },
+        {
+            path: 'partials/create',
+            redirect: 'partials/create'
+        },
+        {
+            path: 'pages/trash',
+            name: 'pages.trash',
+            component: ResourceList,
+            meta: { title: 'Deleted Pages' },
+            props: { ...pagesProps, inTrash: true }
+        },
+        {
+            path: 'pages2/:id',
+            name: 'pages.edit',
+            component: PageEdit,
+            meta: { title: 'Edit Page' }
+        },
+        {
+            path: 'pages/:id',
+            redirect: to => {
+                return { path: 'pages/' + to.params.id + '/edit' }
+            }
+        },
+        {
+            path: 'pages',
+            name: 'pages.list',
+            component: ResourceList,
+            meta: { title: 'List Pages' },
+            props: { ...pagesProps, inTrash: false }
         }
     ]);
 }

package/src/styles/pages-table.scss

@@ -0,0 +1,34 @@
+@import "variables";
+
+.row-depth-1 {
+  background-color: $grey-lightest;
+  td {
+    border-bottom-color: $grey-light
+  }
+
+  td:nth-child(2) {
+    padding-left: 1.5rem;
+  }
+}
+
+.row-depth-2 {
+  background-color: $grey-lighter;
+  td {
+    border-bottom-color: $grey-light;
+  }
+
+  td:nth-child(2) {
+    padding-left: 3rem;
+  }
+}
+
+.row-depth-3 {
+  background-color: darken($grey-lighter, 10%);
+  td {
+    border-bottom-color: darken($grey-light, 10%);
+  }
+
+  td:nth-child(2) {
+    padding-left: 4.5rem;
+  }
+}