Filter Button to Retrieve Prior 'X' Amount of Days (#3087)

This PR does the following:
1. Creates a filter icon near the search bar
2. Can filter 'X' days prior based on a full search _(by the search
bar)_ by input and 'apply' button.
3. Can reset and show all rows by clicking the 'show all rows' button by
showing all rows.
4. On loading, it will default to only 30 days prior.
5. _NEW 8/13/25:_ Fixed the Button Parse Bug (duplicate buttons
appearing on same sections of data).

_Note: ~~Right now this has not been integration tested~~. ~~Probably
needs a rebase as well.~~_

---------

Co-authored-by: foster33 <[email protected]>

Author: dws4

microservices/services/dictionary/service/src/main/frontend/src/functions/formatters.ts

@@ -80,8 +80,8 @@ export function maxSubstring(str: any, colName: any): any {
 }
 
 // Defines how the expandability is parsed on the table.
-export function buttonParse(col: any, row: any): boolean {
-  return row.button == 1;
+export function buttonParse(row: any): boolean {
+  return row.button && row.priorDays;
 }
 
 // Toggles how the row collapses based on the DOM. Filters visible rows.
@@ -90,7 +90,7 @@ export function toggleVisibility(row: any) {
 }
 
 // Set the Visibility in DOM, sorts and filters by lastUpdated, and the respective row to render button.
-export function setVisibility(rows: readonly any[]) {
+export function setVisibility(rows: readonly any[], priorDays?: any) {
   const fieldVisibility: Map<string, Ref<boolean>> = new Map<
     string,
     Ref<boolean>
@@ -103,7 +103,10 @@ export function setVisibility(rows: readonly any[]) {
     const currentRowInternalFieldName: any = row.internalFieldName;
     const currentRowDataType: any = row.dataType;
 
-    if (currentRowDataType) {
+    const meetsDateFilter = priorDays === undefined || row.lastUpdated >= getDateCode(priorDays);
+    row['priorDays'] = meetsDateFilter;
+
+    if (currentRowDataType && meetsDateFilter) {
       let currentValue = countValues.get(currentRowInternalFieldName) || 0;
       countValues.set(currentRowInternalFieldName, ++currentValue);
     }
@@ -120,13 +123,14 @@ export function setVisibility(rows: readonly any[]) {
   for (const row of rows) {
     // Checks to Render button
     if (
-      buttonValues.has(row.internalFieldName) &&
-      row.lastUpdated == buttonValues.get(row.internalFieldName)
+      (buttonValues.has(row.internalFieldName) &&
+      row.lastUpdated == buttonValues.get(row.internalFieldName)) && (countValues.get(row.internalFieldName)! > 1)
     ) {
       row['duplicate'] = 1;
       row['button'] = true;
-
       row['dataTypeCount'] = countValues.get(row.internalFieldName) + ' types';
+
+      buttonValues.set(row.internalFieldName, -1); // This ensures only one button per internalFieldName (no duplicate buttons)
     }
     // Checks to Render Collapsible Row - Refreshes on Search
     else if (
@@ -164,7 +168,20 @@ export function setVisibility(rows: readonly any[]) {
 
 // Lets the DOM know what is visible and what is not based on setVisibility filters.
 export function isVisible(row: any) {
-  return row.duplicate == 0 || row.isVisible.value;
+ return (row.duplicate == 0 || row.isVisible.value) && row.priorDays;
+}
+
+export function getDateCode(daysPrior = Infinity): number {
+  if (!isFinite(daysPrior)) {
+    return 0; // return earliest possible dateCode (match all)
+  }
+
+  const date = new Date();
+  date.setDate(date.getDate() - daysPrior);
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return Number(`${y}${m}${d}000000`);
 }
 
 // Filters the URL Search Bar to handle Edge Cases and only queries 1 item.

microservices/services/dictionary/service/src/main/frontend/src/pages/DataDictionary.vue

@@ -72,7 +72,6 @@
           <q-input
             borderless
             dense
-            debounce="300"
             v-model="changeFilter"
             placeholder="Search"
             @keydown.enter.prevent="queryTable"
@@ -83,28 +82,101 @@
                 size="12px"
                 color="cyan-8"
                 icon="search"
-                round
                 dense
                 @click="queryTable"
               />
         </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th />
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <div class="tooltip-wrapper">
-                {{ col.label }}
-                <q-tooltip class="tooltip-text" anchor="bottom middle" self="top middle" :offset="[0, 5]">
-                  {{ Feature.toolTipGen(col.name) }}
-                </q-tooltip>
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+            >
+              <div class="tooltip-wrapper row items-center no-wrap">
+                <span class="q-mr-xs">
+                  <span class="cursor-pointer">
+                    {{ col.label }}
+                    <q-tooltip
+                      class="tooltip-text"
+                      anchor="bottom middle"
+                      self="top middle"
+                      :offset="[0, 5]"
+                    >
+                      {{ Feature.toolTipGen(col.name) }}
+                    </q-tooltip>
+                  </span>
+                </span>
+                <template v-if="col.name === 'lastUpdated'">
+                  <q-btn
+                    size="7px"
+                    color="cyan-8"
+                    icon="bi-funnel-fill"
+                    style="padding: 2.5px; margin-bottom: 1.5px;"
+                    dense
+                    ref="buttonRef"
+                  >
+                    <q-menu
+                      anchor="bottom right"
+                      self="top right"
+                      :offset="[0, 5]"
+                    >
+                      <q-card
+                        style="max-width: 205px; padding: 5px; box-shadow: 0 0 12px rgba(0, 188, 212, 0.6);"
+                        class="q-pa-sm"
+                      >
+                        <q-card-section class="text-center text-subtitle1" style="font-weight: 550;">
+                          FILTER DAYS
+                        </q-card-section>
+                        <q-separator />
+                        <q-card-section class="q-gutter-sm">
+                          <div class="row items-center q-col-gutter-sm">
+                            <q-input
+                              dense
+                              color="cyan-8"
+                              v-model="search"
+                              placeholder="30"
+                              @keyup.enter="queryTable(search)"
+                              style="width: 50px; margin-left: 15px;"
+                              input-class="text-center"
+                            />
+                            <q-item-label style="font-weight: 450;"> DAY(S) PRIOR</q-item-label>
+                          </div>
+                        </q-card-section>
+                        <q-separator />
+                        <q-card-section class="q-pt-none">
+                          <div class="row items-center q-gutter-sm" style="margin-top: 15px;">
+                            <q-btn
+                              dense
+                              style="padding: 5px;"
+                              size="12px"
+                              label="Apply"
+                              color="cyan-8"
+                              @click="queryTable(search)"
+                            />
+                            <q-btn
+                              dense
+                              style="padding: 5px;"
+                              size="12px"
+                              label="Clear Filter"
+                              color="cyan-8"
+                              @click="queryTable()"
+                            />
+                          </div>
+                        </q-card-section>
+                      </q-card>
+                    </q-menu>
+                  </q-btn>
+                </template>
               </div>
             </q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
           <q-tr
             :props="props"
-            v-if="Formatters.buttonParse(props.cols, props.row)"
+            v-if="Formatters.buttonParse(props.row)"
           >
             <q-td class="cell-spacing">
               <q-btn
@@ -206,6 +278,7 @@ const router = useRouter();
 const changeFilter = ref<string>('');
 const banner = ref<Banner>();
 const system = ref<System>();
+const search = ref('');
 let rows: QTableProps['rows'] = [];
 const paginationFront = ref({
   rowsPerPage: 200,
@@ -261,7 +334,10 @@ onMounted(() => {
         return b.lastUpdated - a.lastUpdated;
       }
     });
-    rows = Formatters.setVisibility(rows);
+    rows = changeFilter.value
+      ? Formatters.setVisibility(rows) // if searched through URL bar, it removes 30 day filter.
+      : Formatters.setVisibility(rows, 30); // default at 30 days when loaded without '?search=<val>' query.
+
     loading.value = false;
   })
   .catch((reason) => {
@@ -333,8 +409,7 @@ function exportTable(this: any) {
 }
 
 // Query - Runs through a Search Process as it waits for the user.
-async function queryTable(this: any) {
-  // Wait Until User Enters...
+async function queryTable(priorDays?: any) {
   await waitUp();
 
   // Handles the URL change to reflect when the user searches.
@@ -353,14 +428,14 @@ async function queryTable(this: any) {
   const originalRows = rows;
   const triggerRefresh = paginationFront.value.rowsPerPage;
 
-  // 3 - Set the Current Rows to Filtered Value
-  rows = Formatters.setVisibility(rowsToExport);
+  // 3 - Set filtered rows with visibility flags updated
+  rows = Formatters.setVisibility(rowsToExport, priorDays);
 
-  // 4 - Trigger the Refresh
+  // 4 - Refresh pagination to trigger table update
   paginationFront.value.rowsPerPage = 100;
   paginationFront.value.rowsPerPage = triggerRefresh;
 
-  // 5 - Restore Original Rows for Next Query
+  // 5 - Restore original rows for next queries
   rows = originalRows;
 }