pixelfed/resources/assets/components/groups/partials/GroupSearchModal.vue

200 lines
4.5 KiB
Vue
Raw Normal View History

2024-07-10 05:52:08 +00:00
<template>
<div class="group-search-modal">
<b-modal
ref="modal"
hide-header
hide-footer
centered
rounded
body-class="rounded group-search-modal-wrapper">
<div class="d-flex justify-content-between">
<autocomplete
:search="autocompleteSearch"
placeholder="Search this group"
aria-label="Search this group"
:get-result-value="getSearchResultValue"
:debounceTime="700"
@submit="onSearchSubmit"
style="width: 100%;"
ref="autocomplete"
>
<template #result="{ result, props }">
<li
v-bind="props"
class="autocomplete-result"
>
<div class="text-truncate">
<p class="result-name mb-0 font-weight-bold">
{{ result.username }}
</p>
</div>
</li>
</template>
</autocomplete>
<button class="btn btn-light border rounded-circle text-lighter ml-3" style="width: 52px;height:50px;" @click="close">
<i class="fal fa-times fa-lg"></i>
</button>
</div>
<div v-if="recent && recent.length" class="pt-5">
<h5 class="mb-2">Recent Searches</h5>
<a v-for="(result, index) in recent" class="media align-items-center text-decoration-none text-dark" :href="result.action">
<div class="bg-light rounded-circle mr-3 border d-flex justify-content-center align-items-center" style="width: 40px;height:40px">
<i class="far fa-search"></i>
</div>
<div class="media-body">
<p class="mb-0">{{ result.value }}</p>
</div>
</a>
</div>
<div class="pt-5">
<h5 class="mb-2">Explore This Group</h5>
<div class="media align-items-center" @click="viewMyActivity">
<img
:src="profile?.avatar"
width="40"
height="40"
class="mr-3 border rounded-circle"
onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
/>
<div class="media-body">
<p class="mb-0">{{ profile?.display_name || profile?.username }}</p>
<p class="mb-0 small text-muted">See your group activity.</p>
</div>
</div>
<div class="media align-items-center" @click="viewGroupSearch">
<div class="bg-light rounded-circle mr-3 border d-flex justify-content-center align-items-center" style="width: 40px;height:40px">
<i class="far fa-search"></i>
</div>
<div class="media-body">
<p class="mb-0">Search all groups</p>
</div>
</div>
</div>
<!-- <div class="text-center py-3 small">
<p class="lead font-weight-normal mb-0">Looking for something?</p>
<p class="mb-0">Search {{ group.name }} for posts, comments or members.</p>
</div> -->
</b-modal>
</div>
</template>
<script type="text/javascript">
import Autocomplete from '@trevoreyre/autocomplete-vue'
import '@trevoreyre/autocomplete-vue/dist/style.css'
export default {
props: {
group: {
type: Object
},
profile: {
type: Object
}
},
components: {
'autocomplete': Autocomplete,
},
data() {
return {
query: '',
recent: [],
loaded: false
}
},
methods: {
open() {
this.fetchRecent();
this.$refs.modal.show();
},
close() {
this.$refs.modal.hide();
},
fetchRecent() {
axios.get('/api/v0/groups/search/getrec', {
params: {
g: this.group.id
}
}).then(res => {
this.recent = res.data;
})
},
autocompleteSearch(q) {
if (!q || q.length < 2) {
return [];
}
return axios.post(`/api/v0/groups/search/lac`, {
q: q,
g: this.group.id,
v: '0.2'
}).then(res => {
return res.data;
});
return [];
},
getSearchResultValue(result) {
return result.username;
},
onSearchSubmit(result) {
if (result.length < 1) {
return [];
}
axios.post('/api/v0/groups/search/addrec', {
g: this.group.id,
q: {
value: result.username,
action: result.url
}
}).then(res => {
location.href = result.url;
});
},
viewMyActivity() {
location.href = `/groups/${this.group.id}/user/${this.profile.id}?rf=group_search`;
},
viewGroupSearch() {
location.href = `/groups/home?ct=gsearch&rf=group_search&rfid=${this.group.id}`;
},
addToRecentSearches() {
}
}
}
</script>
<style lang="scss">
.group-search-modal {
&-wrapper {
.media {
height: 60px;
padding: 10px;
border-radius: 10px;
user-select: none;
cursor: pointer;
&:hover {
background-color: #E5E7EB;
}
}
}
}
</style>