react-weekly-planning 1.0.16 → 1.0.18

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.
@@ -165,9 +169,10 @@ Props for the Calendar component.
 
 - **Description**: Checks if a new task overlaps with any existing tasks in the schedule. This function helps prevent overlapping tasks when scheduling.
 - **Parameters**:
-  - `tasks` (TasksType): An array of existing tasks. Each task should have `taskStart` and `taskEnd` properties representing the start and end times of the task.
+  - `tasks` (TasksType): An array of existing tasks. Each task should have `groupId`,`taskStart` and `taskEnd` properties representing the groupId of new task, the start and end times of the task.
   - `taskStart` (number): The start time in milliseconds of the new task to be checked.
   - `taskEnd` (number): The end time in milliseconds of the new task to be checked.
+  - `groupId` (string): The groupId of new task.
 - **Returns**: `boolean` - Returns `true` if there is an overlap with any existing task, otherwise returns `false`.
 
 

package/index.js

@@ -1,41 +1,16 @@
 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 = {
+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 +74,7 @@ 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) => {
+    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);
@@ -221,13 +196,13 @@ export const updateOffsetWithDateCalendar = (calendarDate) => {
 export const millisecondsToHours = (milliseconds) => {
     return millisecondsToDate(milliseconds).formattedDate;
 };
-export const checkDuplicates = (tasks, taskStart, taskEnd) => {
+export const checkDuplicates = (tasks, taskStart, taskEnd, groupId) => {
     const findDuplicates = tasks === null || tasks === void 0 ? void 0 : 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));
+            taskStart <= task.taskEnd)).filter((task) => task.groupId === groupId);
     return findDuplicates.length > 0;
 };
 export default Calendar;

package/index.tsx

@@ -9,8 +9,6 @@ import {
   GroupsHeadContainerPropsType,
   SumHoursContainerPropsType,
   SumHoursHeadContainerPropsType,
-  TaskType,
-  TaskFeildsType,
   TasksType,
 } from "./definitions";
 import {
@@ -23,46 +21,18 @@ import {
   compareWeekOffset,
 } 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%",
@@ -170,14 +140,14 @@ const Calendar = ({
     event.preventDefault();
   };
   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 +158,7 @@ const Calendar = ({
             <th
               key={i}
               className={`${daysColsClassName}`}
-              style={{ ...weekDayThStyle, ...daysColsStyle }}
+              style={{...daysColsStyle }}
             >
               <DayContainer
                 style={dayStyle}
@@ -202,7 +172,7 @@ const Calendar = ({
               />
             </th>
           ))}
-          <th style={totalThStyle}>
+          <th className="totalTh">
             <SumHoursHead
               className={sumHoursHeadClassName}
               style={sumHoursHeadStyle}
@@ -216,12 +186,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 +203,6 @@ const Calendar = ({
             </td>
             {dailyHours.map((_, positionDay) => (
               <td
-                style={{ width: "8vw", ...tableTdStyle }}
                 key={`td-${group.id}day-i${positionDay}`}
                 onDragOver={handleDragOver}
                 onDrop={(event) => {
@@ -594,17 +563,20 @@ export const millisecondsToHours = (milliseconds: number) => {
 export const checkDuplicates = (
   tasks: TasksType,
   taskStart: number,
-  taskEnd: 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)
-  );
+  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 default Calendar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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;
+}