@fishawack/lab-velocity 2.0.0-beta.5 → 2.0.0-beta.50

package/_Build/vue/{modules/AuthModule/components/VTable.vue → components/layout/Table.vue}

@@ -1,7 +1,8 @@
 <template>
     <el-table
         :data="$props.data"
-        :height="fixedHeight ? 762 : false"
+        :height="fixedHeight ? 762 : undefined"
+        :row-class-name="rowClassName"
         style="width: 100%"
         @sort-change="handleSort"
     >
@@ -13,24 +14,25 @@
                 <el-table-column
                     :width="item.width ?? 'auto'"
                     :sortable="!!item.sortable ? 'custom' : false"
-                    :label="item.label"
+                    :label="
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
                     :prop="item.key"
                     :show-overflow-tooltip="true"
                 >
                     <!-- Support a custom render function -->
                     <template v-if="item.render" #default="scope">
-                        {{ item.render(scope.row) }}
-                    </template>
-
-                    <!-- Support module passed (as a raw component or :is property) -->
-                    <template v-else-if="item.component" #default="scope">
                         <component
                             :is="
-                                item.component.is
-                                    ? item.component.is(scope.row)
-                                    : item.component.module(scope.row)
+                                item.render(
+                                    {
+                                        model: scope.row,
+                                        ...additionalInfo,
+                                    },
+                                    this,
+                                )
                             "
-                            v-bind="item.component.props(scope.row)"
                         />
                     </template>
                 </el-table-column>
@@ -47,18 +49,18 @@
                         v-if="$props.displayShowAction"
                         :to="$props.targetAction($props.data[scope.$index])"
                     >
-                        <el-button size="small" type="primary">
+                        <VelButton size="small" type="primary">
                             {{ `View` }}
-                        </el-button>
+                        </VelButton>
                     </router-link>
                     <router-link
                         v-if="$props.displayEditAction"
                         class="ml"
                         :to="$props.editAction($props.data[scope.$index])"
                     >
-                        <el-button size="small">
+                        <VelButton size="small">
                             {{ `Edit` }}
-                        </el-button>
+                        </VelButton>
                     </router-link>
                 </template>
             </el-table-column>
@@ -67,9 +69,24 @@
 </template>
 
 <script>
