@fishawack/lab-velocity 2.0.0-beta.11 → 2.0.0-beta.13

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

@@ -0,0 +1,214 @@
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import Chip from "../../../../components/layout/Chip.vue";
+import Chips from "../../../../components/layout/Chips.vue";
+import VelTableSorter from "../../../../components/layout/TableSorter.vue";
+import VelRoleLegend from "../../../../components/layout/RoleLegend.vue";
+import component from "./form.vue";
+
+import { ElMessageBox } from "element-plus";
+import { ElNotification } from "element-plus";
+import { h, resolveComponent } from "vue";
+
+function generatePassword(
+    length = 20,
+    characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$",
+) {
+    return (
+        Array.from(crypto.getRandomValues(new Uint32Array(length)))
+            .map((x) => characters[x % characters.length])
+            .join("") + Math.floor(Math.random() * 10)
+    );
+}
+
+export default [
+    "users",
+    {
+        defaults: "include=company",
+        searchable: {
+            value: "email",
+        },
+        form: {
+            async submit({ model, form, $router, $store, method }) {
+                try {
+                    if (method === "post") {
+                        if (form.set_password) {
+                            const password = generatePassword();
+                            form.password = password;
+                            form.password_confirmation = password;
+                        }
+
+                        let res = await form.post(`/api/users`);
+
+                        if (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: { id: res.data.id },
+                                    });
+                                })
+                                .catch(() => {});
+                        } else {
+                            ElNotification({
+                                title: "Success",
+                                message:
+                                    "User created a notified of their new account",
+                                type: "success",
+                            });
+
+                            $router.replace({
+                                name: "users.show",
+                                params: { 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");
+                        }
+
+                        $router.replace({
+                            name: "users.show",
+                            params: { id: res.data.id },
+                        });
+                    }
+                } catch (e) {
+                    console.log(e);
+                }
+            },
+            component,
+            fields: ({ model, method }) => ({
+                ...{
+                    name: model?.name ?? null,
+                    email: model?.email ?? null,
+                    roles: model?.overrides_roles_and_permissions
+                        ? model?.roles.map((val) => {
+                              return 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,
+                      }
+                    : {}),
+            }),
+        },
+        table: {
+            structure: [
+                {
+                    label: "Name",
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    label: "Email",
+                    key: "email",
+                    sortable: true,
+                },
+                {
+                    label: "Company",
+                    sortable: true,
+                    render: (model) =>
+                        h(resolveComponent("router-link"), {
+                            class: "underline",
+                            to: {
+                                name: "companies.show",
+                                params: { id: model.company_id },
+                            },
+                            text: model.company.name,
+                        }),
+                },
+                {
+                    label: "Role",
+                    render: (row) =>
+                        h(
+                            !row.overrides_roles_and_permissions ||
+                                row.roles.length === 1
+                                ? Chip
+                                : Chips,
+                            !row.overrides_roles_and_permissions
+                                ? {
+                                      name: "inherited",
+                                      label: "Inherited",
+                                  }
+                                : row.roles.length === 1
+                                  ? {
+                                        name: row.roles[0].name,
+                                        label: row.roles[0].label,
+                                    }
+                                  : { array: row.roles },
+                        ),
+                },
+            ],
+        },
+        index: {
+            structure: [
+                {
+                    render: ({ resource, $store }) =>
+                        h(VelTableSorter, {
+                            key: "PIndex",
+                            "json-data": {
+                                ...resource,
+                                tableStructure: resource.table.structure,
+                            },
+                            defaults: resource.defaults,
+                            "fixed-height": false,
+                            "display-edit-action":
+                                $store.getters.can("write users"),
+                        }),
+                },
+                {
+                    render: () =>
+                        h(VelRoleLegend, {
+                            class: "mt-5",
+                        }),
+                },
+            ],
+        },
+        show: {
+            structure: [
+                [
+                    {
+                        label: "Email",
+                        key: "email",
+                    },
+                    {
+                        label: "Company",
+                        render: ({ model }) =>
+                            h(resolveComponent("router-link"), {
+                                class: "underline",
+                                to: {
+                                    name: "companies.show",
+                                    params: { id: model.company_id },
+                                },
+                                text: model.company.name,
+                            }),
+                    },
+                ],
+                {
+                    render: ({ model }) =>
+                        h(VelFormRole, {
+                            overrides: model.overrides_roles_and_permissions,
+                            form: { roles: model.roles.map((d) => d.id) },
+                            readonly: true,
+                        }),
+                },
+            ],
+        },
+    },
+];

package/_Build/vue/modules/AuthModule/routes/change-password.vue

@@ -36,7 +36,7 @@
                         :password="true"
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -83,6 +83,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -152,12 +160,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/container.vue

@@ -5,7 +5,7 @@
                 <router-link to="/" class="logo" aria-label="Go to home page">
                     <GSvg
                         class="AuthModule__logo"
