mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-24 02:12:17 +00:00
stores the local information of the searchbar inside a collected storage in case more than one searchbar is used
This commit is contained in:
SimonGschnell
@@ -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>
|
||||
|
||||
+11
-1
@@ -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');
|
||||
@@ -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() {
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
let searchSettings = Vue.reactive({
|
||||
searchstr: '',
|
||||
types: [],
|
||||
|
||||
});
|
||||
|
||||
let searchresult = Vue.reactive([]);
|
||||
|
||||
|
||||
export {searchSettings, searchresult};
|
||||
Reference in New Issue
Block a user