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

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/partials/form.vue

@@ -0,0 +1,181 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form class="" @submit.prevent="submit">
+        <VelBasic
+            v-model="form.name"
+            name="name"
+            :error="form.errors"
+            type="text"
+            placeholder="Name"
+            label="Company name"
+        >
+            <template #label>
+                Company name <sup class="color-status-red-100">*</sup>
+            </template>
+        </VelBasic>
+
+        <VelSelect
+            v-if="method === 'patch'"
+            v-model="form.primary_contact"
+            name="primary_contact"
+            :error="form.errors"
+            placeholder="Primary Contact"
+            label="Primary Contact"
+            :options="
+                users?.map(({ name, id }) => ({
+                    label: name,
+                    value: id,
+                }))
+            "
+        />
+
+        <hr class="my-3 hr-muted" />
+
+        <p class="my-0">Domain/s <sup class="color-status-red-100">*</sup></p>
+
+        <ul class="list-none pl-0 mt mb-2">
+            <li
+                v-for="(path, index) in form.domains"
+                :key="index"
+                class="mb-0.5"
+            >
+                <el-input
+                    v-model="form.domains[index]"
+                    placeholder="avalerehealth.com"
+                >
+                    <template #prepend>@</template>
+                    <template #append>
+                        <VelButton
+                            type="danger"
+                            @click="form.domains.splice(index, 1)"
+                        >
+                            <GSvg class="vel-icon" name="trash" />
+                        </VelButton>
+                    </template>
+                </el-input>
+
+                <small
+                    v-if="form.errors && form.errors.has(`domains.${index}`)"
+                    class="form__error vel-basic__error"
+                    v-text="form.errors.first(`domains.${index}`)"
+                ></small>
+            </li>
+        </ul>
+
+        <div>
+            <VelButton @click="form.domains.push('')">
+                Add Domain
+
+                <GIcon name="icon-plus" embed asis class="fill-0 ml" />
+            </VelButton>
+        </div>
+
+        <hr class="my-5 hr-muted" />
+
+        <template v-if="$store.getters.can('edit roles')">
+            <FormRole :form="form" />
+
+            <hr class="my-5 hr-muted" />
+        </template>
+
+        <template v-if="$store.getters.can('edit sso')">
+            <h3 class="h3 mb-2">SSO Settings</h3>
+
+            <VelSelect
+                v-model="form.sso_type"
+                name="sso_type"
+                :error="form.errors"
+                placeholder="Please Select"
+                label="Provider"
+                clearable
+                :options="[
+                    {
+                        value: 'azure',
+                        label: 'azure',
+                    },
+                    {
+                        value: 'google',
+                        label: 'google',
+                    },
+                ]"
+            />
+            <VelBasic
+                v-model="form.sso_client_id"
+                name="sso_client_id"
+                :error="form.errors"
+                type="text"
+                placeholder="Key"
+                label="Key"
+            />
+            <VelBasic
+                v-model="form.sso_tenant"
+                name="sso_tenant"
+                :error="form.errors"
+                type="text"
+                placeholder="Tenant"
+                label="Tenant"
+            />
+            <VelBasic
+                v-model="form.sso_client_secret"
+                name="sso_client_secret"
+                :error="form.errors"
+                type="password"
+                placeholder="Secret"
+                label="Secret"
+            />
+
+            <hr class="my-3 hr-muted" />
+        </template>
+
+        <VFormFooter :form="form" />
+    </form>
+</template>
+
+<!-- eslint-disable vue/no-mutating-props -->
+<script>
+import axios from "axios";
+import VelButton from "../../../../../../components/basic/Button.vue";
+import VelSelect from "../../../../../../components/form/Select.vue";
+import VelBasic from "../../../../../../components/form/basic.vue";
+import { ElInput } from "element-plus";
+
+export default {
+    components: {
+        VFormFooter: require("../../../../components/VFormFooter.vue").default,
+        FormRole: require("../../../../components/FormRole.vue").default,
+        VelButton,
+        VelSelect,
+        VelBasic,
+        ElInput,
+    },
+
+    props: {
+        form: {
+            required: true,
+            type: Object,
+        },
+        submit: {
+            required: true,
+            type: Function,
+        },
+        method: {
+            type: String,
+            default: "post",
+        },
+    },
+
+    data() {
+        return {
+            users: [],
+        };
+    },
+
+    mounted() {
+        axios
+            .getAll(`/api/users?filter[company_id]=${this.$route.params.id}`)
+            .then((res) => {
+                this.users = res.data.data;
+            });
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/show.vue

@@ -0,0 +1,267 @@
+<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">
+            <template v-if="company">
+                <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                    <VPageHeader icon="icon-business" :title="company.name">
+                        <!--
+                        Temporarily disabled
+                        <el-button tag="a" type="secondary" :href="`/companies/${company.id}/upload`">
+                            <GIcon class="fill-1 mr-0.5" name="icon-plus" embed artboard /> Import users
+                        </el-button>
+                        <el-button tag="a" type="secondary" :href="`/api/companies/${company.id}/export`">
+                            <GIcon class="fill-1 mr-0.5" name="icon-download" embed artboard /> Export users
+                        </el-button>
+                        Temporarily disabled
+                        -->
+
+                        <VelButton
+                            v-if="company.primary_contact"
+                            type="primary"
+                            @click="sendWelcome"
+                        >
+                            Send welcome email
+                        </VelButton>
+
+                        <VelButton
+                            v-if="$store.getters.can('write companies')"
+                            tag="a"
+                            type="primary"
+                            @click="
+                                $router.push({
+                                    name: 'companies.edit',
+                                    param: company.id,
+                                })
+                            "
+                        >
+                            <GIcon
+                                class="fill-0 mr-0.5"
+                                name="icon-edit"
+                                embed
+                                artboard
+                            />
+                            Edit company
+                        </VelButton>
+                    </VPageHeader>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td class="p">Domains</td>
+                                <td class="p">
+                                    {{ company.domains.join(", ") }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="p">SSO Enabled</td>
+                                <td class="p">
+                                    {{ company.sso_enabled }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="p">Primary Contact</td>
+                                <td class="p">
+                                    {{ company.primary_contact?.name }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="p">Primary Contact Email</td>
+                                <td class="p">
+                                    {{ company.primary_contact?.email }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="p">Primary Contact Contacted</td>
+                                <td class="p">
+                                    {{ !!company.primary_contact_contacted }}
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="p">Total users</td>
+                                <td class="p">
+                                    {{ company.user_count }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <FormRole
+                        :form="{ roles: company.roles.map((d) => d.id) }"
+                        :readonly="true"
+                    />
+                </div>
+
+                <VTableSorter
+                    key="PShow"
+                    api="users"
+                    :json-data="jsonData"
+                    :defaults="`filter[company_id]=${id}`"
+                    :fixed-height="false"
+                >
+                    <template #table-action>
+                        <VelButton
+                            type="primary"
+                            tag="a"
+                            class="ml-2"
+                            @click="
+                                $router.push({
+                                    name: `${jsonData.pageLink}.create`,
+                                    query: { company_id: id },
+                                })
+                            "
+                        >
+                            <GIcon
+                                name="icon-plus"
+                                embed
+                                asis
+                                class="fill-0 mr-0.5"
+                            />
+                            Create new {{ jsonData.label }}
+                        </VelButton>
+                    </template>
+                </VTableSorter>
+            </template>
+
+            <div v-else class="absolute transform-center text-center">
+                <VelSpinner class="fill-5" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import VelButton from "../../../../../components/basic/Button.vue";
+import VelSpinner from "../../../../../components/form/Spinner.vue";
+import { ElNotification } from "element-plus";
+
+export default {
+    name: "PShow",
+
+    components: {
+        VBreadcrumbs: require("../../../components/VBreadcrumbs.vue").default,
+        VTableSorter: require("../../../components/VTableSorter.vue").default,
+        VPageHeader: require("../../../components/VPageHeader.vue").default,
+        FormRole: require("../../../components/FormRole.vue").default,
+        VelSpinner,
+        VelButton,
+    },
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            processing: false,
+            company: null,
+            id: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+            jsonData: {
+                label: "user",
+                multiLabel: "users",
+                pageLink: "users",
+                api: "/api/users",
+                searchable: {
+                    label: "Search users",
+                    value: "name",
+                },
+                tableStructure: [
+                    {
+                        label: "Name",
+                        key: "name",
+                        sortable: true,
+                    },
+                    {
+                        label: "Email",
+                        key: "email",
+                        sortable: true,
+                    },
+                    {
+                        label: "Role",
+                        component: {
+                            module: (row) => {
+                                if (
+                                    !row.overrides_roles_and_permissions ||
+                                    row.roles.length === 1
+                                )
+                                    return require("../../../components/Chip.vue")
+                                        .default;
+
+                                return require("../../../components/Chips.vue")
+                                    .default;
+                            },
+                            props: (row) => {
+                                if (!row.overrides_roles_and_permissions)
+                                    return {
+                                        name: "inherited",
+                                        label: "Inherited",
+                                    };
+
+                                return row.roles.length === 1
+                                    ? {
+                                          name: row.roles[0].name,
+                                          label: row.roles[0].label,
+                                      }
+                                    : { array: row.roles };
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+
+    mounted() {
+        this.id = this.$route.params.id;
+
+        axios
+            .get(`/api/companies/${this.id}?include=primary_contact`)
+            .then((res) => {
+                this.company = res.data.data;
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: "companies.show",
+                        param: this.company.id,
+                    },
+                    text: this.company.name,
+                });
+            });
+    },
+
+    methods: {
+        async sendWelcome() {
+            try {
+                const res = await axios.post(
+                    `/api/companies/${this.id}/welcome`,
+                );
+                ElNotification({
+                    title: "Success",
+                    message: res.data.message,
+                    type: "success",
+                });
+
+                this.company.primary_contact_contacted = true;
+            } catch (e) {
+                ElNotification({
+                    title: "Warning",
+                    message: e.response?.data?.message || e.message,
+                    type: "warning",
+                });
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/parent.vue

@@ -0,0 +1,36 @@
+<template>
+    <PageTitle title="Companies" />
+
+    <router-view :key="$route.path" :breadcrumbs="breadcrumbs" />
+</template>
+
+<script>
+import PageTitle from "../../../../components/layout/pageTitle.vue";
+
+export default {
+    name: "PCompanies",
+
+    components: {
+        PageTitle,
+    },
+
+    data() {
+        return {
+            breadcrumbs: [
+                {
+                    href: {
+                        name: "index",
+                    },
+                    text: "Home",
+                },
+                {
+                    href: {
+                        name: "companies.index",
+                    },
+                    text: "Companies",
+                },
+            ],
+        };
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/create.vue

@@ -0,0 +1,113 @@
+<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 User</h2>
+            </div>
+            <div class="grid__1/2">
+                <XForm ref="form" :form="form" :submit="submit" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ElMessageBox } from "element-plus";
+import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+
+export default {
+    name: "PCreate",
+
+    components: {
+        VBreadcrumbs: require("../../../components/VBreadcrumbs.vue").default,
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: new Form(
+                {
+                    name: null,
+                    email: null,
+                    roles: [],
+                    notify_user: true,
+                    company_id: null,
+                    force_password_change: true,
+                    set_password: true,
+                    password: null,
+                    password_confirmation: null,
+                },
+                {
+                    resetOnSuccess: false,
+                },
+            ),
+        };
+    },
+
+    methods: {
+        generatePassword(
+            length = 20,
+            characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$",
+        ) {
+            return Array.from(crypto.getRandomValues(new Uint32Array(length)))
+                .map((x) => characters[x % characters.length])
+                .join("");
+        },
+        async submit() {
+            try {
+                if (this.form.set_password) {
+                    const password = this.generatePassword();
+                    this.form.password = password;
+                    this.form.password_confirmation = password;
+                }
+
+                let res = await this.form.post(`/api/users`);
+
+                if (!this.form.set_password) {
+                    this.open(res.data.id);
+                } else {
+                    ElNotification({
+                        title: "Success",
+                        message: "User created a notified of their new account",
+                        type: "success",
+                    });
+
+                    this.$router.replace({
+                        name: "users.show",
+                        params: { id: res.data.id },
+                    });
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        open(id) {
+            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>: ${this.form.email}<br> <strong>Password</strong>: ${this.form.password}</p>`,
+                "User Created",
+                {
+                    confirmButtonText: "Ok",
+                    dangerouslyUseHTMLString: true,
+                },
+            )
+                .then(() => {
+                    this.$router.replace({
+                        name: "users.show",
+                        params: { id },
+                    });
+                })
+                .catch(() => {});
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/edit.vue

@@ -0,0 +1,101 @@
+<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 User</h2>
+            </div>
+            <div class="grid__1/2">
+                <XForm
+                    :id="id"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    method="patch"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    name: "PEdit",
+
+    components: {
+        VBreadcrumbs: require("../../../components/VBreadcrumbs.vue").default,
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            id: null,
+            form: new Form({
+                name: null,
+                email: null,
+                company_id: null,
+                roles: [],
+            }),
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+        };
+    },
+
+    async mounted() {
+        this.id = this.$route.params.id;
+        window.axios
+            .get(`/api/users/${this.id}?include=company`)
+            .then((res) => {
+                const user = res.data.data;
+                this.form.name = user.name;
+                this.form.email = user.email;
+                this.form.company_id = user.company_id;
+                this.form.roles = user.overrides_roles_and_permissions
+                    ? user.roles.map((val) => {
+                          return val.id;
+                      })
+                    : [];
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: "users.show",
+                        param: this.id,
+                    },
+                    text: user.name,
+                });
+            });
+    },
+
+    methods: {
+        async submit() {
+            try {
+                let res = await this.form.patch(`/api/users/${this.id}`);
+
+                // if changing ourselves, re-fetch user data
+                if (res.data.id === this.$store.state.auth.user.id) {
+                    await this.$store.dispatch("getUser");
+                }
+
+                this.$router.replace({
+                    name: "users.show",
+                    params: { id: res.data.id },
+                });
+            } catch (e) {
+                console.log(e);
+            }
+        },
+    },
+};
+</script>