Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sebastian
|
c876cd3149 |
@@ -1,50 +0,0 @@
|
||||
name: Build Test
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Retrieve Server Install Action
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/action-server-install
|
||||
ref: main
|
||||
path: action-server-install
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install Server
|
||||
uses: ./action-server-install
|
||||
with:
|
||||
install-php: 'false'
|
||||
install-node: 'true'
|
||||
php-version: '8.5'
|
||||
node-version: '24'
|
||||
server-path: './server'
|
||||
|
||||
- name: Install People Manager
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/people_manager
|
||||
ref: main
|
||||
path: server/modules/people_manager
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Checkout Pull Request
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: ${{ github.repository }}
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
path: server/modules/people
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
working-directory: server/modules/people
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
working-directory: server/modules/people
|
||||
@@ -1,50 +0,0 @@
|
||||
name: JS Unit Tests
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Retrieve Server Install Action
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/action-server-install
|
||||
ref: main
|
||||
path: action-server-install
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install Server
|
||||
uses: ./action-server-install
|
||||
with:
|
||||
install-php: 'false'
|
||||
install-node: 'true'
|
||||
php-version: '8.5'
|
||||
node-version: '24'
|
||||
server-path: './server'
|
||||
|
||||
- name: Install People Manager
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: Nodarx/people_manager
|
||||
ref: main
|
||||
path: server/modules/people_manager
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Checkout Pull Request
|
||||
uses: actions/checkout@v6.0.2
|
||||
with:
|
||||
repository: ${{ github.repository }}
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
path: server/modules/people
|
||||
github-server-url: https://git.ktrix.dev
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
working-directory: server/modules/people
|
||||
|
||||
- name: Run tests
|
||||
run: npm run test:unit
|
||||
working-directory: server/modules/people
|
||||
@@ -25,17 +25,11 @@ jobs:
|
||||
tools: composer:v2
|
||||
|
||||
- name: Install Renovate
|
||||
run: |
|
||||
npm install --global --no-audit --fund=false \
|
||||
--prefix "${{ runner.temp }}/renovate-npm" \
|
||||
--cache "${{ runner.temp }}/renovate-npm-cache" \
|
||||
renovate
|
||||
"${{ runner.temp }}/renovate-npm/bin/renovate" --version
|
||||
run: npm install -g renovate
|
||||
|
||||
- name: Run Renovate
|
||||
env:
|
||||
RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
|
||||
RENOVATE_PLATFORM: gitea
|
||||
RENOVATE_ENDPOINT: https://git.ktrix.dev/api/v1
|
||||
run: |
|
||||
"${{ runner.temp }}/renovate-npm/bin/renovate" ${{ gitea.repository }}
|
||||
run: renovate ${{ gitea.repository }}
|
||||
+4
-2
@@ -12,10 +12,12 @@ node_modules/
|
||||
/static/
|
||||
|
||||
# Backend development
|
||||
/vendor/
|
||||
/lib/vendor/
|
||||
coverage/
|
||||
*.cache
|
||||
phpunit.xml.cache
|
||||
.phpunit.result.cache
|
||||
.php-cs-fixer.cache
|
||||
.phpstan.cache
|
||||
.phpactor/
|
||||
|
||||
# Editors
|
||||
|
||||
Generated
-18
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"_readme": [
|
||||
"This file locks the dependencies of your project to a known state",
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "154a9c501f9c209c8602413a80320528",
|
||||
"packages": [],
|
||||
"packages-dev": [],
|
||||
"aliases": [],
|
||||
"minimum-stability": "stable",
|
||||
"stability-flags": {},
|
||||
"prefer-stable": false,
|
||||
"prefer-lowest": false,
|
||||
"platform": {},
|
||||
"platform-dev": {},
|
||||
"plugin-api-version": "2.6.0"
|
||||
}
|
||||
Generated
+399
-2588
File diff suppressed because it is too large
Load Diff
+7
-15
@@ -11,27 +11,19 @@
|
||||
"dev": "vite build --mode development --config vite.config.ts",
|
||||
"watch": "vite build --mode development --watch --config vite.config.ts",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||
"test": "vitest run --config tests/js/vitest.config.ts",
|
||||
"test:unit": "vitest run --config tests/js/vitest.config.ts",
|
||||
"test:watch": "vitest watch --config tests/js/vitest.config.ts",
|
||||
"test:coverage": "vitest run --coverage --config tests/js/vitest.config.ts"
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"pinia": "^4.0.0",
|
||||
"pinia": "^2.3.1",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^5.0.0",
|
||||
"vuetify": "^4.0.0"
|
||||
"vue-router": "^4.5.1",
|
||||
"vuetify": "^3.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"typescript": "~6.0.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^8.0.0",
|
||||
"vue-tsc": "^3.0.5",
|
||||
"@vitest/coverage-v8": "^4.1.6",
|
||||
"@vue/test-utils": "^2.4.10",
|
||||
"jsdom": "^29.1.1",
|
||||
"vitest": "^4.1.6"
|
||||
"vue-tsc": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ const onOpen = async () => {
|
||||
if (props.collection.identifier) {
|
||||
// Edit mode - find the service
|
||||
editingCollectionService.value = services.value.find(s =>
|
||||
`${s.provider}:${s.identifier}` === String(props.collection!.service)
|
||||
s.provider === props.collection!.provider && s.identifier === props.collection!.service
|
||||
) || null
|
||||
} else {
|
||||
// Create mode - use first service that can create
|
||||
@@ -233,7 +233,7 @@ watch(() => props.modelValue, async (newValue) => {
|
||||
<v-card-actions class="justify-space-between align-center">
|
||||
<div>
|
||||
<v-btn
|
||||
v-if="mode === 'edit' && editingCollectionService?.capable('CollectionDelete')"
|
||||
v-if="mode === 'edit' && editingCollectionService?.capable('CollectionDestroy')"
|
||||
color="error"
|
||||
variant="text"
|
||||
@click="onDelete"
|
||||
|
||||
@@ -10,7 +10,6 @@ const props = defineProps<{
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'create': []
|
||||
'select': [collection: CollectionObject]
|
||||
'edit': [collection: CollectionObject]
|
||||
}>()
|
||||
@@ -28,23 +27,13 @@ const onCollectionEdit = (collection: CollectionObject) => {
|
||||
<template>
|
||||
<div class="collection-selector">
|
||||
<div class="collection-selector-header">
|
||||
<div class="d-flex align-center justify-space-between mb-1">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-book-multiple" size="14" class="mr-2 text-medium-emphasis" />
|
||||
<span class="sidebar-section-label">Address Books</span>
|
||||
</div>
|
||||
<v-btn
|
||||
icon="mdi-plus"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
aria-label="New Address Book"
|
||||
title="New Address Book"
|
||||
@click="emit('create')"
|
||||
/>
|
||||
<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="mb-2" />
|
||||
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<div class="collection-selector-content">
|
||||
<v-progress-linear v-if="loading" indeterminate color="primary" />
|
||||
@@ -70,7 +59,6 @@ const onCollectionEdit = (collection: CollectionObject) => {
|
||||
icon="mdi-pencil"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
class="collection-edit-btn"
|
||||
@click.stop="onCollectionEdit(collection)"
|
||||
/>
|
||||
</template>
|
||||
@@ -104,28 +92,4 @@ const onCollectionEdit = (collection: CollectionObject) => {
|
||||
.v-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||
}
|
||||
|
||||
.collection-edit-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.v-list-item:hover .collection-edit-btn,
|
||||
.v-list-item:focus-within .collection-edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.collection-edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,212 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useImportStore } from '@PeopleManager/stores/importStore'
|
||||
import { CollectionObject } from '@PeopleManager/models/collection'
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
collections: CollectionObject[]
|
||||
}>()
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
// refresh = true once contacts were created/updated, so the caller can reload lists
|
||||
'close': [refresh: boolean]
|
||||
}>()
|
||||
|
||||
// Store
|
||||
const importStore = useImportStore()
|
||||
const { files, sessions, order, stage, running, totals } = storeToRefs(importStore)
|
||||
|
||||
// Collection picker options
|
||||
const collectionOptions = computed(() =>
|
||||
props.collections.map((collection: CollectionObject) => ({
|
||||
title: collection.properties.label || 'Unnamed',
|
||||
value: collection.identifier,
|
||||
})),
|
||||
)
|
||||
|
||||
const isSelecting = computed(() => stage.value === 'selecting')
|
||||
const isComplete = computed(() => stage.value === 'completed' || stage.value === 'error')
|
||||
|
||||
// Every queued file must have a destination before import can start.
|
||||
const canImport = computed(() =>
|
||||
files.value.length > 0 && files.value.every((entry) => entry.collectionId !== null),
|
||||
)
|
||||
|
||||
const progress = computed(() => {
|
||||
const { discovered, processed } = totals.value
|
||||
return discovered > 0 ? Math.min(100, Math.round((processed / discovered) * 100)) : 0
|
||||
})
|
||||
|
||||
const counters = computed(() => {
|
||||
const t = totals.value
|
||||
return [
|
||||
{ key: 'discovered', label: 'Discovered', value: t.discovered, color: 'info' },
|
||||
{ key: 'created', label: 'Created', value: t.created, color: 'success' },
|
||||
{ key: 'updated', label: 'Updated', value: t.updated, color: 'info' },
|
||||
{ key: 'exists', label: 'Skipped', value: t.exists, color: 'warning' },
|
||||
{ key: 'error', label: 'Errors', value: t.error, color: 'error' },
|
||||
]
|
||||
})
|
||||
|
||||
function setCollection(fileId: number, collectionId: CollectionObject['identifier'] | null) {
|
||||
importStore.setCollectionForFile(fileId, collectionId)
|
||||
}
|
||||
|
||||
function setSupersede(fileId: number, value: boolean) {
|
||||
importStore.setOptionsForFile(fileId, { supersede: value })
|
||||
}
|
||||
|
||||
async function startImport() {
|
||||
try {
|
||||
await importStore.startImport()
|
||||
} catch (error) {
|
||||
console.error('[People] - Import failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('update:modelValue', false)
|
||||
emit('close', false)
|
||||
}
|
||||
|
||||
function done() {
|
||||
const refresh = totals.value.created > 0 || totals.value.updated > 0
|
||||
emit('update:modelValue', false)
|
||||
emit('close', refresh)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog
|
||||
:model-value="modelValue"
|
||||
max-width="640"
|
||||
persistent
|
||||
scrollable
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon icon="mdi-database-import" class="mr-2" />
|
||||
Import Contacts
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- Selecting stage: choose a destination per file -->
|
||||
<v-card-text v-if="isSelecting" class="pt-4">
|
||||
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||
Choose a destination address book for each file. Existing contacts are kept
|
||||
unless "Overwrite existing" is enabled.
|
||||
</p>
|
||||
|
||||
<v-card
|
||||
v-for="entry in files"
|
||||
:key="entry.file.id"
|
||||
variant="tonal"
|
||||
class="mb-3 pa-3"
|
||||
>
|
||||
<div class="d-flex align-center mb-2">
|
||||
<v-icon icon="mdi-file-account-outline" size="small" class="mr-2" />
|
||||
<span class="text-subtitle-2 font-weight-medium text-truncate">{{ entry.file.name }}</span>
|
||||
</div>
|
||||
|
||||
<v-select
|
||||
:model-value="entry.collectionId"
|
||||
:items="collectionOptions"
|
||||
label="Address book"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
class="mb-2"
|
||||
@update:model-value="setCollection(entry.file.id, $event)"
|
||||
/>
|
||||
|
||||
<v-switch
|
||||
:model-value="entry.options.supersede"
|
||||
label="Overwrite existing contacts"
|
||||
color="primary"
|
||||
density="compact"
|
||||
hide-details
|
||||
@update:model-value="setSupersede(entry.file.id, $event ?? false)"
|
||||
/>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
|
||||
<!-- Importing / completed stage: progress + counters -->
|
||||
<v-card-text v-else class="pt-4">
|
||||
<div class="d-flex align-center justify-space-between mb-1">
|
||||
<span class="text-body-2">
|
||||
{{ isComplete ? 'Import complete' : 'Importing…' }}
|
||||
</span>
|
||||
<span class="text-body-2 text-medium-emphasis">
|
||||
{{ totals.processed }} / {{ totals.discovered }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<v-progress-linear
|
||||
:model-value="progress"
|
||||
:indeterminate="running && totals.discovered === 0"
|
||||
color="primary"
|
||||
height="8"
|
||||
rounded
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<div class="d-flex flex-wrap ga-2">
|
||||
<v-chip
|
||||
v-for="counter in counters"
|
||||
:key="counter.key"
|
||||
:color="counter.color"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ counter.label }}: {{ counter.value }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<v-list v-if="order.length > 1" density="compact" class="mt-3 bg-transparent">
|
||||
<v-list-item
|
||||
v-for="id in order"
|
||||
:key="id"
|
||||
:title="sessions[id]?.fileName"
|
||||
:subtitle="sessions[id]?.lastError ?? undefined"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon
|
||||
:icon="sessions[id]?.status === 'error' ? 'mdi-alert-circle' : sessions[id]?.status === 'completed' ? 'mdi-check-circle' : 'mdi-progress-clock'"
|
||||
:color="sessions[id]?.status === 'error' ? 'error' : sessions[id]?.status === 'completed' ? 'success' : 'info'"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<template #append>
|
||||
<span class="text-caption text-medium-emphasis">
|
||||
{{ sessions[id]?.counters.processed }} / {{ sessions[id]?.counters.discovered }}
|
||||
</span>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<template v-if="isSelecting">
|
||||
<v-btn variant="text" @click="cancel">Cancel</v-btn>
|
||||
<v-btn color="primary" variant="flat" :disabled="!canImport" @click="startImport">
|
||||
Import
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-btn color="primary" variant="flat" :disabled="running" @click="done">
|
||||
Close
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@@ -11,7 +11,6 @@ const entitiesStore = useEntitiesStore()
|
||||
const props = defineProps<{
|
||||
selectedCollection?: CollectionObject | null
|
||||
selectedEntity?: EntityObject | null
|
||||
search?: string | null
|
||||
}>()
|
||||
|
||||
// Emits
|
||||
@@ -22,22 +21,15 @@ const emit = defineEmits<{
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
|
||||
// Entities belonging to the selected collection, sourced live from the manager store
|
||||
const collectionEntities = computed<EntityObject[]>(() => {
|
||||
const collection = props.selectedCollection
|
||||
if (!collection) {
|
||||
return []
|
||||
}
|
||||
return entitiesStore.entitiesForCollection(collection.identifier)
|
||||
})
|
||||
const searchQuery = ref('')
|
||||
const collectionEntities = ref<EntityObject[]>([])
|
||||
|
||||
// Computed
|
||||
const filteredEntities = computed(() => {
|
||||
const query = (props.search ?? '').trim().toLowerCase()
|
||||
if (!query) {
|
||||
if (!searchQuery.value) {
|
||||
return collectionEntities.value
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return collectionEntities.value.filter(entity => {
|
||||
const props = (entity.properties as any)
|
||||
const given = props?.names?.given || ''
|
||||
@@ -54,15 +46,25 @@ const filteredEntities = computed(() => {
|
||||
|
||||
// Watchers
|
||||
watch(() => props.selectedCollection, async (newCollection) => {
|
||||
if (!newCollection) {
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
await entitiesStore.list([newCollection.identifier])
|
||||
} catch (error) {
|
||||
console.error('[People] - Failed to load contacts:', error)
|
||||
} finally {
|
||||
if (newCollection) {
|
||||
loading.value = true
|
||||
try {
|
||||
const sources = {
|
||||
[newCollection.provider]: {
|
||||
[String(newCollection.service)]: {
|
||||
[String(newCollection.identifier)]: true as const,
|
||||
},
|
||||
},
|
||||
}
|
||||
const result = await entitiesStore.list(sources)
|
||||
collectionEntities.value = Object.values(result)
|
||||
} catch (error) {
|
||||
console.error('[People] - Failed to load contacts:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
} else {
|
||||
collectionEntities.value = []
|
||||
loading.value = false
|
||||
}
|
||||
}, { immediate: true })
|
||||
@@ -163,6 +165,18 @@ function entityAvatarColor(entity: EntityObject): string {
|
||||
|
||||
<template>
|
||||
<div class="person-list-container">
|
||||
<div class="person-list-header pa-4">
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
label="Search contacts"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
clearable
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pa-0 person-list-content">
|
||||
<v-progress-linear v-if="loading" indeterminate color="primary" />
|
||||
|
||||
@@ -239,6 +253,13 @@ function entityAvatarColor(entity: EntityObject): string {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.person-list-header {
|
||||
min-height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
.person-list-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -248,6 +269,10 @@ function entityAvatarColor(entity: EntityObject): string {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.person-list-container :deep(.v-field) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,164 +0,0 @@
|
||||
<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>
|
||||
@@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useModuleStore } from '@KTXC/stores/moduleStore'
|
||||
import { usePeopleStore } from '@/stores/peopleStore'
|
||||
import Sidebar from '@/components/Sidebar.vue'
|
||||
import CollectionList from '@/components/CollectionList.vue'
|
||||
import CollectionEditor from '@/components/CollectionEditor.vue'
|
||||
import PersonList from '@/components/PersonList.vue'
|
||||
import PersonEditor from '@/components/PersonEditor.vue'
|
||||
import ImportDialog from '@/components/ImportDialog.vue'
|
||||
|
||||
// Vuetify display
|
||||
const display = useDisplay()
|
||||
|
||||
// Check if people manager is available
|
||||
const moduleStore = useModuleStore()
|
||||
@@ -20,18 +23,21 @@ const peopleStore = usePeopleStore()
|
||||
|
||||
const {
|
||||
sidebarVisible,
|
||||
loading,
|
||||
selectedCollection,
|
||||
selectedEntity,
|
||||
entityEditorMode,
|
||||
showCollectionEditor,
|
||||
editingCollection,
|
||||
collectionEditorMode,
|
||||
showImportDialog,
|
||||
collections,
|
||||
} = storeToRefs(peopleStore)
|
||||
|
||||
const {
|
||||
initialize,
|
||||
selectCollection,
|
||||
openEditCollection,
|
||||
openCreateCollection,
|
||||
selectEntity,
|
||||
createEntity,
|
||||
startEditingEntity,
|
||||
@@ -41,12 +47,8 @@ const {
|
||||
deleteEntity,
|
||||
saveCollection,
|
||||
deleteCollection,
|
||||
closeImport,
|
||||
} = peopleStore
|
||||
|
||||
// Contact search (filters the person list)
|
||||
const searchQuery = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await initialize()
|
||||
@@ -59,7 +61,7 @@ onMounted(async () => {
|
||||
<template>
|
||||
<div class="people-container">
|
||||
<!-- Top Navigation Bar -->
|
||||
<v-toolbar elevation="0" density="compact" class="people-toolbar">
|
||||
<v-app-bar elevation="0" class="people-toolbar border-b">
|
||||
<template #prepend>
|
||||
<v-btn
|
||||
icon="mdi-menu"
|
||||
@@ -68,31 +70,86 @@ onMounted(async () => {
|
||||
></v-btn>
|
||||
</template>
|
||||
|
||||
<v-toolbar-title class="d-flex align-center">
|
||||
<v-icon size="24" color="primary" class="mr-2">mdi-account-multiple</v-icon>
|
||||
<span class="text-subtitle-1 font-weight-bold">People</span>
|
||||
</v-toolbar-title>
|
||||
<v-app-bar-title class="d-flex align-center">
|
||||
<v-icon size="28" color="primary" class="mr-2">mdi-account-multiple</v-icon>
|
||||
<span class="text-h6 font-weight-bold">People Manager</span>
|
||||
</v-app-bar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- Search -->
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
placeholder="Search contacts..."
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
hide-details
|
||||
single-line
|
||||
clearable
|
||||
class="people-toolbar-search mx-4"
|
||||
/>
|
||||
</v-toolbar>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="people-content">
|
||||
<!-- Sidebar Navigation Drawer -->
|
||||
<Sidebar />
|
||||
<v-navigation-drawer
|
||||
v-model="sidebarVisible"
|
||||
:permanent="display.mdAndUp.value"
|
||||
:temporary="display.smAndDown.value"
|
||||
width="280"
|
||||
class="people-sidebar"
|
||||
>
|
||||
<div class="pa-4 d-flex flex-column h-100">
|
||||
<CollectionList
|
||||
:collections="collections"
|
||||
:loading="loading"
|
||||
:selected-collection="selectedCollection"
|
||||
@select="selectCollection"
|
||||
@edit="openEditCollection"
|
||||
/>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<v-icon icon="mdi-plus-circle" size="small" class="mr-2" />
|
||||
<span class="text-subtitle-2 font-weight-bold">Create</span>
|
||||
</div>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-account-plus"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
:disabled="!selectedCollection"
|
||||
@click="createEntity('individual')"
|
||||
>
|
||||
Individual
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-domain-plus"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
:disabled="!selectedCollection"
|
||||
@click="createEntity('organization')"
|
||||
>
|
||||
Organization
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-account-group"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
:disabled="!selectedCollection"
|
||||
@click="createEntity('group')"
|
||||
>
|
||||
Group
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-book-plus"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
@click="openCreateCollection"
|
||||
>
|
||||
Address Book
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Main View -->
|
||||
<div class="people-main">
|
||||
@@ -124,7 +181,6 @@ onMounted(async () => {
|
||||
<PersonList
|
||||
:selected-collection="selectedCollection"
|
||||
:selected-entity="selectedEntity"
|
||||
:search="searchQuery"
|
||||
@select="selectEntity"
|
||||
@fresh="createEntity"
|
||||
/>
|
||||
@@ -153,13 +209,6 @@ onMounted(async () => {
|
||||
@save="saveCollection"
|
||||
@delete="deleteCollection"
|
||||
/>
|
||||
|
||||
<!-- VCF Import Dialog -->
|
||||
<ImportDialog
|
||||
v-model="showImportDialog"
|
||||
:collections="collections"
|
||||
@close="closeImport"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -167,39 +216,28 @@ onMounted(async () => {
|
||||
.people-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
height: 100vh;
|
||||
isolation: isolate; /* Create stacking context to prevent style leakage */
|
||||
}
|
||||
|
||||
.people-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgb(var(--v-border-color)) !important;
|
||||
}
|
||||
|
||||
.people-toolbar-search {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.people-toolbar-search {
|
||||
max-width: 180px;
|
||||
margin-inline: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.people-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.people-sidebar {
|
||||
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.people-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -207,8 +245,6 @@ onMounted(async () => {
|
||||
|
||||
.people-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
+1
-2
@@ -2,8 +2,7 @@ const routes = [
|
||||
{
|
||||
name: 'people',
|
||||
path: '/people',
|
||||
component: () => import('@/pages/Main.vue'),
|
||||
meta: { layout: 'fixed' },
|
||||
component: () => import('@/pages/PeoplePage.vue'),
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
+16
-65
@@ -8,14 +8,10 @@ import { GroupObject } from '@PeopleManager/models/group'
|
||||
import type { ServiceObject } from '@PeopleManager/models/service'
|
||||
import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
|
||||
import { useEntitiesStore } from '@PeopleManager/stores/entitiesStore'
|
||||
import { useServicesStore } from '@PeopleManager/stores/servicesStore'
|
||||
import { useImportStore } from '@PeopleManager/stores/importStore'
|
||||
|
||||
export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
const servicesStore = useServicesStore()
|
||||
const collectionsStore = useCollectionsStore()
|
||||
const entitiesStore = useEntitiesStore()
|
||||
const importStore = useImportStore()
|
||||
|
||||
// UI state
|
||||
const sidebarVisible = ref(true)
|
||||
@@ -33,9 +29,6 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
const editingCollection = shallowRef<CollectionObject | null>(null)
|
||||
const collectionEditorMode = ref<'create' | 'edit'>('create')
|
||||
|
||||
// Import state
|
||||
const showImportDialog = ref(false)
|
||||
|
||||
// Derived state
|
||||
const collections = computed(() => collectionsStore.collections)
|
||||
const entities = computed(() => entitiesStore.entities)
|
||||
@@ -63,12 +56,15 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
if (collectionEditorMode.value === 'create') {
|
||||
const created = await collectionsStore.create(
|
||||
service.provider,
|
||||
service.identifier ?? '',
|
||||
service.identifier || '',
|
||||
null,
|
||||
collection.properties,
|
||||
)
|
||||
selectedCollection.value = created
|
||||
} else {
|
||||
await collectionsStore.update(
|
||||
collection.provider,
|
||||
collection.service,
|
||||
collection.identifier,
|
||||
collection.properties,
|
||||
)
|
||||
@@ -78,7 +74,7 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
}
|
||||
|
||||
async function deleteCollection(collection: CollectionObject) {
|
||||
await collectionsStore.delete(collection.identifier)
|
||||
await collectionsStore.delete(collection.provider, collection.service, collection.identifier)
|
||||
|
||||
if (selectedCollection.value?.identifier === collection.identifier) {
|
||||
selectedCollection.value = null
|
||||
@@ -136,6 +132,8 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
// Create
|
||||
entity.properties.created = new Date()
|
||||
selectedEntity.value = await entitiesStore.create(
|
||||
targetCollection.provider,
|
||||
targetCollection.service,
|
||||
targetCollection.identifier,
|
||||
entity.properties,
|
||||
)
|
||||
@@ -143,6 +141,9 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
// Update
|
||||
entity.properties.modified = new Date()
|
||||
selectedEntity.value = await entitiesStore.update(
|
||||
targetCollection.provider,
|
||||
targetCollection.service,
|
||||
targetCollection.identifier,
|
||||
entity.identifier,
|
||||
entity.properties,
|
||||
)
|
||||
@@ -161,66 +162,21 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
throw new Error('[People] - No collection selected, cannot delete entity')
|
||||
}
|
||||
|
||||
await entitiesStore.delete([entity.identifier])
|
||||
await entitiesStore.delete(
|
||||
targetCollection.provider,
|
||||
targetCollection.service,
|
||||
targetCollection.identifier,
|
||||
entity.identifier,
|
||||
)
|
||||
|
||||
closeEntityEditor()
|
||||
}
|
||||
|
||||
// --- Import actions ---
|
||||
|
||||
/**
|
||||
* Queue selected VCF files and open the import dialog.
|
||||
* Defaults each file's target to the currently selected collection.
|
||||
*/
|
||||
async function openImport(files: File[]) {
|
||||
importStore.removeAllFiles()
|
||||
importStore.reset()
|
||||
|
||||
for (const file of files) {
|
||||
const contents = await file.text()
|
||||
const id = importStore.addFile({
|
||||
name: file.name,
|
||||
contents,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
})
|
||||
if (selectedCollection.value) {
|
||||
importStore.setCollectionForFile(id, selectedCollection.value.identifier)
|
||||
}
|
||||
}
|
||||
|
||||
importStore.stage = 'selecting'
|
||||
showImportDialog.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the import dialog. When refresh is requested, reload the entity lists for
|
||||
* every collection that received contacts, then clear the import queue.
|
||||
*/
|
||||
async function closeImport(refresh: boolean = false) {
|
||||
showImportDialog.value = false
|
||||
|
||||
if (refresh) {
|
||||
const targets = new Set<CollectionObject['identifier']>()
|
||||
for (const id of importStore.order) {
|
||||
const target = importStore.sessions[id]?.targetIdentifier
|
||||
if (target) targets.add(target)
|
||||
}
|
||||
for (const target of targets) {
|
||||
await entitiesStore.list([target])
|
||||
}
|
||||
}
|
||||
|
||||
importStore.removeAllFiles()
|
||||
importStore.reset()
|
||||
}
|
||||
|
||||
// --- Lifecycle ---
|
||||
|
||||
async function initialize() {
|
||||
loading.value = true
|
||||
try {
|
||||
await servicesStore.list()
|
||||
await collectionsStore.list()
|
||||
|
||||
if (
|
||||
@@ -244,7 +200,6 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
showCollectionEditor,
|
||||
editingCollection,
|
||||
collectionEditorMode,
|
||||
showImportDialog,
|
||||
|
||||
// Derived
|
||||
collections,
|
||||
@@ -266,10 +221,6 @@ export const usePeopleStore = defineStore('peopleStore', () => {
|
||||
saveEntity,
|
||||
deleteEntity,
|
||||
|
||||
// Import actions
|
||||
openImport,
|
||||
closeImport,
|
||||
|
||||
// Lifecycle
|
||||
initialize,
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
|
||||
describe('Basic Tests', () => {
|
||||
it('should perform basic assertion', () => {
|
||||
expect(true).toBe(true)
|
||||
})
|
||||
|
||||
it('should test array operations', () => {
|
||||
const array = ['foo', 'bar', 'baz']
|
||||
|
||||
expect(array).toHaveLength(3)
|
||||
expect(array).toContain('bar')
|
||||
expect(array[0]).toBe('foo')
|
||||
})
|
||||
|
||||
it('should test string operations', () => {
|
||||
const string = 'Hello, World!'
|
||||
|
||||
expect(string).toContain('World')
|
||||
expect(string.length).toBe(13)
|
||||
})
|
||||
|
||||
it('should test object operations', () => {
|
||||
const obj = { foo: 'bar', count: 42 }
|
||||
|
||||
expect(obj).toHaveProperty('foo')
|
||||
expect(obj.foo).toBe('bar')
|
||||
expect(obj.count).toBeGreaterThan(40)
|
||||
})
|
||||
})
|
||||
@@ -1,33 +0,0 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { defineConfig, configDefaults } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '../../src'),
|
||||
'@KTXC': path.resolve(__dirname, '../../../../core/src'),
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||
root: fileURLToPath(new URL('../../', import.meta.url)),
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/',
|
||||
'tests/',
|
||||
'**/*.d.ts',
|
||||
'**/*.config.*',
|
||||
'**/dist/**',
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user