react-weekly-planning 1.0.17 → 1.0.19

package/README.md

@@ -11,6 +11,10 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ![Planning Screenshot](https://raw.githubusercontent.com/Yvesmorel/react-pweekly-planning/main/assets/planning-screenshot.webp)
 
+[See the demo](https://react-weekly-planning-demo.vercel.app)
+
+[Demo repository](https://github.com/Yvesmorel/react-weekly-planning-demo.git)
+
 #### `weekOffset`
 
 - **Description**: This prop sets the offset for the week being displayed in the calendar.

package/definition.txt

@@ -316,3 +316,4 @@ export type SumHoursContainerPropsType = {
   style?: React.CSSProperties | undefined;
   className?: string;
 };
+https://www.linkedin.com/in/patrick-aime?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app

package/definitions/index.ts

@@ -310,6 +310,8 @@ export type TaskType = {
   dayIndex: number;
   /** Unique identifier for the task. */
   taskId: string;
+   /** This is a prop to save the date in local storage until a date of your choice */
+  taskExpiryDate?:Date
 };
 
 /**

package/index.js

@@ -1,41 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "./style.css";
-import { getWeekDays, getDayHourly, calculerEcartSemaine, getSessionStorageRecordForDragAndDrop, sumHoursByGroups, millisecondsToDate, compareWeekOffset, } from "./lib/utils";
-const tableStyle = {
-    width: "100%",
-    height: "150px",
-    borderRadius: "0.5rem",
-    zIndex: 10,
-};
-const trStyle = {
+import { getWeekDays, getDayHourly, calculerEcartSemaine, getSessionStorageRecordForDragAndDrop, sumHoursByGroups, millisecondsToDate, compareWeekOffset, saveTasksToLocalStorage, } from "./lib/utils";
+const theadTrStyle = {
     color: "#0f5173",
     fontWeight: "300",
     position: "sticky",
     top: 0,
 };
-const thStyle = {
-    color: "#0f5173",
-    paddingLeft: "5px",
-};
-const weekDayThStyle = {};
-const totalThStyle = {
-    width: "40px",
-    textAlign: "right",
-    paddingRight: "2px",
-};
-const tdStyle = {
+const groupTdStyle = {
     height: "auto",
     width: "150px",
 };
-const tableTrStyle = {
-    borderBottom: "1.5px solid #0f52737e",
-    // backgroundColor: "#f2f8fb",
-    padding: "2px",
-};
-const tableTdStyle = {
-    borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)",
-    borderRight: "0.74px solid rgba(198, 219, 225, 0.68)",
-};
 const groupContainerStyle = {
     width: "100%",
     height: "100%",
@@ -99,7 +85,8 @@ const Calendar = ({ style, className, groups, weekOffset, date, groupRender, day
     const handleDragOver = (event) => {
         event.preventDefault();
     };
-    return (_jsxs("table", { className: `${className}`, style: Object.assign(Object.assign({}, tableStyle), style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign(Object.assign({}, trStyle), tableTrStyle), rowsStyle), children: [_jsx("th", { style: thStyle, children: _jsx(GroupsHeadContainer, { className: `${groupHeadContainerClassName}`, style: groupHeadContainerStyle, groupsHeadRender: groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${daysColsClassName}`, style: Object.assign(Object.assign({}, weekDayThStyle), daysColsStyle), children: _jsx(DayContainer, { style: dayStyle, className: dayClassName, dayIndex: i, dayRender: dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { style: totalThStyle, children: _jsx(SumHoursHead, { className: sumHoursHeadClassName, style: sumHoursHeadStyle, sumHoursHeadRender: sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: groups === null || groups === void 0 ? void 0 : groups.map((group, i) => (_jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign({}, tableTrStyle), rowsStyle), children: [_jsx("td", { className: `${groupsColsClassName}`, style: Object.assign(Object.assign(Object.assign({}, tdStyle), tableTdStyle), groupsColsStyle), children: _jsx(GroupContainer, { style: groupStyle, className: groupClassName, groupRender: groupRender, currentGroup: group, handleClickGroup: handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { style: Object.assign({ width: "8vw" }, tableTdStyle), onDragOver: handleDragOver, onDrop: (event) => {
+    saveTasksToLocalStorage(tasks);
+    return (_jsxs("table", { className: `planningCalendar ${className}`, style: Object.assign({}, style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), rowsStyle), children: [_jsx("th", { className: "dayTh", children: _jsx(GroupsHeadContainer, { className: `${groupHeadContainerClassName}`, style: groupHeadContainerStyle, groupsHeadRender: groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${daysColsClassName}`, style: Object.assign({}, daysColsStyle), children: _jsx(DayContainer, { style: dayStyle, className: dayClassName, dayIndex: i, dayRender: dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { className: "totalTh", children: _jsx(SumHoursHead, { className: sumHoursHeadClassName, style: sumHoursHeadStyle, sumHoursHeadRender: sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: groups === null || groups === void 0 ? void 0 : groups.map((group, i) => (_jsxs("tr", { className: `${rowsClassName}`, style: Object.assign({}, rowsStyle), children: [_jsx("td", { className: `${groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), groupsColsStyle), children: _jsx(GroupContainer, { style: groupStyle, className: groupClassName, groupRender: groupRender, currentGroup: group, handleClickGroup: handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { onDragOver: handleDragOver, onDrop: (event) => {
                                 if (!handleDropTask || !tasks)
                                     return;
                                 const dropInfo = getSessionStorageRecordForDragAndDrop(tasks, positionDay, group.id);
@@ -230,4 +217,39 @@ export const checkDuplicates = (tasks, taskStart, taskEnd, groupId) => {
             taskStart <= task.taskEnd)).filter((task) => task.groupId === groupId);
     return findDuplicates.length > 0;
 };
+export const getTasksSaved = () => {
+    const taskSavedString = window.localStorage.getItem("CalendarTaskSaved");
+    if (!taskSavedString) {
+        return [];
+    }
+    const tasksTable = JSON.parse(taskSavedString);
+    const validTasks = tasksTable
+        .filter((task) => {
+        if (task === null || task === void 0 ? void 0 : task.taskExpiryDate) {
+            const taskDate = new Date(task === null || task === void 0 ? void 0 : task.taskExpiryDate);
+            return taskDate.getTime() >= Date.now();
+        }
+    })
+        .map((task) => {
+        const { taskDate, taskExpiryDate } = task, rest = __rest(task, ["taskDate", "taskExpiryDate"]);
+        if (taskExpiryDate) {
+            return Object.assign({ taskDate: new Date(taskDate), taskExpiryDate: new Date(taskExpiryDate) }, rest);
+        }
+    });
+    return validTasks;
+};
+export const deleteTaskSaved = (taskId) => {
+    const tasksSavedString = window.localStorage.getItem("CalendarTaskSaved");
+    if (!tasksSavedString)
+        return;
+    const tasksSavedTable = 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/index.tsx

@@ -9,8 +9,6 @@ import {
   GroupsHeadContainerPropsType,
   SumHoursContainerPropsType,
   SumHoursHeadContainerPropsType,
-  TaskType,
-  TaskFeildsType,
   TasksType,
 } from "./definitions";
 import {
@@ -21,48 +19,20 @@ import {
   sumHoursByGroups,
   millisecondsToDate,
   compareWeekOffset,
+  saveTasksToLocalStorage,
 } from "./lib/utils";
 
-const tableStyle: StyleType = {
-  width: "100%",
-  height: "150px",
-  borderRadius: "0.5rem",
-  zIndex: 10,
-};
-
-const trStyle: StyleType = {
+const theadTrStyle: StyleType = {
   color: "#0f5173",
   fontWeight: "300",
   position: "sticky",
   top: 0,
 };
 
-const thStyle: StyleType = {
-  color: "#0f5173",
-  paddingLeft: "5px",
-};
-
-const weekDayThStyle: StyleType = {};
-
-const totalThStyle: StyleType = {
-  width: "40px",
-  textAlign: "right",
-  paddingRight: "2px",
-};
-
-const tdStyle: StyleType = {
+const groupTdStyle: StyleType = {
   height: "auto",
   width: "150px",
 };
-const tableTrStyle: StyleType = {
-  borderBottom: "1.5px solid #0f52737e",
-  // backgroundColor: "#f2f8fb",
-  padding: "2px",
-};
-const tableTdStyle: StyleType = {
-  borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)",
-  borderRight: "0.74px solid rgba(198, 219, 225, 0.68)",
-};
 
 const groupContainerStyle: StyleType = {
   width: "100%",
@@ -169,15 +139,17 @@ const Calendar = ({
   const handleDragOver = (event: React.DragEvent<HTMLTableDataCellElement>) => {
     event.preventDefault();
   };
+
+  saveTasksToLocalStorage(tasks);
   return (
-    <table className={`${className}`} style={{ ...tableStyle, ...style }}>
+    <table className={`planningCalendar ${className}`} style={{ ...style }}>
       <thead>
         <tr
           className={`${rowsClassName}`}
-          style={{ ...trStyle, ...tableTrStyle, ...rowsStyle }}
+          style={{ ...theadTrStyle, ...rowsStyle }}
           key=""
         >
-          <th style={thStyle}>
+          <th className="dayTh">
             <GroupsHeadContainer
               className={`${groupHeadContainerClassName}`}
               style={groupHeadContainerStyle}
@@ -188,7 +160,7 @@ const Calendar = ({
             <th
               key={i}
               className={`${daysColsClassName}`}
-              style={{ ...weekDayThStyle, ...daysColsStyle }}
+              style={{ ...daysColsStyle }}
             >
               <DayContainer
                 style={dayStyle}
@@ -202,7 +174,7 @@ const Calendar = ({
               />
             </th>
           ))}
-          <th style={totalThStyle}>
+          <th className="totalTh">
             <SumHoursHead
               className={sumHoursHeadClassName}
               style={sumHoursHeadStyle}
@@ -216,12 +188,12 @@ const Calendar = ({
           <tr
             key={`${i} tr`}
             className={`${rowsClassName}`}
-            style={{ ...tableTrStyle, ...rowsStyle }}
+            style={{ ...rowsStyle }}
           >
             <td
               className={`${groupsColsClassName}`}
               key={i}
-              style={{ ...tdStyle, ...tableTdStyle, ...groupsColsStyle }}
+              style={{ ...groupTdStyle, ...groupsColsStyle }}
             >
               <GroupContainer
                 style={groupStyle}
@@ -233,7 +205,6 @@ const Calendar = ({
             </td>
             {dailyHours.map((_, positionDay) => (
               <td
-                style={{ width: "8vw", ...tableTdStyle }}
                 key={`td-${group.id}day-i${positionDay}`}
                 onDragOver={handleDragOver}
                 onDrop={(event) => {
@@ -610,4 +581,49 @@ export const checkDuplicates = (
     .filter((task) => task.groupId === groupId);
   return findDuplicates.length > 0;
 };
+
+export const getTasksSaved = () => {
+  const taskSavedString = window.localStorage.getItem("CalendarTaskSaved");
+  if (!taskSavedString) {
+    return [];
+  }
+  const tasksTable: TasksType = JSON.parse(taskSavedString);
+  const validTasks = tasksTable
+    .filter((task) => {
+      if (task?.taskExpiryDate) {
+        const taskDate = new Date(task?.taskExpiryDate);
+        return taskDate.getTime() >= Date.now();
+      }
+    })
+    .map((task) => {
+      const { taskDate, taskExpiryDate, ...rest } = task;
+      if (taskExpiryDate) {
+        return {
+          taskDate: new Date(taskDate),
+          taskExpiryDate: new Date(taskExpiryDate),
+         ...rest,
+        };
+      }
+    });
+  return validTasks;
+};
+
+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/utils.js

@@ -26,6 +26,10 @@ endDate.setHours(23, 59, 59, 999);
 const endDateMilliseconds = endDate.getTime();
 function getDayHourly(weekOffset) {
     const dailyHours = [];
+    let dayOffset = weekOffset;
+    if (currentDate.getDay() === 0) {
+        dayOffset = dayOffset - 7;
+    }
     // Boucle pour calculer les heures de début et de fin de chaque jour de la semaine
     for (let i = 0; i < 7; i++) {
         const dayDate = new Date(startDate);
@@ -36,9 +40,9 @@ function getDayHourly(weekOffset) {
         dayEnd.setHours(23, 59, 59, 59);
         dailyHours.push({
             positionDay: i,
-            day: new Date(dayStart.getTime() + weekOffset * 86400000),
-            start: dayStart.getTime() + weekOffset * 86400000,
-            end: dayEnd.getTime() + weekOffset * 86400000,
+            day: new Date(dayStart.getTime() + dayOffset * 86400000),
+            start: dayStart.getTime() + dayOffset * 86400000,
+            end: dayEnd.getTime() + dayOffset * 86400000,
         });
     }
     return dailyHours;
@@ -125,7 +129,12 @@ function getWeekDays(jump) {
     for (let i = 0; i < 7; i++) {
         const day = new Date();
         const diff = i - currentDayOfWeek;
-        day.setDate(currentDate.getDate() + diff + jump);
+        if (currentDayOfWeek === 0) {
+            day.setDate(currentDate.getDate() + diff + jump - 7);
+        }
+        else {
+            day.setDate(currentDate.getDate() + diff + jump);
+        }
         const formattedDay = `${days[day.getDay()]}. ${day.getDate()},  ${month[day.getMonth()]}  ${day.getFullYear()}`;
         weekDays.push({
             day: days[day.getDay()],
@@ -400,6 +409,7 @@ function calculerEcartSemaine(dateSelectionnee) {
 function semainesDepuisOrigine(annee, numeroSemaine) {
     const dateActuelle = new Date();
     const dateOrigine = new Date(dateActuelle.getFullYear() - 2, 0, 1);
+    console.log(dateOrigine);
     const anneeOrigine = dateOrigine.getFullYear();
     const numeroSemaineOrigine = getWeekNumber(dateOrigine);
     let nombreSemaines = 0;
@@ -456,4 +466,14 @@ const sumHoursByGroups = (groupId, tasks, weekOffset, calendarDate) => {
     });
     return sum;
 };
-export { getWeeksListUpdate, clickedDate, getCalandarDays, startDateMilliseconds, endDateMilliseconds, getDayHourly, millisecondsToDate, getWeekDays, formatDateToCustomFormat, displayDayOnModalLeft, millisecondsToInt, getWeekMonthAndYear, getWeeksList, getDoubleWeeksList, calculerEcartSemaine, calculateTimeOfDayRange, getSessionStorageRecordForDragAndDrop, compareWeekOffset, sumHoursByGroups, };
+function saveTasksToLocalStorage(tasks) {
+    const tasksSavedString = window.localStorage.getItem("CalendarTaskSaved");
+    const tasksString = JSON.stringify(tasks);
+    if (tasksSavedString === tasksString)
+        return;
+    if (tasksString === "[]")
+        return;
+    const backup = [...tasks.filter((task) => task.taskExpiryDate)];
+    window.localStorage.setItem("CalendarTaskSaved", JSON.stringify(backup));
+}
+export { getWeeksListUpdate, saveTasksToLocalStorage, clickedDate, getCalandarDays, startDateMilliseconds, endDateMilliseconds, getDayHourly, millisecondsToDate, getWeekDays, formatDateToCustomFormat, displayDayOnModalLeft, millisecondsToInt, getWeekMonthAndYear, getWeeksList, getDoubleWeeksList, calculerEcartSemaine, calculateTimeOfDayRange, getSessionStorageRecordForDragAndDrop, compareWeekOffset, sumHoursByGroups, };

package/lib/utils.ts

@@ -1,10 +1,5 @@
 import moment from "moment";
-import {
-  TasksType,
-  TaskType,
-  TaskFeildsType,
-  GroupFeildsType,
-} from "../definitions";
+import { TasksType, TaskType, TaskFeildsType } from "../definitions";
 // Obtenir la date actuelle
 const currentDate = new Date();
 // Obtenir le jour de la semaine (dimanche = 0, lundi = 1, ..., samedi = 6)
@@ -28,7 +23,10 @@ function getDayHourly(weekOffset: number) {
     start: number;
     end: number;
   }[] = [];
-
+  let dayOffset = weekOffset;
+  if (currentDate.getDay() === 0) {
+    dayOffset = dayOffset - 7;
+  }
   // Boucle pour calculer les heures de début et de fin de chaque jour de la semaine
   for (let i = 0; i < 7; i++) {
     const dayDate = new Date(startDate);
@@ -40,9 +38,9 @@ function getDayHourly(weekOffset: number) {
 
     dailyHours.push({
       positionDay: i,
-      day: new Date(dayStart.getTime() + weekOffset * 86400000),
-      start: dayStart.getTime() + weekOffset * 86400000,
-      end: dayEnd.getTime() + weekOffset * 86400000,
+      day: new Date(dayStart.getTime() + dayOffset * 86400000),
+      start: dayStart.getTime() + dayOffset * 86400000,
+      end: dayEnd.getTime() + dayOffset * 86400000,
     });
   }
   return dailyHours;
@@ -144,8 +142,11 @@ function getWeekDays(jump: number) {
   for (let i = 0; i < 7; i++) {
     const day = new Date();
     const diff = i - currentDayOfWeek;
-
-    day.setDate(currentDate.getDate() + diff + jump);
+    if (currentDayOfWeek === 0) {
+      day.setDate(currentDate.getDate() + diff + jump - 7);
+    } else {
+      day.setDate(currentDate.getDate() + diff + jump);
+    }
 
     const formattedDay = `${days[day.getDay()]}. ${day.getDate()},  ${
       month[day.getMonth()]
@@ -597,8 +598,19 @@ const sumHoursByGroups = (
   });
   return sum;
 };
+
+function saveTasksToLocalStorage(tasks: TasksType) {
+  const tasksSavedString = window.localStorage.getItem("CalendarTaskSaved");
+  const tasksString = JSON.stringify(tasks);
+  if (tasksSavedString === tasksString) return;
+  if (tasksString === "[]") return;
+  const backup = [...tasks.filter((task) => task.taskExpiryDate)];
+  window.localStorage.setItem("CalendarTaskSaved", JSON.stringify(backup));
+}
+
 export {
   getWeeksListUpdate,
+  saveTasksToLocalStorage,
   clickedDate,
   getCalandarDays,
   startDateMilliseconds,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "index.js",
   "scripts": {
     "test": "jest",

package/style.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
- flex:1;
+  flex: 1;
   background-color: #f2f8fb;
   opacity: 0;
   border-radius: 5px;
@@ -48,4 +48,31 @@
   font-weight: 600;
   margin-left: 5px;
 }
-td{ -moz-box-sizing: border-box;}
+
+.planningCalendar{
+  width: 100%;
+  height: 150px;
+  border-radius: 0.5rem;
+  z-index: 10;
+}
+.planningCalendar .dayTh{
+  color: #0f5173;
+  padding-left: 5px
+}
+.planningCalendar .totalTh {
+  color: #0f5173;
+  width: 40px;
+  text-align: right;
+  padding-right: 2px;
+}
+
+.planningCalendar td {
+  -moz-box-sizing: border-box;
+  border-left: 0.74px solid rgba(198, 219, 225, 0.68);
+  border-right: 0.74px solid rgba(198, 219, 225, 0.68);
+  width: 8vw;
+}
+.planningCalendar tr {
+  border-bottom: 1.5px solid #0f52737e;
+  padding: 2px;
+}