gigafibre-fsm/apps/ops/src/pages/TicketsPage.vue

<template>
  <q-page padding>
    <!-- Filters row -->
    <div class="row q-col-gutter-sm q-mb-md items-end">
      <div class="col-12 col-md-3">
        <div class="filter-label">Recherche</div>
        <q-input v-model="search" dense outlined placeholder="Sujet, client, #ticket..." class="ops-search"
          @keyup.enter="loadTickets" clearable @clear="loadTickets">
          <template #prepend><q-icon name="search" /></template>
        </q-input>
      </div>
      <div class="col-6 col-md-2">
        <div class="filter-label">Statut</div>
        <q-select v-model="statusFilter" dense outlined emit-value map-options
          :options="statusOptions" @update:model-value="resetAndLoad" />
      </div>
      <div class="col-6 col-md-2">
        <div class="filter-label">Type / Departement</div>
        <q-select v-model="typeFilter" dense outlined emit-value map-options clearable
          :options="issueTypes" @update:model-value="resetAndLoad" placeholder="Tous" />
      </div>
      <div class="col-6 col-md-2">
        <div class="filter-label">Priorite</div>
        <q-select v-model="priorityFilter" dense outlined emit-value map-options clearable
          :options="priorityOptions" @update:model-value="resetAndLoad" placeholder="Toutes" />
      </div>
      <div class="col-6 col-md-2">
        <div class="filter-label">Mes tickets</div>
        <q-btn-toggle v-model="ownerFilter" no-caps dense unelevated
          toggle-color="indigo-6" color="grey-3" text-color="grey-8"
          :options="[
            { label: 'Tous', value: 'all', icon: 'groups' },
            { label: 'Mes tickets', value: 'mine', icon: 'person' },
          ]"
          @update:model-value="resetAndLoad"
        />
      </div>
      <div class="col-auto">
        <div class="text-caption text-grey-6 q-mt-sm">{{ total.toLocaleString() }} tickets</div>
      </div>
      <div class="col-auto">
        <FlowQuickButton flat dense icon="account_tree" label="Flows tickets"
          tooltip="Configurer les automatisations pour les tickets"
          category="incident" applies-to="Issue" trigger-event="on_issue_opened" />
      </div>
    </div>

    <!-- Table -->
    <q-table
      :rows="tickets" :columns="columns" row-key="name"
      flat bordered class="ops-table clickable-table"
      :loading="loading"
      v-model:pagination="pagination"
      @request="onRequest"
      @row-click="(_, row) => openTicketModal(row)"
    >
      <template #body-cell-important="props">
        <q-td :props="props" style="padding:0 4px">
          <q-icon v-if="props.row.is_important" name="star" color="amber-7" size="18px">
            <q-tooltip>Ticket important</q-tooltip>
          </q-icon>
        </q-td>
      </template>
      <template #body-cell-legacy_id="props">
        <q-td :props="props">
          <span class="text-caption text-weight-medium text-indigo-6">#{{ props.row.legacy_ticket_id || props.row.name }}</span>
        </q-td>
      </template>
      <template #body-cell-subject="props">
        <q-td :props="props">
          <div class="text-weight-medium">{{ props.row.subject }}</div>
          <div class="text-caption text-grey-6">{{ props.row.name }}</div>
        </q-td>
      </template>
      <template #body-cell-customer_name="props">
        <q-td :props="props">
          <router-link v-if="props.row.customer" :to="'/clients/' + props.row.customer" class="erp-link" @click.stop>
            {{ props.row.customer_name || props.row.customer }}
          </router-link>
          <span v-else class="text-grey-5">---</span>
        </q-td>
      </template>
      <template #body-cell-opening_date="props">
        <q-td :props="props">
          {{ formatDate(props.row.opening_date) }}
        </q-td>
      </template>
      <template #body-cell-status="props">
        <q-td :props="props">
          <InlineField :value="props.row.status" field="status" doctype="Issue" :docname="props.row.name"
            type="select" :options="['Open', 'Replied', 'On Hold', 'Resolved', 'Closed']"
            @saved="v => props.row.status = v.value">
            <template #display>
              <span class="ops-badge" :class="statusClass(props.row.status)">{{ props.row.status }}</span>
            </template>
          </InlineField>
        </q-td>
      </template>
      <template #body-cell-priority="props">
        <q-td :props="props">
          <InlineField :value="props.row.priority" field="priority" doctype="Issue" :docname="props.row.name"
            type="select" :options="['Low', 'Medium', 'High', 'Urgent']"
            @saved="v => props.row.priority = v.value">
            <template #display>
              <span class="ops-badge" :class="priorityClass(props.row.priority)">{{ props.row.priority }}</span>
            </template>
          </InlineField>
        </q-td>
      </template>
      <template #body-cell-issue_type="props">
        <q-td :props="props">
          <q-chip v-if="props.row.issue_type" dense size="sm" color="grey-3" text-color="grey-8">
            {{ props.row.issue_type }}
          </q-chip>
        </q-td>
      </template>
    </q-table>

    <DetailModal
      v-model:open="modalOpen"
      :loading="modalLoading"
      doctype="Issue"
      :doc-name="modalTicket?.name"
      :title="modalTicket?.subject"
      :doc="modalDoc"
      :comments="modalComments"
      :comms="modalComms"
      :files="modalFiles"
      :dispatch-jobs="modalDispatchJobs"
      @navigate="(dt, name) => loadModalTicket(name)"
      @dispatch-created="j => modalDispatchJobs.push(j)"
      @dispatch-deleted="name => { modalDispatchJobs = modalDispatchJobs.filter(j => j.name !== name) }"
      @deleted="onTicketDeleted"
    >
      <template #title-prefix>
        <q-icon v-if="modalTicket?.is_important" name="star" color="amber-7" size="18px" class="q-mr-xs" />
      </template>
      <template #title-suffix>
        <span> &middot; <span class="text-indigo-6">#{{ modalTicket?.legacy_ticket_id || modalTicket?.name }}</span></span>
        <template v-if="modalTicket?.customer_name"> &middot; {{ modalTicket.customer_name }}</template>
      </template>
      <template #header-actions>
        <q-btn v-if="modalTicket?.customer" flat dense round icon="person" class="q-mr-xs"
          @click="$router.push('/clients/' + modalTicket.customer); modalOpen = false">
          <q-tooltip>Voir le client</q-tooltip>
        </q-btn>
      </template>
    </DetailModal>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listDocs, countDocs } from 'src/api/erp'
