@fishawack/lab-velocity 2.0.0-beta.15 → 2.0.0-beta.17

package/README.md

@@ -422,3 +422,77 @@ Structure arrays take objects. The objects require a key only but have other opt
     }
 }
 ```
+
+Generally speaking the only different between admin routes tends to do the columns which within a model are shared. Because of this you can use the utility method `columns` to automatically build out the table, description & form fields using the following syntax.
+
+```js
+import { Resource } from "@fishawack/lab-velocity";
+import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
+
+{
+        api: `/api/posts`,
+        icon: `icon-visibility`,
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write personas"),
+            edit: ({ $store }) => $store.getters.can("write personas"),
+        },
+        ...Resource.columns(
+            [
+                {
+                    key: "name",
+                    sortable: true,
+                },
+                {
+                    key: "description",
+                },
+                {
+                    key: "is_experimental",
+                    label: "Experimental",
+                    render: {
+                        write: () => h(VelCheckbox),
+                    },
+                    initial: ({ model }) => model?.is_experimental ?? false,
+                },
+                {
+                    key: "nested",
+                    label: "Nested",
+                    render: {
+                        read: ({ model }) =>
+                            h("span", model?.nested.name ?? ""),
+                    },
+                    initial: ({ model }) =>
+                        model?.nested.id ?? null,
+                },
+            ]
+        ),
+    },
+```
+
+The columns also takes an optional array as second parameter which defines which values to display on the table view.
+
+```js
+import { Resource } from "@fishawack/lab-velocity";
+import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
+
+const columns [
+    {
+        key: "id"
+    },
+    {
+        key: "name"
+    },
+    {
+        key: "description"
+    }
+];
+
+{
+        api: `/api/posts`,
+        icon: `icon-visibility`,
+        permissions: {
+            create: ({ $store }) => $store.getters.can("write personas"),
+            edit: ({ $store }) => $store.getters.can("write personas"),
+        },
+        ...Resource.columns(columns, ["id", "name"]),
+    },
+```

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

@@ -110,6 +110,38 @@ export function meta(name = "default", properties = {}) {
     );
 }
 
+export function columns(columns = {}, filter = []) {
+    return {
+        table: {
+            structure: columns
+                .filter((column) => filter.includes(column.key))
+                .map((column) => ({
+                    ...column,
+                    render: column.render?.read,
+                })),
+        },
+        description: {
+            structure: columns.map((column) => ({
+                ...column,
+                render: column.render?.read,
+            })),
+        },
+        form: {
+            fields: (props) =>
+                columns.reduce((fields, column) => {
+                    fields[column.key] = column.initial
+                        ? column.initial(props)
+                        : (props.model?.[column.key] ?? null);
+                    return fields;
+                }, {}),
+            structure: columns.map((column) => ({
+                ...column,
+                render: column.render?.write,
+            })),
+        },
+    };
+}
+
 // Export resource
 export function routes(node, name, properties = {}) {
     return [
@@ -156,4 +188,5 @@ export function routes(node, name, properties = {}) {
 export default {
     routes,
     meta,
+    columns,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.15",
+    "version": "2.0.0-beta.17",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",