react-weekly-planning 1.0.28 → 1.0.29

package/index.tsx

@@ -1,50 +1,7 @@
 import "./style.css";
-import {
-  AddTaskPropsType,
-  CalendarPropsType,
-  DayPropsType,
-  GroupPropsType,
-  StyleType,
-  TaskContainerPropsType,
-  GroupsHeadContainerPropsType,
-  SumHoursContainerPropsType,
-  SumHoursHeadContainerPropsType,
-  TasksType,
-} from "./definitions";
-import {
-  getWeekDays,
-  getDayHourly,
-  calculerEcartSemaine,
-  getSessionStorageRecordForDragAndDrop,
-  sumHoursByGroups,
-  millisecondsToDate,
-  compareWeekOffset,
-  saveTasksToLocalStorage,
-} from "./lib/utils";
+import { CalendarPropsType } from "./definitions";
+import CalendarTable from "./components/CalendarTable";
 
-const theadTrStyle: StyleType = {
-  color: "#0f5173",
-  fontWeight: "300",
-  position: "sticky",
-  top: 0,
-};
-
-const groupTdStyle: StyleType = {
-  height: "auto",
-  width: "150px",
-};
-
-const groupContainerStyle: StyleType = {
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "0.75rem", // Correspond à gap-3
-  padding: "0.75rem", // Correspond à p-3
-  color: "#0f5173",
-  cursor: "pointer",
-};
 
 /**
  * Calendar component to display tasks and groups in a weekly view.
@@ -91,533 +48,14 @@ const groupContainerStyle: StyleType = {
  * @param {Function} [props.handleClickTask] - Handler function for clicking a task.
  * @returns {JSX.Element} The rendered Calendar component.
  */
