react-weekly-planning 1.0.27 → 1.0.29

package/README.md

@@ -85,7 +85,7 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
 
   **Example**:
   ```jsx
-  import {getSavedTasks} from "react-weekly-planning";
+  import {getSavedTasks} from "react-weekly-planning/lib/utils";
   const [tasks,setTasks]=useState([])
 
   useEffect(()=>{
@@ -173,6 +173,7 @@ Props for the Calendar component.
 
   **Example**:
   ```javascript
+  import {updateOffsetWithDateCalendar} from "react-weekly-planning/lib/utils";
   const offset = updateOffsetWithDateCalendar(new Date());
   console.log(offset); // Logs the week offset for the given date
   ```
@@ -186,6 +187,7 @@ Props for the Calendar component.
 
   **Example**:
   ```javascript
+  import {millisecondsToHours} from "react-weekly-planning/lib/utils";
   const formattedTime = millisecondsToHours(1716905215397);
   console.log(formattedTime); // Logs the formatted time for 14h06
   ```

package/components/AddTask/index.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
+    if (addTaskRender) {
+        return (_jsx(_Fragment, { children: addTaskRender({
+                currentGroup,
+                dayInfo,
+            }) }));
+    }
+    const handleClick = () => {
+        if (!handleAddTask)
+            return;
+        handleAddTask(currentGroup, dayInfo);
+    };
+    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
+};
+export default memo(AddTask);

package/components/AddTask/index.tsx

@@ -0,0 +1,39 @@
+import { memo } from "react";
+import { AddTaskPropsType } from "../../definitions";
+
+const AddTask = ({
+  currentGroup,
+  handleAddTask,
+  addTaskRender,
+  dayInfo,
+  addTaskStyle,
+  addTaskClassName,
+}: AddTaskPropsType) => {
+  if (addTaskRender) {
+    return (
+      <>
+        {addTaskRender({
+          currentGroup,
+          dayInfo,
+        })}
+      </>
+    );
+  }
+
+  const handleClick = () => {
+    if (!handleAddTask) return;
+    handleAddTask(currentGroup, dayInfo);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      style={addTaskStyle}
+      className={`addPlanStyle ${addTaskClassName}`}
+    >
+      +
+    </div>
+  );
+};
+
+export default memo(AddTask);

package/components/CalendarTable.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import GroupContainer from "./GroupContainer";
+import GroupsHeadContainer from "./GroupsHeadContainer";
+import { groupTdStyle, theadTrStyle } from "../lib/slyles";
+import DayContainer from "./DayContainer";
+import SumHoursHead from "./SumHoursHead";
+import { compareWeekOffset, getSessionStorageRecordForDragAndDrop, saveTasksToLocalStorage, sumHoursByGroups, } from "../lib/utils";
+import TaskContainer from "./TaskContainer";
+import AddTask from "./AddTask";
+import SumHoursContainer from "./SumHoursContainer";
+import { memo, useCallback, useEffect } from "react";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+function CalendarTable(props) {
+    var _a;
+    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset);
+    const handleDragOver = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    useEffect(() => {
+        saveTasksToLocalStorage(props.tasks);
+    }, [props.tasks]);
+    return (_jsxs("table", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("th", { className: "dayTh", children: _jsx(GroupsHeadContainer, { className: `${props.groupHeadContainerClassName}`, style: props.groupHeadContainerStyle, groupsHeadRender: props.groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${props.daysColsClassName}`, style: Object.assign({}, props.daysColsStyle), children: _jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: i, dayRender: props.dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { className: "totalTh", children: _jsx(SumHoursHead, { className: props.sumHoursHeadClassName, style: props.sumHoursHeadStyle, sumHoursHeadRender: props.sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => (_jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign({}, props.rowsStyle), children: [_jsx("td", { className: `${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupStyle, className: props.groupClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, i), dailyHours.map((_, positionDay) => {
+                            var _a;
+                            return (_jsx("td", { onDragOver: handleDragOver, onDrop: (event) => {
+                                    if (!props.handleDropTask || !props.tasks)
+                                        return;
+                                    const dropInfo = getSessionStorageRecordForDragAndDrop(props.tasks, positionDay, group.id);
+                                    if (!dropInfo)
+                                        return;
+                                    props.handleDropTask(event, dropInfo.taskDropStart, dropInfo.taskDropEnd, dropInfo.taskDropDate, group.id, positionDay, dropInfo.newTask, dropInfo.newTasks);
+                                }, id: `td-${group.id}day-i`, children: _jsxs("div", { style: {
+                                        display: "flex",
+                                        width: "100%",
+                                        height: "100%",
+                                        flexDirection: "column",
+                                        padding: "5px",
+                                    }, children: [_jsx(_Fragment, { children: (_a = props.tasks) === null || _a === void 0 ? void 0 : _a.filter((task) => task.dayIndex === positionDay &&
+                                                task.groupId === group.id &&
+                                                compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate)).sort((a, b) => a.taskStart - b.taskStart).map((task, taskKey) => {
+                                                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`));
+                                            }) }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: dailyHours[positionDay], addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, positionDay) }, `td-${group.id}day-i${positionDay}`));
+                        }), _jsx("td", { children: _jsx(SumHoursContainer, { groupId: group.id, tasks: props.tasks, weekOffset: props.weekOffset || 0, calendarDate: props.date, sumHoursRender: props.sumHoursRender, sumHoursByGroups: sumHoursByGroups(group.id, props.tasks, props.weekOffset || 0, props.date), className: props.sumHoursContainerClassName, style: props.sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
+}
+export default memo(CalendarTable, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset);

package/components/CalendarTable.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { CalendarPropsType, CalendarTablePropsType } from "../definitions";
+import GroupContainer from "./GroupContainer";
+import GroupsHeadContainer from "./GroupsHeadContainer";
+
+import { groupTdStyle, theadTrStyle } from "../lib/slyles";
+import DayContainer from "./DayContainer";
+import SumHoursHead from "./SumHoursHead";
+
+import {
+  compareWeekOffset,
+  getSessionStorageRecordForDragAndDrop,
+  saveTasksToLocalStorage,
+  sumHoursByGroups,
+} from "../lib/utils";
+
+import TaskContainer from "./TaskContainer";
+import AddTask from "./AddTask";
+import SumHoursContainer from "./SumHoursContainer";
+import { memo, useCallback, useEffect } from "react";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+
+function CalendarTable(props: CalendarTablePropsType) {
+
+  const { dailyHours, weekDays } = useCalendarDateState(
+    props.date,
+    props.weekOffset
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLTableDataCellElement>) => {
+      event.preventDefault();
+    },
+    []
+  );
+
+  useEffect(() => {
+    saveTasksToLocalStorage(props.tasks);
+  }, [props.tasks]);
+
+  return (
+    <table
+      className={`planningCalendar ${props.className}`}
+      style={{ ...props.style }}
+    >
+      <thead>
+        <tr
+          className={`${props.rowsClassName}`}
+          style={{ ...theadTrStyle, ...props.rowsStyle }}
+          key=""
+        >
+          <th className="dayTh">
+            <GroupsHeadContainer
+              className={`${props.groupHeadContainerClassName}`}
+              style={props.groupHeadContainerStyle}
+              groupsHeadRender={props.groupsHeadRender}
+            />
+          </th>
+          {weekDays.map((day, i) => (
+            <th
+              key={i}
+              className={`${props.daysColsClassName}`}
+              style={{ ...props.daysColsStyle }}
+            >
+              <DayContainer
+                style={props.dayStyle}
+                className={props.dayClassName}
+                dayIndex={i}
+                dayRender={props.dayRender}
+                day={day.day}
+                dayOfTheMonth={day.dayOfTheMonth}
+                dayMonth={day.dayMonth}
+                dayYear={day.dayYear}
+              />
+            </th>
+          ))}
+          <th className="totalTh">
+            <SumHoursHead
+              className={props.sumHoursHeadClassName}
+              style={props.sumHoursHeadStyle}
+              sumHoursHeadRender={props.sumHoursHeadRender}
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.groups?.map((group, i) => (
+          <tr
+            key={`${i} tr`}
+            className={`${props.rowsClassName}`}
+            style={{ ...props.rowsStyle }}
+          >
+            <td
+              className={`${props.groupsColsClassName}`}
+              key={i}
+              style={{ ...groupTdStyle, ...props.groupsColsStyle }}
+            >
+              <GroupContainer
+                style={props.groupStyle}
+                className={props.groupClassName}
+                groupRender={props.groupRender}
+                currentGroup={group}
+                handleClickGroup={props.handleClickGroup}
+              />
+            </td>
+            {dailyHours.map((_, positionDay) => (
+              <td
+                key={`td-${group.id}day-i${positionDay}`}
+                onDragOver={handleDragOver}
+                onDrop={(event) => {
+                  if (!props.handleDropTask || !props.tasks) return;
+                  const dropInfo = getSessionStorageRecordForDragAndDrop(
+                    props.tasks,
+                    positionDay,
+                    group.id
+                  );
+                  if (!dropInfo) return;
+                  props.handleDropTask(
+                    event,
+                    dropInfo.taskDropStart,
+                    dropInfo.taskDropEnd,
+                    dropInfo.taskDropDate,
+                    group.id,
+                    positionDay,
+                    dropInfo.newTask,
+                    dropInfo.newTasks
+                  );
+                }}
+                id={`td-${group.id}day-i`}
+              >
+                <div
+                  key={positionDay}
+                  style={{
+                    display: "flex",
+                    width: "100%",
+                    height: "100%",
+                    flexDirection: "column",
+                    padding: "5px",
+                  }}
+                >
+                  <>
+                    {props.tasks
+                      ?.filter(
+                        (task) =>
+                          task.dayIndex === positionDay &&
+                          task.groupId === group.id &&
+                          compareWeekOffset(
+                            props.date,
+                            props.weekOffset || 0,
+                            task.taskDate
+                          )
+                      )
+                      .sort((a, b) => a.taskStart - b.taskStart)
+                      .map((task, taskKey) => {
+                        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}
+                          />
+                        );
+                      })}
+                  </>
+
+                  <AddTask
+                    addTaskStyle={props.addTaskStyle}
+                    addTaskClassName={props.addTaskClassName}
+                    currentGroup={group}
+                    dayInfo={dailyHours[positionDay]}
+                    addTaskRender={props.addTaskRender}
+                    handleAddTask={props.handleAddTask}
+                  />
+                </div>
+              </td>
+            ))}
+            <td key={`${i}sumHours`}>
+              <SumHoursContainer
+                groupId={group.id}
+                tasks={props.tasks}
+                weekOffset={props.weekOffset || 0}
+                calendarDate={props.date}
+                sumHoursRender={props.sumHoursRender}
+                sumHoursByGroups={sumHoursByGroups(
+                  group.id,
+                  props.tasks,
+                  props.weekOffset || 0,
+                  props.date
+                )}
+                className={props.sumHoursContainerClassName}
+                style={props.sumHoursContainerStyle}
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default memo(
+
+  CalendarTable,
+  (
+    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

@@ -0,0 +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);

package/components/DayContainer/index.tsx

@@ -0,0 +1,35 @@
+import { memo } from "react";
+import { DayPropsType } from "../../definitions";
+
+const DayContainer = ({
+  dayIndex,
+  dayOfTheMonth,
+  day,
+  dayMonth,
+  dayYear,
+  dayRender,
+  className,
+  style,
+}: DayPropsType) => {
+  if (dayRender) {
+    return (
+      <>
+        {dayRender({
+          dayIndex,
+          day,
+          dayOfTheMonth,
+          dayMonth,
+          dayYear,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <div className={`${className}`} style={style}>
+      {`${day}. ${dayOfTheMonth}`}
+    </div>
+  );
+};
+
+export default memo(DayContainer);

package/components/GroupContainer/index.js

@@ -0,0 +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);

package/components/GroupContainer/index.tsx

@@ -0,0 +1,41 @@
+import { memo } from "react";
+import { GroupPropsType } from "../../definitions";
+import { groupContainerStyle } from "../../lib/slyles";
+
+const GroupContainer = ({
+  className,
+  style,
+  groupRender,
+  currentGroup,
+  handleClickGroup,
+}: GroupPropsType) => {
+  if (groupRender) {
+    return <>{groupRender({ currentGroup })}</>;
+  }
+
+  const handleClick = () => {
+    if (!handleClickGroup) return;
+    handleClickGroup(currentGroup);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className={`${className}`}
+      style={{ ...groupContainerStyle, ...style }}
+    >
+      {currentGroup.imageUrl && (
+        <img
+          width={30}
+          height={30}
+          src={currentGroup.imageUrl}
+          alt="groupimg"
+        />
+      )}
+
+      <label>{currentGroup.label && currentGroup.label}</label>
+    </div>
+  );
+};
+
+export default memo(GroupContainer);

package/components/GroupsHeadContainer/index.js

@@ -0,0 +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);

package/components/GroupsHeadContainer/index.tsx

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { GroupsHeadContainerPropsType } from "../../definitions";
+
+const GroupsHeadContainer = ({
+  groupsHeadRender,
+  style,
+  className,
+}: GroupsHeadContainerPropsType) => {
+  if (groupsHeadRender) {
+    return <>{groupsHeadRender()}</>;
+  }
+  return (
+    <div className={`${className}`} style={style}>
+      WeeklyCalendar
+    </div>
+  );
+};
+
+export default memo(GroupsHeadContainer);

package/components/SumHoursContainer/index.js

@@ -0,0 +1,15 @@
+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);

package/components/SumHoursContainer/index.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react";
+import { SumHoursContainerPropsType } from "../../definitions";
+
+const SumHoursContainer = ({
+  groupId,
+  tasks,
+  weekOffset,
+  calendarDate,
+  sumHoursByGroups,
+  sumHoursRender,
+  className,
+  style,
+}: SumHoursContainerPropsType) => {
+  if (sumHoursRender) {
+    return (
+      <>
+        {sumHoursRender({
+          groupId,
+          tasks,
+          weekOffset,
+          calendarDate,
+          sumHoursByGroups,
+        })}
+      </>
+    );
+  }
+
+  return (
+    <div
+      style={{ textAlign: "right", marginRight: "5px", ...style }}
+      className={`${className}`}
+    >
+      {sumHoursByGroups}
+    </div>
+  );
+};
+
+export default memo(SumHoursContainer);

package/components/SumHoursHead/index.js

@@ -0,0 +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);

package/components/SumHoursHead/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from "react";
+import { SumHoursHeadContainerPropsType } from "../../definitions";
+
+const SumHoursHead = ({
+  sumHoursHeadRender,
+  className,
+  style,
+}: SumHoursHeadContainerPropsType) => {
+  if (sumHoursHeadRender) {
+    return <>{sumHoursHeadRender()}</>;
+  }
+  return (
+    <div
+      className={`${className}`}
+      style={{ textAlign: "right", marginRight: "5px", ...style }}
+    >
+      Hours
+    </div>
+  );
+};
+
+export default memo(SumHoursHead);

package/components/TaskContainer/index.js

@@ -0,0 +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);