react-weekly-planning 1.0.18 → 1.0.20

package/README.md

@@ -13,8 +13,6 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 [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,6 +1,17 @@
+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";
+import { getWeekDays, getDayHourly, calculerEcartSemaine, getSessionStorageRecordForDragAndDrop, sumHoursByGroups, millisecondsToDate, compareWeekOffset, saveTasksToLocalStorage, } from "./lib/utils";
 const theadTrStyle = {
     color: "#0f5173",
     fontWeight: "300",
@@ -74,6 +85,7 @@ const Calendar = ({ style, className, groups, weekOffset, date, groupRender, day
     const handleDragOver = (event) => {
         event.preventDefault();
     };
+    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;
@@ -205,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

@@ -19,9 +19,9 @@ import {
   sumHoursByGroups,
   millisecondsToDate,
   compareWeekOffset,
+  saveTasksToLocalStorage,
 } from "./lib/utils";
 
-
 const theadTrStyle: StyleType = {
   color: "#0f5173",
   fontWeight: "300",
@@ -139,6 +139,8 @@ const Calendar = ({
   const handleDragOver = (event: React.DragEvent<HTMLTableDataCellElement>) => {
     event.preventDefault();
   };
+
+  saveTasksToLocalStorage(tasks);
   return (
     <table className={`planningCalendar ${className}`} style={{ ...style }}>
       <thead>
@@ -158,7 +160,7 @@ const Calendar = ({
             <th
               key={i}
               className={`${daysColsClassName}`}
-              style={{...daysColsStyle }}
+              style={{ ...daysColsStyle }}
             >
               <DayContainer
                 style={dayStyle}
@@ -191,7 +193,7 @@ const Calendar = ({
             <td
               className={`${groupsColsClassName}`}
               key={i}
-              style={{ ...groupTdStyle,...groupsColsStyle }}
+              style={{ ...groupTdStyle, ...groupsColsStyle }}
             >
               <GroupContainer
                 style={groupStyle}
@@ -579,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.18",
+  "version": "1.0.20",
   "main": "index.js",
   "scripts": {
     "test": "jest",

package/style.css

@@ -53,7 +53,7 @@
   width: 100%;
   height: 150px;
   border-radius: 0.5rem;
-  z-index: 10
+  z-index: 10;
 }
 .planningCalendar .dayTh{
   color: #0f5173;