165 lines
4.3 KiB
Vue
165 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useDisplay } from 'vuetify'
|
|
import { usePeopleStore } from '@/stores/peopleStore'
|
|
import CollectionList from '@/components/CollectionList.vue'
|
|
|
|
const display = useDisplay()
|
|
const isMobile = computed(() => display.mdAndDown.value)
|
|
|
|
const peopleStore = usePeopleStore()
|
|
|
|
const {
|
|
sidebarVisible,
|
|
loading,
|
|
collections,
|
|
selectedCollection,
|
|
} = storeToRefs(peopleStore)
|
|
|
|
const {
|
|
selectCollection,
|
|
openEditCollection,
|
|
openCreateCollection,
|
|
createEntity,
|
|
openImport,
|
|
} = peopleStore
|
|
|
|
const createOptions = [
|
|
{ type: 'individual', label: 'Individual', icon: 'mdi-account-plus' },
|
|
{ type: 'organization', label: 'Organization', icon: 'mdi-domain-plus' },
|
|
{ type: 'group', label: 'Group', icon: 'mdi-account-group' },
|
|
]
|
|
|
|
// VCF import file picker
|
|
const fileInputRef = ref<HTMLInputElement | null>(null)
|
|
|
|
function triggerFileInput() {
|
|
fileInputRef.value?.click()
|
|
}
|
|
|
|
async function onFilesSelected(event: Event) {
|
|
const input = event.target as HTMLInputElement
|
|
const files = Array.from(input.files ?? [])
|
|
input.value = '' // allow re-selecting the same file later
|
|
if (files.length > 0) {
|
|
await openImport(files)
|
|
}
|
|
}
|
|
|
|
// Settings placeholder (no settings dialog exists for this module yet)
|
|
const showSettingsDialog = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer
|
|
v-model="sidebarVisible"
|
|
contained
|
|
:permanent="sidebarVisible && !isMobile"
|
|
:temporary="isMobile"
|
|
width="280"
|
|
class="people-sidebar"
|
|
>
|
|
<div class="pa-3 d-flex flex-column h-100">
|
|
<!-- Primary action -->
|
|
<v-menu>
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
block
|
|
color="primary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-account-plus"
|
|
append-icon="mdi-chevron-down"
|
|
class="mb-4 justify-start"
|
|
v-bind="menuProps"
|
|
>
|
|
New Contact
|
|
</v-btn>
|
|
</template>
|
|
<v-list density="compact">
|
|
<v-list-item
|
|
v-for="option in createOptions"
|
|
:key="option.type"
|
|
:disabled="!selectedCollection"
|
|
@click="createEntity(option.type)"
|
|
>
|
|
<template #prepend>
|
|
<v-icon :icon="option.icon" />
|
|
</template>
|
|
<v-list-item-title>{{ option.label }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
<!-- Collections -->
|
|
<CollectionList
|
|
:collections="collections"
|
|
:loading="loading"
|
|
:selected-collection="selectedCollection"
|
|
@create="openCreateCollection"
|
|
@select="selectCollection"
|
|
@edit="openEditCollection"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Pinned utility footer -->
|
|
<template #append>
|
|
<v-divider />
|
|
<div class="pa-2">
|
|
<v-btn
|
|
block
|
|
variant="text"
|
|
size="small"
|
|
prepend-icon="mdi-database-import"
|
|
class="justify-start text-medium-emphasis"
|
|
@click="triggerFileInput"
|
|
>
|
|
Import VCF
|
|
</v-btn>
|
|
<v-btn
|
|
block
|
|
variant="text"
|
|
size="small"
|
|
prepend-icon="mdi-cog"
|
|
class="justify-start text-medium-emphasis"
|
|
@click="showSettingsDialog = true"
|
|
>
|
|
Settings
|
|
</v-btn>
|
|
<input
|
|
ref="fileInputRef"
|
|
type="file"
|
|
accept=".vcf,text/vcard,text/x-vcard"
|
|
multiple
|
|
class="d-none"
|
|
@change="onFilesSelected"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
|
|
<!-- Settings placeholder dialog -->
|
|
<v-dialog v-model="showSettingsDialog" max-width="480">
|
|
<v-card>
|
|
<v-card-title class="d-flex align-center">
|
|
<v-icon icon="mdi-cog" size="small" class="mr-2" />
|
|
People Settings
|
|
</v-card-title>
|
|
<v-card-text class="text-medium-emphasis">
|
|
No settings are available for this module yet.
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.people-sidebar {
|
|
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|