Merge pull request #3598 from NationalSecurityAgency/t#3526/store-page-state

Refs/heads/t#3526/store page state

Author: sudo-may

dashboard/src/components/access/RoleManager.vue

@@ -31,6 +31,7 @@ import { useUpgradeInProgressErrorChecker } from '@/components/utils/errors/UseU
 import QuizService from '@/components/quiz/QuizService.js';
 import RemovalValidation from '@/components/utils/modal/RemovalValidation.vue';
 import { SkillsReporter } from '@skilltree/skills-client-js'
+import {useStorage} from "@vueuse/core";
 
 const dialogMessages = useDialogMessages()
 // role constants
@@ -106,7 +107,7 @@ onMounted(() => {
 
 const sortInfo = ref({ sortOrder: 1, sortBy: 'userId' })
 const possiblePageSizes = [ 5, 10, 15, 20]
-const pageSize = ref(5)
+const pageSize = useStorage('roleManager-pageSize', 5)
 const isLoading = ref(true)
 
 const expandedRows = ref([])

dashboard/src/components/access/groups/AdminGroupDefinitions.vue

@@ -32,6 +32,7 @@ import { useAdminGroupState } from '@/stores/UseAdminGroupState.js';
 import { useCommunityLabels } from '@/components/utils/UseCommunityLabels.js';
 import Avatar from 'primevue/avatar';
 import TableNoRes from "@/components/utils/table/TableNoRes.vue";
+import {useStorage} from "@vueuse/core";
 
 const announcer = useSkillsAnnouncer()
 const responsive = useResponsiveBreakpoints()
@@ -73,10 +74,10 @@ const options = ref({
     server: false,
     currentPage: 1,
     totalRows: 0,
-    pageSize: 5,
     possiblePageSizes: [5, 10, 15, 20],
   },
 });
+const pageSize = useStorage('adminGroupDefinitions-tablePageSize', 5)
 const deleteAdminGroupInfo = ref( {
   showDialog: false,
   adminGroupDef: {},
@@ -186,7 +187,7 @@ defineExpose({
         @filter="onFilter"
         v-model:sort-field="sortInfo.sortBy"
         v-model:sort-order="sortInfo.sortOrder"
-        paginator :rows="5" :rowsPerPageOptions="[5, 10, 15, 20]"
+        paginator :rows="pageSize" :rowsPerPageOptions="[5, 10, 15, 20]"
         show-gridlines
         striped-rows>
         <template #header>

dashboard/src/components/access/invite-only/InviteStatuses.vue

@@ -26,6 +26,7 @@ import { useColors } from '@/skills-display/components/utilities/UseColors.js'
 import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
 import { useDialogMessages } from '@/components/utils/modal/UseDialogMessages.js'
 import RemovalValidation from '@/components/utils/modal/RemovalValidation.vue'
+import {useStorage} from "@vueuse/core";
 
 const route = useRoute()
 const responsive = useResponsiveBreakpoints()
@@ -38,7 +39,7 @@ const recipientFilter = ref('')
 const data = ref([])
 const loadingData = ref(true)
 const busy = ref(false)
-const pageSize = ref(5)
+const pageSize = useStorage('inviteStatuses-pageSize', 5)
 const possiblePageSizes = [5, 10, 15, 20]
 const sortInfo = ref({ sortOrder: -1, sortBy: 'expires' })
 const totalRows = ref(0)

dashboard/src/components/access/invite-only/RevokeUserAccess.vue

@@ -29,6 +29,7 @@ import { useDialogMessages } from '@/components/utils/modal/UseDialogMessages.js
 import SkillsDataTable from '@/components/utils/table/SkillsDataTable.vue'
 import { FilterMatchMode } from '@primevue/core/api'
 import HighlightedValue from '@/components/utils/table/HighlightedValue.vue'
+import {useStorage} from "@vueuse/core";
 
 const route = useRoute()
 const responsive = useResponsiveBreakpoints()
@@ -52,7 +53,7 @@ const reset = () => {
 const tableIsBusy = ref(false)
 const data = ref([])
 const loadingData = ref(true)
-const pageSize = ref(5)
+const pageSize = useStorage('revokeUserAccess-pageSize', 5)
 const possiblePageSizes = [5, 10, 15, 20]
 const sortInfo = ref({ sortOrder: -1, sortBy: 'userId' })
 const totalRows = ref(0)

dashboard/src/components/expiration/ExpirationHistory.vue

@@ -27,6 +27,7 @@ import Column from 'primevue/column'
 import DateCell from '@/components/utils/table/DateCell.vue'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import TableNoRes from "@/components/utils/table/TableNoRes.vue";
+import {useStorage} from "@vueuse/core";
 
 const route = useRoute()
 const userInfo = useUserInfo()
@@ -71,11 +72,11 @@ const tableOptions = ref({
     server: true,
     currentPage: 1,
     totalRows: 1,
-    pageSize: 10,
     possiblePageSizes: [10, 25, 50],
   },
   items: [],
 })
+const pageSize = useStorage('expirationHistory-tablePageSize', 10)
 
 onMounted(() => {
   loadData();
@@ -84,7 +85,7 @@ onMounted(() => {
 const loadData = () => {
   tableOptions.value.busy = true
   const params = {
-    limit: tableOptions.value.pagination.pageSize,
+    limit: pageSize.value,
     page: tableOptions.value.pagination.currentPage,
     orderBy: sortInfo.value.sortBy,
     ascending: sortInfo.value.sortOrder === 1,
@@ -107,7 +108,7 @@ const onFilter = (filterEvent) => {
   loadData().then(() => filtering.value = true)
 }
 const pageChanged = (pagingInfo) => {
-  tableOptions.value.pagination.pageSize = pagingInfo.rows
+  pageSize.value = pagingInfo.rows
   tableOptions.value.pagination.currentPage = pagingInfo.page + 1
   loadData()
 }
@@ -156,7 +157,7 @@ const calculateClientDisplayRoute = (props) => {
           @filter="onFilter"
           @page="pageChanged"
           @sort="sortField"
-          :rows="tableOptions.pagination.pageSize"
+          :rows="pageSize"
           :rowsPerPageOptions="tableOptions.pagination.possiblePageSizes"
           :total-records="tableOptions.pagination.totalRows"
           v-model:sort-field="sortInfo.sortBy"

dashboard/src/components/metrics/common/UserTagTable.vue

@@ -23,6 +23,7 @@ import TableNoRes from "@/components/utils/table/TableNoRes.vue";
 import SkillsCalendarInput from "@/components/utils/inputForm/SkillsCalendarInput.vue";
 import {useTimeUtils} from "@/common-components/utilities/UseTimeUtils.js";
 import {useSkillsAnnouncer} from "@/common-components/utilities/UseSkillsAnnouncer.js";
+import {useStorage} from "@vueuse/core";
 
 const props = defineProps({
   tagChart: Object
@@ -51,12 +52,12 @@ const table = ref({
       server: true,
       currentPage: 1,
       totalRows: 1,
-      pageSize: 10,
       removePerPage: true,
     },
     tableDescription: `${props.tagChart.title} Users`,
   },
 });
+const pageSize = useStorage('userTagTable-tablePageSize', 10)
 
 const projectId = computed(() => {
   return route.params.projectId;
@@ -67,7 +68,7 @@ const tagKey = computed(() => {
 });
 
 const pageChanged = (pagingInfo) => {
-  table.value.options.pagination.pageSize = pagingInfo.rows
+  pageSize.value = pagingInfo.rows
   table.value.options.pagination.currentPage = pagingInfo.page + 1
   loadData()
 }
@@ -96,7 +97,7 @@ const loadData = (shouldHighlight = false) => {
   const params = {
     tagKey: props.tagChart.key,
     currentPage: table.value.options.pagination.currentPage,
-    pageSize: table.value.options.pagination.pageSize,
+    pageSize: pageSize.value,
     sortDesc: table.value.options.sortOrder === -1,
     tagFilter: filters.value.tag,
     sortBy: table.value.options.sortBy === 'count' ? 'numUsers' : 'tag',
@@ -154,7 +155,7 @@ const filterRange = ref([]);
                          @sort="sortTable"
                          v-model:sort-field="table.options.sortBy"
                          v-model:sort-order="table.options.sortOrder"
-                         :rows="table.options.pagination.pageSize"
+                         :rows="pageSize"
                          :rowsPerPageOptions="table.options.pagination.possiblePageSizes"
                          :total-records="table.options.pagination.totalRows"
                          tableStoredStateId="userTagsTable"

dashboard/src/components/metrics/projectAchievements/AchievementsNavigator.vue

@@ -29,6 +29,7 @@ import Column from 'primevue/column'
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue';
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import TableNoRes from "@/components/utils/table/TableNoRes.vue";
+import {useStorage} from "@vueuse/core";
 
 const route = useRoute();
 const numberFormat = useNumberFormat()
@@ -59,7 +60,7 @@ const sortBy = ref('achievedOn');
 const sortOrder = ref(-1);
 const currentPage = ref(1);
 const totalRows = ref(0);
-const pageSize = ref(5);
+const pageSize = useStorage('achievementsNavigator-pageSize', 5)
 const possiblePageSizes = [5, 10, 15, 20, 50];
 const loadingTable = ref(false);
 const isExporting = ref(false)

dashboard/src/components/metrics/projectSkills/SkillsUsageMetrics.vue

@@ -25,6 +25,7 @@ import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveB
 import Column from 'primevue/column'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import TableNoRes from "@/components/utils/table/TableNoRes.vue";
+import {useStorage} from "@vueuse/core";
 
 const route = useRoute();
 const numberFormat = useNumberFormat()
@@ -48,7 +49,7 @@ const filters = ref({
 const loading = ref(false);
 const isExporting = ref(false)
 
-const pageSize = 5;
+const pageSize = useStorage('skillUsageMetrics-pageSize', 5)
 const possiblePageSizes = [5, 10, 15, 20, 50];
 
 const tableOptions = ref({

dashboard/src/components/metrics/skill/PostAchievementUsersTable.vue

@@ -25,6 +25,7 @@ import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
 import SkillsDisplayPathAppendValues from "@/router/SkillsDisplayPathAppendValues.js";
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
+import {useStorage} from "@vueuse/core";
 
 defineProps(['skillName']);
 const route = useRoute();
@@ -49,7 +50,7 @@ const loading = ref(true);
 const hasData = ref(false);
 const currentPage = ref(1);
 const totalRows = ref(0);
-const pageSize = ref(5);
+const pageSize = useStorage('postAchievementUsersTable-pageSize', 5)
 const sortField = ref('userId');
 const sortOrder = ref(-1);
 const possiblePageSizes = [5, 10, 15, 20, 50];

dashboard/src/components/myProgress/discover/DiscoverProjectsPage.vue

@@ -32,6 +32,7 @@ import MyProgressTitle from "@/components/myProgress/MyProgressTitle.vue";
 import BackToMyProgressBtn from "@/components/myProgress/BackToMyProgressBtn.vue";
 import ContactProjectAdminsDialog from "@/components/contact/ContactProjectAdminsDialog.vue";
 import {useNumberFormat} from "@/common-components/filter/UseNumberFormat.js";
+import {useStorage} from "@vueuse/core";
 
 const responsive = useResponsiveBreakpoints()
 const announcer = useSkillsAnnouncer()
@@ -45,7 +46,7 @@ const searchValue = ref('')
 const originalProjects = ref([])
 const projects = ref([])
 const totalRows = ref(0)
-const pageSize = ref(5)
+const pageSize = useStorage('discoverProjects-pageSize', 5)
 const possiblePageSizes = [5, 10, 15, 25, 50]
 const filters = ref({
   global: {value: null, matchMode: FilterMatchMode.CONTAINS}