From c9f475290a6d50326f3071e5fd5c05ff2a512a6d Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Tue, 20 Feb 2024 15:57:15 +0100
Subject: [PATCH] (fix) Load repository filters only when needed [SCI-10156]

---
 app/javascript/packs/vue/repository_filter.js | 40 ++++++++++---------
 .../repositories/_repository_filters.html.erb |  1 +
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 10cbc6f01..a73db2072 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -71,6 +71,7 @@ window.initRepositoryFilter = () => {
   const defFilters = JSON.parse(JSON.stringify(DEFAULT_FILTERS));
   const app = createApp({
     data: () => ({
+      open: false,
       filters: [],
       defaultFilters: DEFAULT_FILTERS,
       columns: [],
@@ -80,19 +81,29 @@ window.initRepositoryFilter = () => {
       filterName: null
     }),
     created() {
-      this.dataTableElement = $($('#filterContainer').data('datatable-id'));
+      $('#filtersDropdownButton').on('show.bs.dropdown', () => {
+        this.open = true;
+        this.dataTableElement = $($('#filterContainer').data('datatable-id'));
 
-      $.get($('#filterContainer').data('my-modules-url'), (data) => {
-        this.my_modules = data.data;
+        $.get($('#filterContainer').data('my-modules-url'), (data) => {
+          this.my_modules = data.data;
+        });
+
+        $.get($('#filterContainer').data('columns-url'), (data) => {
+          const combinedColumns = data.response.concat(defaultColumns);
+          this.columns = combinedColumns.sort((a, b) => (a.name > b.name ? 1 : -1));
+        });
+
+        $.get($('#filterContainer').data('saved-filters-url'), (data) => {
+          this.savedFilters = data.data;
+        });
+
+        $('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
       });
 
-      $.get($('#filterContainer').data('columns-url'), (data) => {
-        const combinedColumns = data.response.concat(defaultColumns);
-        this.columns = combinedColumns.sort((a, b) => a.name > b.name ? 1 : -1);
-      });
-
-      $.get($('#filterContainer').data('saved-filters-url'), (data) => {
-        this.savedFilters = data.data;
+      $('#filterContainer').on('click', (e) => {
+        $('#filterContainer .dropdown-selector-container').removeClass('open');
+        e.stopPropagation();
       });
     },
     computed: {
@@ -152,13 +163,4 @@ window.initRepositoryFilter = () => {
   app.config.globalProperties.i18n = window.I18n;
   app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
   window.repositoryFilterObject = mountWithTurbolinks(app, '#filterContainer');
-
-  $('#filterContainer').on('click', (e) => {
-    $('#filterContainer .dropdown-selector-container').removeClass('open')
-    e.stopPropagation();
-  });
-
-  $('#filtersDropdownButton').on('show.bs.dropdown', () => {
-    $('#filtersColumnsDropdown, #savedFiltersContainer').removeClass('open');
-  });
 };
diff --git a/app/views/repositories/_repository_filters.html.erb b/app/views/repositories/_repository_filters.html.erb
index 57dac1c36..11083e980 100644
--- a/app/views/repositories/_repository_filters.html.erb
+++ b/app/views/repositories/_repository_filters.html.erb
@@ -23,6 +23,7 @@
         data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
       >
         <filter-container
+          v-if="open"
           :columns.sync="columns"
           :my_modules.sync="my_modules"
           :default-filters="defaultFilters"