Merge pull request #2588 from NationalSecurityAgency/t#2490/primevue-…

…smallScreenImprovements #2490: various small screen improvements for metrics pages
NationalSecurityAgency · Jun 18, 2024 · 5a64909 · 5a64909
2 parents 8944991 + f7c69ec
commit 5a64909
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 146 deletions.
diff --git a/dashboard-prime/src/components/metrics/ProjectMetrics.vue b/dashboard-prime/src/components/metrics/ProjectMetrics.vue
@@ -23,13 +23,13 @@ const buildTagCharts = () => {
 
 <template>
   <div>
-    <div class="flex">
-      <div class="w-full">
+    <div class="mb-4 flex">
         <num-users-per-day />
-      </div>
     </div>
-    <div v-if="tagCharts" class="flex flex-wrap gap-4 mt-4 mb-4" data-cy="userTagCharts">
-      <div class="flex flex-grow-1 flex-wrap" v-for="(tagChart, index) in tagCharts" :key="`${tagChart.key}-${index}`" style="min-width: 30vw;">
+    <div v-if="tagCharts"
+         class="flex flex-column gap-5"
+         data-cy="userTagCharts">
+      <div class="" v-for="(tagChart, index) in tagCharts" :key="`${tagChart.key}-${index}`" style="min-width: 30vw;">
         <user-tag-table v-if="tagChart.type === 'table'"
                         class="h-100 w-full"
                         :tag-chart="tagChart"

diff --git a/dashboard-prime/src/components/metrics/common/LevelBreakdownMetric.vue b/dashboard-prime/src/components/metrics/common/LevelBreakdownMetric.vue
@@ -130,7 +130,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card data-cy="levelsChart" >
+  <Card data-cy="levelsChart" :pt="{ body: { class: 'p-0 pt-2 pr-2' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader :title="title"></SkillsCardHeader>
     </template>

diff --git a/dashboard-prime/src/components/metrics/common/NumUsersPerDay.vue b/dashboard-prime/src/components/metrics/common/NumUsersPerDay.vue
@@ -139,7 +139,7 @@ const loadData = () => {
 </script>
 
 <template>
-  <Card data-cy="distinctNumUsersOverTime">
+  <Card data-cy="distinctNumUsersOverTime" class="w-full">
     <template #header>
       <SkillsCardHeader :title="mutableTitle">
         <template #headerContent>

diff --git a/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue b/dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router';
 import dayjs from 'dayjs';
 import MetricsService from "@/components/metrics/MetricsService.js";
@@ -9,8 +9,12 @@ import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
 import InputText from "primevue/inputtext";
 import SkillsCalendarInput from "@/components/utils/inputForm/SkillsCalendarInput.vue";
 import SkillsDropDown from "@/components/utils/inputForm/SkillsDropDown.vue";
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
+import Column from 'primevue/column'
 
 const route = useRoute();
+const responsive = useResponsiveBreakpoints()
+const isFlex = computed(() => responsive.md.value)
 
 const isLoading = ref(true);
 const usernameFilter = ref('');
@@ -99,82 +103,98 @@ const reloadTable = () => {
 </script>
 
 <template>
-  <Card data-cy="achievementsNavigator">
+  <Card data-cy="achievementsNavigator" :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Achievements"></SkillsCardHeader>
     </template>
     <template #content>
-      <div class="flex pb-2 flex-wrap">
-        <div class="flex flex-1 flex-column border-right-1 pr-3 gap-2">
-          <label for="user-name-filter">User Name Filter:</label>
-          <InputText class="w-full"
-                     v-model="usernameFilter"
-                     id="user-name-filter"
-                     data-cy="achievementsNavigator-usernameInput"
-                     @keydown.enter="reloadTable"
-                     aria-label="Skill name filter" />
-
-          <div class="mt-4">
-            <label>Types: </label>
-            <div class="flex gap-2 mt-2" data-cy="achievementsNavigator-typeInput">
-              <span v-for="tag in achievementTypes.available" :key="tag">
-                <Checkbox v-model="achievementTypes.selected" :value="tag" :name="tag" :inputId="tag"></Checkbox>
-                <label :for="tag" class="ml-2">
-                  {{ tag }}
-                </label>
-              </span>
+      <div class="p-3">
+        <div class="flex pb-2 flex-column lg:flex-row">
+          <div class="flex flex-1 flex-column lg:border-right-1 lg:surface-border lg:pr-3 gap-2">
+            <div class="field">
+              <label for="user-name-filter">User Name Filter:</label>
+              <InputText class="w-full"
+                         v-model="usernameFilter"
+                         id="user-name-filter"
+                         data-cy="achievementsNavigator-usernameInput"
+                         @keydown.enter="reloadTable"
+                         aria-label="Skill name filter" />
+            </div>
+            <div class="field">
+              <label>Types: </label>
+              <div class="flex gap-2 mt-2" data-cy="achievementsNavigator-typeInput">
+                <span v-for="tag in achievementTypes.available" :key="tag">
+                  <Checkbox v-model="achievementTypes.selected" :value="tag" :name="tag" :inputId="tag"></Checkbox>
+                  <label :for="tag" class="ml-2">
+                    {{ tag }}
+                  </label>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-1 flex-column gap-2 lg:border-right-1 lg:surface-border lg:pl-2 lg:pr-2">
+            <SkillsCalendarInput
+              v-model="fromDayFilter"
+              id="from-date-filter"
+              data-cy="achievementsNavigator-fromDateInput"
+              label="From Date:"
+              name="fromDayFilter"
+              input-class="w-full"
+              :max-date="toDayFilter" />
+
+            <SkillsDropDown
+                label="Minimum Level (Subject & Skill Only)"
+                name="levels-input-group"
+                id="levels-input-group"
+                data-cy="achievementsNavigator-levelsInput"
+                placeholder="Optionally select level"
+                optionLabel="text"
+                optionValue="value"
+                v-model="levels.selected"
+                :options="levels.available" />
+          </div>
+          <div class="flex flex-1 flex-column lg:gap-2 lg:pl-2">
+            <SkillsCalendarInput
+              v-model="toDayFilter"
+              id="to-date-filter"
+              data-cy="achievementsNavigator-toDateInput"
+              label="To Date:"
+              name="toDayFilter"
+              input-class="w-full"
+              :min-date="fromDayFilter" />
+
+            <div class="field">
+              <label for="name-filter">Name (Subject, Skill and Badge Only):</label>
+              <InputText class="w-full"
+                         v-model="nameFilter"
+                         id="name-filter"
+                         data-cy="achievementsNavigator-nameInput"
+                         @keydown.enter="reloadTable" />
             </div>
           </div>
         </div>
-        <div class="flex flex-1 flex-column gap-2 border-right-1 pl-2 pr-2">
-          <SkillsCalendarInput v-model="fromDayFilter" id="from-date-filter" data-cy="achievementsNavigator-fromDateInput"
-                               label="From Date:" name="fromDayFilter" input-class="w-full" :max-date="toDayFilter" />
-
-          <SkillsDropDown
-              label="Minimum Level (Subject & Skill Only)"
-              name="levels-input-group"
-              id="levels-input-group"
-              data-cy="achievementsNavigator-levelsInput"
-              placeholder="Optionally select level"
-              optionLabel="text"
-              optionValue="value"
-              v-model="levels.selected"
-              :options="levels.available" />
-        </div>
-        <div class="flex flex-1 flex-column gap-2 pl-2">
-          <SkillsCalendarInput v-model="toDayFilter" id="to-date-filter" data-cy="achievementsNavigator-toDateInput"
-                               label="To Date:" name="toDayFilter" input-class="w-full" :min-date="fromDayFilter" />
-
-          <label for="name-filter">Name (Subject, Skill and Badge Only):</label>
-          <InputText class="w-full"
-                     v-model="nameFilter"
-                     id="name-filter"
-                     data-cy="achievementsNavigator-nameInput"
-                     @keydown.enter="reloadTable" />
-        </div>
-      </div>
-      <div class="flex pl-3 mb-3 mt-3">
+        <div class="flex lg:pl-3 mb-3 lg:mt-3">
         <SkillsButton size="small" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
         <SkillsButton size="small" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
       </div>
-
-      <SkillsDataTable class="mb-5"
-                       data-cy="achievementsNavigator-table"
-                       :value="items"
-                       show-gridlines
-                       striped-rows
-                       lazy
-                       :loading="loadingTable"
-                       :total-records="totalRows"
-                       :rows="pageSize"
-                       :rowsPerPageOptions="possiblePageSizes"
-                       v-model:sort-field="sortBy"
-                       v-model:sort-order="sortOrder"
-                       @page="pageChanged"
-                       @sort="sortTable"
-                       paginator
-                       tableStoredStateId="achievementsNavigator-table">
-        <Column field="userName" header="Username" sortable>
+      </div>
+      <SkillsDataTable
+        data-cy="achievementsNavigator-table"
+        :value="items"
+        show-gridlines
+        striped-rows
+        lazy
+        :loading="loadingTable"
+        :total-records="totalRows"
+        :rows="pageSize"
+        :rowsPerPageOptions="possiblePageSizes"
+        v-model:sort-field="sortBy"
+        v-model:sort-order="sortOrder"
+        @page="pageChanged"
+        @sort="sortTable"
+        paginator
+        tableStoredStateId="achievementsNavigator-table">
+        <Column field="userName" header="Username" sortable :class="{'flex': isFlex }">
           <template #body="slotProps">
             <div class="flex">
               <div class="flex flex-1">
@@ -190,12 +210,12 @@ const reloadTable = () => {
             </div>
           </template>
         </Column>
-        <Column field="type" header="Type">
+        <Column field="type" header="Type" :class="{'flex': isFlex }">
           <template #body="slotProps">
             <achievement-type :type="slotProps.data.type" />
           </template>
         </Column>
-        <Column field="name" header="Name">
+        <Column field="name" header="Name" :class="{'flex': isFlex }">
           <template #body="slotProps">
             <span v-if="slotProps.data.name === 'Overall'" class="font-light text-sm">
               N/A
@@ -205,7 +225,7 @@ const reloadTable = () => {
             </span>
           </template>
         </Column>
-        <Column field="level" header="Level">
+        <Column field="level" header="Level" :class="{'flex': isFlex }">
           <template #body="slotProps">
             <span v-if="!slotProps.data.level" class="font-light text-sm">
               N/A
@@ -215,7 +235,7 @@ const reloadTable = () => {
             </span>
           </template>
         </Column>
-        <Column field="achievedOn" header="Date" sortable>
+        <Column field="achievedOn" header="Date" sortable :class="{'flex': isFlex }">
           <template #body="slotProps">
             <date-cell :value="slotProps.data.achievedOn" />
           </template>

diff --git a/dashboard-prime/src/components/metrics/projectAchievements/UsersAchievementsMetricPage.vue b/dashboard-prime/src/components/metrics/projectAchievements/UsersAchievementsMetricPage.vue
@@ -1,16 +1,14 @@
 <script setup>
-import LevelBreakdownMetric from "@/components/metrics/common/LevelBreakdownMetric.vue";
-import AchievementsNavigator from "@/components/metrics/projectAchievements/AchievementsNavigator.vue";
+import LevelBreakdownMetric from '@/components/metrics/common/LevelBreakdownMetric.vue'
+import AchievementsNavigator from '@/components/metrics/projectAchievements/AchievementsNavigator.vue'
 </script>
 
 <template>
   <div>
-    <div class="flex gap-2">
-      <div class="col">
-        <level-breakdown-metric />
-      </div>
+    <div class="flex flex-column gap-3">
+      <level-breakdown-metric />
+      <achievements-navigator />
     </div>
-    <achievements-navigator />
   </div>
 </template>
 

diff --git a/dashboard-prime/src/components/metrics/projectNav/MetricNavCard.vue b/dashboard-prime/src/components/metrics/projectNav/MetricNavCard.vue
@@ -3,7 +3,7 @@ defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);
 </script>
 
 <template>
-  <Card class="mt-4">
+  <Card>
     <template #content>
       <div>
         <div class="flex">
@@ -28,7 +28,7 @@ defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);
     <template #footer>
       <div class="text-center">
         <router-link :to="{ name: pathName }" :data-cy="`metricsNav-${title}`">
-          <SkillsButton size="small" :label="`Explore ${title}`" icon="fas fa-arrow-right" />
+          <SkillsButton size="small" :label="`${title}`" icon="fas fa-arrow-right" />
         </router-link>
       </div>
     </template>

diff --git a/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsNavCards.vue b/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsNavCards.vue
@@ -5,8 +5,8 @@ defineProps(['navCards'])
 </script>
 
 <template>
-  <div class="flex gap-3 flex-row">
-      <metric-nav-card v-for="(navItem) in navCards" :key="navItem.title" class="flex flex-1"
+  <div class="flex gap-3 flex-column lg:flex-row mt-4">
+      <metric-nav-card v-for="(navItem) in navCards" :key="navItem.title" class="flex-1"
                        :title="navItem.title" :subtitle="navItem.subtitle" :description="navItem.description"
                        :path-name="navItem.pathName" :icon="navItem.icon" />
   </div>

diff --git a/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsSmallNav.vue b/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsSmallNav.vue
@@ -7,23 +7,19 @@ const route = useRoute();
 </script>
 
 <template>
-  <ButtonGroup>
+  <div class="flex gap-1">
     <router-link :to="{ name: navItem.pathName }" v-for="navItem in navCards" :key="navItem.title">
-      <SkillsButton class="skill-nav-button"
+      <SkillsButton class=""
                     :aria-label="`${navItem.title} metrics`"
                     :data-cy="`${navItem.title}-metrics-link`"
-                    :class="{'bg-primary' : route.name === navItem.pathName, 'skills-white-text' : route.name === navItem.pathName}"
-                    variant="outline-info"> <i :class="navItem.icon"/><span class="sr-only">{{navItem.title}}</span></SkillsButton>
+                    :class="{
+                      'bg-primary' : route.name === navItem.pathName,
+                      'text-white' : route.name === navItem.pathName
+                    }"> <i :class="navItem.icon"/><span class="sr-only">{{navItem.title}}</span></SkillsButton>
     </router-link>
-  </ButtonGroup>
+  </div>
 </template>
 
 <style scoped>
-.skills-white-text i {
-  color: white !important;
-}
 
-.skill-nav-button:hover i {
-  color: white !important;
-}
 </style>