npm-pkg-hook 1.0.1 → 1.0.4

package/src/hooks/useCategoryInStore/index.js

@@ -0,0 +1,94 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { useState } from 'react';
+import { DELETE_ONE_CAT_PRODUCTS, GET_ULTIMATE_CATEGORY_PRODUCTS } from '../useProductsFood/queriesStore';
+import { UPDATE_CAT_IN_PRODUCT } from './../useProductsFood/queriesStore';
+import { GET_ONE_STORE_IN_CATEGORY } from './queries';
+export const useCategoryInStore = ({ catStoreId }) => {
+  // STATES
+  const [categories, setOneCategoryInStore] = useState([])
+  const [deleteCatOfProducts] = useMutation(DELETE_ONE_CAT_PRODUCTS, {
+    onError: (e) => {
+      setAlertBox({
+        message: e.graphQLErrors[0].message,
+        color: WColor
+      })
+    },
+    update(cache) {
+      cache.modify({
+        fields: {
+          catProductsAll(dataOld = []) {
+            return cache.writeQuery({ query: GET_ULTIMATE_CATEGORY_PRODUCTS, data: dataOld })
+          }
+        }
+      })
+    }
+  })
+  const [updatedCatWithProducts] = useMutation(UPDATE_CAT_IN_PRODUCT, {
+    onError: (e) => {
+      console.log({
+        message: e.graphQLErrors[0].message,
+        color: WColor
+      })
+    },
+    update(cache) {
+      cache.modify({
+        fields: {
+          catProductsAll(dataOld = []) {
+            return cache.writeQuery({ query: GET_ULTIMATE_CATEGORY_PRODUCTS, data: dataOld })
+          }
+        }
+      })
+    }
+  })
+  // QUERIES
+  const { data } = useQuery(GET_ULTIMATE_CATEGORY_PRODUCTS)
+  const {
+    loading,
+    error
+  } = useQuery(GET_ONE_STORE_IN_CATEGORY, {
+    variables: {
+      catStore: catStoreId
+    },
+    onError: () => {
+      console.log({ message: '', duration: 5000 })
+    },
+    onCompleted: () => {
+      setOneCategoryInStore(data.getOneCatStore)
+    }
+  })
+    // HANDLESS
+    const handlerDeleteCategoryInStore = (category) => {
+      const { pState, idPc } = category || {}
+      if (!idPc || !pState) return
+      return deleteCatOfProducts({
+        variables: { idPc, pState }, update(cache) {
+          cache.modify({
+            fields: {
+              catProductsAll(dataOld = []) {
+                return cache.writeQuery({ query: GET_ULTIMATE_CATEGORY_PRODUCTS, data: dataOld })
+              }
+            }
+          })
+        }
+      })
+    }
+    const handleUpdateCatInProduct = async ({ data }) => {
+      await updatedCatWithProducts({
+        variables: {
+          input: {
+            setData: data?.map(x => { return { idProduct: x.pId } }),
+            idCat: idCat
+          }
+        }
+      })
+    }
+  return {
+    categories,
+    data: data?.catProductsAll || [],
+    loading,
+    error,
+    handlerDeleteCategoryInStore,
+    handleUpdateCatInProduct
+  }
+}
+

package/src/hooks/useChartData/index.js

