shopdb-flask/frontend/src/views/settings/EmployeeDirectory.vue

<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 Site &amp; Facility 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>
                  <img :src="e.photourl || fallbackAvatar" alt="Photo" class="photo-thumb"
                       :class="{ 'ge-thumb-fallback': !e.photourl }" />
                </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 class="form-group">
              <label>Photo</label>
              <div class="photo-manage">
                <img v-if="form.photourl" :src="form.photourl" alt="Employee photo" class="photo-thumb-lg" />
                <div class="photo-actions">
                  <template v-if="editing">
                    <input
                      ref="photoFileInput"
                      type="file"
                      accept=".png,.jpg,.jpeg,.gif,.webp"
                      style="display: none"
                      @change="onPhotoSelected"
                    />
                    <button type="button" class="btn btn-secondary btn-sm" :disabled="uploadingPhoto" @click="triggerPhotoUpload">
                      {{ uploadingPhoto ? 'Uploading...' : (form.photourl ? 'Replace' : 'Upload') }}
                    </button>
                    <button v-if="form.photourl" type="button" class="btn btn-danger btn-sm" @click="removePhoto">Remove</button>
                  </template>
                  <small v-else class="hint">Save the person first, then upload a photo.</small>
                </div>
              </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)
const photoFileInput = ref(null)
const uploadingPhoto = ref(false)

function blank() { return { SSO: '', First_Name: '', Last_Name: '', Team: '', Role: '', Picture: '', photourl: '' } }

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
  }
}

function triggerPhotoUpload() {
  photoFileInput.value?.click()
}

async function onPhotoSelected(event) {
  const file = event.target.files?.[0]
  if (!file || !editing.value) return
  uploadingPhoto.value = true
  try {
    const response = await employeesApi.directory.uploadPhoto(editing.value.SSO, file)
    // Backend returns the updated employee with photourl set to the served URL.
    form.value.photourl = response.data.data.photourl || ''
    form.value.photofilename = response.data.data.photofilename || ''
    toast.success('Photo uploaded')
    load()
  } catch (err) {
    toast.error(apiError(err, 'Failed to upload photo'))
  } finally {
    uploadingPhoto.value = false
    if (photoFileInput.value) photoFileInput.value.value = ''
  }
}

async function removePhoto() {
  if (!editing.value) return
  if (!confirm('Remove this photo?')) return
  try {
    await employeesApi.directory.removePhoto(editing.value.SSO)
    form.value.photourl = ''
    form.value.photofilename = ''
    toast.success('Photo removed')
    load()
  } catch (err) {
    toast.error(apiError(err, 'Failed to remove photo'))
  }
}

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; }
.ge-thumb-fallback { object-fit: contain; padding: 2px; background: #fff; }
.photo-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.photo-manage { display: flex; align-items: center; gap: 1rem; }
.photo-thumb-lg { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.photo-actions { display: flex; align-items: center; gap: 0.5rem; }
</style>