mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 22:57:21 +01:00
0b076311df
* Added markdown * Added styles and option for debug menu * Added sm icons * Began styling autocomplete * Added autocomplete styles * Added more challenge categories * Updated challenge participants modal * Fixed challenge list updating without reload * Added close and delete challenge * Fixed form placeholder, adjusted desc style and fixed create button style * Fixed faq collapsing and style * Fixed repeating ending * Fixed delete account * Fixed party fetch issue * Fixed scope issue * Added member count filters * Fixed create button style * Fixed badge color display * Updated tavern styles * Fixed some party styles * Updated login styles * Fixed login redirect * Fixed initial login process * Added done local
67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template lang="pug">
|
|
div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocompleteStyle')
|
|
.autocomplete-results(v-for='result in searchResults', @click='select(result)') {{ result }}
|
|
</template>
|
|
|
|
<style scoped>
|
|
.autocomplete-results {
|
|
padding: .5em;
|
|
box-shadow: 1px 1px 1px #efefef;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['selections', 'text', 'coords', 'groupId'],
|
|
data () {
|
|
return {
|
|
currentSearch: '',
|
|
searchActive: false,
|
|
currentSearchPosition: 0,
|
|
tmpSelections: [],
|
|
};
|
|
},
|
|
computed: {
|
|
autocompleteStyle () {
|
|
return {
|
|
top: `${this.coords.TOP + 30}px`,
|
|
left: `${this.coords.LEFT + 30}px`,
|
|
position: 'absolute',
|
|
minWidth: '100px',
|
|
minHeight: '100px',
|
|
zIndex: 100,
|
|
backgroundColor: 'white',
|
|
};
|
|
},
|
|
searchResults () {
|
|
if (!this.searchActive) return [];
|
|
let currentSearch = this.text.substring(this.currentSearchPosition + 1, this.text.length);
|
|
return this.tmpSelections.filter((option) => {
|
|
return option.toLowerCase().indexOf(currentSearch.toLowerCase()) !== -1;
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
text (newText) {
|
|
if (newText[newText.length - 1] !== '@') return;
|
|
this.searchActive = true;
|
|
this.currentSearchPosition = newText.length - 1;
|
|
},
|
|
async groupId () {
|
|
if (!this.groupId) return;
|
|
let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.groupId});
|
|
this.tmpSelections = members.map((member) => {
|
|
return member.profile.name;
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
select (result) {
|
|
let newText = this.text.slice(0, this.currentSearchPosition + 1) + result;
|
|
this.searchActive = false;
|
|
this.$emit('select', newText);
|
|
},
|
|
},
|
|
};
|
|
</script>
|