react-weekly-planning 1.0.29 → 1.0.31

package/components/CalendarForday.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../style.css";
+import { memo, useEffect } from "react";
+import { compareWeekOffset, saveTasksToLocalStorage } from "../lib/utils";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+import AddTask from "./AddTask";
+import TaskContainer from "./TaskContainer";
+import GroupContainer from "./GroupContainer";
+import DayContainer from "./DayContainer";
+function CalendarForDay(props) {
+    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
+    useEffect(() => {
+        saveTasksToLocalStorage(props.tasks);
+    }, [props.tasks]);
+    const currentDay = weekDays[props.dayOffset || 0];
+    const currentDailyHours = dailyHours[props.dayOffset || 0];
+    return (_jsxs("div", { className: ` CalendarTableForDay ${props.className}`, style: Object.assign({}, props.style), children: [currentDay && (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })), _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: currentDailyHours &&
+                    props.groups.map((group, i) => {
+                        return (_jsxs("div", { style: Object.assign({ width: "100%", height: "auto", background: "#f2f8f8", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)" }, props.rowsStyle), className: `${props.rowsClassName}`, children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), props.tasks.map((task, taskKey) => {
+                                    if (task.dayIndex === (props.dayOffset || 0) &&
+                                        task.groupId === group.id &&
+                                        compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate)) {
+                                        return (_jsx(TaskContainer, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${taskKey} task`));
+                                    }
+                                    else
+                                        return "";
+                                }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, i));
+                    }) })] }));
+}
+export default memo(CalendarForDay, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset);

package/components/CalendarForday.tsx

@@ -0,0 +1,130 @@
+"use client";
+import "../style.css";
+import { memo, useEffect } from "react";
+
+import { CalendarPropsType, CalendarTablePropsType } from "../definitions";
+import { compareWeekOffset, saveTasksToLocalStorage } from "../lib/utils";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+
+import AddTask from "./AddTask";
+import TaskContainer from "./TaskContainer";
+import GroupContainer from "./GroupContainer";
+import DayContainer from "./DayContainer";
+
+function CalendarForDay(props: CalendarTablePropsType) {
+  const { dailyHours, weekDays } = useCalendarDateState(
+    props.date,
+    props.weekOffset,
+    props.timeZone
+  );
+
+  useEffect(() => {
+    saveTasksToLocalStorage(props.tasks);
+  }, [props.tasks]);
+
+  const currentDay = weekDays[props.dayOffset || 0];
+  const currentDailyHours = dailyHours[props.dayOffset || 0];
+
+  return (
+    <div
+      className={` CalendarTableForDay ${props.className}`}
+      style={{ ...props.style }}
+    >
+      {currentDay && (
+        <DayContainer
+          style={props.dayStyle}
+          className={props.dayClassName}
+          dayIndex={props.dayOffset || 0}
+          dayRender={props.dayRender}
+          day={currentDay.day}
+          dayOfTheMonth={currentDay.dayOfTheMonth}
+          dayMonth={currentDay.dayMonth}
+          dayYear={currentDay.dayYear}
+        />
+      )}
+      <div className={`CalendarTableForDayTasksContainer`}>
+        {currentDailyHours &&
+          props.groups.map((group, i) => {
+            return (
+              <div
+                key={i}
+                style={{
+                  width: "100%",
+                  height: "auto",
+                  background: "#f2f8f8",
+                  padding: "5px",
+                  borderBottom: "1.5px solid #0f52737e",
+                  borderRight: "0.74px solid rgba(198, 219, 225, 0.68)",
+                  borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)",
+                  ...props.rowsStyle,
+                }}
+                className={`${props.rowsClassName}`}
+              >
+                <div
+                  style={{
+                    width: "auto",
+                    height: "auto",
+                    ...props.groupsColsStyle,
+                  }}
+                  className={props.groupsColsClassName}
+                >
+                  <GroupContainer
+                    style={props.groupContainerStyle}
+                    className={props.groupContainerClassName}
+                    groupRender={props.groupRender}
+                    currentGroup={group}
+                    handleClickGroup={props.handleClickGroup}
+                  />
+                </div>
+
+                {props.tasks.map((task, taskKey) => {
+                  if (
+                    task.dayIndex === (props.dayOffset || 0) &&
+                    task.groupId === group.id &&
+                    compareWeekOffset(
+                      props.date,
+                      props.weekOffset || 0,
+                      task.taskDate
+                    )
+                  ) {
+                    return (
+                      <TaskContainer
+                        key={`${taskKey} task`}
+                        handleDragTask={props.handleDragTask}
+                        taskRender={props.taskRender}
+                        handleDragTaskEnd={props.handleDragTaskEnd}
+                        style={props.taskContainerStyle}
+                        className={`${props.taskContainerClassName}`}
+                        currentTask={task}
+                        handleClickTask={props.handleClickTask}
+                      />
+                    );
+                  } else return "";
+                })}
+                <AddTask
+                  addTaskStyle={props.addTaskStyle}
+                  addTaskClassName={props.addTaskClassName}
+                  currentGroup={group}
+                  dayInfo={currentDailyHours}
+                  addTaskRender={props.addTaskRender}
+                  handleAddTask={props.handleAddTask}
+                />
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default memo(
+  CalendarForDay,
+  (
+    prevProps: Readonly<CalendarPropsType>,
+    nextProps: Readonly<CalendarPropsType>
+  ) =>
+    prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset
+);

package/components/DayContainer/index.js

@@ -1,15 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
-    if (dayRender) {
-        return (_jsx(_Fragment, { children: dayRender({
-                dayIndex,
-                day,
-                dayOfTheMonth,
-                dayMonth,
-                dayYear,
-            }) }));
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
-};
-export default memo(DayContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
+    if (dayRender) {
+        return (_jsx(_Fragment, { children: dayRender({
+                dayIndex,
+                day,
+                dayOfTheMonth,
+                dayMonth,
+                dayYear,
+            }) }));
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
+};
+export default memo(DayContainer);

package/components/DayContainer/index.tsx

@@ -11,6 +11,7 @@ const DayContainer = ({
   className,
   style,
 }: DayPropsType) => {
+  
   if (dayRender) {
     return (
       <>

package/components/GroupContainer/index.js

@@ -1,15 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { groupContainerStyle } from "../../lib/slyles";
-const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
-    if (groupRender) {
-        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
-    }
-    const handleClick = () => {
-        if (!handleClickGroup)
-            return;
-        handleClickGroup(currentGroup);
-    };
-    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
-};
-export default memo(GroupContainer);
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { groupContainerStyle } from "../../lib/slyles";
+const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
+    if (groupRender) {
+        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
+    }
+    const handleClick = () => {
+        if (!handleClickGroup)
+            return;
+        handleClickGroup(currentGroup);
+    };
+    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
+};
+export default memo(GroupContainer);

package/components/GroupContainer/index.tsx

@@ -9,6 +9,7 @@ const GroupContainer = ({
   currentGroup,
   handleClickGroup,
 }: GroupPropsType) => {
+  
   if (groupRender) {
     return <>{groupRender({ currentGroup })}</>;
   }

package/components/GroupsHeadContainer/index.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
-    if (groupsHeadRender) {
-        return _jsx(_Fragment, { children: groupsHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
-};
-export default memo(GroupsHeadContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
+    if (groupsHeadRender) {
+        return _jsx(_Fragment, { children: groupsHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
+};
+export default memo(GroupsHeadContainer);

package/components/SumHoursContainer/index.js

@@ -1,15 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const SumHoursContainer = ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
-    if (sumHoursRender) {
-        return (_jsx(_Fragment, { children: sumHoursRender({
-                groupId,
-                tasks,
-                weekOffset,
-                calendarDate,
-                sumHoursByGroups,
-            }) }));
-    }
-    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: sumHoursByGroups }));
-};
-export default memo(SumHoursContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { totalLabel } from "../../lib/utils";
+const SumHoursContainer = ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
+    if (sumHoursRender) {
+        return (_jsx(_Fragment, { children: sumHoursRender({
+                groupId,
+                tasks,
+                weekOffset,
+                calendarDate,
+                sumHoursByGroups,
+            }) }));
+    }
+    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: totalLabel(sumHoursByGroups) }));
+};
+export default memo(SumHoursContainer);

package/components/SumHoursContainer/index.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { SumHoursContainerPropsType } from "../../definitions";
+import { millisecondsToHours, totalLabel } from "../../lib/utils";
 
 const SumHoursContainer = ({
   groupId,
@@ -30,7 +31,7 @@ const SumHoursContainer = ({
       style={{ textAlign: "right", marginRight: "5px", ...style }}
       className={`${className}`}
     >
-      {sumHoursByGroups}
+      {totalLabel(sumHoursByGroups)}
     </div>
   );
 };

package/components/SumHoursHead/index.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
-    if (sumHoursHeadRender) {
-        return _jsx(_Fragment, { children: sumHoursHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
-};
-export default memo(SumHoursHead);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
+    if (sumHoursHeadRender) {
+        return _jsx(_Fragment, { children: sumHoursHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
+};
+export default memo(SumHoursHead);

package/components/TaskContainer/index.js

@@ -1,35 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { millisecondsToDate } from "../../lib/utils";
-const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
-    const handleDragStart = (event) => {
-        if (!handleDragTask)
-            return;
-        event.dataTransfer.effectAllowed = "move";
-        event.dataTransfer.setData("text/plain", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
-        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
-        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
-        handleDragTask(event, currentTask);
-    };
-    const handleDragEnd = (event) => {
-        if (!handleDragTaskEnd)
-            return;
-        handleDragTaskEnd(event);
-    };
-    const handleClick = () => {
-        if (!handleClickTask)
-            return;
-        handleClickTask(currentTask);
-    };
-    if (taskRender) {
-        return (_jsx("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
-                currentTask,
-            }) }));
-    }
-    return (_jsxs("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
-                    currentTask.taskEnd &&
-                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
-};
-export default memo(TaskContainer);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { millisecondsToDate } from "../../lib/utils";
+const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
+    const handleDragStart = (event) => {
+        if (!handleDragTask)
+            return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", currentTask.taskId);
+        window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
+        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
+        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
+        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
+        handleDragTask(event, currentTask);
+    };
+    const handleDragEnd = (event) => {
+        if (!handleDragTaskEnd)
+            return;
+        handleDragTaskEnd(event);
+    };
+    const handleClick = () => {
+        if (!handleClickTask)
+            return;
+        handleClickTask(currentTask);
+    };
+    if (taskRender) {
+        return (_jsx("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
+                currentTask,
+            }) }));
+    }
+    return (_jsxs("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
+                    currentTask.taskEnd &&
+                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
+};
+export default memo(TaskContainer);

package/components/TaskContainer/index.tsx

@@ -10,7 +10,6 @@ const TaskContainer = ({
   className,
   currentTask,
   handleClickTask,
-
 }: TaskContainerPropsType) => {
   
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
@@ -72,6 +71,7 @@ const TaskContainer = ({
       onDragEnd={handleDragEnd}
     >
       <p className="tasklabel">{currentTask.task && currentTask.task}</p>
+
       <p className="taskhour">
         {currentTask.taskStart &&
           currentTask.taskEnd &&

package/components/TaskList/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FixedSizeList as List } from "react-window";
+import TaskContainer from "../TaskContainer";
+const TaskList = ({ tasks }) => (_jsx(List, { height: 300, itemCount: tasks.length, itemSize: 50, width: "100%", children: ({ index, style }) => (_jsx("div", { style: style, children: _jsx(TaskContainer, { currentTask: tasks[index] }, tasks[index].id) })) }));
+export default TaskList;

package/components/TaskList/index.tsx

@@ -0,0 +1,20 @@
+import { FixedSizeList as List } from "react-window";
+import TaskContainer from "../TaskContainer";
+import { TaskFeildsType } from "../../definitions";
+
+const TaskList = ({ tasks }: { tasks: TaskFeildsType[] }) => (
+  <List
+    height={300} 
+    itemCount={tasks.length}
+    itemSize={50} 
+    width="100%"
+  >
+    {({ index, style }) => (
+      <div style={style}>
+        <TaskContainer key={tasks[index].id} currentTask={tasks[index]} />
+      </div>
+    )}
+  </List>
+);
+
+export default TaskList;

package/contexts/CalendarContext.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const CalendarContext = createContext({
-    groups: [],
-    weekOffset: 0,
-    date: new Date()
-});
-const CalendarContextProvider = ({ groups, weekOffset, children, date }) => {
-    return (_jsx(CalendarContext.Provider, { value: { groups, weekOffset, date }, children: children }));
-};
-export const useCalendarContext = () => useContext(CalendarContext);
-export default CalendarContextProvider;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const CalendarContext = createContext({
+    groups: [],
+    weekOffset: 0,
+    date: new Date()
+});
+const CalendarContextProvider = ({ groups, weekOffset, children, date }) => {
+    return (_jsx(CalendarContext.Provider, { value: { groups, weekOffset, date }, children: children }));
+};
+export const useCalendarContext = () => useContext(CalendarContext);
+export default CalendarContextProvider;

package/contexts/CalendarContext.tsx

@@ -1,5 +1,7 @@
 import { createContext, useContext } from "react";
 import { GroupPropsType } from "../definitions";
+
+
 type CalendarContextProviderPropsType = {
   children: React.ReactNode;
   groups: GroupPropsType[];
@@ -30,5 +32,7 @@ const CalendarContextProvider = ({
     </CalendarContext.Provider>
   );
 };
+
+
 export const useCalendarContext = () => useContext(CalendarContext);
 export default CalendarContextProvider;

package/definitions/index.js

@@ -1 +1 @@
-export {};
+export {};