filter incomplete users in the backend

client/src/components/Onboarding/OnboardingAdmin.jsx

@@ -237,17 +237,21 @@ const OnboardingAdmin = () => {
   const [showIncompleteOnly, setShowIncompleteOnly] = useState(false);
 
   const toggleShowIncomplete = () => {
+    dispatch({
+      type: 'FETCH_ONBOARDING_ADMIN_LIST',
+      payload: {
+        offset,
+        limit,
+        query: null,
+        showIncompleteOnly: !showIncompleteOnly, // Toggle the parameter
+      },
+    });
     setShowIncompleteOnly((prev) => !prev);
   };
 
   const { users, offset, limit, total, query, loading, error } = useSelector(
     (state) => state.onboarding.admin
   );
-
-  const filteredUsers = users.filter((user) =>
-    showIncompleteOnly ? !user.setupComplete : true
-  );
-
   const paginationCallback = useCallback(
     (page) => {
       dispatch({
@@ -256,10 +260,11 @@ const OnboardingAdmin = () => {
           offset: (page - 1) * limit,
           limit,
           query,
+          showIncompleteOnly,
         },
       });
     },
-    [offset, limit, query]
+    [offset, limit, query, showIncompleteOnly]
   );
 
   const viewLogCallback = useCallback(
@@ -276,7 +281,7 @@ const OnboardingAdmin = () => {
   useEffect(() => {
     dispatch({
       type: 'FETCH_ONBOARDING_ADMIN_LIST',
-      payload: { offset, limit, query: null },
+      payload: { offset, limit, query: null, showIncompleteOnly },
     });
   }, [dispatch]);
 
@@ -294,6 +299,7 @@ const OnboardingAdmin = () => {
       </div>
     );
   }
+
   return (
     <div className={styles.root}>
       <div className={styles['container']}>
@@ -302,7 +308,7 @@ const OnboardingAdmin = () => {
           <div className={styles['search-checkbox-container']}>
             <OnboardingAdminSearchbar />
             <label
-              className={styles['checkbox-label']}
+              className={styles['checkbox-label-container']}
               htmlFor="incompleteuser"
             >
               <Checkbox
@@ -313,24 +319,24 @@ const OnboardingAdmin = () => {
                 tabIndex={0}
                 onClick={toggleShowIncomplete}
               />
-              Show Incomplete
+              <span className={styles['label']}>Show Only Incomplete</span>
             </label>
           </div>
         </div>
-        {filteredUsers.length === 0 && (
+        {users.length === 0 && (
           <div className={styles['no-users-placeholder']}>
             <Message type="warn">No users to show.</Message>
           </div>
         )}
         <div className={styles['user-container']}>
-          {filteredUsers.length > 0 && (
+          {users.length > 0 && (
             <OnboardingAdminList
-              users={filteredUsers}
+              users={users}
               viewLogCallback={viewLogCallback}
             />
           )}
         </div>
-        {filteredUsers.length > 0 && (
+        {users.length > 0 && (
           <div className={styles['paginator-container']}>
             <Paginator
               current={current}

client/src/components/Onboarding/OnboardingAdmin.module.scss

@@ -22,25 +22,44 @@
   border-bottom: 1px solid #707070;
   padding-bottom: 8px;
   margin-bottom: 1.5em;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 .search-checkbox-container {
   display: flex;
-  width: 45%;
-  justify-content: space-between;
   align-items: center;
+
+  @media (max-width: 990px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
-.checkbox-label {
+.checkbox-label-container {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  width: 130px;
-  margin: 0;
-  font-weight: bold;
   font-size: 13px;
+  margin: 0px 0px 0px 20px;
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+    margin-top: 20px;
+  }
+
+  @media (max-width: 991px) {
+    margin-left: 0;
+    margin-top: 10px;
+  }
 }
 
+.label {
+  font-weight: bold;
+  margin: 0px 0px 0px 10px;
+}
 .paginator-container {
   width: 100%;
   display: flex;
@@ -100,8 +119,9 @@
 .user > td:not(.has-wrappable-content):not(.status) {
   @include truncate-with-ellipsis;
 }
-.user:nth-child(even) > td:not(.staffwait):not(.name) {
-  background-color: #c6c6c61a;
+.user:nth-child(4n),
+.user:nth-child(4n-1) > td:not(.staffwait) {
+  background-color: #f4f4f4;
 }
 
 .username {

client/src/components/Onboarding/OnboardingAdminSearchbar.module.scss

@@ -17,7 +17,13 @@
 /* WARN: Non-standard un-documented first-party breakpoint */
 @media (max-width: 1700px) {
   .query-fieldset {
-    width: 460px;
+    width: 360px;
+  }
+}
+
+@media (max-width: 768px) {
+  .query-fieldset {
+    width: 260px;
   }
 }
 /* FP-563: Support count in status message */

client/src/components/Onboarding/OnboardingStatus.jsx

@@ -22,6 +22,9 @@ const getContents = (step) => {
     case 'completed':
       type = 'success';
       break;
+    case null:
+      type = 'unavaialble';
+      break;
     default:
       type = 'normal';
   }
@@ -38,6 +41,8 @@ const getContents = (step) => {
     case 'failed':
     case 'error':
       return <Pill type={type}>Unsuccessful</Pill>;
+    case null:
+      return <Pill type={type}>Unavailable</Pill>;
     case 'completed':
       return <Pill type={type}>Completed</Pill>;
     case 'processing':

client/src/components/_common/Pill/Pill.module.scss

@@ -39,3 +39,8 @@
 .is-normal {
   background-color: var(--global-color-accent--normal);
 }
+
+.is-unavaialble {
+  background-color: transparent;
+  color: inherit;
+}

client/src/redux/sagas/onboarding.sagas.js

@@ -3,8 +3,14 @@ import { fetchUtil } from 'utils/fetchUtil';
 import Cookies from 'js-cookie';
 
 // Admin listing of all users
-export async function fetchOnboardingAdminList(offset, limit, q) {
-  const params = { offset, limit };
+export async function fetchOnboardingAdminList(
+  offset,
+  limit,
+  q,
+  showIncompleteOnly
+) {
+  const params = { offset, limit, showIncompleteOnly };
+  console.log('in sagas 1', showIncompleteOnly);
   if (q) {
     params.q = q;
   }
@@ -18,8 +24,15 @@ export async function fetchOnboardingAdminList(offset, limit, q) {
 export function* getOnboardingAdminList(action) {
   yield put({ type: 'FETCH_ONBOARDING_ADMIN_LIST_PROCESSING' });
   try {
-    const { offset, limit, query } = action.payload;
-    const result = yield call(fetchOnboardingAdminList, offset, limit, query);
+    const { offset, limit, query, showIncompleteOnly } = action.payload;
+    const result = yield call(
+      fetchOnboardingAdminList,
+      offset,
+      limit,
+      query,
+      showIncompleteOnly
+    );
+    console.log('in sagas 2', showIncompleteOnly);
     yield put({
       type: 'FETCH_ONBOARDING_ADMIN_LIST_SUCCESS',
       payload: {

client/src/redux/sagas/onboarding.sagas.test.js

@@ -23,14 +23,19 @@ jest.mock('cross-fetch');
 describe('getOnboardingAdminList Saga', () => {
   it('should fetch list of onboarding users and transform state', () =>
     expectSaga(getOnboardingAdminList, {
-      payload: { offset: 0, limit: 25, query: 'query' },
+      payload: {
+        offset: 0,
+        limit: 25,
+        query: 'query',
+        showIncompleteOnly: true,
+      },
     })
       .withReducer(onboarding)
       .provide([
         [matchers.call.fn(fetchOnboardingAdminList), onboardingAdminFixture],
       ])
       .put({ type: 'FETCH_ONBOARDING_ADMIN_LIST_PROCESSING' })
-      .call(fetchOnboardingAdminList, 0, 25, 'query')
+      .call(fetchOnboardingAdminList, 0, 25, 'query', true)
       .put({
         type: 'FETCH_ONBOARDING_ADMIN_LIST_SUCCESS',
         payload: {

server/portal/apps/onboarding/api/views.py

@@ -264,8 +264,15 @@ def get(self, request):
         if q:
             query = q_to_model_queries(q)
             results = results.filter(query)
+        show_incomplete_only = request.GET.get('showIncompleteOnly').lower()    
+
+        # Filter users based on the showIncompleteOnly parameter 
+        if show_incomplete_only == 'true':
+            results = results.filter(profile__setup_complete=False)  
         # Get users, with most recently joined users that do not have setup_complete, first
-        results = results.order_by('-date_joined', 'profile__setup_complete', 'last_name', 'first_name')
+
+        results = results.order_by('-date_joined', 'profile__setup_complete', 'last_name', 'first_name')      
+
         # Uncomment this line to simulate many user results
         # results = list(results) * 105
         total = len(results)