Added Incomplete Only Filter for onboarding Admin

TACC · Oct 25, 2023 · f8f03ac · f8f03ac
1 parent a9e6f73
commit f8f03ac
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/client/src/components/Onboarding/OnboardingAdmin.jsx b/client/src/components/Onboarding/OnboardingAdmin.jsx
@@ -6,6 +6,7 @@ import {
   SectionMessage,
   Message,
   Paginator,
+  Checkbox,
 } from '_common';
 import { v4 as uuidv4 } from 'uuid';
 import PropTypes from 'prop-types';
@@ -233,11 +234,24 @@ OnboardingAdminList.propTypes = {
 const OnboardingAdmin = () => {
   const dispatch = useDispatch();
   const [eventLogModalParams, setEventLogModalParams] = useState(null);
+  const [showIncompleteOnly, setShowIncompleteOnly] = useState(false); // Add state to set the incomplete
+
+  const toggleShowIncomplete = () => {
+    setShowIncompleteOnly((prev) => !prev);
+  };
 
   const { users, offset, limit, total, query, loading, error } = useSelector(
     (state) => state.onboarding.admin
   );
 
+  const filteredUsers = users.filter((user) => {
+    if (showIncompleteOnly) {
+      return !user.setupComplete;
+    } else {
+      return true;
+    }
+  });
+
   const paginationCallback = useCallback(
     (page) => {
       dispatch({
@@ -289,22 +303,39 @@ const OnboardingAdmin = () => {
       <div className={styles['container']}>
         <div className={styles['container-header']}>
           <h5>Administrator Controls</h5>
-          <OnboardingAdminSearchbar />
+          <div className={styles['search-checkbox-container']}>
+            <OnboardingAdminSearchbar />
+            <label
+              className={styles['checkbox-label']}
+              htmlFor="incompleteuser"
+            >
+              <Checkbox
+                isChecked={showIncompleteOnly}
+                id="incompleteuser"
+                role="checkbox"
+                aria-label="Show Incomplete Only"
+                name="sasas"
+                tabIndex={0}
+                onClick={toggleShowIncomplete}
+              />
+              Show Incomplete
+            </label>
+          </div>
         </div>
-        {users.length === 0 && (
+        {filteredUsers.length === 0 && (
           <div className={styles['no-users-placeholder']}>
             <Message type="warn">No users to show.</Message>
           </div>
         )}
         <div className={styles['user-container']}>
-          {users.length > 0 && (
+          {filteredUsers.length > 0 && (
             <OnboardingAdminList
-              users={users}
+              users={filteredUsers}
               viewLogCallback={viewLogCallback}
             />
           )}
         </div>
-        {users.length > 0 && (
+        {filteredUsers.length > 0 && (
           <div className={styles['paginator-container']}>
             <Paginator
               current={current}

diff --git a/client/src/components/Onboarding/OnboardingAdmin.module.scss b/client/src/components/Onboarding/OnboardingAdmin.module.scss
@@ -24,6 +24,23 @@
   margin-bottom: 1.5em;
 }
 
+.search-checkbox-container {
+  display: flex;
+  width: 45%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checkbox-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 130px;
+  margin: 0;
+  font-weight: bold;
+  font-size: 13px;
+}
+
 .paginator-container {
   width: 100%;
   display: flex;