Added list of archived users in UserManagementForm

chrsrns · Nov 22, 2023 · f9e7e4c · f9e7e4c
1 parent 6e13df1
commit f9e7e4c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 6 deletions.
diff --git a/routes/admin.routes.js b/routes/admin.routes.js
@@ -34,6 +34,31 @@ router.get("/users", async (req, res, next) => {
   }
 });
 
+router.get("/archivedusers", async (req, res, next) => {
+  try {
+    const user = await prisma.user.findMany({
+      where: {
+        approved: user_approval_type.Archived
+      },
+      select: {
+        id: true,
+        fname: true,
+        mname: true,
+        lname: true,
+        addr: true,
+        cnum: true,
+        emailaddr: true,
+        bdate: true,
+        type: true,
+        login_username: true
+      }
+    });
+    res.json(user);
+  } catch (err) {
+    res.status(500).json({ msg: err.message });
+  }
+});
+
 router.get("/feedbacks", async (req, res, next) => {
   try {
     const feedbacks = await prisma.feedback.findMany({

diff --git a/...ents/AdminTools/RegistrationForm/index.js → ...ts/AdminTools/UserManagementForm/index.js b/...ents/AdminTools/RegistrationForm/index.js → ...ts/AdminTools/UserManagementForm/index.js
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
-import { Form, Button, Row, Col, Stack } from 'react-bootstrap';
+import { Form, Button, Row, Col, Stack, Accordion, ListGroupItem } from 'react-bootstrap';
 import Select from 'react-select'
 
 import LoadingOverlay from 'react-loading-overlay-ts';
@@ -29,11 +29,13 @@ const DEFAULT_FORM_VALUES = {
 /// TODO Add placeholders to the form controls
 const DEFAULT_SELECT_VALUE = { value: { ...DEFAULT_FORM_VALUES }, label: "Create new user" }
 
-function RegistrationForm() {
+export const UserManagementForm = () => {
 
   const [usersList, setUsersList] = useState([])
   const [userTypes, setUserTypes] = useState([])
 
+  const [archivedUsersList, setArchivedUsersList] = useState([])
+
   const [usersListOptions, setUsersListOptions] = useState([])
   const [selectedUser, setSelectedUser] = useState({ ...DEFAULT_SELECT_VALUE })
 
@@ -62,6 +64,15 @@ function RegistrationForm() {
           setUsersList(data)
           return data;
         }),
+      customFetch(`${global.server_backend_url}/backend/admin/archivedusers`)
+        .then((response) => {
+          if (response.ok) return response.json();
+          else throw response;
+        })
+        .then((data) => {
+          setArchivedUsersList(data)
+          return data;
+        }),
       customFetch(`${global.server_backend_url}/backend/admin/usertypes`)
         .then((response) => {
           if (response.ok) return response.json();
@@ -290,7 +301,7 @@ function RegistrationForm() {
 
   return (
     <LoadingOverlay active={isLoading} spinner text='Waiting for update...'>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className='mb-3'>
         {/* <Form.Group className='mb-3'> */}
         {/*   <Form.Select size="lg" onChange={(e) => { */}
         {/*     setSelectedUser(e.target.value) */}
@@ -434,8 +445,40 @@ function RegistrationForm() {
           </Button>
         </Stack>
       </Form>
+      <Accordion>
+        <Accordion.Item eventKey='0'>
+          <Accordion.Header>
+            Archived Users
+          </Accordion.Header>
+          <Accordion.Body>
+            <Accordion>
+              {archivedUsersList.map((user) => {
+                return (
+                  <Accordion.Item eventKey={`${user.id}`} >
+                    <Accordion.Header>
+                      {`[${user.type}] ${user.lname}, ${user.fname} ${user.mname}`}
+                    </Accordion.Header>
+                    <Accordion.Body>
+                      {/* <p className="fw-bold mb-2 border-bottom border-secondary pb-2"> */}
+                      {/* </p> */}
+
+                      <p>{`Username: ${user.login_username}`}</p>
+                      <p>{`Address: ${user.addr}`}</p>
+                      <p>{`Contact Number: ${user.cnum}`}</p>
+                      <p>{`Email Address: ${user.emailaddr}`}</p>
+                      <p>{`Birthdate: ${moment(user.bdate).format('MMM DD, YYYY')}`}</p>
+                    </Accordion.Body>
+                  </Accordion.Item>
+                )
+              })}
+            </Accordion>
+            {archivedUsersList.length === 0 ? "Nothing to show." : ''}
+          </Accordion.Body>
+
+        </Accordion.Item>
+      </Accordion>
     </LoadingOverlay>
   );
 }
 
-export default RegistrationForm;
+export default UserManagementForm;
diff --git a/src-frontend-react/src/components/AdminTools/index.js b/src-frontend-react/src/components/AdminTools/index.js
@@ -1,7 +1,7 @@
 import { Button, Card, Col, Row } from "react-bootstrap";
 import { Jumbotron } from "../Jumbotron";
 import { AnnouncementsForm } from "./AnnouncementsForm";
-import RegistrationForm from "./RegistrationForm";
+import UserManagementForm from "./UserManagementForm";
 import UserApprovalComponent from "./UserApproval";
 import Cookies from "js-cookie";
 import FeedbackAnalytics from "./FeedbackAnalytics";
@@ -31,7 +31,7 @@ export const AdminTools = ({ sidebarbtn_onClick }) => {
               <Card>
                 <Card.Header as="h2">Users Management</Card.Header>
                 <Card.Body>
-                  <RegistrationForm />
+                  <UserManagementForm />
                 </Card.Body>
               </Card>
             </Col>