@@ -0,0 +1,168 @@
+import { useQuery } from '@apollo/client';
+import { useState } from 'react';
+import { SPANISH_MONTHS } from "../../utils/index";
+import { GET_ALL_SALES } from "../useReport/queries";
+
+export const useChartData = ({ year }) => {
+    // Construcción del nuevo array:
+    const { data, loading } = useQuery(GET_ALL_SALES)
+    const [chartType, setChartType] = useState('bar')
+    const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear())
+    const [asFilter, setFilter] = useState(false)
+    const [newResult, setNewResult] = useState([])
+    let result = []
+    data?.getAllSalesStore?.length > 0 && data?.getAllSalesStore.reduce(function (res, value) {
+        // Creamos la posición del array para cada mes
+        let mes = new Date(value.pDatCre).getMonth()
+        let Year = new Date(value.pDatCre).getFullYear()
+        if (!res[mes]) {
+            res[mes] = { Mes: mes, Year }
+            // Inicializamos a 0 el valor de cada key
+            Object.keys(value).forEach((key) => {
+                if (key != 'pDatCre') {
+                    res[mes][key] = 0
+                }
+            })
+
+            result.push(res[mes])
+        }
+        // Sumamos el valor de cada clave dentro de un bucle
+        Object.keys(value).forEach(function (key) {
+            if (key != 'pDatCre') {
+                res[mes]['totalProductsPrice'] += value['totalProductsPrice']
+            }
+        })
+        return res
+    }, {})
+
+    let allMonths = Array.from({ length: 12 }, (_, i) => { return i })
+    let missingMonths = allMonths.filter(month => { return !result.some(data => { return data.Mes === month }) })
+
+    for (const element of missingMonths) {
+        result.push({
+            'Mes': element,
+            'totalProductsPrice': 0,
+            'Year': ''
+        })
+    }
+
+    result.sort((a, b) => { return a.Mes - b.Mes })
+
+    const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
+    // Resultado:
+
+    const dataChart = {
+        labels: asFilter ? newResult.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }) : result.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }),
+        datasets: [
+            {
+                label: labelTitle,
+                data: asFilter ? newResult.map(data => { return data.totalProductsPrice }) : result.map(data => { return data.totalProductsPrice }),
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.2)',
+                    'rgba(54, 162, 235, 0.2)',
+                    'rgba(255, 206, 86, 0.2)',
+                    'rgba(75, 192, 192, 0.2)',
+                    'rgba(153, 102, 255, 0.2)',
+                    'rgba(255, 159, 64, 0.2)'
+                ],
+                borderColor: chartType === 'bar' ?  [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ] : 'rgb(255 0 0)',
+                tension: 0.6,
+                fill: false,
+                borderWidth: 1,
+                barPercentage: 1,
+                barThickness: 50,
+                minBarLength: 3,
+            }
+        ]
+    }
+    const options =  {
+        interaction: {
+          mode: 'index',
+          intersect: false,
+        },
+        scales: {
+            x: {
+                stacked: true
+            },
+            y: {
+                stacked: true
+            }
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: labelTitle
+          },
+        }
+      }
+    const groupedData = {}
+
+    data && data.getAllSalesStore.forEach((item) => {
+        const year = new Date(item.pDatCre).getFullYear()
+        if (!groupedData[year]) {
+            groupedData[year] = []
+        }
+        groupedData[year].push(item)
+    })
+    const years = []
+    data && data.getAllSalesStore.forEach((item) => {
+        const y = new Date(item.pDatCre).getFullYear()
+        if (!years.includes(y)) {
+            years.push(y)
+        }
+    })
+    const handleChangeYear = (value) => {
+        setFilter(true)
+        if (result?.length > 0) {
+            const filterToYear = result.filter((elem) => {
+                return elem?.Year == parseInt(value)
+            })
+            let missingNewMonths = allMonths.filter(month => { return !filterToYear.some(data => { return data.Mes === month }) })
+            for (const element of missingNewMonths) {
+                filterToYear.push({
+                    'Mes': element,
+                    'totalProductsPrice': 0,
+                    'Year': ''
+                })
+            }
+            filterToYear.sort((a, b) => { return a.Mes - b.Mes })
+            setNewResult(filterToYear)
+            return filterToYear
+        }
+    }
+    const cleanFilter = () => {
+        setFilter(false)
+        setChartTypeYear(new Date().getFullYear())
+    }
+    const sortYear = () => {
+        return  years.sort((a, b) => { return b - a });
+    }
+
+    const organiceYears = sortYear()
+    return {
+        handleChangeYear,
+        setFilter,
+        cleanFilter,
+        setChartType,
+        years: organiceYears,
+        asFilter,
+        chartTypeYear,
+        options,
+        chartType,
+        labelTitle,
+        result,
+        dataChart,
+        loading
+    }
+}