-                        :name="logoName"
+                        :name="$store.state.auth.logo"
                         embed
                         asis
                         role="presentation"
@@ -21,14 +21,5 @@
 </template>
 
 <script>
-export default {
-    mounted() {},
-    data() {
-        return {
-            logoName: process.env.HYDRATE_LOGO,
-        };
-    },
-
-    components: {},
-};
+export default {};
 </script>

package/_Build/vue/modules/AuthModule/routes/force-reset.vue

@@ -33,7 +33,7 @@
                         required
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -71,6 +71,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -136,12 +144,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/register.vue

@@ -42,7 +42,7 @@
             :error="form.errors"
         />
 
-        <VPasswordValidation
+        <VelPasswordValidation
             :password="form.password"
             @passwordValid="updatePasswordValidity"
         />
@@ -86,6 +86,14 @@ import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -160,12 +168,5 @@ export default {
             this.isPasswordValid = isValid;
         },
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -23,7 +23,7 @@
                         required
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -68,6 +68,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -122,12 +130,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

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

@@ -0,0 +1,76 @@
+<template>
+    <VBreadcrumbs :items="breadcrumbs" class="mb-8" container-classes="m-0" />
+
+    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+        <div class="grid__1/1">
+            <div class="grid__1/1 mb-4">
+                <h2 class="h1">Create {{ resource.singular }}</h2>
+            </div>
+            <div class="mt grid__1/2">
+                <component
+                    :is="resource.form.component ?? 'XForm'"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    :method="method"
+                    :resource="resource"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            method: "post",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(this.resource.form.fields(this), {
+            resetOnSuccess: false,
+        });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                try {
+                    let res = await this.form.post(`${this.resource.api}`);
+
+                    this.$router.replace({
+                        name: `${this.resource.name}.show`,
+                        params: { id: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+    <VBreadcrumbs
+        :items="addBreadcrumbs"
+        class="mb-8"
+        container-classes="m-0"
+    />
+
+    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+        <div class="grid__1/1">
+            <div class="grid__1/1 mb-4">
+                <h2 class="h1">Edit {{ resource.singular }}</h2>
+            </div>
+            <div class="grid__1/2">
+                <component
+                    :is="resource.form.component ?? 'XForm'"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    :method="method"
+                    :resource="resource"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            model: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+            method: "patch",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(this.resource.form.fields(this), {
+            resetOnSuccess: false,
+        });
+    },
+
+    async mounted() {
+        window.axios
+            .get(
+                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+            )
+            .then((res) => {
+                this.model = res.data.data;
+
+                // Set initial form data
+                Object.entries(this.resource.form.fields(this)).forEach(
+                    ([key, value]) => {
+                        this.form[key] = value;
+                    },
+                );
+
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: `${this.resource.name}.show`,
+                        param: this.model.id,
+                    },
+                    text: this.model.name,
+                });
+            });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                try {
+                    let res = await this.form.patch(
+                        `${this.resource.api}/${this.model.id}`,
+                    );
+
+                    this.$router.replace({
+                        name: `${this.resource.name}.show`,
+                        params: { id: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+    <VBreadcrumbs :items="breadcrumbs" />
+
+    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+        <div class="grid__1/1">
+            <h2 class="h1 pb-4">
+                {{ breadcrumbs[breadcrumbs.length - 1].text }}
+            </h2>
+
+            <div class="flex gap items-center justify-end">
+                <template
+                    v-for="(row, index) in resource.index.actions"
+                    :key="index"
+                >
+                    <template v-if="row.render">
+                        <component :is="row.render(this)" />
+                    </template>
+                </template>
+            </div>
+
+            <template
+                v-for="(row, index) in resource.index.structure"
+                :key="index"
+            >
+                <template v-if="row.render">
+                    <component :is="row.render(this)" />
+                </template>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,53 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form @submit.prevent="submit">
+        <template v-for="(item, index) in resource.form.structure" :key="index">
+            <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.key[0].toUpperCase() + item.key.slice(1)
+                "
+                :label="
+                    item.label || item.key[0].toUpperCase() + item.key.slice(1)
+                "
+                v-bind="item"
+            />
+        </template>
+
+        <VelFormFooter :loading="form.processing" />
+    </form>
+</template>
+
+<script>
+export default {
+    components: {
+        VelFormFooter: require("../../../../components/layout/FormFooter.vue")
+            .default,
+        VelBasic: require("../../../../components/form/basic.vue").default,
+    },
+
+    props: {
+        form: {
+            required: true,
+            type: Object,
+        },
+        submit: {
+            required: true,
+            type: Function,
+        },
+        method: {
+            type: String,
+            default: "post",
+        },
+        resource: {
+            required: true,
+            type: Object,
+        },
+    },
+};
+</script>