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>

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",
 };

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(

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: {

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;
 

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 [
                 {

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",
 };

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>

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>