@fishawack/lab-velocity 2.0.0-beta.41 → 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"

package/_Build/vue/components/layout/TableSorter.vue

@@ -104,6 +104,7 @@
 
 <script>
 import axios from "axios";
+import { debounce } from "lodash";
 import { ElPagination } from "element-plus";
 import VelButton from "../basic/Button.vue";
 import VelBasic from "../form/basic.vue";
@@ -163,16 +164,28 @@ export default {
             query: {},
             table_data: [],
             table_meta: null,
+            _abortController: null,
         };
     },
 
+    created() {
+        this.debouncedSearch = debounce(this._executeSearch, 300);
+    },
+
+    beforeUnmount() {
+        this.debouncedSearch.cancel();
+        this._abortController?.abort();
+    },
+
     mounted() {
         this.sort = this.jsonData.defaultSort || "-id";
         this.fetchData({ page: 1 }).then((data) => {
-            this.table_data = data.data;
-            this.table_meta = data.meta;
+            if (data) {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
 
-            this.table_curr_page = this.table_meta.current_page;
+                this.table_curr_page = this.table_meta.current_page;
+            }
         });
     },
 
@@ -180,8 +193,10 @@ export default {
         reload() {
             this.fetchData({ page: this.table_meta.current_page }).then(
                 (data) => {
-                    this.table_data = data.data;
-                    this.table_meta = data.meta;
+                    if (data) {
+                        this.table_data = data.data;
+                        this.table_meta = data.meta;
+                    }
                 },
             );
         },
@@ -193,9 +208,14 @@ export default {
                     [`filter[${this.$refs.search.$el.dataset.key}]`]: data,
                 };
             }
