@oxygen-cms/ui 1.6.5 → 1.7.0

package/package.json

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

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/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/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/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/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'
-                }
-            }
-        }
-    ]);
-}