warning popUp for delete submission

This commit is contained in:
Mateusz Tylka 2023-07-14 13:10:20 +02:00
parent 38735c7982
commit 7d7b6d88b9
4 changed files with 66 additions and 25 deletions

View File

@ -1,8 +1,14 @@
import KeyCloakService from '../services/KeyCloakService'; import KeyCloakService from '../services/KeyCloakService';
import { API } from '../utils/globals'; import { API } from '../utils/globals';
const deleteSubmission = async (submissionId) => { const deleteSubmission = async (
fetch(`${API}/delete-submission/${submissionId}`, { item,
deletedItems,
setDeletedItems,
popUpMessageHandler,
theme
) => {
fetch(`${API}/delete-submission/${item.id}`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
@ -11,7 +17,19 @@ const deleteSubmission = async (submissionId) => {
}) })
.then((resp) => resp.text()) .then((resp) => resp.text())
.then((data) => { .then((data) => {
console.log(data); if (data === 'deleted') {
let newDeletedItems = deletedItems.slice();
newDeletedItems.push(item);
setDeletedItems(newDeletedItems);
popUpMessageHandler('Complete', `Submission "${item.id}" deleted`);
} else {
popUpMessageHandler(
'Error',
"You can't delete this submission!",
null,
theme.colors.red
);
}
}); });
}; };

View File

@ -14,7 +14,6 @@ const PopUpStyle = styled(FlexColumn)`
.PopUpStyle__body { .PopUpStyle__body {
width: ${({ width }) => (width ? width : '60%')}; width: ${({ width }) => (width ? width : '60%')};
height: ${({ height }) => (height ? height : '50%')}; height: ${({ height }) => (height ? height : '50%')};
min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')};
padding: ${({ padding }) => (padding ? padding : '48px')}; padding: ${({ padding }) => (padding ? padding : '48px')};
margin: ${({ margin }) => (margin ? margin : '0')}; margin: ${({ margin }) => (margin ? margin : '0')};
border-radius: 12px; border-radius: 12px;

View File

@ -1,36 +1,61 @@
import React from 'react'; import React from 'react';
import { createPortal } from 'react-dom';
import TableStyle from './styles/TableStyle'; import TableStyle from './styles/TableStyle';
import TableHeader from './components/TableHeader'; import TableHeader from './components/TableHeader';
import TableRowItems from './components/TableRowItems'; import TableRowItems from './components/TableRowItems';
import RowsBackgroundStyle from './styles/RowsBackgroundStyle'; import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
import TableRowFooter from './components/TableRowFooter'; import TableRowFooter from './components/TableRowFooter';
import KeyCloakService from '../../../services/KeyCloakService';
import deleteSubmission from '../../../api/deleteSubmission'; import deleteSubmission from '../../../api/deleteSubmission';
import theme from '../../../utils/theme'; import theme from '../../../utils/theme';
import PopUp from '../PopUp';
import Button from '../Button';
import { Medium, H3 } from '../../../utils/fonts';
const Table = ({ items, orderedKeys, popUpMessageHandler, sortByUpdate, rowFooter = true }) => { const Table = ({
items,
orderedKeys,
popUpMessageHandler,
sortByUpdate,
rowFooter = true,
}) => {
const [, updateState] = React.useState(); const [, updateState] = React.useState();
const tableUpdate = React.useCallback(() => updateState({}), []); const tableUpdate = React.useCallback(() => updateState({}), []);
const [deletedItems, setDeletedItems] = React.useState([]); const [deletedItems, setDeletedItems] = React.useState([]);
const [deletePopUp, setDeletePopUp] = React.useState(false);
const itemsToRender = items.filter((item) => !deletedItems.includes(item)); const itemsToRender = items.filter((item) => !deletedItems.includes(item));
const deleteItem = async (item) => { const deleteItem = async (item) => {
if (item.submitter === KeyCloakService.getUsername()) { await deleteSubmission(
await deleteSubmission(item.id); item,
let newDeletedItems = deletedItems.slice(); deletedItems,
newDeletedItems.push(item); setDeletedItems,
setDeletedItems(newDeletedItems); popUpMessageHandler,
popUpMessageHandler( theme
'Complete', );
`Submission "${item.id}" deleted`, };
);
} const renderDeletePopUp = (item) => {
else { if (deletePopUp) {
popUpMessageHandler( return createPortal(
'Error', <PopUp
"You can't delete this submission!", width="40%"
null, height="35vh"
theme.colors.red padding="36px 32px 0"
closeHandler={() => setDeletePopUp(false)}
>
<H3>Warning</H3>
<Medium>Are you sure to delete submission with id: {item.id}?</Medium>
<Button
handler={() => {
setDeletePopUp(false);
deleteItem(item);
}}
>
Yes
</Button>
<Button handler={() => setDeletePopUp(false)}>No</Button>
</PopUp>,
document.body
); );
} }
}; };
@ -47,11 +72,12 @@ const Table = ({ items, orderedKeys, popUpMessageHandler, sortByUpdate, rowFoote
<tr key={`table-row-${i}`} className="TableStyle__tr"> <tr key={`table-row-${i}`} className="TableStyle__tr">
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} /> <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<TableRowFooter <TableRowFooter
deleteItem={deleteItem} deleteItem={() => setDeletePopUp(true)}
rowFooter={rowFooter} rowFooter={rowFooter}
item={item} item={item}
i={i} i={i}
/> />
{renderDeletePopUp(item)}
<RowsBackgroundStyle i={i} /> <RowsBackgroundStyle i={i} />
</tr> </tr>
); );

View File

@ -112,8 +112,6 @@ const AllEntries = (props) => {
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2); const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2); let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
console.log(CALC_PAGES(entries, 2));
console.log(entries);
return ( return (
<FlexColumn <FlexColumn
padding="24px" padding="24px"