113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import { useChapters } from '../composables/useChapters.js';
|
|
import { usePageTitle } from '../composables/Core/usePageTitle';
|
|
|
|
usePageTitle('Search Members');
|
|
|
|
const { searchMembers, loading } = useChapters();
|
|
|
|
const query = ref('');
|
|
const results = ref([]);
|
|
const searched = ref(false);
|
|
let debounceTimer = null;
|
|
|
|
const roleLabel = (role) => {
|
|
const map = {
|
|
PRESIDENT: 'President',
|
|
VICE_PRESIDENT: 'Vice President',
|
|
SECRETARY: 'Secretary',
|
|
TREASURER: 'Treasurer',
|
|
AUDITOR: 'Auditor',
|
|
BOARD_MEMBER: 'Board Member',
|
|
};
|
|
return map[role] || role;
|
|
};
|
|
|
|
const isOfficer = (role) => role && role !== 'MEMBER';
|
|
|
|
const runSearch = async () => {
|
|
const q = query.value.trim();
|
|
if (q.length < 2) {
|
|
results.value = [];
|
|
searched.value = false;
|
|
return;
|
|
}
|
|
searched.value = true;
|
|
results.value = await searchMembers(q);
|
|
};
|
|
|
|
watch(query, () => {
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(runSearch, 400);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container py-4" style="max-width: 640px;">
|
|
<h5 class="fw-bold mb-3"><i class="fas fa-search me-2"></i>Search Members</h5>
|
|
|
|
<div class="search-bar rounded-pill p-1 mb-3 d-flex align-items-center">
|
|
<i class="fas fa-search mx-3 text-muted"></i>
|
|
<input
|
|
v-model="query"
|
|
type="text"
|
|
class="form-control border-0 bg-transparent"
|
|
placeholder="Type a member name..."
|
|
style="box-shadow: none;"
|
|
/>
|
|
<span v-if="loading" class="spinner-border spinner-border-sm me-3 text-muted"></span>
|
|
</div>
|
|
|
|
<div v-if="query.trim().length < 2" class="text-center py-5 text-muted">
|
|
<i class="fas fa-keyboard fa-2x opacity-25 mb-2"></i>
|
|
<p class="small mb-0">Type at least 2 characters to search.</p>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div v-if="!results.length && searched && !loading" class="text-center py-5 text-muted">
|
|
<i class="fas fa-user-slash fa-2x opacity-25 mb-2"></i>
|
|
<p class="small mb-0">No members found matching "{{ query }}".</p>
|
|
</div>
|
|
|
|
<div v-for="(m, i) in results" :key="i" class="result-card rounded-4 p-3 mb-2 d-flex align-items-center gap-3">
|
|
<div class="avatar rounded-circle d-flex align-items-center justify-content-center fw-bold">
|
|
{{ (m.name || '?').charAt(0).toUpperCase() }}
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="fw-semibold text-truncate">{{ m.name }}</div>
|
|
<div class="small text-muted text-truncate">{{ m.chapter_name }}</div>
|
|
</div>
|
|
<span v-if="isOfficer(m.role)" class="badge rounded-pill role-badge">{{ roleLabel(m.role) }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-bar {
|
|
background: var(--bg-card);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
.result-card {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
.avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--accent-color);
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
.role-badge {
|
|
background: var(--accent-color);
|
|
color: #fff;
|
|
}
|
|
:global(.dark-mode) .search-bar,
|
|
:global(.dark-mode) .result-card {
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
</style>
|