@vixoniccom/aniversarios 1.2.1-dev.0 → 1.2.1

package/CHANGELOG.md

@@ -2,13 +2,7 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [1.2.1-dev.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0...v1.2.1-dev.0) (2025-05-02)
-
-
-### Bug Fixes
-
-* code refactored ([41cf858](https://github.com/Vixonic/store-aniversarios/commit/41cf85868e516175ee55640434247c5f70d5d579))
-* createItems now works properly ([db2623a](https://github.com/Vixonic/store-aniversarios/commit/db2623ab1156ca93bd5386598dd1c1dc486a46ff))
+### [1.2.1](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0...v1.2.1) (2025-02-28)
 
 ## [1.2.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.0-dev.1...v1.2.0) (2025-02-27)
 

package/configuration.json

@@ -63,10 +63,6 @@
           "label": "Actualización",
           "defaultValue": 600000,
           "items": [
-            {
-              "label": "1 minuto",
-              "value": 60000
-            },
             {
               "label": "10 minutos",
               "value": 600000

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.2.1-dev.0",
+  "version": "1.2.1",
   "description": "Muestra el día que el trabajador está de aniversario en la empresa.",
   "main": "main.js",
   "author": "",
@@ -19,6 +19,7 @@
   "dependencies": {
     "animejs": "^3.2.2",
     "axios": "^1.6.0",
+    "jquery": "^3.6.0",
     "localforage": "^1.10.0",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
@@ -32,8 +33,8 @@
     "@types/node": "^12.20.37",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
-    "@vixoniccom/module-packager": "^2.10.1",
-    "@vixoniccom/modules": "^2.20.0",
+    "@vixoniccom/module-packager": "^2.10.1-dev.1",
+    "@vixoniccom/modules": "^2.20.0-dev.1",
     "standard-version": "^9.5.0"
   }
 }

package/src/App.tsx

@@ -1,89 +1,97 @@
-import React, { useContext, useEffect, useState } from "react"
-import { FormattedText, Render } from './components'
-import { ConfigureContext } from "./context/configureContext/ConfigureContext"
-import { DataContext } from "./context/dataContext/DataContex"
-import { getEmployees, getEmployeesYearly } from "./helpers/getEmployees"
-import { filterEmployees } from "./helpers/filterEmployees"
-import moment from "moment"
-import { getMonth } from "./helpers/utils"
-import localforage from "localforage"
+import React, { useContext, useEffect, useState } from "react";
+import { ConfigureContext } from "./contex/configureContext/ConfigureContext";
+import { DataContext } from "./contex/dataContext/DataContex";
+import { Render } from "./components/Render";
+import { FormattedText } from "./components/FormattedText";
+import { getEmployees, getEmployeesYearly } from "./helpers/getEmployees";
+import { filterEmployees } from "./helpers/filterEmployees";
+import moment from "moment";
+import { getMonth } from "./helpers/utils";
+import localforage from "localforage";
 
 type Props = {
-  data: VixonicData
-  start: boolean
-}
+  data: VixonicData;
+  start: boolean;
+};
 
-type Msj = 'Ningún ingreso que mostrar'
+type Msj =
+  | 'Ningún ingreso que mostrar'
   | 'Cargando Empleados...'
   | 'Missing google sheets'
   | ""
-  | 'Invalid URL'
+  | 'Invalid URL';
 
-export const App: React.FunctionComponent<Props> = ({ data, start }) => {
-  const { addConfiguration, configureState } = useContext(ConfigureContext)
-  const { addEmployee } = useContext(DataContext)
+export const App = ({ data, start }: Props) => {
+  const { addConfiguration, configureState } = useContext(ConfigureContext);
+  const { addEmployee } = useContext(DataContext);
   const [dataState, setDataState] = useState(data)
-  const [msj, setMsj] = useState<Msj>("")
-  const { apiDomain, dataMode, excludePast } = configureState.parameters
-  let updateTimer: any
+  const [msj, setMsj] = useState<Msj>("");
+  const { apiDomain, dataMode, excludePast } = configureState.parameters;
+  let updateTimer : any
 
-  const setUpdateTime = (updatedTime: number) => {
-    clearTimeout(updateTimer)
-    updateTimer = setTimeout(getData, updatedTime)
-  }
 
-  useEffect(() => {
-    if (apiDomain) localforage.config({ name: `url_request_${apiDomain}` })
-  }, [apiDomain])
+  useEffect(()=> {
+    if(apiDomain){
+      localforage.config({
+        name: `url_request_${apiDomain}`
+      })
+    }
+  },[apiDomain])
 
   useEffect(() => {
-    addConfiguration(data)
-    setDataState(configureState)
-  }, [data])
+    addConfiguration(data);
+    setDataState(configureState);
+  }, [data]);
+
+
+  const setUpdateTime =(updatedTime: number) => {
+    clearTimeout(updateTimer)
+    updateTimer = setTimeout(getData, updatedTime)
+  }
 
   useEffect(() => {
     const { updateTime } = configureState.parameters
 
     if (apiDomain && dataMode) {
-      localforage.getItem<{ items: any[], date: number, mode: string }>('anniversary-docs').then((data) => {
-        if (!data || dataMode !== data.mode) {
+      localforage.getItem<{ items: any[], date: number, mode: string }>('anniversary-docs').then((data) => {  
+        if(!data || dataMode !== data.mode ) {
           getData()
           setUpdateTime(updateTime!)
-          return
+          return  
         }
-
+      
         const now = Date.now()
         const targetDate = data?.date! + updateTime!
 
-        if (now >= targetDate) {
+        if(now >= targetDate){
           getData()
           setUpdateTime(updateTime!)
-        } else {
+        }else {
           data && addEmployee(data.items)
-          setMsj("")
-          setUpdateTime(targetDate - now)
+          setMsj("");
+          setUpdateTime(targetDate-now)
         }
       })
     }
-    if (!apiDomain) setMsj("Missing google sheets")
-  }, [dataState])
+    if (!apiDomain) setMsj("Missing google sheets");
+  }, [dataState]);
 
   const getData = async () => {
-    const urlValid = "https://docs.google.com/spreadsheets/d/"
+    const urlValid = "https://docs.google.com/spreadsheets/d/";
     let contractEmployees: any
     let employee: any = []
     try {
-      if (apiDomain?.includes(urlValid)) {
-        const month = Number(moment().format("M")) - 1
-        const nextMonth = (month === 11) ? 0 : (month + 1)
-        const monthTab = getMonth(month)
-        const nextMonthTab = getMonth(nextMonth)
+      if (apiDomain !== undefined && apiDomain.includes(urlValid)) {
+        let month = Number(moment().format("M")) - 1;
+        let nextMonth = (month === 11) ?  0 : (month + 1); 
+        let monthTab = getMonth(month);
+        let nextMonthTab = getMonth(nextMonth);
         if (dataMode !== 'yearly') {
-          contractEmployees = await getEmployees(apiDomain, monthTab)
+          contractEmployees = await getEmployees(apiDomain, dataMode, monthTab);
           const { values } = contractEmployees.data
           employee.push(...filterEmployees(values, dataMode, excludePast, month))
-          if (dataMode === 'weekly') {
-            contractEmployees = await getEmployees(apiDomain, nextMonthTab)
+          if( dataMode === 'weekly') {
+            contractEmployees = await getEmployees(apiDomain, dataMode, nextMonthTab);
             const { values: valuesnextMonth } = contractEmployees.data
             employee.push(...filterEmployees(valuesnextMonth, dataMode, excludePast, nextMonth))
           }
@@ -92,34 +100,40 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
         if (dataMode === 'yearly') {
           setMsj('Cargando Empleados...')
           for (let numberMonth: number = 0; numberMonth <= 11; numberMonth++) {
-            contractEmployees = await getEmployeesYearly(apiDomain, numberMonth)
+            contractEmployees = await getEmployeesYearly(apiDomain, numberMonth);
             const { values } = contractEmployees.data
             employee.push(...filterEmployees(values, dataMode, excludePast, numberMonth))
           }
         }
 
         if (contractEmployees) {
-          addEmployee(employee)
-          setMsj("")
+          addEmployee(employee);
+          setMsj("");
           localforage.setItem('anniversary-docs', {
             items: employee,
             date: Date.now() + updateTimer,
             mode: dataMode
           })
         } else {
-          setMsj("Ningún ingreso que mostrar")
+          setMsj("Ningún ingreso que mostrar");
         }
       } else {
-        setMsj("Invalid URL")
+        setMsj("Invalid URL");
       }
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }
+  };
 
   return msj !== "" ? (
-    <FormattedText text={msj} format={configureState.parameters.nameFormat || configureState.parameters.descriptionFormat} />
+    <FormattedText
+      text={msj}
+      format={
+        configureState.parameters.nameFormat ||
+        configureState.parameters.descriptionFormat
+      }
+    />
   ) : (
     <Render start={start} />
-  )
-}
+  );
+};

package/src/components/{FontLoader/index.tsx → FontLoader.tsx}

@@ -1,36 +1,36 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
+import { ConfigureContext } from '../contex/configureContext/ConfigureContext'
 
 interface Props {
   paths: Array<string>
 }
 
-export const FontLoader = ({ paths }: Props) => {
+export const FontLoader = ({ paths}: Props) => {
+
   const { configureState } = useContext(ConfigureContext)
   const { parameters, downloadsPath } = configureState
 
-  const _getValueByPath = (path: string, obj: any): any => {
-    const pathsArray = path.split('.')
-    const propertyName = pathsArray[0]
+  const _getValueByPath = (path: any, obj: any): any => {
+    let pathsArray = path.split('.')
+    let propertyName = pathsArray[0]
     if (pathsArray.length === 1) return obj[propertyName]
     else {
       pathsArray.splice(0, 1)
       return _getValueByPath(pathsArray.join('.'), obj[propertyName])
     }
   }
-
-  const fonts = paths.map((path: any) => {
+  let fonts = paths.map((path: any) => {
     try {
-      const fontParam = _getValueByPath(path, parameters)
-      const font = {
+      let fontParam = _getValueByPath(path, parameters)
+      let font = {
         family: fontParam.filename.replace('.', '-'),
         src: `${downloadsPath}/${fontParam.filename}`
       }
       return `
           @font-face {
-            font-family: '${font.family}';
-            src: url('${font.src}');
+            font-family: "${font.family}";
+            src: url("${font.src}");
           }
         `
     } catch (err) {
@@ -43,6 +43,7 @@ export const FontLoader = ({ paths }: Props) => {
   )
 }
 
+
 FontLoader.defaultProps = {
   paths: [],
   parameters: {},

package/src/components/FormattedText.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { isNumber } from 'lodash'
+
+const alignments = {
+  center: 'center',
+  left: 'flex-start',
+  right: 'flex-end'
+}
+
+type aligment = {
+  horizontal: keyof typeof alignments,
+  vertical: keyof typeof alignments
+}
+
+
+interface Props {
+  format?: any
+  lineHeight: number
+  maxChar?: number
+  style?: number
+  text: string
+  unit: string
+}
+export const FormattedText = ({ text, format, maxChar, lineHeight, style, unit }: Props) => {
+
+  const trimText = (text: any, maxChar: any) => {
+    const isValid = maxChar && isNumber(maxChar) && maxChar >= 3
+    if (isValid && (text && text.length > maxChar) || false) {
+      let returnText = text.substring(0, maxChar - 3)
+      returnText.substr(-1, 3)
+      return `${returnText.trim()}...`
+    }
+    return text
+  }
+
+  const checkNested = (obj: any, path: any): any => {
+    let arr = path.split('.')
+    if (arr.length > 0) {
+      if (obj.hasOwnProperty(arr[0])) {
+        if (arr.length > 1) return checkNested(obj[arr[0]], arr.splice(1).join('.'))
+        else return true
+      } else return false
+    }
+  }
+
+  const getHorizontalAlignment = (alignment: aligment) => {
+    if (alignment) {
+      let hA = alignment.horizontal
+      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
+    }
+    return 'flex-start'
+  }
+
+  const renderText = maxChar ? trimText(text, maxChar) : text
+
+  let containerStyle = Object.assign({
+    display: 'inline-flex',
+    justifyContent: getHorizontalAlignment(format.alignment)
+  }, style)
+
+  return (
+    <div style={containerStyle}>
+      <span style={{
+        color: format.fontColor,
+        fontFamily: checkNested(format, 'font.filename') ? `"${format.font.filename.replace('.', '-')}"` : '',
+        fontSize: `${format.fontSize}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format.alignment.horizontal : 'left',
+        lineHeight: lineHeight
+      }}>{renderText}</span>
+    </div>
+  )
+}
+
+
+
+FormattedText.defaultProps = {
+  format: {},
+  lineHeight: 1,
+  unit: 'vh',
+  maxChar: undefined
+}

package/src/components/{Render/index.tsx → Render.tsx}

@@ -1,16 +1,17 @@
 import React, { useContext } from 'react'
-import { ConfigureContext } from '../../context/configureContext/ConfigureContext'
-import { DataContext } from '../../context/dataContext/DataContex'
-import { FontLoader } from '../FontLoader'
-import { FormattedText } from '../FormattedText'
-import { AnniversaryItem } from '../AnniversaryItem'
-import { ItemsContainer } from '../ItemsContainer'
+import { ConfigureContext } from '../contex/configureContext/ConfigureContext';
+import { DataContext } from '../contex/dataContext/DataContex';
+import { FontLoader } from './FontLoader';
+import { FormattedText } from './FormattedText';
+import { AnniversaryItem } from './anniversary-item/AnniversaryItem';
+import { ItemsContainer } from './items-container/ItemsContainer';
 
 interface Props {
   start: boolean
 }
 
 export const Render = ({ start }: Props) => {
+
   const { configureState } = useContext(ConfigureContext)
   const { dataEmployee } = useContext(DataContext)
   const { parameters, downloadsPath } = configureState
@@ -23,10 +24,11 @@ export const Render = ({ start }: Props) => {
     animationTime,
   } = parameters
 
-  const backgroundImageState = backgroundImage && backgroundImage.filename
-    ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
+  let backgroundImageState = backgroundImage && backgroundImage.filename
+    ? `url("${downloadsPath}/${backgroundImage.filename}")`
+    : ''
 
-  const anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
+  let anniversaryItems = dataEmployee.dataEmployee.map((anniversary: DataEmployee) => {
     return <AnniversaryItem style={'standard'} anniversary={anniversary} />
   })
 

package/src/components/anniversary-item/AnniversaryItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ClasicItem } from './clasic/ClasicItem'
+
+const itemStyles = {
+  standard: ClasicItem
+}
+
+interface Props {
+  style: string,
+  anniversary: DataEmployee
+}
+
+export const AnniversaryItem = ({ style, anniversary }: Props) => {
+
+  // let StyledItem = itemStyles.hasOwnProperty(this.props.style) ? itemStyles['circle'] : itemStyles.standard
+  let StyledItem = itemStyles.hasOwnProperty(style) ? itemStyles['standard'] : itemStyles.standard
+
+  return <StyledItem anniversary={anniversary} />
+
+}
+
+

package/src/components/anniversary-item/clasic/ClasicItem.tsx

@@ -0,0 +1,220 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { AnniversaryImage } from "../shared/AnniversaryImage";
+import { Separator } from "../shared/separator/Separator";
+import { AnniversaryDate } from "../shared/anniversary-date/AnniversaryDate";
+import { FormattedText } from "../../FormattedText";
+import { ConfigureContext } from "../../../contex/configureContext/ConfigureContext";
+
+interface Props {
+  anniversary: DataEmployee;
+}
+
+export const ClasicItem = ({ anniversary }: Props) => {
+  const { configureState } = useContext(ConfigureContext);
+  const { parameters, downloadsPath } = configureState;
+
+  const { orientation, separatorColor, separatorWidth, imageSize } = parameters;
+  const cont = useRef(null);
+
+  const parseBorderMargin = (marginString: any) => {
+    let pattern = /(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc))?/g;
+    let match = marginString ? marginString.match(pattern) : [""];
+    switch (match.length) {
+      case 1:
+        return { r: "4%", l: "4%" };
+      case 2:
+        return { r: match[0], l: match[0] };
+      default:
+        return { r: match[0], l: match[1] };
+    }
+  };
+
+  const parseElementStyles = (
+    margin: string,
+    position: number,
+    defaultPosition: number,
+    parameters: VixonicParameters
+  ) => {
+    const { orientation, separator } = parameters;
+    const marginAttr = orientation === "v" ? "marginBottom" : "marginRight";
+    const sizeAttr = orientation === "v" ? "width" : "height";
+    let pos = position !== undefined ? position : defaultPosition;
+    return {
+      order: pos,
+      [sizeAttr]: "100%",
+      [marginAttr]:
+        margin !== undefined && margin !== ""
+          ? `${margin}%`
+          : pos === 3 || separator === true
+          ? 0
+          : "4%",
+    };
+  };
+
+  const parseParameters = (parameters: any) => {
+    const imageAlignment = parameters.imageAlignment || "center";
+    const textAlignment = parameters.textAlignment || "center";
+    const dateAlignment = parameters.dateAlignment || "center";
+
+    return {
+      imageEnabled: parameters.imageEnabled,
+      imageStyle: Object.assign(
+        {
+          flexShrink: 0,
+          display: "flex",
+          justifyContent: imageAlignment,
+          alignItems: imageAlignment,
+        },
+        parseElementStyles(
+          parameters.imageMargin,
+          parameters.imagePosition,
+          1,
+          parameters
+        )
+      ),
+      descriptionEnabled: parameters.descriptionEnabled,
+      optionalEnabled: parameters.optionalEnabled,
+      textStyle: Object.assign(
+        { display: "flex", justifyContent: textAlignment, flex: 1 },
+        parseElementStyles(
+          parameters.textMargin,
+          parameters.textPosition,
+          2,
+          parameters
+        )
+      ),
+      dateEnabled: parameters.dateEnabled,
+      dateStyle: Object.assign(
+        {
+          display: "flex",
+          justifyContent: dateAlignment,
+          alignItems: dateAlignment,
+          flexShrink: 0,
+        },
+        parseElementStyles(
+          parameters.dateMargin,
+          parameters.datePosition,
+          3,
+          parameters
+        )
+      ),
+    };
+  };
+
+  const [margins, setMargins] = useState(
+    parseBorderMargin(parameters.itemMargins)
+  );
+  const [state, setState] = useState(
+    Object.assign({}, parseParameters(parameters))
+  );
+
+  useEffect(() => {
+    setMargins(parseBorderMargin(parameters.itemMargins));
+    setState(Object.assign({}, parseParameters(parameters)));
+  }, []);
+  
+  const getPhotoUrl = (filename: string) => {
+    let mode = parameters.photosMode;
+    if (
+      mode === "zip" &&
+      parameters.photosZip &&
+      parameters.photosZip.filename !== undefined
+    ) {
+      return (
+        downloadsPath +
+        "/" +
+        parameters.photosZip.filename.replace(".zip", "/") +
+        filename
+      );
+    } else {
+      return filename; //this.props.parameters.photosUrl + filename
+    }
+  };
+
+  const separatorProps = {
+    orientation: orientation,
+    size: separatorWidth,
+    color: separatorColor,
+    margins:
+      orientation === "v"
+        ? `${margins.r} 0 ${margins.l} 0`
+        : `0 ${margins.r} 0 ${margins.l}`,
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: orientation === "v" ? "column" : "row",
+        backgroundColor: "transparent",
+        overflow: "hidden",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+      }}
+      ref={cont}
+    >
+      {state.imageEnabled && parameters.imageStyle && (
+        <div style={state.imageStyle}>
+          {
+            <AnniversaryImage
+              url={anniversary.image ? getPhotoUrl(anniversary.image) : null}
+              orientation={orientation}
+              size={imageSize}
+              borderStyle={parameters.imageStyle}
+            />
+          }
+        </div>
+      )}
+      {state.imageEnabled && parameters.separator && (
+        <Separator order={state.imageStyle.order} {...separatorProps} />
+      )}
+      <div
+        style={{
+          ...state.textStyle,
+          flexDirection: "column",
+        }}
+      >
+        <FormattedText
+          text={anniversary.name}
+          format={parameters.nameFormat}
+          maxChar={Number(parameters.nameMaxChar)}
+          lineHeight={1.2}
+        />
+        {state.descriptionEnabled && (
+          <FormattedText
+            text={anniversary.position}
+            format={parameters.descriptionFormat}
+            maxChar={Number(parameters.descriptionMaxChar)}
+            lineHeight={1.2}
+          />
+        )}
+        {
+          state.optionalEnabled && (
+            <FormattedText
+              text={anniversary.optional}
+              format={parameters.optionalFormat}
+              maxChar={Number(parameters.descriptionMaxChar)}
+              lineHeight={1.2}
+            />
+          )
+        }
+      </div>
+      {parameters.separator && (
+        <Separator order={state.textStyle.order} {...separatorProps} />
+      )}
+      {state.dateEnabled && parameters.dateStyle && (
+        <div style={state.dateStyle}>
+          <AnniversaryDate
+            style={parameters.dateStyle}
+            day={anniversary.day}
+            month={anniversary.month}
+          />
+        </div>
+      )}
+      {state.dateEnabled && parameters.separator && (
+        <Separator order={state.dateStyle.order} {...separatorProps} />
+      )}
+    </div>
+  );
+};