@fishawack/lab-velocity 2.0.0-beta.40 → 2.0.0-beta.42

package/README.md

@@ -187,6 +187,7 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-velocity/components/sidebar";
 @import "@fishawack/lab-velocity/components/menu";
 @import "@fishawack/lab-velocity/components/layout";
+@import "@fishawack/lab-velocity/components/descriptions";
 @import "element-plus/theme-chalk/el-tabs";
 @import "element-plus/theme-chalk/el-tab-pane";
 ```
@@ -218,8 +219,9 @@ Ensure Content has Velocity pulled in & copy out the svg folder contents into th
 
 ```json
 {
-    "lftp": "ftp-fishawack.egnyte.com",
-    "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
+    "aws-s3": "fishawack",
+    "location": "fw-auto-content/lab-velocity",
+    "key": "fw-s3-lab-velocity"
 }
 ```
 

package/_Build/js/libs/build-id.js

@@ -0,0 +1,14 @@
+if (process.env.NODE_ENV === "production") {
+    let uuid = document.documentElement.dataset.build;
+    let last = window.localStorage.getItem(`${process.env.REPO_NAME}-build-id`);
+
+    if (!last) {
+        console.log("no build detected - setting");
+        window.localStorage.clear();
+        window.localStorage.setItem(`${process.env.REPO_NAME}-build-id`, uuid);
+    } else if (uuid !== last) {
+        console.log("new build detected - resetting storage");
+        window.localStorage.clear();
+        window.localStorage.setItem(`${process.env.REPO_NAME}-build-id`, uuid);
+    }
+}

package/_Build/js/libs/filters.js

@@ -0,0 +1,36 @@
+import dayjs from "dayjs";
+import calendar from "dayjs/plugin/calendar";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import "dayjs/locale/en-gb";
+
+dayjs.extend(calendar);
+dayjs.extend(localizedFormat);
+dayjs.locale(navigator.language.toLowerCase());
+
+export function ucfirst(value) {
+    if (!value) return "";
+    value = value.toString();
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export function calendarFormat(value) {
+    return !value
+        ? ""
+        : dayjs(value).calendar(null, {
+              sameElse: "DD/MM/YYYY",
+          });
+}
+
+export function dateFormat(value) {
+    return !value ? "" : dayjs(value).format("LLL");
+}
+
+export default {
+    install(Vue) {
+        Vue.config.globalProperties.$filters = {
+            ucfirst,
+            calendarFormat,
+            dateFormat,
+        };
+    },
+};

package/_Build/js/libs/globals.js

@@ -0,0 +1,7 @@
+import GSvg from "../../vue/modules/GSvg.vue";
+
+export default {
+    install(Vue) {
+        // Vue.component("GSvg", GSvg);
+    },
+};

package/_Build/js/libs/router.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from "vue-router";
+import { Auth } from "../../../index.js";
+
+const router = createRouter({
+    history: createWebHistory(),
+    linkExactActiveClass: "active",
+    base: process.env.BASE_URL,
+    routes: require("./routes.js")(),
+});
+
+router.beforeEach((to, from, next) => {
+    // Enforce routes have trailing forward slash
+    if (to.path.substr(-1) != "/") {
+        return next({ path: `${to.path}/`, query: to.query, hash: to.hash });
+    }
+
+    return next();
+});
+
+Auth.Router.beforeEach(router);
+
+export default router;

package/_Build/js/libs/routes.js

@@ -0,0 +1,29 @@
+"use strict";
+
+module.exports = (node) => [
+    {
+        path: "/",
+        component: node ? "" : require("../../vue/routes/PIndex.vue").default,
+        name: "index",
+        meta: {
+            guest: true,
+        },
+    },
+    {
+        path: "/404",
+        component: node ? "" : require("../../vue/routes/P404.vue").default,
+        meta: {
+            guest: true,
+        },
+    },
+    {
+        path: "/index.html",
+        redirect: "/",
+        prerender: false,
+    },
+    {
+        path: "/:pathMatch(.*)*",
+        redirect: "/404",
+        prerender: false,
+    },
+];

package/_Build/js/libs/store.js

@@ -0,0 +1,21 @@
+import { createStore } from "vuex";
+import VuexPersistedState from "vuex-persistedstate";
+import { Auth } from "../../../index.js";
+
+const store = createStore({
+    modules: {
+        auth: Auth.Store,
+    },
+    plugins: [
+        VuexPersistedState({
+            key: document.title,
+            paths: ["auth"],
+        }),
+    ],
+
+    state: {},
+
+    mutations: {},
+});
+
+export default store;

package/_Build/js/libs/utility.js

@@ -0,0 +1,161 @@
+export function eachNode(nodes, cb) {
+    nodes = document.querySelectorAll(nodes);
+
+    for (var i = 0, len = nodes.length; i < len; i++) {
+        cb(nodes[i], i);
+    }
+}
+
+export function parse_query_string(query) {
+    var vars = query.split("&");
+    var query_string = {};
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        // If first entry with this name
+        if (typeof query_string[pair[0]] === "undefined") {
+            query_string[pair[0]] = decodeURIComponent(pair[1]);
+            // If second entry with this name
+        } else if (typeof query_string[pair[0]] === "string") {
+            var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
+            query_string[pair[0]] = arr;
+            // If third or later entry with this name
+        } else {
+            query_string[pair[0]].push(decodeURIComponent(pair[1]));
+        }
+    }
+    return query_string;
+}
+
+export function load(path, mimetype, pages, index, arr) {
+    return new Promise((resolve) => {
+        index = index || 1;
+
+        var xobj = new XMLHttpRequest();
+        if (mimetype) {
+            xobj.overrideMimeType(mimetype);
+        }
+
+        xobj.open(
+            "GET",
+            pages ? `${path}?per_page=100&page=${index}` : path,
+            true,
+        );
+        xobj.onreadystatechange = function () {
+            if (
+                xobj.readyState === 4 &&
+                (+xobj.status === 200 || +xobj.status === 0)
+            ) {
+                var data = JSON.parse(xobj.responseText);
+
+                if (!pages) {
+                    resolve(data);
+                } else {
+                    var current = +xobj.getResponseHeader("x-wp-totalpages");
+
+                    if (!arr) {
+                        arr = data || [];
+                    } else {
+                        arr = arr.concat(data);
+                    }
+
+                    if (current && current !== index) {
+                        load(path, mimetype, pages, ++index, arr).then((res) =>
+                            resolve(res),
+                        );
+                    } else {
+                        resolve(arr);
+                    }
+                }
+            }
+        };
+        xobj.send(null);
+    });
+}
+
+export function classList(el) {
+    var list = el.classList;
+
+    return {
+        toggle: function (c) {
+            list.toggle(c);
+            return this;
+        },
+        add: function (c) {
+            list.add(c);
+            return this;
+        },
+        remove: function (c) {
+            list.remove(c);
+            return this;
+        },
+    };
+}
+
+var blueprints = {};
+export function blueprint(selector, array, cb, root, node) {
+    var nodes;
+
+    if (!node) {
+        nodes = (root || document).querySelectorAll(selector);
+    } else {
+        nodes = [node];
+    }
+
+    var blueprint;
+
+    if (blueprints[selector]) {
+        blueprint = blueprints[selector];
+    } else {
+        blueprint = nodes[0].children[0];
+        blueprint.classList.remove("ut-hide");
+        blueprints[selector] = blueprint;
+    }
+
+    var docFrag = document.createDocumentFragment();
+
+    array.forEach(function (d, i, arr) {
+        var item = blueprint.cloneNode(true);
+
+        cb(item, d, i, arr);
+
+        docFrag.appendChild(item);
+    });
+
+    for (var i = nodes.length; i--; ) {
+        nodes[i].innerHTML = "";
+
+        nodes[i].appendChild(docFrag);
+    }
+}
+
+export function styleguide() {
+    let colors = [].slice
+        .call(document.styleSheets[0].cssRules)
+        .filter((d) => d.selectorText && d.selectorText.includes(".color-"))
+        .map((d) => d.selectorText);
+
+    let length = 0;
+    /* jshint ignore:start */
+    while (colors.find((d) => d === `.color-${length}`)) {
+        length++;
+    }
+    /* jshint ignore:end */
+    eachNode(".js-styleguide-dynamic", (node) => {
+        let name = node.dataset.styleguideDynamic;
+        blueprint(
+            name,
+            Array(length).fill(0),
+            (item, d, i) => {
+                let text = item.querySelector(".js-styleguide-index");
+                if (text) {
+                    text.innerText = i;
+                }
+                classList(item.querySelector(`.${name}`) || item)
+                    .remove(name)
+                    .add(`${name}${i}`);
+            },
+            null,
+            node,
+        );
+    });
+}

package/_Build/vue/components/form/Avatar.vue

@@ -0,0 +1,86 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-upload
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/*"
+            :on-change="onFileChange"
+        >
+            <img
+                v-if="imgSrc"
+                :src="imgSrc"
+                style="
+                    max-width: 150px;
+                    max-height: 150px;
+                    display: block;
+                    cursor: pointer;
+                    margin-bottom: 0.5rem;
+                "
+            />
+            <el-button v-else type="primary" plain> Upload Avatar </el-button>
+        </el-upload>
+        <div v-if="content" style="margin-top: 0.5rem">
+            <el-button type="danger" size="small" @click="cancel">
+                Clear
+            </el-button>
+        </div>
+    </XInput>
+</template>
+
+<script>
+import { ElUpload, ElButton } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput, ElUpload, ElButton },
+
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-basic",
+        },
+        preview: {
+            type: String,
+            default: null,
+        },
+    },
+
+    data() {
+        return {
+            imgSrc: null,
+        };
+    },
+
+    mounted() {
+        this.imgSrc = this.preview;
+    },
+
+    watch: {
+        preview(val) {
+            if (!this.content) this.imgSrc = val;
+        },
+    },
+
+    methods: {
+        onFileChange(uploadFile) {
+            this.content = uploadFile.raw;
+            this.imgSrc = URL.createObjectURL(uploadFile.raw);
+            this.handleInput();
+        },
+        cancel() {
+            this.content = null;
+            this.imgSrc = this.preview;
+            this.handleInput();
+        },
+    },
+};
+</script>

package/_Build/vue/components/layout/Audit.vue

@@ -1,74 +1,142 @@
 <template>
-    <el-table
-        :data="audits"
-        :default-sort="
-            query && {
-                prop: query.sort_by,
-                order: query.sort_dir === 'asc' ? 'ascending' : 'descending',
-            }
-        "
-        @sort-change="$emit('sort-change')"
-    >
-        <el-table-column label="Previous" :fit="false">
-            <template #default="scope">
-                <p
-                    :key="key"
-                    v-for="{ key, value } in scope?.row?.old_values"
-                    class="truncate color-9"
-                >
-                    <strong>{{ $filters.ucfirst(key) }}</strong
-                    ><br />{{ value }}
-                </p>
-            </template>
-        </el-table-column>
+    <div>
+        <el-table :data="audits" v-loading="loading">
+            <el-table-column label="Old" :fit="false">
+                <template #default="scope">
+                    <template v-if="scope?.row?.event !== 'created'">
+                        <p
+                            :key="key"
+                            v-for="{ key, value } in formatValues(
+                                scope?.row?.old_values,
+                            )"
+                            class="truncate color-9"
+                        >
+                            <strong>{{ ucfirst(key) }}</strong
+                            ><br />{{ value }}
+                        </p>
+                    </template>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="New" :fit="false">
+                <template #default="scope">
+                    <template v-if="scope?.row?.event === 'created'">
+                        <span class="color-13">Resource Created</span>
+                    </template>
+                    <template v-else>
+                        <p
+                            :key="key"
+                            v-for="{ key, value } in formatValues(
+                                scope?.row?.new_values,
+                            )"
+                            class="truncate"
+                        >
+                            <strong>{{ ucfirst(key) }}</strong
+                            ><br />{{ value }}
+                        </p>
+                    </template>
+                </template>
+            </el-table-column>
 
-        <el-table-column label="New" :fit="false">
-            <template #default="scope">
-                <p
-                    :key="key"
-                    v-for="{ key, value } in scope?.row?.new_values"
-                    class="truncate"
-                >
-                    <strong>{{ $filters.ucfirst(key) }}</strong
-                    ><br />{{ value }}
-                </p>
-            </template>
-        </el-table-column>
+            <el-table-column label="User" :fit="false">
+                <template #default="scope">
+                    <span :title="scope?.row?.user?.email">
+                        {{ scope?.row?.user?.name || scope?.row?.user?.email }}
+                    </span>
+                </template>
+            </el-table-column>
 
-        <el-table-column label="User" prop="user.email" :fit="false" />
+            <el-table-column label="Date" :fit="false">
+                <template #default="scope">
+                    <span :title="dateFormat(scope?.row?.created_at)">
+                        {{ calendarFormat(scope?.row?.created_at) }}
+                    </span>
+                </template>
+            </el-table-column>
+        </el-table>
 
-        <el-table-column label="Date" :fit="false">
-            <template #default="scope">
-                {{ $filters.calendarFormat(scope?.row?.created_at) }}
-            </template>
-        </el-table-column>
-    </el-table>
+        <el-pagination
+            v-if="meta.last_page > 1"
+            v-model:current-page="page"
+            layout="prev, pager, next"
+            :total="meta.total"
+            :page-size="meta.per_page"
+            class="mt-3 justify-center"
+            @update:current-page="fetchAudits"
+        />
+    </div>
 </template>
 
 <script>
-import { ElTable, ElTableColumn } from "element-plus";
+import { ElTable, ElTableColumn, ElPagination } from "element-plus";
+import {
+    ucfirst,
+    calendarFormat,
+    dateFormat,
+} from "../../../js/libs/filters.js";
+import axios from "axios";
 
 export default {
     components: {
         ElTable,
         ElTableColumn,
+        ElPagination,
     },
 
-    props: ["data", "query"],
+    props: {
+        auditableType: {
+            type: String,
+            required: true,
+        },
+        auditableId: {
+            type: [Number, String],
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            audits: [],
+            meta: {},
+            loading: false,
+            page: 1,
+        };
+    },
 
-    computed: {
-        audits() {
-            return (this.data || [])
-                .map((d) => {
-                    d.new_values = Object.entries(d.new_values)
-                        .filter(([key, value]) => value)
-                        .map(([key, value]) => ({ key, value }));
-                    d.old_values = Object.entries(d.old_values)
-                        .filter(([key, value]) => value)
-                        .map(([key, value]) => ({ key, value }));
-                    return d;
-                })
-                .reverse();
+    mounted() {
+        this.fetchAudits();
+    },
+
+    methods: {
+        ucfirst,
+        calendarFormat,
+        dateFormat,
+
+        formatValues(values) {
+            if (!values) return [];
+            return Object.entries(values)
+                .filter(([key, value]) => value)
+                .map(([key, value]) => ({ key, value }));
+        },
+
+        async fetchAudits() {
+            this.loading = true;
+            try {
+                const res = await axios.get("/api/audits", {
+                    params: {
+                        "filter[auditable_type]": this.auditableType,
+                        "filter[auditable_id]": this.auditableId,
+                        include: "user",
+                        page: this.page,
+                    },
+                });
+                this.audits = res.data.data;
+                this.meta = res.data.meta;
+            } catch (err) {
+                console.error("Failed to load audits", err);
+            } finally {
+                this.loading = false;
+            }
         },
     },
 };

package/_Build/vue/components/layout/Layout.vue

@@ -11,7 +11,10 @@
                 />
             </router-link>
             <template #links>
-                <div class="flex items-center pr">
+                <div
+                    v-if="$store.getters.authenticated"
+                    class="flex items-center pr"
+                >
                     <GIcon
                         class="icon fill-1 icon--0.5 mr-0.5"
                         name="icon-account-circle"
@@ -20,7 +23,22 @@
                     />
                     <span>{{ $store?.state?.auth?.user?.name }}</span>
                 </div>
+                <div class="flex items-center px">
+                    <router-link
+                        v-if="$store.getters.authenticated"
+                        :to="{ name: 'auth.logout' }"
+                        class="vel-logout"
+                        >Logout</router-link
+                    >
+                    <router-link
+                        v-else
+                        :to="{ name: 'auth.login' }"
+                        class="vel-logout"
+                        >Login</router-link
+                    >
+                </div>
                 <VelButton
+                    v-if="$root.spaUrl"
                     class="ml"
                     type="primary"
                     tag="a"