diff --git a/src/actions/warnings.js b/src/actions/warnings.js index 0a1c524945..8deee989d6 100644 --- a/src/actions/warnings.js +++ b/src/actions/warnings.js @@ -9,6 +9,7 @@ import { postNewWarning as postNewWarningAction, deleteWarningDescription as deleteWarningDescriptionAction, updateWarningDescription as updateWarningDescriptionAction, + reorderWarningDescriptions as reorderWarningDescriptionsAction, editWarningDescription as editWarningDescriptionAction, } from '../constants/warning'; @@ -163,3 +164,18 @@ export const updateWarningDescription = warningDescriptionId => { } }; }; + +export const reorderWarningDescriptions = warningDescriptions => { + const url = ENDPOINTS.REORDER_WARNING_DESCRIPTIONS(warningDescriptions); + + return async dispatch => { + try { + const res = await axios.put(url, { warningDescriptions }); + const response = await dispatch(reorderWarningDescriptionsAction(res.data)); + + return response.payload; + } catch (error) { + return { error: error.message }; + } + }; +}; diff --git a/src/components/Warnings/Warnings.jsx b/src/components/Warnings/Warnings.jsx index 58906c97d2..6dac556252 100644 --- a/src/components/Warnings/Warnings.jsx +++ b/src/components/Warnings/Warnings.jsx @@ -150,20 +150,22 @@ export default function Warning({ personId, username, userRole, displayUser }) { const warnings = !toggle ? null - : usersWarnings.map(warning => ( -
-
- -

{warning.title}

+ : usersWarnings + .map(warning => ( +
+
+ +

{warning.title}

+
-
- )); + )) + .sort((warn1, warn2) => warn1.order - warn2.order); return (
diff --git a/src/components/Warnings/Warnings.module.css b/src/components/Warnings/Warnings.module.css index f83cf58f59..edfc5844dc 100644 --- a/src/components/Warnings/Warnings.module.css +++ b/src/components/Warnings/Warnings.module.css @@ -185,6 +185,10 @@ margin: 0.5em 0; } +.modal__information.darkMode { + color: black !important; +} + .alert__container { margin-top: 0.5em; text-align: center; @@ -220,6 +224,15 @@ input[type='text'] { .warnings__tracker__modal { z-index: 1100 !important; } + +.warning__tracker__modal_save__changes__btns { + width: 20%; +} + +.warnings__descriptions__title.darkMode { + color: black !important; +} + /* Media query for screens smaller than 767px */ @media (max-width: 767px) { .warnings-container { diff --git a/src/components/Warnings/modals/WarningTrackerModal.jsx b/src/components/Warnings/modals/WarningTrackerModal.jsx index dd95d43f09..7aa57b175c 100644 --- a/src/components/Warnings/modals/WarningTrackerModal.jsx +++ b/src/components/Warnings/modals/WarningTrackerModal.jsx @@ -7,7 +7,7 @@ /* eslint-disable no-alert */ import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Alert } from 'reactstrap'; import { useEffect, useState } from 'react'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTimes } from '@fortawesome/free-solid-svg-icons'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; @@ -19,6 +19,7 @@ import { updateWarningDescription, deleteWarningDescription, editWarningDescription, + reorderWarningDescriptions, } from '../../../actions/warnings'; import styles from '../Warnings.module.css'; @@ -47,6 +48,9 @@ function WarningTrackerModal({ const [warningWasEdited, setWarningWasEdited] = useState(false); const [isPermanent, setIsPermanent] = useState(false); const [error, setError] = useState(null); + const [dragIndex, setDragIndex] = useState(null); + const [warningsEdited, setWarningsEdited] = useState(false); + const darkMode = useSelector(state => state.theme.darkMode); const dispatch = useDispatch(); const rolesAllowedToTracking = ['Administrator', 'Owner']; @@ -86,17 +90,41 @@ function WarningTrackerModal({ Information -

+

Pressing the "+" button will allow you to activate the warning tracker.

-

+

Pressing the "-" button will allow you to deactivate the warning tracker.

-

+

Pressing the "x" button will allow you to delete the warning tracker. This will also delete all assoicated warnings for every user (be careful doing this!).

-

+

Pressing the "Add New Warning Tracker" button will allow you to add a new warning to the list.

@@ -165,25 +193,42 @@ function WarningTrackerModal({ const handleCancelEdit = () => { fetchWarningDescriptions(); setWarningEdited(false); + setWarningsEdited(false); setWarningWasEdited(false); }; const handleSaveEditedWarning = () => { - dispatch(editWarningDescription(editedWarning)).then(res => { - if (res.error) { - setError(res.error); + if (warningEdited) { + dispatch(editWarningDescription(editedWarning)).then(res => { + if (res.error) { + setError(res.error); + setWarningEdited(false); + setEditedWarning(null); + fetchWarningDescriptions(); + return; + } setWarningEdited(false); setEditedWarning(null); + setError(null); + getUsersWarnings(); fetchWarningDescriptions(); - return; - } - setWarningEdited(false); - setEditedWarning(null); - setError(null); - getUsersWarnings(); - fetchWarningDescriptions(); - setWarningWasEdited(true); - }); + setWarningWasEdited(true); + }); + } else if (warningsEdited) { + dispatch(reorderWarningDescriptions(warningDescriptions)).then(res => { + if (res?.error) { + setError(res.error); + setWarningsEdited(false); + fetchWarningDescriptions(); + return; + } + setWarningsEdited(false); + setError(null); + getUsersWarnings(); + fetchWarningDescriptions(); + setWarningWasEdited(true); + }); + } }; // eslint-disable-next-line no-shadow @@ -246,6 +291,23 @@ function WarningTrackerModal({ ); } + const handleDragStart = index => { + setDragIndex(index); + }; + + const handleDragOver = (e, index) => { + e.preventDefault(); + if (dragIndex === index) return; + + const updatedWarningList = [...warningDescriptions]; + const [movedWarning] = updatedWarningList.splice(dragIndex, 1); + updatedWarningList.splice(index, 0, movedWarning); + + setDragIndex(index); + setWarningDescriptions(updatedWarningList); + setWarningsEdited(true); + }; + return ( // need to make .modal in modal.css z-index go to 1051 // or make .modal-backdrop z-index go to 1049 otherwise the important makes it nullify the warning tracker modal @@ -286,7 +348,12 @@ function WarningTrackerModal({ )} {warningDescriptions.map((warning, index) => ( -
+
handleDragStart(index)} + onDragOver={e => handleDragOver(e, index)} + > reorder {warning.activeWarning ? (
))} - {warningEdited && ( -
- -
)} -
+
{!toggeleWarningInput && (