♻️ Provide composable with settings

RedHatProductSecurity · Sep 4, 2024 · 2e07344 · 2e07344
1 parent 8580da6
commit 2e07344
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 85 deletions.
diff --git a/src/components/FlawAffects/FlawAffectsTable.vue b/src/components/FlawAffects/FlawAffectsTable.vue
@@ -5,8 +5,7 @@ import { equals, clone, prop, ascend, sortWith } from 'ramda';
 import type { ZodAffectType } from '@/types';
 import { displayModes } from './';
 
-import { useSettingsStore } from '@/stores/SettingsStore';
-import { usePagination } from '@/composables/usePagination';
+import { usePaginationWithSettings } from '@/composables/usePaginationWithSettings';
 import FlawAffectsTableHead from './FlawAffectsTableHead.vue';
 
 import FlawAffectsTableRow from '@/components/FlawAffects/FlawAffectsTableRow.vue';
@@ -45,7 +44,6 @@ const impactFilter = ref<string[]>([]);
 
 // Edit Affects
 const affectValuesPriorEdit = ref<ZodAffectType[]>([]);
-const settings = ref(useSettingsStore().settings);
 
 // Sorting
 type sortKeys = keyof Pick<ZodAffectType,
@@ -75,28 +73,10 @@ const sortedAffects = computed(() => sortAffects(filteredAffects.value, false));
 const sortKey = ref<sortKeys>('ps_module');
 const sortOrder = ref(ascend);
 