-const Calendar = ({
-  style,
-  className,
-  groups,
-  weekOffset,
-  date,
-  groupRender,
-  dayRender,
-  rowsStyle,
-  groupsColsStyle,
-  daysColsStyle,
-  addTaskRender,
-  handleAddTask,
-  dayClassName,
-  dayStyle,
-  groupClassName,
-  groupStyle,
-  addTaskClassName,
-  addTaskStyle,
-  tasks,
-  handleDragTask,
-  handleDropTask,
-  taskRender,
-  groupsHeadRender,
-  sumHoursRender,
-  sumHoursHeadRender,
-  handleDragTaskEnd,
-  rowsClassName,
-  daysColsClassName,
-  sumHoursContainerClassName,
-  sumHoursContainerStyle,
-  groupHeadContainerClassName,
-  groupHeadContainerStyle,
-  groupsColsClassName,
-  taskContainerClassName,
-  taskContainerStyle,
-  sumHoursHeadClassName,
-  sumHoursHeadStyle,
-  handleClickGroup,
-  handleClickTask,
-}: CalendarPropsType) => {
-  const weekOffsetByDate = calculerEcartSemaine(date);
-  const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
-  const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
-
-  const handleDragOver = (event: React.DragEvent<HTMLTableDataCellElement>) => {
-    event.preventDefault();
-  };
-
-  saveTasksToLocalStorage(tasks);
-  return (
-    <table className={`planningCalendar ${className}`} style={{ ...style }}>
-      <thead>
-        <tr
-          className={`${rowsClassName}`}
-          style={{ ...theadTrStyle, ...rowsStyle }}
-          key=""
-        >
-          <th className="dayTh">
-            <GroupsHeadContainer
-              className={`${groupHeadContainerClassName}`}
-              style={groupHeadContainerStyle}
-              groupsHeadRender={groupsHeadRender}
-            />
-          </th>
-          {weekDays.map((day, i) => (
-            <th
-              key={i}
-              className={`${daysColsClassName}`}
-              style={{ ...daysColsStyle }}
-            >
-              <DayContainer
-                style={dayStyle}
-                className={dayClassName}
-                dayIndex={i}
-                dayRender={dayRender}
-                day={day.day}
-                dayOfTheMonth={day.dayOfTheMonth}
-                dayMonth={day.dayMonth}
-                dayYear={day.dayYear}
-              />
-            </th>
-          ))}
-          <th className="totalTh">
-            <SumHoursHead
-              className={sumHoursHeadClassName}
-              style={sumHoursHeadStyle}
-              sumHoursHeadRender={sumHoursHeadRender}
-            />
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {groups?.map((group, i) => (
-          <tr
-            key={`${i} tr`}
-            className={`${rowsClassName}`}
-            style={{ ...rowsStyle }}
-          >
-            <td
-              className={`${groupsColsClassName}`}
-              key={i}
-              style={{ ...groupTdStyle, ...groupsColsStyle }}
-            >
-              <GroupContainer
-                style={groupStyle}
-                className={groupClassName}
-                groupRender={groupRender}
-                currentGroup={group}
-                handleClickGroup={handleClickGroup}
-              />
-            </td>
-            {dailyHours.map((_, positionDay) => (
-              <td
-                key={`td-${group.id}day-i${positionDay}`}
-                onDragOver={handleDragOver}
-                onDrop={(event) => {
-                  if (!handleDropTask || !tasks) return;
-                  const dropInfo = getSessionStorageRecordForDragAndDrop(
-                    tasks,
-                    positionDay,
-                    group.id
-                  );
-                  if (!dropInfo) return;
-                  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",
-                  }}
-                >
-                  <>
-                    {tasks
-                      ?.filter(
-                        (task) =>
-                          task.dayIndex === positionDay &&
-                          task.groupId === group.id &&
-                          compareWeekOffset(
-                            date,
-                            weekOffset || 0,
-                            task.taskDate
-                          )
-                      )
-                      .sort((a, b) => a.taskStart - b.taskStart)
-                      .map((task, taskKey) => {
-                        return (
-                          <TaskContainer
-                            key={`${taskKey} task`}
-                            handleDragTask={handleDragTask}
-                            taskRender={taskRender}
-                            handleDragTaskEnd={handleDragTaskEnd}
-                            style={taskContainerStyle}
-                            className={`${taskContainerClassName}`}
-                            currentTask={task}
-                            handleClickTask={handleClickTask}
-                          />
-                        );
-                      })}
-                  </>
-
-                  <AddTask
-                    addTaskStyle={addTaskStyle}
-                    addTaskClassName={addTaskClassName}
-                    currentGroup={group}
-                    dayInfo={dailyHours[positionDay]}
-                    addTaskRender={addTaskRender}
-                    handleAddTask={handleAddTask}
-                  />
-                </div>
-              </td>
-            ))}
-            <td key={`${i}sumHours`}>
-              <SumHoursContainer
-                groupId={group.id}
-                tasks={tasks}
-                weekOffset={weekOffset || 0}
-                calendarDate={date}
-                sumHoursRender={sumHoursRender}
-                sumHoursByGroups={sumHoursByGroups(
-                  group.id,
-                  tasks,
-                  weekOffset || 0,
-                  date
-                )}
-                className={sumHoursContainerClassName}
-                style={sumHoursContainerStyle}
-              />
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};
-
-const SumHoursHead = ({
-  sumHoursHeadRender,
-  className,
-  style,
-}: SumHoursHeadContainerPropsType) => {
-  if (sumHoursHeadRender) {
-    return <>{sumHoursHeadRender()}</>;
-  }
-  return (
-    <div
-      className={`${className}`}
-      style={{ textAlign: "right", marginRight: "5px", ...style }}
-    >
-      Hours
-    </div>
-  );
-};
-
-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>
-  );
-};
-
-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>
-  );
-};
-
-const GroupContainer = ({
-  className,
-  style,
-  groupRender,
-  currentGroup,
-  handleClickGroup,
-}: GroupPropsType) => {
-  if (groupRender) {
-    return <>{groupRender({ currentGroup })}</>;
-  }
+const Calendar = (props: CalendarPropsType) => {
 
-  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>
+    <CalendarTable
+      {...props}
+    />
   );
 };
 
