@fishawack/lab-velocity 1.11.1 → 2.0.0-beta.2

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/Upload/upload.vue

@@ -0,0 +1,251 @@
+<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/2">
+            <div class="grid__1/1 grid justify-between mb-4 items-end">
+                <h2 class="h1">User import</h2>
+                <div>
+                    <el-button
+                        tag="a"
+                        type="secondary"
+                        href="/media/content/files/example.csv"
+                        download
+                    >
+                        <GIcon
+                            class="fill-1 mr-0.5"
+                            name="icon-download"
+                            embed
+                            artboard
+                        />
+                        Download example file
+                    </el-button>
+                </div>
+            </div>
+            <div class="grid__1/1">
+                <el-select
+                    v-model="form.roles"
+                    placeholder="Select"
+                    multiple
+                    name="roles"
+                    :error="form.errors"
+                    label="Roles"
+                    :options="[
+                        {
+                            label: 'Administrator',
+                            value: '1',
+                        },
+                        {
+                            label: 'Subscriber',
+                            value: '2',
+                        },
+                    ]"
+                />
+
+                <el-select
+                    v-if="form.roles && form.roles.length"
+                    v-model="form.permissions"
+                    placeholder="Select"
+                    multiple
+                    name="permissions"
+                    :error="form.errors"
+                    label="Permissions"
+                    :options="[
+                        {
+                            label: `Inherit Permissions`,
+                            value: null,
+                        },
+                        //{ // temporarily disabled as not used yet
+                        //    label: &quot;Approve Content&quot;,
+                        //    value: &quot;2&quot;
+                        //},
+                        {
+                            label: 'View content',
+                            value: '3',
+                        },
+                        {
+                            label: 'Write content',
+                            value: '4',
+                            disabled: !form.roles.includes(1),
+                        },
+                        {
+                            label: 'Delete content',
+                            value: '5',
+                            disabled: !form.roles.includes(1),
+                        },
+                    ]"
+                />
+            </div>
+            <div class="grid__1/1">
+                <hr class="my-3 hr-muted" />
+
+                <el-upload
+                    ref="upload"
+                    v-model="form.files"
+                    name="files"
+                    label="Upload spreadsheet"
+                    :auto-upload="false"
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                >
+                    <template #trigger>
+                        <el-button
+                            class="mt"
+                            type="primary"
+                            :disabled="form.processing || form.files.length"
+                            >Select file</el-button
+                        >
+                    </template>
+
+                    <el-button
+                        class="ml relative button--spinner"
+                        type="success"
+                        :disabled="form.processing || !form.files.length"
+                        @click="submitUpload"
+                    >
+                        <span :class="{ active: !form.processing }"
+                            >Upload</span
+                        >
+                        <GSpinner :class="{ active: form.processing }" />
+                    </el-button>
+
+                    <small class="block my color-muted"
+                        >Upload one spreadsheet with a size less than
+                        50MB</small
+                    >
+                </el-upload>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+"use strict";
+
+import Form from "form-backend-validation";
+import { ElMessageBox, genFileId } from "element-plus";
+
+export default {
+    name: "Create",
+
+    components: {
+        VBreadcrumbs: require("../../../../components/VBreadcrumbs.vue")
+            .default,
+    },
+
+    data() {
+        return {
+            id: null,
+            breadcrumbs: [
+                {
+                    href: {
+                        name: "index",
+                    },
+                    text: "Home",
+                },
+            ],
+            form: new Form(
+                {
+                    step: 0,
+                    files: [],
+                    roles: [2],
+                    permissions: [null],
+                    company_id: null,
+                },
+                {
+                    http: window.axios,
+                },
+            ),
+        };
+    },
+
+    watch: {
+        "form.roles": {
+            handler(newVal) {
+                const subscriptions = [
+                    3, // view content
+                    4, // write content
+                    5, // delete content
+                ];
+
+                if (!newVal.includes(1)) {
+                    this.form.permissions = this.form.permissions.filter(
+                        (item) => subscriptions.includes(item),
+                    );
+
+                    if (!newVal.includes(2)) {
+                        this.form.permissions = this.form.permissions.filter(
+                            (item) => !subscriptions.includes(item),
+                        );
+                    }
+                }
+            },
+        },
+    },
+
+    async mounted() {
+        this.id = this.$route.params.id;
+        this.form.company_id = this.id;
+        window.axios.get(`/api/companies/${this.id}`).then((res) => {
+            const company = res.data.data;
+            this.breadcrumbs.push(
+                {
+                    href: {
+                        name: "companies.show",
+                        param: this.id,
+                    },
+                    text: company.name,
+                },
+                {
+                    href: {
+                        name: "companies.pload",
+                    },
+                    text: "User upload",
+                },
+            );
+        });
+    },
+
+    methods: {
+        submitUpload() {
+            this.form.post(`/api/users/import`).then(({ data }) => {
+                this.open(data);
+            });
+        },
+
+        handleExceed(files) {
+            this.$refs.upload.clearFiles();
+
+            const file = files[0];
+            file.uid = genFileId();
+
+            this.$refs.upload.handleStart(file);
+        },
+
+        open(data) {
+            let html = "Succesfully imported all users";
+
+            if (data.length > 0) {
+                html =
+                    "Errors detected on upload following emails were not added to the system<table>";
+                for (let x = 0; x < data.length; x++) {
+                    html += `<tr><td>${data[x].email}</td></tr>`;
+                }
+                html += "</table>";
+            }
+
+            ElMessageBox.alert(html, {
+                confirmButtonText: "Ok",
+                dangerouslyUseHTMLString: true,
+            })
+                .then(() => {
+                    this.$router.replace({
+                        name: "companies.show",
+                        params: { id: this.id },
+                    });
+                })
+                .catch(() => {});
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,62 @@
+<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 Company</h2>
+            </div>
+            <div class="mt grid__1/2">
+                <XForm ref="form" :form="form" :submit="submit" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+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,
+                domains: [],
+                roles: [],
+                sso_client_id: undefined,
+                sso_tenant: undefined,
+                sso_client_secret: undefined,
+                sso_type: undefined,
+            }),
+        };
+    },
+
+    methods: {
+        async submit() {
+            try {
+                let res = await this.form.post(`/api/companies`);
+                this.$router.replace({
+                    name: "companies.show",
+                    params: { id: res.data.id },
+                });
+            } catch (e) {
+                this.$root.errors(e);
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,98 @@
+<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 Company</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,
+                domains: [],
+                roles: [],
+                primary_contact: null,
+                sso_client_id: undefined,
+                sso_tenant: undefined,
+                sso_client_secret: undefined,
+                sso_type: undefined,
+            }),
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+        };
+    },
+
+    async mounted() {
+        this.id = this.$route.params.id;
+        window.axios
+            .get(`/api/companies/${this.id}?include=primary_contact`)
+            .then((res) => {
+                const company = res.data.data;
+                this.form.name = company.name;
+                this.form.primary_contact = company?.primary_contact?.id;
+                this.form.domains = company.domains;
+                this.form.roles = company.roles.map((val) => val.id);
+                this.form.sso_client_id = company.sso_client_id;
+                this.form.sso_tenant = company.sso_tenant;
+                this.form.sso_client_secret = company.sso_client_secret;
+                this.form.sso_type = company.sso_type;
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: "companies.show",
+                        param: this.id,
+                    },
+                    text: company.name,
+                });
+            });
+    },
+
+    methods: {
+        async submit() {
+            try {
+                let res = await this.form.patch(`/api/companies/${this.id}`);
+                this.$router.replace({
+                    name: "companies.show",
+                    params: { id: res.data.id },
+                });
+            } catch (e) {
+                this.$root.errors(e);
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,90 @@
+<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">
+            <h2 class="h1 pb-4">
+                {{ breadcrumbs[breadcrumbs.length - 1].text }}
+            </h2>
+
+            <VTableSorter
+                key="PIndex"
+                :json-data="jsonData"
+                api="companies"
+                :fixed-height="false"
+                :display-edit-action="$store.getters.can('write companies')"
+            />
+
+            <VRoleLegend class="mt-5" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PIndex",
+
+    components: {
+        VBreadcrumbs: require("../../../components/VBreadcrumbs.vue").default,
+        VTableSorter: require("../../../components/VTableSorter.vue").default,
+        VRoleLegend: require("../../../components/VRoleLegend.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            jsonData: {
+                label: "company",
+                multiLabel: "companies",
+                pageLink: "companies",
+                api: "/api/companies",
+                searchable: {
+                    label: "Search companies",
+                    value: "name",
+                },
+                tableStructure: [
+                    {
+                        label: "Name",
+                        key: "name",
+                        sortable: true,
+                    },
+                    {
+                        label: "Total users",
+                        key: "user_count",
+                        sortable: false,
+                        width: "150",
+                    },
+                    {
+                        label: "Role",
+                        component: {
+                            module: (row) => {
+                                if (row.roles.length === 1)
+                                    return require("../../../components/Chip.vue")
+                                        .default;
+
+                                return require("../../../components/Chips.vue")
+                                    .default;
+                            },
+                            props: (row) =>
+                                row.roles.length === 1
+                                    ? {
+                                          name: row.roles[0].name,
+                                          label: row.roles[0].label,
+                                      }
+                                    : { array: row.roles },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+
+    mounted() {},
+};
+</script>

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

@@ -0,0 +1,173 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form class="" @submit.prevent="submit">
+        <el-basic
+            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>
+        </el-basic>
+
+        <el-select
+            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>
+                        <el-button
+                            type="danger"
+                            @click="form.domains.splice(index, 1)"
+                        >
+                            <GSvg class="vel-icon" name="trash" />
+                        </el-button>
+                    </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>
+            <el-button @click="form.domains.push('')">
+                Add Domain
+
+                <GIcon name="icon-plus" embed asis class="fill-0 ml" />
+            </el-button>
+        </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>
+
+            <el-select
+                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',
+                    },
+                ]"
+            />
+            <el-basic
+                v-model="form.sso_client_id"
+                name="sso_client_id"
+                :error="form.errors"
+                type="text"
+                placeholder="Key"
+                label="Key"
+            />
+            <el-basic
+                v-model="form.sso_tenant"
+                name="sso_tenant"
+                :error="form.errors"
+                type="text"
+                placeholder="Tenant"
+                label="Tenant"
+            />
+            <el-basic
+                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";
+
+export default {
+    components: {
+        VFormFooter: require("../../../../components/VFormFooter.vue").default,
+        FormRole: require("../../../../components/FormRole.vue").default,
+    },
+
+    props: {
+        form: {
+            required: true,
+            type: Object,
+        },
+        submit: {
+            required: true,
+            type: Function,
+        },
+        method: {
+            required: true,
+            type: String,
+        },
+    },
+
+    data() {
+        return {
+            users: [],
+        };
+    },
+
+    mounted() {
+        axios
+            .getAll(`/api/users?filter[company_id]=${this.$route.params.id}`)
+            .then((res) => {
+                this.users = res.data.data;
+            });
+    },
+};
+</script>