From 1e78d8a8312efd0b5e7ca950bc8f871c77dfd9e8 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Date: Thu, 6 Feb 2025 15:11:41 +0000
Subject: [PATCH] Bug 38201: Move filters to a slot and dynamically assign
 resource component props"

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../RecordSources/RecordSourcesResource.vue   |  4 -
 .../prog/js/vue/components/BaseResource.vue   | 92 ++++++++++++-------
 .../vue/components/ERM/AgreementResource.vue  |  7 +-
 .../ERM/EHoldingsLocalPackageResource.vue     | 11 ---
 .../ERM/EHoldingsLocalTitleResource.vue       |  8 --
 .../js/vue/components/ERM/LicenseResource.vue |  7 --
 .../prog/js/vue/components/ResourceList.vue   | 38 ++------
 .../js/vue/components/ResourceListFilters.vue | 39 ++++++++
 8 files changed, 106 insertions(+), 100 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceListFilters.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/RecordSourcesResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/RecordSourcesResource.vue
index 29922de084..6fe5828719 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/RecordSourcesResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/RecordSources/RecordSourcesResource.vue
@@ -127,10 +127,6 @@ export default {
                 },
             ];
         },
-        getTableFilters() {
-            return [];
-        },
-        async filterTable(filters, table, embedded = false) {},
     },
     name: "RecordSourcesResource",
 };
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 880e4fa685..1b726eab40 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
@@ -2,50 +2,36 @@
     <ResourceList
         v-if="routeAction === 'list'"
         v-bind="{
-            apiClient,
-            i18n,
-            tableOptions,
-            goToResourceShow,
-            goToResourceEdit,
-            doResourceDelete,
-            goToResourceAdd,
-            doResourceSelect,
-            tableFilters,
-            getFilters,
-            filterTable,
-            tableUrl,
-            hasAdditionalFields,
-            extendedAttributesResourceType,
-            ...(additionalProps && { ...additionalProps }),
+            ...passCommonProps(),
+            ...optionalResourceProps,
         }"
         @select-resource="$emit('select-resource', $event)"
-    />
+    >
+        <template #filters="{ table }">
+            <ResourceListFilters
+                v-if="optionalResourceProps.resourceListFiltersRequired"
+                :tableFilters="tableFilters"
+                :embedded="optionalResourceProps.embedded"
+                :filterTable="filterTable"
+                :getFilters="getFilters"
+                :table="table"
+            />
+        </template>
+    </ResourceList>
     <ResourceShow
         v-if="routeAction === 'show'"
         v-bind="{
-            idAttr,
-            apiClient,
-            i18n,
-            resourceAttrs,
-            listComponent,
-            goToResourceEdit,
-            doResourceDelete,
-            resourceName,
-            getFieldGroupings,
+            ...passCommonProps(),
+            ...optionalResourceProps,
         }"
     />
     <ResourceFormAdd
         v-if="['add', 'edit'].includes(routeAction)"
         v-bind="{
-            idAttr,
-            apiClient,
-            i18n,
-            resourceAttrs,
-            listComponent,
+            ...passCommonProps(),
             resource: newResource,
             onSubmit,
-            resourceName,
-            getFieldGroupings,
+            ...optionalResourceProps,
         }"
     />
 </template>
@@ -53,12 +39,18 @@
 <script>
 import { inject } from "vue";
 import { build_url } from "../composables/datatables";
