From 3e3f0055258e15bd03a57018b61225d54532e658 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 28 Jun 2024 14:34:41 +0200
Subject: [PATCH 1/4] changes the layout/buttons of the searchbarsettings, adds
 responsive searchbar in the header for mobile views

---
 application/views/system/logs/testSearch.php  |  2 +-
 .../views/templates/CISHTML-Header.php        |  3 +-
 public/css/Cis4/Cis.css                       |  2 +-
 .../components/{ => searchbar}/searchbar.css  | 20 ++++++--
 public/css/components/searchbar/switches.css  | 23 +++++++++
 public/js/components/Cis/Menu.js              |  1 +
 public/js/components/searchbar/searchbar.js   | 49 ++++++++++---------
 7 files changed, 69 insertions(+), 31 deletions(-)
 rename public/css/components/{ => searchbar}/searchbar.css (83%)
 create mode 100644 public/css/components/searchbar/switches.css

diff --git a/application/views/system/logs/testSearch.php b/application/views/system/logs/testSearch.php
index 57ed0d48a..861adc53d 100755
--- a/application/views/system/logs/testSearch.php
+++ b/application/views/system/logs/testSearch.php
@@ -15,7 +15,7 @@
 		),
 		'customCSSs' => array(
 			'public/css/components/verticalsplit.css',
-			'public/css/components/searchbar.css',
+			'public/css/components/searchbar/searchbar.css',
 			'public/css/components/primevue.css',
 		),
 		'customJSModules' => array('public/js/apps/TestSearch.js')
diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index 58d6f2443..8a12338a3 100755
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -31,6 +31,7 @@ if (!isset($menu)) {
 	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button>
+	<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
 	<a id="nav-logo" href="<?= site_url(''); ?>">
 		<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
 	</a>
@@ -41,7 +42,7 @@ if (!isset($menu)) {
 			</button>
 		</div>
 		<div class="offcanvas-body p-0">
-			<fhc-searchbar id="nav-search" class="fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
+			<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
 			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 				<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
 			</button>
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 44ffc2fec..b455a6c38 100755
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -1,5 +1,5 @@
 /* basic */
-@import '../components/searchbar.css';
+@import '../components/searchbar/searchbar.css';
 html {
   font-size: 0.875em;
 }
diff --git a/public/css/components/searchbar.css b/public/css/components/searchbar/searchbar.css
similarity index 83%
rename from public/css/components/searchbar.css
rename to public/css/components/searchbar/searchbar.css
index 2bbaf9d67..5b718a90e 100755
--- a/public/css/components/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -3,12 +3,17 @@
     Author     : bambi
 */
 
+@import url(./switches.css);
+
+#search-filter{
+    border: 1px solid #ced4da;
+}
+
+
 .searchbar_settings {
     position: absolute; 
     z-index: 9999; 
-    background-color: #fff; 
-    border: 2px solid #666; 
-    padding: 1rem;
+    background-color: #343a40;
 }
 
 .searchbar_results {
@@ -92,4 +97,11 @@
 
 .searchbar_inline_ul li {
     list-style: none;
-}
\ No newline at end of file
+}
+
+.non-selectable {
+    user-select: none;
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+  }
\ No newline at end of file
diff --git a/public/css/components/searchbar/switches.css b/public/css/components/searchbar/switches.css
new file mode 100644
index 000000000..164976514
--- /dev/null
+++ b/public/css/components/searchbar/switches.css
@@ -0,0 +1,23 @@
+.fhc-switches:checked  {
+    background-color: white !important;
+    border-color: white !important;
+    background-position: right center !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
+}
+
+.fhc-switches  {
+    background-color: var(--bs-gray-600) !important;
+    border-color: var(--bs-gray-600) !important;
+    background-position: left center !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
+}
+
+.fhc-switches:focus  {
+    box-shadow: 0 0 0 .25rem rgba(108, 117, 125,.25);
+}
+
+/*.form-switch .form-check-input:checked {
+ 
+
+rgb(52, 58, 64)*/
+
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 99023032d..f5180c1a0 100755
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -28,6 +28,7 @@ export default {
     <button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
+    
     <a id="nav-logo" :href="rootUrl">
         <img :src="logoUrl" alt="Logo">
     </a>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 80659d5bb..963b43cb7 100755
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -26,14 +26,14 @@ export default {
       employee: employee,
       organisationunit: organisationunit
     },
-    template: `
+    template: /*html*/`
           <form ref="searchform" class="d-flex me-3" action="javascript:void(0);" 
             @focusin="this.searchfocusin" @focusout="this.searchfocusout">
-            <div class="input-group me-2 bg-white">
+            <div class="h-100 input-group me-2 bg-white">
                 <input ref="searchbox" @keyup="this.search" @focus="this.showsearchresult" 
                     v-model="this.searchsettings.searchstr" class="form-control" 
-                    type="search" placeholder="Search" aria-label="Search">
-                <button ref="settingsbutton" @click="this.togglesettings" class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
+                    type="search" :placeholder="'Search: '+ searchsettings.types.join(' / ')" aria-label="Search">
+                <button data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton"  class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
             </div>            
         
             <div v-show="this.showresult" ref="result" 
@@ -51,24 +51,37 @@ export default {
                 <div v-else="">Unbekannter Ergebnistyp: '{{ res.type }}'.</div>
               </template>
             </div>
-            <div v-show="this.showsettings" ref="settings" 
-                 class="searchbar_settings" tabindex="-1">
-              <div class="btn-group" v-if="this.searchoptions.types.length > 0">
-                <template v-for="(type, index) in this.searchoptions.types" :key="type">
-                  <input type="checkbox" class="btn-check" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="this.searchsettings.types"/>
-                  <label class="btn btn-outline-secondary" :for="this.$.uid + 'search_type_' + index">{{ type }}</label>
+
+            <div @[\`show.bs.collapse\`]="calcSearchSettingsExtent" class="collapse" id="searchSettings"  ref="settings" 
+                 class="searchbar_settings text-white" tabindex="-1">
+              <div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
+              <span class="fw-light mb-2">Suche filtern nach:</span>  
+              <template v-for="(type, index) in this.searchoptions.types" :key="type">
+                    <div class="form-check form-switch">
+                        <input class="fhc-switches form-check-input" type="checkbox" role="switch" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="this.searchsettings.types" />
+                        <label class="ps-2 form-check-label non-selectable" :for="this.$.uid + 'search_type_' + index">{{ type }}</label>
+                    </div>
                 </template>
               </div>
-              <div class="mb-2"></div>
-              <button ref="settingsrefreshsearch" @click="this.refreshsearch" class="btn btn-primary" type="button">Übernehmen</button>
             </div>
         
           </form>
     `,
+    watch:{
+        'searchsettings.types'(newValue){
+            // execute search with new searchsettings filters
+            this.search();
+        },
+    },
     beforeMount: function() {
         this.updateSearchOptions();
     },
     methods: {
+        calcSearchSettingsExtent: function(){
+            this.$refs.settings.style.top = Math.floor(this.$refs.settingsbutton.offsetHeight  ) + 'px';
+            this.$refs.settings.style.right = 0;
+        },
+
         updateSearchOptions: function() {
             this.searchsettings.types = [];
             for( const idx in this.searchoptions.types ) {
@@ -123,18 +136,6 @@ export default {
           this.search();
           this.togglesettings();
         },
-        calcSearchSettingsExtent: function() {
-            var rect = this.$refs.settingsbutton.getBoundingClientRect();
-            //console.log(window.innerWidth + ' ' + window.innerHeight + ' ' + JSON.stringify(rect));
-            this.$refs.settings.style.top = Math.floor(rect.bottom + 3) + 'px';
-            this.$refs.settings.style.right = Math.floor(window.innerWidth - rect.right) + 'px';
-            this.$refs.settings.style.width = Math.floor(window.innerWidth * 0.5) + 'px';
-            //this.$refs.settings.style.height = Math.floor(window.innerHeight * 0.5) + 'px';  
-        },
-        togglesettings: function() {
-            this.showsettings = !this.showsettings;
-            this.calcSearchSettingsExtent();
-        },
         hideresult: function() {
             this.showresult = false;
             window.removeEventListener('resize', this.calcSearchResultExtent);

From f4f08c0710caca1794210548297384612d073089 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 1 Jul 2024 13:53:55 +0200
Subject: [PATCH 2/4] stores the local information of the searchbar inside a
 collected storage in case more than one searchbar is used

---
 .../views/templates/CISHTML-Header.php        |  4 +-
 public/js/apps/Cis.js                         | 12 ++++-
 public/js/components/searchbar/searchbar.js   | 52 +++++++++++--------
 .../js/components/searchbar/sharedSettings.js | 10 ++++
 4 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 public/js/components/searchbar/sharedSettings.js

diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index 8a12338a3..c9f2b3305 100755
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -31,7 +31,7 @@ if (!isset($menu)) {
 	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button>
-	<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
+	<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
 	<a id="nav-logo" href="<?= site_url(''); ?>">
 		<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
 	</a>
@@ -42,7 +42,7 @@ if (!isset($menu)) {
 			</button>
 		</div>
 		<div class="offcanvas-body p-0">
-			<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
+			<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions"  :searchfunction="searchfunction"></fhc-searchbar>
 			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 				<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
 			</button>
diff --git a/public/js/apps/Cis.js b/public/js/apps/Cis.js
index b514f3662..c0eef6be1 100755
--- a/public/js/apps/Cis.js
+++ b/public/js/apps/Cis.js
@@ -11,6 +11,11 @@ Vue.createApp({
     },
     data: function() {
         return {
+            selectedtypes:[
+                "mitarbeiter",
+                "raum",
+                "organisationunit"
+            ],
             searchbaroptions: {
                 types: [
                     "mitarbeiter",
@@ -71,6 +76,11 @@ Vue.createApp({
     methods: {
         searchfunction: function(searchsettings) {
             return Vue.$fhcapi.Search.search(searchsettings);
-        }
+        },
+        updatesearchtypes: function(newValues){
+            console.log(newValues,"this are the new values")
+           this.selectedtypes= newValues;
+            
+        },
     }
 }).mount('#cis-header');
\ No newline at end of file
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 963b43cb7..474f0ad8b 100755
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -2,22 +2,21 @@ import person from "./person.js";
 import raum from "./raum.js";
 import employee from "./employee.js";
 import organisationunit from "./organisationunit.js";
+import {searchSettings, searchresult} from "./sharedSettings.js";
 
 export default {
-    props: [ "searchoptions", "searchfunction" ],
+    props: [ "searchoptions", "searchfunction","selectedtypes" ],
+    
     data: function() {
       return {
         searchtimer: null,
         hidetimer: null,
         showsettings: false,
-        searchsettings: {
-            searchstr: '',
-            types: []
-        },
-        showresult: false,        
-        searchresult: [],
+        searchsettings: searchSettings,
+        searchresult: searchresult,
+        showresult: false,  
         searching: false,
-        error: null
+        error: null,
       };
     },
     components: {
@@ -26,10 +25,13 @@ export default {
       employee: employee,
       organisationunit: organisationunit
     },
+   
     template: /*html*/`
           <form ref="searchform" class="d-flex me-3" action="javascript:void(0);" 
             @focusin="this.searchfocusin" @focusout="this.searchfocusout">
+           
             <div class="h-100 input-group me-2 bg-white">
+           
                 <input ref="searchbox" @keyup="this.search" @focus="this.showsearchresult" 
                     v-model="this.searchsettings.searchstr" class="form-control" 
                     type="search" :placeholder="'Search: '+ searchsettings.types.join(' / ')" aria-label="Search">
@@ -42,8 +44,8 @@ export default {
                 <i class="fas fa-spinner fa-spin fa-2x"></i>
               </div>
               <div v-else-if="this.error !== null">{{ this.error }}</div>
-              <div v-else-if="this.searchresult.length < 1">Es wurden keine Ergebnisse gefunden.</div>
-              <template v-else="" v-for="res in this.searchresult">
+              <div v-else-if="searchresult.length < 1">Es wurden keine Ergebnisse gefunden.</div>
+              <template v-else="" v-for="res in searchresult">
                 <person v-if="res.type === 'person'" :res="res" :actions="this.searchoptions.actions.person" @actionexecuted="this.hideresult"></person>
                 <employee v-else-if="res.type === 'mitarbeiter'" :res="res" :actions="this.searchoptions.actions.employee" @actionexecuted="this.hideresult"></employee>
                 <organisationunit v-else-if="res.type === 'organisationunit'" :res="res" :actions="this.searchoptions.actions.organisationunit" @actionexecuted="this.hideresult"></organisationunit>
@@ -58,7 +60,7 @@ export default {
               <span class="fw-light mb-2">Suche filtern nach:</span>  
               <template v-for="(type, index) in this.searchoptions.types" :key="type">
                     <div class="form-check form-switch">
-                        <input class="fhc-switches form-check-input" type="checkbox" role="switch" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="this.searchsettings.types" />
+                        <input class="fhc-switches form-check-input" type="checkbox" role="switch" :id="this.$.uid + 'search_type_' + index" :value="type" v-model="searchsettings.types"  />
                         <label class="ps-2 form-check-label non-selectable" :for="this.$.uid + 'search_type_' + index">{{ type }}</label>
                     </div>
                 </template>
@@ -69,14 +71,17 @@ export default {
     `,
     watch:{
         'searchsettings.types'(newValue){
-            // execute search with new searchsettings filters
             this.search();
+            
+            
         },
+        
     },
     beforeMount: function() {
         this.updateSearchOptions();
     },
     methods: {
+        
         calcSearchSettingsExtent: function(){
             this.$refs.settings.style.top = Math.floor(this.$refs.settingsbutton.offsetHeight  ) + 'px';
             this.$refs.settings.style.right = 0;
@@ -84,8 +89,8 @@ export default {
 
         updateSearchOptions: function() {
             this.searchsettings.types = [];
-            for( const idx in this.searchoptions.types ) {
-                this.searchsettings.types.push(this.searchoptions.types[idx]);
+            for( const idx in this.selectedtypes ) {
+                this.searchsettings.types.push(this.selectedtypes[idx]);
             }
         },
         calcSearchResultExtent: function() {
@@ -111,25 +116,26 @@ export default {
             }
         },
         callsearchapi: function() {            
-            var that = this;
             this.error = null;
-            this.searchresult = [];
+            this.searchresult.splice(0,this.searchresult.length);
             this.searching = true;
             this.showsearchresult();            
             this.searchfunction(this.searchsettings)
-            .then(function(response) {
+            .then(response=>{
                 if( response.data?.error === 1 ) {
-                    that.error = 'Bei der Suche ist ein Fehler aufgetreten.';
+                    this.error = 'Bei der Suche ist ein Fehler aufgetreten.';
                 } else {
-                    that.searchresult = response.data.data;
+                    for(let element of response.data.data){
+                        this.searchresult.push(element);
+                    }
                 }
             })
-            .catch(function(error) {
-                that.error = 'Bei der Suche ist ein Fehler aufgetreten.' 
+            .catch(error=> {
+                this.error = 'Bei der Suche ist ein Fehler aufgetreten.' 
                     + ' ' + error.message;
             })
-            .finally(function() {
-                that.searching = false;
+            .finally(()=> {
+                this.searching = false;
             });
         },
         refreshsearch: function() {
diff --git a/public/js/components/searchbar/sharedSettings.js b/public/js/components/searchbar/sharedSettings.js
new file mode 100644
index 000000000..e427e8483
--- /dev/null
+++ b/public/js/components/searchbar/sharedSettings.js
@@ -0,0 +1,10 @@
+let searchSettings = Vue.reactive({
+    searchstr: '',
+    types: [],
+       
+});
+
+let searchresult = Vue.reactive([]);
+
+
+export {searchSettings, searchresult};
\ No newline at end of file

From ff0f2320e174af359b043312d9d2fa2a2b9c0563 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 1 Jul 2024 14:43:43 +0200
Subject: [PATCH 3/4] changes the layout of the searchbar to be the same in the
 mobile view and in the desktop view

---
 application/views/templates/CISHTML-Header.php |  3 +--
 public/js/components/searchbar/searchbar.js    | 17 +++++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/application/views/templates/CISHTML-Header.php b/application/views/templates/CISHTML-Header.php
index c9f2b3305..f373a1d49 100755
--- a/application/views/templates/CISHTML-Header.php
+++ b/application/views/templates/CISHTML-Header.php
@@ -31,7 +31,7 @@ if (!isset($menu)) {
 	<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button>
-	<fhc-searchbar id="nav-search" class="px-2 d-lg-none fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
+	<fhc-searchbar id="nav-search" class=" fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>	
 	<a id="nav-logo" href="<?= site_url(''); ?>">
 		<img src="<?= base_url('/public/images/logo-300x160.png'); ?>" alt="Logo">
 	</a>
@@ -42,7 +42,6 @@ if (!isset($menu)) {
 			</button>
 		</div>
 		<div class="offcanvas-body p-0">
-			<fhc-searchbar id="nav-search" class="d-none d-lg-block fhc-searchbar w-100" @updatesearchtypes="updatesearchtypes" :selectedtypes="selectedtypes" :searchoptions="searchbaroptions"  :searchfunction="searchfunction"></fhc-searchbar>
 			<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 				<img src="<?= site_url('Cis/Pub/bild/person/' . getAuthPersonId()); ?>" class="avatar rounded-circle"/>
 			</button>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 474f0ad8b..bee90fd1e 100755
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -54,8 +54,8 @@ export default {
               </template>
             </div>
 
-            <div @[\`show.bs.collapse\`]="calcSearchSettingsExtent" class="collapse" id="searchSettings"  ref="settings" 
-                 class="searchbar_settings text-white" tabindex="-1">
+            <div id="searchSettings"  ref="settings" 
+                 class="top-100 end-0 searchbar_settings text-white collapse" tabindex="-1">
               <div class="d-flex flex-column m-3" v-if="this.searchoptions.types.length > 0">
               <span class="fw-light mb-2">Suche filtern nach:</span>  
               <template v-for="(type, index) in this.searchoptions.types" :key="type">
@@ -79,13 +79,18 @@ export default {
     },
     beforeMount: function() {
         this.updateSearchOptions();
+        
+    },
+    mounted(){
+        window.addEventListener('resize', (event) =>{
+            console.log(this.$refs.settings,"this is the refs of the settings")
+            this.$refs.settings.hide();
+            console.log("resizing")
+        }); 
+        //console.log(this.$refs.settings.show,"this are the refs")
     },
     methods: {
         
-        calcSearchSettingsExtent: function(){
-            this.$refs.settings.style.top = Math.floor(this.$refs.settingsbutton.offsetHeight  ) + 'px';
-            this.$refs.settings.style.right = 0;
-        },
 
         updateSearchOptions: function() {
             this.searchsettings.types = [];

From 57d3d3af13a29548efde28cf880739bbb7032473 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 2 Jul 2024 10:28:35 +0200
Subject: [PATCH 4/4] removes the shared storage for the searchbar and saves
 the data local in the searchbar again

---
 public/js/components/searchbar/searchbar.js      |  8 +++++---
 public/js/components/searchbar/sharedSettings.js | 10 ----------
 2 files changed, 5 insertions(+), 13 deletions(-)
 delete mode 100644 public/js/components/searchbar/sharedSettings.js

diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index bee90fd1e..ec0b298be 100755
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -2,7 +2,6 @@ import person from "./person.js";
 import raum from "./raum.js";
 import employee from "./employee.js";
 import organisationunit from "./organisationunit.js";
-import {searchSettings, searchresult} from "./sharedSettings.js";
 
 export default {
     props: [ "searchoptions", "searchfunction","selectedtypes" ],
@@ -12,8 +11,11 @@ export default {
         searchtimer: null,
         hidetimer: null,
         showsettings: false,
-        searchsettings: searchSettings,
-        searchresult: searchresult,
+        searchsettings: {
+            searchstr: '',
+            types: [],
+        },
+        searchresult: [],
         showresult: false,  
         searching: false,
         error: null,
diff --git a/public/js/components/searchbar/sharedSettings.js b/public/js/components/searchbar/sharedSettings.js
deleted file mode 100644
index e427e8483..000000000
--- a/public/js/components/searchbar/sharedSettings.js
+++ /dev/null
@@ -1,10 +0,0 @@
-let searchSettings = Vue.reactive({
-    searchstr: '',
-    types: [],
-       
-});
-
-let searchresult = Vue.reactive([]);
-
-
-export {searchSettings, searchresult};
\ No newline at end of file