junior/lic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajustes

Browse Source
This commit is contained in:
Junior
2026-04-21 18:05:15 -03:00
parent 8c3c56de09
commit d29137be9d
41 changed files with 3945 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
front-end/app/pages/pipeline/index.vue
View File

@@ -1,14 +1,43 @@
<!-- front-end/app/pages/pipeline/index.vue -->
<script setup lang="ts">
import { editais } from '~/data/mock/editais'
import { PIPELINE_ETAPAS } from '~/types'
const { apiFetch } = useApi()
interface ApiEdital {
ID: string; Numero: string; Orgao: string; Modalidade: string
Objeto: string; Plataforma: string; ValorEstimado: number
DataPublicacao: string; DataAbertura: string; Status: string
}
const { data: rawEditais } = await useAsyncData('pipeline-editais', () =>
apiFetch<ApiEdital[]>('/editais')
)
// Cópia local reativa — permite optimistic updates que o computed detecta
const items = ref<ApiEdital[]>([])
watchEffect(() => { items.value = [...(rawEditais.value ?? [])] })
const etapaParaStatus: Record<number, string> = {
1: 'em_analise',
2: 'elaborando_proposta',
3: 'edital_publicado',
4: 'fase_lances',
5: 'habilitacao',
6: 'recurso',
7: 'adjudicado',
8: 'contrato',
}
const statusParaEtapa: Record<string, number> = {
em_analise: 1,
elaborando_proposta: 3,
impugnacao: 2,
participando: 4,
elaborando_proposta: 2,
edital_publicado: 3,
fase_lances: 4,
habilitacao: 5,
recurso: 6,
adjudicado: 7,
contrato: 8,
vencida: 8,
perdida: 8,
deserta: 8,
@@ -18,7 +47,7 @@ const colunas = computed(() =>
PIPELINE_ETAPAS.map((etapa, idx) => ({
etapa,
numero: idx + 1,
cards: editais.filter(e => statusParaEtapa[e.status] === idx + 1),
cards: items.value.filter(e => statusParaEtapa[e.Status] === idx + 1),
}))
)
@@ -29,6 +58,79 @@ const modalidadeAbrev: Record<string, string> = {
dispensa: 'DI',
inexigibilidade: 'IN',
}
/* ── Drag & Drop ── */
const draggedId = ref<string | null>(null)
const dragOverCol = ref<number | null>(null)
const movingCardId = ref<string | null>(null)
function onDragStart(e: DragEvent, card: ApiEdital) {
draggedId.value = card.ID
if (e.dataTransfer) {
e.dataTransfer.effectAllowed = 'move'
e.dataTransfer.setData('text/plain', card.ID)
}
const el = e.target as HTMLElement
requestAnimationFrame(() => el.classList.add('dragging'))
}
function onDragEnd(e: DragEvent) {
draggedId.value = null
dragOverCol.value = null
const el = e.target as HTMLElement
el.classList.remove('dragging')
}
function onDragOver(e: DragEvent, colNum: number) {
e.preventDefault()
if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
dragOverCol.value = colNum
}
function onDragLeave(_e: DragEvent, colNum: number) {
if (dragOverCol.value === colNum) dragOverCol.value = null
}
function draggedStatus() {
const card = items.value.find(e => e.ID === draggedId.value)
return card?.Status ?? ''
}
async function onDrop(e: DragEvent, colNum: number) {
e.preventDefault()
dragOverCol.value = null
const cardId = draggedId.value
draggedId.value = null
if (!cardId) return
const idx = items.value.findIndex(e => e.ID === cardId)
if (idx === -1) return
const card = items.value[idx]
const currentEtapa = statusParaEtapa[card.Status]
if (currentEtapa === colNum) return
const newStatus = etapaParaStatus[colNum]
if (!newStatus) return
// Optimistic update — substitui o objeto no array para triggerar reatividade
const oldStatus = card.Status
items.value[idx] = { ...card, Status: newStatus }
movingCardId.value = cardId
try {
await apiFetch(`/editais/${cardId}`, {
method: 'PUT',
body: { Status: newStatus },
})
} catch {
// Reverte
items.value[idx] = { ...items.value[idx], Status: oldStatus }
} finally {
setTimeout(() => { movingCardId.value = null }, 400)
}
}
</script>
<template>
@@ -36,24 +138,41 @@ const modalidadeAbrev: Record<string, string> = {
<AppTopbar title="Kanban de Processos" breadcrumb="Pipeline" />
<div class="kanban-scroll">
<div class="kanban-board">
<div v-for="col in colunas" :key="col.numero" class="kanban-col">
<div
v-for="col in colunas"
:key="col.numero"
class="kanban-col"
:class="{ 'drop-target': dragOverCol === col.numero && statusParaEtapa[draggedStatus()] !== col.numero }"
@dragover="onDragOver($event, col.numero)"
@dragleave="onDragLeave($event, col.numero)"
@drop="onDrop($event, col.numero)"
>
<div class="col-header">
<span class="col-num">{{ col.numero }}</span>
<span class="col-title">{{ col.etapa }}</span>
<UBadge :label="String(col.cards.length)" variant="soft" color="neutral" size="xs" />
</div>
<div class="col-cards">
<div v-for="card in col.cards" :key="card.id" class="kanban-card">
<div
v-for="card in col.cards"
:key="card.ID"
class="kanban-card"
:class="{ 'card-just-moved': movingCardId === card.ID }"
draggable="true"
@dragstart="onDragStart($event, card)"
@dragend="onDragEnd"
@click="navigateTo(`/oportunidades/${card.ID}`)"
>
<div class="card-top">
<span class="card-num">{{ card.numero }}</span>
<StatusChip :status="card.status" />
<span class="card-num">{{ card.Numero }}</span>
<StatusChip :status="(card.Status as any)" />
</div>
<p class="card-objeto">{{ card.objeto }}</p>
<p class="card-orgao">{{ card.orgao }}</p>
<p class="card-objeto">{{ card.Objeto }}</p>
<p class="card-orgao">{{ card.Orgao }}</p>
<div class="card-bottom">
<span class="card-modal">{{ modalidadeAbrev[card.modalidade] }}</span>
<span class="card-modal">{{ modalidadeAbrev[card.Modalidade] ?? card.Modalidade }}</span>
<span class="card-valor">
{{ new Intl.NumberFormat('pt-BR', { notation: 'compact', currency: 'BRL', style: 'currency' }).format(card.valorEstimado) }}
{{ new Intl.NumberFormat('pt-BR', { notation: 'compact', currency: 'BRL', style: 'currency' }).format(card.ValorEstimado) }}
</span>
</div>
</div>
@@ -69,12 +188,47 @@ const modalidadeAbrev: Record<string, string> = {
.page { display: flex; flex-direction: column; height: 100vh; }
.kanban-scroll { flex: 1; overflow-x: auto; padding: 20px 22px; }
.kanban-board { display: flex; gap: 12px; min-width: max-content; align-items: flex-start; }
.kanban-col { width: 220px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; flex-shrink: 0; }
.kanban-col {
width: 220px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
flex-shrink: 0;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.kanban-col.drop-target {
border-color: #667eea;
background: #eef2ff;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}
.col-header { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.col-num { width: 20px; height: 20px; background: #667eea; color: white; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.col-title { font-size: 11.5px; font-weight: 600; color: #374151; flex: 1; }
.col-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.kanban-card { background: white; border-radius: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.kanban-card {
background: white;
border-radius: 8px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
cursor: grab;
transition: border-color .15s, box-shadow .15s, opacity .15s, transform .2s;
user-select: none;
}
.kanban-card:hover { border-color: #667eea; box-shadow: 0 2px 8px rgba(102,126,234,.15); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging {
opacity: 0.4;
transform: scale(0.95);
}
.kanban-card.card-just-moved {
animation: card-pop 0.4s ease;
}
@keyframes card-pop {
0% { transform: scale(0.9); opacity: 0.5; }
50% { transform: scale(1.03); }
100% { transform: scale(1); opacity: 1; }
}
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.card-num { font-size: 11px; font-weight: 700; color: #0f172a; }
.card-objeto { font-size: 12px; color: #374151; font-weight: 500; margin-bottom: 3px; line-height: 1.3; }