@imj_media/tareas 0.0.7

package/src/constants/colors.ts

@@ -0,0 +1,64 @@
+
+export const COLORS = {
+    bg: {
+        DEFAULT: "#EFEFEF",
+        content: "#FAFAFA",
+        card: "#FAFAFA",
+        //* To add the variant in Dark mode only add the -dark suffix to each color
+    },
+    texts: {
+        DEFAULT: "#252525",
+        enfasis: "#3658c1",
+        subtext: "#4f4f4f",
+        placeholder: "#929292",
+    },
+    primary:{
+        light:"#E7E9F2",
+        medium: "#dae2ec",
+        dark:"#334990",
+        regular: "#425CAC", 
+        pastel:"#5c7ddd",
+    }, 
+    success:{
+        light:"#368156",
+        medium: "#D2E9DC",
+        dark:"#368156",
+        regular: "#43B071", 
+        pastel:"#57BA81",
+    },
+    danger:{
+        light:"#F1E5E4",
+        medium: "#EBDBD9",
+        dark:"#8C352C",
+        regular: "#C34335", 
+        pastel:"#C4335",
+    },
+    warning: {
+        light:"#F2ECE5",
+        medium: "#EBE3D9",
+        dark:"#B4782F",
+        regular: "#D38A31", 
+        pastel:"#D38A31",
+    },
+    alert:{
+        light:"#F1F1E4",
+        medium: "#EAE9D9",
+        dark:"#ADA63A",
+        regular: "#D6CC48", 
+        pastel:"#D6CC48",
+    },
+    info: {
+        light:"#E7F5FF",
+        medium: "#D9E6EE",
+        dark:"#1C5073",
+        regular: "#1B6698", 
+        pastel:"#1B6698",
+    },
+    link:{
+        light:"#ECF8FE",
+        medium: "#D8F1FD",
+        dark:"#0A7AAE",
+        regular: "#0EA5E9", 
+        pastel:"#0EA5E9",
+    },
+}

package/src/constants/gaps.ts

@@ -0,0 +1,8 @@
+export const GAPS = {
+    s:"4px",
+    m:"8px",
+    l:"12px",
+    xl:"16px",
+    xxl:"20px",
+    xxxl:"24px",
+}

package/src/constants/paddings.ts

@@ -0,0 +1,8 @@
+export const PADDINGS = {
+    s:"4px",
+    m:"8px",
+    l:"12px",
+    xl:"16px",
+    xxl:"20px",
+    xxxl:"24px",
+}

package/src/constants/shadows.ts

@@ -0,0 +1,5 @@
+export const SHADOWS = {
+    "button-primary":"inset 0 0 0 2px #dae2ec",
+    "button-primary-hover":"inset 0 0 0 2px #425CAC, 0 0 5px #00000030",
+    input:"inset 0 0 0 2px #dae2ec",
+}

package/src/context/filtersLayout.context.tsx

@@ -0,0 +1,118 @@
+import React,{ createContext, useContext, useEffect, useState } from "react";
+import { addEstructureToFilters } from "../utils/filters.functions";
+export interface IFieldFilter {
+    label: string;
+    type: TType;
+    id: string;
+    options?: {id: string | number, name: string}[];
+}
+
+interface IFiltersLayoutContext {
+    fields: IFieldFilter[];
+    filters: FiltersContext;
+    defineFields: (fields: IFieldFilter[]) => void;
+    updateFilters: ({name, value}: {name: string, value: string}) => void;
+    cleanFilters: () => void;
+    applyFilters: () => void;
+    initialFilters: TFilters;
+}
+
+interface FiltersContext {
+    justProjects: boolean;
+    owner: IOwner;
+}
+
+interface IOwner {
+    user: string;
+    config: string;
+}
+export interface TFilters {
+    label: string;
+    type: TType;
+    id: string;
+    options?: {id: string | number, name: string}[];
+    [key: string]: any;
+}
+type TType = React.HTMLInputTypeAttribute;
+const FiltersLayoutContext = createContext({} as IFiltersLayoutContext);
+
+export const FiltersLayoutProvider = ({children}: {children: React.ReactNode}) => {
+    //TODO: add setFillters
+    const [filters, setFilters] = useState<FiltersContext>( {} as FiltersContext);
+    const [temporalFilters, setTemporalFilters] = useState<TFilters>( {} as TFilters);
+    const [fields, setFields] = useState<IFieldFilter[]>([]);
+
+    const updateFilters = ({name, value}: {name: string, value: string})=>{
+        function parseIfNumeric(val: string | number ) {
+            // Check if the value is numeric
+            if (!isNaN(val as number) && val !== null && val !== "") {
+              return parseFloat(val as string); // Parse the value as a float
+            }
+          
+            // If not numeric, return null or handle as needed
+            return null;
+        }
+
+        let newValue = parseIfNumeric(value);
+        setTemporalFilters(prev=>{
+            let newFilters:any = {...prev};
+
+            let field = fields?.find(field=>field.label.toLowerCase().replace(/ /g, "_") === name)
+            if(field) newFilters[field.id] = newValue ?? value; 
+            else newFilters[name] = newValue ?? value;
+            return newFilters
+        })
+    }
+
+    useEffect(()=>{
+        console.log(temporalFilters)
+    },[temporalFilters])
+
+    useEffect(()=>{
+        let newFilters = fields.map(field=>{
+            if(field.id === "owner.config") return [field.id, "yo_y_mis_equipos"]
+            if(field.id === "dependency") return [field.id, "sin"]
+            return [field.id, null]
+        })
+        setTemporalFilters(
+            Object.fromEntries(newFilters)
+        )
+    },[fields])
+
+    const cleanFilters = ()=>{
+        let newFilters = fields.map(field=>{
+            if(field.id === "owner.config") return [field.id, "yo_y_mis_equipos"]
+            if(field.id === "dependency") return [field.id, "sin"]
+            return [field.id, null]
+        })
+        
+        setTemporalFilters( Object.fromEntries(newFilters) )
+        setFilters(addEstructureToFilters(temporalFilters))
+    }
+
+    const applyFilters = ()=>{
+        let filtersWithEstructure = addEstructureToFilters(temporalFilters)
+        setFilters(filtersWithEstructure)
+    }
+
+    return (
+        <FiltersLayoutContext.Provider value={{
+            //properties
+            fields,
+            filters,
+
+            //methods
+            defineFields: setFields,
+            updateFilters,
+            cleanFilters,
+            applyFilters,
+            initialFilters: temporalFilters
+        }}>
+            {children}
+        </FiltersLayoutContext.Provider>
+    )
+}
+
+export const useFiltersLayoutContext = () => {
+    return useContext(FiltersLayoutContext);
+}