+            this.debouncedSearch();
+        },
+        _executeSearch() {
             this.fetchData({}).then((data) => {
-                this.table_data = data.data;
-                this.table_meta = data.meta;
+                if (data) {
+                    this.table_data = data.data;
+                    this.table_meta = data.meta;
+                }
             });
         },
         handleSort(data) {
@@ -206,12 +226,17 @@ export default {
                     data.order === "ascending" ? data.prop : "-" + data.prop;
             }
             this.fetchData({}).then((data) => {
-                this.table_data = data.data;
-                this.table_meta = data.meta;
+                if (data) {
+                    this.table_data = data.data;
+                    this.table_meta = data.meta;
+                }
             });
         },
 
         fetchData: function ({ page = "1" }) {
+            this._abortController?.abort();
+            this._abortController = new AbortController();
+
             return axios
                 .get(`${this.$props.jsonData.api}`, {
                     params: {
@@ -220,9 +245,12 @@ export default {
                         ...this.query,
                         ...this.apiParams,
                     },
+                    signal: this._abortController.signal,
                 })
                 .then((res) => res.data)
-                .catch(console.log);
+                .catch((err) => {
+                    if (!axios.isCancel(err)) console.log(err);
+                });
         },
 
         getStatusLabel(status) {
@@ -238,8 +266,10 @@ export default {
 
         handleCurrentPageChange(val) {
             this.fetchData({ page: val }).then((data) => {
-                this.table_data = data.data;
-                this.table_meta = data.meta;
+                if (data) {
+                    this.table_data = data.data;
+                    this.table_meta = data.meta;
+                }
             });
         },
 

package/_Build/vue/modules/AuthModule/js/router.js

@@ -8,6 +8,7 @@ import { routes as resourceRoutes } from "../../resource/index.js";
 import defaultUserResource from "../routes/PUsers/resource.js";
 import defaultCompanyResource from "../routes/PCompanies/resource.js";
 import defaultTeamResource from "../routes/PTeams/resource.js";
+import defaultIntegrationResource from "../routes/PIntegrations/resource.js";
 
 // Admin routes export - minimal auth flow (headless login only)
 export function adminRoutes(node, overrides = {}) {
@@ -15,6 +16,7 @@ export function adminRoutes(node, overrides = {}) {
         userResource = defaultUserResource,
         companyResource = defaultCompanyResource,
         teamResource = defaultTeamResource,
+        integrationResource = defaultIntegrationResource,
     } = overrides;
 
     return [
@@ -62,6 +64,7 @@ export function adminRoutes(node, overrides = {}) {
             ...teamResource[1],
             routeName: "teams",
         }),
+        ...resourceRoutes(node, ...integrationResource),
     ];
 }
 

package/_Build/vue/modules/AuthModule/routes/PCompanies/resource.js

@@ -34,6 +34,7 @@ export default [
         },
         singular: "company",
         icon: "icon-cases",
+        auditable: true,
         ...merge(columns(companiesColumns), {
             index: {
                 layout: [

package/_Build/vue/modules/AuthModule/routes/PIntegrations/resource.js

@@ -0,0 +1,122 @@
+import { merge } from "lodash";
+import { ElMessageBox } from "element-plus";
+import { h } from "vue";
+
+import { columns } from "../../../resource/index.js";
+import VelSelect from "../../../../components/form/Select.vue";
+
+export default [
+    "integrations",
+    {
+        icon: `icon-keyboard-tab`,
+        api: {
+            params: {
+                index: () => ({ include: "user,client,accessLogsCount" }),
+                show: () => ({ include: "user,client,accessLogsCount" }),
+            },
+        },
+        searchable: {
+            value: "name",
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write integrations"),
+            edit: ({ $store }) => $store.getters.can("write integrations"),
+            delete: ({ $store }) => $store.getters.can("delete integrations"),
+        },
+        ...merge(
+            columns([
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "scopes",
+                    endpoint: "api/scopes",
+                    labelKey: "description",
+                    filterable: true,
+                    clearable: true,
+                    multiple: true,
+                    initial: () => [],
+                    preparation: ({ form }) => form.scopes.map((d) => d.id),
+                    render: {
+                        read: ({ model }) =>
+                            h("span", model.client?.scopes.join(", ")),
+                        write: () => h(VelSelect),
+                    },
+                    condition: {
+                        table: false,
+                    },
+                },
+                {
+                    key: "client_id",
+                    label: "Client ID",
+                    condition: {
+                        form: false,
+                    },
+                },
+                {
+                    key: "user_id",
+                    label: "Created by",
+                    render: {
+                        read: ({ model }) =>
+                            h("span", model?.user?.name ?? "System"),
+                    },
+                    condition: {
+                        form: false,
+                    },
+                },
+                {
+                    key: "access_logs_count",
+                    label: "API Calls",
+                    render: {
+                        read: ({ model }) =>
+                            h("span", model?.access_logs_count ?? 0),
+                    },
+                    condition: {
+                        form: false,
+                    },
+                },
+            ]),
+            {
+                form: {
+                    submit: async (props) => {
+                        const { form, resource, $router } = props;
+                        const hold = JSON.parse(JSON.stringify(form.data()));
+                        try {
+                            form.populate(resource.form.preparation(props));
+                            let res = await form.post(
+                                `${resource.api.endpoint(props)}`,
+                            );
+                            ElMessageBox.alert(
+                                `<p>The token below will not be shown again. Ensure you've taken a copy before closing this window.<br><br><strong>Token</strong>:</p><p><em>${res.data.token}</em></p>`,
+                                "Token minted",
+                                {
+                                    confirmButtonText: "Ok",
+                                    dangerouslyUseHTMLString: true,
+                                },
+                            )
+                                .then(() => {
+                                    $router.replace({
+                                        name: `${resource.name}.show`,
+                                        params: {
+                                            integrationsId: res.data.id,
+                                        },
+                                    });
+                                })
+                                .catch(() => {});
+                        } catch (e) {
+                            console.log(e);
+                        } finally {
+                            if (
+                                !form.successful ||
+                                !form.__options.resetOnSuccess
+                            ) {
+                                form.populate(hold);
+                            }
+                        }
+                    },
+                },
+            },
+        ),
+    },
+];

package/_Build/vue/modules/AuthModule/routes/PTeams/resource.js

@@ -32,6 +32,7 @@ export default [
                 }),
             },
         },
+        auditable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write teams"),
             edit: ({ $store }) => $store.getters.can("write teams"),

package/_Build/vue/modules/AuthModule/routes/PUsers/resource.js

@@ -36,6 +36,7 @@ export default [
         searchable: {
             value: "email",
         },
+        auditable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write users"),
             edit: ({ $store }) => $store.getters.can("write users"),
@@ -115,9 +116,7 @@ export default [
                                 });
                             }
                         } else {
-                            let res = await form.patch(
-                                `/api/users/${model.id}`,
-                            );
+                            let res = await form.post(`/api/users/${model.id}`);
 
                             if (res.data.id === $store.state.auth.user.id) {
                                 await $store.dispatch("getUser");

package/_Build/vue/modules/resource/Children/create.vue

@@ -4,7 +4,7 @@
             <div class="grid__1/1 mb-4">
                 <h2 class="h1">Create {{ resource.singular }}</h2>
             </div>
-            <div class="mt grid__1/2">
+            <div :class="['mt', resource.form.class]">
                 <component
                     :is="resource.form.component ?? 'XForm'"
                     ref="form"

package/_Build/vue/modules/resource/Children/edit.vue

@@ -4,7 +4,7 @@
             <div class="grid__1/1 mb-4">
                 <h2 class="h1">Edit {{ resource.singular }}</h2>
             </div>
-            <div class="grid__1/2">
+            <div :class="resource.form.class">
                 <component
                     :is="resource.form.component ?? 'XForm'"
                     ref="form"

package/_Build/vue/modules/resource/Children/partials/form.vue

@@ -1,27 +1,37 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-    <form @submit.prevent="submit">
-        <template
-            v-for="(item, index) in resource.form.structure(this)"
-            :key="index"
+    <form @submit.prevent="submit" class="vel-resource-form">
+        <component
+            :is="segment.group ? 'fieldset' : 'div'"
+            v-for="(segment, sIndex) in segments"
+            :key="sIndex"
+            :class="{ 'vel-form-group': segment.group }"
         >
-            <component
-                :is="item.render ? item.render(this) : 'VelBasic'"
-                v-model="form[item.key]"
-                :type="item.type || 'text'"
-                :error="form.errors"
-                :name="item.key"
-                :placeholder="
-                    item.placeholder ||
-                    item.label ||
-                    item.key[0].toUpperCase() + item.key.slice(1)
-                "
-                :label="
-                    item.label || item.key[0].toUpperCase() + item.key.slice(1)
-                "
-                v-bind="item"
-            />
-        </template>
+            <legend v-if="segment.group">
+                {{ segment.group.title || formatGroupKey(segment.groupKey) }}
+            </legend>
+            <div :class="segment.group?.class" :style="segment.group?.style">
+                <component
+                    v-for="(item, iIndex) in segment.items"
+                    :key="`${sIndex}-${iIndex}`"
+                    :is="item.render ? item.render(_self) : 'VelBasic'"
+                    v-model="form[item.key]"
+                    :type="item.type || 'text'"
+                    :error="form.errors"
+                    :name="item.key"
+                    :placeholder="
+                        item.placeholder ||
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    :label="
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    v-bind="item"
+                />
+            </div>
+        </component>
 
         <VelFormFooter :loading="form.processing" />
     </form>
@@ -57,5 +67,45 @@ export default {
             default: null,
         },
     },
+
+    computed: {
+        _self() {
+            return this;
+        },
+        segments() {
+            const items = this.resource.form.structure(this);
+            const groups = this.resource.form.groups || {};
+            const segments = [];
+            const groupSegments = {};
+
+            for (const item of items) {
+                if (item.groupKey && groups[item.groupKey]) {
+                    if (groupSegments[item.groupKey]) {
+                        groupSegments[item.groupKey].items.push(item);
+                    } else {
+                        const segment = {
+                            groupKey: item.groupKey,
+                            group: groups[item.groupKey],
+                            items: [item],
+                        };
+                        groupSegments[item.groupKey] = segment;
+                        segments.push(segment);
+                    }
+                } else {
+                    segments.push({ group: null, items: [item] });
+                }
+            }
+
+            return segments;
+        },
+    },
+
+    methods: {
+        formatGroupKey(key) {
+            return key
+                .replace(/[-_]/g, " ")
+                .replace(/\b\w/g, (c) => c.toUpperCase());
+        },
+    },
 };
 </script>

