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

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

@@ -0,0 +1,169 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form class="" @submit.prevent="submit">
+        <template v-if="method !== 'patch'">
+            <el-basic
+                v-model="form.name"
+                name="name"
+                :error="form.errors"
+                type="text"
+                placeholder="Name"
+                label="Name"
+            />
+
+            <el-basic
+                v-model="form.email"
+                placeholder="Email"
+                label="Email"
+                type="text"
+                name="email"
+                :error="form.errors"
+            />
+
+            Company: <span v-text="company?.name" />
+
+            <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"
+                    :error="form.errors"
+                    type="password"
+                    placeholder="Password"
+                    label="Password"
+                />
+                <el-basic
+                    v-model="form.password_confirmation"
+                    name="password_confirmation"
+                    :error="form.errors"
+                    type="password"
+                    placeholder="Password Confirmation"
+                    label="Password Confirmation"
+                />
+            </template>
+
+            <hr class="my-5 hr-muted" />
+        </template>
+
+        <template v-if="$store.getters.can('edit roles')">
+            <template v-if="enableRoles">
+                <el-button
+                    type="secondary"
+                    @click="
+                        form.roles = [];
+                        enableRoles = false;
+                    "
+                >
+                    Reset roles
+                </el-button>
+                <FormRole :form="form" />
+            </template>
+            <template v-else>
+                <el-button @click="enableRoles = true">
+                    <GIcon name="icon-plus" embed asis class="fill-0 mr" />
+                    Override roles
+                </el-button>
+                <p class="mt-2">
+                    Roles will be inherited from the company level.
+                </p>
+            </template>
+            <hr class="my-5 hr-muted" />
+        </template>
+
+        <VFormFooter :loading="form.processing" />
+    </form>
+</template>
+
+<script>
+import axios from "axios";
+import { debounce } from "lodash";
+
+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 {
+            companies: null,
+            enableRoles: null,
+            company: null,
+        };
+    },
+
+    computed: {
+        domain() {
+            return this.form.email?.split("@")[1];
+        },
+    },
+
+    watch: {
+        "form.roles": {
+            handler(newVal) {
+                if (this.enableRoles === null) {
+                    this.enableRoles = newVal.length > 0;
+                }
+            },
+        },
+        "form.email": debounce(function () {
+            if (this.domain) {
+                axios
+                    .get("/api/companies", {
+                        params: {
+                            "filter[domains.domain]": this.domain,
+                        },
+                    })
+                    .then((res) => {
+                        this.company = res.data.data[0];
+                    })
+                    .catch((error) => {
+                        console.error("Error fetching company:", error);
+                        this.company = null;
+                    });
+            } else {
+                this.company = null;
+            }
+        }, 500),
+    },
+
+    mounted() {
+        axios.getAll("/api/companies").then((res) => {
+            this.companies = res.data.data;
+        });
+    },
+};
+</script>

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

