@fishawack/lab-velocity 2.0.0-beta.4 → 2.0.0-beta.41

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

@@ -0,0 +1,334 @@
+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";
+import VelSelect from "../../../../components/form/Select.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",
+                    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,
+                            }),
+                    },
+                },
+            ]),
+            {
+                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",
+                                                        },
+                                                    ),
+                                                );
+                                            })(),
+                                        ]);
+                                    },
+                                }),
+                            };
+                        },
+                    ],
+                },
+            },
+        ),
+    },
+];

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

@@ -0,0 +1,349 @@
+import { h, resolveComponent, ref } from "vue";
+import { debounce } from "lodash";
+import axios from "axios";
+
+import VelBasic from "../../../../components/form/basic.vue";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelCheckbox from "../../../../components/form/Checkbox.vue";
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+
+import companyResource from "../PCompanies/resource.js";
+import { meta } from "../../../resource/index.js";
+
+/**
+ * Shared reactive state for SSO company detection.
+ * Used by the email column's render.write and by form.submit in resource.js.
+ */
+export const detectedCompany = ref(null);
+
+const debouncedFetchCompany = debounce((domain) => {
+    if (domain) {
+        axios
+            .get("/api/companies", {
+                params: {
+                    "filter[domains.domain]": domain,
+                },
+            })
+            .then((res) => {
+                detectedCompany.value = res.data.data[0] || null;
+            })
+            .catch(() => {
+                detectedCompany.value = null;
+            });
+    } else {
+        detectedCompany.value = null;
+    }
+}, 500);
+
+/**
+ * Hoisted inline component for the email column's render.write.
+ * Must be a stable reference so Vue doesn't remount on every render.
+ */
+const EmailField = {
+    props: ["form"],
+    data() {
+        return {
+            company: detectedCompany.value,
+        };
+    },
+    watch: {
+        "form.email": {
+            handler(val) {
+                const domain = val?.split("@")[1];
+                debouncedFetchCompany(domain);
+            },
+        },
+    },
+    created() {
+        this.$watch(
+            () => detectedCompany.value,
+            (val) => {
+                this.company = val;
+            },
+        );
+    },
+    render() {
+        const form = this.form;
+        const company = this.company;
+        const isSSOCompany = !!company?.sso_enabled;
+
+        return h("div", [
+            h(VelBasic, {
+                modelValue: form.email,
+                "onUpdate:modelValue": (val) => {
+                    form.email = val;
+                },
+                placeholder: "Email",
+                label: "Email",
+                type: "text",
+                name: "email",
+                error: form.errors,
+            }),
+            h("p", { class: "mb-1" }, ["Company: ", h("span", company?.name)]),
+            h("hr", { class: "my-3 hr-muted" }),
+            isSSOCompany
+                ? h("p", { class: "mb-3" }, [
+                      "This user belongs to an SSO-enabled company. They will authenticate via SSO on first login. No password is required.",
+                  ])
+                : h("div", [
+                      h(VelCheckbox, {
+                          modelValue: form.notify_user,
+                          "onUpdate:modelValue": (val) => {
+                              form.notify_user = val;
+                          },
+                          name: "notify_user",
+                          error: form.errors,
+                          label: "Send email to notify user of account and password",
+                      }),
+                      h(VelCheckbox, {
+                          modelValue: form.force_password_change,
+                          "onUpdate:modelValue": (val) => {
+                              form.force_password_change = val;
+                          },
+                          name: "force_password_change",
+                          error: form.errors,
+                          label: "Force password change on first login",
+                      }),
+                      h(VelCheckbox, {
+                          modelValue: form.set_password,
+                          "onUpdate:modelValue": (val) => {
+                              form.set_password = val;
+                          },
+                          name: "set_password",
+                          error: form.errors,
+                          label: "Auto generate password",
+                      }),
+                      !form.set_password &&
+                          h("div", [
+                              h(VelBasic, {
+                                  modelValue: form.password,
+                                  "onUpdate:modelValue": (val) => {
+                                      form.password = val;
+                                  },
+                                  name: "password",
+                                  error: form.errors,
+                                  type: "password",
+                                  placeholder: "Password",
+                                  label: "Password",
+                              }),
+                              h(VelBasic, {
+                                  modelValue: form.password_confirmation,
+                                  "onUpdate:modelValue": (val) => {
+                                      form.password_confirmation = val;
+                                  },
+                                  name: "password_confirmation",
+                                  error: form.errors,
+                                  type: "password",
+                                  placeholder: "Password Confirmation",
+                                  label: "Password Confirmation",
+                              }),
+                          ]),
+                  ]),
+            h("hr", { class: "my-5 hr-muted" }),
+        ]);
+    },
+};
+
+/**
+ * Hoisted inline component for the roles column's render.write.
+ * Must be a stable reference so Vue doesn't remount on every render.
+ */
+const RolesField = {
+    props: ["form"],
+    data() {
+        return {
+            enableRoles: null,
+        };
+    },
+    watch: {
+        "form.roles": {
+            immediate: true,
+            handler(newVal) {
+                if (this.enableRoles === null) {
+                    this.enableRoles = newVal && newVal.length > 0;
+                }
+            },
+        },
+    },
+    render() {
+        const form = this.form;
+
+        if (this.enableRoles) {
+            return h("div", [
+                h(
+                    VelButton,
+                    {
+                        onClick: () => {
+                            form.roles = [];
+                            this.enableRoles = false;
+                        },
+                    },
+                    "Reset roles",
+                ),
+                h(VelFormRole, { form }),
+                h("hr", { class: "my-5 hr-muted" }),
+            ]);
+        }
+
+        return h("div", [
+            h(
+                VelButton,
+                {
+                    onClick: () => {
+                        this.enableRoles = true;
+                    },
+                },
+                () => [
+                    h(resolveComponent("GIcon"), {
+                        name: "icon-plus",
+                        embed: true,
+                        asis: true,
+                        class: "fill-0 icon--0.5 mr",
+                    }),
+                    "Override roles",
+                ],
+            ),
+            h("p", { class: "mt-2" }, [
+                "Roles will be inherited from the company level.",
+            ]),
+            h("hr", { class: "my-5 hr-muted" }),
+        ]);
+    },
+};
+
+export default [
+    {
+        key: "name",
+        sortable: true,
+        condition: {
+            form: {
+                write: ({ method }) => method === "post",
+            },
+        },
+    },
+    {
+        key: "email",
+        condition: {
+            form: {
+                write: ({ method }) => method === "post",
+            },
+        },
+        render: {
+            write: ({ form }) => h(EmailField, { form }),
+        },
+        initial: ({ model }) => model?.email ?? null,
+    },
+    {
+        key: "company",
+        sortable: true,
+        condition: {
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                !model.company
+                    ? h("span", "")
+                    : model.company.deleted_at
+                      ? h(
+                            "span",
+                            { class: "vel-basic__error" },
+                            model.company.name,
+                        )
+                      : h(resolveComponent("router-link"), {
+                            class: "underline",
+                            to: {
+                                name: "companies.show",
+                                params: {
+                                    [meta(...companyResource).id]:
+                                        model.company_id,
+                                },
+                            },
+                            text: model.company.name,
+                        }),
+        },
+    },
+    {
+        key: "email_verified_at",
+        label: "Email Verified",
+        condition: {
+            table: false,
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                h(
+                    "span",
+                    {},
+                    model.email_verified_at
+                        ? new Date(model.email_verified_at).toLocaleString()
+                        : "Not verified",
+                ),
+        },
+    },
+    {
+        key: "verified",
+        label: "Verified",
+        condition: {
+            description: false,
+            form: false,
+        },
+        render: {
+            read: ({ model }) =>
+                h(
+                    "span",
+                    {
+                        title: model.email_verified_at
+                            ? `Verified: ${new Date(model.email_verified_at).toLocaleString()}`
+                            : "Not verified",
+                        style: {
+                            color: model.email_verified_at ? "green" : "red",
+                            fontSize: "18px",
+                        },
+                    },
+                    model.email_verified_at ? "✓" : "✗",
+                ),
+        },
+    },
+    {
+        key: "roles",
+        label: "Role",
+        condition: {
+            description: false,
+            form: {
+                write: ({ $store }) => $store.getters.can("edit roles"),
+            },
+        },
+        initial: ({ model }) =>
+            model?.overrides_roles_and_permissions
+                ? model?.roles.map((val) => ({
+                      label: val.label,
+                      value: 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(RolesField, { form }),
+        },
+    },
+];