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

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

@@ -0,0 +1,143 @@
+<template>
+    <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="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="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-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, ElPagination } from "element-plus";
+import {
+    ucfirst,
+    calendarFormat,
+    dateFormat,
+} from "../../../js/libs/filters.js";
+import axios from "axios";
+
+export default {
+    components: {
+        ElTable,
+        ElTableColumn,
+        ElPagination,
+    },
+
+    props: {
+        auditableType: {
+            type: String,
+            required: true,
+        },
+        auditableId: {
+            type: [Number, String],
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            audits: [],
+            meta: {},
+            loading: false,
+            page: 1,
+        };
+    },
+
+    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;
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/{modules/AuthModule/components/VBreadcrumbs.vue → components/layout/Breadcrumbs.vue}

@@ -3,7 +3,7 @@
         <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
             <div class="grid__1/1">
                 <div class="flex items-center">
-                    <breadcrumbs :crumbs="items" />
+                    <VelBreadcrumbs :crumbs="items" />
                 </div>
             </div>
         </div>
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import Breadcrumbs from "../../../components/navigation/Breadcrumbs.vue";
+import VelBreadcrumbs from "../navigation/Breadcrumbs.vue";
 
 export default {
-    name: "VBreadcrumbs",
+    name: "Breadcrumbs",
     components: {
-        Breadcrumbs,
+        VelBreadcrumbs,
     },
 
     props: {

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

@@ -1,7 +1,7 @@
 <template>
     <div class="chips">
         <template v-for="(item, index) in array" :key="item.name">
-            <Chip
+            <VelChip
                 class="chip--round"
                 :name="item.name"
                 :label="`${item.label}${index < array.length - 1 ? ',' : ''}`"
@@ -13,7 +13,7 @@
 <script>
 export default {
     components: {
-        Chip: require("./Chip.vue").default,
+        VelChip: require("./Chip.vue").default,
     },
 
     props: {

package/_Build/vue/components/layout/Footer.vue

@@ -8,25 +8,25 @@
         <div class="vel-footer__bottom">
             <div class="vel-footer__bottom__links">
                 <p class="color-0">&copy;2025 Avalere Health.</p>
-                <el-link
+                <VelLink
                     underline
                     class="color-0 ml"
                     href="https://avalerehealth.com/privacy-policy/"
                     target="_blank"
-                    >Privacy Policy</el-link
+                    >Privacy Policy</VelLink
                 >
-                <el-link
+                <VelLink
                     underline
                     class="color-0 ml"
                     href="https://avalerehealth.com/corporate-policies/"
                     target="_blank"
-                    >Corporate policies and compliance</el-link
+                    >Corporate policies and compliance</VelLink
                 >
             </div>
             <div class="vel-footer__bottom__end">
                 <p class="color-0">Have a question?</p>
-                <el-link underline class="color-0 ml" :href="contact"
-                    >Contact our Support Team</el-link
+                <VelLink underline class="color-0 ml" :href="contact"
+                    >Contact our Support Team</VelLink
                 >
             </div>
         </div>
@@ -34,17 +34,18 @@
 </template>
 
 <script>
-import elLink from "../basic/link.vue";
+import VelLink from "../basic/link.vue";
 
 export default {
+    components: {
+        VelLink,
+    },
+
     props: {
         contact: {
             required: true,
             type: String,
         },
     },
-    components: {
-        elLink,
-    },
 };
 </script>

package/_Build/vue/{modules/AuthModule/components/VFormFooter.vue → components/layout/FormFooter.vue}

@@ -1,15 +1,15 @@
 <template>
     <div class="grid items-center my-4">
         <slot>
-            <el-button type="primary" native-type="submit" :loading="loading">
+            <VelButton type="primary" native-type="submit" :loading="loading">
                 Save changes
-            </el-button>
+            </VelButton>
 
-            <el-button tag="a" class="ml-2" @click="$router.go(-1)">
+            <VelButton tag="a" class="ml-2" @click="$router.go(-1)">
                 Discard changes
-            </el-button>
+            </VelButton>
 
-            <el-button
+            <VelButton
                 v-if="method === 'patch' && preview"
                 class="ml-2"
                 tag="a"
@@ -18,14 +18,20 @@
                 link
             >
                 <span v-text="`Preview`" />
-            </el-button>
+            </VelButton>
         </slot>
     </div>
 </template>
 
 <script>
+import VelButton from "../basic/Button.vue";
+
 export default {
-    name: "VFormFooter",
+    name: "FormFooter",
+
+    components: {
+        VelButton,
+    },
 
     props: {
         loading: {

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

@@ -5,7 +5,7 @@
     <template v-if="readonly">
         <p>Roles</p>
         <div v-if="!overrides" class="my-2">
-            <Chip
+            <VelChip
                 class="mr mb inline-block"
                 name="inherited"
                 label="Inherited"
@@ -17,14 +17,14 @@
                 :key="roles.find((d) => d.id === role)"
                 class="mr mb inline-block"
             >
-                <Chip
+                <VelChip
                     :name="roles.find((d) => d.id === role)?.name"
                     :label="roles.find((d) => d.id === role)?.label"
                 />
             </li>
         </ul>
     </template>
-    <el-select
+    <VelSelect
         v-else
         v-model="form.roles"
         class="mt-2"
@@ -49,21 +49,23 @@
                 :key="index"
                 class="mr mb inline-block"
             >
-                <Chip :name="permission.name" :label="permission.label" />
+                <VelChip :name="permission.name" :label="permission.label" />
             </li>
         </ul>
     </template>
 
-    <VRoleLegend class="mt-2" />
+    <VelRoleLegend class="mt-2" />
 </template>
 
 <script>
 import axios from "axios";
+import VelSelect from "../form/Select.vue";
 
 export default {
     components: {
-        VRoleLegend: require("./VRoleLegend.vue").default,
-        Chip: require("./Chip.vue").default,
+        VelRoleLegend: require("./RoleLegend.vue").default,
+        VelChip: require("./Chip.vue").default,
+        VelSelect,
     },
 
     props: {
@@ -89,7 +91,7 @@ export default {
 
     computed: {
         permissions() {
-            const allPermissions = this.form.roles.reduce((acc, id) => {
+            const allPermissions = (this.form.roles || []).reduce((acc, id) => {
                 return acc.concat(
                     this.roles.find((d) => d.id === id)?.permissions || [],
                 );

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

@@ -0,0 +1,94 @@
+<template>
+    <div class="vel-app">
+        <VelHeader class="justify-end-dive">
+            <router-link :to="{ name: 'index' }">
+                <GSvg
+                    class="logo"
+                    style="width: 180px"
+                    embed
+                    asis
+                    :name="$store.state.auth.logo"
+                />
+            </router-link>
+            <template #links>
+                <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"
+                        embed
+                        asis
+                    />
+                    <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"
+                    round
+                    :href="`${$root.spaUrl}?authenticated=1`"
+                >
+                    <span v-text="`Access ${$root.appName}`" />
+                </VelButton>
+            </template>
+        </VelHeader>
+        <div class="vel-content">
+            <VelSideBar>
+                <template #navigation>
+                    <VelNavigation v-bind="$attrs" />
+                </template>
+                <template #expand>
+                    <GIcon
+                        class="icon icon--0.5"
+                        name="icon-keyboard-tab"
+                        embed
+                        asis
+                    />
+                </template>
+            </VelSideBar>
+            <main class="vel-main">
+                <div class="vel-main__inner">
+                    <slot />
+                </div>
+                <VelFooter contact="mailTo:det@avalerehealth.com">
+                    <GSvg
+                        class="logo fill-0"
+                        style="width: 180px"
+                        embed
+                        asis
+                        :name="$store.state.auth.logo"
+                    />
+                </VelFooter>
+            </main>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        VelHeader: require("./Header.vue").default,
+        VelSideBar: require("./SideBar.vue").default,
+        VelFooter: require("./Footer.vue").default,
+        VelNavigation: require("./Navigation.vue").default,
+        VelButton: require("../basic/Button.vue").default,
+    },
+};
+</script>

package/_Build/vue/components/layout/Navigation.vue

@@ -0,0 +1,77 @@
+<template>
+    <VMenu>
+        <template v-for="(link, lkey) in links" :key="lkey">
+            <MenuItem v-if="!link.children" :index="lkey">
+                <router-link :to="link.href">
+                    <GIcon
+                        class="icon icon--0.5"
+                        :name="link.icon"
+                        asis
+                        embed
+                    />
+                    <span>{{ link.title }}</span>
+                </router-link>
+            </MenuItem>
+            <SubMenu v-else :id="lkey" :index="lkey">
+                <template #title>
+                    <GIcon
+                        class="icon icon--0.5"
+                        :name="link.icon"
+                        asis
+                        embed
+                    />
+                    <span>{{ link.title }}</span>
+                </template>
+                <MenuItem
+                    v-for="(child, cindex) in link.children"
+                    :key="cindex"
+                    :index="lkey + '-1-' + cindex"
+                >
+                    <router-link :to="child.href">
+                        <span>{{ child.title }}</span>
+                    </router-link>
+                </MenuItem>
+            </SubMenu>
+        </template>
+    </VMenu>
+</template>
+
+<script>
+export default {
+    name: "Navigation",
+
+    components: {
+        VMenu: require("../navigation/Menu.vue").default,
+        MenuItem: require("../navigation/MenuItem.vue").default,
+        SubMenu: require("../navigation/SubMenu.vue").default,
+    },
+
+    props: {
+        links: {
+            type: Array,
+            default: () => [
+                {
+                    title: "Home",
+                    href: { name: "index" },
+                    icon: "icon-home",
+                },
+                {
+                    title: "Companies",
+                    href: { name: "companies.index" },
+                    icon: "icon-cases",
+                },
+                {
+                    title: "Users",
+                    href: { name: "users.index" },
+                    icon: "icon-user",
+                },
+                {
+                    title: "Utilities",
+                    href: { name: "index" },
+                    icon: "icon-utility",
+                },
+            ],
+        },
+    },
+};
+</script>

package/_Build/vue/{modules/AuthModule/components/VPageHeader.vue → components/layout/PageHeader.vue}

@@ -1,28 +1,34 @@
 <template>
-    <div class="grid justify-between">
-        <div class="grid__4/6 flex justify-start">
+    <div class="flex flex-wrap items-start gap" style="row-gap: 16px">
+        <div class="flex justify-start items-center">
             <span v-if="icon">
                 <div
                     class="p-1.5 mr-2 border-radius border border-solid border-muted flex items-center justify-center"
                 >
-                    <GIcon class="icon--3 fill-1" :name="icon" embed artboard />
+                    <GIcon
+                        class="fill-1 icon--0.5"
+                        :name="icon"
+                        embed
+                        artboard
+                    />
                 </div>
             </span>
 
             <h2 class="m-0 font-500 text-secondary">{{ title }}</h2>
         </div>
 
-        <div class="grid__2/6 flex gap justify-end items-start">
-            <div class="flex gap items-center">
-                <slot />
-            </div>
+        <div
+            class="flex flex-wrap gap items-center justify-end"
+            style="margin-left: auto"
+        >
+            <slot />
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "VShowPageHeader",
+    name: "PageHeader",
 
     props: {
         icon: {

package/_Build/vue/components/layout/SideBar.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="vel-sidebar" :class="{ active: active }">
+        <div class="vel-sidebar__inner">
+            <div class="vel-sidebar__top">
+                <slot name="navigation" />
+            </div>
+            <div class="vel-sidebar__bottom">
+                <button class="vel-sidebar__button" @click="active = !active">
+                    <slot name="expand"> > </slot>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SideBar",
+
+    data() {
+        return {
+            active: true,
+        };
+    },
+};
+</script>