Tipos para modulos de vuex

resources/js/store/index.ts

@@ -1,8 +1,8 @@
 import Vue from '../../../node_modules/vue/dist/vue.esm.js';
 import Vuex from 'vuex';
+import login from "./modules/login";
 import admin from "./modules/admin";
 import comisiones from "./modules/comisiones";
-import login from "./modules/login";
 import pedido from "./modules/pedido";
 import productos from "./modules/productos";
 import ui from "./modules/ui";
@@ -11,9 +11,9 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     modules: {
+        login,
         admin,
         comisiones,
-        login,
         pedido,
         productos,
         ui,

resources/js/store/modules/admin/index.ts

@@ -1,20 +1,21 @@
 import axios from "axios";
+import { AdminState } from "./types";
 
-const state = {
+const state: AdminState = {
-    lastFetch: null,
+    lastFetch: undefined,
-    grupo_de_compra_id: null,
+    grupo_de_compra_id: undefined,
-    nombre: null,
+    nombre: undefined,
-    devoluciones_habilitadas: null,
+    devoluciones_habilitadas: undefined,
-    pedidos: null,
+    pedidos: undefined,
-    total_a_recaudar: null,
+    total_a_recaudar: undefined,
-    total_sin_devoluciones: null,
+    total_sin_devoluciones: undefined,
-    total_barrial: null,
+    total_barrial: undefined,
-    total_devoluciones: null,
+    total_devoluciones: undefined,
-    total_de_pedido: null,
+    total_de_pedido: undefined,
-    total_a_transferir: null,
+    total_a_transferir: undefined,
-    total_transporte: null,
+    total_transporte: undefined,
-    cantidad_transporte: null,
+    cantidad_transporte: undefined,
-    saldo: null,
+    saldo: undefined,
 };
 
 const mutations = {
@@ -59,7 +60,7 @@ const actions = {
 
 const getters = {
     grupoDeCompraDefinido() {
-      return state.lastFetch !== null;
+      return state.lastFetch !== undefined;
     },
     hayPedidos() {
         return state.pedidos?.length > 0;

resources/js/store/modules/admin/types.ts

@@ -0,0 +1,45 @@
+export interface AdminState {
+    lastFetch?: Date,
+    grupo_de_compra_id: number,
+    nombre: string,
+    devoluciones_habilitadas: boolean,
+    pedidos: Pedido[],
+    total_a_recaudar: number,
+    total_sin_devoluciones: number,
+    total_barrial: number,
+    total_devoluciones: number,
+    total_de_pedido: number,
+    total_a_transferir: number,
+    total_transporte: number,
+    cantidad_transporte: number,
+    saldo: number,
+}
+
+export interface Pedido {
+    id: number,
+    nombre: string,
+    productos: Producto[],
+    aprobado: boolean,
+    total: number,
+    total_transporte: number,
+    cantidad_transporte: number,
+    total_sin_devoluciones: number,
+    devoluciones_total: number,
+    devoluciones_notas: string
+}
+
+export interface Producto {
+    id: number,
+    fila: number,
+    nombre: string,
+    precio: number,
+    categoria: string,
+    bono: boolean,
+    created_at: Date,
+    updated_at: Date,
+    requiere_notas: boolean,
+    es_solidario: boolean,
+    notas: string,
+    cantidad: number,
+    total: number,
+}

resources/js/store/modules/comisiones/index.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
+import { ComisionesState } from "./types";
 
-const state = {
+const state: ComisionesState = {
     lastFetch: undefined,
     grupos_de_compra: [],
 };

resources/js/store/modules/comisiones/types.ts

@@ -0,0 +1,10 @@
+export interface ComisionesState {
+    lastFetch?: Date,
+    grupos_de_compra: Barrio[],
+}
+
+export interface Barrio {
+    id: number,
+    nombre: string,
+    saldo: number,
+}

resources/js/store/modules/comunes.ts

@@ -0,0 +1,14 @@
+export type Rol = 'barrio' | 'admin_barrio' | 'comision';
+
+export type UrlRol = 'pedido' | 'admin' | 'comisiones';
+
+export type Response<T> = Axios.IPromise<Axios.AxiosXHR<T>>;
+
+export interface UserRol {
+    rol: Rol
+}
+
+export interface Filtro {
+    clave: string,
+    valor: string,
+}

resources/js/store/modules/login/index.ts

@@ -1,22 +1,24 @@
 import axios from "axios";
+import { Barrio, Estilos, LoginState, OpcionLogin, Textos } from "./types";
+import { Response, UrlRol, UserRol } from "../comunes";
 
-const state = {
+const state: LoginState = {
-    regiones: null,
+    regiones: [],
-    grupos_de_compra: null,
+    grupos_de_compra: [],
-    region_elegida: null,
+    region_elegida: undefined,
-    grupo_de_compra_elegido: null,
+    grupo_de_compra_elegido: undefined,
-    rol: null,
+    rol: undefined,
 };
 
 const mutations = {
-    setRegiones(state, { regiones }) {
+    setRegiones(state, { regiones }): void {
         state.regiones = regiones;
     },
-    setRegionYBarrios(state, { region, grupos_de_compra }) {
+    setRegionYBarrios(state, { region, grupos_de_compra }): void {
         state.region_elegida = region;
         state.grupos_de_compra = grupos_de_compra;
     },
-    selectGrupoDeCompra(state, { grupo_de_compra }) {
+    selectGrupoDeCompra(state, { grupo_de_compra }): void {
         state.grupo_de_compra_elegido = grupo_de_compra;
     },
     setRol(state, { rol }) {
@@ -25,29 +27,29 @@ const mutations = {
 };
 
 const actions = {
-    async getRegiones({ commit }) {
+    async getRegiones({ commit }): Promise<void> {
-        const response = await axios.get("/api/regiones");
+        const response: Response<string[]> = await axios.get("/api/regiones");
         commit('setRegiones', { regiones: response.data });
     },
-    async selectRegion({ commit }, { region }) {
+    async selectRegion({ commit }, { region }): Promise<void> {
-        const response = await axios.get(`/api/regiones/${region}`);
+        const response: Response<Barrio[]> = await axios.get(`/api/regiones/${region}`);
         commit('setRegionYBarrios', { region: region, grupos_de_compra: response.data });
     },
-    async getRol({ commit }) {
+    async getRol({ commit }): Promise<void> {
-        const response = await axios.get("/user/rol");
+        const response: Response<UserRol> = await axios.get("/user/rol");
         commit('setRol', { rol: response.data.rol });
     }
 };
 
 const getters = {
-    urlRol() {
+    urlRol(): UrlRol {
         let split = window.location.pathname
             .replace('login', '')
             .split('/')
             .filter(x => x.length);
         return split[0] ?? 'pedido';
     },
-    textos() {
+    textos(): Textos {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':
@@ -78,7 +80,7 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-    estilos() {
+    estilos(): Estilos {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':
@@ -103,7 +105,7 @@ const getters = {
                 throw new Error("Url inválida");
         }
     },
-    opcionesLogin() {
+    opcionesLogin(): OpcionLogin[] {
         let rol = getters.urlRol();
         switch (rol) {
             case 'admin':

resources/js/store/modules/login/types.ts

@@ -0,0 +1,38 @@
+import { Rol } from "../comunes";
+
+export interface LoginState {
+    regiones: string[],
+    grupos_de_compra: Barrio[],
+    region_elegida?: string,
+    grupo_de_compra_elegido?: Barrio,
+    rol?: Rol,
+}
+
+export interface Textos {
+    titulo: string,
+    subtitlo: string,
+    password: string,
+    ayuda: string,
+    label: string,
+}
+
+export interface Estilos {
+    fondo: string,
+    texto: string,
+    botones: string,
+}
+
+export interface OpcionLogin {
+    nombre: string,
+    href: string,
+}
+
+export interface Barrio {
+    id: number,
+    nombre: string,
+    region: string,
+    created_at: Date,
+    updated_at: Date,
+    devoluciones_habilitadas: boolean,
+    saldo: number,
+}

resources/js/store/modules/pedido/index.ts

@@ -1,18 +1,19 @@
 import axios from "axios";
+import { PedidoState } from "./types";
 
-const state = {
+const state: PedidoState = {
-    lastFetch: null,
+    lastFetch: undefined,
-    grupo_de_compra: null,
+    grupo_de_compra: undefined,
-    pedido_id: null,
+    pedido_id: undefined,
-    nombre: null,
+    nombre: undefined,
-    productos: null,
+    productos: undefined,
-    aprobado: null,
+    aprobado: undefined,
-    total: null,
+    total: undefined,
-    total_transporte: null,
+    total_transporte: undefined,
-    cantidad_transporte: null,
+    cantidad_transporte: undefined,
-    total_sin_devoluciones: null,
+    total_sin_devoluciones: undefined,
-    devoluciones_total: null,
+    devoluciones_total: undefined,
-    devoluciones_notas: null,
+    devoluciones_notas: undefined,
 };
 
 const mutations = {
@@ -33,17 +34,17 @@ const mutations = {
         state.devoluciones_notas = pedido.devoluciones_notas;
     },
     reset(state) {
-        state.lastFetch = null;
+        state.lastFetch = undefined;
-        state.pedido_id = null;
+        state.pedido_id = undefined;
-        state.nombre = null;
+        state.nombre = undefined;
-        state.productos = null;
+        state.productos = undefined;
-        state.aprobado = null;
+        state.aprobado = undefined;
-        state.total = null;
+        state.total = undefined;
-        state.total_transporte = null;
+        state.total_transporte = undefined;
-        state.cantidad_transporte = null;
+        state.cantidad_transporte = undefined;
-        state.total_sin_devoluciones = null;
+        state.total_sin_devoluciones = undefined;
-        state.devoluciones_total = null;
+        state.devoluciones_total = undefined;
-        state.devoluciones_notas = null;
+        state.devoluciones_notas = undefined;
     }
 };
 
@@ -103,7 +104,7 @@ const actions = {
 
 const getters = {
     pedidoDefinido() {
-        return state.lastFetch !== null;
+        return state.lastFetch !== undefined;
     },
     enChismosa() {
         return ((producto_id) => state.productos.some(p => p.id === producto_id));

resources/js/store/modules/pedido/types.ts

@@ -0,0 +1,22 @@
+import { Producto } from "../admin/types";
+
+export interface PedidoState {
+    lastFetch?: Date,
+    grupo_de_compra: Barrio,
+    pedido_id: number,
+    nombre: string,
+    productos: Producto[],
+    aprobado: boolean,
+    total: number,
+    total_transporte: number,
+    cantidad_transporte: number,
+    total_sin_devoluciones: number,
+    devoluciones_total: number,
+    devoluciones_notas: string,
+}
+
+export interface Barrio {
+    id: number,
+    nombre: string,
+    devoluciones_habilitadas: boolean,
+}

resources/js/store/modules/productos/index.ts

@@ -1,10 +1,11 @@
 import axios from "axios";
+import { ProductosState } from "./types";
 
-const state = {
+const state: ProductosState = {
-    lastFetch: null,
+    lastFetch: undefined,
     categorias: [],
     productos: [],
-    filtro: null,
+    filtro: undefined,
 };
 
 const mutations = {
@@ -33,7 +34,7 @@ const actions = {
     },
     async getProductos({ commit }) {
         const response = await axios.get("/api/productos");
-        commit('setFiltro', null);
+        commit('setFiltro', undefined);
         commit('setProductos', response.data.data);
     },
     async seleccionarCategoria({ dispatch }, { categoria }) {

resources/js/store/modules/productos/types.ts

@@ -0,0 +1,18 @@
+import { Filtro } from "../comunes";
+
+export interface ProductosState {
+    lastFetch?: Date,
+    categorias: string[],
+    productos: Producto[],
+    filtro: Filtro,
+}
+
+export interface Producto {
+    id: number,
+    nombre: string,
+    precio: number,
+    categoria: string,
+    economia_solidaria: boolean,
+    nacional: boolean,
+    requiere_notas: boolean,
+}

resources/js/store/modules/ui/index.ts

@@ -1,10 +1,12 @@
-const state = {
+import { UiState } from "./types";
+
+const state: UiState = {
     show_chismosa: false,
     show_devoluciones: false,
     show_tags: true,
     tags_interactuada: false,
     migas: [{ nombre: 'Pedidos', action: 'pedido/resetear' }],
-    canasta_actual: null,
+    canasta_actual: undefined,
 };
 
 const mutations = {

resources/js/store/modules/ui/types.ts

@@ -0,0 +1,20 @@
+
+export interface UiState {
+    show_chismosa: boolean,
+    show_devoluciones: boolean,
+    show_tags: boolean,
+    tags_interactuada: boolean,
+    migas: Miga[],
+    canasta_actual?: DatosCanasta,
+}
+
+export interface Miga {
+    nombre: string,
+    action: string,
+    arguments?: { [key: string]: string },
+}
+
+export interface DatosCanasta {
+    nombre: string,
+    fecha: Date,
+}