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

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

@@ -0,0 +1,110 @@
+<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">
+            <div class="grid__1/1 mb-4">
+                <h2 class="h1">Edit {{ resource.singular }}</h2>
+            </div>
+            <div class="grid__1/2">
+                <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: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        XForm: require("./partials/form.vue").default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            form: null,
+            model: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+            method: "patch",
+        };
+    },
+
+    beforeMount() {
+        this.form = new Form(this.resource.form.fields(this), {
+            resetOnSuccess: false,
+        });
+    },
+
+    async mounted() {
+        window.axios
+            .get(
+                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+            )
+            .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;
+                    },
+                );
+
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: `${this.resource.slug}.show`,
+                        param: this.model.id,
+                    },
+                    text: this.model.name,
+                });
+            });
+    },
+
+    methods: {
+        async submit() {
+            if (this.resource.form.submit) {
+                await this.resource.form.submit(this);
+            } else {
+                try {
+                    let res = await this.form.patch(
+                        `${this.resource.api}/${this.model.id}`,
+                    );
+
+                    this.$router.replace({
+                        name: `${this.resource.slug}.show`,
+                        params: { id: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+    <VBreadcrumbs :items="breadcrumbs" />
+
+    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
+        <div class="grid__1/1">
+            <h2 class="h1 pb-4">
+                {{ breadcrumbs[breadcrumbs.length - 1].text }}
+            </h2>
+
+            <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 {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,57 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+    <form @submit.prevent="submit">
+        <template v-for="(item, index) in resource.form.structure" :key="index">
+            <component
+                :is="item.render ? item.render(this) : 'VelBasic'"
+                v-model="form[item.key]"
+                :type="item.type || 'text'"
+                :error="form.errors"
+                :name="item.key"
+                :placeholder="
+                    item.placeholder ||
+                    item.key[0].toUpperCase() + item.key.slice(1)
+                "
+                :label="
+                    item.label || item.key[0].toUpperCase() + item.key.slice(1)
+                "
+                v-bind="item"
+            />
+        </template>
+
+        <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,
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,97 @@
+<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="model">
+                <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                    <VelPageHeader
+                        :icon="resource.icon"
+                        :title="`${model.name} ${model.last_name ?? ''}`"
+                    >
+                        <template
+                            v-for="(render, index) in resource.show.actions"
+                            :key="index"
+                        >
+                            <component :is="render(this)" />
+                        </template>
+                    </VelPageHeader>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <template
+                        v-for="(render, index) in resource.show.layout"
+                        :key="index"
+                    >
+                        <component :is="render(this)" />
+
+                        <hr
+                            v-if="index < resource.show.layout.length - 1"
+                            class="my-3 hr-muted"
+                        />
+                    </template>
+                </div>
+            </template>
+
+            <div v-else class="absolute transform-center text-center">
+                <VelSpinner />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import VelSpinner from "../../../components/form/Spinner.vue";
+import VelButton from "../../../components/basic/Button.vue";
+
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        VelPageHeader: require("../../../components/layout/PageHeader.vue")
+            .default,
+        VelSpinner,
+        VelButton,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            model: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+        };
+    },
+
+    mounted() {
+        axios
+            .get(
+                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+            )
+            .then((res) => {
+                this.model = res.data.data;
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: `${this.resource.slug}.show`,
+                        param: this.model.id,
+                    },
+                    text: this.model.name,
+                });
+            });
+    },
+};
+</script>

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

@@ -0,0 +1,280 @@
+"use strict";
+
+import { merge, kebabCase } from "lodash";
+import axios from "axios";
+import { h, resolveComponent } from "vue";
+
+import VTableSorter from "../../components/layout/TableSorter.vue";
+import { ElDescriptions, ElDescriptionsItem, ElPopconfirm } from "element-plus";
+import VelButton from "../../components/basic/Button.vue";
+
+export const defaultResource = meta();
+
+export function meta(name = "default", properties = {}) {
+    const singular = properties.singular || name.slice(0, -1);
+
+    return merge(
+        {
+            name,
+            title: properties.title || name[0].toUpperCase() + name.slice(1),
+            singular,
+            label: singular,
+            multiLabel: name,
+            slug: properties?.slug || kebabCase(name),
+            api: `/api/${properties?.slug || kebabCase(name)}`,
+            permissions: {
+                create: () => true,
+                edit: () => true,
+                delete: () => false,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                fields: () => ({}),
+                structure: [],
+            },
+            table: {
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            description: {
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            index: {
+                actions: [],
+                layout: [
+                    (props) => {
+                        const { resource } = props;
+
+                        return h(VTableSorter, {
+                            key: "PIndex",
+                            "json-data": {
+                                ...resource,
+                                tableStructure: resource.table.structure,
+                            },
+                            defaults: resource.defaults,
+                            "fixed-height": false,
+                            "display-edit-action":
+                                resource.permissions.create(props),
+                        });
+                    },
+                ],
+            },
+            show: {
+                actions: [
+                    (props) => {
+                        const { resource, model, $router } = props;
+
+                        if (resource.permissions.edit(props)) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    type: "primary",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.slug}.edit`,
+                                            params: { id: model.id },
+                                        });
+                                    },
+                                },
+                                () => [
+                                    h(resolveComponent("GIcon"), {
+                                        class: "fill-0 mr-0.5 icon--0.5",
+                                        name: "icon-edit",
+                                        embed: true,
+                                        artboard: true,
+                                    }),
+                                    `Edit ${resource.singular}`,
+                                ],
+                            );
+                        }
+                    },
+                    (props) => {
+                        const { resource, model, $router } = props;
+
+                        if (resource.permissions.delete(props)) {
+                            return h(
+                                ElPopconfirm,
+                                {
+                                    title: `Are you sure you want to delete this ${resource.singular}?`,
+                                    confirmButtonText: "Delete",
+                                    cancelButtonText: "Cancel",
+                                    confirmButtonType: "danger",
+                                    onConfirm: async () => {
+                                        await axios.delete(
+                                            `${resource.api}/${model.id}`,
+                                        );
+
+                                        $router.push({
+                                            name: `${resource.slug}.index`,
+                                        });
+                                    },
+                                },
+                                {
+                                    reference: () =>
+                                        h(
+                                            VelButton,
+                                            {
+                                                tag: "a",
+                                                type: "danger",
+                                            },
+                                            () => [
+                                                h(resolveComponent("GIcon"), {
+                                                    class: "fill-0 mr-0.5 icon--0.5",
+                                                    name: "icon-trash",
+                                                    embed: true,
+                                                    artboard: true,
+                                                }),
+                                                `Delete ${resource.singular}`,
+                                            ],
+                                        ),
+                                },
+                            );
+                        }
+                    },
+                ],
+                layout: [
+                    (props) => {
+                        const { resource, model } = props;
+
+                        return h(
+                            ElDescriptions,
+                            {
+                                border: true,
+                                column: 1,
+                            },
+                            () =>
+                                resource.description.structure.map(
+                                    (item, index) =>
+                                        h(
+                                            ElDescriptionsItem,
+                                            {
+                                                key: index,
+                                                labelWidth: "20%",
+                                            },
+                                            {
+                                                label: () =>
+                                                    item.label ||
+                                                    item.key[0].toUpperCase() +
+                                                        item.key.slice(1),
+                                                default: () =>
+                                                    item.render
+                                                        ? h(item.render(props))
+                                                        : model?.[item.key] ||
+                                                          "",
+                                            },
+                                        ),
+                                ),
+                        );
+                    },
+                ],
+            },
+            defaults: "",
+            icon: `icon-${singular}`,
+        },
+        properties,
+    );
+}
+
+export function columns(columns = []) {
+    return {
+        table: {
+            structure: columns
+                .filter((column) => !column.filter?.table)
+                .map((column) => ({
+                    ...column,
+                    render: column.render?.read || column.render?.table,
+                })),
+        },
+        description: {
+            structure: columns
+                .filter((column) => !column.filter?.description)
+                .map((column) => ({
+                    ...column,
+                    render: column.render?.read || column.render?.description,
+                })),
+        },
+        form: {
+            fields: (props) =>
+                columns
+                    .filter((column) => !column.filter?.form)
+                    .reduce((fields, column) => {
+                        fields[column.key] = column.initial
+                            ? column.initial(props)
+                            : (props.model?.[column.key] ?? null);
+                        return fields;
+                    }, {}),
+            structure: columns
+                .filter((column) => !column.filter?.form)
+                .map((column) => ({
+                    ...column,
+                    render: column.render?.write || column.render?.form,
+                })),
+        },
+    };
+}
+
+// Export resource
+export function routes(node, name, properties = {}) {
+    const resource = meta(name, properties);
+
+    return [
+        {
+            path: `/${resource.slug}`,
+            component: node ? "" : require("../resource/parent.vue").default,
+            name,
+            meta: {
+                resource,
+                title: resource.title,
+                icon: resource.icon,
+            },
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/index.vue").default,
+                    name: `${resource.slug}.index`,
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/create.vue").default,
+                    name: `${resource.slug}.create`,
+                },
+                {
+                    path: ":id",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/show.vue").default,
+                    name: `${resource.slug}.show`,
+                },
+                {
+                    path: ":id/edit",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/edit.vue").default,
+                    name: `${resource.slug}.edit`,
+                },
+            ],
+        },
+    ];
+}
+
+export default {
+    routes,
+    meta,
+    columns,
+};

package/_Build/vue/modules/resource/parent.vue

@@ -0,0 +1,41 @@
+<template>
+    <PageTitle :title="resource.title" />
+
+    <router-view
+        :key="$route.path"
+        :breadcrumbs="breadcrumbs"
+        :resource="resource"
+    />
+</template>
+
+<script>
+import PageTitle from "../../components/layout/pageTitle.vue";
+
+export default {
+    components: {
+        PageTitle,
+    },
+
+    computed: {
+        resource() {
+            return this.$route.meta.resource;
+        },
+        breadcrumbs() {
+            return [
+                {
+                    href: {
+                        name: "index",
+                    },
+                    text: "Home",
+                },
+                {
+                    href: {
+                        name: `${this.resource.slug}.index`,
+                    },
+                    text: this.resource.title,
+                },
+            ];
+        },
+    },
+};
+</script>

package/_base.scss

@@ -3,4 +3,3 @@
 @import "element-plus/theme-chalk/el-message";
 @import "element-plus/theme-chalk/el-notification";
 @import "element-plus/theme-chalk/el-overlay";
-@import "./components/input.scss";

package/_defaults.scss

@@ -5,16 +5,5 @@
 $colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$spacing: 8px;
-.container {
-    margin-left: 0;
-    padding: 0px 5 * $spacing;
-}
-
-body {
-    font-family: $primaryFont, sans-serif;
-    font-size: get-ratio(16px);
-    line-height: 1.5;
-    color: $color1;
-    background-color: $color3;
-}
+$fontColor: $color1;
+$fontFamily: $primaryFont, sans-serif;

package/_variables.scss

@@ -1,7 +1,6 @@
 @import "@fishawack/lab-ui/_variables.scss";
-// Set global variables here, e.g $color6: red;
-@import "./modules/AuthVariables";
 
+// Set global variables here, e.g $color6: red;
 $primaryFont: "Inter";
 $primaryFontThin: "Inter-Thin";
 $primaryFontExtraLight: "Inter-ExtraLight";
@@ -10,11 +9,10 @@ $primaryFontRegular: "Inter-Regular";
 $primaryFontMedium: "Inter-Medium";
 $primaryFontSemiBold: "Inter-SemiBold";
 $primaryFontBold: "Inter-Bold";
-
 $secondaryFont: "NotoSerif";
 $secondaryFontMedium: "NotoSerif-Medium";
-// Colors
 
+// Colors
 $color1: #2d2d2d;
 $color2: #333333;
 $color3: #f7f7f7;
@@ -29,3 +27,10 @@ $color11: #8c8c8c; //Used
 $color12: #5c5c5c;
 $color13: #3c976e;
 $colorAlert: #d53a3a;
+
+// Spacing
+$spacing: 8px;
+
+// Auth
+$am-spacing: 8px;
+$am-highlight: #3c976e;

package/components/_alert.scss

@@ -0,0 +1,5 @@
+@import "element-plus/theme-chalk/el-alert";
+
+.vel-alert {
+    --el-color-error: #d53a3a;
+}