@oxygen-cms/ui 1.4.0 → 1.5.2

package/src/components/{MediaItem.vue → media/MediaItem.vue}

@@ -5,7 +5,7 @@
         </div>
         <div class="card-content">
             <p class="title is-4 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">{{ item.name }}</p>
-            <p class="subtitle is-6 cursor-pointer has-text-centered" v-if="displayFullPath" @click.exact="select(true)" @click.shift.exact="select(false)">
+            <p v-if="displayFullPath" class="subtitle is-6 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">
                 inside '{{ directoryPath }}'
 <!--                <b-icon icon="file-image" v-if="item.type === TYPE_IMAGE"></b-icon>-->
 <!--                <b-icon icon="file" v-else-if="item.type === TYPE_DOCUMENT"></b-icon>-->
@@ -46,7 +46,7 @@
             </div>
         </b-modal>
 
-        <b-modal :active.sync="isEditModalActive" trap-focus has-modal-card width="80%" v-hotkey="keymap">
+        <b-modal v-hotkey="keymap" :active.sync="isEditModalActive" trap-focus has-modal-card width="80%">
             <div class="modal-card" style="width: auto">
                 <header class="modal-card-head">
                     <p class="modal-card-title">Edit Media Item - {{ name }}</p>
@@ -102,10 +102,16 @@
                         <b-input v-model="description" type="textarea"></b-input>
                     </b-field>
 
-                    <label class="label">Variants</label>
-                    <b-table striped :data="variants">
-                        <b-table-column label="Filename" field="filename" v-slot="props"><a :href="'/content/media/' + props.row.filename">{{ props.row.filename }}</a></b-table-column>
-                        <b-table-column label="Width (px)" field="width" v-slot="props">{{ props.row.width }}</b-table-column>
+                    <label class="label">
+                        Variants
+                        <b-tooltip multilined position="is-right" type="is-dark" label="Each uploaded media item will be automatically converted into different sizes/formats to serve optimized images to users.">
+                            <b-icon size="is-small" icon="question-circle"></b-icon>
+                        </b-tooltip>
+                    </label>
+                    <b-table striped :data="variants" :default-sort="['width']">
+                        <b-table-column v-slot="props" label="Filename" field="filename"><a :href="'/content/media/' + props.row.filename">{{ props.row.filename }}</a></b-table-column>
+                        <b-table-column v-slot="props" label="Width (px)" field="width" sortable>{{ props.row.width ? props.row.width : 'Full size' }}</b-table-column>
+                        <b-table-column v-slot="props" label="Format" field="mime" sortable>{{ props.row.mime }}</b-table-column>
                     </b-table>
 
                     <label class="label">Versions</label>
@@ -115,13 +121,13 @@
                              custom-row-key="id"
                              detailed
                              detail-key="id">
-                        <b-table-column label="Name" field="name" v-slot="props">{{ props.row.name }}</b-table-column>
-                        <b-table-column label="Path" field="fullPath" v-slot="props">{{ props.row.fullPath }}</b-table-column>
-                        <b-table-column label="Last Updated" field="updatedAt" v-slot="props">
+                        <b-table-column v-slot="props" label="Name" field="name">{{ props.row.name }}</b-table-column>
+                        <b-table-column v-slot="props" label="Path" field="fullPath">{{ props.row.fullPath }}</b-table-column>
+                        <b-table-column v-slot="props" label="Last Updated" field="updatedAt">
                             <div class="is-size-7">{{ Internationalize.formatLastUpdated(props.row.updatedAt) }}</div>
                         </b-table-column>
 
-                        <b-table-column label="" v-slot="slotProps">
+                        <b-table-column v-slot="slotProps" label="">
                             <b-button rounded :disabled="slotProps.row.headVersion === null" @click="restoreVersion(slotProps.row.id)">
                                 <span v-if="slotProps.row.headVersion === null">Already current</span>
                                 <span v-else>Restore version</span>
@@ -146,7 +152,7 @@
                 <footer class="modal-card-foot is-flex">
                     <div class="is-flex-grow-1"></div>
                     <b-button @click="isEditModalActive = false">Close</b-button>
