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

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

@@ -0,0 +1,334 @@
+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";
+import VelSelect from "../../../../components/form/Select.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",
+                    endpoint: "api/companies",
+                    labelKey: "name",
+                    filterable: true,
+                    searchParam: "name",
+                    condition: {
+                        form: {
+                            write: ({ $route, model }) =>
+                                !$route.params.companiesId && !model?.company,
+                        },
+                    },
+                    initial: ({ model, $route }) =>
+                        model?.company ||
+                        ($route.params.companiesId && {
+                            id: $route.params.companiesId,
+                        }),
+                    preparation: ({ form }) => form.company_id?.id,
+                    render: {
+                        read: ({ model }) => h("span", model.company.name),
+                        write: () => h(VelSelect),
+                    },
+                },
+                {
+                    key: "user_count",
+                    label: "Users",
+                    condition: {
+                        form: false,
+                    },
+                },
+                {
+                    key: "roles",
+                    initial: ({ model }) =>
+                        model?.roles.map((val) => val.id) || [],
+                    preparation: ({ form }) =>
+                        form.roles?.map((d) =>
+                            typeof d === "object" ? d.value : d,
+                        ),
+                    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: {
+                    tabs: [
+                        ...defaultResource.show.tabs,
+                        ({ model }) => ({
+                            label: "Access control",
+                            component: h(VelFormRole, {
+                                overrides:
+                                    model.overrides_roles_and_permissions,
+                                form: { roles: model.roles.map((d) => d.id) },
+                                readonly: true,
+                            }),
+                        }),
+                        (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,41 +24,50 @@
 
             <hr class="my-3 hr-muted" />
 
-            <el-checkbox
-                v-model="form.notify_user"
-                name="notify_user"
-                :error="form.errors"
-                label="Send email to notify user of account and password"
-            />
-            <el-checkbox
-                v-model="form.force_password_change"
-                name="force_password_change"
-                :error="form.errors"
-                label="Force password change on first login"
-            />
-            <el-checkbox
-                v-model="form.set_password"
-                name="set_password"
-                :error="form.errors"
-                label="Auto generate password"
-            />
-            <template v-if="!form.set_password">
-                <el-basic
-                    v-model="form.password"
-                    name="password"
+            <template v-if="isSSOCompany">
+                <p class="mb-3">
+                    This user belongs to an SSO-enabled company. They
+                    will authenticate via SSO on first login. No
+                    password is required.
+                </p>
+            </template>
+            <template v-else>
+                <VelCheckbox
+                    v-model="form.notify_user"
+                    name="notify_user"
+                    :error="form.errors"
+                    label="Send email to notify user of account and password"
+                />
+                <VelCheckbox
+                    v-model="form.force_password_change"
+                    name="force_password_change"
                     :error="form.errors"
-                    type="password"
-                    placeholder="Password"
-                    label="Password"
+                    label="Force password change on first login"
                 />
-                <el-basic
-                    v-model="form.password_confirmation"
-                    name="password_confirmation"
+                <VelCheckbox
+                    v-model="form.set_password"
+                    name="set_password"
                     :error="form.errors"
-                    type="password"
-                    placeholder="Password Confirmation"
-                    label="Password Confirmation"
+                    label="Auto generate password"
                 />
+                <template v-if="!form.set_password">
+                    <VelBasic
+                        v-model="form.password"
+                        name="password"
+                        :error="form.errors"
+                        type="password"
+                        placeholder="Password"
+                        label="Password"
+                    />
+                    <VelBasic
+                        v-model="form.password_confirmation"
+                        name="password_confirmation"
+                        :error="form.errors"
+                        type="password"
+                        placeholder="Password Confirmation"
+                        label="Password Confirmation"
+                    />
+                </template>
             </template>
 
             <hr class="my-5 hr-muted" />
@@ -66,22 +75,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 +102,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 +133,8 @@ export default {
             type: Function,
         },
         method: {
-            required: true,
             type: String,
+            default: "post",
         },
     },
 
@@ -129,6 +150,9 @@ export default {
         domain() {
             return this.form.email?.split("@")[1];
         },
+        isSSOCompany() {
+            return !!this.company?.sso_enabled;
+        },
     },
 
     watch: {