Merge pull request 'CTL-51-DEVELOP' (#19) from CTL-51-DEVELOP into qa
Reviewed-on: #19
This commit is contained in:
commit
6d3adcc8e5
1
.gitignore
vendored
1
.gitignore
vendored
@ -30,3 +30,4 @@ dist-ssr
|
||||
|
||||
# Docker
|
||||
docker-compose.override.yml
|
||||
.agents
|
||||
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -25,19 +25,19 @@ declare module 'vue' {
|
||||
IconField: typeof import('primevue/iconfield')['default']
|
||||
InputIcon: typeof import('primevue/inputicon')['default']
|
||||
InputNumber: typeof import('primevue/inputnumber')['default']
|
||||
InputSwitch: typeof import('primevue/inputswitch')['default']
|
||||
InputText: typeof import('primevue/inputtext')['default']
|
||||
KpiCard: typeof import('./src/components/shared/KpiCard.vue')['default']
|
||||
Menu: typeof import('primevue/menu')['default']
|
||||
Message: typeof import('primevue/message')['default']
|
||||
Paginator: typeof import('primevue/paginator')['default']
|
||||
Panel: typeof import('primevue/panel')['default']
|
||||
Password: typeof import('primevue/password')['default']
|
||||
ProgressSpinner: typeof import('primevue/progressspinner')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Sidebar: typeof import('./src/components/layout/Sidebar.vue')['default']
|
||||
Tag: typeof import('primevue/tag')['default']
|
||||
Toast: typeof import('primevue/toast')['default']
|
||||
Toolbar: typeof import('primevue/toolbar')['default']
|
||||
TopBar: typeof import('./src/components/layout/TopBar.vue')['default']
|
||||
}
|
||||
export interface GlobalDirectives {
|
||||
|
||||
56
package-lock.json
generated
56
package-lock.json
generated
@ -27,7 +27,7 @@
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vue-tsc": "^3.1.0"
|
||||
"vue-tsc": "^3.2.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
@ -1216,30 +1216,30 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/language-core": {
|
||||
"version": "2.4.23",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.23.tgz",
|
||||
"integrity": "sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==",
|
||||
"version": "2.4.28",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
|
||||
"integrity": "sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/source-map": "2.4.23"
|
||||
"@volar/source-map": "2.4.28"
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/source-map": {
|
||||
"version": "2.4.23",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.23.tgz",
|
||||
"integrity": "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==",
|
||||
"version": "2.4.28",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.28.tgz",
|
||||
"integrity": "sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@volar/typescript": {
|
||||
"version": "2.4.23",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.23.tgz",
|
||||
"integrity": "sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==",
|
||||
"version": "2.4.28",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.28.tgz",
|
||||
"integrity": "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "2.4.23",
|
||||
"@volar/language-core": "2.4.28",
|
||||
"path-browserify": "^1.0.1",
|
||||
"vscode-uri": "^3.0.8"
|
||||
}
|
||||
@ -1325,27 +1325,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.3.tgz",
|
||||
"integrity": "sha512-KpR1F/eGAG9D1RZ0/T6zWJs6dh/pRLfY5WupecyYKJ1fjVmDMgTPw9wXmKv2rBjo4zCJiOSiyB8BDP1OUwpMEA==",
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.6.tgz",
|
||||
"integrity": "sha512-xYYYX3/aVup576tP/23sEUpgiEnujrENaoNRbaozC1/MA9I6EGFQRJb4xrt/MmUCAGlxTKL2RmT8JLTPqagCkg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "2.4.23",
|
||||
"@volar/language-core": "2.4.28",
|
||||
"@vue/compiler-dom": "^3.5.0",
|
||||
"@vue/shared": "^3.5.0",
|
||||
"alien-signals": "^3.0.0",
|
||||
"muggle-string": "^0.4.1",
|
||||
"path-browserify": "^1.0.1",
|
||||
"picomatch": "^4.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
@ -1468,9 +1460,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/alien-signals": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.6.tgz",
|
||||
"integrity": "sha512-gCs0YqC1mkYGC6IRXsSrA62ShOSv1FlVN5tRp/Cs2vRWLK/BAeluWIdfsl253pFQPznKEvRmHhfep7crWfyfWQ==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.2.tgz",
|
||||
"integrity": "sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -2802,14 +2794,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tsc": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.3.tgz",
|
||||
"integrity": "sha512-StMNfZHwPIXQgY3KxPKM0Jsoc8b46mDV3Fn2UlHCBIwRJApjqrSwqeMYgWf0zpN+g857y74pv7GWuBm+UqQe1w==",
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.6.tgz",
|
||||
"integrity": "sha512-gYW/kWI0XrwGzd0PKc7tVB/qpdeAkIZLNZb10/InizkQjHjnT8weZ/vBarZoj4kHKbUTZT/bAVgoOr8x4NsQ/Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/typescript": "2.4.23",
|
||||
"@vue/language-core": "3.1.3"
|
||||
"@volar/typescript": "2.4.28",
|
||||
"@vue/language-core": "3.2.6"
|
||||
},
|
||||
"bin": {
|
||||
"vue-tsc": "bin/vue-tsc.js"
|
||||
|
||||
@ -28,6 +28,6 @@
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vue-tsc": "^3.1.0"
|
||||
"vue-tsc": "^3.2.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useAuth } from '../../modules/auth/composables/useAuth';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { hasPermission } = useAuth();
|
||||
|
||||
interface MenuItem {
|
||||
label: string;
|
||||
icon: string;
|
||||
to?: string;
|
||||
items?: MenuItem[];
|
||||
permission?: string | string[];
|
||||
}
|
||||
|
||||
const menuItems = ref<MenuItem[]>([
|
||||
@ -22,11 +25,33 @@ const menuItems = ref<MenuItem[]>([
|
||||
label: 'Catálogo',
|
||||
icon: 'pi pi-book',
|
||||
items: [
|
||||
{ label: 'Unidades de Medida', icon: 'pi pi-calculator', to: '/catalog/units-of-measure' },
|
||||
{
|
||||
label: 'Unidades de Medida',
|
||||
icon: 'pi pi-calculator',
|
||||
to: '/catalog/units-of-measure',
|
||||
permission: [
|
||||
'units-of-measure.index',
|
||||
'units-of-measure.show',
|
||||
'units-of-measure.store',
|
||||
'units-of-measure.update',
|
||||
'units-of-measure.destroy',
|
||||
],
|
||||
},
|
||||
{ label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' },
|
||||
{ label: 'Proveedores', icon: 'pi pi-briefcase', to: '/catalog/suppliers' },
|
||||
{ label: 'Documentos del Modelo', icon: 'pi pi-file', to: '/catalog/model-documents' },
|
||||
{ label: 'Empresas', icon: 'pi pi-building', to: '/catalog/companies' }
|
||||
{
|
||||
label: 'Empresas',
|
||||
icon: 'pi pi-building',
|
||||
to: '/catalog/companies',
|
||||
permission: [
|
||||
'companies.index',
|
||||
'companies.show',
|
||||
'companies.store',
|
||||
'companies.update',
|
||||
'companies.destroy',
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -104,6 +129,36 @@ const menuItems = ref<MenuItem[]>([
|
||||
const sidebarVisible = ref(true);
|
||||
const openItems = ref<string[]>([]);
|
||||
|
||||
const canAccessItem = (item: MenuItem): boolean => {
|
||||
if (!item.permission) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return hasPermission(item.permission);
|
||||
};
|
||||
|
||||
const filterMenuItems = (items: MenuItem[]): MenuItem[] => {
|
||||
return items
|
||||
.map((item) => {
|
||||
if (item.items && item.items.length > 0) {
|
||||
const children = filterMenuItems(item.items);
|
||||
if (children.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
items: children,
|
||||
};
|
||||
}
|
||||
|
||||
return canAccessItem(item) ? item : null;
|
||||
})
|
||||
.filter((item): item is MenuItem => item !== null);
|
||||
};
|
||||
|
||||
const visibleMenuItems = computed(() => filterMenuItems(menuItems.value));
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarVisible.value = !sidebarVisible.value;
|
||||
};
|
||||
@ -139,7 +194,7 @@ const isRouteActive = (to: string | undefined) => {
|
||||
// SOLO marcar activo si la ruta hija NO está explícitamente en el menú
|
||||
if (route.path.startsWith(to + '/')) {
|
||||
// Verificar si la ruta actual está definida como un item del menú
|
||||
const isExplicitRoute = menuItems.value.some(item => {
|
||||
const isExplicitRoute = visibleMenuItems.value.some(item => {
|
||||
if (item.items) {
|
||||
return item.items.some(subItem => subItem.to === route.path);
|
||||
}
|
||||
@ -202,8 +257,15 @@ defineExpose({ toggleSidebar });
|
||||
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="flex-1 overflow-y-auto p-3">
|
||||
<div v-if="visibleMenuItems.length === 0" class="px-3 py-6 text-center">
|
||||
<i class="pi pi-lock text-2xl text-surface-400 dark:text-surface-500"></i>
|
||||
<p v-if="sidebarVisible" class="mt-3 text-sm text-surface-500 dark:text-surface-400">
|
||||
No tienes permisos para ver módulos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-1">
|
||||
<li v-for="item in menuItems" :key="item.label">
|
||||
<li v-for="item in visibleMenuItems" :key="item.label">
|
||||
<!-- Item sin subitems -->
|
||||
<a v-if="!item.items" :href="item.to" @click.prevent="item.to && navigateTo(item.to)" :class="[
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer',
|
||||
|
||||
12
src/main.ts
12
src/main.ts
@ -34,10 +34,6 @@ const MyPreset = definePreset(Aura, {
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
|
||||
// Inicializar autenticación desde localStorage
|
||||
const { initAuth } = useAuth();
|
||||
initAuth();
|
||||
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(ConfirmationService);
|
||||
@ -53,4 +49,10 @@ app.use(PrimeVue, {
|
||||
|
||||
app.directive("styleclass", StyleClass);
|
||||
|
||||
app.mount("#app");
|
||||
const bootstrap = async () => {
|
||||
const { initAuth } = useAuth();
|
||||
await initAuth();
|
||||
app.mount('#app');
|
||||
};
|
||||
|
||||
bootstrap();
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { login, isLoading } = useAuth();
|
||||
|
||||
const email = ref('');
|
||||
@ -24,7 +25,9 @@ const handleLogin = async () => {
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
router.push('/');
|
||||
const requestedRedirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/';
|
||||
const redirect = requestedRedirect.startsWith('/') ? requestedRedirect : '/';
|
||||
router.push(redirect);
|
||||
} else {
|
||||
errorMessage.value = result.error || 'Error al iniciar sesión';
|
||||
}
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import authService from '../services/authService';
|
||||
import {
|
||||
clearStoredAuthSession,
|
||||
persistAuthSession,
|
||||
readStoredPermissions,
|
||||
readStoredRoles,
|
||||
readStoredToken,
|
||||
readStoredUser,
|
||||
} from '../utils/authStorage';
|
||||
|
||||
export interface Role {
|
||||
id: number;
|
||||
@ -51,23 +59,60 @@ export interface LoginCredentials {
|
||||
// Estado global de autenticación
|
||||
const user = ref<User | null>(null);
|
||||
const token = ref<string | null>(null);
|
||||
const roles = ref<Role[]>([]);
|
||||
const permissions = ref<string[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const isInitialized = ref(false);
|
||||
let unauthorizedListenerRegistered = false;
|
||||
|
||||
const normalizeTarget = (target: string | string[]): string[] =>
|
||||
Array.isArray(target) ? target : [target];
|
||||
|
||||
const clearSession = () => {
|
||||
user.value = null;
|
||||
token.value = null;
|
||||
roles.value = [];
|
||||
permissions.value = [];
|
||||
clearStoredAuthSession();
|
||||
};
|
||||
|
||||
const hasRole = (target: string | string[]): boolean => {
|
||||
const roleNames = roles.value.map((role) => role.name);
|
||||
return normalizeTarget(target).some((roleName) => roleNames.includes(roleName));
|
||||
};
|
||||
|
||||
const hasPermission = (target: string | string[]): boolean => {
|
||||
return normalizeTarget(target).some((permissionName) => permissions.value.includes(permissionName));
|
||||
};
|
||||
|
||||
// Inicializar desde localStorage
|
||||
const initAuth = () => {
|
||||
const initAuth = async () => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('auth_token');
|
||||
const storedUser = localStorage.getItem('auth_user');
|
||||
|
||||
if (storedToken && storedUser && storedUser !== 'undefined') {
|
||||
token.value = storedToken;
|
||||
user.value = JSON.parse(storedUser);
|
||||
const storedToken = readStoredToken();
|
||||
const storedUser = readStoredUser();
|
||||
const storedRoles = readStoredRoles();
|
||||
const storedPermissions = readStoredPermissions();
|
||||
|
||||
if (!storedToken || !storedUser) {
|
||||
clearSession();
|
||||
return;
|
||||
}
|
||||
|
||||
token.value = storedToken;
|
||||
user.value = storedUser;
|
||||
roles.value = storedRoles;
|
||||
permissions.value = storedPermissions;
|
||||
|
||||
const sessionData = await authService.refreshSession();
|
||||
user.value = sessionData.user;
|
||||
roles.value = sessionData.roles;
|
||||
permissions.value = sessionData.permissions;
|
||||
persistAuthSession(storedToken, sessionData.user, sessionData.roles, sessionData.permissions);
|
||||
} catch (error) {
|
||||
console.error('Error al inicializar autenticación:', error);
|
||||
// Limpiar localStorage si hay datos corruptos
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('auth_user');
|
||||
clearSession();
|
||||
} finally {
|
||||
isInitialized.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
@ -85,10 +130,18 @@ const login = async (credentials: LoginCredentials): Promise<{ success: boolean;
|
||||
// Guardar en estado
|
||||
user.value = response.user;
|
||||
token.value = response.token;
|
||||
roles.value = [];
|
||||
permissions.value = [];
|
||||
|
||||
persistAuthSession(response.token, response.user, [], []);
|
||||
|
||||
const sessionData = await authService.refreshSession();
|
||||
user.value = sessionData.user;
|
||||
roles.value = sessionData.roles;
|
||||
permissions.value = sessionData.permissions;
|
||||
|
||||
// Persistir en localStorage
|
||||
localStorage.setItem('auth_token', response.token);
|
||||
localStorage.setItem('auth_user', JSON.stringify(response.user));
|
||||
persistAuthSession(response.token, sessionData.user, sessionData.roles, sessionData.permissions);
|
||||
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
@ -105,10 +158,7 @@ const login = async (credentials: LoginCredentials): Promise<{ success: boolean;
|
||||
// Función de logout
|
||||
const logout = async () => {
|
||||
// Limpiar estado local inmediatamente para reactividad
|
||||
user.value = null;
|
||||
token.value = null;
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('auth_user');
|
||||
clearSession();
|
||||
|
||||
try {
|
||||
// Notificar al backend (en segundo plano)
|
||||
@ -119,15 +169,28 @@ const logout = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined' && !unauthorizedListenerRegistered) {
|
||||
unauthorizedListenerRegistered = true;
|
||||
window.addEventListener('auth:unauthorized', () => {
|
||||
clearSession();
|
||||
});
|
||||
}
|
||||
|
||||
// Composable para usar en componentes
|
||||
export const useAuth = () => {
|
||||
return {
|
||||
user,
|
||||
token,
|
||||
roles,
|
||||
permissions,
|
||||
isLoading,
|
||||
isInitialized,
|
||||
isAuthenticated,
|
||||
hasRole,
|
||||
hasPermission,
|
||||
login,
|
||||
logout,
|
||||
initAuth
|
||||
initAuth,
|
||||
clearSession,
|
||||
};
|
||||
};
|
||||
|
||||
@ -17,7 +17,87 @@ export interface RegisterData {
|
||||
password_confirmation: string;
|
||||
}
|
||||
|
||||
interface SessionRefreshData {
|
||||
user: User;
|
||||
roles: Role[];
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
class AuthService {
|
||||
private extractArrayFromResponse(payload: unknown): unknown[] {
|
||||
if (Array.isArray(payload)) {
|
||||
return payload;
|
||||
}
|
||||
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
return [];
|
||||
}
|
||||
|
||||
const root = payload as Record<string, unknown>;
|
||||
|
||||
if (Array.isArray(root.data)) {
|
||||
return root.data;
|
||||
}
|
||||
|
||||
if (root.data && typeof root.data === 'object') {
|
||||
const nested = root.data as Record<string, unknown>;
|
||||
|
||||
if (Array.isArray(nested.permissions)) {
|
||||
return nested.permissions;
|
||||
}
|
||||
|
||||
if (Array.isArray(nested.roles)) {
|
||||
return nested.roles;
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
private normalizePermissions(payload: unknown): string[] {
|
||||
const items = this.extractArrayFromResponse(payload);
|
||||
|
||||
return items
|
||||
.map((item) => {
|
||||
if (typeof item === 'string') {
|
||||
return item;
|
||||
}
|
||||
|
||||
if (item && typeof item === 'object' && typeof (item as Record<string, unknown>).name === 'string') {
|
||||
return (item as Record<string, string>).name;
|
||||
}
|
||||
|
||||
return null;
|
||||
})
|
||||
.filter((permission): permission is string => Boolean(permission));
|
||||
}
|
||||
|
||||
private normalizeRoles(payload: unknown): Role[] {
|
||||
const items = this.extractArrayFromResponse(payload);
|
||||
|
||||
return items.filter((item): item is Role => {
|
||||
if (!item || typeof item !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const role = item as Partial<Role>;
|
||||
return typeof role.name === 'string';
|
||||
});
|
||||
}
|
||||
|
||||
private resolveAuthError(error: any, fallback = 'Error en autenticación'): never {
|
||||
if (error.response?.status === 422 && error.response?.data?.errors) {
|
||||
const firstError = Object.values(error.response.data.errors)?.[0] as string[] | undefined;
|
||||
throw new Error(firstError?.[0] || error.response.data.message || fallback);
|
||||
}
|
||||
|
||||
if (error.response?.status === 429) {
|
||||
throw new Error('Demasiados intentos de inicio de sesión. Intenta nuevamente en un minuto.');
|
||||
}
|
||||
|
||||
throw new Error(error.response?.data?.message || fallback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Iniciar sesión
|
||||
*/
|
||||
@ -34,17 +114,7 @@ class AuthService {
|
||||
token: response.data.data.token
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error('Error en login:', error);
|
||||
|
||||
// Manejar errores de validación (422)
|
||||
if (error.response?.status === 422 && error.response?.data?.errors) {
|
||||
const errors = error.response.data.errors;
|
||||
const firstError = Object.values(errors)[0] as string[];
|
||||
throw new Error(firstError[0] || error.response.data.message);
|
||||
}
|
||||
|
||||
// Manejar otros errores
|
||||
throw new Error(error.response?.data?.message || 'Error al iniciar sesión');
|
||||
this.resolveAuthError(error, 'Error al iniciar sesión');
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,10 +123,10 @@ class AuthService {
|
||||
*/
|
||||
async register(data: RegisterData): Promise<LoginResponse> {
|
||||
try {
|
||||
const response = await api.post<LoginResponse>('/auth/register', data);
|
||||
const response = await api.post<LoginResponse>('/api/auth/register', data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al registrar usuario');
|
||||
this.resolveAuthError(error, 'Error al registrar usuario');
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,18 +135,7 @@ class AuthService {
|
||||
*/
|
||||
async logout(): Promise<void> {
|
||||
try {
|
||||
const response = await api.post<{
|
||||
status: string;
|
||||
data: {
|
||||
is_revoked: boolean;
|
||||
};
|
||||
}>('/api/auth/logout');
|
||||
|
||||
console.log('Respuesta logout:', response.data);
|
||||
|
||||
if (response.data.status === 'success' && response.data.data.is_revoked) {
|
||||
console.log('Token revocado exitosamente');
|
||||
}
|
||||
await api.post('/api/auth/logout');
|
||||
} catch (error: any) {
|
||||
console.error('Error al cerrar sesión:', error);
|
||||
// No lanzar error para que el logout local continúe aunque falle el backend
|
||||
@ -88,10 +147,46 @@ class AuthService {
|
||||
*/
|
||||
async getCurrentUser(): Promise<User> {
|
||||
try {
|
||||
const response = await api.get<User>('/auth/me');
|
||||
const response = await api.get<User>('/api/user');
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al obtener usuario');
|
||||
this.resolveAuthError(error, 'Error al obtener usuario');
|
||||
}
|
||||
}
|
||||
|
||||
async getUserRoles(): Promise<Role[]> {
|
||||
try {
|
||||
const response = await api.get('/api/user/roles');
|
||||
return this.normalizeRoles(response.data);
|
||||
} catch (error: any) {
|
||||
this.resolveAuthError(error, 'Error al obtener roles del usuario');
|
||||
}
|
||||
}
|
||||
|
||||
async getUserPermissions(): Promise<string[]> {
|
||||
try {
|
||||
const response = await api.get('/api/user/permissions');
|
||||
return this.normalizePermissions(response.data);
|
||||
} catch (error: any) {
|
||||
this.resolveAuthError(error, 'Error al obtener permisos del usuario');
|
||||
}
|
||||
}
|
||||
|
||||
async refreshSession(): Promise<SessionRefreshData> {
|
||||
try {
|
||||
const [currentUser, roles, permissions] = await Promise.all([
|
||||
this.getCurrentUser(),
|
||||
this.getUserRoles(),
|
||||
this.getUserPermissions(),
|
||||
]);
|
||||
|
||||
return {
|
||||
user: currentUser,
|
||||
roles,
|
||||
permissions,
|
||||
};
|
||||
} catch (error: any) {
|
||||
this.resolveAuthError(error, 'Error al sincronizar sesión');
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,10 +195,10 @@ class AuthService {
|
||||
*/
|
||||
async updateProfile(data: Partial<User>): Promise<User> {
|
||||
try {
|
||||
const response = await api.put<User>('/auth/profile', data);
|
||||
const response = await api.put<User>('/api/auth/profile', data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al actualizar perfil');
|
||||
this.resolveAuthError(error, 'Error al actualizar perfil');
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,12 +207,12 @@ class AuthService {
|
||||
*/
|
||||
async changePassword(currentPassword: string, newPassword: string): Promise<void> {
|
||||
try {
|
||||
await api.post('/auth/change-password', {
|
||||
await api.post('/api/auth/change-password', {
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword
|
||||
});
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al cambiar contraseña');
|
||||
this.resolveAuthError(error, 'Error al cambiar contraseña');
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,9 +221,9 @@ class AuthService {
|
||||
*/
|
||||
async forgotPassword(email: string): Promise<void> {
|
||||
try {
|
||||
await api.post('/auth/forgot-password', { email });
|
||||
await api.post('/api/auth/forgot-password', { email });
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al solicitar recuperación');
|
||||
this.resolveAuthError(error, 'Error al solicitar recuperación');
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,9 +232,9 @@ class AuthService {
|
||||
*/
|
||||
async resetPassword(token: string, password: string): Promise<void> {
|
||||
try {
|
||||
await api.post('/auth/reset-password', { token, password });
|
||||
await api.post('/api/auth/reset-password', { token, password });
|
||||
} catch (error: any) {
|
||||
throw new Error(error.response?.data?.message || 'Error al resetear contraseña');
|
||||
this.resolveAuthError(error, 'Error al resetear contraseña');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
66
src/modules/auth/utils/authStorage.ts
Normal file
66
src/modules/auth/utils/authStorage.ts
Normal file
@ -0,0 +1,66 @@
|
||||
import type { Role, User } from '../composables/useAuth';
|
||||
|
||||
export const AUTH_TOKEN_KEY = 'auth_token';
|
||||
export const AUTH_USER_KEY = 'auth_user';
|
||||
export const AUTH_ROLES_KEY = 'auth_roles';
|
||||
export const AUTH_PERMISSIONS_KEY = 'auth_permissions';
|
||||
|
||||
export const readStoredToken = (): string | null => localStorage.getItem(AUTH_TOKEN_KEY);
|
||||
|
||||
export const readStoredUser = (): User | null => {
|
||||
const rawUser = localStorage.getItem(AUTH_USER_KEY);
|
||||
|
||||
if (!rawUser || rawUser === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(rawUser) as User;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const readStoredRoles = (): Role[] => {
|
||||
const rawRoles = localStorage.getItem(AUTH_ROLES_KEY);
|
||||
|
||||
if (!rawRoles || rawRoles === 'undefined') {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(rawRoles) as Role[];
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const readStoredPermissions = (): string[] => {
|
||||
const rawPermissions = localStorage.getItem(AUTH_PERMISSIONS_KEY);
|
||||
|
||||
if (!rawPermissions || rawPermissions === 'undefined') {
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(rawPermissions) as string[];
|
||||
return Array.isArray(parsed) ? parsed.filter((permission) => typeof permission === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const persistAuthSession = (token: string, user: User, roles: Role[] = [], permissions: string[] = []) => {
|
||||
localStorage.setItem(AUTH_TOKEN_KEY, token);
|
||||
localStorage.setItem(AUTH_USER_KEY, JSON.stringify(user));
|
||||
localStorage.setItem(AUTH_ROLES_KEY, JSON.stringify(roles));
|
||||
localStorage.setItem(AUTH_PERMISSIONS_KEY, JSON.stringify(permissions));
|
||||
};
|
||||
|
||||
export const clearStoredAuthSession = () => {
|
||||
localStorage.removeItem(AUTH_TOKEN_KEY);
|
||||
localStorage.removeItem(AUTH_USER_KEY);
|
||||
localStorage.removeItem(AUTH_ROLES_KEY);
|
||||
localStorage.removeItem(AUTH_PERMISSIONS_KEY);
|
||||
};
|
||||
@ -9,6 +9,7 @@
|
||||
<p class="text-slate-500 dark:text-slate-400">Administra y monitorea todas las entidades legales registradas en el sistema.</p>
|
||||
</div>
|
||||
<Button
|
||||
v-if="canCreateCompany"
|
||||
label="Registrar Nueva Empresa"
|
||||
icon="pi pi-plus"
|
||||
@click="openCreateDialog"
|
||||
@ -17,7 +18,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<Card>
|
||||
<Card v-if="canViewCompanies">
|
||||
<template #content>
|
||||
<DataTable
|
||||
:value="companies"
|
||||
@ -60,20 +61,17 @@
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="address" header="Ubicación" style="min-width: 200px">
|
||||
<template #body="{ data }">
|
||||
<div v-if="data.address">
|
||||
<p class="text-sm">{{ data.address.city }}</p>
|
||||
<p class="text-xs text-slate-400">{{ data.address.state }}</p>
|
||||
</div>
|
||||
<span v-else class="text-slate-400">Sin dirección</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="domains_count" header="Dominios" style="min-width: 120px">
|
||||
<template #body="{ data }">
|
||||
<span class="font-mono text-sm">{{ data.domains_count || 0 }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column header="Acciones" :exportable="false" style="min-width: 120px">
|
||||
<template #body="{ data }">
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-if="canUpdateCompany"
|
||||
icon="pi pi-pencil"
|
||||
class="p-button-rounded p-button-text p-button-sm"
|
||||
@click="editCompany(data)"
|
||||
@ -86,6 +84,7 @@
|
||||
v-tooltip.top="'Ver detalles'"
|
||||
/>
|
||||
<Button
|
||||
v-if="canDeleteCompany"
|
||||
icon="pi pi-trash"
|
||||
class="p-button-rounded p-button-text p-button-sm p-button-danger"
|
||||
@click="confirmDelete(data)"
|
||||
@ -105,6 +104,15 @@
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card v-else>
|
||||
<template #content>
|
||||
<div class="text-center py-8">
|
||||
<i class="pi pi-lock text-4xl text-slate-300 mb-3"></i>
|
||||
<p class="text-slate-500">No tienes permisos para ver el listado de empresas.</p>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Form Dialog -->
|
||||
<CompaniesForm
|
||||
ref="companiesFormRef"
|
||||
@ -129,14 +137,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import CompaniesForm from './CompaniesForm.vue';
|
||||
import { companyService } from './companies.service';
|
||||
import type { Company, PaginatedResponse } from './companies.types';
|
||||
import { companiesService } from './companies.service';
|
||||
import type { Company, TenantFormData } from './companies.types';
|
||||
import { useAuth } from '@/modules/auth/composables/useAuth';
|
||||
|
||||
// Toast
|
||||
const toast = useToast();
|
||||
const { hasPermission } = useAuth();
|
||||
|
||||
// Refs
|
||||
const companiesFormRef = ref<InstanceType<typeof CompaniesForm> | null>(null);
|
||||
@ -146,46 +156,43 @@ const companies = ref<Company[]>([]);
|
||||
const loading = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const deleteDialogVisible = ref(false);
|
||||
const selectedCompany = ref<Company | null>(null);
|
||||
const selectedCompany = ref<Company | undefined>(undefined);
|
||||
const companyToDelete = ref<Company | null>(null);
|
||||
|
||||
// Pagination
|
||||
const currentPage = ref(1);
|
||||
const totalRecords = ref(0);
|
||||
const perPage = ref(10);
|
||||
const canViewCompanies = computed(() =>
|
||||
hasPermission([
|
||||
'companies.index',
|
||||
'companies.show',
|
||||
'companies.store',
|
||||
'companies.update',
|
||||
'companies.destroy',
|
||||
])
|
||||
);
|
||||
const canCreateCompany = computed(() => hasPermission('companies.store'));
|
||||
const canUpdateCompany = computed(() => hasPermission('companies.update'));
|
||||
const canDeleteCompany = computed(() => hasPermission('companies.destroy'));
|
||||
|
||||
// Search filters
|
||||
const searchFilters = ref({
|
||||
rfc: '',
|
||||
curp: '',
|
||||
company_name: ''
|
||||
});
|
||||
|
||||
|
||||
// Methods
|
||||
const loadCompanies = async () => {
|
||||
const loadCompanies = async (page = currentPage.value) => {
|
||||
if (!canViewCompanies.value) {
|
||||
companies.value = [];
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
paginate: true,
|
||||
page: currentPage.value,
|
||||
...searchFilters.value
|
||||
};
|
||||
|
||||
const response = await companyService.getAll(params);
|
||||
|
||||
if ('current_page' in response) {
|
||||
// Respuesta paginada
|
||||
const paginatedData = response as PaginatedResponse<Company>;
|
||||
companies.value = paginatedData.data;
|
||||
currentPage.value = paginatedData.current_page;
|
||||
totalRecords.value = paginatedData.total;
|
||||
perPage.value = paginatedData.per_page;
|
||||
} else {
|
||||
// Respuesta sin paginación
|
||||
companies.value = response as Company[];
|
||||
totalRecords.value = companies.value.length;
|
||||
}
|
||||
|
||||
const response = await companiesService.getAll(page);
|
||||
companies.value = response.data;
|
||||
currentPage.value = response.current_page;
|
||||
totalRecords.value = response.total;
|
||||
perPage.value = response.per_page;
|
||||
} catch (error) {
|
||||
console.error('Error loading companies:', error);
|
||||
companies.value = [];
|
||||
@ -196,25 +203,37 @@ const loadCompanies = async () => {
|
||||
|
||||
const onPageChange = (event: any) => {
|
||||
currentPage.value = event.page + 1; // PrimeVue usa índice base 0
|
||||
loadCompanies();
|
||||
loadCompanies(currentPage.value);
|
||||
};
|
||||
|
||||
const openCreateDialog = () => {
|
||||
selectedCompany.value = null;
|
||||
if (!canCreateCompany.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectedCompany.value = undefined;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const editCompany = (company: any) => {
|
||||
const editCompany = (company: Company) => {
|
||||
if (!canUpdateCompany.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectedCompany.value = { ...company };
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
}; // No change needed — assigns a valid Company
|
||||
|
||||
const viewCompany = (company: any) => {
|
||||
// TODO: Implementar vista de detalles
|
||||
const viewCompany = (company: Company) => {
|
||||
// Aquí podrías abrir un modal de detalles o navegar a una vista
|
||||
console.log('View company:', company);
|
||||
};
|
||||
|
||||
const confirmDelete = (company: any) => {
|
||||
const confirmDelete = (company: Company) => {
|
||||
if (!canDeleteCompany.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
companyToDelete.value = company;
|
||||
deleteDialogVisible.value = true;
|
||||
};
|
||||
@ -223,7 +242,7 @@ const deleteCompany = async () => {
|
||||
if (!companyToDelete.value?.id) return;
|
||||
|
||||
try {
|
||||
await companyService.delete(companyToDelete.value.id);
|
||||
await companiesService.delete(companyToDelete.value.id);
|
||||
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
@ -248,76 +267,76 @@ const deleteCompany = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (companyData: any) => {
|
||||
const handleSave = async (companyData: TenantFormData) => {
|
||||
try {
|
||||
if (selectedCompany.value?.id) {
|
||||
// Actualizar empresa existente
|
||||
await companyService.update(selectedCompany.value.id, companyData);
|
||||
|
||||
const isEditMode = Boolean(selectedCompany.value?.id);
|
||||
|
||||
if (isEditMode && !canUpdateCompany.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permiso para actualizar empresas.',
|
||||
life: 4000,
|
||||
});
|
||||
companiesFormRef.value?.resetSubmitting();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isEditMode && !canCreateCompany.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permiso para crear empresas.',
|
||||
life: 4000,
|
||||
});
|
||||
companiesFormRef.value?.resetSubmitting();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isEditMode && selectedCompany.value?.id) {
|
||||
await companiesService.update(selectedCompany.value.id, companyData);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Empresa actualizada',
|
||||
detail: `La empresa "${companyData.company_name}" ha sido actualizada exitosamente`,
|
||||
life: 3000
|
||||
detail: `La empresa "${companyData.company_name}" se actualizó correctamente`,
|
||||
life: 3000,
|
||||
});
|
||||
} else {
|
||||
// Crear nueva empresa
|
||||
await companyService.create(companyData);
|
||||
|
||||
await companiesService.create(companyData);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Empresa creada',
|
||||
detail: `La empresa "${companyData.company_name}" ha sido registrada exitosamente`,
|
||||
life: 3000
|
||||
detail: `La empresa "${companyData.company_name}" se creó correctamente`,
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
|
||||
// Recargar la lista después de guardar
|
||||
|
||||
await loadCompanies();
|
||||
|
||||
dialogVisible.value = false;
|
||||
selectedCompany.value = null;
|
||||
|
||||
selectedCompany.value = undefined;
|
||||
companiesFormRef.value?.resetSubmitting();
|
||||
return true;
|
||||
} catch (error: any) {
|
||||
console.error('Error saving company:', error);
|
||||
|
||||
// Verificar si es un error de validación (422)
|
||||
if (error.response?.status === 422 && error.response?.data?.errors) {
|
||||
const backendErrors = error.response.data.errors;
|
||||
|
||||
// Setear los errores en el formulario
|
||||
if (companiesFormRef.value) {
|
||||
companiesFormRef.value.setValidationErrors(backendErrors);
|
||||
}
|
||||
|
||||
// Mostrar toast con mensaje general
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Errores de validación',
|
||||
detail: error.response.data.message || 'Por favor, corrija los errores en el formulario',
|
||||
life: 5000
|
||||
});
|
||||
} else {
|
||||
// Otros errores
|
||||
const errorMessage = error.response?.data?.message ||
|
||||
error.response?.data?.error ||
|
||||
error.message ||
|
||||
'No se pudo guardar la empresa';
|
||||
|
||||
|
||||
if (error.response?.status === 422 && error.response?.data?.errors && companiesFormRef.value) {
|
||||
companiesFormRef.value.setValidationErrors(error.response.data.errors);
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: selectedCompany.value?.id ? 'Error al actualizar' : 'Error al crear',
|
||||
detail: errorMessage,
|
||||
life: 5000
|
||||
summary: 'Error de validación',
|
||||
detail: 'Revisa los campos marcados en rojo',
|
||||
life: 4000,
|
||||
});
|
||||
|
||||
// Resetear loading en el formulario para otros tipos de error
|
||||
if (companiesFormRef.value) {
|
||||
companiesFormRef.value.setValidationErrors({});
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
companiesFormRef.value?.resetSubmitting();
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Error al guardar',
|
||||
detail: error.response?.data?.message || 'No se pudo guardar la empresa',
|
||||
life: 5000,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
};
|
||||
@ -333,7 +352,9 @@ const getInitials = (name: string): string => {
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
loadCompanies();
|
||||
if (canViewCompanies.value) {
|
||||
loadCompanies();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -341,4 +362,4 @@ onMounted(() => {
|
||||
.space-y-6 > * + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,107 +1,158 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model:visible="isVisible"
|
||||
:modal="true"
|
||||
<Dialog
|
||||
v-model:visible="isVisible"
|
||||
:modal="true"
|
||||
:closable="true"
|
||||
:style="{ width: '900px' }"
|
||||
:style="{ width: '980px' }"
|
||||
:header="formTitle"
|
||||
@hide="handleClose"
|
||||
>
|
||||
<form @submit.prevent="handleSubmit" class="space-y-6">
|
||||
<!-- Información Fiscal -->
|
||||
<form class="space-y-6" @submit.prevent="handleSubmit">
|
||||
<div class="border-b pb-4">
|
||||
<h3 class="text-lg font-semibold mb-4">Información Fiscal</h3>
|
||||
<h3 class="text-lg font-semibold mb-4">Información principal</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-2 md:col-span-2">
|
||||
<label for="company_name" class="font-medium text-sm">Razón social *</label>
|
||||
<InputText
|
||||
id="company_name"
|
||||
v-model="form.company_name"
|
||||
placeholder="Empresa Demo SA de CV"
|
||||
:class="{ 'p-invalid': errors.company_name }"
|
||||
/>
|
||||
<small v-if="errors.company_name" class="p-error text-red-600">{{ errors.company_name }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="rfc" class="font-medium text-sm">RFC *</label>
|
||||
<InputText
|
||||
id="rfc"
|
||||
v-model="form.rfc"
|
||||
placeholder="ABC123456789"
|
||||
:class="{ 'p-invalid': errors.rfc }"
|
||||
<InputText
|
||||
id="rfc"
|
||||
v-model="form.rfc"
|
||||
placeholder="DEMO010101ABC"
|
||||
maxlength="13"
|
||||
class="font-mono"
|
||||
:class="{ 'p-invalid': errors.rfc }"
|
||||
@input="form.rfc = form.rfc.toUpperCase()"
|
||||
/>
|
||||
<small v-if="errors.rfc" class="p-error text-red-600">{{ errors.rfc }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="curp" class="font-medium text-sm">CURP</label>
|
||||
<InputText
|
||||
id="curp"
|
||||
v-model="form.curp"
|
||||
placeholder="XYZ987654321"
|
||||
:class="{ 'p-invalid': errors.curp }"
|
||||
<InputText
|
||||
id="curp"
|
||||
v-model="form.curp"
|
||||
placeholder="XEXX010101HNEXXXA1"
|
||||
maxlength="18"
|
||||
class="font-mono"
|
||||
:class="{ 'p-invalid': errors.curp }"
|
||||
@input="form.curp = form.curp.toUpperCase()"
|
||||
/>
|
||||
<small v-if="errors.curp" class="p-error text-red-600">{{ errors.curp }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="email" class="font-medium text-sm">Email *</label>
|
||||
<InputText
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
placeholder="admin@empresa-demo.com"
|
||||
:class="{ 'p-invalid': errors.email }"
|
||||
/>
|
||||
<small v-if="errors.email" class="p-error text-red-600">{{ errors.email }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="primary_domain" class="font-medium text-sm">
|
||||
Dominio primario {{ isEditMode ? '(opcional en edición)' : '*' }}
|
||||
</label>
|
||||
<InputText
|
||||
id="primary_domain"
|
||||
v-model="form.primary_domain"
|
||||
placeholder="empresa-demo.local"
|
||||
:disabled="isEditMode"
|
||||
:class="{ 'p-invalid': errors.primary_domain }"
|
||||
/>
|
||||
<small v-if="errors.primary_domain" class="p-error text-red-600">{{ errors.primary_domain }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="phone" class="font-medium text-sm">Teléfono</label>
|
||||
<InputText id="phone" v-model="form.phone" placeholder="5551234567" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="tax_regime" class="font-medium text-sm">Régimen fiscal</label>
|
||||
<InputText id="tax_regime" v-model="form.tax_regime" placeholder="601" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 md:col-span-2">
|
||||
<label for="company_name" class="font-medium text-sm">Razón Social *</label>
|
||||
<InputText
|
||||
id="company_name"
|
||||
v-model="form.company_name"
|
||||
placeholder="Corporativo Ejemplo S.A. de C.V."
|
||||
:class="{ 'p-invalid': errors.company_name }"
|
||||
<label for="legal_representative" class="font-medium text-sm">Representante legal</label>
|
||||
<InputText
|
||||
id="legal_representative"
|
||||
v-model="form.legal_representative"
|
||||
placeholder="Juan Pérez"
|
||||
/>
|
||||
<small v-if="errors.company_name" class="p-error text-red-600">{{ errors.company_name }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 md:col-span-2">
|
||||
<InputSwitch v-model="form.is_active" inputId="is_active" />
|
||||
<label for="is_active" class="font-medium text-sm">
|
||||
Tenant activo
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasas e Impuestos -->
|
||||
<div class="border-b pb-4">
|
||||
<h3 class="text-lg font-semibold mb-4">Tasas e Impuestos (%)</h3>
|
||||
<h3 class="text-lg font-semibold mb-4">Tasas e impuestos (%)</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="vat_rate" class="font-medium text-sm">Tasa de IVA *</label>
|
||||
<InputNumber
|
||||
id="vat_rate"
|
||||
v-model="form.vat_rate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="2"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
:class="{ 'p-invalid': errors.vat_rate }"
|
||||
/>
|
||||
<small v-if="errors.vat_rate" class="p-error text-red-600">{{ errors.vat_rate }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="isr_withholding" class="font-medium text-sm">Retención ISR</label>
|
||||
<InputNumber
|
||||
id="isr_withholding"
|
||||
v-model="form.isr_withholding"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="2"
|
||||
<label for="vat_rate" class="font-medium text-sm">Tasa de IVA (opcional)</label>
|
||||
<InputNumber
|
||||
id="vat_rate"
|
||||
v-model="form.vat_rate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="1"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="vat_withholding" class="font-medium text-sm">Retención IVA</label>
|
||||
<InputNumber
|
||||
id="vat_withholding"
|
||||
v-model="form.vat_withholding"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="2"
|
||||
<label for="isr_withholding" class="font-medium text-sm">Retención ISR (opcional)</label>
|
||||
<InputNumber
|
||||
id="isr_withholding"
|
||||
v-model="form.isr_withholding"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="1"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="additional_tax" class="font-medium text-sm">Impuesto Adicional</label>
|
||||
<InputNumber
|
||||
id="additional_tax"
|
||||
v-model="form.additional_tax"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="2"
|
||||
<label for="vat_withholding" class="font-medium text-sm">Retención IVA (opcional)</label>
|
||||
<InputNumber
|
||||
id="vat_withholding"
|
||||
v-model="form.vat_withholding"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="1"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="additional_tax" class="font-medium text-sm">Impuesto adicional (opcional)</label>
|
||||
<InputNumber
|
||||
id="additional_tax"
|
||||
v-model="form.additional_tax"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:minFractionDigits="1"
|
||||
:maxFractionDigits="2"
|
||||
suffix="%"
|
||||
/>
|
||||
@ -109,315 +160,204 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dirección -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Dirección Fiscal</h3>
|
||||
<h3 class="text-lg font-semibold mb-4">Certificados SAT</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="country" class="font-medium text-sm">País *</label>
|
||||
<InputText
|
||||
id="country"
|
||||
v-model="form.address.country"
|
||||
placeholder="México"
|
||||
:class="{ 'p-invalid': errors.country }"
|
||||
<label for="certificate_password" class="font-medium text-sm">Password del certificado</label>
|
||||
<Password
|
||||
id="certificate_password"
|
||||
v-model="form.certificate_password"
|
||||
:feedback="false"
|
||||
toggleMask
|
||||
placeholder="Password del certificado"
|
||||
:class="{ 'p-invalid': errors.certificate_password }"
|
||||
/>
|
||||
<small v-if="errors.country" class="p-error text-red-600">{{ errors.country }}</small>
|
||||
<small v-if="errors.certificate_password" class="p-error text-red-600">{{ errors.certificate_password }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="postal_code" class="font-medium text-sm">Código Postal *</label>
|
||||
<InputText
|
||||
id="postal_code"
|
||||
v-model="form.address.postal_code"
|
||||
placeholder="12345"
|
||||
:class="{ 'p-invalid': errors.postal_code }"
|
||||
maxlength="10"
|
||||
<label for="certificate_cer_file" class="font-medium text-sm">Archivo .cer</label>
|
||||
<input
|
||||
id="certificate_cer_file"
|
||||
type="file"
|
||||
accept=".cer"
|
||||
class="p-2 border rounded-md border-surface-300 dark:border-surface-700"
|
||||
@change="onFileChange($event, 'certificate_cer_file')"
|
||||
/>
|
||||
<small v-if="errors.postal_code" class="p-error text-red-600">{{ errors.postal_code }}</small>
|
||||
<small v-if="errors.certificate_cer_file" class="p-error text-red-600">{{ errors.certificate_cer_file }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="state" class="font-medium text-sm">Estado *</label>
|
||||
<InputText
|
||||
id="state"
|
||||
v-model="form.address.state"
|
||||
placeholder="CDMX"
|
||||
:class="{ 'p-invalid': errors.state }"
|
||||
/>
|
||||
<small v-if="errors.state" class="p-error text-red-600">{{ errors.state }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="municipality" class="font-medium text-sm">Municipio / Alcaldía *</label>
|
||||
<InputText
|
||||
id="municipality"
|
||||
v-model="form.address.municipality"
|
||||
placeholder="Benito Juárez"
|
||||
:class="{ 'p-invalid': errors.municipality }"
|
||||
/>
|
||||
<small v-if="errors.municipality" class="p-error text-red-600">{{ errors.municipality }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="city" class="font-medium text-sm">Ciudad *</label>
|
||||
<InputText
|
||||
id="city"
|
||||
v-model="form.address.city"
|
||||
placeholder="Ciudad de México"
|
||||
:class="{ 'p-invalid': errors.city }"
|
||||
/>
|
||||
<small v-if="errors.city" class="p-error text-red-600">{{ errors.city }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="street" class="font-medium text-sm">Calle *</label>
|
||||
<InputText
|
||||
id="street"
|
||||
v-model="form.address.street"
|
||||
placeholder="Av. Ejemplo"
|
||||
:class="{ 'p-invalid': errors.street }"
|
||||
/>
|
||||
<small v-if="errors.street" class="p-error text-red-600">{{ errors.street }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="num_ext" class="font-medium text-sm">Número Exterior *</label>
|
||||
<InputText
|
||||
id="num_ext"
|
||||
v-model="form.address.num_ext"
|
||||
placeholder="100"
|
||||
:class="{ 'p-invalid': errors.num_ext }"
|
||||
/>
|
||||
<small v-if="errors.num_ext" class="p-error text-red-600">{{ errors.num_ext }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="num_int" class="font-medium text-sm">Número Interior</label>
|
||||
<InputText
|
||||
id="num_int"
|
||||
v-model="form.address.num_int"
|
||||
placeholder="10"
|
||||
<label for="certificate_key_file" class="font-medium text-sm">Archivo .key</label>
|
||||
<input
|
||||
id="certificate_key_file"
|
||||
type="file"
|
||||
accept=".key"
|
||||
class="p-2 border rounded-md border-surface-300 dark:border-surface-700"
|
||||
@change="onFileChange($event, 'certificate_key_file')"
|
||||
/>
|
||||
<small v-if="errors.certificate_key_file" class="p-error text-red-600">{{ errors.certificate_key_file }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-slate-500">
|
||||
* Campos obligatorios
|
||||
</div>
|
||||
<div class="text-xs text-slate-500">* Campos obligatorios</div>
|
||||
</form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
label="Cancelar"
|
||||
icon="pi pi-times"
|
||||
@click="handleClose"
|
||||
class="p-button-text"
|
||||
/>
|
||||
<Button
|
||||
label="Guardar"
|
||||
icon="pi pi-check"
|
||||
@click="handleSubmit"
|
||||
:loading="loading"
|
||||
/>
|
||||
<Button label="Cancelar" icon="pi pi-times" @click="handleClose" class="p-button-text" />
|
||||
<Button label="Guardar" icon="pi pi-check" @click="handleSubmit" :loading="loading" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { Company, TenantFormData } from './companies.types';
|
||||
import { toTenantFormData } from './companies.mapper';
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
company?: any;
|
||||
company?: Company;
|
||||
}>();
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
save: [data: any];
|
||||
save: [data: TenantFormData];
|
||||
}>();
|
||||
|
||||
// Métodos
|
||||
// Método para setear errores de validación del backend
|
||||
const setValidationErrors = (backendErrors: Record<string, string[]>) => {
|
||||
loading.value = false;
|
||||
errors.value = {};
|
||||
|
||||
// Mapear los errores del backend al formato del formulario
|
||||
Object.keys(backendErrors).forEach(key => {
|
||||
if (backendErrors[key] && backendErrors[key].length > 0) {
|
||||
// Tomar el primer mensaje de error de cada campo
|
||||
const firstError = backendErrors[key][0];
|
||||
if (firstError) {
|
||||
errors.value[key] = firstError;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Expose method to set errors from parent
|
||||
defineExpose({
|
||||
setValidationErrors
|
||||
});
|
||||
|
||||
// State
|
||||
const loading = ref(false);
|
||||
const errors = ref<Record<string, string>>({});
|
||||
const form = ref<TenantFormData>(toTenantFormData());
|
||||
|
||||
const isVisible = computed({
|
||||
get: () => props.visible,
|
||||
set: (value) => {
|
||||
if (!value) emit('close');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const formTitle = computed(() => {
|
||||
return props.company ? 'Editar Empresa' : 'Registrar Nueva Empresa';
|
||||
});
|
||||
const isEditMode = computed(() => Boolean(props.company?.id));
|
||||
const formTitle = computed(() => (isEditMode.value ? 'Editar Empresa' : 'Registrar Nueva Empresa'));
|
||||
|
||||
// Form data
|
||||
const defaultForm = () => ({
|
||||
rfc: '',
|
||||
curp: '',
|
||||
company_name: '',
|
||||
vat_rate: 16.00,
|
||||
isr_withholding: 0.00,
|
||||
vat_withholding: 0.00,
|
||||
additional_tax: 0.00,
|
||||
address: {
|
||||
country: 'México',
|
||||
postal_code: '',
|
||||
state: '',
|
||||
municipality: '',
|
||||
city: '',
|
||||
street: '',
|
||||
num_ext: '',
|
||||
num_int: ''
|
||||
}
|
||||
});
|
||||
|
||||
const form = ref(defaultForm());
|
||||
const errors = ref<Record<string, string>>({});
|
||||
|
||||
// Watch for company changes
|
||||
watch(() => props.company, (newCompany) => {
|
||||
if (newCompany) {
|
||||
form.value = {
|
||||
...defaultForm(),
|
||||
...newCompany,
|
||||
address: {
|
||||
...defaultForm().address,
|
||||
...(newCompany.address || {})
|
||||
}
|
||||
};
|
||||
} else {
|
||||
form.value = defaultForm();
|
||||
}
|
||||
const setValidationErrors = (backendErrors: Record<string, string[]>) => {
|
||||
loading.value = false;
|
||||
errors.value = {};
|
||||
loading.value = false; // Reset loading state
|
||||
}, { immediate: true });
|
||||
|
||||
// Watch for dialog visibility to reset loading
|
||||
watch(() => props.visible, (isVisible) => {
|
||||
if (!isVisible) {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Methods
|
||||
const validateForm = (): boolean => {
|
||||
errors.value = {};
|
||||
let isValid = true;
|
||||
|
||||
// RFC validation
|
||||
if (!form.value.rfc || form.value.rfc.trim() === '') {
|
||||
errors.value.rfc = 'El RFC es obligatorio';
|
||||
isValid = false;
|
||||
} else if (form.value.rfc.length < 12 || form.value.rfc.length > 13) {
|
||||
errors.value.rfc = 'El RFC debe tener 12 o 13 caracteres';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Company name validation
|
||||
if (!form.value.company_name || form.value.company_name.trim() === '') {
|
||||
errors.value.company_name = 'La razón social es obligatoria';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// VAT rate validation
|
||||
if (form.value.vat_rate === null || form.value.vat_rate === undefined) {
|
||||
errors.value.vat_rate = 'La tasa de IVA es obligatoria';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Address validations
|
||||
if (!form.value.address.country || form.value.address.country.trim() === '') {
|
||||
errors.value.country = 'El país es obligatorio';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.postal_code || form.value.address.postal_code.trim() === '') {
|
||||
errors.value.postal_code = 'El código postal es obligatorio';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.state || form.value.address.state.trim() === '') {
|
||||
errors.value.state = 'El estado es obligatorio';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.municipality || form.value.address.municipality.trim() === '') {
|
||||
errors.value.municipality = 'El municipio es obligatorio';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.city || form.value.address.city.trim() === '') {
|
||||
errors.value.city = 'La ciudad es obligatoria';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.street || form.value.address.street.trim() === '') {
|
||||
errors.value.street = 'La calle es obligatoria';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!form.value.address.num_ext || form.value.address.num_ext.trim() === '') {
|
||||
errors.value.num_ext = 'El número exterior es obligatorio';
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
Object.keys(backendErrors).forEach((key) => {
|
||||
const firstError = backendErrors[key]?.[0];
|
||||
if (firstError) {
|
||||
errors.value[key] = firstError;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const resetSubmitting = () => {
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setValidationErrors,
|
||||
resetSubmitting,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.company,
|
||||
(newCompany) => {
|
||||
const primaryDomain = newCompany?.primary_domain ?? newCompany?.domains?.[0]?.domain ?? '';
|
||||
form.value = toTenantFormData({
|
||||
id: newCompany?.id,
|
||||
company_name: newCompany?.company_name,
|
||||
rfc: newCompany?.rfc,
|
||||
email: newCompany?.email,
|
||||
primary_domain: primaryDomain,
|
||||
curp: newCompany?.curp ?? '',
|
||||
phone: newCompany?.phone ?? '',
|
||||
legal_representative: newCompany?.legal_representative ?? '',
|
||||
tax_regime: newCompany?.tax_regime ?? '',
|
||||
is_active: newCompany?.is_active ?? true,
|
||||
vat_rate: newCompany?.vat_rate ?? 0.0,
|
||||
isr_withholding: newCompany?.isr_withholding ?? 0.0,
|
||||
vat_withholding: newCompany?.vat_withholding ?? 0.0,
|
||||
additional_tax: newCompany?.additional_tax ?? 0.0,
|
||||
});
|
||||
|
||||
errors.value = {};
|
||||
loading.value = false;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (!visible) {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isValidEmail = (email: string): boolean => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
|
||||
const validateForm = (): boolean => {
|
||||
errors.value = {};
|
||||
let valid = true;
|
||||
|
||||
if (!form.value.company_name.trim()) {
|
||||
errors.value.company_name = 'La razón social es obligatoria';
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (!form.value.rfc.trim()) {
|
||||
errors.value.rfc = 'El RFC es obligatorio';
|
||||
valid = false;
|
||||
} else if (form.value.rfc.trim().length > 13) {
|
||||
errors.value.rfc = 'El RFC no puede exceder 13 caracteres';
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (!form.value.email.trim()) {
|
||||
errors.value.email = 'El email es obligatorio';
|
||||
valid = false;
|
||||
} else if (!isValidEmail(form.value.email.trim())) {
|
||||
errors.value.email = 'Ingresa un email válido';
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (!isEditMode.value && !form.value.primary_domain.trim()) {
|
||||
errors.value.primary_domain = 'El dominio primario es obligatorio';
|
||||
valid = false;
|
||||
}
|
||||
|
||||
return valid;
|
||||
};
|
||||
|
||||
const onFileChange = (event: Event, field: 'certificate_cer_file' | 'certificate_key_file') => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0] ?? null;
|
||||
form.value[field] = file;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
// Convert string values to uppercase for RFC and CURP
|
||||
const formData = {
|
||||
...form.value,
|
||||
rfc: form.value.rfc.toUpperCase(),
|
||||
curp: form.value.curp ? form.value.curp.toUpperCase() : null,
|
||||
};
|
||||
|
||||
emit('save', formData);
|
||||
|
||||
// El loading se mantendrá hasta que el padre cierre el diálogo
|
||||
// o maneje el error
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
loading.value = false;
|
||||
}
|
||||
emit('save', {
|
||||
...form.value,
|
||||
rfc: form.value.rfc.trim().toUpperCase(),
|
||||
curp: form.value.curp.trim().toUpperCase(),
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
form.value = defaultForm();
|
||||
form.value = toTenantFormData();
|
||||
errors.value = {};
|
||||
loading.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -426,4 +366,4 @@ const handleClose = () => {
|
||||
.space-y-6 > * + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
114
src/modules/catalog/components/companies/companies.mapper.ts
Normal file
114
src/modules/catalog/components/companies/companies.mapper.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import type { CreateTenantPayload, TenantFormData, UpdateTenantPayload } from './companies.types';
|
||||
|
||||
const appendIfNotEmpty = (formData: FormData, key: string, value: string | number | null | undefined) => {
|
||||
if (value === null || value === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalized = String(value).trim();
|
||||
if (normalized.length > 0) {
|
||||
formData.append(key, normalized);
|
||||
}
|
||||
};
|
||||
|
||||
const appendNumericIfDefined = (formData: FormData, key: string, value: number | null | undefined) => {
|
||||
if (value === null || value === undefined || Number.isNaN(value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append(key, String(value));
|
||||
};
|
||||
|
||||
const appendFileIfPresent = (formData: FormData, key: string, value: File | null | undefined) => {
|
||||
if (value instanceof File) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
};
|
||||
|
||||
export const buildCreateTenantPayload = (data: TenantFormData): CreateTenantPayload => ({
|
||||
company_name: data.company_name.trim(),
|
||||
rfc: data.rfc.trim().toUpperCase(),
|
||||
email: data.email.trim(),
|
||||
primary_domain: data.primary_domain.trim(),
|
||||
curp: data.curp.trim().toUpperCase(),
|
||||
phone: data.phone.trim(),
|
||||
legal_representative: data.legal_representative.trim(),
|
||||
tax_regime: data.tax_regime.trim(),
|
||||
is_active: data.is_active,
|
||||
vat_rate: data.vat_rate,
|
||||
isr_withholding: data.isr_withholding,
|
||||
vat_withholding: data.vat_withholding,
|
||||
additional_tax: data.additional_tax,
|
||||
certificate_password: data.certificate_password,
|
||||
certificate_cer_file: data.certificate_cer_file,
|
||||
certificate_key_file: data.certificate_key_file,
|
||||
});
|
||||
|
||||
export const buildUpdateTenantPayload = (data: TenantFormData): UpdateTenantPayload => ({
|
||||
company_name: data.company_name.trim(),
|
||||
rfc: data.rfc.trim().toUpperCase(),
|
||||
email: data.email.trim(),
|
||||
primary_domain: data.primary_domain.trim() || undefined,
|
||||
curp: data.curp.trim().toUpperCase(),
|
||||
phone: data.phone.trim(),
|
||||
legal_representative: data.legal_representative.trim(),
|
||||
tax_regime: data.tax_regime.trim(),
|
||||
is_active: data.is_active,
|
||||
vat_rate: data.vat_rate,
|
||||
isr_withholding: data.isr_withholding,
|
||||
vat_withholding: data.vat_withholding,
|
||||
additional_tax: data.additional_tax,
|
||||
certificate_password: data.certificate_password,
|
||||
certificate_cer_file: data.certificate_cer_file,
|
||||
certificate_key_file: data.certificate_key_file,
|
||||
});
|
||||
|
||||
export const toTenantFormData = (data?: Partial<TenantFormData>): TenantFormData => ({
|
||||
id: data?.id,
|
||||
company_name: data?.company_name ?? '',
|
||||
rfc: data?.rfc ?? '',
|
||||
email: data?.email ?? '',
|
||||
primary_domain: data?.primary_domain ?? '',
|
||||
curp: data?.curp ?? '',
|
||||
phone: data?.phone ?? '',
|
||||
legal_representative: data?.legal_representative ?? '',
|
||||
tax_regime: data?.tax_regime ?? '',
|
||||
is_active: data?.is_active ?? true,
|
||||
vat_rate: data?.vat_rate ?? 0.0,
|
||||
isr_withholding: data?.isr_withholding ?? 0.0,
|
||||
vat_withholding: data?.vat_withholding ?? 0.0,
|
||||
additional_tax: data?.additional_tax ?? 0.0,
|
||||
certificate_password: data?.certificate_password ?? '',
|
||||
certificate_cer_file: null,
|
||||
certificate_key_file: null,
|
||||
});
|
||||
|
||||
export const tenantPayloadToFormData = (
|
||||
data: CreateTenantPayload | UpdateTenantPayload,
|
||||
options?: { forcePut?: boolean }
|
||||
): FormData => {
|
||||
const formData = new FormData();
|
||||
|
||||
if (options?.forcePut) {
|
||||
formData.append('_method', 'PUT');
|
||||
}
|
||||
|
||||
appendIfNotEmpty(formData, 'company_name', data.company_name);
|
||||
appendIfNotEmpty(formData, 'rfc', data.rfc);
|
||||
appendIfNotEmpty(formData, 'email', data.email);
|
||||
appendIfNotEmpty(formData, 'primary_domain', data.primary_domain);
|
||||
appendIfNotEmpty(formData, 'curp', data.curp);
|
||||
appendIfNotEmpty(formData, 'phone', data.phone);
|
||||
appendIfNotEmpty(formData, 'legal_representative', data.legal_representative);
|
||||
appendIfNotEmpty(formData, 'tax_regime', data.tax_regime);
|
||||
appendNumericIfDefined(formData, 'vat_rate', data.vat_rate);
|
||||
appendNumericIfDefined(formData, 'isr_withholding', data.isr_withholding);
|
||||
appendNumericIfDefined(formData, 'vat_withholding', data.vat_withholding);
|
||||
appendNumericIfDefined(formData, 'additional_tax', data.additional_tax);
|
||||
appendIfNotEmpty(formData, 'certificate_password', data.certificate_password);
|
||||
formData.append('is_active', data.is_active ? '1' : '0');
|
||||
appendFileIfPresent(formData, 'certificate_cer_file', data.certificate_cer_file);
|
||||
appendFileIfPresent(formData, 'certificate_key_file', data.certificate_key_file);
|
||||
|
||||
return formData;
|
||||
};
|
||||
@ -1,123 +1,79 @@
|
||||
import api from '@/services/api';
|
||||
import type {
|
||||
Company,
|
||||
CompanyCreateResponse,
|
||||
CompanyFormData,
|
||||
CompanyQueryParams,
|
||||
PaginatedResponse
|
||||
} from './companies.types';
|
||||
|
||||
|
||||
export class CompanyService {
|
||||
import {
|
||||
buildCreateTenantPayload,
|
||||
buildUpdateTenantPayload,
|
||||
tenantPayloadToFormData,
|
||||
} from './companies.mapper';
|
||||
import type { CompaniesPagination, TenantFormData } from './companies.types';
|
||||
|
||||
/**
|
||||
* Servicio para obtener todas las empresas (tenants) con paginación.
|
||||
*/
|
||||
export class CompaniesService {
|
||||
/**
|
||||
* Obtener todas las empresas con paginación y filtros opcionales
|
||||
* Obtiene todas las empresas del sistema.
|
||||
* @returns Promesa con la respuesta paginada de empresas
|
||||
*/
|
||||
async getAll(params?: CompanyQueryParams): Promise<PaginatedResponse<Company> | Company[]> {
|
||||
public async getAll(page = 1): Promise<CompaniesPagination> {
|
||||
try {
|
||||
const response = await api.get('api/catalogs/companies', { params });
|
||||
|
||||
// Si la respuesta tiene paginación, devolver el objeto completo
|
||||
if (response.data.current_page !== undefined) {
|
||||
return response.data as PaginatedResponse<Company>;
|
||||
}
|
||||
|
||||
// Si no tiene paginación, devolver solo el array de data
|
||||
return response.data.data as Company[];
|
||||
} catch (error: any) {
|
||||
const response = await api.get('/api/admin/admin/tenants', {
|
||||
params: { page },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error al obtener empresas:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtener una empresa por ID
|
||||
* Crea una empresa (tenant) usando multipart/form-data.
|
||||
*/
|
||||
async getById(id: number): Promise<Company> {
|
||||
public async create(data: TenantFormData): Promise<void> {
|
||||
try {
|
||||
const response = await api.get(`api/catalogs/companies/${id}`);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error(`Error al obtener empresa con ID ${id}:`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Crear una nueva empresa
|
||||
*/
|
||||
async create(data: CompanyFormData): Promise<CompanyCreateResponse> {
|
||||
try {
|
||||
const response = await api.post('api/catalogs/companies', data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error('Error al crear empresa:', error);
|
||||
// Mejorar el mensaje de error si viene del backend
|
||||
if (error.response?.data) {
|
||||
throw {
|
||||
...error,
|
||||
message: error.response.data.message || error.response.data.error || 'Error al crear la empresa'
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Actualizar una empresa existente
|
||||
*/
|
||||
async update(id: number, data: Partial<CompanyFormData>): Promise<Company> {
|
||||
try {
|
||||
const response = await api.put(`api/catalogs/companies/${id}`, data);
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
console.error(`Error al actualizar empresa con ID ${id}:`, error);
|
||||
// Mejorar el mensaje de error si viene del backend
|
||||
if (error.response?.data) {
|
||||
throw {
|
||||
...error,
|
||||
message: error.response.data.message || error.response.data.error || 'Error al actualizar la empresa'
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Eliminar una empresa
|
||||
*/
|
||||
async delete(id: number): Promise<void> {
|
||||
try {
|
||||
await api.delete(`api/catalogs/companies/${id}`);
|
||||
} catch (error: any) {
|
||||
console.error(`Error al eliminar empresa con ID ${id}:`, error);
|
||||
// Mejorar el mensaje de error si viene del backend
|
||||
if (error.response?.data) {
|
||||
throw {
|
||||
...error,
|
||||
message: error.response.data.message || error.response.data.error || 'Error al eliminar la empresa'
|
||||
};
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Buscar empresas por múltiples criterios
|
||||
*/
|
||||
async search(params: CompanyQueryParams): Promise<Company[]> {
|
||||
try {
|
||||
const response = await api.get('api/catalogs/companies', {
|
||||
params: { ...params, paginate: false }
|
||||
const payload = buildCreateTenantPayload(data);
|
||||
const formData = tenantPayloadToFormData(payload);
|
||||
await api.post('/api/admin/admin/tenants', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
return response.data.data;
|
||||
} catch (error: any) {
|
||||
console.error('Error al buscar empresas:', error);
|
||||
} catch (error) {
|
||||
console.error('Error al crear empresa:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* Actualiza una empresa (tenant) usando POST + _method=PUT para multipart.
|
||||
*/
|
||||
public async update(id: number, data: TenantFormData): Promise<void> {
|
||||
try {
|
||||
const payload = buildUpdateTenantPayload(data);
|
||||
const formData = tenantPayloadToFormData(payload, { forcePut: true });
|
||||
await api.post(`/api/admin/admin/tenants/${id}`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error al actualizar empresa:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Exportar una instancia única del servicio
|
||||
export const companyService = new CompanyService();
|
||||
/**
|
||||
* Elimina una empresa por su ID.
|
||||
* @param id ID de la empresa
|
||||
*/
|
||||
public async delete(id: number): Promise<void> {
|
||||
try {
|
||||
await api.delete(`/api/admin/admin/tenants/${id}`);
|
||||
} catch (error) {
|
||||
console.error('Error al eliminar empresa:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const companiesService = new CompaniesService();
|
||||
|
||||
@ -1,72 +1,71 @@
|
||||
export interface CompanyAddress {
|
||||
country: string;
|
||||
postal_code: string;
|
||||
state: string;
|
||||
municipality: string;
|
||||
city: string;
|
||||
street: string;
|
||||
num_ext: string;
|
||||
num_int?: string;
|
||||
export interface Company {
|
||||
id: number;
|
||||
rfc: string;
|
||||
curp?: string | null;
|
||||
vat_rate?: number | null;
|
||||
isr_withholding?: number | null;
|
||||
vat_withholding?: number | null;
|
||||
additional_tax?: number | null;
|
||||
company_name: string;
|
||||
email?: string;
|
||||
primary_domain?: string;
|
||||
phone?: string | null;
|
||||
legal_representative?: string | null;
|
||||
tax_regime?: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
deleted_at?: string | null;
|
||||
data?: Record<string, unknown> | null;
|
||||
is_active: boolean;
|
||||
trial_ends_at?: string | null;
|
||||
subscribed_until?: string | null;
|
||||
domains_count: number;
|
||||
domains: CompanyDomain[];
|
||||
}
|
||||
|
||||
export interface Company {
|
||||
export interface CompanyDomain {
|
||||
id?: number;
|
||||
domain: string;
|
||||
}
|
||||
|
||||
export interface TenantFormData {
|
||||
id?: number;
|
||||
rfc: string;
|
||||
curp?: string;
|
||||
company_name: string;
|
||||
rfc: string;
|
||||
email: string;
|
||||
primary_domain: string;
|
||||
curp: string;
|
||||
phone: string;
|
||||
legal_representative: string;
|
||||
tax_regime: string;
|
||||
is_active: boolean;
|
||||
vat_rate: number;
|
||||
isr_withholding: number;
|
||||
vat_withholding: number;
|
||||
additional_tax: number;
|
||||
address: CompanyAddress;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
certificate_password: string;
|
||||
certificate_cer_file: File | null;
|
||||
certificate_key_file: File | null;
|
||||
}
|
||||
|
||||
export interface CompanyCreateResponse{
|
||||
data: Company;
|
||||
}
|
||||
export type CreateTenantPayload = Omit<TenantFormData, 'id'>;
|
||||
|
||||
export interface CompanyFormData extends Omit<Company, 'id' | 'created_at' | 'updated_at'> {}
|
||||
export type UpdateTenantPayload = Omit<TenantFormData, 'id' | 'primary_domain'> & {
|
||||
primary_domain?: string;
|
||||
};
|
||||
|
||||
export interface CompanyStats {
|
||||
total: number;
|
||||
active: number;
|
||||
pending: number;
|
||||
monthlyIncrease: number;
|
||||
activePercentage: number;
|
||||
}
|
||||
|
||||
export interface PaginationLink {
|
||||
url: string | null;
|
||||
label: string;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
export interface CompaniesPagination {
|
||||
current_page: number;
|
||||
data: T[];
|
||||
data: Company[];
|
||||
first_page_url: string;
|
||||
from: number;
|
||||
last_page: number;
|
||||
last_page_url: string;
|
||||
links: PaginationLink[];
|
||||
next_page_url: string | null;
|
||||
links: Array<{ url: string | null; label: string; active: boolean }>;
|
||||
next_page_url?: string | null;
|
||||
path: string;
|
||||
per_page: number;
|
||||
prev_page_url: string | null;
|
||||
prev_page_url?: string | null;
|
||||
to: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface CompanyListResponse {
|
||||
data: Company[];
|
||||
}
|
||||
|
||||
export interface CompanyQueryParams {
|
||||
paginate?: boolean;
|
||||
rfc?: string;
|
||||
curp?: string;
|
||||
company_name?: string;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
@ -12,14 +12,18 @@ import Tag from 'primevue/tag';
|
||||
import Toast from 'primevue/toast';
|
||||
import ConfirmDialog from 'primevue/confirmdialog';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Select from 'primevue/select';
|
||||
import { useUnitOfMeasureStore } from '../../stores/unitOfMeasureStore';
|
||||
import UnitsForm from './UnitsForm.vue';
|
||||
import type { UnitOfMeasure, CreateUnitOfMeasureData } from '../../types/unit-measure.interfaces';
|
||||
import { useAuth } from '@/modules/auth/composables/useAuth';
|
||||
|
||||
const router = useRouter();
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
const unitStore = useUnitOfMeasureStore();
|
||||
const { hasPermission } = useAuth();
|
||||
|
||||
// Breadcrumb
|
||||
const breadcrumbItems = ref([
|
||||
@ -36,62 +40,176 @@ const home = ref({
|
||||
const showDialog = ref(false);
|
||||
const isEditing = ref(false);
|
||||
const selectedUnit = ref<UnitOfMeasure | null>(null);
|
||||
const unitsFormRef = ref<InstanceType<typeof UnitsForm> | null>(null);
|
||||
const search = ref('');
|
||||
const statusFilter = ref<'all' | 'active' | 'inactive'>('all');
|
||||
|
||||
// Computed
|
||||
const units = computed(() => unitStore.units);
|
||||
const loading = computed(() => unitStore.loading);
|
||||
const statusFilterOptions = [
|
||||
{ label: 'Todas', value: 'all' },
|
||||
{ label: 'Activas', value: 'active' },
|
||||
{ label: 'Inactivas', value: 'inactive' },
|
||||
];
|
||||
|
||||
const getStatusConfig = (isActive: number) => {
|
||||
return isActive === 1
|
||||
const getStatusConfig = (isActive: boolean) => {
|
||||
return isActive
|
||||
? { label: 'Activa', severity: 'success' }
|
||||
: { label: 'Inactiva', severity: 'secondary' };
|
||||
};
|
||||
|
||||
const canViewUnits = computed(() =>
|
||||
hasPermission([
|
||||
'units-of-measure.index',
|
||||
'units-of-measure.show',
|
||||
'units-of-measure.store',
|
||||
'units-of-measure.update',
|
||||
'units-of-measure.destroy',
|
||||
])
|
||||
);
|
||||
const canCreateUnit = computed(() => hasPermission('units-of-measure.store'));
|
||||
const canUpdateUnit = computed(() => hasPermission('units-of-measure.update'));
|
||||
const canDeleteUnit = computed(() => hasPermission('units-of-measure.destroy'));
|
||||
|
||||
// Methods
|
||||
const buildFilters = () => ({
|
||||
paginate: true,
|
||||
per_page: 25,
|
||||
search: search.value.trim(),
|
||||
is_active: statusFilter.value === 'all' ? undefined : statusFilter.value === 'active',
|
||||
});
|
||||
|
||||
const loadUnits = async (force = false) => {
|
||||
if (!canViewUnits.value) {
|
||||
unitStore.clearUnits();
|
||||
return;
|
||||
}
|
||||
|
||||
await unitStore.fetchUnits({
|
||||
force,
|
||||
...buildFilters(),
|
||||
});
|
||||
};
|
||||
|
||||
const openCreateDialog = () => {
|
||||
if (!canCreateUnit.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permisos para crear unidades de medida.',
|
||||
life: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
isEditing.value = false;
|
||||
selectedUnit.value = null;
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const openEditDialog = (unit: UnitOfMeasure) => {
|
||||
if (!canUpdateUnit.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permisos para actualizar unidades de medida.',
|
||||
life: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
isEditing.value = true;
|
||||
selectedUnit.value = unit;
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const handleCreateUnit = async (data: CreateUnitOfMeasureData) => {
|
||||
await unitStore.createUnit(data);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Creación Exitosa',
|
||||
detail: 'La unidad de medida ha sido creada correctamente.',
|
||||
life: 3000,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateUnit = async (id: number, data: CreateUnitOfMeasureData) => {
|
||||
await unitStore.updateUnit(id, data);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Actualización Exitosa',
|
||||
detail: 'La unidad de medida ha sido actualizada correctamente.',
|
||||
life: 3000,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveUnit = async (data: CreateUnitOfMeasureData) => {
|
||||
try {
|
||||
if (isEditing.value && selectedUnit.value) {
|
||||
await unitStore.updateUnit(selectedUnit.value.id, data);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Actualización Exitosa',
|
||||
detail: 'La unidad de medida ha sido actualizada correctamente.',
|
||||
life: 3000
|
||||
});
|
||||
if (!canUpdateUnit.value) {
|
||||
throw new Error('without-update-permission');
|
||||
}
|
||||
await handleUpdateUnit(selectedUnit.value.id, data);
|
||||
} else {
|
||||
await unitStore.createUnit(data);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Creación Exitosa',
|
||||
detail: 'La unidad de medida ha sido creada correctamente.',
|
||||
life: 3000
|
||||
});
|
||||
if (!canCreateUnit.value) {
|
||||
throw new Error('without-create-permission');
|
||||
}
|
||||
await handleCreateUnit(data);
|
||||
}
|
||||
|
||||
showDialog.value = false;
|
||||
selectedUnit.value = null;
|
||||
unitsFormRef.value?.resetSubmitting();
|
||||
} catch (error) {
|
||||
console.error('Error saving unit:', error);
|
||||
|
||||
const requestError = error as {
|
||||
message?: string;
|
||||
response?: {
|
||||
status?: number;
|
||||
data?: {
|
||||
errors?: Record<string, string[]>;
|
||||
message?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
if (requestError.response?.status === 422 && requestError.response.data?.errors) {
|
||||
unitsFormRef.value?.setValidationErrors(requestError.response.data.errors);
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Errores de validación',
|
||||
detail: 'Corrige los campos marcados para continuar.',
|
||||
life: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
unitsFormRef.value?.resetSubmitting();
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'No se pudo guardar la unidad de medida. Por favor, intenta nuevamente.',
|
||||
life: 3000
|
||||
detail:
|
||||
requestError.response?.data?.message ||
|
||||
(requestError.message === 'without-update-permission'
|
||||
? 'No tienes permisos para actualizar unidades de medida.'
|
||||
: requestError.message === 'without-create-permission'
|
||||
? 'No tienes permisos para crear unidades de medida.'
|
||||
: 'No se pudo guardar la unidad de medida. Por favor, intenta nuevamente.'),
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (unit: UnitOfMeasure) => {
|
||||
if (!canDeleteUnit.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permisos para eliminar unidades de medida.',
|
||||
life: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
confirm.require({
|
||||
message: `¿Estás seguro de eliminar la unidad de medida "${unit.name}"?`,
|
||||
header: 'Confirmar Eliminación',
|
||||
@ -104,13 +222,23 @@ const confirmDelete = (unit: UnitOfMeasure) => {
|
||||
};
|
||||
|
||||
const deleteUnit = async (id: number) => {
|
||||
if (!canDeleteUnit.value) {
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Sin permisos',
|
||||
detail: 'No tienes permisos para eliminar unidades de medida.',
|
||||
life: 4000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await unitStore.deleteUnit(id);
|
||||
await loadUnits(true);
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Eliminación Exitosa',
|
||||
detail: 'La unidad de medida ha sido eliminada correctamente.',
|
||||
life: 3000
|
||||
life: 3000,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error deleting unit:', error);
|
||||
@ -118,15 +246,32 @@ const deleteUnit = async (id: number) => {
|
||||
severity: 'error',
|
||||
summary: 'Error',
|
||||
detail: 'No se pudo eliminar la unidad de medida. Puede estar en uso.',
|
||||
life: 3000
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
await unitStore.fetchUnits();
|
||||
});
|
||||
const applyFilters = async () => {
|
||||
await loadUnits(true);
|
||||
};
|
||||
|
||||
const clearFilters = async () => {
|
||||
search.value = '';
|
||||
statusFilter.value = 'all';
|
||||
await loadUnits(true);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => canViewUnits.value,
|
||||
async (allowed) => {
|
||||
if (allowed) {
|
||||
await loadUnits();
|
||||
} else {
|
||||
unitStore.clearUnits();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -159,6 +304,7 @@ onMounted(async () => {
|
||||
Unidades de Medida
|
||||
</h1>
|
||||
<Button
|
||||
v-if="canCreateUnit"
|
||||
label="Nueva Unidad"
|
||||
icon="pi pi-plus"
|
||||
@click="openCreateDialog"
|
||||
@ -167,8 +313,44 @@ onMounted(async () => {
|
||||
</div>
|
||||
|
||||
<!-- Main Card -->
|
||||
<Card>
|
||||
<Card v-if="canViewUnits">
|
||||
<template #content>
|
||||
<div class="flex flex-col md:flex-row md:items-end gap-3 mb-4">
|
||||
<div class="flex-1">
|
||||
<label for="unit-search" class="block text-sm font-medium mb-2">Buscar</label>
|
||||
<InputText
|
||||
id="unit-search"
|
||||
v-model="search"
|
||||
class="w-full"
|
||||
placeholder="Buscar por nombre o abreviatura"
|
||||
@keyup.enter="applyFilters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-64">
|
||||
<label for="status-filter" class="block text-sm font-medium mb-2">Estado</label>
|
||||
<Select
|
||||
id="status-filter"
|
||||
v-model="statusFilter"
|
||||
class="w-full"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
:options="statusFilterOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button label="Filtrar" icon="pi pi-search" @click="applyFilters" />
|
||||
<Button
|
||||
label="Limpiar"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
outlined
|
||||
@click="clearFilters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && units.length === 0" class="flex justify-center items-center py-12">
|
||||
<ProgressSpinner
|
||||
@ -236,6 +418,7 @@ onMounted(async () => {
|
||||
<template #body="slotProps">
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-if="canUpdateUnit"
|
||||
icon="pi pi-pencil"
|
||||
text
|
||||
rounded
|
||||
@ -244,6 +427,7 @@ onMounted(async () => {
|
||||
v-tooltip.top="'Editar'"
|
||||
/>
|
||||
<Button
|
||||
v-if="canDeleteUnit"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
rounded
|
||||
@ -264,8 +448,18 @@ onMounted(async () => {
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card v-else>
|
||||
<template #content>
|
||||
<div class="text-center py-10 text-surface-500 dark:text-surface-400">
|
||||
<i class="pi pi-lock text-4xl mb-3"></i>
|
||||
<p>No tienes permisos para visualizar este módulo.</p>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Create/Edit Form Dialog -->
|
||||
<UnitsForm
|
||||
ref="unitsFormRef"
|
||||
v-model:visible="showDialog"
|
||||
:unit="selectedUnit"
|
||||
:is-editing="isEditing"
|
||||
|
||||
@ -31,12 +31,14 @@ const emit = defineEmits<Emits>();
|
||||
const formData = ref<CreateUnitOfMeasureData>({
|
||||
name: '',
|
||||
abbreviation: '',
|
||||
code_sat: 1,
|
||||
is_active: 1
|
||||
code_sat: null,
|
||||
is_active: true
|
||||
});
|
||||
|
||||
// Estado interno del switch (boolean para el UI)
|
||||
const isActiveSwitch = ref(true);
|
||||
const loading = ref(false);
|
||||
const errors = ref<Record<string, string>>({});
|
||||
|
||||
// SAT Units
|
||||
const satUnits = ref<SatUnit[]>([]);
|
||||
@ -58,7 +60,7 @@ const dialogTitle = computed(() =>
|
||||
);
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return !!(formData.value.name && formData.value.abbreviation);
|
||||
return !!formData.value.name?.trim();
|
||||
});
|
||||
|
||||
const emptyMessage = computed(() => {
|
||||
@ -99,7 +101,7 @@ const loadSatUnits = async (search: string) => {
|
||||
};
|
||||
|
||||
// Debounced search
|
||||
const handleSearchChange = (event: any) => {
|
||||
const handleSearchChange = (event: { value?: string }) => {
|
||||
const query = event.value || '';
|
||||
searchQuery.value = query;
|
||||
|
||||
@ -120,9 +122,11 @@ const resetForm = () => {
|
||||
name: '',
|
||||
abbreviation: '',
|
||||
code_sat: null,
|
||||
is_active: 1
|
||||
is_active: true
|
||||
};
|
||||
isActiveSwitch.value = true;
|
||||
errors.value = {};
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// Watch para actualizar el formulario cuando cambie la unidad
|
||||
@ -134,7 +138,7 @@ watch(() => props.unit, (newUnit) => {
|
||||
code_sat: newUnit.code_sat,
|
||||
is_active: newUnit.is_active
|
||||
};
|
||||
isActiveSwitch.value = newUnit.is_active === 1;
|
||||
isActiveSwitch.value = newUnit.is_active;
|
||||
|
||||
// Precargar la unidad SAT actual en el dropdown
|
||||
if (newUnit.sat_unit) {
|
||||
@ -152,13 +156,57 @@ const handleClose = () => {
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// Convertir el switch boolean a number para el backend
|
||||
formData.value.is_active = isActiveSwitch.value ? 1 : 0;
|
||||
|
||||
emit('save', { ...formData.value });
|
||||
handleClose();
|
||||
const validateForm = (): boolean => {
|
||||
errors.value = {};
|
||||
|
||||
if (!formData.value.name?.trim()) {
|
||||
errors.value.name = 'El nombre es obligatorio';
|
||||
} else if (formData.value.name.trim().length > 50) {
|
||||
errors.value.name = 'El nombre no puede exceder 50 caracteres';
|
||||
}
|
||||
|
||||
if (formData.value.abbreviation && formData.value.abbreviation.trim().length > 10) {
|
||||
errors.value.abbreviation = 'La abreviatura no puede exceder 10 caracteres';
|
||||
}
|
||||
|
||||
return Object.keys(errors.value).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
formData.value.is_active = isActiveSwitch.value;
|
||||
|
||||
emit('save', {
|
||||
...formData.value,
|
||||
name: formData.value.name.trim(),
|
||||
abbreviation: formData.value.abbreviation?.trim() || undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const setValidationErrors = (backendErrors: Record<string, string[]>) => {
|
||||
loading.value = false;
|
||||
errors.value = {};
|
||||
|
||||
Object.keys(backendErrors).forEach((key) => {
|
||||
const firstError = backendErrors[key]?.[0];
|
||||
if (firstError) {
|
||||
errors.value[key] = firstError;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const resetSubmitting = () => {
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setValidationErrors,
|
||||
resetSubmitting,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -183,7 +231,9 @@ const handleSave = () => {
|
||||
class="w-full"
|
||||
placeholder="Ej: PIEZA, KILOGRAMO, METRO"
|
||||
:required="true"
|
||||
:class="{ 'p-invalid': errors.name }"
|
||||
/>
|
||||
<small v-if="errors.name" class="p-error">{{ errors.name }}</small>
|
||||
</div>
|
||||
|
||||
<!-- Abbreviation -->
|
||||
@ -196,8 +246,9 @@ const handleSave = () => {
|
||||
v-model="formData.abbreviation"
|
||||
class="w-full"
|
||||
placeholder="Ej: PZA, kg, m"
|
||||
:required="true"
|
||||
:class="{ 'p-invalid': errors.abbreviation }"
|
||||
/>
|
||||
<small v-if="errors.abbreviation" class="p-error">{{ errors.abbreviation }}</small>
|
||||
</div>
|
||||
|
||||
<!-- Code SAT -->
|
||||
@ -216,10 +267,12 @@ const handleSave = () => {
|
||||
class="w-full"
|
||||
:filter="true"
|
||||
filterPlaceholder="Buscar unidad SAT"
|
||||
:showClear="false"
|
||||
:showClear="true"
|
||||
@filter="handleSearchChange"
|
||||
:emptyFilterMessage="emptyMessage"
|
||||
:class="{ 'p-invalid': errors.code_sat }"
|
||||
/>
|
||||
<small v-if="errors.code_sat" class="p-error">{{ errors.code_sat }}</small>
|
||||
<small class="text-surface-500 dark:text-surface-400">
|
||||
Unidad del catálogo SAT
|
||||
</small>
|
||||
@ -253,6 +306,7 @@ const handleSave = () => {
|
||||
<Button
|
||||
:label="isEditing ? 'Actualizar' : 'Crear'"
|
||||
:disabled="!isFormValid"
|
||||
:loading="loading"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,14 @@ export const satUnitsService = {
|
||||
* Get all SAT units with search filter
|
||||
*/
|
||||
async getSatUnits(search: string = ''): Promise<SatUnitsResponse> {
|
||||
const response = await api.get(`/api/sat/units?search=${search}`);
|
||||
return response.data;
|
||||
try {
|
||||
const response = await api.get('/api/sat/units', {
|
||||
params: { search },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error al obtener unidades SAT:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
40
src/modules/catalog/services/unit-measure.mapper.ts
Normal file
40
src/modules/catalog/services/unit-measure.mapper.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import type {
|
||||
CreateUnitOfMeasureData,
|
||||
UnitOfMeasure,
|
||||
UnitOfMeasureApi,
|
||||
UpdateUnitOfMeasureData,
|
||||
} from '../types/unit-measure.interfaces';
|
||||
|
||||
const toBoolean = (value: boolean | number | undefined): boolean => {
|
||||
if (typeof value === 'boolean') {
|
||||
return value;
|
||||
}
|
||||
|
||||
return value === 1;
|
||||
};
|
||||
|
||||
export const mapUnitFromApi = (apiUnit: UnitOfMeasureApi): UnitOfMeasure => ({
|
||||
id: apiUnit.id,
|
||||
name: apiUnit.name,
|
||||
abbreviation: apiUnit.abbreviation,
|
||||
is_active: toBoolean(apiUnit.is_active),
|
||||
created_at: apiUnit.created_at,
|
||||
updated_at: apiUnit.updated_at,
|
||||
deleted_at: apiUnit.deleted_at,
|
||||
code_sat: apiUnit.code_sat,
|
||||
sat_unit: apiUnit.sat_unit,
|
||||
});
|
||||
|
||||
export const mapCreatePayload = (data: CreateUnitOfMeasureData): CreateUnitOfMeasureData => ({
|
||||
name: data.name.trim(),
|
||||
abbreviation: data.abbreviation?.trim() || undefined,
|
||||
code_sat: data.code_sat ?? null,
|
||||
is_active: data.is_active ?? true,
|
||||
});
|
||||
|
||||
export const mapUpdatePayload = (data: UpdateUnitOfMeasureData): UpdateUnitOfMeasureData => ({
|
||||
name: data.name?.trim(),
|
||||
abbreviation: data.abbreviation?.trim() || undefined,
|
||||
code_sat: data.code_sat ?? null,
|
||||
is_active: data.is_active,
|
||||
});
|
||||
@ -1,52 +1,124 @@
|
||||
import api from '../../../services/api';
|
||||
import type {
|
||||
UnitOfMeasureApi,
|
||||
UnitOfMeasurePaginatedApiResponse,
|
||||
UnitOfMeasureUnpaginatedApiResponse,
|
||||
UnitOfMeasurePaginatedResponse,
|
||||
UnitOfMeasureUnpaginatedResponse,
|
||||
CreateUnitOfMeasureData,
|
||||
UpdateUnitOfMeasureData,
|
||||
SingleUnitOfMeasureResponse,
|
||||
UnitOfMeasureResponseById
|
||||
UnitOfMeasureResponseById,
|
||||
UnitOfMeasureQueryParams
|
||||
} from '../types/unit-measure.interfaces';
|
||||
import { mapCreatePayload, mapUnitFromApi, mapUpdatePayload } from './unit-measure.mapper';
|
||||
|
||||
const mapPaginatedResponse = (
|
||||
response: UnitOfMeasurePaginatedApiResponse
|
||||
): UnitOfMeasurePaginatedResponse => ({
|
||||
...response,
|
||||
data: response.data.map(mapUnitFromApi),
|
||||
});
|
||||
|
||||
const mapUnpaginatedResponse = (
|
||||
response: UnitOfMeasureUnpaginatedApiResponse
|
||||
): UnitOfMeasureUnpaginatedResponse => ({
|
||||
data: response.data.map(mapUnitFromApi),
|
||||
});
|
||||
|
||||
const mapSingleResponse = (response: { message: string; data: UnitOfMeasureApi }): SingleUnitOfMeasureResponse => ({
|
||||
message: response.message,
|
||||
data: mapUnitFromApi(response.data),
|
||||
});
|
||||
|
||||
|
||||
export const unitOfMeasureService = {
|
||||
/**
|
||||
* Get all units of measure with optional pagination and search
|
||||
*/
|
||||
async getUnits(paginate: boolean = true, search: string = ''): Promise<UnitOfMeasurePaginatedResponse | UnitOfMeasureUnpaginatedResponse> {
|
||||
const response = await api.get(`/api/catalogs/units-of-measure?paginate=${paginate}&search=${search}`);
|
||||
return response.data;
|
||||
async getUnits(params: UnitOfMeasureQueryParams = {}): Promise<UnitOfMeasurePaginatedResponse | UnitOfMeasureUnpaginatedResponse> {
|
||||
try {
|
||||
const {
|
||||
search = '',
|
||||
is_active,
|
||||
paginate = true,
|
||||
per_page,
|
||||
page,
|
||||
} = params;
|
||||
|
||||
const response = await api.get('/api/catalogs/units-of-measure', {
|
||||
params: {
|
||||
search,
|
||||
is_active,
|
||||
paginate,
|
||||
per_page,
|
||||
page,
|
||||
},
|
||||
});
|
||||
|
||||
if ('current_page' in response.data) {
|
||||
return mapPaginatedResponse(response.data as UnitOfMeasurePaginatedApiResponse);
|
||||
}
|
||||
|
||||
return mapUnpaginatedResponse(response.data as UnitOfMeasureUnpaginatedApiResponse);
|
||||
} catch (error) {
|
||||
console.error('Error al obtener unidades de medida:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a single unit of measure by ID
|
||||
*/
|
||||
async getUnitById(id: number): Promise<UnitOfMeasureResponseById> {
|
||||
const response = await api.get(`/api/catalogs/units-of-measure/${id}`);
|
||||
return response.data;
|
||||
try {
|
||||
const response = await api.get(`/api/catalogs/units-of-measure/${id}`);
|
||||
return {
|
||||
data: mapUnitFromApi((response.data as { data: UnitOfMeasureApi }).data),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error al obtener unidad de medida con id ${id}:`, error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a new unit of measure
|
||||
*/
|
||||
async createUnit(data: CreateUnitOfMeasureData): Promise<SingleUnitOfMeasureResponse> {
|
||||
const response = await api.post(`/api/catalogs/units-of-measure`, data);
|
||||
console.log('Create Unit response:', response);
|
||||
return response.data;
|
||||
try {
|
||||
const payload = mapCreatePayload(data);
|
||||
const response = await api.post('/api/catalogs/units-of-measure', payload);
|
||||
return mapSingleResponse(response.data as { message: string; data: UnitOfMeasureApi });
|
||||
} catch (error) {
|
||||
console.error('Error al crear unidad de medida:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update an existing unit of measure
|
||||
*/
|
||||
async updateUnit(id: number, data: UpdateUnitOfMeasureData): Promise<SingleUnitOfMeasureResponse> {
|
||||
const response = await api.put(`/api/catalogs/units-of-measure/${id}`, data);
|
||||
return response.data;
|
||||
try {
|
||||
const payload = mapUpdatePayload(data);
|
||||
const response = await api.put(`/api/catalogs/units-of-measure/${id}`, payload);
|
||||
return mapSingleResponse(response.data as { message: string; data: UnitOfMeasureApi });
|
||||
} catch (error) {
|
||||
console.error(`Error al actualizar unidad de medida con id ${id}:`, error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete a unit of measure
|
||||
*/
|
||||
async deleteUnit(id: number): Promise<void> {
|
||||
await api.delete(`/api/catalogs/units-of-measure/${id}`);
|
||||
try {
|
||||
await api.delete(`/api/catalogs/units-of-measure/${id}`);
|
||||
} catch (error) {
|
||||
console.error(`Error al eliminar unidad de medida con id ${id}:`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -4,23 +4,40 @@ import { unitOfMeasureService } from '../services/unit-measure.services';
|
||||
import type {
|
||||
UnitOfMeasure,
|
||||
CreateUnitOfMeasureData,
|
||||
UpdateUnitOfMeasureData
|
||||
UpdateUnitOfMeasureData,
|
||||
UnitOfMeasureQueryParams,
|
||||
UnitOfMeasurePaginatedResponse,
|
||||
UnitOfMeasureUnpaginatedResponse,
|
||||
} from '../types/unit-measure.interfaces';
|
||||
|
||||
interface FetchUnitsOptions extends UnitOfMeasureQueryParams {
|
||||
force?: boolean;
|
||||
}
|
||||
|
||||
const isPaginatedResponse = (
|
||||
response: UnitOfMeasurePaginatedResponse | UnitOfMeasureUnpaginatedResponse
|
||||
): response is UnitOfMeasurePaginatedResponse => 'current_page' in response;
|
||||
|
||||
export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
// State
|
||||
const units = ref<UnitOfMeasure[]>([]);
|
||||
const loading = ref(false);
|
||||
const loaded = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const lastFetchOptions = ref<UnitOfMeasureQueryParams>({
|
||||
paginate: true,
|
||||
search: '',
|
||||
page: 1,
|
||||
per_page: 10,
|
||||
});
|
||||
|
||||
// Getters
|
||||
const activeUnits = computed(() =>
|
||||
units.value.filter(unit => unit.is_active === 1)
|
||||
units.value.filter((unit) => unit.is_active)
|
||||
);
|
||||
|
||||
const inactiveUnits = computed(() =>
|
||||
units.value.filter(unit => unit.is_active === 0)
|
||||
units.value.filter((unit) => !unit.is_active)
|
||||
);
|
||||
|
||||
const unitCount = computed(() => units.value.length);
|
||||
@ -35,31 +52,35 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
});
|
||||
|
||||
// Actions
|
||||
const fetchUnits = async (force = false, paginate = true, search = '') => {
|
||||
// Si ya están cargados y no se fuerza la recarga, no hacer nada
|
||||
if (loaded.value && !force) {
|
||||
console.log('Units of measure already loaded from store');
|
||||
const fetchUnits = async (options: FetchUnitsOptions = {}) => {
|
||||
const {
|
||||
force = false,
|
||||
...queryOptions
|
||||
} = options;
|
||||
|
||||
if (loaded.value && !force && units.value.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedOptions: UnitOfMeasureQueryParams = {
|
||||
...lastFetchOptions.value,
|
||||
...queryOptions,
|
||||
};
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
const response = await unitOfMeasureService.getUnits(paginate, search);
|
||||
const response = await unitOfMeasureService.getUnits(normalizedOptions);
|
||||
|
||||
// Manejar respuesta paginada o no paginada
|
||||
if ('current_page' in response) {
|
||||
// Respuesta paginada
|
||||
if (isPaginatedResponse(response)) {
|
||||
units.value = response.data;
|
||||
} else {
|
||||
// Respuesta no paginada
|
||||
units.value = response.data;
|
||||
}
|
||||
|
||||
loaded.value = true;
|
||||
|
||||
console.log('Units of measure loaded into store:', units.value.length);
|
||||
lastFetchOptions.value = normalizedOptions;
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Error loading units of measure';
|
||||
console.error('Error in unit of measure store:', err);
|
||||
@ -69,8 +90,12 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
}
|
||||
};
|
||||
|
||||
const refreshUnits = () => {
|
||||
return fetchUnits(true);
|
||||
const refreshUnits = (overrides: UnitOfMeasureQueryParams = {}) => {
|
||||
return fetchUnits({
|
||||
force: true,
|
||||
...lastFetchOptions.value,
|
||||
...overrides,
|
||||
});
|
||||
};
|
||||
|
||||
const createUnit = async (data: CreateUnitOfMeasureData) => {
|
||||
@ -82,8 +107,6 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
|
||||
// Refrescar la lista después de crear
|
||||
await refreshUnits();
|
||||
|
||||
console.log('Unit of measure created successfully');
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Error creating unit of measure';
|
||||
console.error('Error creating unit of measure:', err);
|
||||
@ -102,8 +125,6 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
|
||||
// Refrescar la lista después de actualizar
|
||||
await refreshUnits();
|
||||
|
||||
console.log('Unit of measure updated successfully');
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Error updating unit of measure';
|
||||
console.error('Error updating unit of measure:', err);
|
||||
@ -122,8 +143,6 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
|
||||
// Refrescar la lista después de eliminar
|
||||
await refreshUnits();
|
||||
|
||||
console.log('Unit of measure deleted successfully');
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Error deleting unit of measure';
|
||||
console.error('Error deleting unit of measure:', err);
|
||||
@ -145,6 +164,7 @@ export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
|
||||
loading,
|
||||
loaded,
|
||||
error,
|
||||
lastFetchOptions,
|
||||
// Getters
|
||||
activeUnits,
|
||||
inactiveUnits,
|
||||
|
||||
@ -8,32 +8,50 @@ export interface SatUnit {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// Interface para la Unidad de Medida
|
||||
export interface UnitOfMeasureApi {
|
||||
id: number;
|
||||
name: string;
|
||||
abbreviation: string;
|
||||
is_active: boolean | number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
deleted_at: string | null;
|
||||
code_sat: number | null;
|
||||
sat_unit: SatUnit | null;
|
||||
}
|
||||
|
||||
export interface UnitOfMeasure {
|
||||
id: number;
|
||||
name: string;
|
||||
abbreviation: string;
|
||||
is_active: number;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
deleted_at: string | null;
|
||||
code_sat: number;
|
||||
sat_unit: SatUnit;
|
||||
code_sat: number | null;
|
||||
sat_unit: SatUnit | null;
|
||||
}
|
||||
|
||||
// Interfaces para crear y actualizar unidades de medida
|
||||
export interface CreateUnitOfMeasureData {
|
||||
name: string;
|
||||
abbreviation: string;
|
||||
code_sat: number | null;
|
||||
is_active: number;
|
||||
abbreviation?: string;
|
||||
code_sat?: number | null;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateUnitOfMeasureData {
|
||||
name?: string;
|
||||
abbreviation?: string;
|
||||
code_sat?: number | null;
|
||||
is_active?: number;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface UnitOfMeasureQueryParams {
|
||||
search?: string;
|
||||
is_active?: boolean;
|
||||
paginate?: boolean;
|
||||
per_page?: number;
|
||||
page?: number;
|
||||
}
|
||||
|
||||
// Interface para los links de paginación
|
||||
@ -65,10 +83,12 @@ export interface UnpaginatedResponse<T> {
|
||||
data: T[];
|
||||
}
|
||||
|
||||
// Tipo específico para la respuesta paginada de Unidades de Medida
|
||||
export type UnitOfMeasurePaginatedApiResponse = PaginatedResponse<UnitOfMeasureApi>;
|
||||
|
||||
export type UnitOfMeasureUnpaginatedApiResponse = UnpaginatedResponse<UnitOfMeasureApi>;
|
||||
|
||||
export type UnitOfMeasurePaginatedResponse = PaginatedResponse<UnitOfMeasure>;
|
||||
|
||||
// Tipo específico para la respuesta no paginada de Unidades de Medida
|
||||
export type UnitOfMeasureUnpaginatedResponse = UnpaginatedResponse<UnitOfMeasure>;
|
||||
|
||||
export type UnitOfMeasureResponseById = {
|
||||
@ -78,4 +98,4 @@ export type UnitOfMeasureResponseById = {
|
||||
export interface SingleUnitOfMeasureResponse {
|
||||
message: string;
|
||||
data: UnitOfMeasure;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import axios from 'axios';
|
||||
import type { InternalAxiosRequestConfig } from 'axios';
|
||||
import { AUTH_TOKEN_KEY, clearStoredAuthSession } from '../modules/auth/utils/authStorage';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
|
||||
@ -12,7 +13,7 @@ const api = axios.create({
|
||||
// Interceptor para agregar el Bearer Token a cada petición
|
||||
api.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const token = localStorage.getItem('auth_token'); // Ajusta según dónde guardes el token
|
||||
const token = localStorage.getItem(AUTH_TOKEN_KEY);
|
||||
if (token && config.headers) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
@ -28,18 +29,16 @@ api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response) {
|
||||
// El servidor respondió con un código de estado fuera del rango 2xx
|
||||
console.error(error.response.data);
|
||||
|
||||
// Manejar error 401 (no autorizado) - redirigir al login
|
||||
if (error.response.status === 401) {
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('auth_user');
|
||||
window.location.href = '/login';
|
||||
clearStoredAuthSession();
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.dispatchEvent(new CustomEvent('auth:unauthorized'));
|
||||
}
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
export default api;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user