const { updateTaskTitle, updateTaskDescription, editTaskTitle, editTaskDescription, onChangeShowEditTaskDialog, functionLoader, onEditTaskTitle, onEditTaskDescription, editTaskTitleStatus, editTaskDescriptionStatus, editTaskId, task, editTaskDialogTaskId, onChangeShowDeleteTaskDialog, editTaskTitleMissing, editTaskDescriptionMissing, componentOwnerId } = props; const OverlayContainer = styled.div` left: 12px; right: 12px; bottom: 0px; top: 40px; position: absolute; z-index: 20; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; padding-top: 100px; `; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; `; const ActionsContainer = styled.div` display: flex; flex-direction: row; gap: 3px; align-items: center; items-center: center; `; const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const Title = styled.input` color: #fff; font-family: Helvetica Neue; font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: 0em; text-align: left; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: transparent; :focus { outline-color: #D0FC42; outline-style: solid; outline-width: 1px; } ::placeholder { color: #D0FC42; } border: none; `; const Input = styled.input` color: #fff; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; flex: 1; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: transparent; :focus { outline-color: #D0FC42; outline-style: solid; outline-width: 1px; } ::placeholder { color: #D0FC42; } border: none; `; const Label = styled.label` color: #777583; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; width: 30%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: transparent; :focus { outline-color: #D0FC42; outline-style: solid; outline-width: 1px; } border: none; `; const CloseButton = styled.div` color: #fff; :hover { color: #D0FC42; } cursor: pointer; `; const DeleteButton = styled.div` color: #fff; :hover { color: #D0FC42; } display: flex; flex-direction: row; cursor: pointer; text-align: center; color: #ffffff; justify-content: center; align-items: center; gap: 3px; `; const P = styled.p` padding-top: 14px; `; const InputContainer = styled.div` display: flex; flex-direction: row; align-items: center; `; const Divider = styled.div` width: 100%; height: 1px; background-color: #282933; margin-top: 16px; margin-bottom: 16; `; const SuccessIcon = styled.div` color: #00FF66; `; const ErrorIcon = styled.div` color: #DC3545; `; const FieldContainer = styled.div` position: relative; width: 100%; `; const StatusIcon = styled.div` position: absolute; right: 1px; top: 35%; `; const MissingText = styled.div` position: absolute; right: 36%; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const MissingTitle = styled.div` position: absolute; left: 14px; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const titleStatus = editTaskTitleStatus.find(s => s.id = editTaskDialogTaskId); const descriptionStatus = editTaskDescriptionStatus.find(s => s.id = editTaskDialogTaskId); return ( <OverlayContainer> <PopupContainer> <Header> <ActionsContainer> <DeleteButton onClick={() => onChangeShowDeleteTaskDialog(true, editTaskDialogTaskId)}> <i class="bi bi-trash"></i> <P>Delete</P> </DeleteButton> </ActionsContainer> <CloseButton onClick={() => onChangeShowEditTaskDialog(false)}> <i class="bi bi-x-lg"></i> </CloseButton> </Header> <Divider /> <FieldContainer> <Title onChange={onEditTaskTitle} value={editTaskTitle} onBlur={updateTaskTitle} placeholder="Add Title"/> {titleStatus && titleStatus.id === editTaskDialogTaskId && <StatusIcon> {titleStatus.status === "Saving..." && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> )} {titleStatus.status === "Saved" && ( <SuccessIcon> <i class="bi bi-check"></i> </SuccessIcon> )} {titleStatus.status === "Error" && ( <ErrorIcon> <i class="bi bi-x-circle"></i> </ErrorIcon> )} </StatusIcon> } {editTaskTitleMissing && <MissingTitle> Missing title </MissingTitle> } </FieldContainer> <FieldContainer> <InputContainer> <Label>Description</Label> <Input onChange={onEditTaskDescription} value={editTaskDescription} onBlur={updateTaskDescription} placeholder="Add Description"/> {descriptionStatus && descriptionStatus.id === editTaskDialogTaskId && <StatusIcon> {descriptionStatus.status === "Saving..." && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> )} {descriptionStatus.status === "Saved" && ( <SuccessIcon> <i class="bi bi-check"></i> </SuccessIcon> )} {descriptionStatus.status === "Error" && ( <ErrorIcon> <i class="bi bi-x-circle"></i> </ErrorIcon> )} </StatusIcon> } {editTaskDescriptionMissing && <MissingText> Missing description </MissingText> } </InputContainer> </FieldContainer> </PopupContainer> </OverlayContainer> );