@fishawack/lab-velocity 2.0.0-beta.12 → 2.0.0-beta.13

package/README.md

@@ -219,3 +219,120 @@ HYDRATE_LOGO_REVERSE Name of the logo when color scheme is reversed (default: to
 HYDRATE_REDIRECT Name of the route name to redirect to after login (default: index)
 HYDRATE_CONTACT Email for contact us button (default: mailto:det@avalerehealth.com)
 ```
+
+## Resources
+
+To reduce the amount of template code needed you can import a fairly standard set of route files for index, show, create, edit & form via the resource module.
+
+##### routes.js
+
+```js
+import { Resource } from "@fishawack/lab-velocity";
+
+[
+    // ... other routes
+    ...Resource.routes(node, "posts"),
+];
+```
+
+A third optional object can be passed for meta data that contains all of the overrides to customize the full rendering of these resource files. The default meta object is below.
+
+```js
+// Name is the first param, properties is the optional second param
+export function meta(name, 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,
+            pageLink: name,
+            api: `/api/${name}`,
+            permissions: {
+                create: true,
+                edit: true,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                fields: () => ({}),
+            },
+            table: {
+                structure: [],
+            },
+            index: {
+                actions: [],
+                structure: [
+                    {
+                        render: ({ resource }) =>
+                            h(VTableSorter, {
+                                key: "PIndex",
+                                "json-data": {
+                                    ...resource,
+                                    tableStructure: resource.table.structure,
+                                },
+                                defaults: resource.defaults,
+                                "fixed-height": false,
+                                "display-edit-action":
+                                    resource.permissions.create,
+                            }),
+                    },
+                ],
+            },
+            show: {
+                actions: [],
+                structure: [],
+            },
+            defaults: "",
+            icon: `icon-${singular}`,
+        },
+        properties,
+    );
+}
+```
+
+The structure arrays typically take a simple payload for their built in rendering but allow a render function for more complex layouts i.e
+
+```js
+import { h, resolveComponent } from "vue";
+
+{
+    // ...
+    show: {
+        structure: [
+            [
+                {
+                    label: "Email",
+                    key: "email",
+                },
+                {
+                    label: "Company",
+                    render: ({ model }) =>
+                        h(resolveComponent("router-link"), {
+                            class: "underline",
+                            to: {
+                                name: "companies.show",
+                                params: { id: model.company_id },
+                            },
+                            text: model.company.name,
+                        }),
+                },
+            ],
+            {
+                render: ({ model }) =>
+                    h(VelFormRole, {
+                        overrides: model.overrides_roles_and_permissions,
+                        form: { roles: model.roles.map((d) => d.id) },
+                        readonly: true,
+                    }),
+            },
+        ],
+    },
+}
+```

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

@@ -0,0 +1,76 @@
+<template>
+    <VBreadcrumbs :items="breadcrumbs" 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">Create {{ resource.singular }}</h2>
+            </div>
+            <div class="mt grid__1/2">
+                <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: {
+        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,
+            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 {
+                try {
+                    let res = await this.form.post(`${this.resource.api}`);
+
+                    this.$router.replace({
+                        name: `${this.resource.name}.show`,
+                        params: { id: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,109 @@
+<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"
+                />
+            </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.name}.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.name}.show`,
+                        params: { id: res.data.id },
+                    });
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,51 @@
+<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="(row, index) in resource.index.actions"
+                    :key="index"
+                >
+                    <template v-if="row.render">
+                        <component :is="row.render(this)" />
+                    </template>
+                </template>
+            </div>
+
+            <template
+                v-for="(row, index) in resource.index.structure"
+                :key="index"
+            >
+                <template v-if="row.render">
+                    <component :is="row.render(this)" />
+                </template>
+            </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,53 @@
+<!-- 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,
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,145 @@
+<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="(row, index) in resource.show.actions"
+                            :key="index"
+                        >
+                            <template v-if="row.render">
+                                <component :is="row.render(this)" />
+                            </template>
+                        </template>
+                        <VelButton
+                            v-if="resource.permissions.edit"
+                            tag="a"
+                            type="primary"
+                            @click="
+                                $router.push({
+                                    name: `${resource.name}.edit`,
+                                    param: model.id,
+                                })
+                            "
+                        >
+                            <GIcon
+                                class="fill-0 mr-0.5 icon--0.5"
+                                name="icon-edit"
+                                embed
+                                artboard
+                            />
+                            Edit {{ resource.singular }}
+                        </VelButton>
+                    </VelPageHeader>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <template
+                        v-for="(row, index) in resource.show.structure"
+                        :key="index"
+                    >
+                        <template v-if="row.render">
+                            <component :is="row.render(this)" />
+                        </template>
+                        <el-descriptions v-else border column="1">
+                            <el-descriptions-item
+                                v-for="(item, i) in row"
+                                :key="i"
+                                :label-width="'20%'"
+                            >
+                                <template #label>
+                                    {{
+                                        item.label ||
+                                        item.key[0].toUpperCase() +
+                                            item.key.slice(1)
+                                    }}
+                                </template>
+
+                                <template v-if="item.render">
+                                    <component :is="item.render(this)" />
+                                </template>
+                                <template v-else>
+                                    {{ model[item.key] }}
+                                </template>
+                            </el-descriptions-item>
+                        </el-descriptions>
+
+                        <hr
+                            v-if="index < resource.show.structure.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";
+import { ElDescriptions, ElDescriptionsItem } from "element-plus";
+
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        VelPageHeader: require("../../../components/layout/PageHeader.vue")
+            .default,
+        VelSpinner,
+        VelButton,
+        ElDescriptions,
+        ElDescriptionsItem,
+    },
+
+    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.name}.show`,
+                        param: this.model.id,
+                    },
+                    text: this.model.name,
+                });
+            });
+    },
+};
+</script>

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

@@ -0,0 +1,112 @@
+"use strict";
+
+import { merge } from "lodash";
+
+import { h } from "vue";
+
+import VTableSorter from "../../components/layout/TableSorter.vue";
+
+export function meta(name, 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,
+            pageLink: name,
+            api: `/api/${name}`,
+            permissions: {
+                create: true,
+                edit: true,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                fields: () => ({}),
+            },
+            table: {
+                structure: [],
+            },
+            index: {
+                actions: [],
+                structure: [
+                    {
+                        render: ({ resource }) =>
+                            h(VTableSorter, {
+                                key: "PIndex",
+                                "json-data": {
+                                    ...resource,
+                                    tableStructure: resource.table.structure,
+                                },
+                                defaults: resource.defaults,
+                                "fixed-height": false,
+                                "display-edit-action":
+                                    resource.permissions.create,
+                            }),
+                    },
+                ],
+            },
+            show: {
+                actions: [],
+                structure: [],
+            },
+            defaults: "",
+            icon: `icon-${singular}`,
+        },
+        properties,
+    );
+}
+
+// Export resource
+export function routes(node, name, properties = {}) {
+    return [
+        {
+            path: `/${name}`,
+            component: node ? "" : require("../resource/parent.vue").default,
+            meta: {
+                resource: meta(name, properties),
+            },
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/index.vue").default,
+                    name: `${name}.index`,
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/create.vue").default,
+                    name: `${name}.create`,
+                },
+                {
+                    path: ":id",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/show.vue").default,
+                    name: `${name}.show`,
+                },
+                {
+                    path: ":id/edit",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/edit.vue").default,
+                    name: `${name}.edit`,
+                },
+            ],
+        },
+    ];
+}
+
+export default {
+    routes,
+    meta,
+};

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.name}.index`,
+                    },
+                    text: this.resource.title,
+                },
+            ];
+        },
+    },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.12",
+    "version": "2.0.0-beta.13",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -64,7 +64,8 @@
         "*.scss",
         "components",
         "_Build/vue/components",
-        "_Build/vue/modules/AuthModule"
+        "_Build/vue/modules/AuthModule",
+        "_Build/vue/modules/resource"
     ],
     "main": "index.js",
     "release": {