#input text in TaskListTableDefault

[jiji-Bi]

import React, { useState, useMemo } from "react"; import styles from "./task-list-table.module.css"; import { useDispatch } from 'react-redux'; import { updateTasks } from '../../features/SuperAdminPages/tacheSlice' import { TextField} from '@mui/material';

const localeDateStringCache = {}; const toLocaleDateStringFactory = (locale) => { return (date, dateTimeOptions) => { const key = date.toString(); let lds = localeDateStringCache[key]; if (!lds) { lds = date.toLocaleDateString(locale, dateTimeOptions); localeDateStringCache[key] = lds; } return lds; }; }; const dateTimeOptions = { weekday: "short", year: "numeric", month: "long", day: "numeric", };

const TaskListTableDefault = ({ rowHeight, rowWidth, tasks, fontFamily, fontSize, locale, onExpanderClick, onCellEdit, }) => {

const dispatch = useDispatch(); const [editingRowId, setEditingRowId] = useState(null); const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [locale]);

const handleNameBlur = (taskId, newName, e) => { handleSaveChanges(taskId, { name: newName }); };

const handleRowClick = (rowId) => { console.log('okay') setEditingRowId((prevRowId) => (prevRowId === rowId ? null : rowId)); };

const handleSaveChanges = (rowId, newData, e) => { const updatedTasks = tasks.map((task) => task.id === rowId ? { ...task, ...newData } : task ); dispatch(updateTasks(updatedTasks)); setEditingRowId(null); };

const handleCancelEdit = () => { setEditingRowId(null); };

const handleCellEdit = (taskId, columnName, newValue) => {

onCellEdit(taskId, columnName, newValue);
setEditingRowId(null);

};

return ( <div className={styles.taskListWrapper} style={{ fontFamily: fontFamily, fontSize: fontSize, }}

{tasks.map((t) => { let expanderSymbol = ""; if (t.hideChildren === false) { expanderSymbol = "▼"; } else if (t.hideChildren === true) { expanderSymbol = "▶"; }

    const isEditing = editingRowId === t.id;
    console.log(isEditing)
    return (
      <div
        className={`${styles.taskListTableRow} ${isEditing ? styles.editing : ""}`}
        style={{ height: rowHeight }}
        key={`${t.id}row`}
      >
        <div
          className={styles.taskListCell}
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
          title={t.name}
        >
          <div className={styles.taskListNameWrapper}>
            <div
              className={
                expanderSymbol
                  ? styles.taskListExpander
                  : styles.taskListEmptyExpander
              }
              onClick={() => onExpanderClick(t)}
            >
              {expanderSymbol}
            </div>
            {isEditing ? (
              <TextField
                type="text"
                onChange={(e) => handleCellEdit(t.id, "name", e.target.value)}
                />
            ) : (
              <div>{t.name}</div>
            )}
          </div>
        </div>
        <div

        >
          &nbsp;{toLocaleDateString(t.start, dateTimeOptions)}
        </div>
        <div
          className={styles.taskListCell}
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
        >
          &nbsp;{toLocaleDateString(t.end, dateTimeOptions)}
        </div>
        <div
          className={styles.taskListCell}
          style={{
            minWidth: rowWidth,
            maxWidth: rowWidth,
          }}
        >
          &nbsp;{t.operations}
        </div>
        <div>
          {isEditing ? (
            <button
              className="Button"
              onClick={(e) => handleSaveChanges(t.id, { name: t.name }, e)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="icon icon-tabler icon-tabler-device-floppy"
                width="28"
                height="28"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="#3f51b5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
                <path d="M14 4l0 4l-6 0l0 -4" />
              </svg>
            </button>
          ) : (
            <button className="Button" onClick={() => handleRowClick(t.id)}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="icon icon-tabler icon-tabler-pencil"
                width="28"
                height="28"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="#3f51b5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" />
                <path d="M13.5 6.5l4 4" />
              </svg>
            </button>
          )}
          {isEditing && (
            <button className="Button" onClick={handleCancelEdit}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="icon icon-tabler icon-tabler-circle-x"
                width="28"
                height="28"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="#3f51b5"
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                <path d="M10 10l4 4m0 -4l-4 4" />
              </svg>
            </button>
          )}
        </div>
      </div>
    );
  })}
</div>

); };

export default TaskListTableDefault;

[jiji-Bi]

any textfield or input isn't triggering onChange event from keyboard ... i need the rows of the taks list table to be editable any idea how can i get it to work ?

[jiji-Bi]

actually i found my own solution for this it was just about extracting the whole table logic outside the gant chart while keeping the same UI ....but tbh still wondering what is preventing the event to be fired from keyboard

[nikmaxott]

https://github.com/MaTeMaTuK/gantt-task-react/pull/217 - this PR should fix the original issue and allow onChange, if you have any suggestions how I can improve this to ensure that the arrow keys don't get passed through that would be great. Currently I have to check in each input if there is a keydown and then stop propogation.