-// Affects Pagination
-const totalPages = computed(() =>
-  Math.ceil(sortedAffects.value.length / settings.value.affectsPerPage)
-);
-
-// const minItemsPerPage = 5;
-// const maxItemsPerPage = 20;
 const {
-  // pages,
-  currentPage,
-  // changePage,
-} = usePagination(totalPages, settings.value.affectsPerPage);
-
-const paginatedAffects = computed(() => {
-  const start = (currentPage.value - 1) * settings.value.affectsPerPage;
-  const end = start + settings.value.affectsPerPage;
-  return sortedAffects.value.slice(start, end);
-});
-
-function isBeingEdited(affect: ZodAffectType) {
-  return affectsEdited.value.includes(affect);
-}
+  totalPages,
+  paginatedItems: paginatedAffects,
+} = usePaginationWithSettings(sortedAffects, { setting: 'affectsPerPage' });
 
 function getAffectPriorEdit(affect: ZodAffectType): ZodAffectType {
   return affectValuesPriorEdit.value.find(a => a.uuid === affect.uuid) || affect;
@@ -158,6 +138,10 @@ function isModified(affect: ZodAffectType) {
 function isNewAffect(affect: ZodAffectType) {
   return newAffects.value.includes(affect);
 }
+
+function isBeingEdited(affect: ZodAffectType) {
+  return affectsEdited.value.includes(affect);
+}
 </script>
 
 <template>

diff --git a/src/components/FlawAffects/FlawAffectsTableHead.vue b/src/components/FlawAffects/FlawAffectsTableHead.vue
@@ -9,7 +9,8 @@ import {
   // possibleAffectResolutions,
   type ZodAffectType,
 } from '@/types/zodAffect';
-import { displayModes } from './';
+
+import { type affectSortKeys, displayModes } from './';
 
 import { useSettingsStore } from '@/stores/SettingsStore';
 import { usePagination } from '@/composables/usePagination';
@@ -36,11 +37,6 @@ const affectednessFilter = ref<string[]>([]);
 const resolutionFilter = ref<string[]>([]);
 const impactFilter = ref<string[]>([]);
 
-// Sorting
-type sortKeys = keyof Pick<ZodAffectType,
-  'ps_module' | 'ps_component' | 'trackers' | 'affectedness' | 'resolution' | 'impact' | 'cvss_scores'
->;
-
 const filteredAffects = computed(() => {
   if (affects.value.length <= 0) {
     emit('affects:display-mode', displayModes.ALL);
@@ -62,7 +58,7 @@ const sortedAffects = computed(() =>
   sortAffects(filteredAffects.value, false)
 );
 
-const sortKey = ref<sortKeys>('ps_module');
+const sortKey = ref<affectSortKeys>('ps_module');
 const sortOrder = ref(ascend);
 // // Affects Pagination
 const totalPages = computed(() =>
@@ -83,28 +79,12 @@ const paginatedAffects = computed(() => {
   return sortedAffects.value.slice(start, end);
 });
 
-// // function reduceItemsPerPage() {
-// //   if (settings.value.affectsPerPage > minItemsPerPage) {
-// //     settings.value.affectsPerPage --;
-// //   }
-// // }
-
-// // function increaseItemsPerPage() {
-// //   if (settings.value.affectsPerPage < maxItemsPerPage) {
-// //     settings.value.affectsPerPage ++;
-// //   }
-// // }
-
-// const selectedModules = ref<string[]>([]);
-
-
-
-function toggleFilter(filterArray: Ref<string[]>, item: string) {
-  const index = filterArray.value.indexOf(item);
+function toggleFilter(filterArray: Ref<string[]>, sortValue: string) {
+  const index = filterArray.value.indexOf(sortValue);
   if (index > -1) {
     filterArray.value.splice(index, 1);
   } else {
-    filterArray.value.push(item);
+    filterArray.value.push(sortValue);
   }
 }
 
@@ -177,7 +157,7 @@ function selectAffects(event: Event) {
   }
 }
 
-function setSort(key: sortKeys) {
+function setSort(key: affectSortKeys) {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value === ascend ? descend : ascend;
   } else {

diff --git a/src/components/FlawAffects/index.ts b/src/components/FlawAffects/index.ts
@@ -9,6 +9,6 @@ export enum displayModes {
   CREATED = 'Created',
 }
 
-export type sortKeys = keyof Pick<ZodAffectType,
+export type affectSortKeys = keyof Pick<ZodAffectType,
   'ps_module' | 'ps_component' | 'trackers' | 'affectedness' | 'resolution' | 'impact' | 'cvss_scores'
 >;
diff --git a/src/components/FlawTrackers.vue b/src/components/FlawTrackers.vue
@@ -6,7 +6,7 @@ import type { ZodFlawType } from '@/types/zodFlaw';
 import { ascend, descend, sortWith } from 'ramda';
 import TrackerManager from '@/components/TrackerManager.vue';
 import { useSettingsStore } from '@/stores/SettingsStore';
-import { usePagination } from '@/composables/usePagination';
+import { usePaginationWithSettings } from '@/composables/usePaginationWithSettings';
 
 type TrackerWithModule = ZodTrackerType & { ps_module: string };
 
@@ -31,9 +31,7 @@ const showTrackerManager = ref(false);
 const hasTrackers = computed(() => props.allTrackersCount > 0);
 
 // Sorting
-const sortedTrackers = computed(() =>
-  sortTrackers(filteredTrackers.value)
-);
+const sortedTrackers = computed(() => sortTrackers(filteredTrackers.value));
 
 type sortKeys = keyof Pick<ZodTrackerType,
   'created_dt' | 'updated_dt'
@@ -93,36 +91,17 @@ function toggleStatusFilter(status: string) {
   toggleFilter(statusFilter, status);
 }
 
-// Trackers pagination
-const totalPages = computed(() =>
-  Math.ceil(sortedTrackers.value.length / settings.value.trackersPerPage)
-);
-
-const minItemsPerPage = 5;
-const maxItemsPerPage = 20;
 const {
-  pages,
-  currentPage,
   changePage,
-} = usePagination(totalPages, settings.value.trackersPerPage);
-
-const paginatedTrackers = computed(() => {
-  const start = (currentPage.value - 1) * settings.value.trackersPerPage;
-  const end = start + settings.value.trackersPerPage;
-  return sortedTrackers.value.slice(start, end);
-});
-
-function reduceItemsPerPage() {
-  if (settings.value.trackersPerPage > minItemsPerPage) {
-    settings.value.trackersPerPage--;
-  }
-}
-
-function increaseItemsPerPage() {
-  if (settings.value.trackersPerPage < maxItemsPerPage) {
-    settings.value.trackersPerPage++;
-  }
-}
+  decreaseItemsPerPage,
+  increaseItemsPerPage,
+  currentPage,
+  totalPages,
+  pages,
+  paginatedItems: paginatedTrackers,
+  maxItemsPerPage,
+  minItemsPerPage,
+} = usePaginationWithSettings(sortedTrackers, { setting: 'trackersPerPage' });
 </script>
 
 <template>
@@ -171,7 +150,7 @@ function increaseItemsPerPage() {
                   : 'opacity: 50%; pointer-events: none;'"
                 class="bi bi-dash-square fs-6 my-auto"
                 title="Reduce trackers per page"
-                @click="reduceItemsPerPage()"
+                @click="decreaseItemsPerPage()"
               />
               <span class="mx-2 my-auto">{{ `Per page: ${settings.trackersPerPage}` }}</span>
               <i

diff --git a/src/composables/usePaginationWithSettings.ts b/src/composables/usePaginationWithSettings.ts
@@ -0,0 +1,62 @@
+import { useSettingsStore, type SettingsType } from '@/stores/SettingsStore';
+import { type Ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { usePagination } from './usePagination';
+
+type PaginationSetting = keyof Pick<SettingsType, 'affectsPerPage' | 'trackersPerPage'>;
+type PaginationOptions = {
+  maxPagesToShow?: number;
+  minItemsPerPage?: number;
+  maxItemsPerPage?: number;
+  setting: PaginationSetting;
+};
+
+export function usePaginationWithSettings(itemsToPaginate: Ref<any[]>, options: PaginationOptions) {
+  const { settings } = storeToRefs(useSettingsStore());
+  const {
+    setting,
+    maxPagesToShow = 7,
+    minItemsPerPage = 5,
+    maxItemsPerPage = 20,
+  } = options;
+
+  function decreaseItemsPerPage() {
+    if (settings.value[setting] > minItemsPerPage) {
+      settings.value[setting]--;
+    }
+  }
+
+  function increaseItemsPerPage() {
+    if (settings.value[setting] < maxItemsPerPage) {
+      settings.value[setting]++;
+    }
+  }
+
+  const totalPages = computed(() =>
+    Math.ceil(itemsToPaginate.value.length / settings.value[setting])
+  );
+
+  const {
+    pages,
+    currentPage,
+    changePage
+  } = usePagination(totalPages, maxPagesToShow);
+
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * settings.value[setting];
+    const end = start + settings.value[setting];
+    return itemsToPaginate.value.slice(start, end);
+  });
+
+  return {
+    changePage,
+    decreaseItemsPerPage,
+    increaseItemsPerPage,
+    currentPage,
+    minItemsPerPage,
+    maxItemsPerPage,
+    pages,
+    paginatedItems,
+    totalPages,
+  };
+}