Initial commit
This commit is contained in:
root
@@ -0,0 +1,392 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useModuleStore } from '@KTXC/stores/moduleStore'
|
||||
import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
|
||||
import { useEntitiesStore } from '@PeopleManager/stores/entitiesStore'
|
||||
import { ServiceObject } from '@PeopleManager/models/service';
|
||||
import { CollectionObject } from '@PeopleManager/models/collection';
|
||||
import { EntityObject } from '@PeopleManager/models/entity';
|
||||
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()
|
||||
|
||||
// View state
|
||||
const sidebarVisible = ref(true)
|
||||
|
||||
// Check if people manager is available
|
||||
const moduleStore = useModuleStore()
|
||||
|
||||
const isPeopleManagerAvailable = computed(() => {
|
||||
return moduleStore.has('people_manager') || moduleStore.has('PeopleManager')
|
||||
})
|
||||
|
||||
// Local state for UI selections
|
||||
const collectionsStore = useCollectionsStore()
|
||||
const entitiesStore = useEntitiesStore()
|
||||
const selectedCollection = ref<CollectionObject | null>(null)
|
||||
const selectedEntity = ref<EntityObject | null>(null)
|
||||
const entityEditorMode = ref<'edit' | 'view'>('view')
|
||||
|
||||
// Collection editor state
|
||||
const showCollectionEditor = ref(false)
|
||||
const editingCollection = ref<CollectionObject | null>(null)
|
||||
const collectionEditorMode = ref<'create' | 'edit'>('create')
|
||||
const CollectionListRef = ref<InstanceType<typeof CollectionList> | null>(null)
|
||||
|
||||
// Handlers
|
||||
const handleEditorEdit = () => {
|
||||
console.log('[People] - Editor editing started')
|
||||
entityEditorMode.value = 'edit'
|
||||
}
|
||||
|
||||
const handleEditorCancel = () => {
|
||||
console.log('[People] - Editor editing cancelled')
|
||||
entityEditorMode.value = 'view'
|
||||
}
|
||||
|
||||
const handleEditorClose = () => {
|
||||
console.log('[People] - Editor closed')
|
||||
selectedEntity.value = null
|
||||
entityEditorMode.value = 'view'
|
||||
}
|
||||
|
||||
const handleCollectionSelect = (collection: CollectionObject) => {
|
||||
console.log('[People] - Collection selected', collection)
|
||||
selectedCollection.value = collection ?? null
|
||||
selectedEntity.value = null
|
||||
}
|
||||
|
||||
const handleCollectionEdit = (collection: CollectionObject) => {
|
||||
console.log('[People] - Collection edit', collection)
|
||||
editingCollection.value = collection
|
||||
collectionEditorMode.value = 'edit'
|
||||
showCollectionEditor.value = true
|
||||
}
|
||||
|
||||
const onCollectionFresh = () => {
|
||||
console.log('[People] - Collection new')
|
||||
editingCollection.value = collectionsStore.fresh()
|
||||
collectionEditorMode.value = 'create'
|
||||
showCollectionEditor.value = true
|
||||
}
|
||||
|
||||
const handleCollectionSave = async (collection: CollectionObject, service: ServiceObject) => {
|
||||
console.log('[People] - Collection save', collection)
|
||||
if (collectionEditorMode.value === 'create') {
|
||||
await handleCollectionCreate(collection, service)
|
||||
} else {
|
||||
await handleCollectionModify(collection)
|
||||
}
|
||||
await CollectionListRef.value?.refresh()
|
||||
}
|
||||
|
||||
const handleCollectionCreate = async (collection: CollectionObject, service: ServiceObject) => {
|
||||
console.log('[People] - Collection created', collection)
|
||||
const result = await collectionsStore.create(service, collection)
|
||||
|
||||
if (result instanceof CollectionObject) {
|
||||
selectedCollection.value = result
|
||||
} else {
|
||||
selectedCollection.value = null
|
||||
}
|
||||
|
||||
selectedEntity.value = null
|
||||
}
|
||||
|
||||
const handleCollectionModify = async (collection: CollectionObject) => {
|
||||
console.log('[People] - Collection modified', collection)
|
||||
await collectionsStore.modify(collection)
|
||||
}
|
||||
|
||||
const handleCollectionDelete = async (collection: CollectionObject) => {
|
||||
console.log('[People] - Collection deleted', collection)
|
||||
await collectionsStore.destroy(collection)
|
||||
selectedCollection.value = null
|
||||
selectedEntity.value = null
|
||||
await CollectionListRef.value?.refresh()
|
||||
}
|
||||
|
||||
const handleEntitySelect = (entity: EntityObject) => {
|
||||
console.log('[People] - Entity selected', entity)
|
||||
selectedEntity.value = entity
|
||||
entityEditorMode.value = 'view'
|
||||
}
|
||||
|
||||
const onEntityFresh = (type: string) => {
|
||||
console.log('[People] - Entity create', type)
|
||||
selectedEntity.value = entitiesStore.fresh(type)
|
||||
entityEditorMode.value = 'edit'
|
||||
}
|
||||
|
||||
const handleEntitySave = async (entity: EntityObject, collection?: CollectionObject | null) => {
|
||||
console.log('[People] - Entity save', entity)
|
||||
if (!(collection instanceof CollectionObject)) {
|
||||
collection = selectedCollection.value
|
||||
}
|
||||
if (!collection) {
|
||||
console.warn('[People] - Invalid collection object cannot save entity')
|
||||
return
|
||||
}
|
||||
if (entity.id === null) {
|
||||
console.log('[People] - Entity create', entity)
|
||||
entity.data.created = new Date();
|
||||
selectedEntity.value = await entitiesStore.create(collection, entity)
|
||||
} else if (entity.id !== null) {
|
||||
console.log('[People] - Entity modify', entity)
|
||||
entity.data.modified = new Date();
|
||||
selectedEntity.value = await entitiesStore.modify(collection, entity)
|
||||
}
|
||||
entityEditorMode.value = 'view'
|
||||
}
|
||||
|
||||
const handleEntityDelete = async (entity: EntityObject, collection?: CollectionObject | null) => {
|
||||
console.log('[People] - Entity deleted', entity)
|
||||
if (!(collection instanceof CollectionObject)) {
|
||||
collection = selectedCollection.value
|
||||
}
|
||||
if (!collection) {
|
||||
console.warn('[People] - Invalid collection object cannot delete entity')
|
||||
return
|
||||
}
|
||||
await entitiesStore.destroy(collection, entity)
|
||||
selectedEntity.value = null
|
||||
entityEditorMode.value = 'view'
|
||||
}
|
||||
</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
|
||||
ref="CollectionListRef"
|
||||
:selected-collection="selectedCollection"
|
||||
@select="handleCollectionSelect"
|
||||
@edit="handleCollectionEdit"
|
||||
/>
|
||||
|
||||
<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="onEntityFresh('individual')"
|
||||
>
|
||||
Individual
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-domain-plus"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
:disabled="!selectedCollection"
|
||||
@click="onEntityFresh('organization')"
|
||||
>
|
||||
Organization
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-account-group"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
:disabled="!selectedCollection"
|
||||
@click="onEntityFresh('group')"
|
||||
>
|
||||
Group
|
||||
</v-btn>
|
||||
<v-btn
|
||||
variant="text"
|
||||
prepend-icon="mdi-book-plus"
|
||||
size="small"
|
||||
block
|
||||
class="justify-start"
|
||||
@click="onCollectionFresh"
|
||||
>
|
||||
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="handleEntitySelect"
|
||||
@fresh="onEntityFresh"
|
||||
/>
|
||||
</div>
|
||||
<div class="people-editor-panel">
|
||||
<PersonEditor
|
||||
:mode="entityEditorMode"
|
||||
:selected-collection="selectedCollection"
|
||||
:selected-entity="selectedEntity"
|
||||
@save="handleEntitySave"
|
||||
@delete="handleEntityDelete"
|
||||
@edit="handleEditorEdit"
|
||||
@cancel="handleEditorCancel"
|
||||
@close="handleEditorClose"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collection Editor Dialog -->
|
||||
<CollectionEditor
|
||||
v-model="showCollectionEditor"
|
||||
:collection="editingCollection"
|
||||
:mode="collectionEditorMode"
|
||||
@save="handleCollectionSave"
|
||||
@delete="handleCollectionDelete"
|
||||
/>
|
||||
</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>
|
||||
Reference in New Issue
Block a user