@fishawack/lab-velocity 2.0.0-beta.27 → 2.0.0-beta.29

package/README.md

@@ -187,6 +187,8 @@ There are two different set of sass imports for the admin and the frontend route
 @import "@fishawack/lab-velocity/components/sidebar";
 @import "@fishawack/lab-velocity/components/menu";
 @import "@fishawack/lab-velocity/components/layout";
+@import "element-plus/theme-chalk/el-tabs";
+@import "element-plus/theme-chalk/el-tab-pane";
 ```
 
 Lastly for the admin layout & navigation import & apply the Layout component to the app.vue within your project.

package/_Build/vue/components/layout/FormRole.vue

@@ -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/modules/AuthModule/js/router.js

@@ -9,12 +9,14 @@ import { routes as resourceRoutes } from "../../resource/index.js";
 
 import userResource from "../routes/PUsers/resource.js";
 import companyResource from "../routes/PCompanies/resource.js";
+import teamResource from "../routes/PTeams/resource.js";
 
 // Admin routes export - minimal auth flow (headless login only)
 export function adminRoutes(node, overrides = {}) {
     const {
         userResource: overrideUserResource = {},
         companyResource: overrideCompanyResource = {},
+        teamResource: overrideTeamResource = {},
     } = overrides;
 
     return [
@@ -58,6 +60,12 @@ export function adminRoutes(node, overrides = {}) {
         ...resourceRoutes(
             node,
             ...merge(companyResource, [undefined, overrideCompanyResource]),
+            [
+                ...resourceRoutes(
+                    node,
+                    ...merge(teamResource, [undefined, overrideTeamResource]),
+                ),
+            ],
         ),
     ];
 }

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

@@ -6,6 +6,7 @@ import VelTableSorter from "../../../../components/layout/TableSorter.vue";
 import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
 import component from "./form.vue";
 import userResource from "../PUsers/resource.js";
+import teamResource from "../PTeams/resource.js";
 import { defaultResource, meta } from "../../../resource/index.js";
 
 import { ElNotification } from "element-plus";
@@ -17,7 +18,7 @@ export default [
     {
         api: {
             params: {
-                show: { include: "primary_contact" },
+                show: () => ({ include: "primary_contact" }),
             },
         },
         permissions: {
@@ -151,53 +152,106 @@ export default [
             ],
             layout: [
                 ...defaultResource.show.layout,
-                ({ model }) =>
-                    h(VelFormRole, {
+                ({ model }) => ({
+                    label: "Access control",
+                    component: h(VelFormRole, {
                         overrides: model.overrides_roles_and_permissions,
                         form: { roles: model.roles.map((d) => d.id) },
                         readonly: true,
                     }),
-                ({ model, $store, $router, ...rest }) => {
+                }),
+                ({ model, $store, $router, $route, ...rest }) => {
+                    const resource = meta(...teamResource);
+
+                    const props = {
+                        model,
+                        $store,
+                        $router,
+                        $route,
+                        ...rest,
+                        resource,
+                    };
+
+                    return {
+                        label: "Teams",
+                        component: h("div", [
+                            h("div", { class: "flex justify-end items-end" }, [
+                                resource.permissions.create(props) &&
+                                    h(
+                                        VelButton,
+                                        {
+                                            tag: "a",
+                                            type: "primary",
+                                            size: "large",
+                                            onClick: () => {
+                                                $router.push({
+                                                    name: `${resource.slug}.create`,
+                                                });
+                                            },
+                                        },
+                                        () => [
+                                            h(resolveComponent("GIcon"), {
+                                                class: "fill-0 mr-0.5 icon--0.5",
+                                                name: "icon-plus",
+                                                embed: true,
+                                                artboard: true,
+                                            }),
+                                            `Create ${resource.singular}`,
+                                        ],
+                                    ),
+                            ]),
+                            h(VelTableSorter, resource.index.structure(props)),
+                        ]),
+                    };
+                },
+                ({ model, $store, $router, $route, ...rest }) => {
                     const resource = meta(...userResource);
 
-                    resource.api.params.index["filter[company_id]"] = model.id;
+                    resource.api.params.index = ({ $route }) => ({
+                        include: "company",
+                        "filter[company_id]": $route.params.companiesId,
+                    });
 
                     const props = {
                         model,
                         $store,
                         $router,
+                        $route,
                         ...rest,
                         resource,
                     };
 
-                    return h("div", [
-                        h("div", { class: "flex justify-end items-end" }, [
-                            resource.permissions.create(props) &&
-                                h(
-                                    VelButton,
-                                    {
-                                        tag: "a",
-                                        type: "primary",
-                                        size: "large",
-                                        onClick: () => {
-                                            $router.push({
-                                                name: `${resource.slug}.create`,
-                                            });
+                    return {
+                        label: "Users",
+                        component: h("div", [
+                            h("div", { class: "flex justify-end items-end" }, [
+                                resource.permissions.create(props) &&
+                                    h(
+                                        VelButton,
+                                        {
+                                            tag: "a",
+                                            type: "primary",
+                                            size: "large",
+                                            onClick: () => {
+                                                $router.push({
+                                                    name: `${resource.slug}.create`,
+                                                });
+                                            },
                                         },
-                                    },
-                                    () => [
-                                        h(resolveComponent("GIcon"), {
-                                            class: "fill-0 mr-0.5 icon--0.5",
-                                            name: "icon-plus",
-                                            embed: true,
-                                            artboard: true,
-                                        }),
-                                        `Create ${resource.singular}`,
-                                    ],
-                                ),
+                                        () => [
+                                            h(resolveComponent("GIcon"), {
+                                                class: "fill-0 mr-0.5 icon--0.5",
+                                                name: "icon-plus",
+                                                embed: true,
+                                                artboard: true,
+                                            }),
+                                            `Create ${resource.singular}`,
+                                        ],
+                                    ),
+                            ]),
+                            h(VelTableSorter, resource.index.structure(props)),
                         ]),
-                        h(VelTableSorter, resource.index.structure(props)),
-                    ]);
+                    };
                 },
             ],
         },

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

@@ -0,0 +1,308 @@
+import { merge } from "lodash";
+import { h, resolveComponent } from "vue";
+import axios from "axios";
+import { throttle } from "lodash";
+
+import { columns } from "../../../resource/index.js";
+import userResource from "../PUsers/resource.js";
+import { defaultResource, meta } from "../../../resource/index.js";
+
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+
+import VelTableSorter from "../../../../components/layout/TableSorter.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelCheckbox from "../../../../components/form/Checkbox.vue";
+
+export default [
+    "teams",
+    {
+        icon: `icon-account-circle`,
+        api: {
+            params: {
+                index: ({ $route }) => ({
+                    include: "company",
+                    "filter[company_id]": $route.params.companiesId,
+                }),
+                show: () => ({
+                    include: "company",
+                }),
+            },
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write teams"),
+            edit: ({ $store }) => $store.getters.can("write teams"),
+            delete: ({ $store }) => $store.getters.can("delete teams"),
+        },
+        ...merge(
+            columns([
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "description",
+                },
+                {
+                    key: "company_id",
+                    label: "Company",
+                    class: "hidden",
+                    render: {
+                        read: ({ model }) => h("span", model.company.name),
+                    },
+                    initial: ({ $route, model }) =>
+                        model?.company_id || $route.params.companiesId || null,
+                },
+                {
+                    key: "roles",
+                    initial: ({ model }) =>
+                        model?.roles.map((val) => val.id) || [],
+                    render: {
+                        read: ({ model }) =>
+                            h(
+                                !model.overrides_roles_and_permissions ||
+                                    model.roles.length === 1
+                                    ? Chip
+                                    : Chips,
+                                !model.overrides_roles_and_permissions
+                                    ? {
+                                          name: "inherited",
+                                          label: "Inherited",
+                                      }
+                                    : model.roles.length === 1
+                                      ? {
+                                            name: model.roles[0].name,
+                                            label: model.roles[0].label,
+                                        }
+                                      : { array: model.roles },
+                            ),
+                        write: ({ model, form }) =>
+                            h(VelFormRole, {
+                                overrides:
+                                    model?.overrides_roles_and_permissions,
+                                form,
+                            }),
+                    },
+                },
+            ]),
+            {
+                index: {
+                    layout: [
+                        ...defaultResource.index.layout,
+                        () =>
+                            h(VelRoleLegend, {
+                                class: "mt-5",
+                            }),
+                    ],
+                },
+                show: {
+                    layout: [
+                        ...defaultResource.show.layout,
+                        ({ model }) => ({
+                            label: "Access control",
+                            component: h(VelFormRole, {
+                                overrides:
+                                    model.overrides_roles_and_permissions,
+                                form: { roles: model.roles.map((d) => d.id) },
+                                readonly: true,
+                            }),
+                        }),
+                        (props) => {
+                            const { model, $store, $router, $route, ...rest } =
+                                props;
+
+                            return {
+                                label: "Members",
+                                component: h({
+                                    data: () => ({
+                                        scoped: true,
+                                    }),
+                                    mounted() {
+                                        this.emitter.on("reload-teams", () => {
+                                            this.reload();
+                                        });
+                                    },
+                                    beforeUnmount() {
+                                        this.emitter.off("reload-teams");
+                                    },
+                                    methods: {
+                                        reload: throttle(function () {
+                                            this.$refs.members.reload();
+                                            this.$refs.users.reload();
+                                        }, 1000),
+                                    },
+                                    render() {
+                                        return h("div", [
+                                            h("h3", "Members"),
+                                            (() => {
+                                                const resource = meta(
+                                                    ...userResource,
+                                                );
+
+                                                resource.api.params.index = ({
+                                                    $route,
+                                                }) => ({
+                                                    include: "company",
+                                                    "filter[teams.id]":
+                                                        $route.params.teamsId,
+                                                });
+
+                                                resource.table.actions = [
+                                                    ({ model }) =>
+                                                        h({
+                                                            data: () => ({
+                                                                loading: false,
+                                                            }),
+                                                            render() {
+                                                                return h(
+                                                                    VelButton,
+                                                                    {
+                                                                        tag: "a",
+                                                                        size: "small",
+                                                                        type: "warning",
+                                                                        loading:
+                                                                            this
+                                                                                .loading,
+                                                                        onClick:
+                                                                            async () => {
+                                                                                this.loading = true;
+
+                                                                                await axios.delete(
+                                                                                    `api/teams/${$route.params.teamsId}/users/${model.id}`,
+                                                                                );
+
+                                                                                this.emitter.emit(
+                                                                                    "reload-teams",
+                                                                                );
+                                                                            },
+                                                                    },
+                                                                    "Remove",
+                                                                );
+                                                            },
+                                                        }),
+                                                ];
+
+                                                const props = {
+                                                    model,
+                                                    $store,
+                                                    $router,
+                                                    $route,
+                                                    ...rest,
+                                                    resource,
+                                                };
+
+                                                return h(
+                                                    VelTableSorter,
+                                                    merge(
+                                                        resource.index.structure(
+                                                            props,
+                                                        ),
+                                                        {
+                                                            ref: "members",
+                                                        },
+                                                    ),
+                                                );
+                                            })(),
+                                            h("h3", "Users"),
+                                            h(VelCheckbox, {
+                                                label: "Only show users from this company",
+                                                class: "mt-2",
+                                                modelValue: this.scoped,
+                                                "onUpdate:modelValue": (
+                                                    value,
+                                                ) => {
+                                                    this.scoped = value;
+                                                    this.$nextTick(() => {
+                                                        this.$refs.users.reload();
+                                                    });
+                                                },
+                                            }),
+                                            (() => {
+                                                const resource = meta(
+                                                    ...userResource,
+                                                );
+
+                                                resource.api.params.index = ({
+                                                    $route,
+                                                }) => ({
+                                                    include: "company",
+                                                    "filter[company_id]": this
+                                                        .scoped
+                                                        ? $route.params
+                                                              .companiesId
+                                                        : null,
+                                                    "filter[teams.id]": `!${$route.params.teamsId}`,
+                                                });
+
+                                                resource.table.actions = [
+                                                    ({ model }) =>
+                                                        h({
+                                                            data: () => ({
+                                                                loading: false,
+                                                            }),
+                                                            render() {
+                                                                return h(
+                                                                    VelButton,
+                                                                    {
+                                                                        tag: "a",
+                                                                        size: "small",
+                                                                        type: "primary",
+                                                                        loading:
+                                                                            this
+                                                                                .loading,
+                                                                        onClick:
+                                                                            async () => {
+                                                                                this.loading = true;
+
+                                                                                await axios.post(
+                                                                                    `api/teams/${$route.params.teamsId}/users`,
+                                                                                    {
+                                                                                        id: model.id,
+                                                                                    },
+                                                                                );
+
+                                                                                this.emitter.emit(
+                                                                                    "reload-teams",
+                                                                                );
+                                                                            },
+                                                                    },
+                                                                    "Add",
+                                                                );
+                                                            },
+                                                        }),
+                                                ];
+
+                                                const props = {
+                                                    model,
+                                                    $store,
+                                                    $router,
+                                                    $route,
+                                                    ...rest,
+                                                    resource,
+                                                };
+
+                                                return h(
+                                                    VelTableSorter,
+                                                    merge(
+                                                        resource.index.structure(
+                                                            props,
+                                                        ),
+                                                        {
+                                                            ref: "users",
+                                                        },
+                                                    ),
+                                                );
+                                            })(),
+                                        ]);
+                                    },
+                                }),
+                            };
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+];

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

@@ -26,8 +26,8 @@ export default [
     {
         api: {
             params: {
-                index: { include: "company" },
-                show: { include: "company" },
+                index: () => ({ include: "company" }),
+                show: () => ({ include: "company" }),
             },
         },
         searchable: {
@@ -201,12 +201,14 @@ export default [
         show: {
             layout: [
                 ...defaultResource.show.layout,
-                ({ model }) =>
-                    h(VelFormRole, {
+                ({ model }) => ({
+                    label: "Access control",
+                    component: h(VelFormRole, {
                         overrides: model.overrides_roles_and_permissions,
                         form: { roles: model.roles.map((d) => d.id) },
                         readonly: true,
                     }),
+                }),
             ],
         },
     },

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

@@ -53,7 +53,7 @@ export default {
             .get(
                 `${this.resource.api.endpoint(this)}/${this.$route.params[this.resource.id]}`,
                 {
-                    params: this.resource.api.params.show,
+                    params: this.resource.api.params.show(this),
                 },
             )
             .then((res) => {

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

@@ -14,23 +14,42 @@
                             :title="`${model.name ?? model.id} ${model.last_name ?? ''}`"
                         >
                             <template
-                                v-for="(render, index) in resource.show.actions"
+                                v-for="(rendered, index) in renderedActions"
                                 :key="index"
                             >
-                                <component :is="render(this)" />
+                                <component :is="rendered" />
                             </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>
+
+                        <el-tabs v-model="active" type="card">
+                            <template
+                                v-for="(rendered, index) in renderedLayout"
+                                :key="index"
+                            >
+                                <el-tab-pane :name="index">
+                                    <template #label>
+                                        <span class="align-middle-dive">
+                                            <GIcon
+                                                v-if="rendered.icon"
+                                                class="icon icon--0.5 mr-0.5"
+                                                :name="rendered.icon"
+                                                asis
+                                                embed
+                                            />
+                                            <span>{{
+                                                rendered.label ||
+                                                `Tab ${index + 1}`
+                                            }}</span>
+                                        </span>
+                                    </template>
+                                    <component
+                                        :is="rendered.component || rendered"
+                                    />
+                                </el-tab-pane>
+                            </template>
+                        </el-tabs>
                     </div>
                 </template>
                 <div v-else class="absolute transform-center text-center">
@@ -45,6 +64,7 @@
 import axios from "axios";
 import VelSpinner from "../../../components/form/Spinner.vue";
 import VelButton from "../../../components/basic/Button.vue";
+import { ElTabs, ElTabPane } from "element-plus";
 
 export default {
     components: {
@@ -52,6 +72,8 @@ export default {
             .default,
         VelSpinner,
         VelButton,
+        ElTabs,
+        ElTabPane,
     },
 
     props: {
@@ -72,6 +94,7 @@ export default {
     data() {
         return {
             model: null,
+            active: 0,
         };
     },
 
@@ -80,6 +103,16 @@ export default {
         deepestRoute() {
             return this.depth === this.$route.matched.length;
         },
+
+        // Compute rendered layout once
+        renderedLayout() {
+            return this.resource.show.layout.map((render) => render(this));
+        },
+
+        // Compute rendered actions once
+        renderedActions() {
+            return this.resource.show.actions.map((render) => render(this));
+        },
     },
 
     mounted() {
@@ -91,7 +124,7 @@ export default {
             .get(
                 `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.slug}Id`]}`,
                 {
-                    params: this.resource.api.params.show,
+                    params: this.resource.api.params.show(this),
                 },
             )
             .then((res) => {

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

@@ -35,8 +35,8 @@ export function meta(name = "default", properties = {}) {
             api: {
                 endpoint: () => `/api/${properties.slug || kebabCase(name)}`,
                 params: {
-                    index: {},
-                    show: {},
+                    index: () => ({}),
+                    show: () => ({}),
                 },
             },
             permissions: {
@@ -197,7 +197,7 @@ export function meta(name = "default", properties = {}) {
                             ),
                             api: resource.api.endpoint(props),
                         },
-                        apiParams: resource.api.params.index,
+                        apiParams: resource.api.params.index(props),
                         idKey: resource.id,
                         "fixed-height": false,
                         displayActions: false,
@@ -324,35 +324,43 @@ export function meta(name = "default", properties = {}) {
                     (props) => {
                         const { resource, model } = props;
 
-                        return h(
-                            ElDescriptions,
-                            {
-                                border: true,
-                                column: 1,
-                            },
-                            () =>
-                                resource.description.structure.map(
-                                    (item, index) =>
-                                        h(
-                                            ElDescriptionsItem,
-                                            {
-                                                key: index,
-                                                labelWidth: "20%",
-                                            },
-                                            {
-                                                label: () =>
-                                                    item.label ||
-                                                    item.key[0].toUpperCase() +
-                                                        item.key.slice(1),
-                                                default: () =>
-                                                    item.render
-                                                        ? h(item.render(props))
-                                                        : model?.[item.key] ||
-                                                          "",
-                                            },
-                                        ),
-                                ),
-                        );
+                        return {
+                            label: "Details",
+                            component: h(
+                                ElDescriptions,
+                                {
+                                    border: true,
+                                    column: 1,
+                                },
+                                () =>
+                                    resource.description.structure.map(
+                                        (item, index) =>
+                                            h(
+                                                ElDescriptionsItem,
+                                                {
+                                                    key: index,
+                                                    labelWidth: "20%",
+                                                },
+                                                {
+                                                    label: () =>
+                                                        item.label ||
+                                                        item.key[0].toUpperCase() +
+                                                            item.key.slice(1),
+                                                    default: () =>
+                                                        item.render
+                                                            ? h(
+                                                                  item.render(
+                                                                      props,
+                                                                  ),
+                                                              )
+                                                            : model?.[
+                                                                  item.key
+                                                              ] || "",
+                                                },
+                                            ),
+                                    ),
+                            ),
+                        };
                     },
                 ],
             },

package/package.json

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