From 07983d73785d0a388dc5922179378c3dae4eb913 Mon Sep 17 00:00:00 2001 From: bkfox Date: Thu, 28 Mar 2024 05:26:11 +0100 Subject: [PATCH] formset component --- aircox/static/aircox/js/chunk-common.js | 2 +- assets/src/components/ARows.vue | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index 4e0abc7..e658754 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -155,7 +155,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core \***************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _AList_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AList.vue */ \"./src/components/AList.vue\");\n/* harmony import */ var _ARow_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ARow.vue */ \"./src/components/ARow.vue\");\n\n\nconst Component = {\n extends: _AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n components: {\n ARow: _ARow_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n },\n emits: ['cell', 'colmove'],\n props: {\n ..._AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].props,\n //! Ordered list of columns, as objects with:\n //! - name: item attribute value\n //! - label: display label\n //! - help: help text\n //! - hidden: if true, field is hidden\n columns: Array,\n //! If True, columns are orderable\n columnsOrderable: Boolean\n },\n data() {\n return {\n ...super.data,\n // TODO: add observer\n columns_: [...this.columns],\n extraItem: new this.set.model()\n };\n },\n computed: {\n columnNames() {\n return this.columns_.map(c => c.name);\n },\n columnLabels() {\n return this.columns_.map(c => c.label);\n },\n rowSlots() {\n return Object.keys(this.$slots).filter(x => x.startsWith('row-')).map(x => [x, x.slice(4)]);\n }\n },\n methods: {\n /**\n * Move column using provided event object (as `{from, to}`)\n */\n moveColumn(event) {\n const {\n from,\n to\n } = event;\n const value = this.columns_[from];\n this.columns_.splice(from, 1);\n this.columns_.splice(to, 0, value);\n this.$emit('colmove', event);\n },\n /**\n * React on 'cell' event, re-emitting it with additional values:\n * - `set`: data set\n * - `row`: row index\n *\n * @param {Number} row: row index\n * @param {} data: cell's event data\n */\n onCellEvent(row, event) {\n if (event.name == 'focus') this.focus(event.data, event.cell);\n this.$emit('cell', {\n ...event,\n row,\n set: this.set\n });\n },\n /**\n * Return row component at provided index\n */\n getRow(row) {\n const els = this.$el.querySelectorAll('tr');\n for (var el of els) if (el.__row && row == Number(el.dataset.row)) return el.__row;\n },\n /**\n * Focus on a cell\n */\n focus(row, col, from = null) {\n if (from) row += from.row;\n row = this.getRow(row);\n row && row.focus(col, from);\n }\n }\n};\nComponent.props.itemTag.default = 'tr';\nComponent.props.listTag.default = 'tbody';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Component);\n\n//# sourceURL=webpack://aircox-assets/./src/components/ARows.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _AList_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AList.vue */ \"./src/components/AList.vue\");\n/* harmony import */ var _ARow_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ARow.vue */ \"./src/components/ARow.vue\");\n\n\nconst Component = {\n extends: _AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n components: {\n ARow: _ARow_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n },\n emits: ['cell', 'colmove'],\n props: {\n ..._AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].props,\n //! Ordered list of columns, as objects with:\n //! - name: item attribute value\n //! - label: display label\n //! - help: help text\n //! - hidden: if true, field is hidden\n columns: Array,\n //! If True, columns are orderable\n columnsOrderable: Boolean\n },\n data() {\n return {\n ...super.data,\n // TODO: add observer\n columns_: [...this.columns],\n extraItem: new this.set.model()\n };\n },\n computed: {\n columnNames() {\n return this.columns_.map(c => c.name);\n },\n columnLabels() {\n return this.columns_.reduce((labels, c) => ({\n ...labels,\n [c.name]: c.label\n }), {});\n },\n rowSlots() {\n return Object.keys(this.$slots).filter(x => x.startsWith('row-')).map(x => [x, x.slice(4)]);\n }\n },\n methods: {\n /**\n * Move column using provided event object (as `{from, to}`)\n */\n moveColumn(event) {\n const {\n from,\n to\n } = event;\n const value = this.columns_[from];\n this.columns_.splice(from, 1);\n this.columns_.splice(to, 0, value);\n this.$emit('colmove', event);\n },\n /**\n * React on 'cell' event, re-emitting it with additional values:\n * - `set`: data set\n * - `row`: row index\n *\n * @param {Number} row: row index\n * @param {} data: cell's event data\n */\n onCellEvent(row, event) {\n if (event.name == 'focus') this.focus(event.data, event.cell);\n this.$emit('cell', {\n ...event,\n row,\n set: this.set\n });\n },\n /**\n * Return row component at provided index\n */\n getRow(row) {\n const els = this.$el.querySelectorAll('tr');\n for (var el of els) if (el.__row && row == Number(el.dataset.row)) return el.__row;\n },\n /**\n * Focus on a cell\n */\n focus(row, col, from = null) {\n if (from) row += from.row;\n row = this.getRow(row);\n row && row.focus(col, from);\n }\n }\n};\nComponent.props.itemTag.default = 'tr';\nComponent.props.listTag.default = 'tbody';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Component);\n\n//# sourceURL=webpack://aircox-assets/./src/components/ARows.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), diff --git a/assets/src/components/ARows.vue b/assets/src/components/ARows.vue index fe744f2..92cedfb 100644 --- a/assets/src/components/ARows.vue +++ b/assets/src/components/ARows.vue @@ -72,7 +72,10 @@ const Component = { computed: { columnNames() { return this.columns_.map(c => c.name) }, - columnLabels() { return this.columns_.map(c => c.label) }, + columnLabels() { return this.columns_.reduce( + (labels, c) => ({...labels, [c.name]: c.label}), + {} + )}, rowSlots() { return Object.keys(this.$slots).filter(x => x.startsWith('row-')) .map(x => [x, x.slice(4)])