@fishawack/lab-velocity 2.0.0-beta.40 → 2.0.0-beta.42

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 }),
+        },
+    },
+];