package/_Build/vue/modules/resource/Children/show.vue

@@ -63,9 +63,11 @@
 </template>
 
 <script>
+import { h } from "vue";
 import axios from "axios";
 import VelSpinner from "../../../components/form/Spinner.vue";
 import VelButton from "../../../components/basic/Button.vue";
+import VelAudit from "../../../components/layout/Audit.vue";
 import { ElTabs, ElTabPane } from "element-plus";
 
 export default {
@@ -111,9 +113,27 @@ export default {
 
         // Compute rendered layout once
         renderedTabs() {
-            return this.resource.show.tabs
+            const tabs = this.resource.show.tabs
                 .map((render) => render(this))
                 .filter((d) => d);
+
+            if (this.resource.auditable) {
+                const auditableType =
+                    typeof this.resource.auditable === "string"
+                        ? this.resource.auditable
+                        : this.resource.singular.replace(/ /g, "_");
+
+                tabs.push({
+                    label: "History",
+                    icon: "icon-time",
+                    component: h(VelAudit, {
+                        auditableType,
+                        auditableId: this.model.id,
+                    }),
+                });
+            }
+
+            return tabs;
         },
 
         // Compute rendered actions once
@@ -129,11 +149,13 @@ export default {
             return;
         }
 
+        const showParams = this.resource.api.params.show(this);
+
         axios
             .get(
                 `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.id}`]}`,
                 {
-                    params: this.resource.api.params.show(this),
+                    params: showParams,
                 },
             )
             .then((res) => {

package/_Build/vue/modules/resource/index.js

@@ -12,6 +12,7 @@ import {
     ElNotification,
 } from "element-plus";
 import VelButton from "../../components/basic/Button.vue";
+import VelAudit from "../../components/layout/Audit.vue";
 
 export const defaultResource = meta();
 
@@ -50,12 +51,15 @@ export function meta(name = "default", properties = {}) {
                 value: "name",
                 label: `Search ${name}`,
             },
+            auditable: false,
             form: {
                 component: null,
                 submit: null,
+                class: "grid__1/2",
                 fields: () => ({}),
                 preparation: ({ form }) => form.data(),
                 structure: [],
+                groups: {},
             },
             table: {
                 actions: [
@@ -488,21 +492,24 @@ export function routes(node, name, properties = {}, children = []) {
                     path: "",
                     component: node
                         ? ""
-                        : require("../resource/Children/index.vue").default,
+                        : resource.index.component ||
+                          require("../resource/Children/index.vue").default,
                     name: `${resource.routeName}.index`,
                 },
                 {
                     path: "create",
                     component: node
                         ? ""
-                        : require("../resource/Children/create.vue").default,
+                        : resource.create?.component ||
+                          require("../resource/Children/create.vue").default,
                     name: `${resource.routeName}.create`,
                 },
                 {
                     path: `:${resource.id}`,
                     component: node
                         ? ""
-                        : require("../resource/Children/show.vue").default,
+                        : resource.show.component ||
+                          require("../resource/Children/show.vue").default,
                     name: `${resource.routeName}.show`,
                     // Remove leading / for nested routes or they'll resolve to the root of the site
                     children: cloneDeepWith(children, (value, key) => {
@@ -522,7 +529,8 @@ export function routes(node, name, properties = {}, children = []) {
                     path: `:${resource.id}/edit`,
                     component: node
                         ? ""
-                        : require("../resource/Children/edit.vue").default,
+                        : resource.edit?.component ||
+                          require("../resource/Children/edit.vue").default,
                     name: `${resource.routeName}.edit`,
                     meta: {
                         breadcrumb: ({ $route }) => $route.params[resource.id],

package/components/_form.scss

@@ -22,3 +22,21 @@
         }
     }
 }
+
+.vel-resource-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5 * $spacing;
+}
+
+.vel-form-group {
+    border: 1px solid lighten($color4, 3%);
+    border-radius: $spacing * 0.5;
+    padding: 2 * $spacing;
+
+    legend {
+        font-weight: 600;
+        font-size: get-ratio(16px);
+        padding: 0 $spacing * 0.5;
+    }
+}

package/components/_menu.scss

@@ -93,11 +93,6 @@ ul.vel-menu {
     flex-direction: column;
     height: 100%;
 
-    li:last-child {
-        margin-top: auto;
-        margin-bottom: 0px;
-    }
-
     .el-sub-menu {
         .vel-menu-item {
             a.active {

package/index.js

@@ -15,6 +15,7 @@ export { default as UserColumns } from "./_Build/vue/modules/AuthModule/routes/P
 export { default as CompanyResource } from "./_Build/vue/modules/AuthModule/routes/PCompanies/resource.js";
 export { default as CompanyColumns } from "./_Build/vue/modules/AuthModule/routes/PCompanies/columns.js";
 export { default as TeamResource } from "./_Build/vue/modules/AuthModule/routes/PTeams/resource.js";
+export { default as IntegrationResource } from "./_Build/vue/modules/AuthModule/routes/PIntegrations/resource.js";
 
 export { default as Button } from "./_Build/vue/components/basic/Button.vue";
 export { default as Link } from "./_Build/vue/components/basic/link.vue";
@@ -30,9 +31,11 @@ export { default as Switch } from "./_Build/vue/components/form/Switch.vue";
 export { default as Wysiwyg } from "./_Build/vue/components/form/Wysiwyg.vue";
 export { default as Wysiwyg2 } from "./_Build/vue/components/form/Wysiwyg2.vue";
 export { default as Upload } from "./_Build/vue/components/form/Upload.vue";
+export { default as Avatar } from "./_Build/vue/components/form/Avatar.vue";
 export { default as InputNumber } from "./_Build/vue/components/form/InputNumber.vue";
 
 export { default as RoleLegend } from "./_Build/vue/components/layout/RoleLegend.vue";
+export { default as FormRole } from "./_Build/vue/components/layout/FormRole.vue";
 export { default as TableSorter } from "./_Build/vue/components/layout/TableSorter.vue";
 export { default as Chip } from "./_Build/vue/components/layout/Chip.vue";
 export { default as Chips } from "./_Build/vue/components/layout/Chips.vue";
@@ -55,3 +58,10 @@ export { default as BreadcrumbsItem } from "./_Build/vue/components/navigation/B
 export { default as Icon } from "./_Build/vue/components/Icon.vue";
 export { default as Svg } from "./_Build/vue/components/Svg.vue";
 export { default as Loader } from "./_Build/vue/components/layout/Loader.vue";
+
+export { default as Filters } from "./_Build/js/libs/filters.js";
+export {
+    ucfirst,
+    calendarFormat,
+    dateFormat,
+} from "./_Build/js/libs/filters.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.41",
+    "version": "2.0.0-beta.42",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -54,6 +54,7 @@
         "@tiptap/starter-kit": "^2.11.2",
         "@tiptap/vue-3": "^2.11.2",
         "axios": "^1.11.0",
+        "dayjs": "^1.11.20",
         "element-plus": "^2.11.8",
         "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
         "lodash": "^4.17.21",
@@ -63,6 +64,7 @@
     "files": [
         "*.scss",
         "components",
+        "_Build/js/libs",
         "_Build/vue/components",
         "_Build/vue/modules/AuthModule",
         "_Build/vue/modules/resource"