-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>
-  );
-};
-
-const TaskContainer = ({
-  handleDragTask,
-  taskRender,
-  handleDragTaskEnd,
-  style,
-  className,
-  currentTask,
-  handleClickTask,
-}: TaskContainerPropsType) => {
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-    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: React.DragEvent<HTMLDivElement>) => {
-    if (!handleDragTaskEnd) return;
-    handleDragTaskEnd(event);
-  };
-  const handleClick = () => {
-    if (!handleClickTask) return;
-    handleClickTask(currentTask);
-  };
-  if (taskRender) {
-    return (
-      <div
-        onClick={handleClick}
-        id={currentTask.taskId}
-        className={`taskContainer ${className}`}
-        style={{ ...style }}
-        draggable
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-      >
-        {taskRender({
-          currentTask,
-        })}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      onClick={handleClick}
-      id={currentTask.taskId}
-      className={`taskContainer  ${className}`}
-      style={{ ...style }}
-      draggable
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <p className="tasklabel">{currentTask.task && currentTask.task}</p>
-      <p className="taskhour">
-        {currentTask.taskStart &&
-          currentTask.taskEnd &&
-          `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${
-            millisecondsToDate(currentTask.taskEnd).formattedDate
-          }`}
-      </p>
-    </div>
-  );
-};
-
-const GroupsHeadContainer = ({
-  groupsHeadRender,
-  style,
-  className,
-}: GroupsHeadContainerPropsType) => {
-  if (groupsHeadRender) {
-    return <>{groupsHeadRender()}</>;
-  }
-  return (
-    <div className={`${className}`} style={style}>
-      WeeklyCalendar
-    </div>
-  );
-};
-
-export const updateCalendarDateWithOffset = (
-  offset: number,
-  calendarDate: Date
-) => {
-  const newDate = new Date(calendarDate);
-  newDate.setDate(newDate.getDate() + offset);
-  return newDate;
-};
-
-export const updateOffsetWithDateCalendar = (calendarDate: Date) => {
-  return calculerEcartSemaine(calendarDate);
-};
-
-export const millisecondsToHours = (milliseconds: number) => {
-  return millisecondsToDate(milliseconds).formattedDate;
-};
-
-export const checkDuplicates = (
-  tasks: TasksType,
-  taskStart: number,
-  taskEnd: number,
-  groupId: string
-) => {
-  const findDuplicates = tasks
-    ?.filter(
-      (task) =>
-        (taskStart >= task.taskStart && taskStart < task.taskEnd) ||
-        (taskEnd > task.taskStart && taskEnd < task.taskEnd) ||
-        (taskStart <= task.taskStart &&
-          taskEnd > task.taskStart &&
-          taskEnd >= task.taskEnd &&
-          taskStart <= task.taskEnd)
-    )
-    .filter((task) => task.groupId === groupId);
-  return findDuplicates.length > 0;
-};
-
-export const getSavedTasks = () => {
-  const taskSavedString = window.localStorage.getItem("CalendarTaskSaved");
-  if (!taskSavedString) {
-    return [];
-  }
-  const tasksTable: TasksType = JSON.parse(taskSavedString);
-
-  const savedTasks: TasksType | any = tasksTable.map((task) => {
-    const { taskDate, taskExpiryDate, ...rest } = task;
-    if (taskExpiryDate) {
-      return {
-        taskDate: new Date(taskDate),
-        taskExpiryDate: new Date(taskExpiryDate),
-        ...rest,
-      };
-    }
-  });
-  return savedTasks;
-};
-
-export const deleteTaskSaved = (taskId: string) => {
-  const tasksSavedString = window.localStorage.getItem("CalendarTaskSaved");
-  if (!tasksSavedString) return;
-  const tasksSavedTable: TasksType = JSON.parse(tasksSavedString);
-  const taskIndex = tasksSavedTable.findIndex((task) => task.taskId === taskId);
-  if (taskIndex) {
-    tasksSavedTable.splice(taskIndex, 1);
-    window.localStorage.setItem(
-      "CalendarTaskSaved",
-      JSON.stringify(tasksSavedTable)
-    );
-  }
-};
-
-export const deleteTasksSaved = () => {
-  window.localStorage.removeItem("CalendarTaskSaved");
-};
-
 export default Calendar;

package/lib/slyles.js

@@ -0,0 +1,21 @@
+export const theadTrStyle = {
+    color: "#0f5173",
+    fontWeight: "300",
+    position: "sticky",
+    top: 0,
+};
+export const groupTdStyle = {
+    height: "auto",
+    width: "150px",
+};
+export const groupContainerStyle = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.75rem", // Correspond à gap-3
+    padding: "0.75rem", // Correspond à p-3
+    color: "#0f5173",
+    cursor: "pointer",
+};

package/lib/slyles.ts

@@ -0,0 +1,25 @@
+import { StyleType } from "../definitions";
+
+export const theadTrStyle: StyleType = {
+  color: "#0f5173",
+  fontWeight: "300",
+  position: "sticky",
+  top: 0,
+};
+
+export const groupTdStyle: StyleType = {
+  height: "auto",
+  width: "150px",
+};
+
+export const groupContainerStyle: StyleType = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.75rem", // Correspond à gap-3
+  padding: "0.75rem", // Correspond à p-3
+  color: "#0f5173",
+  cursor: "pointer",
+};