refactor(admin): unify AdminTaxis into AdminDrivers - multi-shifts, vehicle_type, is_accessible; remove redundant AdminTaxis.vue + DB migration
This commit is contained in:
@ -142,12 +142,6 @@ const router = createRouter({
|
|||||||
component: () => import('@/views/StrategicAnalytics.vue'),
|
component: () => import('@/views/StrategicAnalytics.vue'),
|
||||||
meta: { requiresAuth: true, role: 'ADMIN' }
|
meta: { requiresAuth: true, role: 'ADMIN' }
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/admin/taxis',
|
|
||||||
name: 'admin-taxis',
|
|
||||||
component: () => import('@/views/AdminTaxis.vue'),
|
|
||||||
meta: { requiresAuth: true, role: 'ADMIN' }
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/admin/shuttles',
|
path: '/admin/shuttles',
|
||||||
name: 'admin-shuttles',
|
name: 'admin-shuttles',
|
||||||
|
|||||||
@ -75,11 +75,19 @@
|
|||||||
<p class="phone">📞 {{ taxi.phone_number }}</p>
|
<p class="phone">📞 {{ taxi.phone_number }}</p>
|
||||||
<div class="badges">
|
<div class="badges">
|
||||||
<span class="badge plate">{{ taxi.license_plate }}</span>
|
<span class="badge plate">{{ taxi.license_plate }}</span>
|
||||||
<span class="badge">{{ taxi.corregimiento }}</span>
|
<span class="badge" v-if="taxi.corregimiento">{{ taxi.corregimiento }}</span>
|
||||||
<span class="badge">{{ getShiftLabel(taxi.shift) }}</span>
|
<span class="badge" v-if="taxi.vehicle_type">{{ taxi.vehicle_type }}</span>
|
||||||
<span v-if="taxi.english_speaking" class="badge english">🌐 Inglés</span>
|
<span v-if="taxi.english_speaking" class="badge english">🌐 Inglés</span>
|
||||||
|
<span v-if="taxi.is_accessible" class="badge accessible">♿ Accesible</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="taxi-meta">
|
<div class="taxi-meta">
|
||||||
|
<span class="shifts-badges">
|
||||||
|
<span
|
||||||
|
v-for="s in (taxi.shifts?.length ? taxi.shifts : (taxi.shift ? [taxi.shift] : []))"
|
||||||
|
:key="s"
|
||||||
|
class="shift-pill"
|
||||||
|
>{{ getShiftLabel(s) }}</span>
|
||||||
|
</span>
|
||||||
<span class="rating">⭐ {{ taxi.rating || 5.0 }}</span>
|
<span class="rating">⭐ {{ taxi.rating || 5.0 }}</span>
|
||||||
<span v-if="taxi.cooperative" class="cooperative">{{ taxi.cooperative }}</span>
|
<span v-if="taxi.cooperative" class="cooperative">{{ taxi.cooperative }}</span>
|
||||||
<span :class="taxi.is_active ? 'status-active' : 'status-inactive'">
|
<span :class="taxi.is_active ? 'status-active' : 'status-inactive'">
|
||||||
@ -265,6 +273,11 @@
|
|||||||
<input v-model="taxiForm.license_plate" type="text" placeholder="CHI-1234" required>
|
<input v-model="taxiForm.license_plate" type="text" placeholder="CHI-1234" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Tipo de Vehículo</label>
|
||||||
|
<input v-model="taxiForm.vehicle_type" type="text" placeholder="Toyota Corolla / SUV / Van">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Zona de Servicio *</label>
|
<label>Zona de Servicio *</label>
|
||||||
<select v-model="taxiForm.corregimiento" required>
|
<select v-model="taxiForm.corregimiento" required>
|
||||||
@ -276,16 +289,6 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Horario *</label>
|
|
||||||
<select v-model="taxiForm.shift" required>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="dia">Día</option>
|
|
||||||
<option value="tarde">Tarde</option>
|
|
||||||
<option value="noche">Noche</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Cooperativa</label>
|
<label>Cooperativa</label>
|
||||||
<input v-model="taxiForm.cooperative" type="text" placeholder="Cooperativa Boquete">
|
<input v-model="taxiForm.cooperative" type="text" placeholder="Cooperativa Boquete">
|
||||||
@ -296,21 +299,34 @@
|
|||||||
<input v-model.number="taxiForm.rating" type="number" min="1" max="5" step="0.1" placeholder="5.0">
|
<input v-model.number="taxiForm.rating" type="number" min="1" max="5" step="0.1" placeholder="5.0">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
<!-- Horarios (múltiples) -->
|
||||||
<label>
|
<div class="form-group full-col">
|
||||||
<input v-model="taxiForm.english_speaking" type="checkbox">
|
<label>Horarios de Servicio</label>
|
||||||
<span>Habla Inglés</span>
|
<div class="checkbox-group horizontal">
|
||||||
|
<label v-for="s in ['dia', 'tarde', 'noche', 'aeropuerto']" :key="s" class="checkbox-item">
|
||||||
|
<input type="checkbox" v-model="taxiForm.shifts" :value="s">
|
||||||
|
<span>{{ getShiftLabel(s) }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
<!-- Flags -->
|
||||||
<label>
|
<div class="form-group full-col flags-row">
|
||||||
|
<label class="checkbox-item">
|
||||||
|
<input v-model="taxiForm.english_speaking" type="checkbox">
|
||||||
|
<span>🌐 Habla Inglés</span>
|
||||||
|
</label>
|
||||||
|
<label class="checkbox-item">
|
||||||
|
<input v-model="taxiForm.is_accessible" type="checkbox">
|
||||||
|
<span>♿ Accesible para discapacitados</span>
|
||||||
|
</label>
|
||||||
|
<label class="checkbox-item">
|
||||||
<input v-model="taxiForm.is_active" type="checkbox">
|
<input v-model="taxiForm.is_active" type="checkbox">
|
||||||
<span>Activo en el directorio</span>
|
<span>Activo en el directorio</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group full-width">
|
<div class="form-group full-col">
|
||||||
<label>Foto del Conductor</label>
|
<label>Foto del Conductor</label>
|
||||||
<input type="file" @change="handleTaxiFileChange" accept="image/*">
|
<input type="file" @change="handleTaxiFileChange" accept="image/*">
|
||||||
<small>Opcional - Foto para el directorio público</small>
|
<small>Opcional - Foto para el directorio público</small>
|
||||||
@ -378,11 +394,13 @@ const taxiForm = reactive({
|
|||||||
owner_name: '',
|
owner_name: '',
|
||||||
phone_number: '',
|
phone_number: '',
|
||||||
license_plate: '',
|
license_plate: '',
|
||||||
|
vehicle_type: '',
|
||||||
corregimiento: '',
|
corregimiento: '',
|
||||||
shift: '',
|
shifts: [] as string[],
|
||||||
cooperative: '',
|
cooperative: '',
|
||||||
rating: 5.0,
|
rating: 5.0,
|
||||||
english_speaking: false,
|
english_speaking: false,
|
||||||
|
is_accessible: false,
|
||||||
is_active: true
|
is_active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -487,15 +505,21 @@ const handleRegisterDriver = async () => {
|
|||||||
function editTaxi(taxi: any) {
|
function editTaxi(taxi: any) {
|
||||||
editingTaxi.value = taxi
|
editingTaxi.value = taxi
|
||||||
modalMode.value = 'taxi'
|
modalMode.value = 'taxi'
|
||||||
|
// shifts: preferimos el array `shifts`, pero si solo tiene el legacy `shift` lo convertimos
|
||||||
|
const shiftsArr: string[] = Array.isArray(taxi.shifts) && taxi.shifts.length
|
||||||
|
? taxi.shifts
|
||||||
|
: (taxi.shift ? [taxi.shift] : [])
|
||||||
Object.assign(taxiForm, {
|
Object.assign(taxiForm, {
|
||||||
owner_name: taxi.owner_name,
|
owner_name: taxi.owner_name,
|
||||||
phone_number: taxi.phone_number,
|
phone_number: taxi.phone_number,
|
||||||
license_plate: taxi.license_plate,
|
license_plate: taxi.license_plate,
|
||||||
|
vehicle_type: taxi.vehicle_type || '',
|
||||||
corregimiento: taxi.corregimiento,
|
corregimiento: taxi.corregimiento,
|
||||||
shift: taxi.shift,
|
shifts: shiftsArr,
|
||||||
cooperative: taxi.cooperative || '',
|
cooperative: taxi.cooperative || '',
|
||||||
rating: taxi.rating || 5.0,
|
rating: taxi.rating || 5.0,
|
||||||
english_speaking: taxi.english_speaking || false,
|
english_speaking: taxi.english_speaking || false,
|
||||||
|
is_accessible: taxi.is_accessible || false,
|
||||||
is_active: taxi.is_active
|
is_active: taxi.is_active
|
||||||
})
|
})
|
||||||
photoFile.value = null
|
photoFile.value = null
|
||||||
@ -524,7 +548,12 @@ async function saveTaxi() {
|
|||||||
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
|
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
|
||||||
image_url = urlData.publicUrl
|
image_url = urlData.publicUrl
|
||||||
}
|
}
|
||||||
const payload = { ...taxiForm, image_url }
|
// Guardamos shifts (array) y tambien shift (primer valor) para compatibilidad legacy
|
||||||
|
const payload = {
|
||||||
|
...taxiForm,
|
||||||
|
shift: taxiForm.shifts[0] || null, // backward compat
|
||||||
|
image_url
|
||||||
|
}
|
||||||
if (editingTaxi.value) {
|
if (editingTaxi.value) {
|
||||||
const { error: e } = await supabase.from('taxis').update(payload).eq('id', editingTaxi.value.id)
|
const { error: e } = await supabase.from('taxis').update(payload).eq('id', editingTaxi.value.id)
|
||||||
if (e) throw e
|
if (e) throw e
|
||||||
@ -534,8 +563,9 @@ async function saveTaxi() {
|
|||||||
}
|
}
|
||||||
closeModal()
|
closeModal()
|
||||||
Object.assign(taxiForm, {
|
Object.assign(taxiForm, {
|
||||||
owner_name: '', phone_number: '', license_plate: '', corregimiento: '',
|
owner_name: '', phone_number: '', license_plate: '', vehicle_type: '', corregimiento: '',
|
||||||
shift: '', cooperative: '', rating: 5.0, english_speaking: false, is_active: true
|
shifts: [], cooperative: '', rating: 5.0, english_speaking: false,
|
||||||
|
is_accessible: false, is_active: true
|
||||||
})
|
})
|
||||||
await loadData()
|
await loadData()
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
@ -559,9 +589,7 @@ async function deleteTaxi(taxi: any) {
|
|||||||
|
|
||||||
function getShiftLabel(shift: string) {
|
function getShiftLabel(shift: string) {
|
||||||
const labels: Record<string, string> = {
|
const labels: Record<string, string> = {
|
||||||
'dia': 'Día',
|
'dia': 'Día', 'tarde': 'Tarde', 'noche': 'Noche', 'aeropuerto': 'Aeropuerto'
|
||||||
'tarde': 'Tarde',
|
|
||||||
'noche': 'Noche'
|
|
||||||
}
|
}
|
||||||
return labels[shift] || shift
|
return labels[shift] || shift
|
||||||
}
|
}
|
||||||
@ -803,6 +831,29 @@ h1 {
|
|||||||
border-color: #4a90e2;
|
border-color: #4a90e2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.badge.accessible {
|
||||||
|
background: #0ea5e9;
|
||||||
|
color: white;
|
||||||
|
border-color: #0ea5e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shift pills in taxi card */
|
||||||
|
.shifts-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shift-pill {
|
||||||
|
background: #fee715;
|
||||||
|
color: #101820;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.taxi-meta {
|
.taxi-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@ -972,6 +1023,27 @@ h1 {
|
|||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-group.full-col {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group.horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flags-row {
|
||||||
|
flex-direction: row !important;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.form-group.checkbox-group {
|
.form-group.checkbox-group {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -1,775 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="admin-taxis">
|
|
||||||
<div class="header">
|
|
||||||
<button class="back-link" @click="router.push('/admin')">← Volver al Panel</button>
|
|
||||||
<h1>Directorio de Taxis</h1>
|
|
||||||
<button class="btn-primary" @click="openModal()">
|
|
||||||
<span class="material-icons">add</span>
|
|
||||||
Nuevo Taxi
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="isLoading" class="loading">Cargando directorio...</div>
|
|
||||||
|
|
||||||
<div v-else class="taxis-list">
|
|
||||||
<div v-if="taxis.length > 0" class="taxis-grid">
|
|
||||||
<div v-for="taxi in taxis" :key="taxi.id" class="taxi-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<div class="taxi-info">
|
|
||||||
<div class="avatar">
|
|
||||||
<img v-if="taxi.image_url" :src="getImageUrl(taxi.image_url)" alt="Taxi">
|
|
||||||
<span v-else class="material-icons">local_taxi</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>{{ taxi.owner_name }}</h3>
|
|
||||||
<p class="plate">{{ taxi.license_plate }}</p>
|
|
||||||
<p class="phone">{{ taxi.phone_number }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-actions">
|
|
||||||
<button class="btn-icon" @click="openModal(taxi)" title="Editar">
|
|
||||||
<span class="material-icons">edit</span>
|
|
||||||
</button>
|
|
||||||
<button class="btn-icon delete" @click="deleteTaxi(taxi)" title="Eliminar">
|
|
||||||
<span class="material-icons">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Zona:</span>
|
|
||||||
<span>{{ taxi.corregimiento }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Horarios:</span>
|
|
||||||
<span>{{ getShiftsLabel(taxi.shifts) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row" v-if="taxi.vehicle_type">
|
|
||||||
<span class="label">Vehículo:</span>
|
|
||||||
<span>{{ taxi.vehicle_type }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Accesible:</span>
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
{{ taxi.is_accessible ? 'Sí' : 'No' }}
|
|
||||||
<span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm">accessible</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row" v-if="taxi.cooperative">
|
|
||||||
<span class="label">Cooperativa:</span>
|
|
||||||
<span>{{ taxi.cooperative }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Rating:</span>
|
|
||||||
<span class="rating">{{ taxi.rating || 5.0 }} ⭐</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Inglés:</span>
|
|
||||||
<span>{{ taxi.english_speaking ? 'Sí' : 'No' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Estado:</span>
|
|
||||||
<span :class="taxi.is_active ? 'status-active' : 'status-inactive'">
|
|
||||||
{{ taxi.is_active ? 'Activo' : 'Inactivo' }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="empty-state">
|
|
||||||
<span class="material-icons">local_taxi</span>
|
|
||||||
<p>No hay taxis registrados en el directorio</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Modal for Create/Edit -->
|
|
||||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h2>{{ editingTaxi ? 'Editar Taxi' : 'Nuevo Taxi' }}</h2>
|
|
||||||
<button @click="closeModal">×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<form @submit.prevent="saveTaxi">
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nombre del Conductor *</label>
|
|
||||||
<input v-model="taxiForm.owner_name" type="text" placeholder="Juan Pérez" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Teléfono *</label>
|
|
||||||
<input v-model="taxiForm.phone_number" type="tel" placeholder="+507 1234-5678" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Placa del Vehículo *</label>
|
|
||||||
<input v-model="taxiForm.license_plate" type="text" placeholder="CHI-1234" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Zona de Servicio *</label>
|
|
||||||
<select v-model="taxiForm.corregimiento" required>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="Boquete">Boquete</option>
|
|
||||||
<option value="David - Boquete">David - Boquete</option>
|
|
||||||
<option value="Boquete - David">Boquete - David</option>
|
|
||||||
<option value="Aeropuerto - Boquete">Aeropuerto - Boquete</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>Tipo de Vehículo</label>
|
|
||||||
<input v-model="taxiForm.vehicle_type" type="text" placeholder="Toyota Corolla / SUV / Van">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>Horarios de Servicio *</label>
|
|
||||||
<div class="checkbox-list">
|
|
||||||
<label class="checkbox-item">
|
|
||||||
<input type="checkbox" value="dia" v-model="taxiForm.shifts">
|
|
||||||
<span>Día</span>
|
|
||||||
</label>
|
|
||||||
<label class="checkbox-item">
|
|
||||||
<input type="checkbox" value="tarde" v-model="taxiForm.shifts">
|
|
||||||
<span>Tarde</span>
|
|
||||||
</label>
|
|
||||||
<label class="checkbox-item">
|
|
||||||
<input type="checkbox" value="noche" v-model="taxiForm.shifts">
|
|
||||||
<span>Noche</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Cooperativa</label>
|
|
||||||
<input v-model="taxiForm.cooperative" type="text" placeholder="Cooperativa Boquete">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Rating (1-5)</label>
|
|
||||||
<input v-model.number="taxiForm.rating" type="number" min="1" max="5" step="0.1" placeholder="5.0">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<label>
|
|
||||||
<input v-model="taxiForm.english_speaking" type="checkbox">
|
|
||||||
<span>Habla Inglés</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<label>
|
|
||||||
<input v-model="taxiForm.is_accessible" type="checkbox">
|
|
||||||
<span class="flex items-center gap-1">Accesible <span class="material-icons text-sm">accessible</span></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group checkbox-group">
|
|
||||||
<label>
|
|
||||||
<input v-model="taxiForm.is_active" type="checkbox">
|
|
||||||
<span>Activo en el directorio</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group full-width">
|
|
||||||
<label>Foto del Conductor</label>
|
|
||||||
<input type="file" @change="handleFileChange" accept="image/*">
|
|
||||||
<small>Opcional - Foto para el directorio público</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="error" class="error-text">{{ error }}</p>
|
|
||||||
|
|
||||||
<div class="form-actions">
|
|
||||||
<button type="button" class="btn-secondary" @click="closeModal">Cancelar</button>
|
|
||||||
<button type="submit" class="btn-primary" :disabled="isSaving">
|
|
||||||
{{ isSaving ? 'Guardando...' : 'Guardar' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, reactive } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { supabase } from '@/supabase'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const isLoading = ref(false)
|
|
||||||
const taxis = ref<any[]>([])
|
|
||||||
const showModal = ref(false)
|
|
||||||
const editingTaxi = ref<any>(null)
|
|
||||||
const isSaving = ref(false)
|
|
||||||
const error = ref('')
|
|
||||||
const photoFile = ref<File | null>(null)
|
|
||||||
|
|
||||||
const taxiForm = reactive({
|
|
||||||
owner_name: '',
|
|
||||||
phone_number: '',
|
|
||||||
license_plate: '',
|
|
||||||
corregimiento: '',
|
|
||||||
vehicle_type: '',
|
|
||||||
shifts: [] as string[],
|
|
||||||
cooperative: '',
|
|
||||||
rating: 5.0,
|
|
||||||
english_speaking: false,
|
|
||||||
is_accessible: false,
|
|
||||||
is_active: true
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadTaxis()
|
|
||||||
})
|
|
||||||
|
|
||||||
async function loadTaxis() {
|
|
||||||
isLoading.value = true
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase.from('taxis').select('*').order('owner_name')
|
|
||||||
if (error) throw error
|
|
||||||
taxis.value = data || []
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error cargando taxis:', e)
|
|
||||||
error.value = 'Failed to load taxis'
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function openModal(taxi?: any) {
|
|
||||||
if (taxi) {
|
|
||||||
editingTaxi.value = taxi
|
|
||||||
Object.assign(taxiForm, {
|
|
||||||
owner_name: taxi.owner_name,
|
|
||||||
phone_number: taxi.phone_number,
|
|
||||||
license_plate: taxi.license_plate,
|
|
||||||
corregimiento: taxi.corregimiento,
|
|
||||||
vehicle_type: taxi.vehicle_type || '',
|
|
||||||
shifts: taxi.shifts || [],
|
|
||||||
cooperative: taxi.cooperative || '',
|
|
||||||
rating: taxi.rating || 5.0,
|
|
||||||
english_speaking: taxi.english_speaking || false,
|
|
||||||
is_accessible: taxi.is_accessible || false,
|
|
||||||
is_active: taxi.is_active
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
editingTaxi.value = null
|
|
||||||
Object.assign(taxiForm, {
|
|
||||||
owner_name: '',
|
|
||||||
phone_number: '',
|
|
||||||
license_plate: '',
|
|
||||||
corregimiento: '',
|
|
||||||
vehicle_type: '',
|
|
||||||
shifts: [],
|
|
||||||
cooperative: '',
|
|
||||||
rating: 5.0,
|
|
||||||
english_speaking: false,
|
|
||||||
is_accessible: false,
|
|
||||||
is_active: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
photoFile.value = null
|
|
||||||
error.value = ''
|
|
||||||
showModal.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
showModal.value = false
|
|
||||||
editingTaxi.value = null
|
|
||||||
photoFile.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFileChange(event: Event) {
|
|
||||||
const target = event.target as HTMLInputElement
|
|
||||||
if (target.files && target.files[0]) {
|
|
||||||
photoFile.value = target.files[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveTaxi() {
|
|
||||||
isSaving.value = true
|
|
||||||
error.value = ''
|
|
||||||
|
|
||||||
try {
|
|
||||||
let image_url = editingTaxi.value?.image_url || null
|
|
||||||
|
|
||||||
// Upload image to Supabase Storage if provided
|
|
||||||
if (photoFile.value) {
|
|
||||||
const ext = photoFile.value.name.split('.').pop()
|
|
||||||
const filename = `taxis/${Date.now()}.${ext}`
|
|
||||||
const { error: upErr } = await supabase.storage.from('uploads').upload(filename, photoFile.value)
|
|
||||||
if (upErr) throw upErr
|
|
||||||
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
|
|
||||||
image_url = urlData.publicUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
const payload = { ...taxiForm, image_url }
|
|
||||||
|
|
||||||
if (editingTaxi.value) {
|
|
||||||
const { error: e } = await supabase.from('taxis').update(payload).eq('id', editingTaxi.value.id)
|
|
||||||
if (e) throw e
|
|
||||||
} else {
|
|
||||||
const { error: e } = await supabase.from('taxis').insert([payload])
|
|
||||||
if (e) throw e
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal()
|
|
||||||
await loadTaxis()
|
|
||||||
} catch (e: any) {
|
|
||||||
error.value = e.message || 'Error al guardar el taxi'
|
|
||||||
console.error('Error saving taxi:', e)
|
|
||||||
} finally {
|
|
||||||
isSaving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteTaxi(taxi: any) {
|
|
||||||
if (!confirm(`¿Eliminar a ${taxi.owner_name} del directorio?`)) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error: e } = await supabase.from('taxis').delete().eq('id', taxi.id)
|
|
||||||
if (e) throw e
|
|
||||||
await loadTaxis()
|
|
||||||
} catch (e) {
|
|
||||||
alert('Error al eliminar el taxi')
|
|
||||||
console.error('Error deleting taxi:', e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getShiftsLabel(shifts: string[]) {
|
|
||||||
if (!shifts || shifts.length === 0) return 'No definido'
|
|
||||||
const labels: Record<string, string> = {
|
|
||||||
'dia': 'Día',
|
|
||||||
'tarde': 'Tarde',
|
|
||||||
'noche': 'Noche'
|
|
||||||
}
|
|
||||||
return shifts.map(s => labels[s] || s).join(', ')
|
|
||||||
}
|
|
||||||
|
|
||||||
function getImageUrl(path: string) {
|
|
||||||
if (!path) return ''
|
|
||||||
if (path.startsWith('http')) return path
|
|
||||||
return path
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.admin-taxis {
|
|
||||||
padding: 24px;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
color: var(--text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
color: var(--accent-color);
|
|
||||||
transform: translateX(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: var(--accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading, .empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-state .material-icons {
|
|
||||||
font-size: 64px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxis-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxi-card {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
box-shadow: 0 2px 8px var(--shadow);
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxi-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px var(--shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxi-info {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar .material-icons {
|
|
||||||
font-size: 32px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxi-info h3 {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.plate {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin: 4px 0;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.phone {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin: 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon.delete:hover {
|
|
||||||
background: #fee;
|
|
||||||
border-color: #f44;
|
|
||||||
color: #f44;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row .label {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rating {
|
|
||||||
color: #fee715;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-active {
|
|
||||||
color: var(--accent-color);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-inactive {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modal Styles */
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border-radius: 16px;
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 24px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header button {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
font-size: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header button:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.checkbox-group {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.checkbox-group label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="text"],
|
|
||||||
.form-group input[type="tel"],
|
|
||||||
.form-group input[type="number"],
|
|
||||||
.form-group select {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input:focus,
|
|
||||||
.form-group select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input[type="file"] {
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px dashed var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group small {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-list {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-text {
|
|
||||||
color: #f44;
|
|
||||||
margin: 16px 0;
|
|
||||||
padding: 12px;
|
|
||||||
background: #fee;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: var(--hover-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.form-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxis-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user