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

[ui] Improve organization selector loading times #842

Merged
merged 2 commits into from
Dec 13, 2023
Merged

[ui] Improve organization selector loading times #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
742d582
[ui] Debounce organization selector API calls
evamillan Dec 13, 2023
3a6b385
[ui] Add query to return list of organization names
evamillan Dec 13, 2023
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
9 changes: 9 additions & 0 deletions releases/unreleased/improve-loading-time-when-looking-for-organizations.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Improved loading time when looking for organizations
category: added
author: Eva Millán <[email protected]>
issue: null
notes: >
The autocomplete field that is used to affiliate individuals
to organizations now makes fewer and lighter requests to find
them, resulting in faster loading times.
27 changes: 27 additions & 0 deletions ui/src/apollo/queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,21 @@ const GET_SCHEDULED_TASKS = gql`
}
`;

const FIND_ORGANIZATION = gql`
query findOrganization(
$page: Int
$pageSize: Int
$filters: OrganizationFilterType
) {
organizations(page: $page, pageSize: $pageSize, filters: $filters) {
entities {
id
name
}
}
}
`;

const getIndividualByUuid = (apollo, uuid) => {
let response = apollo.query({
query: GET_INDIVIDUAL_BYUUID,
Expand Down Expand Up @@ -445,6 +460,17 @@ const getScheduledTasks = (apollo, jobType, backend) => {
});
};

const findOrganization = (apollo, page, pageSize, filters) => {
return apollo.query({
query: FIND_ORGANIZATION,
variables: {
page,
pageSize,
filters,
},
});
};

export {
getCountries,
getIndividuals,
Expand All @@ -460,4 +486,5 @@ export {
getImportIdentitiesTasks,
getOrganization,
getScheduledTasks,
findOrganization,
};
16 changes: 14 additions & 2 deletions ui/src/components/OrganizationSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
:items="organizations"
:search-input.sync="search"
:label="label"
:loading="isLoading"
item-text="name"
item-value="name"
:no-data-text="`No matches for &quot;${search}&quot;`"
:hide-no-data="!search"
:hide-no-data="!search || isLoading"
cache-items
clearable
dense
outlined
Expand All @@ -33,6 +35,7 @@ export default {
inputValue: this.value,
organizations: [],
search: this.value,
isLoading: false,
};
},
props: {
Expand All @@ -55,11 +58,19 @@ export default {
},
},
methods: {
debounceSearch(searchValue) {
clearTimeout(this.timer);

this.timer = setTimeout(() => {
this.getSelectorItems(searchValue);
}, 500);
},
async getSelectorItems(value) {
const filters = value ? { term: value } : {};
const response = await this.fetchOrganizations(1, 10, filters);
if (response) {
this.organizations = response.entities;
this.isLoading = false;
}
},
async createOrganization() {
Expand Down Expand Up @@ -89,7 +100,8 @@ export default {
watch: {
search(value) {
if (value && value.length > 2) {
this.getSelectorItems(value);
this.isLoading = true;
this.debounceSearch(value);
}
},
value() {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/views/Individual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@
import {
getCountries,
getIndividualByUuid,
getPaginatedOrganizations,
findOrganization,
} from "../apollo/queries";
import {
deleteIdentity,
Expand Down Expand Up @@ -682,7 +682,7 @@ export default {
this.individual = formatIndividual(newData[0]);
},
async fetchOrganizations(page, items, filters) {
const response = await getPaginatedOrganizations(
const response = await findOrganization(
this.$apollo,
page,
items,
Expand Down
52 changes: 26 additions & 26 deletions ui/tests/unit/__snapshots__/storybook.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10563,13 +10563,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
>
<label
class="v-label theme--light"
for="input-1692"
for="input-1694"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1692"
id="input-1694"
type="text"
/>
</div>
Expand Down Expand Up @@ -10729,13 +10729,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-1704"
for="input-1706"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-1704"
id="input-1706"
max="0"
min="1"
type="number"
Expand Down Expand Up @@ -10854,13 +10854,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
>
<label
class="v-label theme--light"
for="input-1745"
for="input-1747"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1745"
id="input-1747"
type="text"
/>
</div>
Expand Down Expand Up @@ -11020,13 +11020,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-1757"
for="input-1759"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-1757"
id="input-1759"
max="0"
min="1"
type="number"
Expand Down Expand Up @@ -11400,13 +11400,13 @@ exports[`Storyshots Search Default 1`] = `
>
<label
class="v-label theme--light"
for="input-1848"
for="input-1850"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1848"
id="input-1850"
type="text"
/>
</div>
Expand Down Expand Up @@ -11527,13 +11527,13 @@ exports[`Storyshots Search Filter Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1857"
for="input-1859"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1857"
id="input-1859"
type="text"
/>
</div>
Expand Down Expand Up @@ -11624,13 +11624,13 @@ exports[`Storyshots Search Order Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1869"
for="input-1871"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-1869"
id="input-1871"
type="text"
/>
</div>
Expand Down Expand Up @@ -11693,7 +11693,7 @@ exports[`Storyshots Search Order Selector 1`] = `
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="list-1873"
aria-owns="list-1875"
class="v-input__slot"
role="button"
>
Expand All @@ -11713,7 +11713,7 @@ exports[`Storyshots Search Order Selector 1`] = `
>
<label
class="v-label theme--light"
for="input-1873"
for="input-1875"
style="left: 0px; position: absolute;"
>
Order by
Expand All @@ -11724,7 +11724,7 @@ exports[`Storyshots Search Order Selector 1`] = `
<input
aria-readonly="false"
autocomplete="off"
id="input-1873"
id="input-1875"
readonly="readonly"
type="text"
/>
Expand Down Expand Up @@ -12660,7 +12660,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
/>
<input
aria-checked="false"
id="input-2019"
id="input-2021"
role="checkbox"
type="checkbox"
value=""
Expand All @@ -12671,7 +12671,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
</div>
<label
class="v-label theme--light"
for="input-2019"
for="input-2021"
style="left: 0px; position: relative;"
>
Select all
Expand Down Expand Up @@ -12759,13 +12759,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label theme--light"
for="input-2024"
for="input-2026"
style="left: 0px; position: absolute;"
>
Search
</label>
<input
id="input-2024"
id="input-2026"
type="text"
/>
</div>
Expand Down Expand Up @@ -12828,7 +12828,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="list-2031"
aria-owns="list-2033"
class="v-input__slot"
role="button"
>
Expand All @@ -12848,7 +12848,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label theme--light"
for="input-2031"
for="input-2033"
style="left: 0px; position: absolute;"
>
Order by
Expand All @@ -12859,7 +12859,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
<input
aria-readonly="false"
autocomplete="off"
id="input-2031"
id="input-2033"
readonly="readonly"
type="text"
/>
Expand Down Expand Up @@ -13086,13 +13086,13 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `
>
<label
class="v-label v-label--active theme--light"
for="input-2053"
for="input-2055"
style="left: 0px; position: absolute;"
>
Items per page
</label>
<input
id="input-2053"
id="input-2055"
max="0"
min="1"
type="number"
Expand Down