package/src/hooks/useCheckbox/index.js

@@ -0,0 +1,114 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Hook for managing multiple checkbox states
+ *
+ * @param {Array<String | Number>} elem - list of all elem
+ * @param {Array<String | Number>} selectedIds - list of selected elem (optional)
+ *
+ * @returns {Object}
+ *  - checkboxStates (state object),
+ *  - numSelectedItems (number),
+ *  - handleChangeCheck (callback),
+ *  - toggleAll (callback),
+ *  - selectAll (callback),
+ *  - clearAll (callback)
+ */
+
+export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
+  const numTotalItems = elem?.length
+  const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
+  const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
+
+  const handleChangeCheck = useCallback((event, id) => {
+    const target = event.target
+    setCheckedItems(prevState => {
+      const newState = new Set(prevState)
+      if (target.checked) {
+        newState.add(id)
+      } else {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const setAll = useCallback(
+    isChecked => {
+      setCheckedItems(prevState => {
+        const newState = new Set(prevState)
+        for (const id of elem) {
+          if (disabledItems.has(id)) {
+            continue
+          }
+          if (isChecked) {
+            newState.add(id)
+          } else {
+            newState.delete(id)
+          }
+        }
+        return newState
+      })
+    },
+    [elem, disabledItems]
+  )
+
+  const selectAll = useCallback(() => {
+    if (checkedItems.size === numTotalItems) {
+      return
+    }
+    setAll(true)
+  }, [checkedItems, numTotalItems, setAll])
+
+  const clearAll = useCallback(() => {
+    if (checkedItems.size === 0) {
+      return
+    }
+    setAll(false)
+  }, [checkedItems, setAll])
+
+  const toggleAll = useCallback(() => {
+    const numDisabledAndChecked = [...disabledItems].reduce((count, id) => {
+      if (checkedItems.has(id)) {
+        return count + 1
+      }
+      return count
+    }, 0)
+    if (checkedItems.size - numDisabledAndChecked === 0) {
+      selectAll()
+    } else {
+      clearAll()
+    }
+  }, [checkedItems, disabledItems, selectAll, clearAll])
+
+  const enableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.delete(id)
+      }
+      return newState
+    })
+  }, [])
+
+  const disableCheckboxes = useCallback((...elem) => {
+    setDisabledItems(prevState => {
+      const newState = new Set(prevState)
+      for (const id of elem) {
+        newState.add(id)
+      }
+      return newState
+    })
+  }, [])
+
+  return {
+    checkedItems,
+    disabledItems,
+    handleChangeCheck,
+    toggleAll,
+    selectAll,
+    clearAll,
+    enableCheckboxes,
+    disableCheckboxes
+  }
+}

package/src/hooks/useClients/index.js

@@ -0,0 +1,13 @@
+import { useQuery } from '@apollo/client'
+import { useState } from 'react'
+import { GET_ALL_CLIENTS } from './queries'
+
+export const useGetClients = () => {
+    const [clientes, setClients] = useState([])
+    const { loading, error } = useQuery(GET_ALL_CLIENTS, {
+    onCompleted: (data) => {
+        setClients(data)
+    }
+  })
+  return [clientes?.getAllClients || [], { loading, error }]
+}

package/src/hooks/useClients/queries.js

