Initial commit

2025-12-21 09:53:25 -05:00
commit fa24f1468f
32 changed files with 4972 additions and 0 deletions
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
+import { CollectionObject } from '@PeopleManager/models/collection';
+
+// Store
+const collectionsStore = useCollectionsStore()
+
+// Props
+const props = defineProps<{
+  selectedCollection?: CollectionObject | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'select': [collection: CollectionObject]
+  'edit': [collection: CollectionObject]
+}>()
+
+// State
+const loading = ref(false)
+const collections = ref<CollectionObject[]>([])
+
+// Lifecycle
+onMounted(async () => {
+  loading.value = true
+  try {
+    collections.value = await collectionsStore.list()
+  } catch (error) {
+    console.error('[People] - Failed to load collections:', error)
+  }
+  loading.value = false
+})
+
+// Functions
+const onCollectionSelect = (collection: CollectionObject) => {
+  console.log('[People] - Collection selected', collection)
+  emit('select', collection)
+}
+
+const onCollectionEdit = (collection: CollectionObject) => {
+  emit('edit', collection)
+}
+
+// Expose refresh method
+defineExpose({
+  async refresh() {
+    loading.value = true
+    try {
+      collections.value = await collectionsStore.list()
+    } catch (error) {
+      console.error('[People] - Failed to load collections:', error)
+    }
+    loading.value = false
+  }
+})
+</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.id"
+          :value="collection.id"
+          :active="selectedCollection?.id === collection.id"
+          @click="onCollectionSelect(collection)"
+          rounded="lg"
+          class="mb-1"
+        >
+          <template #prepend>
+            <v-icon :color="collection.color || 'primary'" icon="mdi-book-outline" size="small" />
+          </template>
+
+          <v-list-item-title>{{ collection.label }}</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>