91 lines
4.0 KiB
Vue
91 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import type { Search, File, Project, User } from '~/types/api';
|
|
|
|
const input = ref(''), results = ref<Search>({ projects: [], files: [], users: [] });
|
|
const pos = ref<DOMRect>(), loading = ref(false);
|
|
|
|
let timeout: NodeJS.Timeout;
|
|
|
|
function search(e: Event)
|
|
{
|
|
pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();
|
|
|
|
loading.value = true;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(debounced, 250);
|
|
}
|
|
async function debounced()
|
|
{
|
|
if(!input.value)
|
|
return;
|
|
|
|
try
|
|
{
|
|
const fetch = await useFetch(`/api/search`, {
|
|
query: {
|
|
"search": `%${input.value}%`
|
|
}
|
|
});
|
|
|
|
results.value = fetch.data.value;
|
|
}
|
|
catch (e) {
|
|
results.value = { projects: [], files: [], users: [] };
|
|
}
|
|
|
|
loading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="search-view-outer">
|
|
<div class="search-view-container">
|
|
<span class="published-search-icon"></span>
|
|
<input class="search-bar" type="text" placeholder="Recherche" v-model="input" @input="search">
|
|
</div>
|
|
</div>
|
|
<Teleport to="#teleports" v-if="input !== '' && !!pos">
|
|
<div class="search-results"
|
|
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
|
|
<div class="loading" v-if="loading"></div>
|
|
<template v-else>
|
|
<div class="suggestion-item suggestion-project" v-for="result of results.projects" :key="result.id"
|
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
|
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
|
<div class="suggestion-content">
|
|
<BoldContent class="suggestion-title" :text="result.name" :matched="input" />
|
|
<div class="suggestion-subtext">
|
|
<div class="suggestion-text">{{ result.username }}</div>
|
|
<div class="suggestion-text">{{ result.pages }} pages</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-item suggestion-file" v-for="result of results.files" :key="result.id"
|
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
|
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
|
<div class="suggestion-content">
|
|
<BoldContent class="suggestion-title" :text="result.title" :matched="input" />
|
|
<div class="suggestion-subtext">
|
|
<div class="suggestion-text">{{ result.username }}</div>
|
|
<div class="suggestion-text">{{ result.comments }} commentaires</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-item suggestion-user" v-for="result of results.users" :key="result.id"
|
|
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
|
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
|
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
|
<div class="suggestion-content">
|
|
<BoldContent class="suggestion-title" :text="result.username" :matched="input" />
|
|
</div>
|
|
</div>
|
|
<div class="suggestion-empty"
|
|
v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
|
|
Aucun résultat
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</Teleport>
|
|
</template> |