293 lines
7.6 KiB
Vue
293 lines
7.6 KiB
Vue
<script setup lang="ts">
|
|
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 CollectionList from '@/components/CollectionList.vue'
|
|
import CollectionEditor from '@/components/CollectionEditor.vue'
|
|
import PersonList from '@/components/PersonList.vue'
|
|
import PersonEditor from '@/components/PersonEditor.vue'
|
|
|
|
// Vuetify display
|
|
const display = useDisplay()
|
|
|
|
// Check if people manager is available
|
|
const moduleStore = useModuleStore()
|
|
const isPeopleManagerAvailable = computed(() => {
|
|
return moduleStore.has('people_manager') || moduleStore.has('PeopleManager')
|
|
})
|
|
|
|
// Store
|
|
const peopleStore = usePeopleStore()
|
|
|
|
const {
|
|
sidebarVisible,
|
|
loading,
|
|
selectedCollection,
|
|
selectedEntity,
|
|
entityEditorMode,
|
|
showCollectionEditor,
|
|
editingCollection,
|
|
collectionEditorMode,
|
|
collections,
|
|
} = storeToRefs(peopleStore)
|
|
|
|
const {
|
|
initialize,
|
|
selectCollection,
|
|
openEditCollection,
|
|
openCreateCollection,
|
|
selectEntity,
|
|
createEntity,
|
|
startEditingEntity,
|
|
cancelEditingEntity,
|
|
closeEntityEditor,
|
|
saveEntity,
|
|
deleteEntity,
|
|
saveCollection,
|
|
deleteCollection,
|
|
} = peopleStore
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await initialize()
|
|
} catch (error) {
|
|
console.error('[People] - Failed to load data from PeopleManager:', error)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="people-container">
|
|
<!-- Top Navigation Bar -->
|
|
<v-app-bar elevation="0" class="people-toolbar border-b">
|
|
<template #prepend>
|
|
<v-btn
|
|
icon="mdi-menu"
|
|
variant="text"
|
|
@click="sidebarVisible = !sidebarVisible"
|
|
></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-spacer></v-spacer>
|
|
</v-app-bar>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
|
|
<!-- Main View -->
|
|
<div class="people-main">
|
|
<v-alert
|
|
v-if="!isPeopleManagerAvailable"
|
|
type="warning"
|
|
variant="tonal"
|
|
closable
|
|
class="mb-4"
|
|
>
|
|
<v-alert-title class="d-flex align-center">
|
|
<v-icon icon="mdi-alert-circle" class="mr-2" />
|
|
People Manager Not Available
|
|
</v-alert-title>
|
|
<div class="mt-2">
|
|
<p>
|
|
The People Manager module is not installed or enabled.
|
|
This module requires the <strong>people_manager</strong> module to function properly.
|
|
</p>
|
|
<p class="mt-2 mb-0">
|
|
Please contact your system administrator to install and enable the
|
|
<code>people_manager</code> module.
|
|
</p>
|
|
</div>
|
|
</v-alert>
|
|
|
|
<div v-if="isPeopleManagerAvailable" class="people-wrapper">
|
|
<div class="people-list-panel">
|
|
<PersonList
|
|
:selected-collection="selectedCollection"
|
|
:selected-entity="selectedEntity"
|
|
@select="selectEntity"
|
|
@fresh="createEntity"
|
|
/>
|
|
</div>
|
|
<div class="people-editor-panel">
|
|
<PersonEditor
|
|
:mode="entityEditorMode"
|
|
:selected-collection="selectedCollection"
|
|
:selected-entity="selectedEntity"
|
|
@save="saveEntity"
|
|
@delete="deleteEntity"
|
|
@edit="startEditingEntity"
|
|
@cancel="cancelEditingEntity"
|
|
@close="closeEntityEditor"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collection Editor Dialog -->
|
|
<CollectionEditor
|
|
v-model="showCollectionEditor"
|
|
:collection="editingCollection"
|
|
:mode="collectionEditorMode"
|
|
@save="saveCollection"
|
|
@delete="deleteCollection"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.people-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
isolation: isolate; /* Create stacking context to prevent style leakage */
|
|
}
|
|
|
|
.people-toolbar {
|
|
border-bottom: 1px solid rgb(var(--v-border-color)) !important;
|
|
}
|
|
|
|
.people-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.people-sidebar {
|
|
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.people-main {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.people-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.people-list-panel {
|
|
width: 300px;
|
|
min-width: 250px;
|
|
max-width: 400px;
|
|
border-right: 1px solid rgb(var(--v-border-color));
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: rgba(var(--v-theme-on-surface), 0.04);
|
|
}
|
|
|
|
.people-editor-panel {
|
|
flex: 1;
|
|
border-left: 1px solid rgb(var(--v-border-color));
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: rgba(var(--v-theme-on-surface), 0.04);
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 960px) {
|
|
.people-wrapper {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.people-list-panel {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: 40%;
|
|
border-right: none;
|
|
border-bottom: 1px solid rgb(var(--v-border-color));
|
|
}
|
|
|
|
.people-editor-panel {
|
|
border-left: none;
|
|
border-top: 1px solid rgb(var(--v-border-color));
|
|
}
|
|
}
|
|
</style>
|