-                    <b-button @click="saveEdits" type="is-primary">Save</b-button>
+                    <b-button type="is-primary" @click="saveEdits">Save</b-button>
                 </footer>
             </div>
         </b-modal>
@@ -155,18 +161,18 @@
 
 <script>
 
-import {morphToNotification} from "../api";
-import MediaApi from "../MediaApi";
+import {morphToNotification} from "../../api";
+import MediaApi from "../../MediaApi";
 import MediaChooseDirectory from "./MediaChooseDirectory.vue";
-import Internationalize from "../Internationalize";
-import {getDirectoryFullSlug, getDirectoryPathString} from "../MediaDirectoryApi";
+import Internationalize from "../../Internationalize";
+import {getDirectoryFullSlug, getDirectoryPathString} from "../../MediaDirectoryApi";
 import MediaItemPreview from "./MediaItemPreview.vue";
 
 export default {
-    name: "MediaItem.vue",
+    name: "MediaItem",
     components: {MediaChooseDirectory, MediaItemPreview},
     props: {
-        item: Object,
+        item: { type: Object, required: true },
         displayFullPath: Boolean
     },
     data() {
@@ -193,12 +199,7 @@ export default {
             }
         },
         variants() {
-            return this.item.variants.concat([
-                {
-                    filename: this.item.filename,
-                    width: 'Full size'
-                }
-            ]);
+            return this.item.variants;
         },
         externalLink() {
             return window.location.origin + '/media/' + this.item.fullPath;

package/src/components/{MediaItemPreview.vue → media/MediaItemPreview.vue}

@@ -1,24 +1,24 @@
 <template>
     <div class="media-icon-container">
         <img v-if="item.type === TYPE_IMAGE && !loadingError" :src="'/content/media/' + item.filename" :alt="item.caption ? item.caption : item.name" @error="loadingFailed">
-        <b-tooltip :label="missingMessage" type="is-dark" position="is-bottom" multilined v-else-if="item.type === TYPE_IMAGE">
+        <b-tooltip v-else-if="item.type === TYPE_IMAGE" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
             <b-icon type="is-danger" icon="file-image" size="is-large" class="media-icon"></b-icon>
         </b-tooltip>
         <img v-if="item.type === TYPE_DOCUMENT && !loadingError" :src="'/oxygen/api/media/' + item.id + '/preview'" alt="PDF preview" @error="loadingFailed">
-        <b-tooltip :label="missingMessage" type="is-dark" position="is-bottom" multilined v-else-if="item.type === TYPE_DOCUMENT">
+        <b-tooltip v-else-if="item.type === TYPE_DOCUMENT" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
             <b-icon type="is-danger" icon="file-pdf" size="is-large" class="media-icon"></b-icon>
         </b-tooltip>
-        <b-icon icon="music" size="is-large" class="media-icon" v-else-if="item.type === TYPE_AUDIO"></b-icon>
+        <b-icon v-else-if="item.type === TYPE_AUDIO" icon="music" size="is-large" class="media-icon"></b-icon>
     </div>
 </template>
 
 <script>
-import MediaApi from "../MediaApi";
+import MediaApi from "../../MediaApi";
 
 export default {
     name: "MediaItemPreview",
     props: {
-        item: Object,
+        item: { type: Object, required: true },
         missingMessage: {
             type: String,
             default: 'There was an error trying to load this media item. The file may be corrupt or missing'

package/src/components/{MediaList.vue → media/MediaList.vue}

@@ -2,22 +2,22 @@
 
     <div class="full-height full-height-container media-container">
         <div class="top-bar">
-            <div class="breadcrumb" v-if="!paginatedItems.loading && !inTrash && !searchQuery">
+            <div v-if="!paginatedItems.loading && !inTrash && !searchQuery" class="breadcrumb">
                 <ul>
-                    <li v-for="item in getDirectoryBreadcrumbItems(paginatedItems.currentDirectory)" :class="item.separator ? 'separator' : ''">
+                    <li v-for="item in getDirectoryBreadcrumbItems(paginatedItems.currentDirectory)" :key="JSON.stringify(item)" :class="item.separator ? 'separator' : ''">
                         <b-icon v-if="item.home && paginatedItems.currentDirectory === null" class="subtitle" icon="home"></b-icon>
-                        <b-button v-else-if="item.home" type="is-text" @click="navigateTo({ currentPath: '' })" class="subtitle" icon-left="home"></b-button>
-                        <b-button v-else-if="item.link !== null" type="is-text" @click="navigateTo({ currentPath: item.link })" class="subtitle">{{ item.text }}</b-button>
+                        <b-button v-else-if="item.home" type="is-text" class="subtitle" icon-left="home" @click="navigateTo({ currentPath: '' })"></b-button>
+                        <b-button v-else-if="item.link !== null" type="is-text" class="subtitle" @click="navigateTo({ currentPath: item.link })">{{ item.text }}</b-button>
                         <span v-else class="subtitle is-active">{{ item.text }}</span>
                     </li>
                 </ul>
             </div>
             <div v-else-if="inTrash" class="is-flex">
-                <b-button @click="navigateTo({ currentPath: '' })" outlined rounded icon-left="arrow-left" class="action-bar-pad">All Items</b-button>
+                <b-button outlined rounded icon-left="arrow-left" class="action-bar-pad" @click="navigateTo({ currentPath: '' })">All Items</b-button>
                 <div class="title action-bar-pad">Deleted Photos & Files</div>
             </div>
             <div v-else-if="searchQuery" class="is-flex">
-                <b-button @click="navigateTo({ currentPath: '' })" outlined rounded icon-left="arrow-left" class="action-bar-pad">All Items</b-button>
+                <b-button outlined rounded icon-left="arrow-left" class="action-bar-pad" @click="navigateTo({ currentPath: '' })">All Items</b-button>
                 <div class="title action-bar-pad">Search results for "{{ searchQuery }}"</div>
             </div>
             <ul v-else>
@@ -28,26 +28,26 @@
 
             <b-field class="action-bar-pad">
                 <p class="control">
-                    <b-button disabled v-if="numberOfItemsSelected > 0" type="is-primary">{{ numberOfItemsSelected }} item(s) selected</b-button>
+                    <b-button v-if="numberOfItemsSelected > 0" disabled type="is-primary">{{ numberOfItemsSelected }} item(s) selected</b-button>
                 </p>
                 <p class="control">
-                    <b-button v-if="numberOfItemsSelected > 0" @click="resetSelection" icon-left="times" type="is-primary"></b-button>
+                    <b-button v-if="numberOfItemsSelected > 0" icon-left="times" type="is-primary" @click="resetSelection"></b-button>
                 </p>
             </b-field>
 
-            <b-button v-if="!inTrash && !searchQuery" icon-left="folder-plus" @click="isCreateDirectoryModalActive = true" class="action-bar-pad">New Directory</b-button>
-            <b-button v-if="!inTrash && !searchQuery" icon-left="file-upload" @click="isUploadModalActive = true" type="is-success" class="action-bar-pad">Upload Files</b-button>
-            <b-input rounded placeholder="Search photos and files..." icon="search" icon-pack="fas"
-                     :value="searchQuery" @input="value => navigateTo({searchQuery: value})" class="action-bar-pad" v-if="!inTrash"></b-input>
-            <b-button v-if="!inTrash" icon-left="trash" @click="navigateTo({inTrash: true})" type="is-danger" outlined class="action-bar-pad">Deleted Items</b-button>
+            <b-button v-if="!inTrash && !searchQuery" icon-left="folder-plus" class="action-bar-pad" @click="isCreateDirectoryModalActive = true">New Directory</b-button>
+            <b-button v-if="!inTrash && !searchQuery" icon-left="file-upload" type="is-success" class="action-bar-pad" @click="$router.push({ query: { upload: true }})">Upload Files</b-button>
+            <b-input v-if="!inTrash" rounded placeholder="Search photos and files..." icon="search"
+                     icon-pack="fas" :value="searchQuery" class="action-bar-pad" @input="value => navigateTo({searchQuery: value})"></b-input>
+            <b-button v-if="!inTrash" icon-left="trash" type="is-danger" outlined class="action-bar-pad" @click="navigateTo({inTrash: true})">Deleted Items</b-button>
         </div>
 
 
         <div class="media-items full-height-flex scroll-container">
 
-            <b-loading :is-full-page="false" v-model="paginatedItems.loading" :can-cancel="false"></b-loading>
+            <b-loading v-model="paginatedItems.loading" :is-full-page="false" :can-cancel="false"></b-loading>
 
-            <h2 class="subtitle media-items-empty" v-if="!paginatedItems.loading && paginatedItems.directories.length === 0 && paginatedItems.files.length === 0">
+            <h2 v-if="!paginatedItems.loading && paginatedItems.directories.length === 0 && paginatedItems.files.length === 0" class="subtitle media-items-empty">
                 No items found.
             </h2>
 
@@ -72,10 +72,10 @@
 
         </div>
 
-        <div class="pagination-container" v-if="paginatedItems.totalFiles > paginatedItems.filesPerPage">
+        <div v-if="paginatedItems.totalFiles > paginatedItems.filesPerPage" class="pagination-container">
             <b-pagination
-                :total="paginatedItems.totalFiles"
                 v-model="paginatedItems.currentPage"
+                :total="paginatedItems.totalFiles"
                 :per-page="paginatedItems.filesPerPage"
                 aria-next-label="Next page"
                 aria-previous-label="Previous page"
@@ -91,19 +91,19 @@
                 </header>
                 <section class="modal-card-body">
                     <b-field label-position="inside" label="Name">
-                        <b-input v-model="newDirectoryName"></b-input>
+                        <b-input v-model="newDirectoryName" @keyup.native.enter="doCreateDirectory"></b-input>
                     </b-field>
                 </section>
                 <footer class="modal-card-foot is-flex">
                     <div class="is-flex-grow-1"></div>
                     <b-button @click="isCreateDirectoryModalActive = false">Close</b-button>
-                    <b-button @click="doCreateDirectory" type="is-primary">Create</b-button>
+                    <b-button type="is-primary" @click="doCreateDirectory">Create</b-button>
                 </footer>
             </div>
         </b-modal>
 
         <b-modal :active.sync="isUploadModalActive" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus>
-            <MediaUpload :current-directory="paginatedItems.currentDirectory" @close="isUploadModalActive = false" @uploaded="fetchData"></MediaUpload>
+            <MediaUpload :current-directory="paginatedItems.currentDirectory" @close="$router.push({ query: { }})" @uploaded="fetchData"></MediaUpload>
         </b-modal>
 
     </div>
@@ -111,36 +111,32 @@
 </template>
 
 <script>
-import MediaApi from "../MediaApi";
+import MediaApi from "../../MediaApi";
 import MediaDirectory from "./MediaDirectory.vue";
 import MediaItem from "./MediaItem.vue";
-import MediaDirectoryApi, {getDirectoryBreadcrumbItems, getDirectoryPathString} from "../MediaDirectoryApi";
-import {morphToNotification} from "../api";
+import MediaDirectoryApi, {getDirectoryBreadcrumbItems, getDirectoryPathString} from "../../MediaDirectoryApi";
+import {morphToNotification} from "../../api";
 import MediaUpload from "./MediaUpload.vue";
 
 export default {
     name: "MediaList",
+    components: { MediaDirectory, MediaItem, MediaUpload },
     props: {
         currentPath: {
-            type: String
+            type: String,
+            required: true
         },
         inTrash: {
             type: Boolean
         },
         searchQuery: {
-            type: String
+            type: String,
+            default: null
         }
     },
-    watch: {
-        'searchQuery': 'debounceFetchData',
-        'inTrash': 'fetchData',
-        'paginatedItems.currentPage': 'fetchData',
-        'currentPath': 'fetchData'
-    },
     data() {
         return {
             paginatedItems: {files: [], directories: [], currentDirectory: null, totalFiles: null, filesPerPage: null, loading: false, currentPage: 1},
-            isUploadModalActive: false,
             isCreateDirectoryModalActive: false,
             newDirectoryName: '',
             searchDebounce: null,
@@ -149,11 +145,10 @@ export default {
             getDirectoryBreadcrumbItems: getDirectoryBreadcrumbItems
         }
     },
-    components: { MediaDirectory, MediaItem, MediaUpload },
-    created() {
-        this.fetchData()
-    },
     computed: {
+        isUploadModalActive() {
+            return this.$route.query.upload === 'true';
+        },
         displayPath() {
             return getDirectoryPathString(this.paginatedItems.currentDirectory);
         },
@@ -161,6 +156,15 @@ export default {
             return this.paginatedItems.files.concat(this.paginatedItems.directories).filter(item => item.selected).length;
         }
     },
+    watch: {
+        'searchQuery': 'debounceFetchData',
+        'inTrash': 'fetchData',
+        'paginatedItems.currentPage': 'fetchData',
+        'currentPath': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
     methods: {
         async fetchData() {
             if(this.paginatedItems.loading) {
@@ -226,8 +230,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    @import '../styles/_variables.scss';
-    @import './util.css';
+    @import '../../styles/variables';
+    @import '../util.css';
 
     .box {
         display: flex;

package/src/components/{MediaPage.vue → media/MediaPage.vue}

@@ -1,5 +1,5 @@
 <template>
-    <MediaList @navigate="onNavigate" :current-path="currentPath" :in-trash="inTrash" :search-query="searchQuery" @double-click-action="viewItem" />
+    <MediaList :current-path="currentPath" :in-trash="inTrash" :search-query="searchQuery" @navigate="onNavigate" @double-click-action="viewItem" />
 </template>
 
 <script>

package/src/components/{MediaResponsiveImages.vue → media/MediaResponsiveImages.vue}

@@ -6,20 +6,20 @@
             <div class="content" style="max-width: 80rem;">
             <p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> are images which work well on devices of differing screen sizes, resolutions etc...
                 Depending on the size/pixel density of the users' screen, we serve a different image to them. This optimization helps speed up load times dramatically.</p>
-            <b-button type="is-primary" @click="generate" :disabled="requestInFlight">Generate responsive versions for each image</b-button>
+            <b-button type="is-primary" :disabled="requestInFlight" @click="generate">Generate responsive versions for each image</b-button>
             </div>
             <b-progress v-if="requestInFlight" size="is-medium" show-value>Generating...</b-progress>
             <div v-if="hasServerLog" class="full-height-flex full-height-container" style="min-height: 0;">
                 <h4 class="subtitle">Server output log:</h4>
-                <pre v-html="serverLog" class="scroll-container full-height-flex" style="background-color: #000;"></pre>
+                <pre class="scroll-container full-height-flex" style="background-color: #000;" v-html="serverLog"></pre>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import {API_ROOT} from "../CrudApi";
-import {FetchBuilder, morphToNotification} from "../api";
+import {API_ROOT} from "../../CrudApi";
+import {FetchBuilder, morphToNotification} from "../../api";
 
 export default {
     name: "MediaResponsiveImages",
@@ -47,5 +47,5 @@ export default {
 </script>
 
 <style scoped>
-    @import './util.css';
+    @import '../util.css';
 </style>

package/src/components/{MediaUpload.vue → media/MediaUpload.vue}

@@ -1,10 +1,10 @@
 <template>
     <div class="modal-card">
         <header class="modal-card-head">
-            <p class="modal-card-title" v-if="!isUploading">Upload files to '{{ currentPath }}'</p>
-            <p class="modal-card-title" v-else>Uploading {{ filesToUpload.length }} item(s)</p>
+            <p v-if="!isUploading" class="modal-card-title">Upload files to '{{ currentPath }}'</p>
+            <p v-else class="modal-card-title">Uploading {{ filesToUpload.length }} item(s)</p>
         </header>
-        <section class="modal-card-body" v-if="!isUploading">
+        <section v-if="!isUploading" class="modal-card-body">
             <b-upload v-model="filesToUpload"
                       multiple
                       drag-drop expanded>
@@ -37,20 +37,20 @@
         <footer class="modal-card-foot is-flex">
             <div class="is-flex-grow-1"></div>
             <b-button @click="closeModal">Close</b-button>
-            <b-button @click="doUpload" type="is-primary" :disabled="isUploading">Upload</b-button>
+            <b-button type="is-primary" :disabled="isUploading" @click="doUpload">Upload</b-button>
         </footer>
     </div>
 </template>
 
 <script>
-import {morphToNotification} from "../api";
-import MediaApi from "../MediaApi";
-import {getDirectoryPathString} from "../MediaDirectoryApi";
+import {morphToNotification} from "../../api";
+import MediaApi from "../../MediaApi";
+import {getDirectoryPathString} from "../../MediaDirectoryApi";
 
 export default {
-    name: "MediaUpload.vue",
+    name: "MediaUpload",
     props: {
-        currentDirectory: Object
+        currentDirectory: { type: Object, default: null }
     },
     data() {
         return {
@@ -67,7 +67,7 @@ export default {
     asyncComputed: {
         async imagePreviews() {
             let promises = this.filesToUpload.map(file => {
-                return new Promise((resolve, reject) => {
+                return new Promise((resolve) => {
                     let reader = new FileReader();
                     reader.onload = function (e) {
                         resolve(e.target.result);

package/src/components/{media.scss → media/media.scss}

@@ -1,4 +1,4 @@
-@import '../styles/_variables.scss';
+@import '../../styles/variables';
 
 .card-image {
   min-height: 6rem;

package/src/components/preferences/PreferencesField.vue

@@ -3,14 +3,14 @@
         <div v-if="loaded">
             <slot :value="value" :options="options" :update-value="updateValue">
                 <div class="horizontal-row">
-                    <b-switch :value="value" @input="updateValue($event)" :passive-type="isFallback ? 'is-dark' : ''" v-if="type === 'switch'">{{ label }}</b-switch>
-                    <b-field :label="label" label-position="inside"  v-else-if="type === 'select'"  class="pref-field">
+                    <b-switch v-if="type === 'switch'" :value="value" :passive-type="isFallback ? 'is-dark' : ''" @input="updateValue($event)">{{ label }}</b-switch>
+                    <b-field v-else-if="type === 'select'" :label="label"  label-position="inside"  class="pref-field">
                         <b-select v-if="grouped" :placeholder="selectPlaceholder" :value="value" @input="updateValue($event)">
-                            <optgroup v-for="(suboptions, label) in options" :label="label">
+                            <optgroup v-for="(suboptions, groupLabel) in options" :key="groupLabel" :label="groupLabel">
                                 <option
-                                    v-for="(display, value) in suboptions"
-                                    :value="value"
-                                    :key="value">
+                                    v-for="(display, optionValue) in suboptions"
+                                    :key="optionValue"
+                                    :value="optionValue">
                                     {{ display }}
                                 </option>
                             </optgroup>
@@ -18,8 +18,8 @@
                         <b-select v-else :placeholder="selectPlaceholder" :value="value" @input="updateValue($event)">
                             <option
                                 v-for="(optionDisplay, optionValue) in options"
-                                :value="optionValue"
-                                :key="optionValue">
+                                :key="optionValue"
+                                :value="optionValue">
                                 {{ optionDisplay }}
                             </option>
                         </b-select>
@@ -51,8 +51,8 @@ import {morphToNotification} from "../../api";
 export default {
     name: "PreferencesField",
     props: {
-        dataKey: String,
-        label: String,
+        dataKey: { type: String, required: true },
+        label: { type: String, required: true },
         type: {
             type: String,
             default: null

package/src/components/preferences/PreferencesList.vue

@@ -6,18 +6,13 @@
         </div>
 
         <div class="box full-height-flex scroll-container">
-
-            <transition name="fade">
-                <div v-if="user">
-                    <b-tabs class="block">
-                        <slot :can-access-prefs="canAccessPrefs"></slot>
-                        <!-- If there were no tabs which are accessible, then display this tab as a fallback -->
-                        <b-tab-item v-if="!hasAtLeastOneAccess" label="General">
-                            <em>No preferences found</em>
-                        </b-tab-item>
-                    </b-tabs>
-                </div>
-            </transition>
+            <b-tabs class="block">
+                <slot :can-access-prefs="canAccessPrefs"></slot>
+                <!-- If there were no tabs which are accessible, then display this tab as a fallback -->
+                <b-tab-item v-if="!hasAtLeastOneAccess" label="General">
+                    <em>No preferences found</em>
+                </b-tab-item>
+            </b-tabs>
         </div>
     </div>
 </template>
@@ -25,24 +20,22 @@
 <script>
 
 import {canAccessPrefs} from "../../PreferencesApi";
-import UserPermissions from "../../UserPermissions";
-import AuthApi from "../../AuthApi";
 
 export default {
-    name: "PreferencesView",
+    name: "PreferencesList",
     data() {
         return {
-            user: null,
             hasAtLeastOneAccess: false
         }
     },
-    async mounted() {
-        this.user = (await new AuthApi(this.$buefy).userDetails()).user;
+    computed: {
+        userPermissions() {
+            return this.$store.getters.userPermissions;
+        }
     },
     methods: {
         canAccessPrefs(keys) {
-            let userPermissions = new UserPermissions(this.user.permissions);
-            let result = canAccessPrefs(this.$buefy, userPermissions, keys);
+            let result = canAccessPrefs(this.$buefy, this.userPermissions, keys);
             if(result) {
                 this.hasAtLeastOneAccess = true;
             }

package/src/components/preferences/PreferencesThemeChooser.vue

@@ -2,28 +2,28 @@
     <ShowIfPermitted data-key="appearance.themes">
         <h3 class="subtitle">Website Themes</h3>
         <PreferencesField data-key="appearance.themes::theme" label="">
-            <template v-slot:default="slotProps">
+            <template #default="slotProps">
                 <b-table
                     :data="Object.values(slotProps.options)"
                     :striped="false">
-                    <b-table-column label="Key" v-slot="props">
+                    <b-table-column v-slot="props" label="Key">
                         <img :src="props.row.image" class="theme-logo" />
                     </b-table-column>
 
-                    <b-table-column field="name" label="Name" v-slot="props">
+                    <b-table-column v-slot="props" field="name" label="Name">
                         {{ props.row.name }}
                         <strong v-if="getSelectedOption(slotProps.options, slotProps.value) === props.row">(current theme)</strong>
                     </b-table-column>
 
-                    <b-table-column field="provides" label="Provides preferences" v-slot="props">
-                        <div v-for="(provideGroup, keyGroup) in props.row.provides" class="is-size-7">
-                            <span v-for="(value, key) in provideGroup"><code>{{ keyGroup }}::{{ key}}</code><br></span>
+                    <b-table-column v-slot="props" field="provides" label="Provides preferences">
+                        <div v-for="(provideGroup, keyGroup) in props.row.provides" :key="keyGroup" class="is-size-7">
+                            <span v-for="(value, key) in provideGroup" :key="key"><code>{{ keyGroup }}::{{ key}}</code><br></span>
                         </div>
                     </b-table-column>
 
-                    <b-table-column label="" v-slot="props">
-                        <b-button v-if="getSelectedOption(slotProps.options, slotProps.value) !== props.row" @click="switchToTheme(props.row.key, slotProps.updateValue)" :loading="updating">Switch to this theme</b-button>
-                        <b-button type="is-success" disabled v-else>Theme is already active</b-button>
+                    <b-table-column v-slot="props" label="">
+                        <b-button v-if="getSelectedOption(slotProps.options, slotProps.value) !== props.row" :loading="updating" @click="switchToTheme(props.row.key, slotProps.updateValue)">Switch to this theme</b-button>
+                        <b-button v-else type="is-success" disabled>Theme is already active</b-button>
                     </b-table-column>
                 </b-table>
             </template>

package/src/components/preferences/ShowIfPermitted.vue

@@ -6,8 +6,6 @@
 
 <script>
 import {canAccessPrefs} from "../../PreferencesApi";
-import UserPermissions from "../../UserPermissions";
-import AuthApi from "../../AuthApi";
 
 export default {
     name: "ShowIfPermitted",
@@ -21,18 +19,15 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            permitted: false
-        }
-    },
-    async mounted() {
-        let keys = this.keys;
-        if(keys === null) {
-            keys = [this.dataKey];
-        }
-        let userPermissions = new UserPermissions((await new AuthApi(this.$buefy).userDetails()).user.permissions);
-        this.permitted = await canAccessPrefs(this.$buefy, userPermissions, keys);
+    computed: {
+        keysArray() {
+            if(this.keys === null) {
+                return [this.dataKey];
+            } else {
+                return this.keys;
+            }
+        },
+        permitted() { return canAccessPrefs(this.$buefy, this.$store.getters.userPermissions, this.keysArray); }
     }
 }
 </script>