react-weekly-planning 1.0.28 → 1.0.30

package/components/CalendarForWeek.tsx

@@ -0,0 +1,229 @@
+"use client";
+import {
+  CalendarPropsType,
+  CalendarTablePropsType,
+  TaskFeildsType,
+} 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,
+  updateOffsetWithDateCalendar,
+} from "../lib/utils";
+
+import TaskContainer from "./TaskContainer";
+
+import AddTask from "./AddTask";
+import SumHoursContainer from "./SumHoursContainer";
+import { memo, useEffect } from "react";
+import useCalendarDateState from "../hooks/useCalendarDateState";
+
+function CalendarForWeek(props: CalendarTablePropsType) {
+  const { dailyHours, weekDays } = useCalendarDateState(
+    props.date,
+    props.weekOffset,
+    props.timeZone
+  );
+
+  const handleDragOver = (event: React.DragEvent<HTMLTableCellElement>) => {
+    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 ${props.groupsColsClassName}`}
+            style={{ ...props.groupsColsStyle }}
+          >
+            <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 ${props.hoursColsClassName}`}
+            style={props.hoursColsStyle}
+          >
+            <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.groupContainerStyle}
+                className={props.groupContainerClassName}
+                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`}
+                className={props.dayColsClassName}
+                style={props.dayColsStyle}
+              >
+                <div
+                  key={positionDay}
+                  style={{
+                    display: "flex",
+                    width: "100%",
+                    height: "100%",
+                    flexDirection: "column",
+                    padding: "5px",
+                  }}
+                >
+                  <>
+                    {props.tasks
+                      .map((task, taskKey) => {
+                        if (
+                          task.dayIndex === positionDay &&
+                          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={dailyHours[positionDay]}
+                    addTaskRender={props.addTaskRender}
+                    handleAddTask={props.handleAddTask}
+                  />
+                </div>
+              </td>
+            ))}
+            <td
+              key={`${i}sumHours`}
+              style={props.hoursColsStyle}
+              className={props.hoursColsClassName}
+            >
+              <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(
+  CalendarForWeek,
+  (
+    prevProps: Readonly<CalendarPropsType>,
+    nextProps: Readonly<CalendarPropsType>
+  ) =>
+    prevProps.tasks === nextProps.tasks &&
+    prevProps.date === nextProps.date &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.weekOffset === nextProps.weekOffset
+);

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

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