const { tasks, title, submitComment, onTaskDragStop, onTaskDragStart, onTaskDragOver, functionLoader, componentOwnerId, handleColumns, createTask, projectId, contract, columns, setColumns, addActionStatus, removeColumn, columnIndex, removeTaskFromColumn } = 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 [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: title, handleColumns, columnIndex }} /> )} <ColumnContainer droppable onDragOver={(e) => { onTaskDragOver(); }} onDrop={() => onTaskDragStop(title)} > <ColumnLabel> <Title>{ title }</Title> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.ColumnDetailsPopup`} props={{ componentOwnerId, columnIndex, columnName: title, 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: title, 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: title }} /> </AddTaskContainer> </ColumnContainer> </> );