Merge pull request #331 from ecare-software/dev

Filter users by active / admin deactivate users
ecare-software · Apr 26, 2024 · 9190e0a · 9190e0a
2 parents 636c2ba + 48854a2
commit 9190e0a
Show file tree

Hide file tree

Showing 9 changed files with 482 additions and 160 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -254,7 +254,7 @@ class App extends Component {
   };
 
   getAllUsers = () => {
-    Axios.get('/api/users/' + this.state.userObj.homeId).then((allUsers) => {
+    Axios.get(`/api/users/${this.state.userObj.homeId}?isActive`).then((allUsers) => {
       this.setState({ allUsers: allUsers.data, allUsersSet: true });
     });
   };

diff --git a/client/src/components/Forms/IncidentReport.js b/client/src/components/Forms/IncidentReport.js
@@ -297,7 +297,7 @@ class IncidentReport extends Component {
   getStaff = async () => {
     try {
       let { data: staff } = await Axios.get(
-        `/api/users/${this.props.userObj.homeId}`
+        `/api/users/${this.props.userObj.homeId}?isActive=true`
       );
 
       staff = staff.filter((staff) => {

diff --git a/client/src/components/Forms/RestraintReport.js b/client/src/components/Forms/RestraintReport.js
@@ -332,7 +332,7 @@ class RestraintReport extends Component {
   getStaff = async () => {
     try {
       let { data: staff } = await Axios.get(
-        `/api/users/${this.props.userObj.homeId}`
+        `/api/users/${this.props.userObj.homeId}?isActive=true`
       );
 
       staff = staff.filter((staff) => {

diff --git a/client/src/components/Forms/SeriousIncidentReport.js b/client/src/components/Forms/SeriousIncidentReport.js
@@ -309,7 +309,7 @@ class SeriousIncidentReport extends Component {
   getStaff = async () => {
     try {
       let { data: staff } = await Axios.get(
-        `/api/users/${this.props.userObj.homeId}`
+        `/api/users/${this.props.userObj.homeId}?isActive=true`
       );
 
       staff = staff.filter((staff) => {

diff --git a/client/src/components/UserManagement/ActivateUser.js b/client/src/components/UserManagement/ActivateUser.js
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Modal, Button } from "react-bootstrap";
+
+export default function ActivateUser({ id, fetchData }) {
+  const [showActivation, setShowActivation] = useState(false);
+
+  const handleClose = () => setShowActivation(false);
+  const handleShow = () => setShowActivation(true);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  // Success Dialog State
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  // Error Dialog State
+  const [showError, setShowError] = useState(false);
+
+  const activateUser = async (id) => {
+    try {
+      const { data } = await axios(`/api/users/${id}`, {
+        method: "PUT",
+        data: {
+          isActive: true,
+        },
+      });
+
+      setData(data);
+      setIsLoading(false);
+
+      // Hide Modal on Submission
+      setShowActivation(false);
+
+      // Success Alert Popup
+      setShowSuccess(true);
+
+      fetchData(data);
+    } catch (e) {
+      setIsLoading(false);
+
+      // Hides Modal on submission
+      setShowActivation(false);
+
+      // Error Alert Popup
+      setShowError(true);
+      console.error(e);
+    }
+  };
+
+  const activateUserModal = (
+    <Modal show={showActivation} backdrop="static" onHide={handleClose}>
+      <Modal.Header closeButton style={{ backgroundColor: "#fff" }}>
+        <Modal.Title style={{ backgroundColor: "#fff" }}>
+          Activate User
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        Are you sure you want to activate this user?
+      </Modal.Body>
+      <Modal.Footer style={{ backgroundColor: "#fff" }}>
+        <Button variant="outline-dark" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          variant="success"
+          onClick={() => activateUser(id)}
+        >
+          Activate
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+
+  const successAlert = (
+    <Modal
+      show={showSuccess}
+      onHide={() => {
+        setShowSuccess(false);
+        handleClose();
+      }}
+      backdrop="static"
+    >
+      <Modal.Header
+        closeButton
+        style={{ backgroundColor: "#00E676" }}
+      >{"Success!"}</Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        {"User was successfully activated"}
+      </Modal.Body>
+    </Modal>
+  );
+
+  const errorAlert = (
+    <Modal
+      show={showError}
+      onHide={() => {
+        setShowError(false);
+        handleClose();
+      }}
+      backdrop="static"
+    >
+      <Modal.Header
+        closeButton
+        style={{ backgroundColor: "#FF1744" }}
+      >{"Error!"}</Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        {"There was an error activating the user."}
+      </Modal.Body>
+    </Modal>
+  );
+
+  return (
+    <>
+      <button className="btn btn-link extraInfoButton" onClick={handleShow}>
+        {"Activate"}
+      </button>
+      {activateUserModal}
+      {successAlert}
+      {errorAlert}
+    </>
+  );
+}
diff --git a/client/src/components/UserManagement/DeactivateUser.js b/client/src/components/UserManagement/DeactivateUser.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Modal, Button } from "react-bootstrap";
+
+export default function DeactivateUser({ id, fetchData }) {
+  const [showDeactivation, setShowDeactivation] = useState(false);
+
+  const handleClose = () => setShowDeactivation(false);
+  const handleShow = () => setShowDeactivation(true);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  // Success Dialog State
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  // Error Dialog State
+  const [showError, setShowError] = useState(false);
+
+  const deactivateUser = async (id) => {
+    try {
+      const { data } = await axios(`/api/users/${id}`, {
+        method: "PUT",
+        data: {
+          isActive: false,
+        },
+      });
+
+      setData(data);
+      setIsLoading(false);
+
+      // Hide Modal on Submission
+      setShowDeactivation(false);
+
+      // Success Alert Popup
+      setShowSuccess(true);
+
+      fetchData(data);
+    } catch (e) {
+      setIsLoading(false);
+
+      // Hides Modal on submission
+      setShowDeactivation(false);
+
+      // Error Alert Popup
+      setShowError(true);
+      console.error(e);
+    }
+  };
+
+  const deactivateUserModal = (
+    <Modal show={showDeactivation} backdrop="static" onHide={handleClose}>
+      <Modal.Header closeButton style={{ backgroundColor: "#fff" }}>
+        <Modal.Title style={{ backgroundColor: "#fff" }}>
+          Deactivate User
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        Are you sure you want to deactivate this user?
+      </Modal.Body>
+      <Modal.Footer style={{ backgroundColor: "#fff" }}>
+        <Button variant="outline-dark" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          variant="danger"
+          onClick={() => deactivateUser(id)}
+        >
+          Deactivate
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+
+  const successAlert = (
+    <Modal
+      show={showSuccess}
+      onHide={() => {
+        setShowSuccess(false);
+        handleClose();
+      }}
+      backdrop="static"
+    >
+      <Modal.Header closeButton style={{ backgroundColor: "#00E676" }}>
+        {"Success!"}
+      </Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        {"User was successfully Deactivated."}
+      </Modal.Body>
+    </Modal>
+  );
+
+  const errorAlert = (
+    <Modal
+      show={showError}
+      onHide={() => {
+        setShowError(false);
+        handleClose();
+      }}
+      backdrop="static"
+    >
+      <Modal.Header closeButton style={{ backgroundColor: "#FF1744" }}>
+        {"Error!"}
+      </Modal.Header>
+      <Modal.Body style={{ backgroundColor: "#fff" }}>
+        {"There was an error deactivating the user."}
+      </Modal.Body>
+    </Modal>
+  );
+
+  return (
+    <>
+      <button className="btn btn-link extraInfoButton" onClick={handleShow}>
+        {"Deactivate"}
+      </button>
+      {deactivateUserModal}
+      {successAlert}
+      {errorAlert}
+    </>
+  );
+}