edit tableType2

src/app/components/EditableField/EditableFieldDate2.js

@@ -1,20 +1,17 @@
 import React, { useState } from "react";
 import styles from "./EditableFieldDate2.module.css";
 
-const EditableFieldDate = ({
-  fieldNameM,
-  fieldValueM,
-  isRedM,
-  fieldNameD,
-  fieldValueD,
-  isRedD,
+const EditableFieldDate2 = ({
+  fieldName,
+  fieldValue,
+  isFlag,
   handleChange,
   index,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
 
-  let stylingClassM = "";
-  switch (isRedM) {
+  let stylingClass = "";
+  switch (isFlag) {
     case 0:
       break;
     case 1:
@@ -27,50 +24,32 @@ const EditableFieldDate = ({
       // Handle other cases if needed
       break;
   }
-  let stylingClassD = "";
-  switch (isRedD) {
-    case true:
-      break;
-    case false:
-      stylingClassD = styles.isRed;
-      break;
-    case 2:
-      stylingClassD = styles.isGreen;
-      break;
-    default:
-      // Handle other cases if needed
-      break;
-  }
+
   return (
-    <span onDoubleClick={() => setIsEditing(true)}>
+    <span
+      onDoubleClick={() => setIsEditing(true)}
+      onBlur={() => {
+        setIsEditing(false);
+      }}
+    >
       {isEditing ? (
         <>
           <input
             index={index}
             type="text"
-            name={fieldNameM}
-            defaultValue={fieldValueM}
+            name={fieldName}
+            defaultValue={fieldValue}
             onChange={handleChange}
             autoFocus
           />
-          /
-          <input
-            index={index}
-            type="text"
-            name={fieldNameD}
-            defaultValue={fieldValueD}
-            onChange={handleChange}
-          />
-          <button className={styles.done} onClick={() => setIsEditing(false)}>Done</button>
         </>
       ) : (
         <>
-          <span className={stylingClassM}>{fieldValueM}</span>/
-          <span className={stylingClassD}>{fieldValueD}</span>
+          <span className={stylingClass}>{fieldValue} </span>
         </>
       )}
     </span>
   );
 };
 
-export default EditableFieldDate;
+export default EditableFieldDate2;

src/app/components/ReusableTables/TableType2.js

@@ -1,63 +1,89 @@
-import React from "react";
-import styles from "./TableType2.module.css";
-import EditableFieldDate from "../EditableField/EditableFieldDate";
-
-const TableType2 = ({ items, formSetting, myStyle, onEdit }) => {
-  const { tableName, itemName } = formSetting;
-
-
-  const handleMonthChange = (index, newMonth) => {
-    let updatedItems = [...items[itemName]];
-    if (!updatedItems[index]) {
-      updatedItems[index] = { Month: "", Day: "" };
-    }
-
-    updatedItems[index].Month = newMonth;
-    onEdit({ ...items, [itemName]: updatedItems });
-  };
-
-  const handleDayChange = (index, newDay) => {
-    let updatedItems = [...items[itemName]];
-    if (!updatedItems[index]) {
-      updatedItems[index] = { Month: "", Day: "" };
-    }
-    updatedItems[index].Day = newDay;
-    onEdit({ ...items, [itemName]: updatedItems });
-  };
-
-  const itemData = items[itemName] || [];
-
-  return (
-    <div style={myStyle}>
-      {tableName && <div className={styles.title}>{tableName}</div>}
-      <table className={styles.myTable}>
-        <tbody>
-          {Array.from({ length: 6 }).map((_, rowIndex) => (
-            <tr key={rowIndex}>
-              {Array.from({ length: 3 }).map((_, colIndex) => {
-                const cellIndex = rowIndex * 3 + colIndex;
-                const dateObject = itemData[cellIndex] || {};
-
-                return (
-                  <td key={colIndex} className={styles.tableCell}>
-                    <EditableFieldDate
-                      index={cellIndex}
-                      isFlagM=""
-                      isFlagD=""
-                      initialMonth={dateObject.Month || ""}
-                      initialDay={dateObject.Day || ""}
-                      onMonthChange={handleMonthChange}
-                      onDayChange={handleDayChange}
-                    />
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default TableType2;
+import React from "react";
+import styles from "./TableType2.module.css";
+import EditableFieldDate2 from "../EditableField/EditableFieldDate2";
+
+const TableType2 = ({
+  items,
+  folderName,
+  fileName,
+  formSetting,
+  myStyle,
+  onEdit,
+}) => {
+  const tableName = formSetting.tableName;
+  const tableData = formSetting.tableData;
+  const itemName = formSetting.itemName;
+  const insideTableName = formSetting.insideTableName;
+
+  const dates = items[itemName];
+  let updateJson = { ...items };
+  const handleDateChange = (event) => {
+    const index = event.target.getAttribute("index");
+    const { name, value } = event.target;
+
+    updateJson[itemName][index][name] = value;
+    onEdit(updateJson);
+  };
+
+  const addDateHandler = () => {
+    let newDate = {};
+    tableData.map((data, index) => (newDate[data.key] = data.fieldName));
+    updateJson[itemName].push(newDate);
+    onEdit(updateJson);
+  };
+
+  const removeDateHandler = (index) => {
+    updateJson[itemName].splice(index, 1);
+    onEdit(updateJson);
+  };
+
+  return (
+    <div style={myStyle}>
+      {tableName && (
+        <div className={styles.title}>
+          {tableName}
+          <button className={styles.addRemoveButton} onClick={addDateHandler}>
+            +
+          </button>
+        </div>
+      )}
+
+      <div className={styles.myTable}>
+        {insideTableName && (
+          <div className={styles.title2}>{insideTableName}</div>
+        )}
+
+        <div>
+          {dates
+            ? dates.map((date, arrayIndex) => {
+                return (
+                  <div key={arrayIndex}>
+                    {tableData.map((data, index) => {
+                      return (
+                        <EditableFieldDate2
+                          key={index}
+                          index={arrayIndex}
+                          fieldName={data.key}
+                          fieldValue={date[data.key]}
+                          isFlag=""
+                          handleChange={handleDateChange}
+                        />
+                      );
+                    })}
+                    <button
+                      className={styles.addRemoveButton}
+                      onClick={() => removeDateHandler(arrayIndex)}
+                    >
+                      -
+                    </button>
+                  </div>
+                );
+              })
+            : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableType2;

src/app/components/ReusableTables/TableType2.module.css

@@ -1,41 +1,40 @@
-.myTable{
-  border:  2px solid black;
-  border-collapse: collapse;
-  width: 100%;
-  padding: 10px 10px;
-}
-
-
-.title{
-  font-weight: 600;
-}
-
-.isRed{
-  color: red;
-}
-
-
-
-
-.myTable td, .myTable th {
-  border: 1px solid black;
-  text-align: center;
-  width: 100px;
-  overflow: hidden;
-}
-
-
-
-
-.myTable th {
-  text-align: center;
-  background-color: #f2f2f2;
-  font-weight: bold;
-}
-
-.dateContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
+.myTable {
+  border: 2px solid black;
+  border-collapse: collapse;
+  width: 100%;
+  padding: 10px 10px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.isRed {
+  color: red;
+}
+
+.title2 {
+  margin-bottom: 5px;
+  font-weight: 550;
+  text-decoration: underline;
+}
+
+.addRemoveButton {
+  margin: 0 5px;
+  background-color: transparent;
+  color: #000;
+  border: 0.8px solid #ccc;
+  font-size: 0.8em;
+  font-weight: 600;
+  border-radius: 5px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.addRemoveButton:hover {
+  background-color: #ddd;
+  color: red;
+}

src/app/components/ReusableTables/TableType2_1.js

@@ -0,0 +1,63 @@
+import React from "react";
+import styles from "./TableType2.module.css";
+import EditableFieldDate from "../EditableField/EditableFieldDate";
+
+const TableType2 = ({ items, formSetting, myStyle, onEdit }) => {
+  const { tableName, itemName } = formSetting;
+
+
+  const handleMonthChange = (index, newMonth) => {
+    let updatedItems = [...items[itemName]];
+    if (!updatedItems[index]) {
+      updatedItems[index] = { Month: "", Day: "" };
+    }
+
+    updatedItems[index].Month = newMonth;
+    onEdit({ ...items, [itemName]: updatedItems });
+  };
+
+  const handleDayChange = (index, newDay) => {
+    let updatedItems = [...items[itemName]];
+    if (!updatedItems[index]) {
+      updatedItems[index] = { Month: "", Day: "" };
+    }
+    updatedItems[index].Day = newDay;
+    onEdit({ ...items, [itemName]: updatedItems });
+  };
+
+  const itemData = items[itemName] || [];
+
+  return (
+    <div style={myStyle}>
+      {tableName && <div className={styles.title}>{tableName}</div>}
+      <table className={styles.myTable}>
+        <tbody>
+          {Array.from({ length: 6 }).map((_, rowIndex) => (
+            <tr key={rowIndex}>
+              {Array.from({ length: 3 }).map((_, colIndex) => {
+                const cellIndex = rowIndex * 3 + colIndex;
+                const dateObject = itemData[cellIndex] || {};
+
+                return (
+                  <td key={colIndex} className={styles.tableCell}>
+                    <EditableFieldDate
+                      index={cellIndex}
+                      isFlagM=""
+                      isFlagD=""
+                      initialMonth={dateObject.Month || ""}
+                      initialDay={dateObject.Day || ""}
+                      onMonthChange={handleMonthChange}
+                      onDayChange={handleDayChange}
+                    />
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default TableType2;