Skip to content
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

✨ Make per page number an input field #532

Merged
merged 4 commits into from
Feb 6, 2025
Merged

✨ Make per page number an input field #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
432666c
✨ Items per page editable input field
C-Valen Jan 27, 2025
1afb9ab
✨ Wider per page limits
C-Valen Jan 29, 2025
b06d113
✅ Update tests
C-Valen Jan 29, 2025
e51102b
📝 OSIDB-3507 update
C-Valen Jan 30, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* Show Flaw Labels on Flaw List Component (`OSIDB-3805`)
* Support PURLs in affected components (`OSIDB-3412`)
* Increase step value for affects and trackers per page (`OSIDB-3508`)
* Support custom number of items per page in affects and trackers tables (`OSIDB-3507`)
* Support showing all trackers/affects in single page (`OSIDB-3506`)


Expand Down
14 changes: 12 additions & 2 deletions src/components/FlawAffects/FlawAffects.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ const {
changePage,
currentPage,
decreaseItemsPerPage,
handlePerPageInput,
increaseItemsPerPage,
maxItemsPerPage,
minItemsPerPage,
Expand Down Expand Up @@ -348,7 +349,13 @@ const displayedTrackers = computed(() => {
title="Reduce affects per page"
@click="decreaseItemsPerPage()"
/>
<span class="mx-2 my-auto">{{ `Per page: ${settings.affectsPerPage}` }}</span>
<span class="mx-2 my-auto">Per page:</span>
<input
type="text"
class="form-control mx-2"
:value="settings.affectsPerPage"
@input="handlePerPageInput($event)"
/>
<i
:style="settings.affectsPerPage < maxItemsPerPage
? 'pointer-events: auto;'
Expand Down Expand Up @@ -624,7 +631,10 @@ const displayedTrackers = computed(() => {
.per-page-btn {
display: flex;
padding-block: 0;
pointer-events: none;

input {
width: 3rem;
}
}

> div {
Expand Down
12 changes: 6 additions & 6 deletions src/components/FlawAffects/__tests__/FlawAffects.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,25 +136,25 @@ describe('flawAffects', () => {
let affectsTableRows = subject.findAll('.affects-management table tbody tr');
let rowCount = affectsTableRows.length;
expect(rowCount).toBe(6);
let itemsPerPageIndicator = subject.find('.affects-toolbar .badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 10');
let itemsPerPageIndicator = subject.find('.affects-toolbar .badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('10');

const reduceItemsBtn = subject.find('.affects-toolbar .badges .btn .bi-dash-square');
await reduceItemsBtn.trigger('click');

affectsTableRows = subject.findAll('.affects-management table tbody tr');
rowCount = affectsTableRows.length;
expect(rowCount).toBe(5);
itemsPerPageIndicator = subject.find('.affects-toolbar .badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 5');
itemsPerPageIndicator = subject.find('.affects-toolbar .badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('5');

const increaseItemsBtn = subject.find('.affects-toolbar .badges .btn .bi-plus-square');
await increaseItemsBtn.trigger('click');

affectsTableRows = subject.findAll('.affects-management table tbody tr');
rowCount = affectsTableRows.length;
expect(rowCount).toBe(6); itemsPerPageIndicator = subject.find('.affects-toolbar .badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 10');
expect(rowCount).toBe(6); itemsPerPageIndicator = subject.find('.affects-toolbar .badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('10');
});

osimFullFlawTest('Show all button works properly', async () => {
Expand Down
12 changes: 6 additions & 6 deletions src/components/FlawAffects/__tests__/__snapshots__/FlawAffects.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-2d3c4208="" class="pagination-controls gap-1 my-2"><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-end-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-left fs-5"></i></button><button data-v-2d3c4208="" tabindex="-1" class="osim-page-btn btn btn-sm rounded-0 btn-secondary" style="width: 34.8px;" disabled="">1</button><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-start-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-2d3c4208="" class="affects-toolbar">
<div data-v-2d3c4208="" class="badges my-auto gap-1 me-3">
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page: 10</span><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page:</span><input data-v-2d3c4208="" type="text" class="form-control mx-2" value="10"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="badge-btn btn btn-sm border-secondary bg-light-gray text-black" style="cursor: pointer;" title="Display all affects"><span data-v-2d3c4208="">Show all affects (6)</span></div>
<!--v-if-->
<!--v-if-->
Expand Down Expand Up @@ -233,7 +233,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-89a61d08="" class="pagination-controls gap-1 ms-2"><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-end-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-left fs-5"></i></button><button data-v-89a61d08="" class="osim-page-btn btn btn-sm rounded-0 btn-info" disabled="">1</button><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-start-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-89a61d08="" class="trackers-toolbar p-2 pt-1">
<div data-v-89a61d08="" class="tracker-badges">
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page: 10</span><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page:</span><input data-v-89a61d08="" type="text" class="form-control mx-2" value="10"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="badge bg-light-cyan" style="cursor: pointer;"><span data-v-89a61d08="">Show All Trackers (6)</span></div>
</div><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info ms-auto"><i data-v-89a61d08="" class="bi bi-binoculars"></i> Show Trackers Manager </button>
</div>
Expand Down Expand Up @@ -484,7 +484,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-2d3c4208="" class="pagination-controls gap-1 my-2"><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-end-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-left fs-5"></i></button><button data-v-2d3c4208="" tabindex="-1" class="osim-page-btn btn btn-sm rounded-0 btn-secondary" style="width: 34.8px;" disabled="">1</button><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-start-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-2d3c4208="" class="affects-toolbar">
<div data-v-2d3c4208="" class="badges my-auto gap-1 me-3">
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page: 10</span><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page:</span><input data-v-2d3c4208="" type="text" class="form-control mx-2" value="10"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="badge-btn btn btn-sm border-secondary bg-light-gray text-black" style="cursor: pointer;" title="Display all affects"><span data-v-2d3c4208="">Show all affects (6)</span></div>
<div data-v-2d3c4208="" class="badge-btn btn btn-sm border-secondary bg-light-gray text-black" title="Display selected affects"><i data-v-2d3c4208="" class="bi bi-check-square me-1 h-fit"></i><span data-v-2d3c4208="">Selected 3</span></div>
<!--v-if-->
Expand Down Expand Up @@ -690,7 +690,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-89a61d08="" class="pagination-controls gap-1 ms-2"><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-end-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-left fs-5"></i></button><button data-v-89a61d08="" class="osim-page-btn btn btn-sm rounded-0 btn-info" disabled="">1</button><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-start-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-89a61d08="" class="trackers-toolbar p-2 pt-1">
<div data-v-89a61d08="" class="tracker-badges">
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page: 10</span><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page:</span><input data-v-89a61d08="" type="text" class="form-control mx-2" value="10"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="badge bg-light-cyan" style="cursor: pointer;"><span data-v-89a61d08="">Show All Trackers (6)</span></div>
</div><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info ms-auto"><i data-v-89a61d08="" class="bi bi-binoculars"></i> Show Trackers Manager </button>
</div>
Expand Down Expand Up @@ -894,7 +894,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-2d3c4208="" class="pagination-controls gap-1 my-2"><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-end-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-left fs-5"></i></button><button data-v-2d3c4208="" tabindex="-1" class="osim-page-btn btn btn-sm rounded-0 btn-secondary" style="width: 34.8px;" disabled="">1</button><button data-v-2d3c4208="" type="button" tabindex="-1" class="btn btn-sm btn-secondary rounded-start-0" disabled=""><i data-v-2d3c4208="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-2d3c4208="" class="affects-toolbar">
<div data-v-2d3c4208="" class="badges my-auto gap-1 me-3">
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page: 10</span><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="per-page-btn btn btn-sm btn-secondary"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce affects per page"></i><span data-v-2d3c4208="" class="mx-2 my-auto">Per page:</span><input data-v-2d3c4208="" type="text" class="form-control mx-2" value="10"><i data-v-2d3c4208="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase affects per page"></i></div>
<div data-v-2d3c4208="" class="badge-btn btn btn-sm border-secondary bg-light-gray text-black" style="cursor: pointer;" title="Display all affects"><span data-v-2d3c4208="">Show all affects (6)</span></div>
<!--v-if-->
<!--v-if-->
Expand Down Expand Up @@ -1101,7 +1101,7 @@ This module has no trackers associated"><i data-v-2d3c4208="" class="bi bi-excla
<div data-v-89a61d08="" class="pagination-controls gap-1 ms-2"><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-end-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-left fs-5"></i></button><button data-v-89a61d08="" class="osim-page-btn btn btn-sm rounded-0 btn-info" disabled="">1</button><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info rounded-start-0" disabled=""><i data-v-89a61d08="" class="bi bi-arrow-right fs-5"></i></button></div>
<div data-v-89a61d08="" class="trackers-toolbar p-2 pt-1">
<div data-v-89a61d08="" class="tracker-badges">
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page: 10</span><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="per-page-btn btn btn-sm badge"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-dash-square fs-6 my-auto" title="Reduce trackers per page"></i><span data-v-89a61d08="" class="mx-2 my-auto">Per page:</span><input data-v-89a61d08="" type="text" class="form-control mx-2" value="10"><i data-v-89a61d08="" style="pointer-events: auto;" class="bi bi-plus-square fs-6 my-auto" title="Increase trackers per page"></i></div>
<div data-v-89a61d08="" class="badge bg-light-cyan" style="cursor: pointer;"><span data-v-89a61d08="">Show All Trackers (6)</span></div>
</div><button data-v-89a61d08="" type="button" class="btn btn-sm btn-info ms-auto"><i data-v-89a61d08="" class="bi bi-binoculars"></i> Show Trackers Manager </button>
</div>
Expand Down
14 changes: 12 additions & 2 deletions src/components/FlawTrackers/FlawTrackers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ const {
changePage,
currentPage,
decreaseItemsPerPage,
handlePerPageInput,
increaseItemsPerPage,
maxItemsPerPage,
minItemsPerPage,
Expand Down Expand Up @@ -156,7 +157,13 @@ const tableTrackers = computed(() => {
title="Reduce trackers per page"
@click="decreaseItemsPerPage()"
/>
<span class="mx-2 my-auto">{{ `Per page: ${settings.trackersPerPage}` }}</span>
<span class="mx-2 my-auto">Per page:</span>
<input
type="text"
class="form-control mx-2"
:value="settings.trackersPerPage"
@input="handlePerPageInput($event)"
/>
<i
:style="settings.trackersPerPage < maxItemsPerPage
? 'pointer-events: auto;'
Expand Down Expand Up @@ -358,7 +365,10 @@ const tableTrackers = computed(() => {
.per-page-btn {
display: flex;
padding-block: 0;
pointer-events: none;

input {
width: 3rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could use ch also

}
}

.badge {
Expand Down
12 changes: 6 additions & 6 deletions src/components/__tests__/FlawTrackers.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,26 +61,26 @@ describe('flawTrackers', () => {
let trackersTableRows = subject.findAll('.affects-trackers .osim-tracker-card table tbody tr');
let rowCount = trackersTableRows.length;
expect(rowCount).toBe(6);
let itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 10');
let itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('10');

const reduceItemsBtn = subject.find('.trackers-toolbar .tracker-badges .btn .bi-dash-square');
await reduceItemsBtn.trigger('click');

trackersTableRows = subject.findAll('.affects-trackers .osim-tracker-card table tbody tr');
rowCount = trackersTableRows.length;
expect(rowCount).toBe(5);
itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 5');
itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('5');

const increaseItemsBtn = subject.find('.trackers-toolbar .tracker-badges .btn .bi-plus-square');
await increaseItemsBtn.trigger('click');

trackersTableRows = subject.findAll('.affects-trackers .osim-tracker-card table tbody tr');
rowCount = trackersTableRows.length;
expect(rowCount).toBe(6);
itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges .btn span');
expect(itemsPerPageIndicator.text()).toBe('Per page: 10');
itemsPerPageIndicator = subject.find('.trackers-toolbar .tracker-badges input');
expect((itemsPerPageIndicator.element as HTMLInputElement).value).toBe('10');
});

osimFullFlawTest('Show all button works properly', async ({ flaw }) => {
Expand Down
Loading
Loading