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

…smallScreenImprovements #2490: added resize support to project errors and user actions pages
NationalSecurityAgency · Jun 19, 2024 · 5b0fb2d · 5b0fb2d
2 parents 5a64909 + 1f78dd4
commit 5b0fb2d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 24 deletions.
diff --git a/dashboard-prime/src/components/projects/ProjectErrors.vue b/dashboard-prime/src/components/projects/ProjectErrors.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router';
 import ProjectService from '@/components/projects/ProjectService';
 import SubPageHeader from "@/components/utils/pages/SubPageHeader.vue";
 import DateCell from "@/components/utils/table/DateCell.vue";
 import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
 import { useConfirm } from 'primevue/useconfirm'
 import {useProjDetailsState} from "@/stores/UseProjDetailsState.js";
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
+import Column from 'primevue/column'
 
 const route = useRoute();
 
@@ -95,6 +97,9 @@ function loadErrors() {
     loading.value = false;
   });
 }
+
+const responsive = useResponsiveBreakpoints()
+const isFlex = computed(() => responsive.md.value)
 </script>
 
 <template>
@@ -110,7 +115,7 @@ function loadErrors() {
       </div>
     </sub-page-header>
 
-    <Card>
+    <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
       <template #content>
         <SkillsDataTable :busy="loading"
                          :value="errors"
@@ -123,7 +128,7 @@ function loadErrors() {
                          :sort-field="sortBy"
                          :sort-order="sortOrder"
                          :rowsPerPageOptions="possiblePageSizes">
-          <Column header="Error" field="typeAndError" sortable>
+          <Column header="Error" field="typeAndError" sortable  :class="{'flex': isFlex }">
             <template #body="slotProps">
               <div class="pl-3">
                 <div class="mb-2">
@@ -135,18 +140,18 @@ function loadErrors() {
               </div>
             </template>
           </Column>
-          <Column header="First Seen" field="created" sortable>
+          <Column header="First Seen" field="created" sortable :class="{'flex': isFlex }">
             <template #body="slotProps">
               <date-cell :value="slotProps.data.created" />
             </template>
           </Column>
-          <Column header="Last Seen" field="lastSeen" sortable>
+          <Column header="Last Seen" field="lastSeen" sortable :class="{'flex': isFlex }">
             <template #body="slotProps">
               <date-cell :value="slotProps.data.lastSeen" />
             </template>
           </Column>
-          <Column header="Times Seen" field="count" sortable></Column>
-          <Column header="Delete">
+          <Column header="Times Seen" field="count" sortable :class="{'flex': isFlex }"></Column>
+          <Column header="Delete" :class="{'flex': isFlex }">
             <template #body="slotProps">
               <SkillsButton :ref="`delete_${slotProps.data.error}`" @click="removeError(slotProps.data)" variant="outline-info" size="small"
                         :data-cy="`deleteErrorButton_${encodeURI(slotProps.data.error)}`"

diff --git a/dashboard-prime/src/components/userActions/UserActionsPage.vue b/dashboard-prime/src/components/userActions/UserActionsPage.vue
@@ -1,22 +1,22 @@
 <script setup>
 
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { useUserInfo } from '@/components/utils/UseUserInfo.js'
-import { FilterMatchMode } from 'primevue/api';
-import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js';
-import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue';
-import UserActionsService from '@/components/userActions/UserActionsService.js';
-import InputText from 'primevue/inputtext';
-import DateCell from '@/components/utils/table/DateCell.vue';
-import Column from 'primevue/column';
-import SingleUserAction from "@/components/userActions/SingleUserAction.vue";
-import StartRecordingUserActionsDateWarning from "@/components/userActions/StartRecordingUserActionsDateWarning.vue";
-import SkillsDataTable from '@/components/utils/table/SkillsDataTable.vue';
+import { FilterMatchMode } from 'primevue/api'
+import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
+import UserActionsService from '@/components/userActions/UserActionsService.js'
+import InputText from 'primevue/inputtext'
+import DateCell from '@/components/utils/table/DateCell.vue'
+import Column from 'primevue/column'
+import SingleUserAction from '@/components/userActions/SingleUserAction.vue'
+import StartRecordingUserActionsDateWarning from '@/components/userActions/StartRecordingUserActionsDateWarning.vue'
+import SkillsDataTable from '@/components/utils/table/SkillsDataTable.vue'
+import { useContentMaxWidthState } from '@/stores/UseContentMaxWidthState.js'
 
 const route = useRoute()
 const userInfo = useUserInfo()
-const responsive = useResponsiveBreakpoints()
+const contentMaxWidthState = useContentMaxWidthState()
 
 const filters = ref({
   user: '',
@@ -190,7 +190,8 @@ const tableFilters = ref({
 
     <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
       <template #content>
-        <SkillsDataTable
+        <div :style="contentMaxWidthState.main2ContentMaxWidthStyleObj">
+            <SkillsDataTable
             :tableStoredStateId="`${route.name}-eventsTable`"
             :value="items" tableStyle="min-width: 50rem"
             :loading="tableOptions.busy"
@@ -370,6 +371,7 @@ const tableFilters = ref({
                               :action-id="slotProps.data.id" :item="slotProps.data.item" :action="slotProps.data.action" />
           </template>
         </SkillsDataTable>
+        </div>
       </template>
     </Card>
   </div>

diff --git a/dashboard-prime/src/components/utils/Navigation.vue b/dashboard-prime/src/components/utils/Navigation.vue
@@ -1,19 +1,24 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStorage } from '@vueuse/core'
 import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 import { useColors } from '@/skills-display/components/utilities/UseColors.js'
+import { useContentMaxWidthState } from '@/stores/UseContentMaxWidthState.js'
 
 const router = useRouter();
 defineProps(['navItems']);
 const collapsed = useStorage('navigationCollapsed', false)
 const responsive = useResponsiveBreakpoints()
+const mainContentWidth = useContentMaxWidthState()
 const colors = useColors()
 const showCollapsed = computed(() => collapsed.value)
 
 function flipCollapsed() {
   collapsed.value = !collapsed.value;
+  nextTick(() => {
+    mainContentWidth.updateWidth()
+  })
 }
 
 const navOnSmallScreen = (changeEvent) => {
@@ -22,7 +27,7 @@ const navOnSmallScreen = (changeEvent) => {
 </script>
 
 <template>
-  <div class="mt-3" data-cy="nav">
+  <div class="mt-3" data-cy="nav" >
     <div class="sticky top-0 z-5 mb-3 md:hidden">
       <Dropdown
         :options="navItems"
@@ -45,7 +50,7 @@ const navOnSmallScreen = (changeEvent) => {
     </div>
 
     <div class="flex">
-      <div class="flex-none hidden md:flex" data-cy="nav-col">
+      <div id="skillsNavigation" class="flex-none hidden md:flex" data-cy="nav-col">
         <div class="border-1 border-300 border-round-md surface-border font-medium surface-0" style="min-height: calc(100vh - 20rem); !important">
             <div class="text-900 font-semibold flex">
               <div v-if="!showCollapsed" class="pt-3 px-3">Navigate</div>

diff --git a/dashboard-prime/src/stores/UseContentMaxWidthState.js b/dashboard-prime/src/stores/UseContentMaxWidthState.js
@@ -0,0 +1,39 @@
+import { ref, onMounted, onBeforeUnmount, nextTick, computed, reactive } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useContentMaxWidthState = defineStore('contentMaxWidthState', () => {
+  const main1ContentWidth = ref(0)
+  const navWidth = ref(0)
+
+  const updateWidth = () => {
+    main1ContentWidth.value = document.getElementById('mainContent1').clientWidth
+    const skillsNavigation = document.getElementById('skillsNavigation')
+    const forceReflow = skillsNavigation.offsetWidth
+    navWidth.value = forceReflow
+  }
+
+  onMounted(() => {
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateWidth)
+  })
+
+  const main2ContentMaxWidth = computed(() => main1ContentWidth.value - navWidth.value - 50)
+
+  const main2ContentMaxWidthStyleObj  = computed(() => {
+    return {
+      'max-width': `${main2ContentMaxWidth.value}px`
+    }
+  })
+
+  return {
+    updateWidth,
+    navWidth,
+    main1ContentWidth,
+    main2ContentMaxWidth,
+    main2ContentMaxWidthStyleObj
+  }
+})