@fishawack/lab-velocity 2.0.0-beta.5 → 2.0.0-beta.51

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

@@ -0,0 +1,213 @@
+import { merge } from "lodash";
+import { h, resolveComponent } from "vue";
+import axios from "axios";
+import { ElNotification } from "element-plus";
+
+import { columns, defaultResource, meta } from "../../../resource/index.js";
+import companiesColumns from "./columns.js";
+
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelTableSorter from "../../../../components/layout/TableSorter.vue";
+import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+
+import userResource from "../PUsers/resource.js";
+import teamResource from "../PTeams/resource.js";
+
+export default [
+    "companies",
+    {
+        api: {
+            params: {
+                index: () => ({}),
+                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",
+        auditable: true,
+        trashable: true,
+        ...merge(columns(companiesColumns), {
+            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,
+                ],
+                tabs: [
+                    ...defaultResource.show.tabs,
+                    ({ 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: `companies.${resource.routeName}.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),
+                                ),
+                            ]),
+                        };
+                    },
+                ],
+            },
+        }),
+    },
+];

package/_Build/vue/modules/AuthModule/routes/PIntegrations/columns.js

@@ -0,0 +1,58 @@
+import { h } from "vue";
+
+import VelSelect from "../../../../components/form/Select.vue";
+
+export default [
+    {
+        key: "name",
+        sortable: true,
+    },
+    {
+        key: "scopes",
+        endpoint: "api/scopes",
+        labelKey: "description",
+        filterable: true,
+        clearable: true,
+        multiple: true,
+        initial: (props) =>
+            props.model?.client?.scopes?.map((id) => ({
+                id,
+                description: id,
+            })) ?? [],
+        preparation: ({ form }) => form.scopes.map((d) => d.id),
+        render: {
+            read: ({ model }) => h("span", model.client?.scopes.join(", ")),
+            write: () => h(VelSelect),
+        },
+        condition: {
+            table: false,
+        },
+    },
+    {
+        key: "client_id",
+        label: "Client ID",
+        condition: {
+            form: false,
+        },
+    },
+    {
+        key: "user_id",
+        label: "Created by",
+        render: {
+            read: ({ model }) => h("span", model?.user?.name ?? "System"),
+        },
+        condition: {
+            form: false,
+        },
+    },
+    {
+        key: "access_logs_count",
+        label: "API Calls",
+        render: {
+            read: ({ model }) => h("span", model?.access_logs_count ?? 0),
+        },
+        condition: {
+            form: false,
+        },
+    },
+];

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

@@ -0,0 +1,79 @@
+import { merge } from "lodash";
+import { h, ref } from "vue";
+
+import { columns, defaultResource } from "../../../resource/index.js";
+import integrationsColumns from "./columns.js";
+import TokenDisplay from "../../../../components/layout/TokenDisplay.vue";
+
+const newToken = ref(null);
+
+export default [
+    "integrations",
+    {
+        icon: `icon-keyboard-tab`,
+        api: {
+            params: {
+                index: () => ({ include: "user,client,accessLogsCount" }),
+                show: () => ({ include: "user,client,accessLogsCount" }),
+            },
+        },
+        searchable: {
+            value: "name",
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write integrations"),
+            edit: ({ $store }) => $store.getters.can("write integrations"),
+            delete: ({ $store }) => $store.getters.can("delete integrations"),
+        },
+        ...merge(columns(integrationsColumns), {
+            form: {
+                submit: async (props) => {
+                    const { form, resource, $router, model } = props;
+                    const hold = JSON.parse(JSON.stringify(form.data()));
+                    const isEdit = !!model;
+                    const endpoint = isEdit
+                        ? `${resource.api.endpoint(props)}/${model.id}`
+                        : `${resource.api.endpoint(props)}`;
+                    try {
+                        form.populate(resource.form.preparation(props));
+                        let res = await form.post(endpoint);
+                        newToken.value = res.data.token;
+                        await $router.replace({
+                            name: `${resource.name}.show`,
+                            params: {
+                                integrationsId: res.data.id,
+                            },
+                        });
+                    } catch (e) {
+                        console.log(e);
+                    } finally {
+                        if (
+                            !form.successful ||
+                            !form.__options.resetOnSuccess
+                        ) {
+                            form.populate(hold);
+                        }
+                    }
+                },
+            },
+            show: {
+                ...defaultResource.show,
+                layout: [
+                    ...defaultResource.show.layout,
+                    () =>
+                        h({
+                            setup: () => () => {
+                                if (!newToken.value) return null;
+                                return h(TokenDisplay, {
+                                    token: newToken.value,
+                                    onClose: () => {
+                                        newToken.value = null;
+                                    },
+                                });
+                            },
+                        }),
+                ],
+            },
+        }),
+    },
+];

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

@@ -0,0 +1,78 @@
+import { h } from "vue";
+
+import VelSelect from "../../../../components/form/Select.vue";
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+
+export default [
+    {
+        key: "name",
+        sortable: true,
+    },
+    {
+        key: "description",
+    },
+    {
+        key: "company_id",
+        label: "Company",
+        endpoint: "api/companies",
+        labelKey: "name",
+        filterable: true,
+        searchParam: "name",
+        condition: {
+            form: {
+                write: ({ $route, model }) =>
+                    !$route.params.companiesId && !model?.company,
+            },
+        },
+        initial: ({ model, $route }) =>
+            model?.company ||
+            ($route.params.companiesId && {
+                id: $route.params.companiesId,
+            }),
+        preparation: ({ form }) => form.company_id?.id,
+        render: {
+            read: ({ model }) => h("span", model.company.name),
+            write: () => h(VelSelect),
+        },
+    },
+    {
+        key: "user_count",
+        label: "Users",
+        condition: {
+            form: false,
+        },
+    },
+    {
+        key: "roles",
+        initial: ({ model }) => model?.roles.map((val) => val.id) || [],
+        preparation: ({ form }) =>
+            form.roles?.map((d) => (typeof d === "object" ? d.value : d)),
+        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,
+                }),
+        },
+    },
+];

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

@@ -0,0 +1,251 @@
+import { merge } from "lodash";
+import { h } from "vue";
+import axios from "axios";
+import { throttle } from "lodash";
+
+import { columns, defaultResource, meta } from "../../../resource/index.js";
+import userResource from "../PUsers/resource.js";
+import teamsColumns from "./columns.js";
+
+import VelFormRole from "../../../../components/layout/FormRole.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",
+                }),
+            },
+        },
+        auditable: true,
+        trashable: true,
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write teams"),
+            edit: ({ $store }) => $store.getters.can("write teams"),
+            delete: ({ $store }) => $store.getters.can("delete teams"),
+        },
+        ...merge(columns(teamsColumns), {
+            index: {
+                layout: [
+                    ...defaultResource.index.layout,
+                    () =>
+                        h(VelRoleLegend, {
+                            class: "mt-5",
+                        }),
+                ],
+            },
+            show: {
+                tabs: [
+                    ...defaultResource.show.tabs,
+                    ({ 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",
+                                                    },
+                                                ),
+                                            );
+                                        })(),
+                                    ]);
+                                },
+                            }),
+                        };
+                    },
+                ],
+            },
+        }),
+    },
+];