import { formatDate } from 'src/composables/useFormatters'
import { ticketStatusClass as statusClass, priorityClass } from 'src/composables/useStatusClasses'
import { useDetailModal } from 'src/composables/useDetailModal'
import { statusOptions, priorityOptions, columns, buildFilters, getSortField } from 'src/config/ticket-config'
import DetailModal from 'src/components/shared/DetailModal.vue'
import InlineField from 'src/components/shared/InlineField.vue'
import FlowQuickButton from 'src/components/flow-editor/FlowQuickButton.vue'

const search = ref('')
const statusFilter = ref('all')
const typeFilter = ref(null)
const priorityFilter = ref(null)
const ownerFilter = ref('all')
const tickets = ref([])
const loading = ref(false)
const total = ref(0)
const pagination = ref({ page: 1, rowsPerPage: 25, rowsNumber: 0, sortBy: 'creation', descending: true })

const { modalOpen, modalLoading, modalDoc, modalComments, modalComms, modalFiles, modalDispatchJobs, openModal } = useDetailModal()
const modalTicket = ref(null)

const issueTypes = ref([])

function resetAndLoad () {
  pagination.value.page = 1
  loadTickets()
}

async function loadTickets () {
  loading.value = true
  const filters = buildFilters({
    statusFilter: statusFilter.value,
    typeFilter: typeFilter.value,
    priorityFilter: priorityFilter.value,
    search: search.value,
    ownerFilter: ownerFilter.value,
  })
  const limit = Math.min(pagination.value.rowsPerPage, 100)
  try {
    const [data, count] = await Promise.all([
      listDocs('Issue', {
        filters,
        fields: ['name', 'subject', 'customer_name', 'customer', 'opening_date', 'priority', 'status', 'issue_type', 'owner', 'creation', 'legacy_ticket_id', 'is_important'],
        limit,
        offset: (pagination.value.page - 1) * limit,
        orderBy: 'is_important desc, ' + getSortField(pagination.value.sortBy) + (pagination.value.descending ? ' desc' : ' asc'),
      }),
      countDocs('Issue', filters),
    ])
    tickets.value = data
    total.value = count
    pagination.value.rowsNumber = count
  } catch {
    tickets.value = []
    total.value = 0
    pagination.value.rowsNumber = 0
  }
  loading.value = false
}

function onRequest (props) {
  pagination.value.page = props.pagination.page
  pagination.value.rowsPerPage = Math.min(props.pagination.rowsPerPage, 100)
  pagination.value.sortBy = props.pagination.sortBy
  pagination.value.descending = props.pagination.descending
  loadTickets()
}

async function openTicketModal (row) {
  modalTicket.value = row
  await openModal('Issue', row.name, row.subject)
  if (modalDoc.value) modalTicket.value = { ...modalTicket.value, ...modalDoc.value }
}

async function loadModalTicket (ticketName) {
  await openModal('Issue', ticketName)
  if (modalDoc.value) modalTicket.value = { ...modalTicket.value, ...modalDoc.value }
}

function onTicketDeleted (name) {
  modalOpen.value = false
  tickets.value = tickets.value.filter(t => t.name !== name)
  total.value = Math.max(0, total.value - 1)
  pagination.value.rowsNumber = total.value
}

async function loadIssueTypes () {
  try {
    const types = await listDocs('Issue Type', { fields: ['name'], limit: 100, orderBy: 'name asc' })
    issueTypes.value = types.map(t => ({ label: t.name, value: t.name }))
  } catch {
    issueTypes.value = []
  }
}

onMounted(async () => {
  await loadIssueTypes()
  await loadTickets()
})
</script>

<style scoped>
.filter-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.025em; }
</style>