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

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

@@ -0,0 +1,133 @@
+<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="`${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 renderedLayout"
+                                :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 axios from "axios";
+import VelSpinner from "../../../components/form/Spinner.vue";
+import VelButton from "../../../components/basic/Button.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.length;
+        },
+
+        // Compute rendered layout once
+        renderedLayout() {
+            return this.resource.show.layout.map((render) => render(this));
+        },
+
+        // Compute rendered actions once
+        renderedActions() {
+            return this.resource.show.actions.map((render) => render(this));
+        },
+    },
+
+    mounted() {
+        if (!this.deepestRoute) {
+            return;
+        }
+
+        axios
+            .get(
+                `${this.resource.api.endpoint(this)}/${this.$route.params[`${this.resource.slug}Id`]}`,
+                {
+                    params: this.resource.api.params.show(this),
+                },
+            )
+            .then((res) => {
+                this.model = res.data.data;
+            });
+    },
+};
+</script>

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

@@ -0,0 +1,486 @@
+"use strict";
+
+import { merge, kebabCase, cloneDeepWith } from "lodash";
+import axios from "axios";
+import { h, resolveComponent } from "vue";
+
+import VelTableSorter from "../../components/layout/TableSorter.vue";
+import {
+    ElDescriptions,
+    ElDescriptionsItem,
+    ElPopconfirm,
+    ElNotification,
+} 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);
+    const slug = properties.slug || kebabCase(name);
+
+    return merge(
+        {
+            name,
+            title: properties.title || name[0].toUpperCase() + name.slice(1),
+            singular,
+            singularTitle:
+                properties.singularTitle ||
+                singular[0].toUpperCase() + singular.slice(1),
+            label: singular,
+            multiLabel: name,
+            slug,
+            id: properties.id || `${slug}Id`,
+            icon: `icon-${singular}`,
+            api: {
+                endpoint: () => `/api/${properties.slug || kebabCase(name)}`,
+                params: {
+                    index: () => ({}),
+                    show: () => ({}),
+                },
+            },
+            permissions: {
+                create: () => true,
+                edit: () => true,
+                delete: () => false,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                fields: () => ({}),
+                structure: [],
+            },
+            table: {
+                actions: [
+                    ({ model, resource }, { $router }) =>
+                        h(
+                            VelButton,
+                            {
+                                tag: "a",
+                                size: "small",
+                                type: "primary",
+                                onClick: () => {
+                                    $router.push({
+                                        name: `${resource.slug}.show`,
+                                        params: {
+                                            [resource.id]: model.id,
+                                        },
+                                    });
+                                },
+                            },
+                            () => "View",
+                        ),
+                    ({ model, resource }, props) => {
+                        const { $router } = props;
+
+                        if (resource.permissions.edit(props, { model })) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    size: "small",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.slug}.edit`,
+                                            params: {
+                                                [resource.id]: model.id,
+                                            },
+                                        });
+                                    },
+                                },
+                                () => "Edit",
+                            );
+                        }
+                    },
+                    ({ model, resource }, props) => {
+                        const { $emit } = props;
+
+                        if (resource.permissions.delete(props, { model })) {
+                            return h({
+                                data: () => ({
+                                    loading: false,
+                                }),
+                                render() {
+                                    return h(
+                                        ElPopconfirm,
+                                        {
+                                            title: `Are you sure you want to delete this ${resource.singular}?`,
+                                            confirmButtonText: "Delete",
+                                            cancelButtonText: "Cancel",
+                                            confirmButtonType: "danger",
+                                            onConfirm: async () => {
+                                                this.loading = true;
+
+                                                await axios.delete(
+                                                    `${resource.api.endpoint(props)}/${model.id}`,
+                                                );
+
+                                                $emit("reload");
+
+                                                ElNotification({
+                                                    title: "Success",
+                                                    message: `${resource.singularTitle} with id ${model.id} deleted.`,
+                                                    type: "success",
+                                                });
+
+                                                this.loading = false;
+                                            },
+                                        },
+                                        {
+                                            reference: () =>
+                                                h(
+                                                    VelButton,
+                                                    {
+                                                        tag: "a",
+                                                        type: "danger",
+                                                        size: "small",
+                                                        loading: this.loading,
+                                                    },
+                                                    () => `Delete`,
+                                                ),
+                                        },
+                                    );
+                                },
+                            });
+                        }
+                    },
+                ],
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            description: {
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            index: {
+                structure: (props) => {
+                    const { resource } = props;
+
+                    return {
+                        key: "PIndex",
+                        "json-data": {
+                            ...resource,
+                            tableStructure: resource.table.structure.concat(
+                                resource.table.actions.length
+                                    ? [
+                                          {
+                                              key: "actions",
+                                              render: ({ model }, props) =>
+                                                  h(
+                                                      "div",
+                                                      {
+                                                          class: "flex gap-2",
+                                                      },
+                                                      resource.table.actions.map(
+                                                          (d) =>
+                                                              d(
+                                                                  {
+                                                                      model,
+                                                                      resource,
+                                                                  },
+                                                                  props,
+                                                              ),
+                                                      ),
+                                                  ),
+                                          },
+                                      ]
+                                    : [],
+                            ),
+                            api: resource.api.endpoint(props),
+                        },
+                        apiParams: resource.api.params.index(props),
+                        idKey: resource.id,
+                        "fixed-height": false,
+                        displayActions: false,
+                    };
+                },
+                actions: [
+                    (props) => {
+                        const { resource, $router } = props;
+
+                        if (resource.permissions.create(props)) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    type: "primary",
+                                    size: "large",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.slug}.create`,
+                                        });
+                                    },
+                                },
+                                () => [
+                                    h(resolveComponent("GIcon"), {
+                                        class: "fill-0 mr-0.5 icon--0.5",
+                                        name: "icon-plus",
+                                        embed: true,
+                                        artboard: true,
+                                    }),
+                                    `Create ${resource.singular}`,
+                                ],
+                            );
+                        }
+                    },
+                ],
+                layout: [
+                    (props) => {
+                        const { resource } = props;
+
+                        return h(
+                            VelTableSorter,
+                            resource.index.structure(props),
+                        );
+                    },
+                ],
+            },
+            show: {
+                actions: [
+                    (props) => {
+                        const { resource, model, $router } = props;
+
+                        if (resource.permissions.edit(props, { model })) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    type: "primary",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.slug}.edit`,
+                                            params: {
+                                                [resource.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, { model })) {
+                            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.endpoint(props)}/${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 {
+                            label: "Details",
+                            component: 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
+                                                              ] || "",
+                                                },
+                                            ),
+                                    ),
+                            ),
+                        };
+                    },
+                ],
+            },
+        },
+        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 = {},
+    children = [],
+    isChild = false,
+) {
+    const resource = meta(name, properties);
+
+    return [
+        {
+            path: `${isChild ? "" : "/"}${resource.slug}`,
+            component: node ? "" : require("../resource/parent.vue").default,
+            name,
+            meta: {
+                resource,
+                title: resource.title,
+                icon: resource.icon,
+                breadcrumb: () => resource.title,
+            },
+            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: `:${resource.id}`,
+                    component: node
+                        ? ""
+                        : require("../resource/Children/show.vue").default,
+                    name: `${resource.slug}.show`,
+                    // Remove leading / for nested routes or they'll resolve to the root of the site
+                    children: cloneDeepWith(children, (value, key) => {
+                        if (
+                            key === "path" &&
+                            typeof value === "string" &&
+                            value.startsWith("/")
+                        ) {
+                            return value.slice(1);
+                        }
+                    }),
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
+                },
+                {
+                    path: `:${resource.id}/edit`,
+                    component: node
+                        ? ""
+                        : require("../resource/Children/edit.vue").default,
+                    name: `${resource.slug}.edit`,
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
+                },
+            ],
+        },
+    ];
+}
+
+export default {
+    routes,
+    meta,
+    columns,
+    defaultResource,
+};

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

@@ -0,0 +1,63 @@
+<template>
+    <!-- Only render title once at the shallowest route -->
+    <template v-if="depth === 1">
+        <VelPageTitle :title="resource.title" />
+        <VelBreadcrumbs
+            :items="breadcrumbs"
+            class="mb-8"
+            container-classes="m-0"
+        />
+    </template>
+
+    <router-view
+        :key="$route.path"
+        v-slot="{ Component }"
+        :breadcrumbs="breadcrumbs"
+        :resource="resource"
+    >
+        <component :is="Component" :depth="depth + 1" />
+    </router-view>
+</template>
+
+<script>
+import VelPageTitle from "../../components/layout/pageTitle.vue";
+import VelBreadcrumbs from "../../components/layout/Breadcrumbs.vue";
+
+export default {
+    components: {
+        VelPageTitle,
+        VelBreadcrumbs,
+    },
+
+    props: {
+        depth: {
+            type: Number,
+            default: 1,
+        },
+    },
+
+    computed: {
+        resource() {
+            return this.$route.meta.resource;
+        },
+        breadcrumbs() {
+            return [
+                {
+                    text: "Home",
+                    href: { name: "index" },
+                },
+            ].concat(
+                this.$route.matched
+                    .filter((route) => route.meta?.breadcrumb)
+                    .map((route) => ({
+                        text: route.meta.breadcrumb(this),
+                        href: {
+                            name: route.name,
+                            params: this.$route.params,
+                        },
+                    })),
+            );
+        },
+    },
+};
+</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";