const { componentOwnerId, columnIndex, columnName, columns, setColumns, updateColumnName, contract, projectId, addActionStatus, removeColumn, containsTasks, columnDetailsButton } = props; 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 Name = 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; background-color: transparent; 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 DeleteButtonText = styled.p` padding: 0; margin: 0; `; 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%; display: flex; flex-direction: row; align-items: center; `; 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 MissingName = styled.div` position: absolute; left: 9.5rem; top: 75%; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const TextContainer = styled.div` display: flex; justify-content: center; flex-direction: column; width: 100%; text-align: center; margin-bottom: 1rem; margin-top: 1rem; `; const FunctionButton = styled.button` background-color: red; :hover { opacity: 0.8; } color: #fff; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const DeleteColumnContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const CloseDeleteColumnButton = styled.div` background-color: transparent; display: flex; justify-content: center; color: #6b7280; :hover { color: #fff; } cursor: pointer; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const Overlay = styled.div` background-color: var(--blackA9); position: fixed; z-index: 1000; inset: 0; display: flex; justify-content: center; align-items: center; animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); `; const ModalContent = styled.div` position: absolute; width: 500px; padding: 30px; border-radius: 20px; color: white; `; const [columnDetailsOpen, setColumnDetailsOpen] = useState(false); const [editColumnName, setEditColumnName] = useState(columnName); const [editColumnNameMissing, setEditColumnNameMissing] = useState(false); const [deleteContent, setDeleteContent] = useState(false); const [editColumnNameStatus, setEditColumnNameStatus] = useState(undefined); const onChangeEditColumnName = (event) => { setEditColumnNameMissing(false); setEditColumnName(event.target.value); }; const onClose = () => { setColumnDetailsOpen(false); setEditColumnNameMissing(false); setEditColumnName(columnName); }; const handleUpdateColumnName = (columnName, newColumnName, columnIndex) => { if (!newColumnName || newColumnName.trim() === "") { setEditColumnNameMissing(true); return; } if (columnName === newColumnName) { return; } const statusDataCopy = JSON.parse(JSON.stringify(columns)); try { setEditColumnNameStatus("Saving"); let newStatusData = statusDataCopy.map((status) => { if (status.name === columnName) { return { name: newColumnName, tasks: status.tasks }; } else { return status; } }); setColumns(newStatusData); updateColumnName(columnIndex, newColumnName).then(() => { setEditColumnNameStatus("Saved"); setTimeout(() => setEditColumnNameStatus(undefined), 3000); }); } catch (e) { setEditColumnNameStatus("Error"); setTimeout(() => setEditColumnNameStatus(undefined), 3000); setColumns(statusDataCopy); } }; const deleteColumn = useCallback(() => { const actionStatusPrefix = "Delete column"; let newActionStatus = { id: actionStatusPrefix + projectId + columnIndex, status: `Deleting column ${columnName}`, }; try { addActionStatus(newActionStatus); removeColumn(columnIndex); Near.fakCalimeroCall(contract, "remove_status", { project_id: projectId, status_index: columnIndex, }).then(() => { newActionStatus.status = `Deleted column ${columnName}`; addActionStatus(newActionStatus); }); } catch (e) { console.log("deleteColumn", e); newActionStatus.status = `Error deleting column ${columnName}`; addActionStatus(newActionStatus); } setColumnDetailsOpen(false); }, [contract, projectId, columnIndex, columnName]); const editColumnContent = ( <Overlay> <ModalContent> <PopupContainer> <Header> <ActionsContainer> <DeleteButton onClick={() => setDeleteContent(true)}> <i className="bi bi-trash"></i> <DeleteButtonText>Delete</DeleteButtonText> </DeleteButton> </ActionsContainer> <CloseButton onClick={onClose}> <i className="bi bi-x-lg"></i> </CloseButton> </Header> <Divider /> <FieldContainer> <Label>Name</Label> <Input onChange={onChangeEditColumnName} value={editColumnName} onBlur={() => handleUpdateColumnName(columnName, editColumnName, columnIndex) } placeholder="Add Name" /> {editColumnNameStatus && ( <StatusIcon> {editColumnNameStatus === "Saving" && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Loader.Loader`} props={{ size: 16 }} /> )} {editColumnNameStatus === "Saved" && ( <SuccessIcon> <i className="bi bi-check"></i> </SuccessIcon> )} {editColumnNameStatus === "Error" && ( <ErrorIcon> <i className="bi bi-x-circle"></i> </ErrorIcon> )} </StatusIcon> )} {editColumnNameMissing && <MissingName>Missing name</MissingName>} </FieldContainer> </PopupContainer> </ModalContent> </Overlay> ); const deleteColumnContent = ( <Overlay> <ModalContent> <DeleteColumnContainer> <TextContainer> <Text>Are you sure you want to delete this column?</Text> </TextContainer> <FunctionButton onClick={deleteColumn}>Delete</FunctionButton> <CloseDeleteColumnButton onClick={() => setDeleteContent(false)}> Close </CloseDeleteColumnButton> </DeleteColumnContainer> </ModalContent> </Overlay> ); const cannotDeleteColumnContent = ( <Overlay> <ModalContent> <DeleteColumnContainer> <TextContainer> <Text>You cannot delete column which contains tasks?</Text> </TextContainer> <CloseDeleteColumnButton onClick={() => setDeleteContent(false)}> Close </CloseDeleteColumnButton> </DeleteColumnContainer> </ModalContent> </Overlay> ); const content = deleteContent ? containsTasks ? cannotDeleteColumnContent : deleteColumnContent : editColumnContent; return ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.BaseModal`} props={{ toggle: columnDetailsButton, content, open: columnDetailsOpen, onOpenChange: (open) => setColumnDetailsOpen(open), }} /> );