const { tasks, title, submitComment, onClick, onTaskDragStop, onTaskDragStart, onTaskDragOver, createTask, showAddTaskDialog, taskTitle, taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, functionLoader, createStatus, showEditTaskDialog, onChangeShowEditTaskDialog, onEditTaskTitle, onEditTaskDescription, setEditTask, editTaskTitle, editTaskDescription, updateTaskTitle, updateTaskDescription, editTaskTitleStatus, editTaskId, editTaskDialogTaskId, editTaskDescriptionStatus, onChangeShowDeleteTaskDialog, showDeleteTaskDialog, deleteTask, componentOwnerId, editTaskTitleMissing, editTaskDescriptionMissing, addTaskTitleMissing, addTaskDescriptionMissing } = props; const ColumnContainer = styled.div` display: flex; flex-direction: column; height: 100%; min-width: 200px; margin-left: 2em; margin-right: 2em; background-color: transparent; `; const ColumnLabel = styled.div` color: #FFF; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; padding-bottom: 16px; padding-left: 6px; `; const TasksContainer = styled.div` display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; `; const AddTaskContainer = styled.div` display: flex; flex-direction: column; align-items: center; `; 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 AddIcon = styled.div` color: #777583; :hover { color: #FFFFFF; } `; const AddTaskText = styled.div` display: flex; justify-content: center; align-items: center; margin-left: 0.25rem `; const ColumnLabelText = styled.div` display: flex; justify-content: start; align-items: start; `; return ( <> {showDeleteTaskDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.ConfirmationPopup`} props={ { onClick: () => deleteTask(), onClose: () => onChangeShowDeleteTaskDialog(false, undefined, title), functionLoader, title: "Are you sure you want to delete the task?" } } /> } {showAddTaskDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.CreateTaskDialog`} props={ { componentOwnerId, createTask, showAddTaskDialog, taskTitle, taskDescription, onChangeTaskTitle, onChangeTaskDescription, onChangeShowAddTaskDialog, functionLoader, addTaskTitleMissing, addTaskDescriptionMissing } } /> } {showEditTaskDialog && <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.BoardContainer.Task.TaskDetailsDialog`} props={ { onChangeShowEditTaskDialog, editTaskTitle, editTaskDescription, onEditTaskTitle, onEditTaskDescription, updateTaskTitle, updateTaskDescription, editTaskTitleStatus, editTaskId, task, editTaskDialogTaskId, editTaskDescriptionStatus, onChangeShowDeleteTaskDialog, editTaskTitleMissing, editTaskDescriptionMissing, componentOwnerId } } /> } <ColumnContainer droppable onDragOver={ ( e ) => { onTaskDragOver(); } } onDrop={ () => onTaskDragStop( title ) }> <ColumnLabel> <ColumnLabelText>{ title }</ColumnLabelText> </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, onClick: () => { setEditTask(task.id, task.title, task.description, title); onChangeShowEditTaskDialog(true, task.id); }, createStatus } } /> </div> ); } ) } </TasksContainer> <AddTaskContainer> <AddTaskButton onClick={() => onChangeShowAddTaskDialog(true)}> <AddIcon> <i class="bi bi-plus-circle-fill"></i> </AddIcon> <AddTaskText>Add new Card</AddTaskText> </AddTaskButton> </AddTaskContainer> </ColumnContainer> </> );