@fishawack/lab-velocity 2.0.0-beta.22 → 2.0.0-beta.24

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

@@ -67,13 +67,13 @@
                 :target-action="
                     (item) => ({
                         name: `${jsonData.slug}.show`,
-                        params: { id: item.id },
+                        params: { [idKey]: item.id },
                     })
                 "
                 :edit-action="
                     (item) => ({
                         name: `${jsonData.slug}.edit`,
-                        params: { id: item.id },
+                        params: { [idKey]: item.id },
                     })
                 "
                 :display-actions="displayActions"
@@ -149,6 +149,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        idKey: {
+            type: String,
+            default: "id",
+        },
     },
 
     data() {

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

@@ -150,6 +150,7 @@ export default [
                     }),
                 ({ model, $store }) => {
                     const resource = meta(...userResource);
+
                     return h(VelTableSorter, {
                         key: "PIndex",
                         "json-data": {
@@ -157,6 +158,7 @@ export default [
                             tableStructure: resource.table.structure,
                         },
                         defaults: `include=company&filter[company_id]=${model.id}`,
+                        idKey: resource.id,
                         "fixed-height": false,
                         "display-create-action":
                             $store.getters.can("write users"),

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

@@ -1,10 +1,10 @@
 import VelFormRole from "../../../../components/layout/FormRole.vue";
 import Chip from "../../../../components/layout/Chip.vue";
 import Chips from "../../../../components/layout/Chips.vue";
-import VelTableSorter from "../../../../components/layout/TableSorter.vue";
 import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
 import component from "./form.vue";
-import { defaultResource } from "../../../resource/index.js";
+import companyResource from "../PCompanies/resource.js";
+import { defaultResource, meta } from "../../../resource/index.js";
 
 import { ElMessageBox } from "element-plus";
 import { ElNotification } from "element-plus";
@@ -34,7 +34,7 @@ export default [
             delete: ({ $store }) => $store.getters.can("delete companies"),
         },
         form: {
-            async submit({ model, form, $router, $store, method }) {
+            async submit({ model, form, $router, $store, method, resource }) {
                 try {
                     if (method === "post") {
                         if (form.set_password) {
@@ -57,7 +57,7 @@ export default [
                                 .then(() => {
                                     $router.replace({
                                         name: "users.show",
-                                        params: { id: res.data.id },
+                                        params: { [resource.id]: res.data.id },
                                     });
                                 })
                                 .catch(() => {});
@@ -71,7 +71,7 @@ export default [
 
                             $router.replace({
                                 name: "users.show",
-                                params: { id: res.data.id },
+                                params: { [resource.id]: res.data.id },
                             });
                         }
                     } else {
@@ -84,7 +84,7 @@ export default [
 
                         $router.replace({
                             name: "users.show",
-                            params: { id: res.data.id },
+                            params: { [resource.id]: res.data.id },
                         });
                     }
                 } catch (e) {
@@ -131,7 +131,10 @@ export default [
                             class: "underline",
                             to: {
                                 name: "companies.show",
-                                params: { id: model.company_id },
+                                params: {
+                                    [meta(...companyResource).id]:
+                                        model.company_id,
+                                },
                             },
                             text: model.company.name,
                         }),
@@ -171,7 +174,10 @@ export default [
                             class: "underline",
                             to: {
                                 name: "companies.show",
-                                params: { id: model.company_id },
+                                params: {
+                                    [meta(...companyResource).id]:
+                                        model.company_id,
+                                },
                             },
                             text: model.company.name,
                         }),

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

@@ -1,6 +1,4 @@
 <template>
-    <VBreadcrumbs :items="breadcrumbs" class="mb-8" container-classes="m-0" />
-
     <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
         <div class="grid__1/1">
             <div class="grid__1/1 mb-4">
@@ -25,16 +23,10 @@ import Form from "form-backend-validation";
 
 export default {
     components: {
-        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
-            .default,
         XForm: require("./partials/form.vue").default,
     },
 
     props: {
-        breadcrumbs: {
-            type: Array,
-            required: true,
-        },
         resource: {
             type: Object,
             required: true,
@@ -60,11 +52,13 @@ export default {
                 await this.resource.form.submit(this);
             } else {
                 try {
-                    let res = await this.form.post(`${this.resource.api}`);
+                    let res = await this.form.post(
+                        `${this.resource.api(this)}`,
+                    );
 
                     this.$router.replace({
                         name: `${this.resource.slug}.show`,
-                        params: { id: res.data.id },
+                        params: { [this.resource.id]: res.data.id },
                     });
                 } catch (e) {
                     console.log(e);

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

@@ -1,10 +1,4 @@
 <template>
-    <VBreadcrumbs
-        :items="addBreadcrumbs"
-        class="mb-8"
-        container-classes="m-0"
-    />
-
     <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
         <div class="grid__1/1">
             <div class="grid__1/1 mb-4">
@@ -30,16 +24,10 @@ import Form from "form-backend-validation";
 
 export default {
     components: {
-        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
-            .default,
         XForm: require("./partials/form.vue").default,
     },
 
     props: {
-        breadcrumbs: {
-            type: Array,
-            required: true,
-        },
         resource: {
             type: Object,
             required: true,
@@ -50,7 +38,6 @@ export default {
         return {
             form: null,
             model: null,
-            addBreadcrumbs: [...this.$props.breadcrumbs],
             method: "patch",
         };
     },
@@ -64,7 +51,7 @@ export default {
     async mounted() {
         window.axios
             .get(
-                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+                `${this.resource.api(this)}/${this.$route.params[this.resource.id]}?${this.resource.defaults}`,
             )
             .then((res) => {
                 this.model = res.data.data;
@@ -75,14 +62,6 @@ export default {
                         this.form[key] = value;
                     },
                 );
-
-                this.addBreadcrumbs.push({
-                    href: {
-                        name: `${this.resource.slug}.show`,
-                        param: this.model.id,
-                    },
-                    text: this.model.name,
-                });
             });
     },
 
@@ -93,12 +72,12 @@ export default {
             } else {
                 try {
                     let res = await this.form.patch(
-                        `${this.resource.api}/${this.model.id}`,
+                        `${this.resource.api(this)}/${this.model.id}`,
                     );
 
                     this.$router.replace({
                         name: `${this.resource.slug}.show`,
-                        params: { id: res.data.id },
+                        params: { [this.resource.id]: res.data.id },
                     });
                 } catch (e) {
                     console.log(e);

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

@@ -1,12 +1,6 @@
 <template>
-    <VBreadcrumbs :items="breadcrumbs" />
-
     <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
         <div class="grid__1/1">
-            <h2 class="h1 pb-4">
-                {{ breadcrumbs[breadcrumbs.length - 1].text }}
-            </h2>
-
             <div class="flex gap items-center justify-end">
                 <template
                     v-for="(render, index) in resource.index.actions"
@@ -28,20 +22,15 @@
 
 <script>
 export default {
-    components: {
-        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
-            .default,
-    },
-
     props: {
-        breadcrumbs: {
-            type: Array,
-            required: true,
-        },
         resource: {
             type: Object,
             required: true,
         },
+        depth: {
+            type: Number,
+            required: true,
+        },
     },
 };
 </script>

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

@@ -1,47 +1,44 @@
 <template>
-    <VBreadcrumbs
-        :items="addBreadcrumbs"
-        class="mb-8"
-        container-classes="m-0"
-    />
+    <!-- Render nested router view if this isn't the deepest route -->
+    <router-view v-if="!deepestRoute" v-slot="{ Component }">
+        <component :is="Component" :depth="depth + 1" />
+    </router-view>
 
-    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
-        <div class="grid__1/1">
-            <template v-if="model">
-                <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
-                    <VelPageHeader
-                        :icon="resource.icon"
-                        :title="`${model.name} ${model.last_name ?? ''}`"
-                    >
+    <template v-else>
+        <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+            <div class="grid__1/1">
+                <template v-if="model">
+                    <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                        <VelPageHeader
+                            :icon="resource.icon"
+                            :title="`${model.name} ${model.last_name ?? ''}`"
+                        >
+                            <template
+                                v-for="(render, index) in resource.show.actions"
+                                :key="index"
+                            >
+                                <component :is="render(this)" />
+                            </template>
+                        </VelPageHeader>
+                        <hr class="my-3 hr-muted" />
                         <template
-                            v-for="(render, index) in resource.show.actions"
+                            v-for="(render, index) in resource.show.layout"
                             :key="index"
                         >
                             <component :is="render(this)" />
+                            <hr
+                                v-if="index < resource.show.layout.length - 1"
+                                class="my-3 hr-muted"
+                            />
                         </template>
-                    </VelPageHeader>
-
-                    <hr class="my-3 hr-muted" />
-
-                    <template
-                        v-for="(render, index) in resource.show.layout"
-                        :key="index"
-                    >
-                        <component :is="render(this)" />
-
-                        <hr
-                            v-if="index < resource.show.layout.length - 1"
-                            class="my-3 hr-muted"
-                        />
-                    </template>
+                    </div>
+                </template>
+                <div v-else class="absolute transform-center text-center">
+                    <VelSpinner />
                 </div>
-            </template>
-
-            <div v-else class="absolute transform-center text-center">
-                <VelSpinner />
             </div>
         </div>
-    </div>
+    </template>
 </template>
 
 <script>
@@ -51,8 +48,6 @@ import VelButton from "../../../components/basic/Button.vue";
 
 export default {
     components: {
-        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
-            .default,
         VelPageHeader: require("../../../components/layout/PageHeader.vue")
             .default,
         VelSpinner,
@@ -68,29 +63,36 @@ export default {
             type: Object,
             required: true,
         },
+        depth: {
+            type: Number,
+            required: true,
+        },
     },
 
     data() {
         return {
             model: null,
-            addBreadcrumbs: [...this.$props.breadcrumbs],
         };
     },
 
+    computed: {
+        // This boolean helps determine if we are the final depth of route being rendered
+        deepestRoute() {
+            return this.depth === this.$route.matched.length;
+        },
+    },
+
     mounted() {
+        if (!this.deepestRoute) {
+            return;
+        }
+
         axios
             .get(
-                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+                `${this.resource.api(this)}/${this.$route.params[`${this.resource.slug}Id`]}?${this.resource.defaults}`,
             )
             .then((res) => {
                 this.model = res.data.data;
-                this.addBreadcrumbs.push({
-                    href: {
-                        name: `${this.resource.slug}.show`,
-                        param: this.model.id,
-                    },
-                    text: this.model.name,
-                });
             });
     },
 };

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { merge, kebabCase } from "lodash";
+import { merge, kebabCase, cloneDeepWith } from "lodash";
 import axios from "axios";
 import { h, resolveComponent } from "vue";
 
@@ -12,6 +12,7 @@ export const defaultResource = meta();
 
 export function meta(name = "default", properties = {}) {
     const singular = properties.singular || name.slice(0, -1);
+    const slug = properties.slug || kebabCase(name);
 
     return merge(
         {
@@ -20,8 +21,9 @@ export function meta(name = "default", properties = {}) {
             singular,
             label: singular,
             multiLabel: name,
-            slug: properties?.slug || kebabCase(name),
-            api: `/api/${properties?.slug || kebabCase(name)}`,
+            slug,
+            id: properties.id || `${slug}Id`,
+            api: () => `/api/${properties.slug || kebabCase(name)}`,
             permissions: {
                 create: () => true,
                 edit: () => true,
@@ -61,8 +63,10 @@ export function meta(name = "default", properties = {}) {
                             "json-data": {
                                 ...resource,
                                 tableStructure: resource.table.structure,
+                                api: resource.api(props),
                             },
                             defaults: resource.defaults,
+                            idKey: resource.id,
                             "fixed-height": false,
                             "display-create-action":
                                 resource.permissions.create(props),
@@ -86,7 +90,9 @@ export function meta(name = "default", properties = {}) {
                                     onClick: () => {
                                         $router.push({
                                             name: `${resource.slug}.edit`,
-                                            params: { id: model.id },
+                                            params: {
+                                                [resource.id]: model.id,
+                                            },
                                         });
                                     },
                                 },
@@ -115,7 +121,7 @@ export function meta(name = "default", properties = {}) {
                                     confirmButtonType: "danger",
                                     onConfirm: async () => {
                                         await axios.delete(
-                                            `${resource.api}/${model.id}`,
+                                            `${resource.api(props)}/${model.id}`,
                                         );
 
                                         $router.push({
@@ -228,18 +234,25 @@ export function columns(columns = []) {
 }
 
 // Export resource
-export function routes(node, name, properties = {}) {
+export function routes(
+    node,
+    name,
+    properties = {},
+    children = [],
+    isChild = false,
+) {
     const resource = meta(name, properties);
 
     return [
         {
-            path: `/${resource.slug}`,
+            path: `${isChild ? "" : "/"}${resource.slug}`,
             component: node ? "" : require("../resource/parent.vue").default,
             name,
             meta: {
                 resource,
                 title: resource.title,
                 icon: resource.icon,
+                breadcrumb: () => resource.title,
             },
             children: [
                 {
@@ -257,18 +270,34 @@ export function routes(node, name, properties = {}) {
                     name: `${resource.slug}.create`,
                 },
                 {
-                    path: ":id",
+                    path: `:${resource.id}`,
                     component: node
                         ? ""
                         : require("../resource/Children/show.vue").default,
                     name: `${resource.slug}.show`,
+                    // Remove leading / for nested routes or they'll resolve to the root of the site
+                    children: cloneDeepWith(children, (value, key) => {
+                        if (
+                            key === "path" &&
+                            typeof value === "string" &&
+                            value.startsWith("/")
+                        ) {
+                            return value.slice(1);
+                        }
+                    }),
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
                 },
                 {
-                    path: ":id/edit",
+                    path: `:${resource.id}/edit`,
                     component: node
                         ? ""
                         : require("../resource/Children/edit.vue").default,
                     name: `${resource.slug}.edit`,
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
                 },
             ],
         },
@@ -279,4 +308,5 @@ export default {
     routes,
     meta,
     columns,
+    defaultResource,
 };

package/_Build/vue/modules/resource/parent.vue

@@ -1,19 +1,39 @@
 <template>
-    <PageTitle :title="resource.title" />
+    <!-- Only render title once at the shallowest route -->
+    <template v-if="depth === 1">
+        <VelPageTitle :title="resource.title" />
+        <VelBreadcrumbs
+            :items="breadcrumbs"
+            class="mb-8"
+            container-classes="m-0"
+        />
+    </template>
 
     <router-view
         :key="$route.path"
+        v-slot="{ Component }"
         :breadcrumbs="breadcrumbs"
         :resource="resource"
-    />
+    >
+        <component :is="Component" :depth="depth + 1" />
+    </router-view>
 </template>
 
 <script>
-import PageTitle from "../../components/layout/pageTitle.vue";
+import VelPageTitle from "../../components/layout/pageTitle.vue";
+import VelBreadcrumbs from "../../components/layout/Breadcrumbs.vue";
 
 export default {
     components: {
-        PageTitle,
+        VelPageTitle,
+        VelBreadcrumbs,
+    },
+
+    props: {
+        depth: {
+            type: Number,
+            default: 1,
+        },
     },
 
     computed: {
@@ -23,18 +43,20 @@ export default {
         breadcrumbs() {
             return [
                 {
-                    href: {
-                        name: "index",
-                    },
                     text: "Home",
+                    href: { name: "index" },
                 },
-                {
-                    href: {
-                        name: `${this.resource.slug}.index`,
-                    },
-                    text: this.resource.title,
-                },
-            ];
+            ].concat(
+                this.$route.matched
+                    .filter((route) => route.meta?.breadcrumb)
+                    .map((route) => ({
+                        text: route.meta.breadcrumb(this),
+                        href: {
+                            name: route.name,
+                            params: this.$route.params,
+                        },
+                    })),
+            );
         },
     },
 };

package/index.js

@@ -26,6 +26,8 @@ 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 InputNumber } from "./_Build/vue/components/form/InputNumber.vue";
 
+export { default as RoleLegend } from "./_Build/vue/components/layout/RoleLegend.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";
 export { default as SideBar } from "./_Build/vue/components/layout/SideBar.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.22",
+    "version": "2.0.0-beta.24",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",