@oxygen-cms/ui 1.6.1 → 1.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "1.6.1",
+  "version": "1.6.4",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {

package/src/EventsApi.js

@@ -13,4 +13,9 @@ export default class EventsApi extends CrudApi {
         return 'upcoming-events';
     }
 
+    async listTrybookingSessions() {
+        return this.request('get')
+            .fetch(this.constructor.getResourceRoot() + '/trybooking-sessions');
+    }
+
 }

package/src/Internationalize.js

@@ -28,4 +28,16 @@ export default class Internationalize {
         }
         return format.format(datetime);
     }
+
+    static formatDateTimeRange(from, to) {
+        let format = new Intl.DateTimeFormat(this.locale , {
+            hour: 'numeric', minute: 'numeric'
+        });
+
+        if(from.getDate() === to.getDate() && from.getMonth() === to.getMonth() && from.getYear() === to.getYear()) {
+            return this.formatDate(from) + " " + format.format(from) + " - " + format.format(to);
+        } else {
+            return this.formatDate(from) + " " + format.format(from) + " - " + this.formatDate(to) + format.format(to);
+        }
+    }
 }

package/src/components/App.vue

@@ -1,22 +1,23 @@
 <template>
     <div style="height: 100%;">
-<!--        <transition name="slide-left" mode="out-in">-->
             <router-view @logout="signOut">
                 <template #main-navigation>
-                    <slot name="app-navigation"></slot>
+                    <MainMenu :items="mainMenuItems" />
                 </template>
             </router-view>
-<!--        </transition>-->
     </div>
 </template>
 
 <script>
     import AuthApi from "../AuthApi";
