const { tasks, title, submitComment, onTaskDragStop, onTaskDragStart, onTaskDragOver, functionLoader, componentOwnerId, createTask, projectId, contract, columns, setColumns, addActionStatus, removeColumn, columnIndex, removeTaskFromColumn, addTaskToColumn, updateTaskInColumn, } = props; const ColumnContainer = styled.div` display: flex; flex-direction: column; align-items: center; height: 100%; width: 17.5rem; margin-left: 2em; margin-right: 2em; background-color: transparent; cursor: pointer; :hover { background-color: #11121a; } padding: 1rem; `; const ColumnDetailsIcon = styled.div` color: transparent; `; const ColumnLabel = styled.div` display: flex; justify-content: start; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; padding-top: 4px; padding-bottom: 4px; gap: 0.5rem; cursor: pointer; width: 15rem; :hover { ${ColumnDetailsIcon} { color: #ffffff; } } `; const TasksContainer = styled.div` display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; padding-left: 5px; max-height: 83%; overflow-y: scroll; scroll-behavior: smooth; scrollbar-color: black black; ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: black; } * { scrollbar-color: black black; } html::-webkit-scrollbar { width: 12px; } html::-webkit-scrollbar-thumb { background-color: black; border-radius: 6px; } html::-webkit-scrollbar-thumb:hover { background-color: black; } `; const AddTaskContainer = styled.div` display: flex; flex-direction: column; align-items: center; `; const ColumnLabelText = styled.div` display: flex; justify-content: start; align-items: start; `; const AddIcon = styled.div` color: #777583; `; const AddTaskButton = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #1e1f28; color: #ffffff; width: 240px; padding: 16px; gap: 4px; border-radius: 4px; :hover { ${AddIcon} { color: #ffffff; } } `; const AddTaskText = styled.div` display: flex; justify-content: center; align-items: center; margin-left: 0.25rem; `; const Title = styled.div` padding: 0; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `; const createTaskButton = ( <AddTaskButton> <AddIcon> <i className="bi bi-plus-circle-fill"></i> </AddIcon> <AddTaskText>Add new Card</AddTaskText> </AddTaskButton> ); const columnDetailsButton = ( <ColumnDetailsIcon> <i className="bi bi-pen-fill"></i> </ColumnDetailsIcon> ); const [createStatus, setCreateStatus] = useState([]); const [columnName, setColumnName] = useState(title); const [selectedTaskDetails, setSelectedTaskDetails] = useState(null); const [isTaskDetailsVisible, setIsTaskDetailsVisible] = useState(false); const cleanCreateTaskStatus = (title) => { const filteredStatuses = createStatus.filter((s) => s.title !== title); setCreateStatus(filteredStatuses); Near.asyncCalimeroView(contract, "get_statuses", { project_id: projectId, }).then((columns) => { setColumns(columns); }); }; const onViewTaskDetails = (task) => { setSelectedTaskDetails(task); setIsTaskDetailsVisible(true); }; const onCloseTaskDetails = () => { setSelectedTaskDetails(null); setIsTaskDetailsVisible(false); }; const addCreateTaskStatus = useCallback((newStatus) => { let isNew = true; let newCreateTaskStatuses = createStatus.map((status) => { if (status.title === newStatus.title) { isNew = false; return newStatus; } else { return status; } }); if (isNew) { newCreateTaskStatuses = [...newCreateTaskStatuses, newStatus]; } setCreateStatus(newCreateTaskStatuses); }, []); return ( <> {isTaskDetailsVisible && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.TaskDetailsDialog`} props={{ task: selectedTaskDetails, componentOwnerId, onCloseTaskDetails, removeTaskFromColumn, projectId, contract, addActionStatus, taskColumn: columnName, handleColumns, columnIndex, updateTaskInColumn, }} /> )} <ColumnContainer droppable onDragOver={(e) => { onTaskDragOver(); }} onDrop={() => onTaskDragStop(columnName)} > <ColumnLabel> <Title>{columnName}</Title> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.ColumnDetailsPopup`} props={{ componentOwnerId, columnIndex, columnName, setColumnName, removeColumn, contract, projectId, addActionStatus, containsTasks: tasks.length > 0, columnDetailsButton, }} /> </ColumnLabel> <TasksContainer> {tasks.map((task, i) => { return ( <div key={task.id}> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.TaskCard`} props={{ task: task, status: columnName, index: i, onTaskDragStart: onTaskDragStart, onTaskDragStop: onTaskDragStop, createStatus, onViewTaskDetails: onViewTaskDetails, }} /> </div> ); })} </TasksContainer> <AddTaskContainer> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.CreateTaskPopup`} props={{ createTaskButton, componentOwnerId, addCreateTaskStatus, cleanCreateTaskStatus, contract, handleColumns, projectId, columnTitle: columnName, addTaskToColumn, columnIndex, }} /> </AddTaskContainer> </ColumnContainer> </> );