@oxygen-cms/ui 1.5.0

package/src/components/media/MediaResponsiveImages.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="full-height full-height-container pad">
+        <h1 class="title">Responsive Images Support</h1>
+
+        <div class="box full-height-container full-height-flex" style="min-height: 0">
+            <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" :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 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";
+
+export default {
+    name: "MediaResponsiveImages",
+    data() {
+        return {
+            serverLog: '[no output]',
+            hasServerLog: false,
+            requestInFlight: false,
+        }
+    },
+    methods: {
+        async generate() {
+            this.requestInFlight = true;
+            this.hasServerLog = false;
+            this.serverLog = '[generating...]';
+            let result = await (FetchBuilder.default(this.$buefy, 'post')).fetch(API_ROOT + 'media/make-responsive');
+            this.$buefy.toast.open(morphToNotification(result));
+            this.requestInFlight = false;
+            this.serverLog = result.log;
+            this.hasServerLog = true;
+            console.log(result);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    @import '../util.css';
+</style>

package/src/components/media/MediaUpload.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <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 v-if="!isUploading" class="modal-card-body">
+            <b-upload v-model="filesToUpload"
+                      multiple
+                      drag-drop expanded>
+                <section class="section">
+                    <div class="content has-text-centered">
+                        <p>
+                            <b-icon
+                                icon="upload"
+                                size="is-large">
+                            </b-icon>
+                        </p>
+                        <p>Drop your files here or click to upload</p>
+                    </div>
+                </section>
+            </b-upload>
+
+            <div class="tags mt-4">
+                <span v-for="(file, index) in filesToUpload" :key="index" class="tag is-primary image-preview">
+                    <img :src="imagePreviews[index]" alt="file preview" />
+                    <p class="image-preview-label">
+                        {{ file.name }}
+                        <button class="delete is-small" type="button" @click="deleteFileToUpload(index)"></button>
+                    </p>
+                </span>
+            </div>
+        </section>
+        <section v-else class="modal-card-body">
+            <b-progress size="is-medium" type="is-info"></b-progress>
+        </section>
+        <footer class="modal-card-foot is-flex">
+            <div class="is-flex-grow-1"></div>
+            <b-button @click="closeModal">Close</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";
+
+export default {
+    name: "MediaUpload",
+    props: {
+        currentDirectory: { type: Object, default: null }
+    },
+    data() {
+        return {
+            filesToUpload: [],
+            isUploading: false,
+            mediaApi: new MediaApi(this.$buefy)
+        }
+    },
+    computed: {
+        currentPath() {
+            return getDirectoryPathString(this.currentDirectory);
+        },
+    },
+    asyncComputed: {
+        async imagePreviews() {
+            let promises = this.filesToUpload.map(file => {
+                return new Promise((resolve) => {
+                    let reader = new FileReader();
+                    reader.onload = function (e) {
+                        resolve(e.target.result);
+                    };
+                    reader.readAsDataURL(file);
+                })
+            })
+            return Promise.all(promises);
+        }
+    },
+    methods: {
+        deleteFileToUpload(index) {
+            this.filesToUpload.splice(index, 1);
+        },
+        async doUpload() {
+            if(this.filesToUpload.length === 0) {
+                return this.$buefy.toast.open({
+                    message: 'No files selected for upload',
+                    type: 'is-warning',
+                    queue: false
+                });
+            }
+            this.isUploading = true;
+            try {
+                let data = await this.mediaApi.create({
+                    files: this.filesToUpload,
+                    currentDirectory: this.currentDirectory
+                });
+                this.$buefy.toast.open(morphToNotification(data));
+                this.$emit('uploaded');
+                this.closeModal();
+            } catch(e) {
+                // upload failed
+                console.warn(e);
+                this.closeModal();
+            }
+        },
+        closeModal() {
+            this.isUploading = false;
+            this.filesToUpload = [];
+            this.$emit('close');
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .image-preview {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+    }
+
+    .image-preview img {
+        margin: 0.5rem;
+    }
+
+    .image-preview-label {
+        margin: 0.5rem;
+        display: inline-flex;
+        align-items: center;
+    }
+</style>

package/src/components/media/media.scss

@@ -0,0 +1,51 @@
+@import '../../styles/variables';
+
+.card-image {
+  min-height: 6rem;
+}
+
+.media-icon {
+  font-size: 5rem;
+  width: 5rem;
+  height: 5rem;
+  margin-top: 2rem;
+}
+
+.media-item {
+  width: 20rem;
+  overflow: visible;
+}
+
+.media-item .card-image,
+.media-item .card-content {
+  user-select: none;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.media-item-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.media-item-toolbar > * {
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.media-item.card {
+  margin: 12px 17px;
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+
+.media-item-selected.card {
+  border: 3px solid $blue;
+}
+
+.media-icon-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}

package/src/components/preferences/PreferencesAdminAppearance.vue

@@ -0,0 +1,22 @@
+<template>
+    <ShowIfPermitted data-key="appearance.auth">
+        <h3 class="subtitle">Login</h3>
+        <PreferencesField data-key="appearance.auth::theme" label="Login Theme" type="select" :current-theme="currentTheme"></PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+
+export default {
+    name: "PreferencesAdminAppearance",
+    components: {ShowIfPermitted, PreferencesField },
+    props: {
+        currentTheme: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>

package/src/components/preferences/PreferencesAuthentication.vue

@@ -0,0 +1,27 @@
+<template>
+    <ShowIfPermitted data-key="modules.auth">
+        <h3 class="subtitle">Views</h3>
+        <PreferencesField data-key="modules.auth::dashboard" label="Dashboard View" type="select" :current-theme="currentTheme"></PreferencesField>
+        <PreferencesField data-key="modules.auth::home" label="Home View" type="select" :current-theme="currentTheme"></PreferencesField>
+
+        <h3 class="subtitle">Logging</h3>
+        <PreferencesField data-key="modules.auth::notifyWhenNewDevice" label="Notify user when logging in from a new device" type="switch" :current-theme="currentTheme"></PreferencesField>
+        <PreferencesField data-key="modules.auth::loginLogExpiry" label="Number of days to keep authentication log entries" type="number" :current-theme="currentTheme"></PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+
+export default {
+    name: "PreferencesAuthentication",
+    components: {ShowIfPermitted, PreferencesField },
+    props: {
+        currentTheme: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>

package/src/components/preferences/PreferencesEventTemplates.vue

@@ -0,0 +1,22 @@
+<template>
+    <ShowIfPermitted data-key="appearance.events">
+        <h3 class="subtitle">Events</h3>
+        <PreferencesField data-key="appearance.events::contentView" label="Events Content View" :current-theme="currentTheme"></PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+
+export default {
+    name: "PreferencesEventsTemplates",
+    components: {ShowIfPermitted, PreferencesField },
+    props: {
+        currentTheme: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>

package/src/components/preferences/PreferencesField.vue

@@ -0,0 +1,215 @@
+<template>
+    <div>
+        <div v-if="loaded">
+            <slot :value="value" :options="options" :update-value="updateValue">
+                <div class="horizontal-row">
+                    <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, groupLabel) in options" :key="groupLabel" :label="groupLabel">
+                                <option
+                                    v-for="(display, optionValue) in suboptions"
+                                    :key="optionValue"
+                                    :value="optionValue">
+                                    {{ display }}
+                                </option>
+                            </optgroup>
+                        </b-select>
+                        <b-select v-else :placeholder="selectPlaceholder" :value="value" @input="updateValue($event)">
+                            <option
+                                v-for="(optionDisplay, optionValue) in options"
+                                :key="optionValue"
+                                :value="optionValue">
+                                {{ optionDisplay }}
+                            </option>
+                        </b-select>
+                    </b-field>
+                    <b-field v-else :label="label" :type="fieldType" :message="validationMessage" label-position="inside">
+                        <b-input v-model="value" class="pref-field-input" :type="type" :placeholder="fallbackValue"></b-input>
+                        <p class="control">
+                            <b-button :loading="validating || updating" :type="(value !== serverValue && validationMessage === null && !validating) ? 'is-success' : ''" :disabled="value === serverValue || validationMessage !== null" @click="updateValue()">Update</b-button>
+                        </p>
+                    </b-field>
+                    <b-button v-if="hasFallback" :disabled="!hasFallback || isFallback" type="is-light" size="is-small" :loading="updating" @click="clearValue()">
+                        <span v-if="!isFallback">Use default from {{ defaultText }}</span>
+                        <span v-else>Inherited  from {{ defaultText }}</span>
+                    </b-button>
+                </div>
+            </slot>
+        </div>
+        <div v-else class="pref-field-skeleton">
+            <b-skeleton :animated="true" size="is-large"></b-skeleton>
+        </div>
+    </div>
+</template>
+
+<script>
+import PreferencesApi from "../../PreferencesApi";
+import debounce from 'lodash/debounce';
+import {morphToNotification} from "../../api";
+
+export default {
+    name: "PreferencesField",
+    props: {
+        dataKey: { type: String, required: true },
+        label: { type: String, required: true },
+        type: {
+            type: String,
+            default: null
+        },
+        grouped: {
+            type: Boolean,
+            default: false
+        },
+        currentTheme: {
+            type: String,
+            default: null
+        },
+        defaultText: {
+            type: String,
+            default: 'theme'
+        }
+    },
+    data() {
+        return {
+            preferencesApi: new PreferencesApi(this.$buefy),
+            loaded: false,
+            hidden: false,
+            fallbackValue: null,
+            serverValue: null,
+            value: null,
+            options: [],
+            validating: false,
+            updating: false,
+            validationMessage: null
+        }
+    },
+    computed: {
+        fieldType() {
+            if(this.isFallback) { return 'is-dark'; }
+            else if(this.validationMessage !== null) { return 'is-danger'; }
+            else if(!this.validating && this.value !== this.serverValue) { return 'is-success'; }
+            else { return ''; }
+        },
+        isFallback() {
+            return this.fallbackValue !== null && (this.value === null || this.value === '');
+        },
+        hasFallback() {
+            return this.fallbackValue !== null;
+        },
+        selectPlaceholder() {
+            if(this.fallbackValue !== null) {
+                if(this.grouped) {
+                    let entries = Object.entries(this.options).flatMap(args => { return Object.entries(args[1]); });
+                    console.log(entries);
+                    return entries.filter(args => args[0] === this.fallbackValue).map(args => args[1])[0];
+                } else {
+                    let entries = Object.entries(this.options);
+                    console.log(entries);
+                    return entries.filter(args => args[0] === this.fallbackValue).map(args => args[1])[0];
+                }
+            }
+            return 'Select a value...';
+        }
+    },
+    watch: {
+        'value': 'tryValidate',
+        'currentTheme': 'fetchData'
+    },
+    mounted() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            let serverData = await this.preferencesApi.getValue(this.dataKey);
+            if(serverData.permissions === false) {
+                return;
+            }
+            this.serverValue = serverData.primaryValue;
+            this.value = this.serverValue;
+            this.fallbackValue = serverData.fallbackValue;
+            this.options = serverData.options;
+            this.loaded = true;
+        },
+        tryValidate() {
+            if(this.value === this.serverValue) {
+                this.validationMessage = null;
+                return;
+            }
+            this.validating = true;
+            this.validateDebounced();
+        },
+        validateDebounced: debounce(async function () {
+            let result = await this.preferencesApi.checkValid(this.dataKey, this.value);
+            this.validating = false;
+            console.log(
+                result
+            );
+            this.validationMessage = result.reason ? result.reason : null;
+        }, 250),
+        async updateValue(value) {
+            if(typeof value === 'undefined') {
+                value = this.value;
+            }
+            this.updating = true;
+            let result = await this.preferencesApi.setValue(this.dataKey, value);
+            this.handleUpdateResult(result);
+        },
+        handleUpdateResult(result) {
+            this.updating = false;
+            if(result.reason) {
+                this.validationMessage = result.reason ? result.reason : null;
+                return;
+            }
+            this.updating = false;
+            this.$buefy.toast.open(morphToNotification(result));
+            this.serverValue = result.primaryValue;
+            this.value = result.primaryValue;
+            this.fallbackValue = result.fallbackValue;
+        },
+        async clearValue() {
+            this.updating = true;
+            let result = await this.preferencesApi.setValue(this.dataKey, null);
+            this.handleUpdateResult(result);
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .pref-field {
+        margin-bottom: 0.75rem;
+    }
+
+    .pref-field-input {
+        width: 100%;
+        max-width: 30rem;
+    }
+
+    .pref-field-skeleton .b-skeleton {
+        margin-bottom: 1rem;
+        width: 100%;
+        max-width: 40rem;
+    }
+
+    .pref-field-skeleton ::v-deep .b-skeleton-item {
+        line-height: 2.5rem;
+    }
+
+    .horizontal-row {
+        margin-bottom: 0.75rem;
+        display: flex;
+        align-items: center;
+    }
+
+    .horizontal-row .field,
+    .horizontal-row .switch {
+        margin-bottom: 0;
+        flex: 1;
+        max-width: 35rem;
+    }
+
+    .horizontal-row > .button {
+        margin-left: 1rem;
+    }
+</style>

package/src/components/preferences/PreferencesList.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="full-height full-height-container pad">
+
+        <div class="top-bar">
+            <h1 class="title">System Preferences</h1>
+        </div>
+
+        <div class="box full-height-flex scroll-container">
+            <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>
+
+<script>
+
+import {canAccessPrefs} from "../../PreferencesApi";
+
+export default {
+    name: "PreferencesList",
+    data() {
+        return {
+            hasAtLeastOneAccess: false
+        }
+    },
+    computed: {
+        userPermissions() {
+            return this.$store.getters.userPermissions;
+        }
+    },
+    methods: {
+        canAccessPrefs(keys) {
+            let result = canAccessPrefs(this.$buefy, this.userPermissions, keys);
+            if(result) {
+                this.hasAtLeastOneAccess = true;
+            }
+            return result;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/preferences/PreferencesPageTemplates.vue

@@ -0,0 +1,23 @@
+<template>
+    <ShowIfPermitted data-key="appearance.pages">
+        <h3 class="subtitle">Pages</h3>
+        <PreferencesField data-key="appearance.pages::theme" label="Page Template" :current-theme="currentTheme"></PreferencesField>
+        <PreferencesField data-key="appearance.pages::contentView" label="Page Preview Template" :current-theme="currentTheme"></PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+
+export default {
+    name: "PreferencesPageTemplates",
+    components: {ShowIfPermitted, PreferencesField },
+    props: {
+        currentTheme: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>

package/src/components/preferences/PreferencesSiteAppearance.vue

@@ -0,0 +1,22 @@
+<template>
+    <ShowIfPermitted data-key="appearance.site">
+        <h3 class="subtitle">Error Pages</h3>
+        <PreferencesField data-key="appearance.site::errorViewPrefix" label="Error View Prefix" :current-theme="currentTheme"></PreferencesField>
+    </ShowIfPermitted>
+</template>
+
+<script>
+import PreferencesField from "./PreferencesField.vue";
+import ShowIfPermitted from "./ShowIfPermitted.vue";
+
+export default {
+    name: "PreferencesSiteAppearance",
+    components: {ShowIfPermitted, PreferencesField },
+    props: {
+        currentTheme: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>