@fishawack/lab-velocity 2.0.0-beta.5 → 2.0.0-beta.50

package/_Build/vue/modules/AuthModule/routes/success-forgot.vue

@@ -4,15 +4,15 @@
             <h1 class="h2 h2--small">Reset password</h1>
 
             <form class="form" @submit.prevent="submit">
-                <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+                <p class="mt-2 mb-0 color-highlight">
                     <strong class="">Email: {{ form?.email }}</strong>
                 </p>
-                <p class="AM-mt">
+                <p class="mt">
                     If this account exists we have sent an email containing
                     instructions for resetting the password.
                     <strong>Please check your inbox.</strong>
                 </p>
-                <p class="AM-mt-3 AM-mb">
+                <p class="mt-3 mb">
                     Haven’t received the email after 10 minutes?
                 </p>
 
@@ -37,7 +37,7 @@
                     Re-send instructions
                 </elButton>
 
-                <p class="disclaimer AM-mt-3">
+                <p class="disclaimer mt-3">
                     <router-link
                         class="color-1 underline"
                         :to="{ name: `auth.login` }"
@@ -52,6 +52,8 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
+import { guestRequest } from "../js/guest-request";
 
 export default {
     components: {
@@ -76,9 +78,13 @@ export default {
                     this.notification = null;
                 }
 
-                await this.form.post("/forgot-password");
+                await guestRequest({
+                    form: this.form,
+                    url: "/forgot-password",
+                    store: this.$store,
+                });
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
@@ -86,14 +92,14 @@ export default {
                 });
             } catch (e) {
                 if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
                         message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
                         class: "el-notification--warning el-notification--right-override",
                     });
                 } else {
-                    this.$root.errors(e);
+                    console.log(e);
                 }
             }
         },

package/_Build/vue/modules/AuthModule/routes/success-reset.vue

@@ -3,10 +3,10 @@
         <section id="resetPasswordForm">
             <h1 class="h2 h2--small">Success</h1>
 
-            <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+            <p class="mt-2 mb-0 color-highlight">
                 <strong class="">Email: {{ $route.query.email }}</strong>
             </p>
-            <p class="AM-mt">
+            <p class="mt">
                 Your password has been reset. Please sign in to continue.
             </p>
 

package/_Build/vue/modules/AuthModule/routes/success-verify.vue

