Compare commits
35 Commits
a35bbf92dc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| da65697fb9 | |||
| 534185970a | |||
| 4e9c1272b6 | |||
| ea20b546ab | |||
| 48c5e604ae | |||
| be8857cccb | |||
| 5d21d02381 | |||
| bda339c9d8 | |||
| a74e9d61fa | |||
| d2039b9655 | |||
| d3ab251acf | |||
| 42b70e7961 | |||
| f7830c1f7c | |||
| a92e424d4b | |||
| 92bfaa51b4 | |||
| 09e998b50b | |||
| 54f4a0937c | |||
| c4761a2852 | |||
| 15ba9d128b | |||
| 6ba6905903 | |||
| ab4d6b11a6 | |||
| e11b73067b | |||
| e9ca326671 | |||
| 2fc94cf573 | |||
| a3622a297c | |||
| 2ab040cba0 | |||
| a230dd3374 | |||
| 10ed6e4375 | |||
| 21a444bfbe | |||
| 54673f4337 | |||
| eed7218f27 | |||
| eed6891703 | |||
| d3aa290576 | |||
| 9a1c668780 | |||
| 0f139c2142 |
@@ -0,0 +1,50 @@
|
||||
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
|
||||
@@ -0,0 +1,50 @@
|
||||
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,11 +25,17 @@ jobs:
|
||||
tools: composer:v2
|
||||
|
||||
- name: Install Renovate
|
||||
run: npm install -g 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
|
||||
|
||||
- name: Run Renovate
|
||||
env:
|
||||
RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
|
||||
RENOVATE_PLATFORM: gitea
|
||||
RENOVATE_ENDPOINT: https://git.ktrix.dev/api/v1
|
||||
run: renovate ${{ gitea.repository }}
|
||||
run: |
|
||||
"${{ runner.temp }}/renovate-npm/bin/renovate" ${{ gitea.repository }}
|
||||
+2
-4
@@ -12,12 +12,10 @@ node_modules/
|
||||
/static/
|
||||
|
||||
# Backend development
|
||||
/vendor/
|
||||
/lib/vendor/
|
||||
coverage/
|
||||
phpunit.xml.cache
|
||||
.phpunit.result.cache
|
||||
.php-cs-fixer.cache
|
||||
.phpstan.cache
|
||||
*.cache
|
||||
.phpactor/
|
||||
|
||||
# Editors
|
||||
|
||||
Generated
+18
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"_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
+2068
-376
File diff suppressed because it is too large
Load Diff
+11
-3
@@ -11,10 +11,14 @@
|
||||
"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"
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"pinia": "^3.0.0",
|
||||
"pinia": "^4.0.0",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^5.0.0",
|
||||
"vuetify": "^4.0.0"
|
||||
@@ -24,6 +28,10 @@
|
||||
"@vue/tsconfig": "^0.9.0",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.0.0",
|
||||
"vue-tsc": "^3.0.5"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ const props = defineProps<{
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'create': []
|
||||
'select': [collection: CollectionObject]
|
||||
'edit': [collection: CollectionObject]
|
||||
}>()
|
||||
@@ -27,13 +28,23 @@ const onCollectionEdit = (collection: CollectionObject) => {
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-divider class="mb-2" />
|
||||
|
||||
<div class="collection-selector-content">
|
||||
<v-progress-linear v-if="loading" indeterminate color="primary" />
|
||||
@@ -59,6 +70,7 @@ const onCollectionEdit = (collection: CollectionObject) => {
|
||||
icon="mdi-pencil"
|
||||
size="x-small"
|
||||
variant="text"
|
||||
class="collection-edit-btn"
|
||||
@click.stop="onCollectionEdit(collection)"
|
||||
/>
|
||||
</template>
|
||||
@@ -92,4 +104,28 @@ 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>
|
||||
|
||||
@@ -11,6 +11,7 @@ const entitiesStore = useEntitiesStore()
|
||||
const props = defineProps<{
|
||||
selectedCollection?: CollectionObject | null
|
||||
selectedEntity?: EntityObject | null
|
||||
search?: string | null
|
||||
}>()
|
||||
|
||||
// Emits
|
||||
@@ -21,7 +22,6 @@ const emit = defineEmits<{
|
||||
|
||||
// State
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Entities belonging to the selected collection, sourced live from the manager store
|
||||
const collectionEntities = computed<EntityObject[]>(() => {
|
||||
@@ -34,10 +34,10 @@ const collectionEntities = computed<EntityObject[]>(() => {
|
||||
|
||||
// Computed
|
||||
const filteredEntities = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
const query = (props.search ?? '').trim().toLowerCase()
|
||||
if (!query) {
|
||||
return collectionEntities.value
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return collectionEntities.value.filter(entity => {
|
||||
const props = (entity.properties as any)
|
||||
const given = props?.names?.given || ''
|
||||
@@ -163,18 +163,6 @@ 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" />
|
||||
|
||||
@@ -251,13 +239,6 @@ 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;
|
||||
@@ -267,10 +248,6 @@ function entityAvatarColor(entity: EntityObject): string {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.person-list-container :deep(.v-field) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<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,18 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useModuleStore } from '@KTXC/stores/moduleStore'
|
||||
import { usePeopleStore } from '@/stores/peopleStore'
|
||||
import CollectionList from '@/components/CollectionList.vue'
|
||||
import Sidebar from '@/components/Sidebar.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()
|
||||
const isPeopleManagerAvailable = computed(() => {
|
||||
@@ -24,7 +20,6 @@ const peopleStore = usePeopleStore()
|
||||
|
||||
const {
|
||||
sidebarVisible,
|
||||
loading,
|
||||
selectedCollection,
|
||||
selectedEntity,
|
||||
entityEditorMode,
|
||||
@@ -37,9 +32,6 @@ const {
|
||||
|
||||
const {
|
||||
initialize,
|
||||
selectCollection,
|
||||
openEditCollection,
|
||||
openCreateCollection,
|
||||
selectEntity,
|
||||
createEntity,
|
||||
startEditingEntity,
|
||||
@@ -49,25 +41,11 @@ const {
|
||||
deleteEntity,
|
||||
saveCollection,
|
||||
deleteCollection,
|
||||
openImport,
|
||||
closeImport,
|
||||
} = peopleStore
|
||||
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
// Contact search (filters the person list)
|
||||
const searchQuery = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
@@ -81,7 +59,7 @@ onMounted(async () => {
|
||||
<template>
|
||||
<div class="people-container">
|
||||
<!-- Top Navigation Bar -->
|
||||
<v-app-bar elevation="0" class="people-toolbar border-b">
|
||||
<v-toolbar elevation="0" density="compact" class="people-toolbar">
|
||||
<template #prepend>
|
||||
<v-btn
|
||||
icon="mdi-menu"
|
||||
@@ -90,111 +68,31 @@ onMounted(async () => {
|
||||
></v-btn>
|
||||
</template>
|
||||
|
||||
<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-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-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="people-content">
|
||||
<!-- Sidebar Navigation Drawer -->
|
||||
<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>
|
||||
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<div class="d-flex align-center mb-2">
|
||||
<v-icon icon="mdi-database-import" size="small" class="mr-2" />
|
||||
<span class="text-subtitle-2 font-weight-bold">Import</span>
|
||||
</div>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-upload"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
@click="triggerFileInput"
|
||||
>
|
||||
Import VCF
|
||||
</v-btn>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept=".vcf,text/vcard,text/x-vcard"
|
||||
multiple
|
||||
class="d-none"
|
||||
@change="onFilesSelected"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
<Sidebar />
|
||||
|
||||
<!-- Main View -->
|
||||
<div class="people-main">
|
||||
@@ -226,6 +124,7 @@ onMounted(async () => {
|
||||
<PersonList
|
||||
:selected-collection="selectedCollection"
|
||||
:selected-entity="selectedEntity"
|
||||
:search="searchQuery"
|
||||
@select="selectEntity"
|
||||
@fresh="createEntity"
|
||||
/>
|
||||
@@ -268,28 +167,39 @@ onMounted(async () => {
|
||||
.people-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
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;
|
||||
@@ -297,6 +207,8 @@ onMounted(async () => {
|
||||
|
||||
.people-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
+2
-1
@@ -2,7 +2,8 @@ const routes = [
|
||||
{
|
||||
name: 'people',
|
||||
path: '/people',
|
||||
component: () => import('@/pages/PeoplePage.vue'),
|
||||
component: () => import('@/pages/Main.vue'),
|
||||
meta: { layout: 'fixed' },
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
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)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
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