warning popUp for delete submission
This commit is contained in:
parent
38735c7982
commit
7d7b6d88b9
@ -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
|
||||||
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user