diff --git a/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml b/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml new file mode 100644 index 00000000..45859177 --- /dev/null +++ b/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml @@ -0,0 +1,9 @@ +--- +title: Improved loading time when looking for organizations +category: added +author: Eva Millán +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. diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js index db33e030..c6bc09d4 100644 --- a/ui/src/apollo/queries.js +++ b/ui/src/apollo/queries.js @@ -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, @@ -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, @@ -460,4 +486,5 @@ export { getImportIdentitiesTasks, getOrganization, getScheduledTasks, + findOrganization, }; diff --git a/ui/src/components/OrganizationSelector.vue b/ui/src/components/OrganizationSelector.vue index 30698b67..b8515d2f 100644 --- a/ui/src/components/OrganizationSelector.vue +++ b/ui/src/components/OrganizationSelector.vue @@ -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 "${search}"`" - :hide-no-data="!search" + :hide-no-data="!search || isLoading" + cache-items clearable dense outlined @@ -33,6 +35,7 @@ export default { inputValue: this.value, organizations: [], search: this.value, + isLoading: false, }; }, props: { @@ -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() { @@ -89,7 +100,8 @@ export default { watch: { search(value) { if (value && value.length > 2) { - this.getSelectorItems(value); + this.isLoading = true; + this.debounceSearch(value); } }, value() { diff --git a/ui/src/views/Individual.vue b/ui/src/views/Individual.vue index f4ac96d8..4d85070f 100644 --- a/ui/src/views/Individual.vue +++ b/ui/src/views/Individual.vue @@ -410,7 +410,7 @@ import { getCountries, getIndividualByUuid, - getPaginatedOrganizations, + findOrganization, } from "../apollo/queries"; import { deleteIdentity, @@ -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, diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap index 0f1012e9..c2b67cda 100644 --- a/ui/tests/unit/__snapshots__/storybook.spec.js.snap +++ b/ui/tests/unit/__snapshots__/storybook.spec.js.snap @@ -10563,13 +10563,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = ` > @@ -10729,13 +10729,13 @@ exports[`Storyshots OrganizationsTable Groups 1`] = ` > @@ -11020,13 +11020,13 @@ exports[`Storyshots OrganizationsTable Organizations 1`] = ` > @@ -11527,13 +11527,13 @@ exports[`Storyshots Search Filter Selector 1`] = ` > @@ -11624,13 +11624,13 @@ exports[`Storyshots Search Order Selector 1`] = ` > @@ -11693,7 +11693,7 @@ exports[`Storyshots Search Order Selector 1`] = ` @@ -12828,7 +12828,7 @@ exports[`Storyshots WorkSpace Drag And Drop 1`] = `