+import ResourceListFilters from "./ResourceListFilters.vue";
 import ResourceShow from "./ResourceShow.vue";
 import ResourceFormAdd from "./ResourceFormAdd.vue";
 import ResourceList from "./ResourceList.vue";
 
 export default {
-    components: { ResourceShow, ResourceFormAdd, ResourceList },
+    components: {
+        ResourceListFilters,
+        ResourceShow,
+        ResourceFormAdd,
+        ResourceList,
+    },
     setup(props) {
         const { setConfirmationDialog, setMessage, setError, setWarning } =
             inject("mainStore");
@@ -69,6 +61,14 @@ export default {
         const format_date = $date;
         const patron_to_html = $patron_to_html;
 
+        const optionalResourceProps = {
+            embedded: props.embedded || null,
+            extendedAttributesResourceType:
+                props.extendedAttributesResourceType || null,
+            resourceListFiltersRequired:
+                props.resourceListFiltersRequired || null,
+        };
+
         return {
             ...props,
             setConfirmationDialog,
@@ -82,7 +82,7 @@ export default {
             get_lib_from_av,
             map_av_dt_filter,
             build_url,
-            additionalProps: props.additionalProps || {},
+            optionalResourceProps,
         };
     },
     data() {
@@ -91,6 +91,26 @@ export default {
         };
     },
     methods: {
+        passCommonProps() {
+            const commonProps = {
+                idAttr: this.idAttr,
+                apiClient: this.apiClient,
+                i18n: this.i18n,
+                tableOptions: this.tableOptions,
+                goToResourceShow: this.goToResourceShow,
+                goToResourceEdit: this.goToResourceEdit,
+                doResourceDelete: this.doResourceDelete,
+                goToResourceAdd: this.goToResourceAdd,
+                doResourceSelect: this.doResourceSelect,
+                hasAdditionalFields: this.hasAdditionalFields,
+                getFieldGroupings: this.getFieldGroupings,
+                resourceAttrs: this.resourceAttrs,
+                listComponent: this.listComponent,
+                resourceName: this.resourceName,
+            };
+
+            return commonProps;
+        },
         /**
          * Navigates to the show page of the given resource.
          *
@@ -254,6 +274,10 @@ export default {
             });
             return filterOptions;
         },
+        // This is a default method, which can be overridden at the resource level
+        getTableFilters() {
+            return [];
+        },
         getFieldGroupings(component, resource) {
             const displayProperty = `hideIn${component}`;
             const attributesToConsider = this.resourceAttrs.filter(
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
index 55cfc269d8..eff8250300 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementResource.vue
@@ -41,10 +41,9 @@ export default {
                     displayNameLowerCase: __("agreement"),
                     displayNamePlural: __("agreements"),
                 },
-                additionalProps: {
-                    embedded: props.embedded,
-                },
+                embedded: props.embedded,
                 extendedAttributesResourceType: "agreement",
+                resourceListFiltersRequired: true,
                 av_agreement_statuses,
                 av_agreement_closure_reasons,
                 av_agreement_renewal_priorities,
@@ -526,7 +525,7 @@ export default {
                     ],
                 },
                 {
-                    name: "packages",
+                    name: "agreement_packages",
                     type: "component",
                     componentPath: null,
                     showElement: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageResource.vue
index c7e6a3294a..faf4a3abdc 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackageResource.vue
@@ -373,17 +373,6 @@ export default {
                 },
             ];
         },
-        getTableFilters() {
-            return [];
-        },
-        tableUrl(filters) {
-            let url = this.getResourceTableUrl();
-            return url;
-        },
-        async filterTable(filters, table, embedded = false) {},
-        getToolbarButtons() {
-            return [];
-        },
         getRelationshipTableColumns() {
             const get_lib_from_av = this.get_lib_from_av;
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitleResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitleResource.vue
index 650c6537bd..9db617f8f3 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitleResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitleResource.vue
@@ -508,14 +508,6 @@ export default {
                 },
             ];
         },
-        getTableFilters() {
-            return [];
-        },
-        tableUrl(filters) {
-            let url = this.getResourceTableUrl();
-            return url;
-        },
-        async filterTable(filters, table, embedded = false) {},
         getToolbarButtons() {
             return [
                 {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicenseResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicenseResource.vue
index 0cdc18338a..e5ba9f9e9f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicenseResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicenseResource.vue
@@ -317,9 +317,6 @@ export default {
         };
     },
     methods: {
-        tableUrl() {
-            return this.getResourceTableUrl();
-        },
         checkForm(license) {
             let errors = [];
 
@@ -487,10 +484,6 @@ export default {
                 },
             ];
         },
-        getTableFilters() {
-            return [];
-        },
-        async filterTable(filters, table, embedded = false) {},
     },
     name: "LicenseResource",
 };
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 197a3385bc..5503ba2e41 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
@@ -15,27 +15,9 @@
                 :title="button.title"
             />
         </Toolbar>
-        <fieldset
-            v-if="tableFilters?.length > 0 && resourceCount > 0"
-            class="filters"
-        >
-            <template
-                v-for="(filter, index) in tableFilters"
-                v-bind:key="index"
-            >
-                <FormElement
-                    :resource="filters"
-                    :attr="filter"
-                    :index="index"
-                />
-            </template>
-            <input
-                @click="filterTable(filters, table, embedded)"
-                id="filterTable"
-                type="button"
-                :value="$__('Filter')"
-            />
-        </fieldset>
+        <template v-if="resourceCount > 0">
+            <slot name="filters" :table="table" />
+        </template>
         <div v-if="resourceCount > 0" class="page-section">
             <KohaTable
                 ref="table"
@@ -80,10 +62,9 @@ export default {
         doResourceDelete: Function,
         goToResourceAdd: Function,
         doResourceSelect: Function,
-        tableFilters: { type: Array, default: [] },
-        getFilters: Function,
-        filterTable: Function,
-        tableUrl: Function,
+        // tableFilters: { type: Array, default: [] },
+        // getFilters: Function,
+        // filterTable: Function | null,
         hasAdditionalFields: { type: Boolean, default: false },
         extendedAttributesResourceType: String,
         getToolbarButtons: {
@@ -168,10 +149,3 @@ export default {
     name: "ResourcesList",
 };
 </script>
-
-<style scoped>
-.filters > input[type="checkbox"],
-.filters > input[type="button"] {
-    margin-left: 1rem;
-}
-</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceListFilters.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceListFilters.vue
new file mode 100644
index 0000000000..e0c4367703
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceListFilters.vue
@@ -0,0 +1,39 @@
+<template>
+    <fieldset v-if="tableFilters?.length > 0" class="filters">
+        <template v-for="(filter, index) in tableFilters" v-bind:key="index">
+            <FormElement :resource="filters" :attr="filter" :index="index" />
+        </template>
+        <input
+            @click="filterTable(filters, table, embedded)"
+            id="filterTable"
+            type="button"
+            :value="$__('Filter')"
+        />
+    </fieldset>
+</template>
+
+<script>
+import FormElement from "./FormElement.vue";
+export default {
+    components: { FormElement },
+    props: {
+        embedded: Boolean,
+        tableFilters: { type: Array, default: [] },
+        getFilters: Function,
+        filterTable: Function | null,
+        table: Object,
+    },
+    data() {
+        return {
+            filters: this.getFilters ? this.getFilters(this.$route.query) : {},
+        };
+    },
+};
+</script>
+
+<style scoped>
+.filters > input[type="checkbox"],
+.filters > input[type="button"] {
+    margin-left: 1rem;
+}
+</style>