Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dws4 merged 9 commits into from
Aug 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9a566ed
Starting filter button process with frontend component complete
dws4 Jul 23, 2025
0733edc
Finished Filter, but need to fix types columns bug and collision
dws4 Jul 24, 2025
8bbd2df
Filter Complete, going to reduce complex logic
dws4 Jul 25, 2025
4ecddd2
Full Filter Implementation before Test
dws4 Aug 5, 2025
76cea7f
Full Filter Implementation with Test, button moved, default 30
dws4 Aug 6, 2025
bd1b8fd
Fixing button Parse bug
dws4 Aug 13, 2025
e207a6c
Update microservices/services/dictionary/service/src/main/frontend/sr…
dws4 Aug 13, 2025
c69bf39
Fixing URL Search Query Bug
dws4 Aug 13, 2025
61e8349
Cleanup Code and Structure properly
dws4 Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions microservices/services/dictionary/service/src/main/frontend/src/functions/formatters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand All @@ -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);
}
Expand All @@ -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 (
Expand Down Expand Up @@ -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.
Expand Down
107 changes: 91 additions & 16 deletions microservices/services/dictionary/service/src/main/frontend/src/pages/DataDictionary.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
<q-input
borderless
dense
debounce="300"
v-model="changeFilter"
placeholder="Search"
@keydown.enter.prevent="queryTable"
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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.
Expand All @@ -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;
}

Expand Down