package/src/context/kanbanCampania.context.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+import { getTasksProject } from "../../core/actions/get_tasks_project.action";
+import { useApis } from "./useApis.context";
+import { useFiltersLayoutContext } from "./filtersLayout.context";
+import { useUser } from "./userLog.context";
+interface IInfoCampaniaContext {
+    children: React.ReactNode,
+    project: number
+}
+
+interface IValuesContext {
+    tasksProject: any
+}
+
+const KanbanCampaniaContext = createContext({} as IValuesContext);
+
+export const InfoCampaniaProvider = ({children, project}: IInfoCampaniaContext) => {
+    const {tasks_api} = useApis();
+    const {filters} = useFiltersLayoutContext();
+    const {user} = useUser();
+
+    const tasksProject = useQuery({
+        queryKey: ["tasksProject", project],
+        queryFn: () => getTasksProject({
+            filters: {
+                owner:{
+                    user: user.id,
+                    config: (filters?.owner?.config ?? "yo_y_mis_equipos") as "yo_y_mis_equipos" | "mis_equipos" | "yo"
+                },
+            },
+            project,
+            tasks_api
+        })
+    })
+
+    const projectID = project ?? null
+
+
+    return (
+        <KanbanCampaniaContext.Provider value={{
+            //properties
+            tasksProject,
+        }}>
+            {children}
+        </KanbanCampaniaContext.Provider>
+    )
+}
+
+export const useInfoCampania = () => useContext(KanbanCampaniaContext);

package/src/context/useApis.context.tsx

@@ -0,0 +1,47 @@
+import axios, { AxiosInstance } from "axios";
+import qs from "qs";
+import { createContext, useContext } from "react";
+
+
+interface IUserLogContext {
+    user: User,
+    children: React.ReactNode,
+    env: Env,
+}
+
+interface User {
+    id: number,
+    accessToken: string,
+}
+
+interface IValuesContext {
+    tasks_api: AxiosInstance,
+}
+
+type Env = "dev" | "prod"
+
+const ApiContext = createContext({} as IValuesContext);
+
+export const UseApisProvider = ({children, user, env}: IUserLogContext) => {
+    const { VITE_PUBLIC_URL_DEV, VITE_PUBLIC_URL_PROD } = import.meta.env;
+
+    const tasks_api = axios.create({
+        baseURL: env === "dev" ? VITE_PUBLIC_URL_DEV : VITE_PUBLIC_URL_PROD,
+        headers: {
+            Authorization: `Bearer ${user.accessToken}`,
+        },
+        paramsSerializer: (params: any) => qs.stringify(params, { encodeValuesOnly: true }),
+    })
+    
+    
+    return (
+        <ApiContext.Provider value={{
+            //methods
+            tasks_api
+        }}>
+            {children}
+        </ApiContext.Provider>
+    )
+}
+
+export const useApis = () => useContext(ApiContext);

package/src/context/userLog.context.tsx

@@ -0,0 +1,50 @@
+import axios, { AxiosInstance } from "axios";
+import qs from "qs";
+import { createContext, useContext } from "react";
+
+
+interface IUserLogContext {
+    user: User,
+    children: React.ReactNode,
+    env: Env,
+}
+
+interface User {
+    id: number,
+    accessToken: string,
+}
+
+interface IValuesContext {
+    user: User,
+    tasks_api: AxiosInstance,
+}
+
+type Env = "dev" | "prod"
+
+const UserLogContext = createContext({} as IValuesContext);
+
+export const UserLogProvider = ({children, user, env}: IUserLogContext) => {
+    const { VITE_PUBLIC_URL_DEV, VITE_PUBLIC_URL_PROD } = import.meta.env;
+
+    const tasks_api = axios.create({
+        baseURL: env === "dev" ? VITE_PUBLIC_URL_DEV : VITE_PUBLIC_URL_PROD,
+        headers: {
+            Authorization: `Bearer ${user.accessToken}`,
+        },
+        paramsSerializer: (params: any) => qs.stringify(params, { encodeValuesOnly: true }),
+    })
+    
+    return (
+        <UserLogContext.Provider value={{
+            //properties
+            user,
+
+            //methods
+            tasks_api
+        }}>
+            {children}
+        </UserLogContext.Provider>
+    )
+}
+
+export const useUser = () => useContext(UserLogContext);

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_PUBLIC_URL_DEV: string
+  readonly VITE_PUBLIC_TOKEN_CLIENT_DEV: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}