@@ -20,9 +20,7 @@
 <script>
 export default {
     mounted() {
-        this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.$store.dispatch("getUser");
     },
     components: {
         elButton: require("../../../components/basic/Button.vue").default,

package/_Build/vue/modules/AuthModule/routes/verify.vue

@@ -2,17 +2,15 @@
     <h1 class="h2 h2--small">Verify your email address</h1>
 
     <form class="form" @submit.prevent="submit">
-        <p class="AM-mt-2 AM-mb-0 AM-color-highlight">
+        <p class="mt-2 mb-0 color-highlight">
             <strong class="">Email: {{ user?.email }}</strong>
         </p>
-        <p class="AM-mt-0.5">
+        <p class="mt-0.5">
             <strong>Please check your inbox</strong> for a Verification email
             from {{ $root.appName }}. Click the link in that email to verify
             your email address and complete your registration.
         </p>
-        <p class="AM-mt-0.5 AM-mb-0">
-            Haven’t received the email after 10 minutes?
-        </p>
+        <p class="mt-0.5 mb-0">Haven’t received the email after 10 minutes?</p>
 
         <el-input
             class="hidden"
@@ -26,7 +24,7 @@
         />
 
         <elButton
-            class="AM-mt AM-mb-3"
+            class="mt mb-3"
             native-type="submit"
             type="primary"
             :disabled="form.processing"
@@ -36,7 +34,7 @@
             Re-send verification link
         </elButton>
 
-        <p class="disclaimer AM-mt-1.5">
+        <p class="disclaimer mt-1.5">
             Having trouble singing in?
             <a :href="$store.state.auth.contact" class="underline"
                 >Contact us</a
@@ -47,6 +45,7 @@
 
 <script>
 import Form from "form-backend-validation";
+import { ElNotification } from "element-plus";
 
 export default {
     components: {
@@ -74,7 +73,7 @@ export default {
 
                 await this.form.post("/email/verification-notification");
 
-                this.$notify({
+                ElNotification({
                     type: "success",
                     message: "Email has been re-sent",
                     duration: 10000,
@@ -82,30 +81,28 @@ export default {
                 });
             } catch (e) {
                 if (e.response && e.response.status === 429) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "warning",
                         message: "Please allow 10 minutes before re-requesting",
                         duration: 0,
                         class: "el-notification--warning el-notification--right-override",
                     });
                 } else if (e.response && e.response.status === 422) {
-                    this.notification = this.$notify({
+                    this.notification = ElNotification({
                         type: "error",
                         message: e.response.data.message,
                         duration: 0,
                         class: "el-notification--error el-notification--right-override",
                     });
                 } else {
-                    this.$root.errors(e);
+                    console.log(e);
                 }
             }
         },
     },
 
     async mounted() {
-        this.user = await this.$store.dispatch("getUser", {
-            errors: this.$root.errors,
-        });
+        this.user = await this.$store.dispatch("getUser");
 
         this.form.email = this.user.email;
     },

package/_Build/vue/modules/resource/Children/create.vue

@@ -0,0 +1,81 @@
+<template>
+    <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 {{ resource.singular }}</h2>
+            </div>
+            <div :class="['mt', resource.form.class]">
+                <component
+                    :is="resource.form.component ?? 'XForm'"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    :method="method"
+                    :resource="resource"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            method: "post",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(this.resource.form.fields(this), {
+            resetOnSuccess: false,
+        });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                const hold = { ...this.form.data() };
+
+                try {
+                    this.form.populate(this.resource.form.preparation(this));
+
+                    let res = await this.form.post(
+                        `${this.resource.api.endpoint(this)}`,
+                    );
+
+                    this.$router.replace({
+                        name: `${this.resource.routeName}.show`,
+                        params: { [this.resource.id]: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                } finally {
+                    if (
+                        !this.form.successful ||
+                        !this.form.__options.resetOnSuccess
+                    ) {
+                        this.form.populate(hold);
+                    }
+                }
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/modules/resource/Children/edit.vue

@@ -0,0 +1,106 @@
+<template>
+    <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 {{ resource.singular }}</h2>
+            </div>
+            <div :class="resource.form.class">
+                <component
+                    :is="resource.form.component ?? 'XForm'"
+                    ref="form"
+                    :form="form"
+                    :submit="submit"
+                    :method="method"
+                    :resource="resource"
+                    :model="model"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Form from "form-backend-validation";
+
+export default {
+    components: {
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            model: null,
+            method: "patch",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(
+            { _method: "PATCH", ...this.resource.form.fields(this) },
+            {
+                resetOnSuccess: false,
+            },
+        );
+    },
+
+    async mounted() {
+        window.axios
+            .get(
+                `${this.resource.api.endpoint(this)}/${this.$route.params[this.resource.id]}`,
+                {
+                    params: this.resource.api.params.show(this),
+                },
+            )
+            .then((res) => {
+                this.model = res.data.data;
+
+                // Set initial form data
+                Object.entries(this.resource.form.fields(this)).forEach(
+                    ([key, value]) => {
+                        this.form[key] = value;
+                    },
+                );
+            });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                const hold = { ...this.form.data() };
+
+                try {
+                    this.form.populate(this.resource.form.preparation(this));
+
+                    let res = await this.form.post(
+                        `${this.resource.api.endpoint(this)}/${this.model.id}`,
+                    );
+
+                    this.$router.replace({
+                        name: `${this.resource.routeName}.show`,
+                        params: { [this.resource.id]: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                } finally {
+                    if (
+                        !this.form.successful ||
+                        !this.form.__options.resetOnSuccess
+                    ) {
+                        this.form.populate(hold);
+                    }
+                }
+            }
+        },
+    },
+};
+</script>

package/_Build/vue/modules/resource/Children/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <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 gap items-center justify-end">
+                <template
+                    v-for="(render, index) in resource.index.actions"
+                    :key="index"
+                >
+                    <component :is="render(this)" />
+                </template>
+            </div>
+
+            <template
+                v-for="(render, index) in resource.index.layout"
+                :key="index"
+            >
+                <component :is="render(this)" />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    provide() {
+        return {
+            additionalInfo: { resource: this.resource },
+        };
+    },
+
+    props: {
+        resource: {
+            type: Object,
+            required: true,
+        },
+        depth: {
+            type: Number,
+            required: true,
+        },
+    },
+};
+</script>

package/_Build/vue/modules/resource/Children/partials/form.vue

@@ -0,0 +1,111 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form @submit.prevent="submit" class="vel-resource-form">
+        <component
+            :is="segment.group ? 'fieldset' : 'div'"
+            v-for="(segment, sIndex) in segments"
+            :key="sIndex"
+            :class="{ 'vel-form-group': segment.group }"
+        >
+            <legend v-if="segment.group">
+                {{ segment.group.title || formatGroupKey(segment.groupKey) }}
+            </legend>
+            <div :class="segment.group?.class" :style="segment.group?.style">
+                <component
+                    v-for="(item, iIndex) in segment.items"
+                    :key="`${sIndex}-${iIndex}`"
+                    :is="item.render ? item.render(_self) : 'VelBasic'"
+                    v-model="form[item.key]"
+                    :type="item.type || 'text'"
+                    :error="form.errors"
+                    :name="item.key"
+                    :placeholder="
+                        item.placeholder ||
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    :label="
+                        item.label ||
+                        item.key[0].toUpperCase() + item.key.slice(1)
+                    "
+                    v-bind="item"
+                />
+            </div>
+        </component>
+
+        <VelFormFooter :loading="form.processing" />
+    </form>
+</template>
+
+<script>
+export default {
+    components: {
+        VelFormFooter: require("../../../../components/layout/FormFooter.vue")
+            .default,
+        VelBasic: require("../../../../components/form/basic.vue").default,
+    },
+
+    props: {
+        form: {
+            required: true,
+            type: Object,
+        },
+        submit: {
+            required: true,
+            type: Function,
+        },
+        method: {
+            type: String,
+            default: "post",
+        },
+        resource: {
+            required: true,
+            type: Object,
+        },
+        model: {
+            type: Object,
+            default: null,
+        },
+    },
+
+    computed: {
+        _self() {
+            return this;
+        },
+        segments() {
+            const items = this.resource.form.structure(this);
+            const groups = this.resource.form.groups || {};
+            const segments = [];
+            const groupSegments = {};
+
+            for (const item of items) {
+                if (item.groupKey && groups[item.groupKey]) {
+                    if (groupSegments[item.groupKey]) {
+                        groupSegments[item.groupKey].items.push(item);
+                    } else {
+                        const segment = {
+                            groupKey: item.groupKey,
+                            group: groups[item.groupKey],
+                            items: [item],
+                        };
+                        groupSegments[item.groupKey] = segment;
+                        segments.push(segment);
+                    }
+                } else {
+                    segments.push({ group: null, items: [item] });
+                }
+            }
+
+            return segments;
+        },
+    },
+
+    methods: {
+        formatGroupKey(key) {
+            return key
+                .replace(/[-_]/g, " ")
+                .replace(/\b\w/g, (c) => c.toUpperCase());
+        },
+    },
+};
+</script>

package/_Build/vue/modules/resource/Children/show.vue

@@ -0,0 +1,166 @@
+<template>
+    <!-- Render nested router view if this isn't the deepest route -->
+    <router-view v-if="!deepestRoute" v-slot="{ Component }">
+        <component :is="Component" :depth="depth + 1" />
+    </router-view>
+
+    <template v-else>
+        <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="model">
+                    <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                        <VelPageHeader
+                            :icon="resource.icon"
+                            :title="
+                                resource.modelTitle
+                                    ? resource.modelTitle(this)
+                                    : `${model.name ?? model.id} ${model.last_name ?? ''}`
+                            "
+                        >
+                            <template
+                                v-for="(rendered, index) in renderedActions"
+                                :key="index"
+                            >
+                                <component :is="rendered" />
+                            </template>
+                        </VelPageHeader>
+
+                        <hr class="my-3 hr-muted" />
+
+                        <el-tabs v-model="active" type="card">
+                            <template
+                                v-for="(rendered, index) in renderedTabs"
+                                :key="index"
+                            >
+                                <el-tab-pane :name="index">
+                                    <template #label>
+                                        <span class="align-middle-dive">
+                                            <GIcon
+                                                v-if="rendered.icon"
+                                                class="icon icon--text mr"
+                                                :name="rendered.icon"
+                                            />
+                                            <span>{{
+                                                rendered.label ||
+                                                `Tab ${index + 1}`
+                                            }}</span>
+                                        </span>
+                                    </template>
+                                    <component
+                                        :is="rendered.component || rendered"
+                                    />
+                                </el-tab-pane>
+                            </template>
+                        </el-tabs>
+                    </div>
+                </template>
+                <div v-else class="absolute transform-center text-center">
+                    <VelSpinner />
+                </div>
+            </div>
+        </div>
+    </template>
+</template>
+
+<script>
+import { h } from "vue";
+import axios from "axios";
+import VelSpinner from "../../../components/form/Spinner.vue";
+import VelButton from "../../../components/basic/Button.vue";
+import VelAudit from "../../../components/layout/Audit.vue";
+import { ElTabs, ElTabPane } from "element-plus";
+
+export default {
+    components: {
+        VelPageHeader: require("../../../components/layout/PageHeader.vue")
+            .default,
+        VelSpinner,
+        VelButton,
+        ElTabs,
+        ElTabPane,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+        depth: {
+            type: Number,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            model: null,
+            active: 0,
+        };
+    },
+
+    computed: {
+        // This boolean helps determine if we are the final depth of route being rendered
+        deepestRoute() {
+            return (
+                this.depth ===
+                this.$route.matched.filter((d) => d.components).length
+            );
+        },
+
+        // Compute rendered layout once
+        renderedTabs() {
+            const tabs = this.resource.show.tabs
+                .map((render) => render(this))
+                .filter((d) => d);
+
+            if (this.resource.auditable) {
+                const auditableType =
+                    typeof this.resource.auditable === "string"
+                        ? this.resource.auditable
+                        : this.resource.singular.replace(/ /g, "_");
+
+                tabs.push({
+                    label: "History",
+                    icon: "icon-time",
+                    component: h(VelAudit, {
+                        auditableType,
+                        auditableId: this.model.id,
+                    }),
+                });
+            }
+
+            return tabs;
+        },
+
+        // Compute rendered actions once
+        renderedActions() {
+            return this.resource.show.actions
+                .map((render) => render(this))
+                .filter((d) => d);
+        },
+    },
+
+    mounted() {
+        if (!this.deepestRoute) {
+            return;
+        }
+
+        const showParams = this.resource.api.params.show(this);
+
+        axios
+            .get(
+                `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.id}`]}`,
+                {
+                    params: showParams,
+                },
+            )
+            .then((res) => {
+                this.model = res.data.data;
+            });
+    },
+};
+</script>