+import { ElTable, ElTableColumn } from "element-plus";
+import VelButton from "../basic/Button.vue";
+
 export default {
     name: "VTable",
 
+    components: {
+        ElTable,
+        ElTableColumn,
+        VelButton,
+    },
+
+    inject: {
+        additionalInfo: {
+            default: () => ({}),
+        },
+    },
+
     props: {
         data: {
             type: [Array, Object],
@@ -115,8 +132,12 @@ export default {
             type: Boolean,
             default: true,
         },
+        rowClassName: {
+            type: [Function, String],
+            default: undefined,
+        },
     },
-    emits: ["sort"],
+    emits: ["sort", "reload"],
 
     methods: {
         handleSort(data) {

package/_Build/vue/{modules/AuthModule/components/VTableSorter.vue → components/layout/TableSorter.vue}

@@ -13,7 +13,7 @@
                     </p>
                 </div>
                 <div class="flex justify-end items-end grid__2/3">
-                    <el-basic
+                    <VelBasic
                         v-if="jsonData.searchable"
                         ref="search"
                         v-model="search"
@@ -25,19 +25,23 @@
                         @update:model-value="handleSearch"
                     >
                         <template #prepend
-                            ><GIcon embed asis name="icon-search"
+                            ><GIcon
+                                embed
+                                asis
+                                name="icon-search"
+                                class="icon--0.5"
                         /></template>
-                    </el-basic>
+                    </VelBasic>
                     <slot v-if="displayActions" name="table-action">
-                        <el-button
-                            v-if="displayEditAction"
+                        <VelButton
+                            v-if="displayCreateAction"
                             size="large"
                             type="primary"
                             tag="a"
                             class="ml-2"
                             @click="
                                 $router.push({
-                                    name: `${jsonData.pageLink}.create`,
+                                    name: `${jsonData.slug}.create`,
                                 })
                             "
                         >
@@ -45,40 +49,42 @@
                                 name="icon-plus"
                                 embed
                                 asis
-                                class="fill-0 mr-0.5"
+                                class="fill-0 icon--0.5 mr-0.5"
                             />
                             Create new {{ jsonData.label }}
-                        </el-button>
+                        </VelButton>
                     </slot>
                 </div>
             </slot>
         </div>
         <div class="bg-0 p-0.5 box-shadow-1 border-r-4">
-            <VTable
+            <VelTable
                 :data="table_data"
                 :structure="jsonData.tableStructure"
                 :label="jsonData.label"
                 :over-write-id="jsonData.overWriteId"
                 :fixed-height="fixedHeight"
+                :row-class-name="jsonData.rowClassName"
                 :target-action="
                     (item) => ({
-                        name: `${jsonData.pageLink}.show`,
-                        params: { id: item.id },
+                        name: `${jsonData.slug}.show`,
+                        params: { [idKey]: item.id },
                     })
                 "
                 :edit-action="
                     (item) => ({
-                        name: `${jsonData.pageLink}.edit`,
-                        params: { id: item.id },
+                        name: `${jsonData.slug}.edit`,
+                        params: { [idKey]: item.id },
                     })
                 "
                 :display-actions="displayActions"
                 :display-show-action="displayShowAction"
                 :display-edit-action="displayEditAction"
                 @sort="handleSort"
+                @reload="reload"
             >
                 <slot name="table-content"></slot>
-            </VTable>
+            </VelTable>
 
             <div class="flex justify-center items-center py-2">
                 <el-pagination
@@ -93,36 +99,42 @@
         </div>
     </div>
     <div v-else class="absolute transform-center text-center">
-        <GSpinner class="fill-5" />
-        <p v-text="`Loading...`" />
+        <VelSpinner />
     </div>
 </template>
 
 <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";
+import VelSpinner from "../form/Spinner.vue";
+
 export default {
-    name: "VTableSorter",
+    name: "TableSorter",
 
     components: {
-        VTable: require("./VTable.vue").default,
+        VelTable: require("./Table.vue").default,
+        VelButton,
+        VelBasic,
+        ElPagination,
+        VelSpinner,
     },
 
     props: {
         jsonData: {
             required: true,
-            type: Array,
+            type: Object,
         },
         fixedHeight: {
             default: true,
             type: Boolean,
         },
-        api: {
-            required: true,
-            type: String,
-        },
-        defaults: {
+        apiParams: {
             required: false,
-            type: String,
-            default: "",
+            type: Object,
+            default: () => ({}),
         },
         displayActions: {
             type: Boolean,
@@ -132,44 +144,79 @@ export default {
             type: Boolean,
             default: true,
         },
+        displayCreateAction: {
+            type: Boolean,
+            default: true,
+        },
         displayEditAction: {
             type: Boolean,
             default: true,
         },
+        idKey: {
+            type: String,
+            default: "id",
+        },
     },
 
     data() {
         return {
             search: null,
             sort: "-id",
-            query: [],
+            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;
+            }
         });
     },
 
     methods: {
+        reload() {
+            this.fetchData({ page: this.table_meta.current_page }).then(
+                (data) => {
+                    if (data) {
+                        this.table_data = data.data;
+                        this.table_meta = data.meta;
+                    }
+                },
+            );
+        },
         handleSearch(data) {
             if (data === null || data.length < 3) {
-                this.query = [];
+                this.query = {};
             } else {
-                this.query = [
-                    `filter[${this.$refs.search.$el.dataset.key}]=${data}`,
-                ];
+                this.query = {
+                    [`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) {
@@ -180,24 +227,31 @@ 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" }) {
-            const mergedQuery = [
-                ...this.query,
-                this.defaults,
-                `sort=${this.sort}`,
-                `page=${page}`,
-            ];
-
-            return this.$store.dispatch("getEntity", {
-                entity: this.$props.api,
-                query: mergedQuery.join("&"),
-                errors: this.$root.errors,
-            });
+            this._abortController?.abort();
+            this._abortController = new AbortController();
+
+            return axios
+                .get(`${this.$props.jsonData.api}`, {
+                    params: {
+                        sort: this.sort,
+                        page: page,
+                        ...this.query,
+                        ...this.apiParams,
+                    },
+                    signal: this._abortController.signal,
+                })
+                .then((res) => res.data)
+                .catch((err) => {
+                    if (!axios.isCancel(err)) console.log(err);
+                });
         },
 
         getStatusLabel(status) {
@@ -213,8 +267,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/components/layout/TokenDisplay.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-dialog
+        :model-value="true"
+        title="Token Created"
+        width="560px"
+        class="token-display"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+    >
+        <p class="token-display__warning">
+            <strong>The token below will not be shown again.</strong> Ensure
+            you've taken a copy before closing this window.
+        </p>
+
+        <div class="token-display__block">
+            <div class="token-display__header">
+                <span class="token-display__label">Bearer Token</span>
+                <el-button size="small" plain @click="copy">
+                    {{ copied ? "Copied ✓" : "Copy" }}
+                </el-button>
+            </div>
+            <pre class="token-display__value">{{ token }}</pre>
+        </div>
+
+        <template #footer>
+            <el-button type="primary" @click="$emit('close')">Done</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElDialog, ElButton } from "element-plus";
+
+const props = defineProps({
+    token: {
+        type: String,
+        required: true,
+    },
+});
+
+defineEmits(["close"]);
+
+const copied = ref(false);
+
+async function copy() {
+    await navigator.clipboard.writeText(props.token);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 2000);
+}
+</script>

package/_Build/vue/components/layout/pageTitle.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-    name: "VPageTitle",
+    name: "PageTitle",
 
     props: {
         title: {

package/_Build/vue/components/navigation/MenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-menu-item :index="index" class="vel-menu-item" v-bind="$props">
+    <el-menu-item class="vel-menu-item" v-bind="$props" :index="`${index}`">
         <template #title>
             <slot name="title" />
         </template>
@@ -15,6 +15,11 @@ export default {
     components: {
         ElMenuItem,
     },
-    props: ["index"],
+    props: {
+        index: {
+            type: [String, Number],
+            required: true,
+        },
+    },
 };
 </script>

package/_Build/vue/components/navigation/MenuItemGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu :index="index" v-bind="$props">
+    <el-sub-menu v-bind="$props" :index="`${index}`">
         <template #title>
             <slot name="title" />
         </template>
@@ -15,6 +15,11 @@ export default {
     components: {
         ElSubMenu,
     },
-    props: ["index"],
+    props: {
+        index: {
+            type: [String, Number],
+            required: true,
+        },
+    },
 };
 </script>

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

@@ -1,4 +1,21 @@
 import axios from "axios";
+import debounce from "lodash/debounce";
+
+import { ElNotification } from "element-plus";
+
+const displayErrorNotification = debounce(async function errors(e) {
+    if (e.response && !e.response.data.errors) {
+        ElNotification.error({
+            title: "Error",
+            message:
+                e.response.data.message ||
+                `${e.response.status}: ${
+                    e.response.statusText || "Please try again later!"
+                }`,
+            duration: 10000,
+        });
+    }
+}, 250);
 
 function setAxiosDefaults(baseUrl, router) {
     axios.defaults.baseURL = baseUrl;
@@ -12,7 +29,8 @@ function setAxiosDefaults(baseUrl, router) {
     axios.interceptors.response.use(null, (error) => {
         if (error.response) {
             if (
-                error.response.status === 401 &&
+                (error.response.status === 401 ||
+                    error.response.status === 419) &&
                 router.currentRoute.value.name !== "auth.logout"
             ) {
                 router.push({
@@ -25,6 +43,8 @@ function setAxiosDefaults(baseUrl, router) {
             }
         }
 
+        displayErrorNotification(error);
+
         return Promise.reject(error);
     });
 

package/_Build/vue/modules/AuthModule/js/guest-request.js

@@ -0,0 +1,32 @@
+"use strict";
+import axios from "axios";
+
+/**
+ * Wraps a form POST to a guest-only route with automatic logged-in detection.
+ *
+ * If the server redirects to /hydrate/logged-in (because a stale session
+ * exists), the helper dispatches a logout, fetches a fresh CSRF cookie,
+ * and retries the original request once.
+ *
+ * @param {object}   options
+ * @param {object}   options.form   - form-backend-validation Form instance
+ * @param {string}   options.url    - endpoint to POST to
+ * @param {string}   [options.method] - HTTP method (default: "post")
+ * @param {import('vuex').Store} options.store - Vuex store (for dispatch("logout"))
+ * @returns {Promise<object>} resolved response data
+ */
+export async function guestRequest({ form, url, method = "post", store }) {
+    const res = await form[method](url);
+
+    if (res && res["logged-in"]) {
+        try {
+            await store.dispatch("logout");
+        } catch (_) {}
+
+        await axios.get("/sanctum/csrf-cookie");
+
+        return await form[method](url);
+    }
+
+    return res;
+}

package/_Build/vue/modules/AuthModule/js/impersonation-banner.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { createApp, h, ref } from "vue";
+
+let bannerApp = null;
+let bannerContainer = null;
+let storeRef = null;
+const currentUser = ref(null);
+
+function mountBanner() {
+    if (bannerApp) return;
+
+    bannerContainer = document.createElement("div");
+    document.body.insertBefore(bannerContainer, document.body.firstChild);
+
+    bannerApp = createApp({
+        setup() {
+            function stop() {
+                storeRef.dispatch("stopImpersonating");
+            }
+
+            return () =>
+                h(
+                    "div",
+                    {
+                        style: {
+                            background: "#c0392b",
+                            color: "#fff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "16px",
+                            padding: "12px 16px",
+                            fontSize: "14px",
+                            fontFamily: "sans-serif",
+                        },
+                    },
+                    [
+                        h(
+                            "span",
+                            `Impersonating: ${currentUser.value?.name} (${currentUser.value?.email})`,
+                        ),
+                        h(
+                            "button",
+                            {
+                                onClick: stop,
+                                style: {
+                                    background: "#fff",
+                                    color: "#c0392b",
+                                    border: "none",
+                                    padding: "4px 12px",
+                                    borderRadius: "4px",
+                                    cursor: "pointer",
+                                    fontWeight: "bold",
+                                },
+                            },
+                            "Stop impersonating",
+                        ),
+                    ],
+                );
+        },
+    });
+
+    bannerApp.mount(bannerContainer);
+}
+
+function unmountBanner() {
+    if (!bannerApp) return;
+
+    bannerApp.unmount();
+    bannerContainer?.remove();
+    bannerApp = null;
+    bannerContainer = null;
+}
+
+export function syncImpersonationBanner(user) {
+    currentUser.value = user;
+
+    if (user?.impersonating_as) {
+        mountBanner();
+    } else {
+        unmountBanner();
+    }
+}
+
+export function setImpersonationStore(store) {
+    storeRef = store;
+}
+
+export function ImpersonationPlugin(store) {
+    setImpersonationStore(store);
+
+    // Handle persisted state on load (vuex-persistedstate bypasses mutations)
+    syncImpersonationBanner(store.state.auth?.user ?? store.state.user);
+
+    // Handle all future setUser mutations
+    store.subscribe((mutation) => {
+        if (mutation.type === "auth/setUser" || mutation.type === "setUser") {
+            syncImpersonationBanner(mutation.payload);
+        }
+    });
+}