@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.60

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

@@ -0,0 +1,251 @@
+import { merge } from "lodash";
+import { h } from "vue";
+import axios from "axios";
+import { throttle } from "lodash";
+
+import { columns, defaultResource, meta } from "../../../resource/index.js";
+import userResource from "../PUsers/resource.js";
+import teamsColumns from "./columns.js";
+
+import VelFormRole from "../../../../components/layout/FormRole.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",
+                }),
+            },
+        },
+        auditable: true,
+        trashable: true,
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write teams"),
+            edit: ({ $store }) => $store.getters.can("write teams"),
+            delete: ({ $store }) => $store.getters.can("delete teams"),
+        },
+        ...merge(columns(teamsColumns), {
+            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/routes/PUsers/SetPasswordAction.vue

@@ -0,0 +1,51 @@
+<template>
+    <vel-button @click="visible = true">Set Password</vel-button>
+
+    <SetPasswordDialog
+        v-if="visible"
+        :user-id="userId"
+        @close="visible = false"
+        @success="onSuccess"
+    />
+</template>
+
+<script>
+import VelButton from "../../../../components/basic/Button.vue";
+import SetPasswordDialog from "./SetPasswordDialog.vue";
+import { ElNotification } from "element-plus";
+
+export default {
+    components: {
+        VelButton,
+        SetPasswordDialog,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+        model: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            visible: false,
+        };
+    },
+    methods: {
+        onSuccess(data) {
+            this.visible = false;
+
+            Object.assign(this.model, data);
+
+            ElNotification({
+                title: "Success",
+                message: "Password updated",
+                type: "success",
+            });
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/routes/PUsers/SetPasswordDialog.vue

@@ -0,0 +1,138 @@
+<template>
+    <el-dialog
+        :model-value="true"
+        title="Set Password"
+        width="500px"
+        @close="$emit('close')"
+    >
+        <vel-basic
+            v-model="password"
+            name="password"
+            type="password"
+            label="Password"
+            placeholder="Enter new password"
+            class="AM-mb-2"
+        />
+
+        <vel-basic
+            v-model="passwordConfirmation"
+            name="password_confirmation"
+            type="password"
+            label="Confirm Password"
+            placeholder="Confirm new password"
+            class="AM-mb-2"
+        />
+
+        <div class="AM-mb-2">
+            <p class="font-700 AM-mb-0.5">Password must contain:</p>
+            <p class="m-0">
+                {{ passwordLengthValid ? "✓" : "✗" }} At least 8 characters
+            </p>
+            <p class="m-0">{{ hasLetter ? "✓" : "✗" }} At least one letter</p>
+            <p class="m-0">
+                {{ hasNumberOrSymbol ? "✓" : "✗" }} At least one number or
+                symbol
+            </p>
+        </div>
+
+        <template #footer>
+            <el-button @click="$emit('close')">Cancel</el-button>
+            <el-button
+                type="primary"
+                :disabled="!canSubmit"
+                :loading="loading"
+                @click="submit"
+            >
+                Set Password
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import { ElDialog, ElButton, ElNotification } from "element-plus";
+import VelBasic from "../../../../components/form/basic.vue";
+import axios from "axios";
+
+export default {
+    components: {
+        ElDialog,
+        ElButton,
+        VelBasic,
+    },
+    props: {
+        userId: {
+            type: [Number, String],
+            required: true,
+        },
+    },
+    emits: ["close", "success"],
+    data() {
+        return {
+            password: "",
+            passwordConfirmation: "",
+            loading: false,
+        };
+    },
+    computed: {
+        passwordLengthValid() {
+            return this.password.length >= 8;
+        },
+        hasLetter() {
+            return /[a-zA-Z]/.test(this.password);
+        },
+        hasNumberOrSymbol() {
+            return (
+                /[0-9]/.test(this.password) ||
+                /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(this.password)
+            );
+        },
+        passwordValid() {
+            return (
+                this.passwordLengthValid &&
+                this.hasLetter &&
+                this.hasNumberOrSymbol
+            );
+        },
+        canSubmit() {
+            return (
+                this.passwordValid &&
+                this.password === this.passwordConfirmation &&
+                this.password.length > 0
+            );
+        },
+    },
+    methods: {
+        async submit() {
+            this.loading = true;
+
+            try {
+                const res = await axios.post(
+                    `/api/users/${this.userId}/set-password`,
+                    {
+                        password: this.password,
+                        password_confirmation: this.passwordConfirmation,
+                    },
+                );
+
+                this.$emit("success", res.data.data);
+            } catch (e) {
+                if (e.response?.status === 422) {
+                    const errors = e.response.data.errors || {};
+                    const message =
+                        Object.values(errors).flat().join("\n") ||
+                        e.response.data.message;
+
+                    ElNotification({
+                        title: "Validation Error",
+                        message,
+                        type: "error",
+                    });
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+};
+</script>