96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { CollectionObject } from '@PeopleManager/models/collection';
|
|
|
|
// Props
|
|
const props = defineProps<{
|
|
collections: CollectionObject[]
|
|
loading?: boolean
|
|
selectedCollection?: CollectionObject | null
|
|
}>()
|
|
|
|
// Emits
|
|
const emit = defineEmits<{
|
|
'select': [collection: CollectionObject]
|
|
'edit': [collection: CollectionObject]
|
|
}>()
|
|
|
|
// Functions
|
|
const onCollectionSelect = (collection: CollectionObject) => {
|
|
emit('select', collection)
|
|
}
|
|
|
|
const onCollectionEdit = (collection: CollectionObject) => {
|
|
emit('edit', collection)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="collection-selector">
|
|
<div class="collection-selector-header">
|
|
<div class="d-flex align-center mb-3">
|
|
<v-icon icon="mdi-book-multiple" size="small" class="mr-2" />
|
|
<span class="text-subtitle-2 font-weight-bold">Address Books</span>
|
|
</div>
|
|
</div>
|
|
|
|
<v-divider class="my-2" />
|
|
|
|
<div class="collection-selector-content">
|
|
<v-progress-linear v-if="loading" indeterminate color="primary" />
|
|
|
|
<v-list v-else density="compact" nav class="pa-0">
|
|
<v-list-item
|
|
v-for="collection in collections"
|
|
:key="collection.identifier"
|
|
:value="collection.identifier"
|
|
:active="selectedCollection?.identifier === collection.identifier"
|
|
@click="onCollectionSelect(collection)"
|
|
rounded="lg"
|
|
class="mb-1"
|
|
>
|
|
<template #prepend>
|
|
<v-icon :color="collection.properties.color || 'primary'" icon="mdi-book-outline" size="small" />
|
|
</template>
|
|
|
|
<v-list-item-title>{{ collection.properties.label || 'Unnamed' }}</v-list-item-title>
|
|
|
|
<template #append>
|
|
<v-btn
|
|
icon="mdi-pencil"
|
|
size="x-small"
|
|
variant="text"
|
|
@click.stop="onCollectionEdit(collection)"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-alert v-if="!loading && collections.length === 0" type="info" variant="tonal" density="compact" class="mt-2">
|
|
No address books found
|
|
</v-alert>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.collection-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.collection-selector-header {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.collection-selector-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.v-list-item {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|