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

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

@@ -1,16 +1,14 @@
+import { merge } from "lodash";
+import { h } from "vue";
+import axios from "axios";
+import { ElMessageBox, ElNotification } from "element-plus";
+
+import { columns, defaultResource } from "../../../resource/index.js";
+import usersColumns, { detectedCompany } from "./columns.js";
+
 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 VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
-import component from "./form.vue";
-import companyResource from "../PCompanies/resource.js";
-import { defaultResource, meta } from "../../../resource/index.js";
-
-import { ElMessageBox } from "element-plus";
-import { ElNotification } from "element-plus";
-import { h, resolveComponent } from "vue";
-import axios from "axios";
 
 function generatePassword(
     length = 20,
@@ -38,285 +36,167 @@ export default [
         searchable: {
             value: "email",
         },
+        auditable: true,
         permissions: {
             create: ({ $store }) => $store.getters.can("write users"),
             edit: ({ $store }) => $store.getters.can("write users"),
             delete: ({ $store }) => $store.getters.can("delete users"),
         },
-        form: {
-            async submit(props) {
-                const { model, form, $router, $store, method, resource } =
-                    props;
+        ...merge(columns(usersColumns), {
+            form: {
+                fields: ({ model, method }) => ({
+                    ...columns(usersColumns).form.fields({ model }),
+                    ...(method === "post"
+                        ? {
+                              notify_user: true,
+                              force_password_change: true,
+                              set_password: true,
+                              password: null,
+                              password_confirmation: null,
+                          }
+                        : {}),
+                }),
+                async submit(props) {
+                    const { model, form, $router, $store, method, resource } =
+                        props;
 
-                const hold = form.data();
+                    const hold = form.data();
 
-                try {
-                    form.populate(resource.form.preparation(props));
+                    try {
+                        form.populate(resource.form.preparation(props));
 
-                    if (method === "post") {
-                        const isSSOCompany = props.$refs?.form?.isSSOCompany;
+                        if (method === "post") {
+                            const isSSOCompany =
+                                !!detectedCompany.value?.sso_enabled;
 
-                        if (!isSSOCompany && form.set_password) {
-                            const password = generatePassword();
-                            form.password = password;
-                            form.password_confirmation = password;
-                        }
+                            if (!isSSOCompany && form.set_password) {
+                                const password = generatePassword();
+                                form.password = password;
+                                form.password_confirmation = password;
+                            }
 
-                        let res = await form.post(`/api/users`);
+                            let res = await form.post(`/api/users`);
 
-                        if (
-                            !isSSOCompany &&
-                            form.set_password &&
-                            !form.notify_user
-                        ) {
-                            ElMessageBox.alert(
-                                `<p>The password below will not be shown again. Ensure you've taken a copy if you plan to send manually. <br><br><strong>Email</strong>: ${form.email}<br> <strong>Password</strong>: ${form.password}</p>`,
-                                "User Created",
-                                {
-                                    confirmButtonText: "Ok",
-                                    dangerouslyUseHTMLString: true,
-                                },
-                            )
-                                .then(() => {
-                                    $router.replace({
-                                        name: "users.show",
-                                        params: { [resource.id]: res.data.id },
-                                    });
-                                })
-                                .catch(() => {});
+                            if (
+                                !isSSOCompany &&
+                                form.set_password &&
+                                !form.notify_user
+                            ) {
+                                ElMessageBox.alert(
+                                    `<p>The password below will not be shown again. Ensure you've taken a copy if you plan to send manually. <br><br><strong>Email</strong>: ${form.email}<br> <strong>Password</strong>: ${form.password}</p>`,
+                                    "User Created",
+                                    {
+                                        confirmButtonText: "Ok",
+                                        dangerouslyUseHTMLString: true,
+                                    },
+                                )
+                                    .then(() => {
+                                        $router.replace({
+                                            name: "users.show",
+                                            params: {
+                                                [resource.id]: res.data.id,
+                                            },
+                                        });
+                                    })
+                                    .catch(() => {});
+                            } else {
+                                ElNotification({
+                                    title: "Success",
+                                    message: isSSOCompany
+                                        ? "SSO user pre-provisioned successfully"
+                                        : "User created a notified of their new account",
+                                    type: "success",
+                                });
+
+                                $router.replace({
+                                    name: "users.show",
+                                    params: {
+                                        [resource.id]: res.data.id,
+                                    },
+                                });
+                            }
                         } else {
-                            ElNotification({
-                                title: "Success",
-                                message: isSSOCompany
-                                    ? "SSO user pre-provisioned successfully"
-                                    : "User created a notified of their new account",
-                                type: "success",
-                            });
+                            let res = await form.post(`/api/users/${model.id}`);
+
+                            if (res.data.id === $store.state.auth.user.id) {
+                                await $store.dispatch("getUser");
+                            }
 
                             $router.replace({
                                 name: "users.show",
-                                params: { [resource.id]: res.data.id },
+                                params: {
+                                    [resource.id]: res.data.id,
+                                },
                             });
                         }
-                    } else {
-                        let res = await form.patch(`/api/users/${model.id}`);
-
-                        // if changing ourselves, re-fetch user data
-                        if (res.data.id === $store.state.auth.user.id) {
-                            await $store.dispatch("getUser");
+                    } catch (e) {
+                        console.log(e);
+                    } finally {
+                        if (
+                            !form.successful ||
+                            !form.__options.resetOnSuccess
+                        ) {
+                            form.populate(hold);
                         }
-
-                        $router.replace({
-                            name: "users.show",
-                            params: { [resource.id]: res.data.id },
-                        });
                     }
-                } catch (e) {
-                    console.log(e);
-                } finally {
-                    if (!form.successful || !form.__options.resetOnSuccess) {
-                        form.populate(hold);
-                    }
-                }
-            },
-            component,
-            fields: ({ model, method }) => ({
-                ...{
-                    name: model?.name ?? null,
-                    email: model?.email ?? null,
-                    roles: model?.overrides_roles_and_permissions
-                        ? model?.roles.map((val) => ({
-                              label: val.label,
-                              value: val.id,
-                          }))
-                        : [],
-                    company_id: model?.company_id ?? null,
                 },
-                ...(method === "post"
-                    ? {
-                          notify_user: true,
-                          force_password_change: true,
-                          set_password: true,
-                          password: null,
-                          password_confirmation: null,
-                      }
-                    : {}),
-            }),
-            preparation: (props) => {
-                const data = props.form.data();
-                data.roles = data.roles.map((d) => d.value);
-                return data;
             },
-        },
-        table: {
-            structure: () => [
-                {
-                    key: "name",
-                    sortable: true,
-                },
-                {
-                    key: "email",
-                },
-                {
-                    key: "company",
-                    sortable: true,
-                    render: ({ model }) =>
-                        model.company && 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: "role",
-                    render: ({ 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 },
-                        ),
-                },
-                {
-                    key: "verified",
-                    label: "Verified",
-                    render: ({ model }) =>
+            index: {
+                layout: [
+                    ...defaultResource.index.layout,
+                    () =>
+                        h(VelRoleLegend, {
+                            class: "mt-5",
+                        }),
+                ],
+            },
+            show: {
+                actions: [
+                    ({ model, $store, $root }) =>
+                        $store.getters.can("impersonate users") &&
                         h(
-                            "span",
+                            VelButton,
                             {
-                                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 ? "✓" : "✗",
-                        ),
-                },
-            ],
-        },
-        description: {
-            structure: () => [
-                {
-                    key: "email",
-                },
-                {
-                    key: "company",
-                    render: ({ model }) =>
-                        model.company && 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",
-                    render: ({ model }) =>
-                        h(
-                            "span",
-                            {},
-                            model.email_verified_at
-                                ? new Date(
-                                      model.email_verified_at,
-                                  ).toLocaleString()
-                                : "Not verified",
-                        ),
-                },
-            ],
-        },
-        index: {
-            layout: [
-                ...defaultResource.index.layout,
-                () =>
-                    h(VelRoleLegend, {
-                        class: "mt-5",
-                    }),
-            ],
-        },
-        show: {
-            actions: [
-                ({ model, $store, $root }) =>
-                    $store.getters.can("impersonate users") &&
-                    h(
-                        VelButton,
-                        {
-                            type: "danger",
-                            async onClick() {
-                                try {
-                                    const user = (
-                                        await axios.post(
-                                            `/api/users/impersonate`,
-                                            {
-                                                user_id: model.id,
-                                            },
-                                        )
-                                    ).data.data;
+                                type: "danger",
+                                async onClick() {
+                                    try {
+                                        const user = (
+                                            await axios.post(
+                                                `/api/users/impersonate`,
+                                                {
+                                                    user_id: model.id,
+                                                },
+                                            )
+                                        ).data.data;
 
-                                    $store.commit("setUser", user);
+                                        $store.commit("setUser", user);
 
-                                    if (!$store.getters.can("view admin")) {
-                                        window.location = `${$root.spaUrl}?authenticated=1`;
+                                        if (!$store.getters.can("view admin")) {
+                                            window.location = `${$root.spaUrl}?authenticated=1`;
+                                        }
+                                    } catch (e) {
+                                        console.log(e);
                                     }
-                                } catch (e) {
-                                    console.log(e);
-                                }
+                                },
+                            },
+                            "Impersonate",
+                        ),
+                    ...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),
                             },
-                        },
-                        "Impersonate",
-                    ),
-                ...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,
+                            readonly: true,
+                        }),
                     }),
-                }),
-            ],
-        },
+                ],
+            },
+        }),
     },
 ];

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