+    import MainMenu from "./MainMenu.vue";
     export default {
         name: "App",
+        components: {MainMenu},
         props: {
             appTitle: { type: String, required: true },
             defaultRouteTitle: { type: String, required: true },
+            mainMenuItems: { type: Object, required: true },
             impersonating: {
                 type: Boolean,
                 default: false

package/src/components/AuthenticationLog.vue

@@ -84,7 +84,7 @@
 <script>
 import {FetchBuilder} from "../api";
 import Internationalize from "../Internationalize";
-import UAParser from 'ua-parser-js';
+import { UAParser } from 'ua-parser-js';
 import AuthApi from "../AuthApi";
 import {getApiRoot} from "../CrudApi";
 

package/src/components/CodeEditor.vue

@@ -32,11 +32,44 @@
 <script>
 
 import AceEditor from 'vue2-ace-editor';
-import 'brace/ext/language_tools'; //language extension prerequsite...
+// language extension pre-requisite...
+import 'brace/ext/language_tools';
 import 'brace/mode/html';
 import 'brace/mode/twig';
+import 'brace/snippets/html';
+import 'brace/snippets/twig';
 import 'brace/theme/tomorrow_night_eighties';
 import 'brace/theme/tomorrow_night';
+import 'brace/theme/ambiance';
+import 'brace/theme/chaos';
+import 'brace/theme/clouds_midnight';
+import 'brace/theme/cobalt';
+import 'brace/theme/idle_fingers';
+import 'brace/theme/merbivore';
+import 'brace/theme/merbivore_soft';
+import 'brace/theme/mono_industrial';
+import 'brace/theme/monokai';
+import 'brace/theme/pastel_on_dark';
+import 'brace/theme/solarized_dark';
+import 'brace/theme/terminal';
+import 'brace/theme/tomorrow_night';
+import 'brace/theme/tomorrow_night_blue';
+import 'brace/theme/tomorrow_night_bright';
+import 'brace/theme/tomorrow_night_eighties';
+import 'brace/theme/twilight';
+import 'brace/theme/vibrant_ink';
+import 'brace/theme/chrome';
+import 'brace/theme/clouds';
+import 'brace/theme/crimson_editor';
+import 'brace/theme/dawn';
+import 'brace/theme/dreamweaver';
+import 'brace/theme/eclipse';
+import 'brace/theme/github';
+import 'brace/theme/kr_theme';
+import 'brace/theme/solarized_light';
+import 'brace/theme/textmate';
+import 'brace/theme/tomorrow';
+import 'brace/theme/xcode';
 
 export default {
     name: "CodeEditor",

package/src/components/LegacyPage.vue

@@ -134,7 +134,7 @@ export default {
             }
         },
         vuePathToURL(path) {
-            return getApiHost() + this.legacyPrefix + path;
+            return getApiHost() + this.legacyPrefix.replace(/^\//, '') + path;
         },
         // We detect when the iframe url changes, and update our window accordingly...
         onNavigated(newURL) {

package/src/components/preferences/Preferences.vue

@@ -4,7 +4,7 @@
             <b-tab-item v-if="slotProps.canAccessPrefs(['appearance.themes', 'appearance.pages', 'appearance.events'].concat(getExtraPrefsPermissions('appearance')))" label="Website Theme">
                 <PreferencesThemeChooser @theme-changed="onThemeChanged" />
                 <PreferencesPageTemplates :current-theme="currentTheme" />
-                <PreferencesEventTemplates :current-theme="currentTheme" />
+
                 <PreferencesSiteAppearance :current-theme="currentTheme" />
                 <component :is="pref.component" v-for="pref in getExtraPrefs('appearance')" :key="pref.key" :current-theme="currentTheme" />
             </b-tab-item>

package/src/components/preferences/PreferencesList.vue

@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style scoped>
-
+    @import '../util.css';
 </style>

package/src/components/preferences/PreferencesThemeChooser.vue

@@ -4,6 +4,7 @@
         <PreferencesField data-key="appearance.themes::theme" label="">
             <template #default="slotProps">
                 <b-table
+                    v-if="Object.values(slotProps.options).length > 0"
                     :data="Object.values(slotProps.options)"
                     :striped="false">
                     <b-table-column v-slot="props" label="Key">
@@ -26,6 +27,7 @@
                         <b-button v-else type="is-success" disabled>Theme is already active</b-button>
                     </b-table-column>
                 </b-table>
+                <p v-else class="has-text-centered"><em>No themes loaded.</em></p>
             </template>
         </PreferencesField>
     </ShowIfPermitted>

package/src/icons.js

@@ -74,7 +74,7 @@ import {
     faFolderOpen,
     faImages,
     faMinusCircle,
-    faCalendarPlus, faPaperPlane
+    faCalendarPlus, faPaperPlane, faHandshakeSlash, faHandshake
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -87,5 +87,5 @@ export const addIconsToLibrary = () => {
         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);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash);
 };

package/src/main.js

@@ -12,7 +12,7 @@ import { AuthRoutes, makeAuthenticatedRoute } from "./routes";
 import createStore from "./store/index";
 import { checkAuthenticated } from "./AuthApi";
 import Error404 from "./components/Error404.vue";
-import MainMenu from "./components/MainMenu.vue";
+import Preferences from "./components/preferences/Preferences.vue";
 
 /**
  * Creates the Vue.js Oxygen application, allowing for a few points of customization (i.e.: adding modules)
@@ -28,8 +28,11 @@ export default class OxygenUI {
         this.authenticatedRoutes = []
         this.unauthenticatedRoutes = []
         this.mainMenuItems = {}
-        this.rootComponents = { App, MainMenu }
         this.beforeMountHooks = []
+        this.extraPrefs = {
+            'appearance': [],
+            'external': []
+        }
     }
 
     addAuthenticatedRoutes(routes) {
@@ -82,6 +85,15 @@ export default class OxygenUI {
 
         const store = createStore(this.Vue);
 
+        this.authenticatedRoutes.push({
+            path: '/preferences',
+            component: Preferences,
+            props: {
+                extraPrefs: this.extraPrefs
+            },
+            meta: { title: 'System Preferences' }
+        });
+
         const routes = AuthRoutes
             .concat([
                 makeAuthenticatedRoute(this.authenticatedRoutes)
@@ -110,11 +122,13 @@ export default class OxygenUI {
 
         this.app = new this.Vue({
             router: router,
-            data: {
-                existingAppTitle: document.title,
-                mainMenuItems: this.mainMenuItems
-            },
-            components: this.rootComponents,
+            render: (h) => h(App, {
+                props: {
+                    appTitle: document.title,
+                    defaultRouteTitle: 'Administration Panel',
+                    mainMenuItems: this.mainMenuItems
+                }
+            }),
             store
         });
 

package/src/modules/Events.js

@@ -0,0 +1,35 @@
+import LegacyPage from "../components/LegacyPage.vue";
+import { WEB_CONTENT } from "../main.js";
+import PreferencesEventTemplates from "../components/preferences/PreferencesEventTemplates.vue";
+
+export default function(ui) {
+    ui.addMainMenuGroup(WEB_CONTENT, {
+        name: 'Events',
+        icon: 'calendar-alt',
+        listAction: '/upcoming-events',
+        listPermission: 'upcomingEvents.getList',
+        addIcon: 'calendar-plus',
+        addPermission: 'upcomingEvents.postCreate',
+        addAction: '/upcoming-events/create',
+        items: {
+        }
+    });
+    ui.extraPrefs['appearance'].push({
+        key: 'appearance.events',
+        component: PreferencesEventTemplates
+    });
+    ui.addAuthenticatedRoutes([
+        {
+            // will match everything, try to render a legacy Oxygen page...
+            path: 'upcoming-events/:subpath*',
+            component: LegacyPage,
+            props: (route) => {
+                return {
+                    fullPath: route.fullPath,
+                    legacyPrefix: '/oxygen/view',
+                    adminPrefix: '/oxygen'
+                }
+            }
+        }
+    ]);
+}

package/src/modules/{LegacyPages.js → PagesPartials.js}

@@ -24,21 +24,10 @@ export default function(ui) {
         items: {
         }
     });
-    ui.addMainMenuGroup(WEB_CONTENT, {
-        name: 'Events',
-        icon: 'calendar-alt',
-        listAction: '/upcoming-events',
-        listPermission: 'upcomingEvents.getList',
-        addIcon: 'calendar-plus',
-        addPermission: 'upcomingEvents.postCreate',
-        addAction: '/upcoming-events/create',
-        items: {
-        }
-    });
     ui.addAuthenticatedRoutes([
         {
             // will match everything, try to render a legacy Oxygen page...
-            path: '(pages|partials|upcoming-events)/:subpath*',
+            path: '(pages|partials)/:subpath*',
             component: LegacyPage,
             props: (route) => {
                 return {