Self-hosted employee directory (in-app management + CSV import)
Most sites have no external HR database, so add a self-hosted directory mode. - New employee_directory_mode setting: 'external' (default; read a separate HR DB, unchanged) or 'selfhosted' (app-owned table). - DirectoryEmployee model + directoryemployees table (migration 7d16). to_dict emits the same keys the external contract uses (SSO/First_Name/...), so both modes share one response shape and the frontend is unchanged. - Employee search / single / batch lookup branch on the mode. - Self-hosted-only management endpoints: list, create, update, delete, and CSV import (upsert by SSO). Guarded so they only work in self-hosted mode. - EmployeeDirectory.vue management page (Settings > Locations & Organization): table + search + pagination, add/edit/delete, CSV import (file or paste). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cproudlock
234
frontend/src/views/settings/EmployeeDirectory.vue
Normal file
234
frontend/src/views/settings/EmployeeDirectory.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>Employee Directory</h2>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-secondary" @click="showImport = true" :disabled="!selfhosted">Import CSV</button>
|
||||
<button class="btn btn-primary" @click="openModal()" :disabled="!selfhosted">+ Add Person</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!selfhosted" class="card">
|
||||
<p class="hint">
|
||||
The directory is in <strong>external</strong> mode - people come from a
|
||||
separate HR database, so there is nothing to manage here. To manage
|
||||
people in-app, set <code>employee_directory_mode</code> to
|
||||
<code>selfhosted</code> under System Settings, then reload.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="card">
|
||||
<div class="filters">
|
||||
<input v-model="search" type="text" class="form-control" placeholder="Search name or SSO..." />
|
||||
<span class="result-count">{{ filtered.length }} of {{ items.length }}</span>
|
||||
</div>
|
||||
<div v-if="loading" class="muted">Loading...</div>
|
||||
<template v-else>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>SSO</th><th>Name</th><th>Team</th><th>Role</th><th>Photo</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in paginated" :key="e.SSO">
|
||||
<td class="mono">{{ e.SSO }}</td>
|
||||
<td>{{ e.First_Name }} {{ e.Last_Name }}</td>
|
||||
<td>{{ e.Team || '-' }}</td>
|
||||
<td>{{ e.Role || '-' }}</td>
|
||||
<td class="mono">{{ e.Picture || '-' }}</td>
|
||||
<td class="actions">
|
||||
<button class="btn btn-secondary btn-sm" @click="openModal(e)">Edit</button>
|
||||
<button class="btn btn-danger btn-sm" @click="remove(e)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="filtered.length === 0">
|
||||
<td colspan="6" style="text-align:center;color:var(--text-light);">No people yet</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div v-if="totalPages > 1" class="pagination">
|
||||
<button class="btn btn-secondary btn-sm" :disabled="page===1" @click="page--">Prev</button>
|
||||
<span class="page-info">Page {{ page }} of {{ totalPages }}</span>
|
||||
<button class="btn btn-secondary btn-sm" :disabled="page===totalPages" @click="page++">Next</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add / edit modal -->
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Person</h3></div>
|
||||
<form @submit.prevent="save">
|
||||
<div class="modal-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>SSO *</label>
|
||||
<input v-model="form.SSO" type="number" class="form-control" :disabled="!!editing" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Photo filename</label>
|
||||
<input v-model="form.Picture" type="text" class="form-control" placeholder="123456.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>First name *</label><input v-model="form.First_Name" type="text" class="form-control" required /></div>
|
||||
<div class="form-group"><label>Last name *</label><input v-model="form.Last_Name" type="text" class="form-control" required /></div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>Team</label><input v-model="form.Team" type="text" class="form-control" /></div>
|
||||
<div class="form-group"><label>Role</label><input v-model="form.Role" type="text" class="form-control" /></div>
|
||||
</div>
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">{{ saving ? 'Saving...' : 'Save' }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSV import modal -->
|
||||
<div v-if="showImport" class="modal-overlay" @click.self="showImport = false">
|
||||
<div class="modal">
|
||||
<div class="modal-header"><h3>Import CSV</h3></div>
|
||||
<div class="modal-body">
|
||||
<p class="hint">Headers: <code>SSO,First_Name,Last_Name,Team,Role,Picture</code>. Existing SSOs are updated.</p>
|
||||
<input type="file" accept=".csv,text/csv" @change="onFile" />
|
||||
<textarea v-model="csvText" class="form-control" rows="8" placeholder="or paste CSV here" style="margin-top:0.6rem;"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @click="showImport = false">Cancel</button>
|
||||
<button class="btn btn-primary" :disabled="importing || !csvText.trim()" @click="doImport">{{ importing ? 'Importing...' : 'Import' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { employeesApi, settingsApi } from '../../api'
|
||||
import { useToast } from '../../composables/toast'
|
||||
import { apiError } from '../../utils/apiError'
|
||||
|
||||
const toast = useToast()
|
||||
const selfhosted = ref(false)
|
||||
const items = ref([])
|
||||
const loading = ref(true)
|
||||
const search = ref('')
|
||||
const page = ref(1)
|
||||
const perPage = 25
|
||||
const showModal = ref(false)
|
||||
const editing = ref(null)
|
||||
const saving = ref(false)
|
||||
const error = ref('')
|
||||
const form = ref(blank())
|
||||
const showImport = ref(false)
|
||||
const csvText = ref('')
|
||||
const importing = ref(false)
|
||||
|
||||
function blank() { return { SSO: '', First_Name: '', Last_Name: '', Team: '', Role: '', Picture: '' } }
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value.trim().toLowerCase()
|
||||
if (!term) return items.value
|
||||
return items.value.filter(e =>
|
||||
`${e.First_Name} ${e.Last_Name}`.toLowerCase().includes(term) ||
|
||||
String(e.SSO).includes(term))
|
||||
})
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(filtered.value.length / perPage)))
|
||||
const paginated = computed(() => filtered.value.slice((page.value - 1) * perPage, page.value * perPage))
|
||||
watch(search, () => { page.value = 1 })
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await settingsApi.get('employee_directory_mode')
|
||||
selfhosted.value = (response.data?.data?.value || 'external') === 'selfhosted'
|
||||
} catch (err) { /* default external */ }
|
||||
if (selfhosted.value) await load()
|
||||
else loading.value = false
|
||||
})
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const response = await employeesApi.directory.list()
|
||||
items.value = response.data.data || []
|
||||
} catch (err) {
|
||||
toast.error(apiError(err, 'Could not load directory'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(item = null) {
|
||||
editing.value = item
|
||||
form.value = item ? { ...item } : blank()
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
function closeModal() { showModal.value = false; editing.value = null }
|
||||
|
||||
async function save() {
|
||||
error.value = ''
|
||||
saving.value = true
|
||||
try {
|
||||
if (editing.value) await employeesApi.directory.update(editing.value.SSO, form.value)
|
||||
else await employeesApi.directory.create(form.value)
|
||||
closeModal()
|
||||
load()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Failed to save')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(e) {
|
||||
if (!confirm(`Remove ${e.First_Name} ${e.Last_Name}?`)) return
|
||||
try {
|
||||
await employeesApi.directory.remove(e.SSO)
|
||||
load()
|
||||
} catch (err) {
|
||||
toast.error(apiError(err, 'Failed to delete'))
|
||||
}
|
||||
}
|
||||
|
||||
function onFile(event) {
|
||||
const file = event.target.files[0]
|
||||
if (!file) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => { csvText.value = reader.result }
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
async function doImport() {
|
||||
importing.value = true
|
||||
try {
|
||||
const response = await employeesApi.directory.importCsv(csvText.value)
|
||||
toast.success(response.data?.message || 'Imported')
|
||||
showImport.value = false
|
||||
csvText.value = ''
|
||||
load()
|
||||
} catch (err) {
|
||||
toast.error(apiError(err, 'Import failed'))
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hint { color: var(--text-light); font-size: 0.9rem; }
|
||||
.muted { color: var(--text-light); }
|
||||
.mono { font-family: monospace; font-size: 0.85rem; }
|
||||
.filters { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
|
||||
.filters .form-control { max-width: 320px; }
|
||||
.result-count { color: var(--text-light); font-size: 0.85rem; }
|
||||
.form-row { display: flex; gap: 1rem; }
|
||||
.form-row .form-group { flex: 1; }
|
||||
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem 0 0.2rem; }
|
||||
.page-info { color: var(--text-light); font-size: 0.85rem; }
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
// Shared settings navigation catalog.
|
||||
// Used by SettingsLayout (left rail) and SettingsIndex (landing overview) so the
|
||||
// grouping lives in one place.
|
||||
import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle, Bell, Network, Home, Wrench, Printer, Router, Palette, SlidersHorizontal } from 'lucide-vue-next'
|
||||
import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle, Bell, Network, Home, Wrench, Printer, Router, Palette, SlidersHorizontal, Contact } from 'lucide-vue-next'
|
||||
|
||||
export const settingsGroups = [
|
||||
{
|
||||
@@ -48,6 +48,7 @@ export const settingsGroups = [
|
||||
{
|
||||
title: 'Locations & Organization',
|
||||
cards: [
|
||||
{ to: '/settings/employeedirectory', icon: Contact, title: 'Employee Directory', description: 'Manage the self-hosted people directory (add/edit/import); read-only in external HR mode' },
|
||||
{ to: '/settings/locations', icon: MapPin, title: 'Locations', description: 'Manage physical locations and sites' },
|
||||
{ to: '/settings/locationtypes', icon: Tag, title: 'Location Types', description: 'Manage location types + colors' },
|
||||
{ to: '/settings/businessunits', icon: Building, title: 'Business Units', description: 'Manage organizational units' },
|
||||
|
||||
Reference in New Issue
Block a user