@@ -4,7 +4,7 @@
             <div class="grid__1/1 mb-4">
                 <h2 class="h1">Create {{ resource.singular }}</h2>
             </div>
-            <div class="mt grid__1/2">
+            <div :class="['mt', resource.form.class]">
                 <component
                     :is="resource.form.component ?? 'XForm'"
                     ref="form"
@@ -51,7 +51,7 @@ export default {
             if (this.resource.form.submit) {
                 await this.resource.form.submit(this);
             } else {
-                const hold = JSON.parse(JSON.stringify(this.form.data()));
+                const hold = { ...this.form.data() };
 
                 try {
                     this.form.populate(this.resource.form.preparation(this));

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

@@ -4,7 +4,7 @@
             <div class="grid__1/1 mb-4">
                 <h2 class="h1">Edit {{ resource.singular }}</h2>
             </div>
-            <div class="grid__1/2">
+            <div :class="resource.form.class">
                 <component
                     :is="resource.form.component ?? 'XForm'"
                     ref="form"
@@ -76,7 +76,7 @@ export default {
             if (this.resource.form.submit) {
                 await this.resource.form.submit(this);
             } else {
-                const hold = JSON.parse(JSON.stringify(this.form.data()));
+                const hold = { ...this.form.data() };
 
                 try {
                     this.form.populate(this.resource.form.preparation(this));

package/_Build/vue/modules/resource/Children/partials/form.vue

@@ -1,27 +1,37 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-    <form @submit.prevent="submit">
-        <template
-            v-for="(item, index) in resource.form.structure(this)"
-            :key="index"
+    <form @submit.prevent="submit" class="vel-resource-form">
+        <component
+            :is="segment.group ? 'fieldset' : 'div'"
+            v-for="(segment, sIndex) in segments"
+            :key="sIndex"
+            :class="{ 'vel-form-group': segment.group }"
         >
-            <component
-                :is="item.render ? item.render(this) : 'VelBasic'"
-                v-model="form[item.key]"
-                :type="item.type || 'text'"
-                :error="form.errors"
-                :name="item.key"
-                :placeholder="
-                    item.placeholder ||
-                    item.label ||
-                    item.key[0].toUpperCase() + item.key.slice(1)
-                "
-                :label="
-                    item.label || item.key[0].toUpperCase() + item.key.slice(1)
-                "
-                v-bind="item"
-            />
-        </template>
+            <legend v-if="segment.group">
+                {{ segment.group.title || formatGroupKey(segment.groupKey) }}
+            </legend>
+            <div :class="segment.group?.class" :style="segment.group?.style">
+                <component
+                    v-for="(item, iIndex) in segment.items"
+                    :key="`${sIndex}-${iIndex}`"
+                    :is="item.render ? item.render(_self) : 'VelBasic'"
+                    v-model="form[item.key]"
+                    :type="item.type || 'text'"
+                    :error="form.errors"
+                    :name="item.key"
+                    :placeholder="
+                        item.placeholder ||
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    :label="
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    v-bind="item"
+                />
+            </div>
+        </component>
 
         <VelFormFooter :loading="form.processing" />
     </form>
@@ -57,5 +67,45 @@ export default {
             default: null,
         },
     },
+
+    computed: {
+        _self() {
+            return this;
+        },
+        segments() {
+            const items = this.resource.form.structure(this);
+            const groups = this.resource.form.groups || {};
+            const segments = [];
+            const groupSegments = {};
+
+            for (const item of items) {
+                if (item.groupKey && groups[item.groupKey]) {
+                    if (groupSegments[item.groupKey]) {
+                        groupSegments[item.groupKey].items.push(item);
+                    } else {
+                        const segment = {
+                            groupKey: item.groupKey,
+                            group: groups[item.groupKey],
+                            items: [item],
+                        };
+                        groupSegments[item.groupKey] = segment;
+                        segments.push(segment);
+                    }
+                } else {
+                    segments.push({ group: null, items: [item] });
+                }
+            }
+
+            return segments;
+        },
+    },
+
+    methods: {
+        formatGroupKey(key) {
+            return key
+                .replace(/[-_]/g, " ")
+                .replace(/\b\w/g, (c) => c.toUpperCase());
+        },
+    },
 };
 </script>

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

@@ -63,9 +63,11 @@
 </template>
 
 <script>
+import { h } from "vue";
 import axios from "axios";
 import VelSpinner from "../../../components/form/Spinner.vue";
 import VelButton from "../../../components/basic/Button.vue";
+import VelAudit from "../../../components/layout/Audit.vue";
 import { ElTabs, ElTabPane } from "element-plus";
 
 export default {
@@ -111,9 +113,27 @@ export default {
 
         // Compute rendered layout once
         renderedTabs() {
-            return this.resource.show.tabs
+            const tabs = this.resource.show.tabs
                 .map((render) => render(this))
                 .filter((d) => d);
+
+            if (this.resource.auditable) {
+                const auditableType =
+                    typeof this.resource.auditable === "string"
+                        ? this.resource.auditable
+                        : this.resource.singular.replace(/ /g, "_");
+
+                tabs.push({
+                    label: "History",
+                    icon: "icon-time",
+                    component: h(VelAudit, {
+                        auditableType,
+                        auditableId: this.model.id,
+                    }),
+                });
+            }
+
+            return tabs;
         },
 
         // Compute rendered actions once
@@ -129,11 +149,13 @@ export default {
             return;
         }
 
+        const showParams = this.resource.api.params.show(this);
+
         axios
             .get(
                 `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.id}`]}`,
                 {
-                    params: this.resource.api.params.show(this),
+                    params: showParams,
                 },
             )
             .then((res) => {