@oxygen-cms/ui 1.6.4 → 1.7.0

package/.idea/workspace.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ComposerSettings">
+    <execution />
+  </component>
+  <component name="ProjectId" id="27rS1jBVazc5EdthHlwaXfJm1hC" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "last_opened_file_path": "/home/chris/code/oxygen/Components/ui"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="4ad0dcde-54f6-459b-8ef0-38a17e946358" name="Changes" comment="" />
+      <created>1650076498224</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1650076498224</updated>
+    </task>
+    <servers />
+  </component>
+</project>

package/package.json

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

package/src/AuthApi.js

@@ -2,6 +2,13 @@ import {getApiRoot} from "./CrudApi";
 import {FetchBuilder, initCsrfCookie} from "./api";
 import UserPermissions from "./UserPermissions";
 
+export const LOGIN_AGAIN_NOTIFICATION = {
+    message: 'You need to login again.',
+    type: 'is-warning',
+    duration: 5000,
+    queue: false
+};
+
 export default class AuthApi {
 
     constructor($buefy) {

package/src/Internationalize.js

@@ -12,6 +12,10 @@ export default class Internationalize {
         return format.format(date);
     }
 
+    static formatDateExtended(date) {
+        return new Date(date).toDateString();
+    }
+
     static formatLastUpdated(updatedAt) {
         let d = new Date(updatedAt);
         return d.toDateString() + ' ' + d.toLocaleTimeString();

package/src/UsersApi.js

@@ -23,6 +23,11 @@ export default class UsersApi extends CrudApi {
             .fetch(getApiRoot() + 'users/' + id + '/fullName');
     }
 
+    async getBasic(id) {
+        return this.request('get')
+            .fetch(this.constructor.getResourceRoot() + '/' + id + '/basic');
+    }
+
     async impersonate(id) {
         return await this.request('post')
             .fetch(getApiRoot() + 'users/' + id + '/impersonate');

package/src/api.js

@@ -1,4 +1,5 @@
 import {getApiRoot} from "./CrudApi";
+import {LOGIN_AGAIN_NOTIFICATION} from "./AuthApi";
 
 export const getApiHost = () => {
     if (parseInt(window.location.port) >= 3000) {
@@ -28,6 +29,7 @@ export const initCsrfCookie = async () => {
 }
 
 export class FetchBuilder {
+
     constructor($buefy, method) {
         this.$buefy = $buefy;
         this.method = method;
@@ -120,7 +122,7 @@ export class FetchBuilder {
             return data;
         }
 
-        handleAPIError(data, this.$buefy, FetchBuilder.router, response);
+        await handleAPIError(data, this.$buefy, FetchBuilder.router, FetchBuilder.store, response);
         let e = new Error('Received an error response from API call');
         e.response = data;
         throw e;
@@ -135,6 +137,10 @@ export class FetchBuilder {
     static setRouter(router) {
         FetchBuilder.router = router;
     }
+
+    static setStore(store) {
+        FetchBuilder.store = store;
+    }
 }
 
 function statusToBueify(status) {
@@ -155,35 +161,29 @@ export function morphToNotification(data) {
     };
 }
 
-const handleAPIError = function(content, $buefy, $router, response) {
-    console.error('API error: ', content);
+const handleAPIError = async (content, $buefy, $router, $store, response) => {
+    console.error('API error: ', content, $router);
     if(response.status === 401 && content.code === 'unauthenticated') {
         // server is telling us to login again
-        initCsrfCookie()
-            .then(() => {
-                $router.push({path: '/auth/login', query: {redirect: $router.currentRoute.fullPath}});
-            });
-        return;
+        await $store.commit('setUser', null);
+        await initCsrfCookie();
+        await $buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
+        await $router.push({path: '/auth/login', query: {redirect: $router.currentRoute.fullPath}});
     } else if(response.status === 403 && content.code === 'two_factor_setup_required') {
-        $router.push({ path: '/auth/2fa-setup' });
-        return;
+        await $router.push({ path: '/auth/2fa-setup' });
     } else if(response.status === 403 && content.code === 'email_unverified') {
-        $router.push({ path: '/auth/needs-verified-email', query: {redirect: $router.currentRoute.fullPath } });
-        return;
+        await $router.push({ path: '/auth/needs-verified-email', query: {redirect: $router.currentRoute.fullPath } });
     } else if(response.status === 404) {
-        $router.push({ name: 'error404' });
+        await $router.push({ name: 'error404' });
     } else if(response.status === 429) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message: 'Too many requests within a short timeframe. Please wait.',
             type: 'is-warning',
             duration: 10000,
             queue: false
         });
-        return;
-    }
-
-    // handle generic validation errors
-    if(typeof content.errors === 'object') {
+    } else if(typeof content.errors === 'object') {
+        // handle generic validation errors
         for(const [, errors ] of Object.entries(content.errors)) {
             for(let error of errors) {
                 $buefy.notification.open({
@@ -194,13 +194,10 @@ const handleAPIError = function(content, $buefy, $router, response) {
                 });
             }
         }
-        return;
-    }
-
-    if(content.content && content.status) {
-        $buefy.notification.open(morphToNotification(content));
+    } else if(content.content && content.status) {
+        await $buefy.notification.open(morphToNotification(content));
     } else if(content.exception) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message:
                 'PHP Exception of type <pre class="no-pre">' + content.exception +
                 '</pre> with message <pre class="no-pre">' + content.message +
@@ -211,7 +208,7 @@ const handleAPIError = function(content, $buefy, $router, response) {
             type: 'is-danger'
         });
     } else if(response.status === 500) {
-        $buefy.notification.open({
+        await $buefy.notification.open({
             message:'Whoops, looks like something went wrong.',
             type: 'is-danger',
             animation: 'fade',
@@ -225,3 +222,4 @@ export function getXsrfToken() {
 }
 
 FetchBuilder.router = null;
+FetchBuilder.store = null;

package/src/components/CodeEditor.vue

@@ -35,8 +35,10 @@ import AceEditor from 'vue2-ace-editor';
 // language extension pre-requisite...
 import 'brace/ext/language_tools';
 import 'brace/mode/html';
+import 'brace/mode/json';
 import 'brace/mode/twig';
 import 'brace/snippets/html';
+import 'brace/snippets/json';
 import 'brace/snippets/twig';
 import 'brace/theme/tomorrow_night_eighties';
 import 'brace/theme/tomorrow_night';

package/src/components/Created.vue

@@ -0,0 +1,25 @@
+<template>
+    <span>
+        {{ Internationalize.formatLastUpdated(model.createdAt) }}<span v-if="model.createdBy">, by <router-link :to="'/users/' + model.createdBy.id">{{ model.createdBy.fullName }}</router-link></span>
+    </span>
+</template>
+
+<script>
+import Internationalize from "../Internationalize";
+
+export default {
+    name: "Created",
+    props: {
+        model: { type: Object, required: true }
+    },
+    data() {
+        return {
+            Internationalize
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/LegacyPage.vue

@@ -11,8 +11,9 @@
 <script>
 import MediaInsertModal from "./media/MediaInsertModal.vue";
 
-import {getApiHost, morphToNotification} from "../api";
+import {getApiHost, initCsrfCookie, morphToNotification} from "../api";
 import MediaApi from "../MediaApi";
+import {LOGIN_AGAIN_NOTIFICATION} from "../AuthApi";
 
 // from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
 
@@ -20,15 +21,6 @@ const iframeURLChange = (iframe, callback, legacyPage) => {
     var unloadHandler = function() {
         console.log('[LegacyPage] Starting load');
         legacyPage.loadingPath = 'unknown';
-        // Timeout needed because the URL changes immediately after
-        // the `unload` event is dispatched.
-        // TODO: this is rather brittle because I believe it relies upon timing
-        // setTimeout(function() {
-        //     console.log(iframe.contentWindow);
-        //     if(iframe.contentWindow) {
-        //         callback(iframe.contentWindow.location.href);
-        //     }
-        // }, 0);
     };
 
     function attachUnload() {
@@ -90,7 +82,7 @@ export default {
         iframe.addEventListener('load', this.onLoaded.bind(this));
         if(iframe.contentDocument.readyState === "complete") {
             console.warn('[LegacyPage] mounted: page was already loaded - perhaps this page was cached?');
-            this.onLoaded();
+            await this.onLoaded();
         }
     },
     unmounted() {
@@ -126,7 +118,8 @@ export default {
             let urlObj = new URL(url);
             let urlString = urlObj.toString();
             if(urlObj.pathname.startsWith(this.legacyPrefix)) {
-                return { loadInside: 'iframe', location: this.adminPrefix + urlString.split(this.legacyPrefix)[1] };
+                let loc = urlString.split(this.legacyPrefix)[1];
+                return { loadInside: 'iframe', location: this.adminPrefix + loc, locationWithoutPrefix: loc };
             } else if(urlObj.pathname.startsWith(this.adminPrefix)) {
                 return { loadInside: 'vue', location: urlString.split(this.adminPrefix)[1] };
             } else {
@@ -155,7 +148,7 @@ export default {
         popState() {
             this.$router.back();
         },
-        onLoaded() {
+        async onLoaded() {
             let path = this.$refs.iframe.contentWindow.location.href;
             if(path === 'about:blank') { return; }
             console.log('[LegacyPage] Loaded', path);
@@ -166,12 +159,26 @@ export default {
                 if(loadInside === 'iframe') {
                     window.history.pushState({}, "", location);
                 } else if(loadInside === 'vue') {
-                    this.$router.push(location);
+                    if(location.startsWith('/auth/login?location=')) {
+                        // If the legacy page is redirecting us to login,
+                        // then that must be because our auth expired/failed.
+                        // So we explicitly log ourselves out, and redirect to the login page.
+                        let redirectTo = this.fullURLToVuePath(this.currentPath);
+                        if(redirectTo.loadInside !== 'iframe') { throw new Error("this.currentPath was not inside iframe"); }
+                        console.log("Requested redirect to /auth/login . Clearing user state first", redirectTo);
+                        this.$store.commit('setUser', null);
+                        this.$buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
+                        await initCsrfCookie();
+                        location = { name: 'login', query: { redirect: redirectTo.locationWithoutPrefix } };
+                    }
+
+                    await this.$router.push(location);
+                    return;
                 } else {
                     // load outside of iframe
                     window.location = location;
+                    return;
                 }
-
                 this.currentPath = path;
             }
 

package/src/components/Updated.vue

@@ -0,0 +1,25 @@
+<template>
+    <span>
+        {{ Internationalize.formatLastUpdated(model.updatedAt) }}<span v-if="model.updatedBy">, by <router-link :to="'/users/' + model.updatedBy.id">{{ model.updatedBy.fullName }}</router-link></span>
+    </span>
+</template>
+
+<script>
+import Internationalize from "../Internationalize";
+
+export default {
+    name: "Created",
+    props: {
+        model: { type: Object, required: true }
+    },
+    data() {
+        return {
+            Internationalize
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/UserProfileDescription.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="content">
+        <div class="level level-left">
+            <strong class="mr-2">Username:</strong>
+            <span v-if="user">{{ user.username }}
+                <b-tooltip v-if="editable" label="To change username, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
+            </span>
+        </div>
+        <div class="level level-left"><strong class="mr-2">Group: </strong>
+            <transition name="fade" mode="out-in">
+                    <span v-if="user">{{ user.group.name }}
+                        <b-tooltip :label="user.group.description" position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
+                    </span>
+                <b-skeleton v-else width="20%" :animated="true" />
+            </transition>
+        </div>
+        <div class="level level-left"><strong class="mr-2">Joined: </strong>
+            <transition name="fade" mode="out-in">
+                <UserJoined v-if="user" :user="user" />
+                <b-skeleton v-else width="20%" :animated="true" />
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import UserJoined from "./UserJoined.vue";
+
+export default {
+    name: "UserProfileDescription",
+    components: { UserJoined },
+    props: {
+        user: { type: Object, default: null },
+        editable: { type: Boolean, required: true }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/UserProfileForm.vue

@@ -19,28 +19,7 @@
             </div>
         </div>
 
-        <div class="content">
-            <div class="level level-left">
-                <strong class="mr-2">Username:</strong>
-                <span>{{ user.username }}
-                    <b-tooltip label="To change username, please contact your administrator." position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
-                </span>
-            </div>
-            <div class="level level-left"><strong class="mr-2">Group: </strong>
-                <transition name="fade" mode="out-in">
-                        <span v-if="user">{{ user.group.name }}
-                            <b-tooltip :label="user.group.description" position="is-right" multilined><b-icon icon="info-circle"></b-icon></b-tooltip>
-                        </span>
-                    <b-skeleton v-else width="20%" :animated="true" />
-                </transition>
-            </div>
-            <div class="level level-left"><strong class="mr-2">Joined: </strong>
-                <transition name="fade" mode="out-in">
-                    <UserJoined v-if="user" :user="user" />
-                    <b-skeleton v-else width="20%" :animated="true" />
-                </transition>
-            </div>
-        </div>
+        <UserProfileDescription :user="user" :editable="true"></UserProfileDescription>
 
         <b-modal :closable="false" :active.sync="isUserPreferencesModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
             <div class="modal-card">
@@ -136,16 +115,16 @@
 
 <script>
 import {morphToNotification} from "../api";
-import UserJoined from "./UserJoined.vue";
 import ShowIfPermitted from "./preferences/ShowIfPermitted.vue";
 import UserPreferences from "./preferences/UserPreferences.vue";
 import UsersApi from "../UsersApi";
 import AuthApi from "../AuthApi";
 import GenericEditableField from "./GenericEditableField.vue";
+import UserProfileDescription from "./UserProfileDescription.vue";
 
 export default {
     name: "UserProfileForm",
-    components: {GenericEditableField, ShowIfPermitted, UserJoined, UserPreferences },
+    components: {UserProfileDescription, GenericEditableField, ShowIfPermitted, UserPreferences },
     props: {
         user: {
             type: Object,

package/src/components/UserProfilePage.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="full-height-container pad">
+
+        <div class="box middle-of-page">
+
+            <div>
+                <div class="has-background-grey-light huge-icon-container" style="display: inline-block;">
+                    <b-icon icon="user" size="is-large" class="has-text-grey-lighter huge-icon"></b-icon>
+                </div>
+            </div>
+
+            <h2 class="title">
+                <transition name="fade" mode="out-in">
+                    <span v-if="model">{{model.fullName}}</span>
+                    <b-skeleton :active="!model" size="is-medium"></b-skeleton>
+                </transition>
+            </h2>
+            <h3 class="subtitle">
+                <transition name="fade" mode="out-in">
+                <a v-if="model" :href="'mailto:' + model.email">{{ model.email }}</a>
+                <b-skeleton :active="!model"></b-skeleton>
+                </transition>
+            </h3>
+
+            <div v-if="model && model.id == currentUserId">
+                <b-button type="is-primary" tag="router-link" to="/user/profile">Edit Your Profile</b-button>
+            </div>
+
+            <hr>
+
+            <UserProfileDescription :user="model" :editable="false"></UserProfileDescription>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import UsersApi from "../UsersApi";
+import UserProfileDescription from "./UserProfileDescription.vue";
+
+export default {
+    name: "UserProfilePage",
+    components: {UserProfileDescription},
+    data() {
+        return {
+            model: null,
+            loading: true,
+            usersApi: new UsersApi(this.$buefy)
+        }
+    },
+    computed: {
+        currentUserId() {
+            return this.$store.state.user.id;
+        }
+    },
+    created() {
+        this.fetchData();
+    },
+    methods: {
+        async fetchData() {
+            this.model = (await this.usersApi.getBasic(this.$route.params.id)).item;
+            this.loading = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import '~@oxygen-cms/ui/src/components/util.css';
+
+    .middle-of-page {
+        width: 40rem;
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+
+    .huge-icon {
+        width: 10rem;
+        height: 10rem;
+        font-size: 3rem;
+    }
+
+    .huge-icon-container {
+        border-radius: 50%;
+    }
+</style>

package/src/components/auth/Login.vue

@@ -89,9 +89,6 @@ export default {
                 this.submitting = false;
                 this.hasFailedLogin = false;
                 this.$store.commit('setUser', response.user);
-                if(this.$route.query.location) {
-                  window.location = this.$route.query.location;
-                }
                 this.$buefy.notification.open({
                   message: "You're now logged in.",
                   type: 'is-info',

package/src/components/auth/Logout.vue

@@ -22,5 +22,5 @@ export default {
 </script>
 
 <style scoped>
-
+    @import './login.scss';
 </style>

package/src/icons.js

@@ -74,7 +74,7 @@ import {
     faFolderOpen,
     faImages,
     faMinusCircle,
-    faCalendarPlus, faPaperPlane, faHandshakeSlash, faHandshake
+    faCalendarPlus, faPaperPlane, faHandshakeSlash, faHandshake, faExclamation, faMousePointer, faUnlink, faAngry
 } 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, faHandshake, faHandshakeSlash);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash, faExclamation, faMousePointer, faUnlink, faAngry);
 };

package/src/main.js

@@ -133,6 +133,7 @@ export default class OxygenUI {
         });
 
         FetchBuilder.setRouter(router);
+        FetchBuilder.setStore(store);
         UserPermissions.setBuefy(this.app.$buefy);
         UserPreferences.setBuefy(this.app.$buefy)
         return this;

package/src/modules/UserManagement.js

@@ -1,9 +1,16 @@
 import ViewProfile from "../components/ViewProfile.vue";
 import AuthenticationLog from "../components/AuthenticationLog.vue";
 import UserManagement from "../components/UserManagement.vue";
+import UserProfilePage from "../components/UserProfilePage.vue";
 
 export default function(ui) {
     ui.addAuthenticatedRoutes([
+        {
+            path: 'users/:id',
+            name: 'users.viewProfile',
+            component: UserProfilePage,
+            meta: { title: 'User Profile' }
+        },
         {
             path: 'user/profile',
             name: 'auth.viewProfile',

package/src/EventsApi.js

@@ -1,21 +0,0 @@
-import  { CrudApi } from './CrudApi';
-
-export default class EventsApi extends CrudApi {
-
-    static prepareModelForAPI(data) {
-        let m = { ...data  };
-        delete m.id;
-        delete m.bookings;
-        return m;
-    }
-
-    static getResourceName() {
-        return 'upcoming-events';
-    }
-
-    async listTrybookingSessions() {
-        return this.request('get')
-            .fetch(this.constructor.getResourceRoot() + '/trybooking-sessions');
-    }
-
-}

package/src/components/EventsChooser.vue

@@ -1,88 +0,0 @@
-<template>
-    <b-modal :active="active" trap-focus
-             aria-role="dialog"
-             aria-modal
-             @update:active="arg => $emit('update:active', arg)">
-        <div class="modal-card" style="width: auto">
-            <header class="modal-card-head">
-                <p class="modal-card-title">
-                    <slot name="title">Choose an event</slot>
-                </p>
-                <button
-                    type="button"
-                    class="delete"
-                    @click="$emit('update:active', false)"/>
-            </header>
-            <section class="modal-card-body full-height-container">
-                <slot name="explanation"></slot>
-                <b-field>
-                    <b-input v-model="searchQuery"
-                             placeholder="Search..."
-                             type="search" icon="search" rounded>
-                    </b-input>
-                </b-field>
-                <EventsTable :paginated-items="eventsPaginatedItems" :on-page-change="(page) => eventsPaginatedItems.currentPage = page">
-                    <template #actions="slotProps">
-                        <div class="buttons" style="flex-wrap: nowrap;">
-                            <b-button icon-left="calendar-alt" size="is-small" tag="a" :href="'/oxygen/upcoming-events/' + slotProps.row.id + '/edit'" style="margin-left: 0.5rem;" rounded>Go to event</b-button>
-                            <b-button rounded :type="disableEvent(slotProps.row) ? '' : 'is-success'" :disabled="disableEvent(slotProps.row)" @click="$emit('selected', slotProps.row)">Choose</b-button>
-                        </div>
-                    </template>
-                </EventsTable>
-            </section>
-        </div>
-    </b-modal>
-</template>
-
-<script>
-import EventsApi from "../EventsApi";
-import EventsTable from './EventsTable.vue';
-
-export default {
-    name: "EventsChooser",
-    components: { EventsTable },
-    props: {
-        active: Boolean,
-        disableEvent: {
-            type: Function,
-            default: () => { return false; }
-        }
-    },
-    data() {
-        return {
-            eventsPaginatedItems: { items: null, itemsPerPage: null, totalItems: null, loading: false, currentPage: null },
-            eventsApi: new EventsApi(this.$buefy),
-            searchQuery: '',
-            searchDebounce: null
-        }
-    },
-    watch: {
-        'searchQuery': 'debounceFetchData',
-        'eventsPaginatedItems.currentPage': 'fetchData'
-    },
-    async created() {
-        await this.fetchData()
-    },
-    methods: {
-        async fetchData() {
-            this.eventsPaginatedItems.loading = true;
-
-            let data = await this.eventsApi.list(false, this.eventsPaginatedItems.currentPage, this.searchQuery !== '' ? this.searchQuery : null);
-            this.eventsPaginatedItems.items = data.items;
-            this.eventsPaginatedItems.itemsPerPage = data.itemsPerPage;
-            this.eventsPaginatedItems.totalItems = data.totalItems;
-            this.eventsPaginatedItems.loading = false;
-        },
-        debounceFetchData() {
-            clearTimeout(this.searchDebounce)
-            this.searchDebounce = setTimeout(() => {
-                this.fetchData();
-            }, 400);
-        },
-    }
-}
-</script>
-
-<style scoped>
-
-</style>

package/src/components/EventsTable.vue

@@ -1,82 +0,0 @@
-<template>
-    <div>
-        <b-table
-                :data="paginatedItems === null || paginatedItems.items === null ? [] : paginatedItems.items"
-                :checked-rows="checkedRows"
-                :loading="paginatedItems.items === null || paginatedItems.loading"
-                :checkable="checkable"
-                custom-row-key="id"
-                :paginated="paginatedItems.totalItems > paginatedItems.itemsPerPage"
-                backend-pagination
-                :total="paginatedItems.totalItems"
-                :per-page="paginatedItems.itemsPerPage"
-                :current-page="paginatedItems.currentPage"
-                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"
-                @update:checkedRows="$emit('update:checkedRows', $event)"
-                @page-change="onPageChange">
-            <b-table-column v-slot="props" label="Title">
-                {{ props.row.title }}
-            </b-table-column>
-
-            <b-table-column v-slot="props" label="Display on website">
-                <em v-if="!props.row.active">No</em>
-                <span v-else>{{ props.row.startDate ? new Date(props.row.startDate).toDateString() : '?'}} - {{ props.row.endDate ? new Date(props.row.endDate).toDateString() : '?'}}</span>
-            </b-table-column>
-
-            <b-table-column v-slot="props">
-                <slot name="actions" :row="props.row"></slot>
-            </b-table-column>
-
-            <template slot="empty">
-                <section class="section">
-                    <div class="content has-text-grey has-text-centered">
-                        <p>
-                            <slot name="empty">
-                                No events found.
-                            </slot>
-                        </p>
-                    </div>
-                </section>
-            </template>
-        </b-table>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "EventsTable",
-        props: {
-            paginatedItems: {
-                type: Object,
-                required: true
-            },
-            onPageChange: {
-                type: Function,
-                required: true
-            },
-            checkedRows: {
-                type: Array,
-                default: () => { return []; }
-            },
-            checkable: Boolean
-        },
-        data() {
-            return {
-            };
-        },
-    }
-</script>
-
-<style scoped>
-    .b-table {
-        min-height: 10rem;
-    }
-
-    .b-table.is-loading {
-        margin-bottom: 5rem;
-    }
-</style>

package/src/components/dashboard/EventsPanel.vue

@@ -1,20 +0,0 @@
-<template>
-    <article>
-        <p class="title">Events<b-icon icon="calendar-alt" size="is-medium"></b-icon></p>
-        <p class="subtitle">Promotion for upcoming concerts and events</p>
-        <div class="buttons">
-            <b-button tag="router-link" to="/upcoming-events" icon-left="list">Manage Events</b-button>
-            <b-button tag="router-link" to="/upcoming-events/create" icon-left="plus" type="is-success">Create New Event</b-button>
-        </div>
-    </article>
-</template>
-
-<script>
-export default {
-    name: "EventsPanel"
-}
-</script>
-
-<style scoped lang="scss">
-    @import './panel.scss';
-</style>

package/src/modules/Events.js

@@ -1,35 +0,0 @@
-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'
-                }
-            }
-        }
-    ]);
-}