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

package/_Build/vue/components/navigation/MenuItemGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-sub-menu :index="index" v-bind="$props">
+    <el-sub-menu v-bind="$props" :index="`${index}`">
         <template #title>
             <slot name="title" />
         </template>
@@ -15,6 +15,11 @@ export default {
     components: {
         ElSubMenu,
     },
-    props: ["index"],
+    props: {
+        index: {
+            type: [String, Number],
+            required: true,
+        },
+    },
 };
 </script>

package/_Build/vue/modules/AuthModule/js/axios.js

@@ -1,4 +1,21 @@
 import axios from "axios";
+import debounce from "lodash/debounce";
+
+import { ElNotification } from "element-plus";
+
+const displayErrorNotification = debounce(async function errors(e) {
+    if (e.response && !e.response.data.errors) {
+        ElNotification.error({
+            title: "Error",
+            message:
+                e.response.data.message ||
+                `${e.response.status}: ${
+                    e.response.statusText || "Please try again later!"
+                }`,
+            duration: 10000,
+        });
+    }
+}, 250);
 
 function setAxiosDefaults(baseUrl, router) {
     axios.defaults.baseURL = baseUrl;
@@ -25,6 +42,8 @@ function setAxiosDefaults(baseUrl, router) {
             }
         }
 
+        displayErrorNotification(error);
+
         return Promise.reject(error);
     });
 

package/_Build/vue/modules/AuthModule/js/router.js

@@ -1,10 +1,24 @@
 "use strict";
 
+import { merge } from "lodash";
+
 import { h } from "vue";
 import { RouterView } from "vue-router";
 
