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

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

@@ -0,0 +1,46 @@
+<template>
+    <div class="grid items-center my-4">
+        <slot>
+            <el-button type="primary" native-type="submit" :loading="loading">
+                Save changes
+            </el-button>
+
+            <el-button tag="a" class="ml-2" @click="$router.go(-1)">
+                Discard changes
+            </el-button>
+
+            <el-button
+                v-if="method === 'patch' && preview"
+                class="ml-2"
+                tag="a"
+                :href="preview"
+                target="_blank"
+                link
+            >
+                <span v-text="`Preview`" />
+            </el-button>
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "VFormFooter",
+
+    props: {
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        method: {
+            type: String,
+            default: "post",
+        },
+        preview: {
+            type: String,
+            required: false,
+            default: "",
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+    <div class="grid justify-between">
+        <div class="grid__4/6 flex justify-start">
+            <span v-if="icon">
+                <div
+                    class="p-1.5 mr-2 border-radius border border-solid border-muted flex items-center justify-center"
+                >
+                    <GIcon class="icon--3 fill-1" :name="icon" embed artboard />
+                </div>
+            </span>
+
+            <h2 class="m-0 font-500 text-secondary">{{ title }}</h2>
+        </div>
+
+        <div class="grid__2/6 flex gap justify-end items-start">
+            <div class="flex gap items-center">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "VShowPageHeader",
+
+    props: {
+        icon: {
+            type: String,
+            default: null,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,106 @@
+<template>
+    <div class="">
+        <p class="font-700 AM-mb-0.5">Your password must contain:</p>
+        <p class="flex m-0">
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-7"
+                v-if="passwordLengthValid"
+            />
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-3"
+                v-else
+            />
+            At least 8 characters
+        </p>
+        <p class="flex m-0">
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-7"
+                v-if="hasLetter"
+            />
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-3"
+                v-else
+            />
+            At least one letter
+        </p>
+        <p class="flex AM-mt-0 ml-0 mr-0 AM-mb-3">
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-7"
+                v-if="hasNumberOrSymbol"
+            />
+            <GSvg
+                name="icon-list-tick"
+                embed
+                artboard
+                class="mr-0.5 icon icon--0.4 fill-3"
+                v-else
+            />
+            At least one number or symbol
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        password: {
+            type: String,
+            default: "",
+        },
+    },
+    computed: {
+        passwordLengthValid() {
+            return this.password?.length >= 8;
+        },
+        hasLetter() {
+            return this.tests.letter.test(this.password);
+        },
+        hasNumberOrSymbol() {
+            return (
+                this.tests.number.test(this.password) ||
+                this.tests.symbol.test(this.password)
+            );
+        },
+        passwordValid() {
+            return (
+                this.passwordLengthValid &&
+                this.hasLetter &&
+                this.hasNumberOrSymbol
+            );
+        },
+    },
+    data() {
+        return {
+            tests: {
+                letter: /[a-zA-Z]+/,
+                number: /[0-9]+/,
+                symbol: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/,
+            },
+        };
+    },
+    watch: {
+        password(newPassword) {
+            this.$emit("passwordValid", this.passwordValid);
+        },
+    },
+    methods: {},
+    mounted() {
+        this.$emit("passwordValid", this.passwordValid);
+    },
+};
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+    <div class="permission-legend">
+        <p class="font-700 text-18 mb-1.5">Legend</p>
+        <p class="font-700 text-16 mb-1.5">Roles</p>
+
+        <ul class="permission-legend__list">
+            <li v-for="role in roles" :key="role.name">
+                <VChip :name="role.name" :label="role.label" />
+                <span class="permission-legend__description">{{
+                    role.description
+                }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    components: {
+        VChip: require("./Chip.vue").default,
+    },
+
+    data() {
+        return {
+            roles: null,
+        };
+    },
+
+    mounted() {
+        axios.get("/api/roles").then((res) => {
+            this.roles = [
+                {
+                    name: "inherited",
+                    label: "Inherited",
+                    description: "Roles are inherited from the parent company.",
+                },
+            ].concat(res.data.data);
+        });
+    },
+};
+</script>

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

@@ -0,0 +1,127 @@
+<template>
+    <el-table
+        :data="$props.data"
+        :height="fixedHeight ? 762 : false"
+        style="width: 100%"
+        @sort-change="handleSort"
+    >
+        <slot v-bind="$props">
+            <template
+                v-for="(item, index) in $props.structure"
+                :key="'d' + index"
+            >
+                <el-table-column
+                    :width="item.width ?? 'auto'"
+                    :sortable="!!item.sortable ? 'custom' : false"
+                    :label="item.label"
+                    :prop="item.key"
+                    :show-overflow-tooltip="true"
+                >
+                    <!-- Support a custom render function -->
+                    <template v-if="item.render" #default="scope">
+                        {{ item.render(scope.row) }}
+                    </template>
+
+                    <!-- Support module passed (as a raw component or :is property) -->
+                    <template v-else-if="item.component" #default="scope">
+                        <component
+                            :is="
+                                item.component.is
+                                    ? item.component.is(scope.row)
+                                    : item.component.module(scope.row)
+                            "
+                            v-bind="item.component.props(scope.row)"
+                        />
+                    </template>
+                </el-table-column>
+            </template>
+
+            <el-table-column
+                v-if="$props.displayActions"
+                label="Action"
+                align="center"
+                :width="155"
+            >
+                <template #default="scope">
+                    <router-link
+                        v-if="$props.displayShowAction"
+                        :to="$props.targetAction($props.data[scope.$index])"
+                    >
+                        <el-button size="small" type="primary">
+                            {{ `View` }}
+                        </el-button>
+                    </router-link>
+                    <router-link
+                        v-if="$props.displayEditAction"
+                        class="ml"
+                        :to="$props.editAction($props.data[scope.$index])"
+                    >
+                        <el-button size="small">
+                            {{ `Edit` }}
+                        </el-button>
+                    </router-link>
+                </template>
+            </el-table-column>
+        </slot>
+    </el-table>
+</template>
+
+<script>
+export default {
+    name: "VTable",
+
+    props: {
+        data: {
+            type: [Array, Object],
+            default() {
+                return [];
+            },
+        },
+        structure: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        label: {
+            type: String,
+            default: "record",
+        },
+        targetAction: {
+            type: Function,
+            default: () => {
+                return "";
+            },
+        },
+        editAction: {
+            type: Function,
+            default: () => {
+                return "";
+            },
+        },
+        fixedHeight: {
+            type: Boolean,
+            default: true,
+        },
+        displayActions: {
+            type: Boolean,
+            default: true,
+        },
+        displayShowAction: {
+            type: Boolean,
+            default: true,
+        },
+        displayEditAction: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    emits: ["sort"],
+
+    methods: {
+        handleSort(data) {
+            this.$emit("sort", data);
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,240 @@
+<template>
+    <div v-if="table_meta" class="mt-3 mb-3">
+        <div class="grid mt mb-2">
+            <slot name="table-info">
+                <div
+                    v-if="!jsonData.forceHide"
+                    class="grid__1/3 flex items-center"
+                >
+                    <p class="color-11">
+                        Showing {{ getPaginationLabel("current") }} to
+                        {{ getPaginationLabel("max") }} of
+                        {{ table_meta.total }} {{ jsonData.multiLabel }}
+                    </p>
+                </div>
+                <div class="flex justify-end items-end grid__2/3">
+                    <el-basic
+                        v-if="jsonData.searchable"
+                        ref="search"
+                        v-model="search"
+                        name="search"
+                        :placeholder="`Search ${jsonData.multiLabel}`"
+                        :data-key="jsonData.searchable.value"
+                        class="mb-0"
+                        prepend="true"
+                        @update:model-value="handleSearch"
+                    >
+                        <template #prepend
+                            ><GIcon embed asis name="icon-search"
+                        /></template>
+                    </el-basic>
+                    <slot v-if="displayActions" name="table-action">
+                        <el-button
+                            v-if="displayEditAction"
+                            size="large"
+                            type="primary"
+                            tag="a"
+                            class="ml-2"
+                            @click="
+                                $router.push({
+                                    name: `${jsonData.pageLink}.create`,
+                                })
+                            "
+                        >
+                            <GIcon
+                                name="icon-plus"
+                                embed
+                                asis
+                                class="fill-0 mr-0.5"
+                            />
+                            Create new {{ jsonData.label }}
+                        </el-button>
+                    </slot>
+                </div>
+            </slot>
+        </div>
+        <div class="bg-0 p-0.5 box-shadow-1 border-r-4">
+            <VTable
+                :data="table_data"
+                :structure="jsonData.tableStructure"
+                :label="jsonData.label"
+                :over-write-id="jsonData.overWriteId"
+                :fixed-height="fixedHeight"
+                :target-action="
+                    (item) => ({
+                        name: `${jsonData.pageLink}.show`,
+                        params: { id: item.id },
+                    })
+                "
+                :edit-action="
+                    (item) => ({
+                        name: `${jsonData.pageLink}.edit`,
+                        params: { id: item.id },
+                    })
+                "
+                :display-actions="displayActions"
+                :display-show-action="displayShowAction"
+                :display-edit-action="displayEditAction"
+                @sort="handleSort"
+            >
+                <slot name="table-content"></slot>
+            </VTable>
+
+            <div class="flex justify-center items-center py-2">
+                <el-pagination
+                    v-if="table_meta.current_page"
+                    v-model:current-page="table_meta.current_page"
+                    layout="prev, pager, next"
+                    :total="table_meta.total"
+                    :page-size="table_meta.per_page"
+                    @update:current-page="handleCurrentPageChange"
+                />
+            </div>
+        </div>
+    </div>
+    <div v-else class="absolute transform-center text-center">
+        <GSpinner class="fill-5" />
+        <p v-text="`Loading...`" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "VTableSorter",
+
+    components: {
+        VTable: require("./VTable.vue").default,
+    },
+
+    props: {
+        jsonData: {
+            required: true,
+            type: Array,
+        },
+        fixedHeight: {
+            default: true,
+            type: Boolean,
+        },
+        api: {
+            required: true,
+            type: String,
+        },
+        defaults: {
+            required: false,
+            type: String,
+            default: "",
+        },
+        displayActions: {
+            type: Boolean,
+            default: true,
+        },
+        displayShowAction: {
+            type: Boolean,
+            default: true,
+        },
+        displayEditAction: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    data() {
+        return {
+            search: null,
+            sort: "-id",
+            query: [],
+            table_data: [],
+            table_meta: null,
+        };
+    },
+
+    mounted() {
+        this.sort = this.jsonData.defaultSort || "-id";
+        this.fetchData({ page: 1 }).then((data) => {
+            this.table_data = data.data;
+            this.table_meta = data.meta;
+
+            this.table_curr_page = this.table_meta.current_page;
+        });
+    },
+
+    methods: {
+        handleSearch(data) {
+            if (data === null || data.length < 3) {
+                this.query = [];
+            } else {
+                this.query = [
+                    `filter[${this.$refs.search.$el.dataset.key}]=${data}`,
+                ];
+            }
+            this.fetchData({}).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+        handleSort(data) {
+            if (data.order === null) {
+                this.sort = this.jsonData.defaultSort || "-id";
+            } else {
+                this.sort =
+                    data.order === "ascending" ? data.prop : "-" + data.prop;
+            }
+            this.fetchData({}).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+
+        fetchData: function ({ page = "1" }) {
+            const mergedQuery = [
+                ...this.query,
+                this.defaults,
+                `sort=${this.sort}`,
+                `page=${page}`,
+            ];
+
+            return this.$store.dispatch("getEntity", {
+                entity: this.$props.api,
+                query: mergedQuery.join("&"),
+                errors: this.$root.errors,
+            });
+        },
+
+        getStatusLabel(status) {
+            switch (status) {
+                case 0:
+                    return "Inactive";
+                case 1:
+                    return "Active";
+                case 2:
+                    return "Draft";
+            }
+        },
+
+        handleCurrentPageChange(val) {
+            this.fetchData({ page: val }).then((data) => {
+                this.table_data = data.data;
+                this.table_meta = data.meta;
+            });
+        },
+
+        getPaginationLabel(action) {
+            switch (action) {
+                case "current":
+                    return (
+                        (this.table_meta.current_page - 1) *
+                            this.table_meta.per_page +
+                        1
+                    );
+                case "max": {
+                    const potentialMax =
+                        this.table_meta.current_page * this.table_meta.per_page;
+                    return potentialMax > this.table_meta.total
+                        ? this.table_meta.total
+                        : potentialMax;
+                }
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/modules/AuthModule/js/FakeAPI.js

@@ -0,0 +1,78 @@
+import axios from "axios";
+
+axios.interceptors.request.use(
+    (request) => {
+        throw { isLocal: true, data: retrieveResponse(request) };
+    },
+    (error) => {
+        return Promise.resolve(error);
+    },
+);
+
+axios.interceptors.response.use(
+    (response) => {
+        return response;
+    },
+    (error) => {
+        return Promise.resolve(error);
+    },
+);
+
+function retrieveResponse(request) {
+    return fakes[request.url][request.method];
+}
+
+const fakes = {
+    "/api/users/self": {
+        get: {
+            data: {
+                id: 2,
+                company_id: 1,
+                created_at: "2025-04-14T15:11:11.000000Z",
+                updated_at: "2025-04-16T16:45:55.000000Z",
+                newsletter: null,
+                admin: 1,
+                name: "Jeremy Viner",
+                email: "jeremy.viner@avalerehealth.com",
+                email_verified_at: "2025-04-16T16:45:55.000000Z",
+                brands: [],
+                company: {
+                    id: 1,
+                    name: "Company 0",
+                    created_at: "2025-04-14T15:08:50.000000Z",
+                    updated_at: "2025-04-14T15:08:50.000000Z",
+                    domains: [
+                        "okuneva.com",
+                        "bogisich.info",
+                        "avalerehealth.com",
+                    ],
+                    brands: [1],
+                    events: [],
+                    therapy_areas: [],
+                    event_therapy_areas: [],
+                    event_therapy_area_media_types: [],
+                    users_count: null,
+                    sso_client_id: "5ea409fc-8dcf-423e-b7fa-867422859ea4",
+                    sso_client_secret:
+                        "aSS8Q~ss0r-uh.fPLHUXVXp2kIs5IfwTjzomrb_I",
+                    sso_tenant: "4a33c544-865e-44a4-836f-bc51800f6c5e",
+                    sso_type: "azure",
+                },
+            },
+        },
+    },
+    "/user/password": {
+        put: {},
+    },
+    "/logged-in": {
+        get: { "logged-in": true },
+    },
+    "/logout": {
+        post: {},
+    },
+    "/login": {
+        post: {
+            two_factor: false,
+        },
+    },
+};