blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature-19473/VUE_Filter_Navigation_Widgets' of github.com:FH-Complete/FHC-Core into feature-19473/VUE_Filter_Navigation_Widgets

Browse Source
This commit is contained in:
Paolo
2022-07-04 19:30:18 +02:00
parent 60b3be3d64 5c94e33f24
commit 2927682dae
5 changed files with 85 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/searchbar.css
+9
View File
@@ -78,4 +78,13 @@
.searchbar_settings_types li label {
padding: 3px;
}
.searchbar_inline_ul {
margin: 0;
padding: 0;
}
.searchbar_inline_ul li {
list-style: none;
}
public/js/components/searchbar/employee.js
+5 -2
View File
@@ -14,7 +14,7 @@ export default {
<div class="searchbar_grid">
<div class="searchbar_icon">
<action :res="this.res" :action="this.actions.defaultaction" @actionexecuted="$emit('actionexecuted')">
<img v-if="res.foto !== null" :src="res.foto"
<img v-if="(typeof res.foto !== 'undefined') && (res.foto !== null)" :src="res.foto"
class="rounded-circle" height="100" />
<i v-else class="fas fa-user-circle fa-5x"></i>
</action>
@@ -32,7 +32,10 @@ export default {
<div class="searchbar_tablerow">
<div class="searchbar_tablecell">OrgEinheit</div>
<div class="searchbar_tablecell">
{{ res.organisationunit_name }}
<ul class="searchbar_inline_ul" v-if="res.organisationunit_name.length > 0">
<li v-for="(oe, idx) in res.organisationunit_name" :key="idx">{{ oe }}</li>
</ul>
<span v-else="">keine</span>
</div>
</div>
public/js/components/searchbar/organisationunit.js
+4 -1
View File
@@ -46,7 +46,10 @@ export default {
<div class="searchbar_tablerow">
<div class="searchbar_tablecell">Leiter</div>
<div class="searchbar_tablecell">
{{ res.leader_name }}
<ul class="searchbar_inline_ul" v-if="res.leader_name.length > 0">
<li v-for="(leader, idx) in res.leader_name" :key="idx">{{ leader }}</li>
</ul>
<span v-else="">N.N.</span>
</div>
</div>
public/js/components/searchbar/person.js
+1 -1
View File
@@ -14,7 +14,7 @@ export default {
<div class="searchbar_grid">
<div class="searchbar_icon">
<action :res="this.res" :action="this.actions.defaultaction" @actionexecuted="$emit('actionexecuted')">
<img v-if="res.foto !== null" :src="res.foto"
<img v-if="(typeof res.foto !== 'undefined') && (res.foto !== null)" :src="res.foto"
class="rounded-circle" height="100" />
<i v-else class="fas fa-user-circle fa-5x"></i>
</action>
public/js/components/searchbar/searchbar.js
+66 -37
View File
@@ -8,6 +8,7 @@ export default {
data: function() {
return {
searchtimer: null,
hidetimer: null,
showsettings: false,
searchsettings: {
searchstr: '',
@@ -26,37 +27,44 @@ export default {
organisationunit: organisationunit
},
template: `
<form class="d-flex me-3">
<form ref="searchform" class="d-flex me-3"
@focusin="this.searchfocusin" @focusout="this.searchfocusout">
<div class="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">
<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>
</div>
<button @click="this.search" class="btn btn-outline-success" type="button">Search</button>
</form>
<div v-show="this.showresult" ref="result" class="searchbar_results">
<div v-if="this.searching">
<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">
<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>
<raum v-else-if="res.type === 'raum'" :res="res" :actions="this.searchoptions.actions.raum" @actionexecuted="this.hideresult"></raum>
<div v-else="">Unbekannter Ergebnistyp: '{{ res.type }}'.</div>
</template>
</div>
<div v-show="this.showsettings" ref="settings" class="searchbar_settings">
<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 v-show="this.showresult" ref="result"
class="searchbar_results" tabindex="-1">
<div v-if="this.searching">
<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">
<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>
<raum v-else-if="res.type === 'raum'" :res="res" :actions="this.searchoptions.actions.raum" @actionexecuted="this.hideresult"></raum>
<div v-else="">Unbekannter Ergebnistyp: '{{ res.type }}'.</div>
</template>
</div>
<div class="mb-2"></div>
<button ref="settingsrefreshsearch" @click="this.refreshsearch" class="btn btn-primary">Übernehmen</button>
</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>
</template>
</div>
<div class="mb-2"></div>
<button ref="settingsrefreshsearch" @click="this.refreshsearch" class="btn btn-primary" type="button">Übernehmen</button>
</div>
</form>
`,
beforeMount: function() {
this.updateSearchOptions();
@@ -68,17 +76,20 @@ export default {
this.searchsettings.types.push(this.searchoptions.types[idx]);
}
},
calcSearchResultExtent: function() {
var rect = this.$refs.searchbox.getBoundingClientRect();
//console.log(window.innerWidth + ' ' + window.innerHeight + ' ' + JSON.stringify(rect));
this.$refs.result.style.top = Math.floor(rect.bottom + 3) + 'px';
this.$refs.result.style.right = Math.floor(window.innerWidth - rect.right) + 'px';
this.$refs.result.style.width = Math.floor(window.innerWidth * 0.75) + 'px';
this.$refs.result.style.height = Math.floor(window.innerHeight * 0.75) + 'px';
},
search: function() {
if( this.searchtimer !== null ) {
clearTimeout(this.searchtimer);
}
if( this.searchsettings.searchstr.length >= 3 ) {
var rect = this.$refs.searchbox.getBoundingClientRect();
//console.log(window.innerWidth + ' ' + window.innerHeight + ' ' + JSON.stringify(rect));
this.$refs.result.style.top = Math.floor(rect.bottom + 3) + 'px';
this.$refs.result.style.right = Math.floor(window.innerWidth - rect.right) + 'px';
this.$refs.result.style.width = Math.floor(window.innerWidth * 0.75) + 'px';
this.$refs.result.style.height = Math.floor(window.innerHeight * 0.75) + 'px';
this.calcSearchResultExtent();
this.searchtimer = setTimeout(
this.callsearchapi,
500
@@ -109,24 +120,42 @@ export default {
this.search();
this.togglesettings();
},
togglesettings: function() {
this.showsettings = !this.showsettings;
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';
//this.$refs.settings.style.height = Math.floor(window.innerHeight * 0.5) + 'px';
},
hideresult: function(e) {
//window.removeEventListener('click', this.hideresult);
togglesettings: function() {
this.showsettings = !this.showsettings;
this.calcSearchSettingsExtent();
},
hideresult: function() {
this.showresult = false;
window.removeEventListener('resize', this.calcSearchResultExtent);
},
showsearchresult: function() {
if( this.searchsettings.searchstr.length >= 3 ) {
this.showresult = true;
//window.addEventListener('click', this.hideresult);
window.addEventListener('resize', this.calcSearchResultExtent);
}
},
searchfocusin: function(e) {
e.preventDefault();
e.stopPropagation();
if( this.hidetimer !== null ) {
clearTimeout(this.hidetimer);
}
},
searchfocusout: function(e) {
e.preventDefault();
e.stopPropagation();
this.hidetimer = setTimeout(
this.hideresult,
100
);
}
}
};