@@ -0,0 +1,118 @@
+import { gql } from '@apollo/client'
+
+export const CREATE_CLIENTS = gql`
+mutation createClients ($input: IClients) {
+  createClients(input: $input) {
+    cliId
+    idStore
+    idUser
+    clState
+    ClientAddress
+    clientNumber
+    ccClient
+    gender
+    clientLastName
+    clientName
+    createAt
+    updateAt
+  }
+}
+`
+export const DELETE_ONE_CLIENTS = gql`
+mutation deleteClient($cliId: ID, $clState: Int!) {
+  deleteClient(cliId: $cliId, clState: $clState) {
+    success
+    message
+  }
+}
+`
+export const GET_ALL_CLIENTS = gql`
+query getAllClients($idStore: ID, $cId: ID, $dId: ID, $ctId: ID, $search: String,  $min: Int, $max: Int, $fromDate: DateTime, $toDate: DateTime ) {
+  getAllClients(idStore: $idStore, cId: $cId, dId: $dId, ctId: $ctId, search: $search, min: $min, max: $max, fromDate: $fromDate, toDate: $toDate) {
+    cliId
+    idStore
+    gender
+    # idUser
+    clState
+    clientNumber
+    ccClient
+    clientLastName
+    clientName
+    ClientAddress
+    createAt
+    updateAt
+
+  }
+}
+`
+export const GET_ONE_CLIENT = gql`
+query getOneClients($cliId: ID) {
+  getOneClients(cliId: $cliId) {
+    cliId
+    idStore
+    idUser
+    clState
+    clientNumber
+    ClientAddress
+    gender
+    ccClient
+    clientLastName
+    clientName
+    createAt
+    updateAt
+
+  }
+}
+`
+
+export const CREATE_SHOPPING_CARD = gql`
+mutation  registerShoppingCard($input: IShoppingCard, $idSubArray: IID_SUB_ITEMS){
+    registerShoppingCard(input: $input, idSubArray: $idSubArray){
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+      # idSubArray
+  }
+}
+`
+export const CREATE_SHOPPING_CARD_TO_USER_STORE = gql`
+mutation  registerSalesStore($input: [IShoppingCard], $id: ID, $idStore: ID, $pCodeRef: String, $change: String, $valueDelivery: Float, $payMethodPState: Int, $pickUp: Int, $totalProductsPrice: Float, $idSubArray: IID_SUB_ITEMS){
+    registerSalesStore(input: $input, id: $id, idStore: $idStore, pCodeRef: $pCodeRef,  change: $change, valueDelivery: $valueDelivery, payMethodPState: $payMethodPState, pickUp: $pickUp, totalProductsPrice: $totalProductsPrice,  idSubArray: $idSubArray){
+ 			ShoppingCard {
+      ShoppingCard
+      id
+      pId
+      subProductsId
+      ShoppingCardRefCode
+      uuid
+      discountCardProduct
+      idUser
+      cName
+      idStore
+      cState
+      cDatCre
+      cDatMod
+      csDescription
+      cantProducts
+      comments
+        }
+    Response {
+      success
+      message
+    }
+  }
+}
+`

package/src/hooks/useConnection/index.js

@@ -0,0 +1,23 @@
+export const useConnection = ({ setConnectionStatus }) => {
+    async function updateConnectionStatus() {
+      if (navigator.onLine) {
+        setConnectionStatus(navigator.onLine);
+      } else {
+        setConnectionStatus(navigator.onLine);
+      }
+    }
+  
+    // Attaching event handler for the load event
+    //   window.addEventListener('load', updateConnectionStatus);
+  
+    // Attaching event handler for the online event
+    window.addEventListener('online', function(e) {
+      updateConnectionStatus();
+    });
+  
+    // Attaching event handler for the offline event
+    window.addEventListener('offline', function(e) {
+      updateConnectionStatus();
+    });
+  };
+  

package/src/hooks/useCreateProduct/helpers/useEditImageProduct/index.js

