@fishawack/lab-velocity 2.0.0-beta.30 → 2.0.0-beta.31

package/_Build/vue/components/form/Checkbox.vue

@@ -6,6 +6,8 @@
             :disabled="disabled"
             v-model="content"
             :required="required"
+            :true-label="trueValue"
+            :false-label="falseValue"
             @change="handleInput"
         >
         </el-checkbox>
@@ -29,6 +31,14 @@ export default {
             type: String,
             default: "vel-checkbox",
         },
+        trueValue: {
+            type: [String, Number, Boolean],
+            default: true,
+        },
+        falseValue: {
+            type: [String, Number, Boolean],
+            default: false,
+        },
     },
 
     components: {

package/_Build/vue/components/form/Select.vue

@@ -5,6 +5,7 @@
         </template>
 
         <el-select
+            ref="select"
             v-model="content"
             :class="baseClass"
             :multiple="multiple"
@@ -14,32 +15,42 @@
             :collapse-tags="collapseTags"
             :filterable="filterable"
             :value-on-clear="null"
-            @change="handleInput"
-            @clear="this.$emit('clear')"
-            @blur="this.$emit('blur')"
+            remote-show-suffix
+            :remote="!!endpoint"
+            :remote-method="endpoint ? handleSearch : undefined"
+            :loading="initialLoading"
             :empty-values="[null, undefined]"
+            @change="handleInput"
+            @clear="$emit('clear')"
+            @blur="$emit('blur')"
+            @visible-change="handleVisibleChange"
         >
             <template #default>
                 <slot name="default">
-                    <el-option
-                        v-if="!options[0]?.label"
-                        v-for="(label, value) in options"
-                        :key="value"
-                        :label="label"
-                        :value="castValue(value)"
-                    >
-                    </el-option>
-                    <el-option
-                        v-else
-                        v-for="option in options"
-                        :key="option.value"
-                        :label="option.label"
-                        :disabled="option.disabled"
-                        :value="castValue(option.value)"
-                    >
-                    </el-option>
+                    <template v-if="!currentOptions[0]?.label">
+                        <el-option
+                            v-for="(label, value) in currentOptions"
+                            :key="value"
+                            :label="label"
+                            :value="castValue(value)"
+                        >
+                        </el-option>
+                    </template>
+                    <template v-else>
+                        <el-option
+                            v-for="option in currentOptions"
+                            :key="option.value"
+                            :label="option.label"
+                            :disabled="option.disabled"
+                            :value="option"
+                        >
+                        </el-option>
+                    </template>
                 </slot>
             </template>
+            <template v-if="endpoint" #loading>
+                <div class="el-select-dropdown__loading">Loading...</div>
+            </template>
         </el-select>
     </XInput>
 </template>
@@ -47,12 +58,21 @@
 <script>
 import { ElSelect } from "element-plus";
 import { ElOption } from "element-plus";
+import { ElNotification } from "element-plus";
 import input from "./input.js";
 import XInput from "./input.vue";
 import _ from "lodash";
+import axios from "axios";
 
 export default {
+    components: {
+        XInput,
+        ElOption,
+        ElSelect,
+    },
+
     mixins: [input],
+
     props: {
         ...input.props,
         modelValue: {
@@ -77,21 +97,123 @@ export default {
         },
         options: {
             type: Array,
-            default: [],
+            default: () => [],
         },
         multiple: {
             type: Boolean,
             default: false,
         },
+        endpoint: {
+            type: String,
+            default: null,
+        },
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
+        labelKey: {
+            type: String,
+            default: "label",
+        },
+        valueKey: {
+            type: String,
+            default: "id",
+        },
+        searchParam: {
+            type: String,
+            default: "name",
+        },
+        perPage: {
+            type: Number,
+            default: 10,
+        },
     },
 
-    components: {
-        XInput,
-        ElOption,
-        ElSelect,
+    emits: ["change", "clear", "blur"],
+
+    data() {
+        return {
+            initialLoading: false,
+            loadingMore: false,
+            asyncOptions: [],
+            currentPage: 1,
+            hasMore: false,
+            searchQuery: "",
+            lastSearchQuery: "",
+            initialLoadDone: false,
+            scrollListener: null,
+            wrapScrollTop: 0,
+            wrapScrollLeft: 0,
+        };
+    },
+
+    computed: {
+        currentOptions() {
+            // If endpoint is provided, use async options, otherwise use static options
+            if (this.endpoint) {
+                return this.asyncOptions;
+            }
+            return this.options;
+        },
+    },
+
+    mounted() {
+        if (this.endpoint && this.$refs.select?.$refs?.scrollbarRef) {
+            const scrollbar = this.$refs.select.$refs.scrollbarRef;
+            const wrapRef = scrollbar.wrapRef;
+
+            this.scrollListener = () => {
+                if (!wrapRef) return;
+
+                const distance = 10;
+                const prevTop = this.wrapScrollTop;
+                const prevLeft = this.wrapScrollLeft;
+
+                this.wrapScrollTop = wrapRef.scrollTop;
+                this.wrapScrollLeft = wrapRef.scrollLeft;
+
+                const arrivedStates = {
+                    bottom:
+                        this.wrapScrollTop + wrapRef.clientHeight >=
+                        wrapRef.scrollHeight - distance,
+                    top: this.wrapScrollTop <= distance && prevTop !== 0,
+                    right:
+                        this.wrapScrollLeft + wrapRef.clientWidth >=
+                            wrapRef.scrollWidth - distance &&
+                        prevLeft !== this.wrapScrollLeft,
+                    left: this.wrapScrollLeft <= distance && prevLeft !== 0,
+                };
+
+                let direction = null;
+                if (prevTop !== this.wrapScrollTop) {
+                    direction = this.wrapScrollTop > prevTop ? "bottom" : "top";
+                }
+                if (prevLeft !== this.wrapScrollLeft) {
+                    direction =
+                        this.wrapScrollLeft > prevLeft ? "right" : "left";
+                }
+
+                if (direction && arrivedStates[direction]) {
+                    this.handleEndReached(direction);
+                }
+            };
+
+            wrapRef.addEventListener("scroll", this.scrollListener);
+        }
+    },
+
+    beforeUnmount() {
+        if (
+            this.scrollListener &&
+            this.$refs.select?.$refs?.scrollbarRef?.wrapRef
+        ) {
+            this.$refs.select.$refs.scrollbarRef.wrapRef.removeEventListener(
+                "scroll",
+                this.scrollListener,
+            );
+        }
     },
 
-    emits: ["change", "clear", "blur"],
     methods: {
         castValue(value) {
             if (
@@ -104,6 +226,87 @@ export default {
             }
             return value;
         },
+
+        async handleVisibleChange(visible) {
+            // Load data when dropdown is opened for the first time
+            if (visible && this.endpoint && !this.initialLoadDone) {
+                await this.fetchOptions(1, "");
+                this.initialLoadDone = true;
+            }
+        },
+
+        async handleSearch(query) {
+            if (!this.endpoint) return;
+            if (query === this.lastSearchQuery) return;
+
+            this.searchQuery = query;
+            this.lastSearchQuery = query;
+            this.currentPage = 1;
+            this.asyncOptions = [];
+            await this.fetchOptions(1, query);
+        },
+
+        handleEndReached(direction) {
+            if (!this.endpoint) return;
+            if (direction !== "bottom") return;
+            if (!this.hasMore || this.loadingMore) return;
+            this.fetchOptions(this.currentPage + 1, this.searchQuery);
+        },
+
+        async fetchOptions(page, searchQuery = "") {
+            const isInitialLoad = page === 1;
+            const loadingKey = isInitialLoad ? "initialLoading" : "loadingMore";
+
+            if (this[loadingKey]) return;
+
+            this[loadingKey] = true;
+
+            try {
+                const requestParams = {
+                    ...this.params,
+                    page,
+                    per_page: this.perPage,
+                };
+
+                // Add search filter if query is provided
+                if (searchQuery) {
+                    requestParams[`filter[${this.searchParam}]`] = searchQuery;
+                }
+
+                const response = await axios.get(this.endpoint, {
+                    params: requestParams,
+                });
+
+                const data = response.data.data || [];
+                const meta = response.data.meta;
+
+                // Transform API data to option format
+                const newOptions = data.map((item) => ({
+                    label: item[this.labelKey],
+                    value: item[this.valueKey],
+                    disabled: item.disabled || false,
+                }));
+
+                // If it's the first page, replace options, otherwise append
+                if (page === 1) {
+                    this.asyncOptions = newOptions;
+                } else {
+                    this.asyncOptions = [...this.asyncOptions, ...newOptions];
+                }
+
+                this.currentPage = page;
+                this.hasMore = meta && meta.current_page < meta.last_page;
+            } catch (error) {
+                console.error("Error fetching select options:", error);
+                ElNotification.error({
+                    title: "Error",
+                    message: "Failed to load options. Please try again.",
+                    duration: 5000,
+                });
+            } finally {
+                this[loadingKey] = false;
+            }
+        },
     },
 };
 </script>

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

@@ -0,0 +1,75 @@
+<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>
+
+        <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" prop="user.email" :fit="false" />
+
+        <el-table-column label="Date" :fit="false">
+            <template #default="scope">
+                {{ $filters.calendarFormat(scope?.row?.created_at) }}
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+import { ElTable, ElTableColumn } from "element-plus";
+
+export default {
+    components: {
+        ElTable,
+        ElTableColumn,
+    },
+
+    props: ["data", "query"],
+
+    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();
+        },
+    },
+};
+</script>

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

@@ -48,20 +48,31 @@ export default {
 
     methods: {
         async submit() {
+            const hold = this.form.data();
+
             if (this.resource.form.submit) {
                 await this.resource.form.submit(this);
             } else {
                 try {
+                    this.form.populate(this.resource.form.preparation(this));
+
                     let res = await this.form.post(
                         `${this.resource.api.endpoint(this)}`,
                     );
 
                     this.$router.replace({
-                        name: `${this.resource.slug}.show`,
+                        name: `${this.resource.routeName}.show`,
                         params: { [this.resource.id]: res.data.id },
                     });
                 } catch (e) {
                     console.log(e);
+                } finally {
+                    if (
+                        !this.form.successful ||
+                        !this.form.__options.resetOnSuccess
+                    ) {
+                        this.form.populate(hold);
+                    }
                 }
             }
         },

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

@@ -43,9 +43,12 @@ export default {
     },
 
     beforeMount() {
-        this.form = new Form(this.resource.form.fields(this), {
-            resetOnSuccess: false,
-        });
+        this.form = new Form(
+            { _method: "PATCH", ...this.resource.form.fields(this) },
+            {
+                resetOnSuccess: false,
+            },
+        );
     },
 
     async mounted() {
@@ -70,20 +73,31 @@ export default {
 
     methods: {
         async submit() {
+            const hold = this.form.data();
+
             if (this.resource.form.submit) {
                 await this.resource.form.submit(this);
             } else {
                 try {
-                    let res = await this.form.patch(
+                    this.form.populate(this.resource.form.preparation(this));
+
+                    let res = await this.form.post(
                         `${this.resource.api.endpoint(this)}/${this.model.id}`,
                     );
 
                     this.$router.replace({
-                        name: `${this.resource.slug}.show`,
+                        name: `${this.resource.routeName}.show`,
                         params: { [this.resource.id]: res.data.id },
                     });
                 } catch (e) {
                     console.log(e);
+                } finally {
+                    if (
+                        !this.form.successful ||
+                        !this.form.__options.resetOnSuccess
+                    ) {
+                        this.form.populate(hold);
+                    }
                 }
             }
         },

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

@@ -3,6 +3,7 @@
     <form @submit.prevent="submit">
         <template v-for="(item, index) in resource.form.structure" :key="index">
             <component
+                v-if="!item.condition || item.condition(this)"
                 :is="item.render ? item.render(this) : 'VelBasic'"
                 v-model="form[item.key]"
                 :type="item.type || 'text'"
@@ -10,6 +11,7 @@
                 :name="item.key"
                 :placeholder="
                     item.placeholder ||
+                    item.label ||
                     item.key[0].toUpperCase() + item.key.slice(1)
                 "
                 :label="

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

@@ -11,7 +11,11 @@
                     <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
                         <VelPageHeader
                             :icon="resource.icon"
-                            :title="`${model.name ?? model.id} ${model.last_name ?? ''}`"
+                            :title="
+                                resource.modelTitle
+                                    ? resource.modelTitle(this)
+                                    : `${model.name ?? model.id} ${model.last_name ?? ''}`
+                            "
                         >
                             <template
                                 v-for="(rendered, index) in renderedActions"
@@ -99,7 +103,10 @@ export default {
     computed: {
         // This boolean helps determine if we are the final depth of route being rendered
         deepestRoute() {
-            return this.depth === this.$route.matched.length;
+            return (
+                this.depth ===
+                this.$route.matched.filter((d) => d.components).length
+            );
         },
 
         // Compute rendered layout once
@@ -120,7 +127,7 @@ export default {
 
         axios
             .get(
-                `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.slug}Id`]}`,
+                `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.id}`]}`,
                 {
                     params: this.resource.api.params.show(this),
                 },

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { merge, kebabCase, cloneDeepWith } from "lodash";
+import { merge, kebabCase, snakeCase, cloneDeepWith } from "lodash";
 import axios from "axios";
 import { h, resolveComponent } from "vue";
 
@@ -30,7 +30,9 @@ export function meta(name = "default", properties = {}) {
             label: singular,
             multiLabel: name,
             slug,
-            id: properties.id || `${slug}Id`,
+            path: properties.path || `/${slug}`,
+            routeName: properties.routeName || slug,
+            id: properties.id || `${snakeCase(slug)}Id`,
             icon: `icon-${singular}`,
             api: {
                 endpoint: () => `/api/${properties.slug || kebabCase(name)}`,
@@ -64,7 +66,7 @@ export function meta(name = "default", properties = {}) {
                                 type: "primary",
                                 onClick: () => {
                                     $router.push({
-                                        name: `${resource.slug}.show`,
+                                        name: `${resource.routeName}.show`,
                                         params: {
                                             [resource.id]: model.id,
                                         },
@@ -84,7 +86,7 @@ export function meta(name = "default", properties = {}) {
                                     size: "small",
                                     onClick: () => {
                                         $router.push({
-                                            name: `${resource.slug}.edit`,
+                                            name: `${resource.routeName}.edit`,
                                             params: {
                                                 [resource.id]: model.id,
                                             },
@@ -216,7 +218,7 @@ export function meta(name = "default", properties = {}) {
                                     size: "large",
                                     onClick: () => {
                                         $router.push({
-                                            name: `${resource.slug}.create`,
+                                            name: `${resource.routeName}.create`,
                                         });
                                     },
                                 },
@@ -257,7 +259,7 @@ export function meta(name = "default", properties = {}) {
                                     type: "primary",
                                     onClick: () => {
                                         $router.push({
-                                            name: `${resource.slug}.edit`,
+                                            name: `${resource.routeName}.edit`,
                                             params: {
                                                 [resource.id]: model.id,
                                             },
@@ -293,7 +295,7 @@ export function meta(name = "default", properties = {}) {
                                         );
 
                                         $router.push({
-                                            name: `${resource.slug}.index`,
+                                            name: `${resource.routeName}.index`,
                                         });
                                     },
                                 },
@@ -335,6 +337,8 @@ export function meta(name = "default", properties = {}) {
                                 () =>
                                     resource.description.structure.map(
                                         (item, index) =>
+                                            (!item.condition ||
+                                                item.condition(props)) &&
                                             h(
                                                 ElDescriptionsItem,
                                                 {
@@ -397,6 +401,15 @@ export function columns(columns = []) {
                             : (props.model?.[column.key] ?? null);
                         return fields;
                     }, {}),
+            preparation: (props) =>
+                columns
+                    .filter((column) => !column.filter?.form)
+                    .reduce((fields, column) => {
+                        fields[column.key] = column.preparation
+                            ? column.preparation(props)
+                            : props.form[column.key];
+                        return fields;
+                    }, {}),
             structure: columns
                 .filter((column) => !column.filter?.form)
                 .map((column) => ({
@@ -408,25 +421,20 @@ export function columns(columns = []) {
 }
 
 // Export resource
-export function routes(
-    node,
-    name,
-    properties = {},
-    children = [],
-    isChild = false,
-) {
+export function routes(node, name, properties = {}, children = []) {
     const resource = meta(name, properties);
 
     return [
         {
-            path: `${isChild ? "" : "/"}${resource.slug}`,
+            path: resource.path,
             component: node ? "" : require("../resource/parent.vue").default,
-            name,
+            name: `${resource.routeName}`,
             meta: {
                 resource,
                 title: resource.title,
                 icon: resource.icon,
                 breadcrumb: () => resource.title,
+                ...properties.meta,
             },
             children: [
                 {
@@ -434,21 +442,21 @@ export function routes(
                     component: node
                         ? ""
                         : require("../resource/Children/index.vue").default,
-                    name: `${resource.slug}.index`,
+                    name: `${resource.routeName}.index`,
                 },
                 {
                     path: "create",
                     component: node
                         ? ""
                         : require("../resource/Children/create.vue").default,
-                    name: `${resource.slug}.create`,
+                    name: `${resource.routeName}.create`,
                 },
                 {
                     path: `:${resource.id}`,
                     component: node
                         ? ""
                         : require("../resource/Children/show.vue").default,
-                    name: `${resource.slug}.show`,
+                    name: `${resource.routeName}.show`,
                     // Remove leading / for nested routes or they'll resolve to the root of the site
                     children: cloneDeepWith(children, (value, key) => {
                         if (
@@ -468,7 +476,7 @@ export function routes(
                     component: node
                         ? ""
                         : require("../resource/Children/edit.vue").default,
-                    name: `${resource.slug}.edit`,
+                    name: `${resource.routeName}.edit`,
                     meta: {
                         breadcrumb: ({ $route }) => $route.params[resource.id],
                     },

package/components/_datepicker.scss

@@ -1,4 +1,5 @@
 @import "element-plus/theme-chalk/el-date-picker";
+@import "element-plus/theme-chalk/el-date-picker-panel";
 
 .vel-datepicker {
     // --el-input-height:38px;

package/index.js

@@ -38,6 +38,7 @@ export { default as Navigation } from "./_Build/vue/components/layout/Navigation
 export { default as PageTitle } from "./_Build/vue/components/layout/pageTitle.vue";
 export { default as Alert } from "./_Build/vue/components/layout/Alert.vue";
 export { default as Tooltip } from "./_Build/vue/components/layout/Tooltip.vue";
+export { default as Audit } from "./_Build/vue/components/layout/Audit.vue";
 export { default as Menu } from "./_Build/vue/components/navigation/Menu.vue";
 export { default as MenuItem } from "./_Build/vue/components/navigation/MenuItem.vue";
 export { default as MenuItemGroup } from "./_Build/vue/components/navigation/MenuItemGroup.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.30",
+    "version": "2.0.0-beta.31",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -54,7 +54,7 @@
         "@tiptap/starter-kit": "^2.11.2",
         "@tiptap/vue-3": "^2.11.2",
         "axios": "^1.11.0",
-        "element-plus": "^2.7.8",
+        "element-plus": "^2.11.8",
         "form-backend-validation": "github:mikemellor11/form-backend-validation#master",
         "lodash": "^4.17.21",
         "quill": "^1.3.7",