+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) {
+export function adminRoutes(node, overrides = {}) {
+    const {
+        userResource: overrideUserResource = {},
+        companyResource: overrideCompanyResource = {},
+        teamResource: overrideTeamResource = {},
+    } = overrides;
+
     return [
         {
             path: "/auth",
@@ -39,94 +53,20 @@ export function adminRoutes(node) {
                 },
             ],
         },
-        {
-            path: "/users",
-            component: node
-                ? ""
-                : require("../adminRoutes/PUsers/parent.vue").default,
-            children: [
-                {
-                    path: "",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PUsers/Children/index.vue")
-                              .default,
-                    name: "users.index",
-                },
-                {
-                    path: "create",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PUsers/Children/create.vue")
-                              .default,
-                    name: "users.create",
-                },
-                {
-                    path: ":id",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PUsers/Children/show.vue")
-                              .default,
-                    name: "users.show",
-                },
-                {
-                    path: ":id/edit",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PUsers/Children/edit.vue")
-                              .default,
-                    name: "users.edit",
-                },
+        ...resourceRoutes(
+            node,
+            ...merge(userResource, [undefined, overrideUserResource]),
+        ),
+        ...resourceRoutes(
+            node,
+            ...merge(companyResource, [undefined, overrideCompanyResource]),
+            [
+                ...resourceRoutes(
+                    node,
+                    ...merge(teamResource, [undefined, overrideTeamResource]),
+                ),
             ],
-        },
-        {
-            path: "/companies",
-            component: node
-                ? ""
-                : require("../adminRoutes/PCompanies/parent.vue").default,
-            children: [
-                {
-                    path: "",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PCompanies/Children/index.vue")
-                              .default,
-                    name: "companies.index",
-                },
-                {
-                    path: "create",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PCompanies/Children/create.vue")
-                              .default,
-                    name: "companies.create",
-                },
-                {
-                    path: ":id",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PCompanies/Children/show.vue")
-                              .default,
-                    name: "companies.show",
-                },
-                {
-                    path: ":id/edit",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PCompanies/Children/edit.vue")
-                              .default,
-                    name: "companies.edit",
-                },
-                {
-                    path: ":id/upload",
-                    component: node
-                        ? ""
-                        : require("../adminRoutes/PCompanies/Children/Upload/upload.vue")
-                              .default,
-                    name: "companies.upload",
-                },
-            ],
-        },
+        ),
     ];
 }
 

package/_Build/vue/modules/AuthModule/js/store.js

@@ -7,6 +7,9 @@ const store = {
             intended: null,
             user: null,
             redirect: process.env.HYDRATE_REDIRECT ?? "index",
+            logo: process.env.HYDRATE_LOGO ?? "example-logo",
+            logoReverse:
+                process.env.HYDRATE_LOGO_REVERSE ?? process.env.HYDRATE_LOGO,
             contact:
                 process.env.HYDRATE_CONTACT ?? "mailto:det@avalerehealth.com",
         };
@@ -15,12 +18,18 @@ const store = {
     getters: {
         authenticated: (state) => !!state.user,
         can: (state) => (permission) => {
-            return state.user?.permissions
-                .map(({ name }) => name)
-                .includes(permission);
+            const arr = Array.isArray(permission) ? permission : [permission];
+            const userPermissions = state.user?.permissions.map(
+                ({ name }) => name,
+            );
+
+            return arr.every((name) => userPermissions?.includes(name));
         },
         hasRole: (state) => (role) => {
-            return state.user?.roles.map(({ name }) => name).includes(role);
+            const arr = Array.isArray(role) ? role : [role];
+            const userRoles = state.user?.roles.map(({ name }) => name);
+
+            return arr.every((name) => userRoles?.includes(name));
         },
     },
 
@@ -38,7 +47,7 @@ const store = {
     },
 
     actions: {
-        getUser({ commit }, { errors, query = "", params }) {
+        getUser({ commit }, { errors = console.log, query = "", params } = {}) {
             return axios
                 .get(`/api/users/self${query}`, {
                     params,
@@ -51,7 +60,7 @@ const store = {
                 .catch(errors);
         },
 
-        logout({ commit }, { errors }) {
+        logout({ commit }) {
             commit("setUser", null);
 
             return axios.post("/logout");

package/_Build/vue/modules/AuthModule/{adminRoutes/PCompanies/Children/partials → routes/PCompanies}/form.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
     <form class="" @submit.prevent="submit">
-        <el-basic
+        <VelBasic
             v-model="form.name"
             name="name"
             :error="form.errors"
@@ -12,9 +12,9 @@
             <template #label>
                 Company name <sup class="color-status-red-100">*</sup>
             </template>
-        </el-basic>
+        </VelBasic>
 
-        <el-select
+        <VelSelect
             v-if="method === 'patch'"
             v-model="form.primary_contact"
             name="primary_contact"
@@ -45,12 +45,12 @@
                 >
                     <template #prepend>@</template>
                     <template #append>
-                        <el-button
+                        <VelButton
                             type="danger"
                             @click="form.domains.splice(index, 1)"
                         >
                             <GSvg class="vel-icon" name="trash" />
-                        </el-button>
+                        </VelButton>
                     </template>
                 </el-input>
 
@@ -63,17 +63,37 @@
         </ul>
 
         <div>
-            <el-button @click="form.domains.push('')">
+            <VelButton @click="form.domains.push('')">
                 Add Domain
 
-                <GIcon name="icon-plus" embed asis class="fill-0 ml" />
-            </el-button>
+                <GIcon
+                    name="icon-plus"
+                    embed
+                    asis
+                    class="fill-0 icon--0.5 ml"
+                />
+            </VelButton>
         </div>
 
+        <VelBasic
+            v-model="form.seats"
+            name="seats"
+            :error="form.errors"
+            type="number"
+            placeholder="Company seats"
+            label="Company seats"
+            min="0"
+            class="mb-0 mt-2"
+        >
+            <template #label>
+                Company seats <sup class="color-status-red-100">*</sup>
+            </template>
+        </VelBasic>
+
         <hr class="my-5 hr-muted" />
 
         <template v-if="$store.getters.can('edit roles')">
-            <FormRole :form="form" />
+            <VelFormRole :form="form" />
 
             <hr class="my-5 hr-muted" />
         </template>
@@ -81,7 +101,7 @@
         <template v-if="$store.getters.can('edit sso')">
             <h3 class="h3 mb-2">SSO Settings</h3>
 
-            <el-select
+            <VelSelect
                 v-model="form.sso_type"
                 name="sso_type"
                 :error="form.errors"
@@ -99,7 +119,7 @@
                     },
                 ]"
             />
-            <el-basic
+            <VelBasic
                 v-model="form.sso_client_id"
                 name="sso_client_id"
                 :error="form.errors"
@@ -107,7 +127,7 @@
                 placeholder="Key"
                 label="Key"
             />
-            <el-basic
+            <VelBasic
                 v-model="form.sso_tenant"
                 name="sso_tenant"
                 :error="form.errors"
@@ -115,7 +135,7 @@
                 placeholder="Tenant"
                 label="Tenant"
             />
-            <el-basic
+            <VelBasic
                 v-model="form.sso_client_secret"
                 name="sso_client_secret"
                 :error="form.errors"
@@ -127,18 +147,28 @@
             <hr class="my-3 hr-muted" />
         </template>
 
-        <VFormFooter :form="form" />
+        <VelFormFooter :form="form" />
     </form>
 </template>
 
 <!-- eslint-disable vue/no-mutating-props -->
 <script>
 import axios from "axios";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelSelect from "../../../../components/form/Select.vue";
+import VelBasic from "../../../../components/form/basic.vue";
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelFormFooter from "../../../../components/layout/FormFooter.vue";
+import { ElInput } from "element-plus";
 
 export default {
     components: {
-        VFormFooter: require("../../../../components/VFormFooter.vue").default,
-        FormRole: require("../../../../components/FormRole.vue").default,
+        VelFormFooter,
+        VelFormRole,
+        VelButton,
+        VelSelect,
+        VelBasic,
+        ElInput,
     },
 
     props: {
@@ -151,8 +181,8 @@ export default {
             type: Function,
         },
         method: {
-            required: true,
             type: String,
+            default: "post",
         },
     },
 
@@ -164,7 +194,9 @@ export default {
 
     mounted() {
         axios
-            .getAll(`/api/users?filter[company_id]=${this.$route.params.id}`)
+            .getAll(
+                `/api/users?filter[company_id]=${this.$route.params.companiesId}`,
+            )
             .then((res) => {
                 this.users = res.data.data;
             });

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

@@ -0,0 +1,259 @@
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelButton from "../../../../components/basic/Button.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 userResource from "../PUsers/resource.js";
+import teamResource from "../PTeams/resource.js";
+import { defaultResource, meta } from "../../../resource/index.js";
+
+import { ElNotification } from "element-plus";
+import { h, resolveComponent } from "vue";
+import axios from "axios";
+
+export default [
+    "companies",
+    {
+        api: {
+            params: {
+                show: () => ({ include: "primary_contact" }),
+            },
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write companies"),
+            edit: ({ $store }) => $store.getters.can("write companies"),
+            delete: ({ $store }) => $store.getters.can("delete companies"),
+        },
+        singular: "company",
+        icon: "icon-cases",
+        form: {
+            component,
+            fields: ({ model }) => ({
+                name: model?.name || null,
+                primary_contact: model?.primary_contact?.id || null,
+                domains: model?.domains || [],
+                seats: model?.seats != null ? model.seats : null,
+                roles: model?.roles.map((val) => val.id) || [],
+                sso_client_id: model?.sso_client_id || undefined,
+                sso_tenant: model?.sso_tenant || undefined,
+                sso_client_secret: model?.sso_client_secret || undefined,
+                sso_type: model?.sso_type || undefined,
+            }),
+        },
+        table: {
+            structure: [
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "user_count",
+                    label: "Total users",
+                    width: "150",
+                },
+                {
+                    key: "role",
+                    render: ({ model }) =>
+                        h(
+                            model.roles.length === 1 ? Chip : Chips,
+                            model.roles.length === 1
+                                ? {
+                                      name: model.roles[0].name,
+                                      label: model.roles[0].label,
+                                  }
+                                : { array: model.roles },
+                        ),
+                },
+            ],
+        },
+        description: {
+            structure: [
+                {
+                    key: "domains",
+                    render: ({ model }) => h("span", model.domains.join(", ")),
+                },
+                {
+                    key: "sso_enabled",
+                    label: "SSO Enabled",
+                },
+                {
+                    key: "primary_contact",
+                    label: "Primary Contact",
+                    render: ({ model }) =>
+                        h("span", model.primary_contact?.name),
+                },
+                {
+                    key: "primary_contact_email",
+                    label: "Primary Contact Email",
+                    render: ({ model }) =>
+                        h("span", model.primary_contact?.email),
+                },
+                {
+                    key: "primary_contact_contacted",
+                    label: "Primary Contact Contacted",
+                    render: ({ model }) =>
+                        h("span", !!model.primary_contact_contacted),
+                },
+                {
+                    label: "Total Users",
+                    key: "user_count",
+                },
+                {
+                    label: "Available Seats",
+                    key: "seats",
+                },
+            ],
+        },
+        index: {
+            layout: [
+                ...defaultResource.index.layout,
+                () =>
+                    h(VelRoleLegend, {
+                        class: "mt-5",
+                    }),
+            ],
+        },
+        show: {
+            actions: [
+                ({ model }) =>
+                    model.primary_contact &&
+                    h(
+                        VelButton,
+                        {
+                            type: "primary",
+                            async onClick() {
+                                try {
+                                    const res = await axios.post(
+                                        `/api/companies/${model.id}/welcome`,
+                                    );
+                                    ElNotification({
+                                        title: "Success",
+                                        message: res.data.message,
+                                        type: "success",
+                                    });
+
+                                    model.primary_contact_contacted = true;
+                                } catch (e) {
+                                    ElNotification({
+                                        title: "Warning",
+                                        message:
+                                            e.response?.data?.message ||
+                                            e.message,
+                                        type: "warning",
+                                    });
+                                }
+                            },
+                        },
+                        "Send welcome email",
+                    ),
+                ...defaultResource.show.actions,
+            ],
+            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,
+                    }),
+                }),
+                ({ 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 = ({ $route }) => ({
+                        include: "company",
+                        "filter[company_id]": $route.params.companiesId,
+                    });
+
+                    const props = {
+                        model,
+                        $store,
+                        $router,
+                        $route,
+                        ...rest,
+                        resource,
+                    };
+
+                    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(VelTableSorter, resource.index.structure(props)),
+                        ]),
+                    };
+                },
+            ],
+        },
+    },
+];