@@ -0,0 +1,165 @@
+import { useRef, useState } from 'react'
+
+export const useEditImageProduct = ({ sendNotification = () => { }, initialState }) => {
+  const [openEditImage, setopenEditImage] = useState(false)
+  const [tags, setTags] = useState([])
+  const [errors, setErrors] = useState({})
+  const handleOpenEditImage = () => {
+    setopenEditImage(!openEditImage)
+  }
+  // eslint-disable-next-line
+  const changeHandler = (name, value) => {
+    if (name === 'tags') {
+      setTags(value)
+      if (value.length > 0 && errors.tags) {
+        setErrors(prev => {
+          const prevErrors = { ...prev }
+          delete prevErrors.tags
+          return prevErrors
+        })
+      }
+    }
+  }
+  const [existImage, setExistImage] = useState(false)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(0)
+  const imageRef = useRef(null)
+  const onCropChange = (crop) => {
+    setCrop(crop)
+  }
+
+  const onZoomChange = (zoom) => {
+    setZoom(zoom)
+  }
+
+  const onCropComplete = (crop, pixelCrop) => {
+    const canvas = document.createElement('canvas')
+    const img = imageRef.current
+
+    canvas.width = pixelCrop.width
+    canvas.height = pixelCrop.height
+
+    const ctx = canvas.getContext('2d')
+    ctx.drawImage(
+      img,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0, 0,
+      pixelCrop.width,
+      pixelCrop.height)
+    // ctx.drawImage(
+    //   img,
+    //   pixelCrop.x,
+    //   pixelCrop.y,
+    //   pixelCrop.width,
+    //   pixelCrop.height,
+    //   0,
+    //   0,
+    //   canvas.width,
+    //   canvas.height
+    // )
+    const croppedUrl = canvas.toDataURL()
+    // console.log(croppedUrl)
+    // You can use the croppedUrl for whatever you want
+    // for example, you can set it as the src of an img element
+    // or send it to a server
+    // Convert the dataURL to a blob
+    fetch(croppedUrl)
+      .then(response => { return response.blob() })
+      .then(blob => {
+        // Create a new File
+        const file = new File([blob], 'cropped_image.jpg', { type: blob.type })
+        setPreviewImg(
+          file
+            ? {
+                src: URL.createObjectURL(file),
+                alt: ''
+              }
+            : initialState
+        )
+        // You can use the file object to send it to a server or to download it
+        sendNotification({ title: 'Exito', description: 'Imagen editada' })
+        setExistImage(true)
+        handleOpenEditImage()
+      })
+      .catch(() => {
+        sendNotification({ title: 'Error', description: 'Ha ocurrido un error!' })
+      })
+    // You can use the file object to send it to a server or to download it
+  }
+  function getPixelCrop (image, crop, zoom) {
+    const imgWidth = image.naturalWidth
+    const imgHeight = image.naturalHeight
+
+    const scaledWidth = imgWidth * zoom
+    const scaledHeight = imgHeight * zoom
+
+    const x = (imgWidth * crop.x) / 100
+    const y = (imgHeight * crop.y) / 100
+
+    return {
+      x,
+      y,
+      width: scaledWidth,
+      height: scaledHeight
+    }
+  }
+  const handleEditImage = () => {
+    handleOpenEditImage()
+  }
+
+  const [Dimage, setImage] = useState('')
+  const [cropData, setCropData] = useState('#')
+  const [cropper, setCropper] = useState()
+  const onChange = (e) => {
+    e.preventDefault()
+    let files
+    if (e.dataTransfer) {
+      files = e.dataTransfer.files
+    } else if (e.target) {
+      files = e.target.files
+    }
+    const reader = new FileReader()
+    reader.onload = () => {
+      setImage(reader.result)
+    }
+    reader.readAsDataURL(files[0])
+  }
+
+  const getCropData = () => {
+    if (typeof cropper !== 'undefined') {
+      setCropData(cropper.getCroppedCanvas().toDataURL())
+      fetch(cropper)
+        .then(response => { return response.blob() })
+        .then(blob => {
+          // Create a new File
+          const file = new File([blob], 'cropped_image.jpg', { type: blob.type })
+          setPreviewImg(
+            file
+              ? {
+                  src: URL.createObjectURL(file),
+                  alt: ''
+                }
+              : initialState
+          )
+          // You can use the file object to send it to a server or to download it
+          sendNotification({ title: 'Exito', description: 'Imagen editada' })
+          setExistImage(true)
+          handleOpenEditImage()
+        })
+        .catch(() => {
+          sendNotification({ title: 'Error', description: 'Ha ocurrido un error!' })
+        })
+    }
+  }
+  return {
+    img: null,
+    crop,
+    existImage,
+    zoom,
+    handleEditImage,
+    onCropChange
+  }
+}