@fishawack/lab-velocity 2.0.0-beta.14 → 2.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -78,6 +78,17 @@ import { Auth } from "@fishawack/lab-velocity";
78
78
  ];
79
79
  ```
80
80
 
81
+ You can override the default setup for companies & user resources by passing an optional second object to the `adminRoutes` method. See the [resources](#Resources) section below for available options.
82
+
83
+ ```js
84
+ ...Auth.Router.adminRoutes(node, {
85
+ userResource: {
86
+ label: "Custom User label",
87
+ api: `/api/v2/users`,
88
+ }
89
+ })
90
+ ```
91
+
81
92
  ### Configure store
82
93
 
83
94
  ##### store.js
@@ -392,7 +403,7 @@ Structure arrays take objects. The objects require a key only but have other opt
392
403
  },
393
404
  {
394
405
  key: "role",
395
- render: (row) => h("div", "Custom template"),
406
+ render: () => h("div", "Custom template"),
396
407
  },
397
408
  ],
398
409
  },
@@ -411,3 +422,75 @@ Structure arrays take objects. The objects require a key only but have other opt
411
422
  }
412
423
  }
413
424
  ```
425
+
426
+ 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.
427
+
428
+ ```js
429
+ import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
430
+
431
+ {
432
+ api: `/api/posts`,
433
+ icon: `icon-visibility`,
434
+ permissions: {
435
+ create: ({ $store }) => $store.getters.can("write personas"),
436
+ edit: ({ $store }) => $store.getters.can("write personas"),
437
+ },
438
+ ...resourceColumns(
439
+ [
440
+ {
441
+ key: "name",
442
+ sortable: true,
443
+ },
444
+ {
445
+ key: "description",
446
+ },
447
+ {
448
+ key: "is_experimental",
449
+ label: "Experimental",
450
+ render: {
451
+ write: () => h(VelCheckbox),
452
+ },
453
+ initial: ({ model }) => model?.is_experimental ?? false,
454
+ },
455
+ {
456
+ key: "nested",
457
+ label: "Nested",
458
+ render: {
459
+ read: ({ model }) =>
460
+ h("span", model?.nested.name ?? ""),
461
+ },
462
+ initial: ({ model }) =>
463
+ model?.nested.id ?? null,
464
+ },
465
+ ]
466
+ ),
467
+ },
468
+ ```
469
+
470
+ The columns also takes an optional array as second parameter which defines which values to display on the table view.
471
+
472
+ ```js
473
+ import { Checkbox as VelCheckbox } from "@fishawack/lab-velocity";
474
+
475
+ const columns [
476
+ {
477
+ key: "id"
478
+ },
479
+ {
480
+ key: "name"
481
+ },
482
+ {
483
+ key: "description"
484
+ }
485
+ ];
486
+
487
+ {
488
+ api: `/api/posts`,
489
+ icon: `icon-visibility`,
490
+ permissions: {
491
+ create: ({ $store }) => $store.getters.can("write personas"),
492
+ edit: ({ $store }) => $store.getters.can("write personas"),
493
+ },
494
+ ...resourceColumns(columns, ["id", "name"]),
495
+ },
496
+ ```
@@ -22,7 +22,9 @@
22
22
  >
23
23
  <!-- Support a custom render function -->
24
24
  <template v-if="item.render" #default="scope">
25
- <component :is="item.render(scope.row, this)" />
25
+ <component
26
+ :is="item.render({ model: scope.row, ...this })"
27
+ />
26
28
  </template>
27
29
  </el-table-column>
28
30
  </template>
@@ -48,15 +48,15 @@ export default [
48
48
  },
49
49
  {
50
50
  key: "role",
51
- render: (row) =>
51
+ render: ({ model }) =>
52
52
  h(
53
- row.roles.length === 1 ? Chip : Chips,
54
- row.roles.length === 1
53
+ model.roles.length === 1 ? Chip : Chips,
54
+ model.roles.length === 1
55
55
  ? {
56
- name: row.roles[0].name,
57
- label: row.roles[0].label,
56
+ name: model.roles[0].name,
57
+ label: model.roles[0].label,
58
58
  }
59
- : { array: row.roles },
59
+ : { array: model.roles },
60
60
  ),
61
61
  },
62
62
  ],
@@ -125,7 +125,7 @@ export default [
125
125
  {
126
126
  key: "company",
127
127
  sortable: true,
128
- render: (model) =>
128
+ render: ({ model }) =>
129
129
  h(resolveComponent("router-link"), {
130
130
  class: "underline",
131
131
  to: {
@@ -137,23 +137,23 @@ export default [
137
137
  },
138
138
  {
139
139
  key: "role",
140
- render: (row) =>
140
+ render: ({ model }) =>
141
141
  h(
142
- !row.overrides_roles_and_permissions ||
143
- row.roles.length === 1
142
+ !model.overrides_roles_and_permissions ||
143
+ model.roles.length === 1
144
144
  ? Chip
145
145
  : Chips,
146
- !row.overrides_roles_and_permissions
146
+ !model.overrides_roles_and_permissions
147
147
  ? {
148
148
  name: "inherited",
149
149
  label: "Inherited",
150
150
  }
151
- : row.roles.length === 1
151
+ : model.roles.length === 1
152
152
  ? {
153
- name: row.roles[0].name,
154
- label: row.roles[0].label,
153
+ name: model.roles[0].name,
154
+ label: model.roles[0].label,
155
155
  }
156
- : { array: row.roles },
156
+ : { array: model.roles },
157
157
  ),
158
158
  },
159
159
  ],
@@ -18,6 +18,7 @@
18
18
  :submit="submit"
19
19
  :method="method"
20
20
  :resource="resource"
21
+ :model="model"
21
22
  />
22
23
  </div>
23
24
  </div>
@@ -48,6 +48,10 @@ export default {
48
48
  required: true,
49
49
  type: Object,
50
50
  },
51
+ model: {
52
+ type: Object,
53
+ default: null,
54
+ },
51
55
  },
52
56
  };
53
57
  </script>
@@ -110,6 +110,38 @@ export function meta(name = "default", properties = {}) {
110
110
  );
111
111
  }
112
112
 
113
+ export function columns(columns = {}, filter = []) {
114
+ return {
115
+ table: {
116
+ structure: columns
117
+ .filter((column) => filter.includes(column.key))
118
+ .map((column) => ({
119
+ ...column,
120
+ render: column.render?.read,
121
+ })),
122
+ },
123
+ description: {
124
+ structure: columns.map((column) => ({
125
+ ...column,
126
+ render: column.render?.read,
127
+ })),
128
+ },
129
+ form: {
130
+ fields: (props) =>
131
+ columns.reduce((fields, column) => {
132
+ fields[column.key] = column.initial
133
+ ? column.initial(props)
134
+ : (props.model?.[column.key] ?? null);
135
+ return fields;
136
+ }, {}),
137
+ structure: columns.map((column) => ({
138
+ ...column,
139
+ render: column.render?.write,
140
+ })),
141
+ },
142
+ };
143
+ }
144
+
113
145
  // Export resource
114
146
  export function routes(node, name, properties = {}) {
115
147
  return [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fishawack/lab-velocity",
3
- "version": "2.0.0-beta.14",
3
+ "version": "2.0.0-beta.16",
4
4
  "description": "Avalere Health branded style system",
5
5
  "scripts": {
6
6
  "setup": "npm ci || npm i && npm run content",