@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.60

package/_Build/vue/components/form/Wysiwyg2.vue

@@ -417,6 +417,42 @@
                     ></path>
                 </svg>
             </button>
+            <button
+                v-if="media"
+                type="button"
+                @click="openMediaDialog('image')"
+            >
+                <svg viewBox="0 0 18 18">
+                    <rect
+                        class="ql-stroke"
+                        height="10"
+                        width="12"
+                        x="3"
+                        y="4"
+                    ></rect>
+                    <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
+                    <polyline
+                        class="ql-even ql-stroke"
+                        points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"
+                    ></polyline>
+                </svg>
+            </button>
+            <button
+                v-if="media"
+                type="button"
+                @click="openMediaDialog('video')"
+            >
+                <svg viewBox="0 0 18 18">
+                    <rect
+                        class="ql-stroke"
+                        height="12"
+                        width="12"
+                        x="3"
+                        y="3"
+                    ></rect>
+                    <path class="ql-fill" d="M7,7v4l4-2Z"></path>
+                </svg>
+            </button>
         </div>
         <editor-content :editor="editor" />
         <el-dialog v-model="dialogVisible" title="URL" width="500">
@@ -431,6 +467,27 @@
                 </div>
             </template>
         </el-dialog>
+        <el-dialog
+            v-model="mediaDialogVisible"
+            :title="mediaType === 'image' ? 'Insert Image' : 'Insert Video'"
+            width="500"
+        >
+            <label
+                >Enter
+                {{ mediaType === "image" ? "image" : "video" }} URL</label
+            >
+            <el-input v-model="mediaUrl" type="url" placeholder="https://" />
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="mediaDialogVisible = false"
+                        >Cancel</el-button
+                    >
+                    <el-button type="primary" @click="insertMedia">
+                        Insert
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </XInput>
 </template>
 
@@ -456,6 +513,8 @@ import TableRow from "@tiptap/extension-table-row";
 import Superscript from "@tiptap/extension-superscript";
 import Subscript from "@tiptap/extension-subscript";
 import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Video from "./wysiwyg2-video.js";
 
 export default {
     mixins: [input],
@@ -476,6 +535,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        media: {
+            type: Boolean,
+            default: false,
+        },
         baseClass: {
             type: String,
             default: "vel-wysiwyg",
@@ -488,6 +551,9 @@ export default {
         previousUrl: null,
         newUrl: null,
         dialogVisible: false,
+        mediaDialogVisible: false,
+        mediaUrl: null,
+        mediaType: null,
     }),
 
     watch: {
@@ -536,6 +602,22 @@ export default {
                 .setLink({ href: url })
                 .run();
         },
+        openMediaDialog(type) {
+            this.mediaType = type;
+            this.mediaUrl = null;
+            this.mediaDialogVisible = true;
+        },
+        insertMedia() {
+            this.mediaDialogVisible = false;
+            let url = this.mediaUrl;
+            if (!url) return;
+
+            if (this.mediaType === "image") {
+                this.editor.chain().focus().setImage({ src: url }).run();
+            } else {
+                this.editor.chain().focus().setVideo({ src: url }).run();
+            }
+        },
     },
 
     mounted() {
@@ -559,14 +641,17 @@ export default {
                 TableCell,
             );
         }
+        if (this.$props.media) {
+            extensions.push(Image, Video);
+        }
 
         this.editor = new Editor({
             extensions: extensions,
         });
         this.setValue();
 
-        this.editor.on("blur", ({ editor, event }) => {
-            const value = editor.isEmpty ? "" : event.srcElement.innerHTML;
+        this.editor.on("update", ({ editor }) => {
+            const value = editor.isEmpty ? "" : editor.getHTML();
             if (this.hold !== value) {
                 this.hold = value;
                 this.$emit("update:modelValue", this.hold);

package/_Build/vue/components/form/wysiwyg2-video.js

@@ -0,0 +1,41 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+export default Node.create({
+    name: "video",
+    group: "block",
+    atom: true,
+
+    addAttributes() {
+        return {
+            src: { default: null },
+            controls: { default: true },
+            width: { default: "100%" },
+        };
+    },
+
+    parseHTML() {
+        return [{ tag: "video" }];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "video",
+            mergeAttributes(HTMLAttributes, {
+                controls: HTMLAttributes.controls ? "" : null,
+            }),
+        ];
+    },
+
+    addCommands() {
+        return {
+            setVideo:
+                (options) =>
+                ({ commands }) => {
+                    return commands.insertContent({
+                        type: this.name,
+                        attrs: options,
+                    });
+                },
+        };
+    },
+});

package/_Build/vue/components/layout/Alert.vue

@@ -11,7 +11,11 @@
 <script>
 import { ElAlert } from "element-plus";
 export default {
-    name: "VPageTitle",
+    name: "Alert",
+
+    components: {
+        ElAlert,
+    },
 
     props: {
         effect: {
@@ -30,9 +34,5 @@ export default {
             default: true,
         },
     },
-
-    components: {
-        ElAlert,
-    },
 };
 </script>

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

@@ -0,0 +1,158 @@
+<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>{{ 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>{{ 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,
+
+        formatKey(key) {
+            return key
+                .replace(/([a-z])([A-Z])/g, "$1 $2")
+                .replace(/[-_]/g, " ")
+                .replace(/\b\w/g, (c) => c.toUpperCase());
+        },
+
+        formatValue(value) {
+            if (value === null || value === "") return "—";
+            return value;
+        },
+
+        formatValues(values) {
+            if (!values) return [];
+            return Object.entries(values)
+                .filter(([key, value]) => value !== undefined)
+                .map(([key, value]) => ({
+                    key: this.formatKey(key),
+                    value: this.formatValue(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}

@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import VelButton from "../../../components/basic/Button.vue";
+import VelButton from "../basic/Button.vue";
 
 export default {
-    name: "VFormFooter",
+    name: "FormFooter",
 
     components: {
         VelButton,

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,7 +17,7 @@
                 :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"
                 />
@@ -49,22 +49,22 @@
                 :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 "../../../components/form/Select.vue";
+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,
     },
 
@@ -91,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>