@@ -0,0 +1,120 @@
+<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="user">
+                <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                    <VPageHeader
+                        icon="icon-user"
+                        :title="`${user.name} ${user.last_name ?? ''}`"
+                    >
+                        <el-button
+                            v-if="$store.getters.can('write users')"
+                            tag="a"
+                            type="primary"
+                            @click="
+                                $router.push({
+                                    name: 'users.edit',
+                                    param: user.id,
+                                })
+                            "
+                        >
+                            <GIcon
+                                class="fill-0 mr-0.5"
+                                name="icon-edit"
+                                embed
+                                artboard
+                            />
+                            Edit user
+                        </el-button>
+                    </VPageHeader>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td class="p">Email</td>
+                                <td class="p">{{ user.email }}</td>
+                            </tr>
+                            <tr>
+                                <td class="p">Company</td>
+                                <td class="p">
+                                    <router-link
+                                        :to="{
+                                            name: 'companies.show',
+                                            params: { id: user.company.id },
+                                        }"
+                                    >
+                                        {{ user.company?.name }}
+                                    </router-link>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <FormRole
+                        :overrides="user.overrides_roles_and_permissions"
+                        :form="{ roles: user.roles.map((d) => d.id) }"
+                        :readonly="true"
+                    />
+                </div>
+            </template>
+
+            <div v-else class="absolute transform-center text-center">
+                <GSpinner class="fill-5" />
+                <p v-text="`Loading...`" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    name: "PShow",
+
+    components: {
+        VBreadcrumbs: require("../../../components/VBreadcrumbs.vue").default,
+        VPageHeader: require("../../../components/VPageHeader.vue").default,
+        FormRole: require("../../../components/FormRole.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            user: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+        };
+    },
+
+    mounted() {
+        axios
+            .get(`/api/users/${this.$route.params.id}?include=company`)
+            .then((res) => {
+                this.user = res.data.data;
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: "users.show",
+                        param: this.user.id,
+                    },
+                    text: this.user.name,
+                });
+            });
+    },
+};
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+    <PageTitle title="Users" />
+
+    <router-view :key="$route.path" :breadcrumbs="breadcrumbs" />
+</template>
+
+<script>
+import { PageTitle } from "@fishawack/lab-velocity";
+
+export default {
+    name: "PUsers",
+
+    components: {
+        PageTitle,
+    },
+
+    data() {
+        return {
+            breadcrumbs: [
+                {
+                    href: {
+                        name: "index",
+                    },
+                    text: "Home",
+                },
+                {
+                    href: {
+                        name: "users.index",
+                    },
+                    text: "Users",
+                },
+            ],
+        };
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/components/AuthModal.vue

@@ -0,0 +1,105 @@
+<template>
+    <div :class="{ active: open }" class="modal modal--auth">
+        <div class="modal__container" v-on:click.self="close">
+            <div class="modal__box AuthModule__form" :class="boxCls">
+                <component
+                    v-if="compName"
+                    :is="compName"
+                    v-bind="compProps"
+                    @close="close"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+"use strict";
+
+export default {
+    name: "AuthModal",
+
+    data() {
+        return {
+            open: false,
+            compName: null,
+            compProps: null,
+            cb: null,
+            boxCls: null,
+            validComponents: {
+                "force-reset": "VForceReset",
+                "password-change": "VPasswordChange",
+            },
+        };
+    },
+
+    methods: {
+        reset() {
+            this.compName = null;
+            this.compProps = null;
+            this.boxCls = null;
+            this.cb = null;
+        },
+        close() {
+            if (this.compName === "VForceReset") {
+                if (!this.$store.state.auth.forcePasswordChange) {
+                    this.open = false;
+                }
+            } else {
+                this.open = false;
+            }
+        },
+    },
+
+    created() {
+        this.$emitter.on("AuthModal", (comp) => {
+            this.compName = this.validComponents[comp.type];
+            this.open = comp;
+        });
+
+        window.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                this.open = false;
+            }
+        });
+    },
+
+    watch: {
+        open(isOpen) {
+            this.$emitter.emit("toggleBackgroundScroll", isOpen);
+
+            if (this.cb) {
+                this.cb();
+            }
+
+            if (!isOpen) {
+                this.reset();
+            }
+        },
+        $route(to, from) {
+            if (from.fullPath !== to.fullPath) {
+                this.open = false;
+            }
+        },
+        "$store.state.auth.forcePasswordChange": {
+            async handler(forcePasswordChange) {
+                if (forcePasswordChange) {
+                    this.compName = this.validComponents["force-reset"];
+                    this.open = true;
+                }
+            },
+        },
+    },
+
+    components: {
+        VForceReset: require("../routes/force-reset.vue").default,
+        VPasswordChange: require("../routes/change-password.vue").default,
+    },
+    mounted() {
+        if (this.$store.state.auth.forcePasswordChange) {
+            this.compName = this.validComponents["force-reset"];
+            this.open = true;
+        }
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/components/Chip.vue

@@ -0,0 +1,70 @@
+<template>
+    <span
+        class="chip"
+        :class="`chip--${name}`"
+        :style="{
+            color,
+        }"
+    >
+        {{ label }}
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        name: {
+            type: String,
+            default: "",
+        },
+        label: {
+            type: String,
+            default: "",
+        },
+    },
+
+    computed: {
+        color() {
+            return this.generateColorFromString(this.name);
+        },
+    },
+
+    methods: {
+        /**
+         * Generate a more visually appealing color with better saturation
+         */
+        generateColorFromString(str) {
+            let hash = 0;
+
+            // Create hash from string
+            for (let i = 0; i < str.length; i++) {
+                hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            }
+
+            // Generate HSL values for better color distribution
+            const hue = Math.abs(hash % 360);
+            const saturation = 45 + (Math.abs(hash) % 30); // 45-75%
+            const lightness = 35 + (Math.abs(hash) % 25); // 35-60%
+
+            return this.hslToHex(hue, saturation, lightness);
+        },
+
+        /**
+         * Convert HSL to HEX
+         */
+        hslToHex(h, s, l) {
+            // eslint-disable-next-line no-param-reassign
+            l /= 100;
+            const a = (s * Math.min(l, 1 - l)) / 100;
+            const f = (n) => {
+                const k = (n + h / 30) % 12;
+                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+                return Math.round(255 * color)
+                    .toString(16)
+                    .padStart(2, "0");
+            };
+            return `#${f(0)}${f(8)}${f(4)}`;
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/components/Chips.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="chips">
+        <template v-for="(item, index) in array" :key="item.name">
+            <Chip
+                class="chip--round"
+                :name="item.name"
+                :label="`${item.label}${index < array.length - 1 ? ',' : ''}`"
+            /><span v-if="index < array.length - 1">&nbsp;</span>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+        Chip: require("./Chip.vue").default,
+    },
+
+    props: {
+        array: {
+            type: Array,
+            default: () => [],
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/components/FormRole.vue

@@ -0,0 +1,115 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <h2 class="font-primary">Access Control</h2>
+
+    <template v-if="readonly">
+        <p>Roles</p>
+        <div v-if="!overrides" class="my-2">
+            <Chip
+                class="mr mb inline-block"
+                name="inherited"
+                label="Inherited"
+            />
+        </div>
+        <ul v-else class="my-2 pl-0">
+            <li
+                v-for="role in form.roles"
+                :key="roles.find((d) => d.id === role)"
+                class="mr mb inline-block"
+            >
+                <Chip
+                    :name="roles.find((d) => d.id === role)?.name"
+                    :label="roles.find((d) => d.id === role)?.label"
+                />
+            </li>
+        </ul>
+    </template>
+    <el-select
+        v-else
+        v-model="form.roles"
+        class="mt-2"
+        placeholder="Select"
+        multiple
+        name="roles"
+        :error="form.errors"
+        label="Roles"
+        :options="
+            roles?.map(({ id, label }) => ({
+                label,
+                value: id,
+            }))
+        "
+    />
+
+    <template v-if="permissions.length && (overrides === null || overrides)">
+        <p>Permissions</p>
+        <ul class="mt-2 pl-0">
+            <li
+                v-for="(permission, index) in permissions"
+                :key="index"
+                class="mr mb inline-block"
+            >
+                <Chip :name="permission.name" :label="permission.label" />
+            </li>
+        </ul>
+    </template>
+
+    <VRoleLegend class="mt-2" />
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    components: {
+        VRoleLegend: require("./VRoleLegend.vue").default,
+        Chip: require("./Chip.vue").default,
+    },
+
+    props: {
+        form: {
+            required: true,
+            type: Object,
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        overrides: {
+            type: Boolean,
+            default: null,
+        },
+    },
+
+    data() {
+        return {
+            roles: [],
+        };
+    },
+
+    computed: {
+        permissions() {
+            const allPermissions = this.form.roles.reduce((acc, id) => {
+                return acc.concat(
+                    this.roles.find((d) => d.id === id)?.permissions || [],
+                );
+            }, []);
+
+            // Remove duplicates based on permission id
+            return allPermissions
+                .filter((permission, index, self) => {
+                    return (
+                        index === self.findIndex((p) => p.id === permission.id)
+                    );
+                })
+                .sort();
+        },
+    },
+
+    mounted() {
+        axios.getAll("/api/roles").then((res) => {
+            this.roles = res.data.data;
+        });
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/components/VBreadcrumbs.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="py mobile:hidden">
+        <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+            <div class="grid__1/1">
+                <div class="flex items-center">
+                    <breadcrumbs :crumbs="items" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Breadcrumbs } from "@fishawack/lab-velocity";
+export default {
+    name: "VBreadcrumbs",
+    components: {
+        Breadcrumbs,
+    },
+
+    props: {
+        containerClasses: {
+            type: [String, Array, Object],
+            default: "",
+        },
+        items: {
+            type: Array,
+            required: true,
+        },
+    },
+};
+</script>