const { componentOwnerId, addColumnButton, addNewColumn, addActionStatus, contract, projectId, } = props; const PopupContainer = styled.div` position: relative; background-color: #1d1d21; padding: 1rem; width: 489px; height: fit-content; `; const Title = styled.input` color: #fff; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #0e0e10; border: none; :focus { outline-color: #d0fc42; outline-style: solid; outline-width: 1px; } `; const CloseButton = styled.div` color: #fff; :hover { color: #d0fc42; } cursor: pointer; `; const Header = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; `; const InputContainer = styled.div` display: flex; flex-direction: row; align-items: center; `; const FieldContainer = styled.div` position: relative; width: 100%; `; const MissingTitle = styled.div` position: absolute; left: 14px; top: 55px; font-family: Helvetica Neue; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; color: red; `; const FunctionButton = styled.button` background-color: #d0fc42; :hover { opacity: 0.8; } color: #0e0e10; border-radius: 4px; margin-top: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const DialogTitle = styled.p` font-family: Helvetica Neue; font-size: 24px; font-weight: 500; line-height: 29px; letter-spacing: 0em; text-align: left; padding: 0; margin: 0; color: #fff; `; 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 [columnName, setColumnName] = useState(""); const [addColumnNameMissing, setAddColumnNameMissing] = useState(false); const [addColumnPopupOpen, setAddColumnPopupOpen] = useState(false); const onChangeColumnName = ({ target }) => { setAddColumnNameMissing(false); setColumnName(target.value); }; const handleAddColumn = useCallback(() => { if (!columnName || columnName.trim() === "") { setAddColumnNameMissing(true); return; } const actionStatusPrefix = "Add column"; let newActionStatus = { id: actionStatusPrefix + columnName, status: `Saving column ${columnName}`, seen: false, }; try { addActionStatus(newActionStatus); const newColumnProps = { name: columnName, tasks: [] }; addNewColumn(newColumnProps); Near.fakCalimeroCall(contract, "add_status", { project_id: projectId, status_name: columnName, }).then(() => { newActionStatus.status = `Saved column ${columnName}`; addActionStatus(newActionStatus); }); } catch (e) { newActionStatus.status = `Error saving column ${columnName}`; addActionStatus(newActionStatus); } setAddColumnPopupOpen(false); setColumnName(""); }, [columnName]); const content = ( <Overlay> <ModalContent> <PopupContainer> <Header> <DialogTitle>Add new Column</DialogTitle> <CloseButton onClick={() => { setAddColumnPopupOpen(false); setColumnName(""); }} > <i className="bi bi-x-lg"></i> </CloseButton> </Header> <FieldContainer> <Title onChange={onChangeColumnName} value={columnName} placeholder="Add Name" /> {addColumnNameMissing && <MissingTitle>Missing name</MissingTitle>} </FieldContainer> <FunctionButton onClick={handleAddColumn}>Add</FunctionButton> </PopupContainer> </ModalContent> </Overlay> ); return ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.Popups.BaseModal`} props={{ toggle: addColumnButton, content, open: addColumnPopupOpen, onOpenChange: (open) => setAddColumnPopupOpen(open), }} /> );