Merge pull request #508 from yeatmanlab/fix/optional-assessments-toggle

Fix bug where optional toggle was not showing for users with one admin
yeatmanlab · Apr 15, 2024 · cd0eea9 · cd0eea9
2 parents 05b7675 + 038908d
commit cd0eea9
Showing 1 changed file with 30 additions and 27 deletions.
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
@@ -9,33 +9,36 @@
         <h2 v-if="adminInfo?.length == 1" class="p-float-label dropdown-container">
           {{ adminInfo.at(0).name }}
         </h2>
-        <div
-          v-if="adminInfo?.length > 1"
-          class="flex flex-row justify-center align-items-center p-float-label dropdown-container gap-4"
-        >
-          <div class="assignment-select-container flex flex-row justify-content-between">
-            <div class="flex flex-column">
-              <PvDropdown
-                v-model="selectedAdmin"
-                :options="adminInfo ?? []"
-                option-label="name"
-                input-id="dd-assignment"
-                data-cy="dropdown-select-administration"
-                @change="toggleShowOptionalAssessments"
-              />
-              <label for="dd-assignment">{{ $t('homeParticipant.selectAssignment') }}</label>
-            </div>
-
-            <div
-              v-if="optionalAssessments.length !== 0"
-              class="switch-container flex flex-row align-items-center justify-content-end mr-6"
-            >
-              <PvInputSwitch
-                v-model="showOptionalAssessments"
-                input-id="switch-optional"
-                data-cy="switch-show-optional-assessments"
-              />
-              <label for="switch-optional" class="mr-7">{{ $t('homeParticipant.showOptionalAssignments') }}</label>
+        <div class="flex flex-row-reverse align-items-end gap-2 justify-content-between">
+          <div
+            v-if="optionalAssessments.length !== 0"
+            class="switch-container flex flex-row align-items-center justify-content-end mr-6 gap-2"
+          >
+            <PvInputSwitch
+              v-model="showOptionalAssessments"
+              input-id="switch-optional"
+              data-cy="switch-show-optional-assessments"
+            />
+            <label for="switch-optional" class="mr-2 text-gray-500">{{
+              $t('homeParticipant.showOptionalAssignments')
+            }}</label>
+          </div>
+          <div
+            v-if="adminInfo?.length > 1"
+            class="flex flex-row justify-center align-items-center p-float-label dropdown-container gap-4"
+          >
+            <div class="assignment-select-container flex flex-row justify-content-between">
+              <div class="flex flex-column">
+                <PvDropdown
+                  v-model="selectedAdmin"
+                  :options="adminInfo ?? []"
+                  option-label="name"
+                  input-id="dd-assignment"
+                  data-cy="dropdown-select-administration"
+                  @change="toggleShowOptionalAssessments"
+                />
+                <label for="dd-assignment">{{ $t('homeParticipant.selectAssignment') }}</label>
+              </div>
             </div>
           </div>
         </div>