@fishawack/lab-velocity 2.0.0-beta.3 → 2.0.0-beta.30

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

@@ -0,0 +1,308 @@
+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";
+
+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",
+                    class: "hidden",
+                    render: {
+                        read: ({ model }) => h("span", model.company.name),
+                    },
+                    initial: ({ $route, model }) =>
+                        model?.company_id || $route.params.companiesId || null,
+                },
+                {
+                    key: "roles",
+                    initial: ({ model }) =>
+                        model?.roles.map((val) => val.id) || [],
+                    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: {
+                    layout: [
+                        ...defaultResource.show.layout,
+                        ({ 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/{adminRoutes/PUsers/Children/partials → routes/PUsers}/form.vue

@@ -2,7 +2,7 @@
 <template>
     <form class="" @submit.prevent="submit">
         <template v-if="method !== 'patch'">
-            <el-basic
+            <VelBasic
                 v-model="form.name"
                 name="name"
                 :error="form.errors"
@@ -11,7 +11,7 @@
                 label="Name"
             />
 
-            <el-basic
+            <VelBasic
                 v-model="form.email"
                 placeholder="Email"
                 label="Email"
@@ -24,26 +24,26 @@
 
             <hr class="my-3 hr-muted" />
 
-            <el-checkbox
+            <VelCheckbox
                 v-model="form.notify_user"
                 name="notify_user"
                 :error="form.errors"
                 label="Send email to notify user of account and password"
             />
-            <el-checkbox
+            <VelCheckbox
                 v-model="form.force_password_change"
                 name="force_password_change"
                 :error="form.errors"
                 label="Force password change on first login"
             />
-            <el-checkbox
+            <VelCheckbox
                 v-model="form.set_password"
                 name="set_password"
                 :error="form.errors"
                 label="Auto generate password"
             />
             <template v-if="!form.set_password">
-                <el-basic
+                <VelBasic
                     v-model="form.password"
                     name="password"
                     :error="form.errors"
@@ -51,7 +51,7 @@
                     placeholder="Password"
                     label="Password"
                 />
-                <el-basic
+                <VelBasic
                     v-model="form.password_confirmation"
                     name="password_confirmation"
                     :error="form.errors"
@@ -66,22 +66,26 @@
 
         <template v-if="$store.getters.can('edit roles')">
             <template v-if="enableRoles">
-                <el-button
-                    type="secondary"
+                <VelButton
                     @click="
                         form.roles = [];
                         enableRoles = false;
                     "
                 >
                     Reset roles
-                </el-button>
-                <FormRole :form="form" />
+                </VelButton>
+                <VelFormRole :form="form" />
             </template>
             <template v-else>
-                <el-button @click="enableRoles = true">
-                    <GIcon name="icon-plus" embed asis class="fill-0 mr" />
+                <VelButton @click="enableRoles = true">
+                    <GIcon
+                        name="icon-plus"
+                        embed
+                        asis
+                        class="fill-0 icon--0.5 mr"
+                    />
                     Override roles
-                </el-button>
+                </VelButton>
                 <p class="mt-2">
                     Roles will be inherited from the company level.
                 </p>
@@ -89,18 +93,26 @@
             <hr class="my-5 hr-muted" />
         </template>
 
-        <VFormFooter :loading="form.processing" />
+        <VelFormFooter :loading="form.processing" />
     </form>
 </template>
 
 <script>
 import axios from "axios";
 import { debounce } from "lodash";
+import VelButton from "../../../../components/basic/Button.vue";
+import VelCheckbox from "../../../../components/form/Checkbox.vue";
+import VelBasic from "../../../../components/form/basic.vue";
+import VelFormRole from "../../../../components/layout/FormRole.vue";
+import VelFormFooter from "../../../../components/layout/FormFooter.vue";
 
 export default {
     components: {
-        VFormFooter: require("../../../../components/VFormFooter.vue").default,
-        FormRole: require("../../../../components/FormRole.vue").default,
+        VelFormFooter,
+        VelFormRole,
+        VelCheckbox,
+        VelButton,
+        VelBasic,
     },
     props: {
         form: {
@@ -112,8 +124,8 @@ export default {
             type: Function,
         },
         method: {
-            required: true,
             type: String,
+            default: "post",
         },
     },
 

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

@@ -0,0 +1,215 @@
+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 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";
+
+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",
+    {
+        api: {
+            params: {
+                index: () => ({ include: "company" }),
+                show: () => ({ include: "company" }),
+            },
+        },
+        searchable: {
+            value: "email",
+        },
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write users"),
+            edit: ({ $store }) => $store.getters.can("write users"),
+            delete: ({ $store }) => $store.getters.can("delete companies"),
+        },
+        form: {
+            async submit({ model, form, $router, $store, method, resource }) {
+                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: { [resource.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: { [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");
+                        }
+
+                        $router.replace({
+                            name: "users.show",
+                            params: { [resource.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: [
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "email",
+                },
+                {
+                    key: "company",
+                    sortable: true,
+                    render: ({ model }) =>
+                        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 },
+                        ),
+                },
+            ],
+        },
+        description: {
+            structure: [
+                {
+                    key: "email",
+                },
+                {
+                    key: "company",
+                    render: ({ model }) =>
+                        h(resolveComponent("router-link"), {
+                            class: "underline",
+                            to: {
+                                name: "companies.show",
+                                params: {
+                                    [meta(...companyResource).id]:
+                                        model.company_id,
+                                },
+                            },
+                            text: model.company.name,
+                        }),
+                },
+            ],
+        },
+        index: {
+            layout: [
+                ...defaultResource.index.layout,
+                () =>
+                    h(VelRoleLegend, {
+                        class: "mt-5",
+                    }),
+            ],
+        },
+        show: {
+            layout: [
+                ...defaultResource.show.layout,
+                ({ model }) => ({
+                    label: "Access control",
+                    component: h(VelFormRole, {
+                        overrides: model.overrides_roles_and_permissions,
+                        form: { roles: model.roles.map((d) => d.id) },
+                        readonly: true,
+                    }),
+                }),
+            ],
+        },
+    },
+];

package/_Build/vue/modules/AuthModule/routes/account-exists.vue

@@ -3,10 +3,10 @@
         <section id="resetPasswordForm">
             <h1 class="h2">Account already exists</h1>
 
-            <p class="mt AM-mb-0 color-21">
+            <p class="mt mb-0 color-21">
                 <strong class="">Company: {{ $route.query.company }}</strong>
             </p>
-            <p class="AM-mt-0.5">Your company already has an active account.</p>
+            <p class="mt-0.5">Your company already has an active account.</p>
 
             <elButton
                 tag="router-link"