From 77b0f8de080e7cb249334c86fa5057446136801a Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Tue, 8 Apr 2025 10:41:14 +0100 Subject: [PATCH] Bug 38201: Move tableColumns logic to the List component Signed-off-by: Michaela Sieber Signed-off-by: Jonathan Druart Signed-off-by: Lucas Gass --- .../prog/js/vue/components/BaseResource.vue | 120 +--------------- .../prog/js/vue/components/ResourceList.vue | 133 +++++++++++++++++- 2 files changed, 130 insertions(+), 123 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue index 78e2dbae00..0c449f2428 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue @@ -70,6 +70,8 @@ export default { formGroupsDisplayMode: props.formGroupsDisplayMode || null, getToolbarButtons: props.getToolbarButtons || (() => []), appendToShow: props.appendToShow || [], + nameAttr: props.nameAttr || null, + idAttr: props.idAttr || null, }; return { @@ -407,121 +409,6 @@ export default { return [...acc, groupInfo]; }, []); }, - getTableColumns(resourceAttrs) { - let get_lib_from_av = this.get_lib_from_av; - let idAttr = this.idAttr; - - const columns = resourceAttrs - ?.filter(attr => attr.showInTable) - .reduce((acc, attr, i) => { - if (typeof attr.showInTable === "object") { - acc.push(attr.showInTable); - return acc; - } - if (attr.name === this.idAttr) { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return ( - '' + - escape_str(row[attr.name]) + - "" - ); - }, - }); - return acc; - } - if (attr.name === this.nameAttr) { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return ( - '' + - escape_str(row[attr.name]) + - "" - ); - }, - }); - return acc; - } - if (attr.type === "vendor") { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return row.vendor_id != undefined - ? '' + - escape_str(row.vendor.name) + - "" - : ""; - }, - }); - return acc; - } - if (attr.type === "select" && attr.avCat) { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return get_lib_from_av( - attr.avCat, - row[`${attr.name}`] - ); - }, - }); - return acc; - } - if (attr.type === "date") { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return $date(row[`${attr.name}`]); - }, - }); - return acc; - } - if (attr.type === "boolean" || attr.type === "checkbox") { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - render: function (data, type, row, meta) { - return escape_str( - row[`${attr.name}`] ? __("Yes") : __("No") - ); - }, - }); - return acc; - } - if (attr.showInTable) { - acc.push({ - title: attr.label, - data: attr.name, - searchable: true, - orderable: true, - }); - return acc; - } - return acc; - }, []); - return columns; - }, }, computed: { /** @@ -587,9 +474,6 @@ export default { created() { if (this.resourceAttrs) { this.populateAttributesWithAuthorisedValues(this.resourceAttrs); - this.tableOptions.columns = this.getTableColumns( - this.resourceAttrs - ); } }, name: "BaseResource", diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue index 32d95dc08c..19b2bd93e6 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue @@ -21,7 +21,7 @@
import Toolbar from "./Toolbar.vue"; import ToolbarButton from "./ToolbarButton.vue"; -import { ref } from "vue"; +import { ref, inject } from "vue"; import { APIClient } from "../fetch/api-client.js"; import KohaTable from "./KohaTable.vue"; @@ -48,8 +48,12 @@ export default { setup(props) { const table = ref(); + const AVStore = inject("AVStore"); + const { get_lib_from_av } = AVStore; + return { table, + get_lib_from_av, }; }, props: { @@ -62,12 +66,12 @@ export default { doResourceDelete: Function, goToResourceAdd: Function, doResourceSelect: Function, - // tableFilters: { type: Array, default: [] }, - // getFilters: Function, - // filterTable: Function | null, resourceName: String, hasAdditionalFields: { type: Boolean, default: false }, extendedAttributesResourceType: String, + resourceAttrs: Array, + nameAttr: String, + idAttr: String, getToolbarButtons: { type: Function, default: () => [], @@ -145,6 +149,125 @@ export default { }); }); }, + getTableColumns(resourceAttrs) { + let get_lib_from_av = this.get_lib_from_av; + + const columns = resourceAttrs + ?.filter(attr => attr.showInTable) + .reduce((acc, attr, i) => { + if (typeof attr.showInTable === "object") { + acc.push(attr.showInTable); + return acc; + } + if (attr.name === this.idAttr) { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return ( + '' + + escape_str(row[attr.name]) + + "" + ); + }, + }); + return acc; + } + if (attr.name === this.nameAttr) { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return ( + '' + + escape_str(row[attr.name]) + + "" + ); + }, + }); + return acc; + } + if (attr.type === "vendor") { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return row.vendor_id != undefined + ? '' + + escape_str(row.vendor.name) + + "" + : ""; + }, + }); + return acc; + } + if (attr.type === "select" && attr.avCat) { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return get_lib_from_av( + attr.avCat, + row[`${attr.name}`] + ); + }, + }); + return acc; + } + if (attr.type === "date") { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return $date(row[`${attr.name}`]); + }, + }); + return acc; + } + if (attr.type === "boolean" || attr.type === "checkbox") { + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + render: function (data, type, row, meta) { + return escape_str( + row[`${attr.name}`] ? __("Yes") : __("No") + ); + }, + }); + return acc; + } + acc.push({ + title: attr.label, + data: attr.name, + searchable: true, + orderable: true, + }); + return acc; + }, []); + return columns; + }, + }, + computed: { + tableOptionsWithColumns() { + this.tableOptions.columns = this.getTableColumns( + this.resourceAttrs + ); + return this.tableOptions; + }, }, components: { Toolbar, ToolbarButton, KohaTable }, name: "ResourcesList",