juan.zapata/golscontrol-frontend-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add supplier management module with CRUD operations and UI components

Browse Source
This commit is contained in:
Edgar Méndez Mendoza 2026-02-04 15:15:45 -06:00
parent 9661275bc5
commit 4a624f490c
7 changed files with 541 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -21,6 +21,7 @@ declare module 'vue' {
Checkbox: typeof import('primevue/checkbox')['default']
Chip: typeof import('primevue/chip')['default']
Column: typeof import('primevue/column')['default']
ConfirmDialog: typeof import('primevue/confirmdialog')['default']
DataTable: typeof import('primevue/datatable')['default']
Dialog: typeof import('primevue/dialog')['default']
Dropdown: typeof import('primevue/dropdown')['default']

3
src/components/layout/Sidebar.vue
View File

@ -23,7 +23,8 @@ const menuItems = ref<MenuItem[]>([
icon: 'pi pi-book',
items: [
{ label: 'Unidades de Medida', icon: 'pi pi-calculator', to: '/catalog/units-of-measure' },
{ label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' }
{ label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' },
{ label: 'Proveedores', icon: 'pi pi-briefcase', to: '/catalog/suppliers' },
]
},
{

104
src/modules/catalog/components/suppliers/SupplierModal.vue Normal file
View File

@ -0,0 +1,104 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import Dropdown from 'primevue/dropdown';
import Textarea from 'primevue/textarea';
import Button from 'primevue/button';
import type { Supplier, SupplierFormErrors } from '../../types/suppliers';
const props = defineProps<{
visible: boolean;
isEditMode: boolean;
supplier?: Supplier | null;
formErrors: SupplierFormErrors;
}>();
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', value: any): void;
(e: 'cancel'): void;
}>();
const form = ref({
name: '',
email: '',
phone: '',
type: '',
address: ''
});
watch(
() => props.supplier,
(supplier) => {
if (props.isEditMode && supplier) {
form.value = {
name: supplier.name,
email: supplier.contact_email,
phone: supplier.phone_number,
type: supplier.type,
address: supplier.address
};
} else {
form.value = { name: '', email: '', phone: '', type: '', address: '' };
}
},
{ immediate: true }
);
const supplierTypeOptions = [
{ label: 'General', value: 'general' },
{ label: 'Compra', value: 'purchases' },
{ label: 'Venta', value: 'sales' }
];
const handleSubmit = () => {
emit('submit', { ...form.value });
};
const handleCancel = () => {
emit('cancel');
};
</script>
<template>
<Dialog :visible="visible" modal :style="{ width: '600px' }" :header="isEditMode ? 'Editar Proveedor' : 'Crear Nuevo Proveedor'" :closable="true" @update:visible="val => emit('update:visible', val)">
<form class="flex flex-col gap-8" @submit.prevent="handleSubmit">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col gap-2">
<p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">
Nombre del Proveedor <span class="text-red-500">*</span></p>
<InputText v-model="form.name" placeholder="Ej: Suministros Industriales S.A." required class="w-full" />
<div v-if="formErrors.name" class="text-red-500 text-xs mt-1" v-for="err in formErrors.name" :key="err">{{ err }}</div>
</label>
<label class="flex flex-col gap-2">
<p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">
Correo de Contacto <span class="text-red-500">*</span></p>
<InputText v-model="form.email" placeholder="contacto@proveedor.com" required class="w-full" type="email" />
<div v-if="formErrors.contact_email" class="text-red-500 text-xs mt-1" v-for="err in formErrors.contact_email" :key="err">{{ err }}</div>
</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<label class="flex flex-col gap-2">
<p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Teléfono</p>
<InputText v-model="form.phone" placeholder="+52 ..." class="w-full" type="tel" />
<div v-if="formErrors.phone_number" class="text-red-500 text-xs mt-1" v-for="err in formErrors.phone_number" :key="err">{{ err }}</div>
</label>
<label class="flex flex-col gap-2">
<p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Tipo de Proveedor <span class="text-red-500">*</span></p>
<Dropdown v-model="form.type" :options="supplierTypeOptions" optionLabel="label" optionValue="value" placeholder="Seleccionar tipo" class="w-full" required />
<div v-if="formErrors.type" class="text-red-500 text-xs mt-1" v-for="err in formErrors.type" :key="err">{{ err }}</div>
</label>
</div>
<label class="flex flex-col gap-2">
<p class="text-[#111418] dark:text-white text-sm font-semibold leading-normal">Dirección</p>
<Textarea v-model="form.address" placeholder="Calle, Número, Colonia, Ciudad, Estado, CP" class="w-full" autoResize />
<div v-if="formErrors.address" class="text-red-500 text-xs mt-1" v-for="err in formErrors.address" :key="err">{{ err }}</div>
</label>
<div class="mt-4 pt-8 border-t border-[#dbe0e6] dark:border-[#2d3a4a] flex flex-col sm:flex-row items-center justify-end gap-4">
<Button label="Cancelar" text class="w-full sm:w-auto" @click="handleCancel" type="button" />
<Button :label="isEditMode ? 'Actualizar Proveedor' : 'Guardar Proveedor'" type="submit" class="w-full sm:w-auto" />
</div>
</form>
</Dialog>
</template>

278
src/modules/catalog/components/suppliers/Suppliers.vue Normal file
View File

@ -0,0 +1,278 @@
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import Card from 'primevue/card';
import Button from 'primevue/button';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import InputText from 'primevue/inputtext';
import Dropdown from 'primevue/dropdown';
import Tag from 'primevue/tag';
import Paginator from 'primevue/paginator';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { supplierServices } from '../../services/supplierServices';
import type { Supplier, SupplierPaginatedResponse, SupplierFormErrors } from '../../types/suppliers';
import SupplierModal from './SupplierModal.vue';
const suppliers = ref<Supplier[]>([]);
const pagination = ref({
first: 0,
rows: 5,
total: 0,
page: 1,
lastPage: 1,
});
const loading = ref(false);
// Modal state and form fields
const showModal = ref(false);
const isEditMode = ref(false);
const currentSupplier = ref<Supplier | null>(null);
const formErrors = ref<SupplierFormErrors>({});
const confirm = useConfirm();
const toast = useToast();
const handleDelete = (supplierId: number) => {
confirm.require({
message: '¿Seguro que deseas eliminar este proveedor?',
header: 'Confirmar eliminación',
icon: 'pi pi-exclamation-triangle',
acceptLabel: 'Sí, eliminar',
rejectLabel: 'Cancelar',
accept: async () => {
try {
await supplierServices.deleteSupplier(supplierId);
toast.add({ severity: 'success', summary: 'Eliminado', detail: 'Proveedor eliminado correctamente', life: 3000 });
fetchSuppliers(pagination.value.page);
} catch (e) {
toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar el proveedor', life: 3000 });
}
}
});
};
const mapTypeToApi = (type: string) => {
switch (type) {
case 'General': return 'general';
case 'Compra': return 'purchases';
case 'Venta': return 'sales';
default: return undefined;
}
};
const fetchSuppliers = async (page = 1) => {
loading.value = true;
try {
const name = searchName.value ? searchName.value : undefined;
const type = selectedType.value ? mapTypeToApi(selectedType.value) : undefined;
console.log('🔎 fetchSuppliers params:', { paginated: true, name, type, page });
const response = await supplierServices.getSuppliers(true, name, type);
const paginated = response as SupplierPaginatedResponse;
suppliers.value = paginated.data.map(s => ({
...s,
email: s.contact_email,
phone: s.phone_number,
typeColor: s.type === 'general' ? 'info' : s.type === 'purchases' ? 'success' : 'warning',
date: s.created_at ? new Date(s.created_at).toLocaleDateString() : ''
}));
pagination.value.total = paginated.total;
pagination.value.page = paginated.current_page;
pagination.value.lastPage = paginated.last_page;
pagination.value.first = (paginated.current_page - 1) * paginated.per_page;
pagination.value.rows = paginated.per_page;
} catch (e) {
// Manejo de error opcional
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchSuppliers();
});
const supplierTypes = [
{ label: 'Todos', value: null },
{ label: 'General', value: 'General' },
{ label: 'Compras', value: 'Compra' },
{ label: 'Ventas', value: 'Venta' },
];
const selectedType = ref(null);
const searchName = ref('');
const clearFilters = () => {
searchName.value = '';
selectedType.value = null;
fetchSuppliers(1);
};
const onFilter = () => {
fetchSuppliers(1);
};
const onPageChange = (event: any) => {
const newPage = Math.floor(event.first / event.rows) + 1;
fetchSuppliers(newPage);
};
const openCreateModal = () => {
isEditMode.value = false;
showModal.value = true;
currentSupplier.value = null;
formErrors.value = {};
};
const openEditModal = (supplier: Supplier) => {
isEditMode.value = true;
showModal.value = true;
currentSupplier.value = supplier;
formErrors.value = {};
};
const closeModal = () => {
showModal.value = false;
isEditMode.value = false;
currentSupplier.value = null;
formErrors.value = {};
};
const handleModalSubmit = async (form: any) => {
formErrors.value = {};
try {
if (isEditMode.value && currentSupplier.value) {
const payload = {
name: form.name,
contact_email: form.email,
phone_number: form.phone,
address: form.address,
type: form.type,
};
await supplierServices.updateSupplier(currentSupplier.value.id, payload, 'patch');
toast.add({ severity: 'success', summary: 'Proveedor actualizado', detail: 'Proveedor actualizado correctamente', life: 3000 });
} else {
const payload = {
name: form.name,
contact_email: form.email,
phone_number: form.phone,
address: form.address,
type: form.type,
};
await supplierServices.createSupplier(payload);
toast.add({ severity: 'success', summary: 'Proveedor creado', detail: 'Proveedor registrado correctamente', life: 3000 });
}
closeModal();
fetchSuppliers(pagination.value.page);
} catch (e: any) {
if (e?.response?.data?.errors) {
formErrors.value = e.response.data.errors;
}
toast.add({ severity: 'error', summary: 'Error', detail: e?.response?.data?.message || 'No se pudo guardar el proveedor', life: 3000 });
}
};
// Mapeo para mostrar el tipo de proveedor con label legible
const typeLabel = (type: string) => {
switch (type) {
case 'general': return 'General';
case 'purchases': return 'Compras';
case 'sales': return 'Ventas';
default: return type;
}
};
</script>
<template>
<div class="space-y-6">
<!-- Heading -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
<div>
<h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">Gestión de Proveedores
</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Administra la base de datos de proveedores y
sus contactos.</p>
</div>
<Button label="Nuevo Proveedor" icon="pi pi-plus" @click="openCreateModal" />
<SupplierModal :visible="showModal" :isEditMode="isEditMode" :supplier="currentSupplier"
:formErrors="formErrors" @update:visible="val => { if (!val) closeModal(); }"
@submit="handleModalSubmit" @cancel="closeModal" />
</div>
<!-- Filters Toolbar -->
<Card>
<template #content>
<div class="flex flex-wrap gap-4 items-end">
<div class="flex-1 min-w-[240px]">
<label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Buscar
Nombre</label>
<InputText v-model="searchName" placeholder="Ej. TechLogistics S.A." class="w-full" />
</div>
<div class="w-48">
<label
class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Tipo</label>
<Dropdown v-model="selectedType" :options="supplierTypes" optionLabel="label"
optionValue="value" placeholder="Todos" class="w-full" @change="onFilter" />
</div>
<Button icon="pi pi-search" text rounded @click="onFilter" />
<Button icon="pi pi-times" text rounded severity="secondary" label="Limpiar" @click="clearFilters" />
</div>
</template>
</Card>
<!-- Table Content -->
<Card>
<template #content>
<DataTable :value="suppliers" :loading="loading" stripedRows responsiveLayout="scroll"
class="p-datatable-sm">
<Column field="id" header="ID" style="min-width: 80px" />
<Column field="name" header="Nombre" style="min-width: 200px">
<template #body="{ data }">
<span class="font-bold text-surface-900 dark:text-white">{{ data.name }}</span>
</template>
</Column>
<Column field="email" header="Correo de Contacto" style="min-width: 200px">
<template #body="{ data }">
<span class="text-primary-600 dark:text-primary-400">{{ data.email }}</span>
</template>
</Column>
<Column field="phone" header="Teléfono" style="min-width: 140px" />
<Column field="address" header="Dirección" style="min-width: 200px" />
<Column field="type" header="Tipo" style="min-width: 100px">
<template #body="{ data }">
<Tag :value="typeLabel(data.type)" :severity="data.typeColor" />
</template>
</Column>
<Column field="date" header="Fecha de Registro" style="min-width: 120px" />
<Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right"
style="min-width: 120px">
<template #body="{ data }">
<div class="flex items-center justify-end gap-2">
<Button icon="pi pi-pencil" text rounded size="small" @click="openEditModal(data)" />
<Button icon="pi pi-trash" text rounded size="small" severity="danger"
@click="handleDelete(data.id)" />
</div>
</template>
</Column>
</DataTable>
<div class="mt-4">
<Paginator :first="pagination.first" :rows="pagination.rows" :totalRecords="pagination.total"
:rowsPerPageOptions="[5, 10, 20, 50]" @page="onPageChange" />
</div>
</template>
</Card>
</div>
<ConfirmDialog />
<Toast />
</template>

76
src/modules/catalog/services/supplierServices.ts Normal file
View File

@ -0,0 +1,76 @@
import api from "../../../services/api";
import type { SupplierCreateRequest, SupplierCreateResponse, SupplierDeleteResponse, SupplierListResponse, SupplierPaginatedResponse, SupplierUpdateRequest, SupplierUpdateResponse } from "../types/suppliers";
const supplierServices = {
/**
* Obtiene proveedores, paginados o no según el parámetro.
* @param paginated Si es false, retorna SupplierListResponse; si es true o undefined, retorna SupplierPaginatedResponse
*/
async getSuppliers(
paginated?: boolean,
name?: string,
type?: string
): Promise<SupplierPaginatedResponse | SupplierListResponse> {
try {
const params: any = {};
if (paginated === false) params.paginated = false;
if (name) params.name = name;
if (type) params.type = type;
const response = await api.get('/api/suppliers', { params });
console.log('📦 Suppliers response:', response);
return response.data;
} catch (error) {
console.error('❌ Error fetching suppliers:', error);
throw error;
}
},
async createSupplier(data: SupplierCreateRequest): Promise<SupplierCreateResponse> {
try {
const response = await api.post('/api/suppliers', data);
console.log('✅ Supplier created successfully:', response);
return response.data;
} catch (error) {
console.error('❌ Error creating supplier:', error);
throw error;
}
},
/**
* Actualiza un proveedor existente
* @param supplierId ID del proveedor a actualizar
* @param data Campos a actualizar (parcial o total)
* @param method 'patch' (default) o 'put'
*/
async updateSupplier(
supplierId: number,
data: SupplierUpdateRequest,
method: 'patch' | 'put' = 'patch'
): Promise<SupplierUpdateResponse> {
try {
const response = await api[method](`/api/suppliers/${supplierId}`, data);
console.log(`✏️ Supplier with ID ${supplierId} updated successfully.`, response);
return response.data;
} catch (error) {
console.error(`❌ Error updating supplier with ID ${supplierId}:`, error);
throw error;
}
},
async deleteSupplier(supplierId: number): Promise<SupplierDeleteResponse> {
try {
const response = await api.delete(`/api/suppliers/${supplierId}`);
console.log(`🗑️ Supplier with ID ${supplierId} deleted successfully.`);
return response.data;
} catch (error) {
console.error(`❌ Error deleting supplier with ID ${supplierId}:`, error);
throw error;
}
}
};
export { supplierServices };

68
src/modules/catalog/types/suppliers.d.ts vendored Normal file
View File

@ -0,0 +1,68 @@
// Errores de validación del formulario de proveedor
export interface SupplierFormErrors {
name?: string[];
contact_email?: string[];
phone_number?: string[];
address?: string[];
type?: string[];
}
// Respuesta simple de proveedores (sin paginación)
export interface SupplierListResponse {
data: Supplier[];
}
export interface Supplier {
id: number;
name: string;
contact_email: string;
phone_number: string;
address: string;
type: string;
created_at: string;
updated_at: string;
deleted_at: string | null;
}
export interface SupplierPaginationLink {
url: string | null;
label: string;
active: boolean;
}
export interface SupplierPaginatedResponse {
current_page: number;
data: Supplier[];
first_page_url: string;
from: number;
last_page: number;
last_page_url: string;
links: SupplierPaginationLink[];
next_page_url: string | null;
path: string;
per_page: number;
prev_page_url: string | null;
to: number;
total: number;
}
export interface SupplierDeleteResponse {
message: string;
data: null;
}
export interface SupplierCreateRequest {
name: string;
contact_email: string;
phone_number: string;
address: string;
type: string;
}
export interface SupplierCreateResponse {
data: Supplier;
}
// Para actualización, todos los campos son opcionales
export type SupplierUpdateRequest = Partial<SupplierCreateRequest>;
export type SupplierUpdateResponse = SupplierCreateResponse;

12
src/router/index.ts
View File

@ -23,6 +23,9 @@ import StoreDetails from '../modules/stores/components/StoreDetails.vue';
import Positions from '../modules/rh/components/Positions.vue';
import Departments from '../modules/rh/components/Departments.vue';
import '../modules/catalog/components/suppliers/Suppliers.vue';
import Suppliers from '../modules/catalog/components/suppliers/Suppliers.vue';
const routes: RouteRecordRaw[] = [
{
path: '/login',
@ -148,6 +151,15 @@ const routes: RouteRecordRaw[] = [
requiresAuth: true
}
},
{
path: 'suppliers',
name: 'Suppliers',
component: Suppliers,
meta: {
title: 'Proveedores',
requiresAuth: true
}
},
]
},
{