diff --git a/src/components/pages/EntitySearch.vue b/src/components/pages/EntitySearch.vue index 5a03def57f..c2e6a58c95 100644 --- a/src/components/pages/EntitySearch.vue +++ b/src/components/pages/EntitySearch.vue @@ -104,9 +104,24 @@ +

+ + +

-

+

{{ $t('shots.title') }} ({{ this.results.shots?.length || 0 }})

@@ -153,49 +168,20 @@
- - @@ -209,14 +195,12 @@ import { mapGetters, mapActions } from 'vuex' import { getEntityPath, getPersonPath } from '@/lib/path' import { SearchIcon } from 'vue-feather-icons' - -// import peopleStore from '@/store/modules/people' +import stringHelpers from '@/lib/string' import Checkbox from '@/components/widgets/Checkbox' import Combobox from '@/components/widgets/Combobox' import ComboboxProduction from '@/components/widgets/ComboboxProduction' import EntityPreview from '@/components/widgets/EntityPreview' -// import PeopleAvatar from '@/components/widgets/PeopleAvatar' import Spinner from '@/components/widgets/Spinner' const AVAILABLE_LIMITS = [12, 24, 48] @@ -230,7 +214,6 @@ export default { Combobox, ComboboxProduction, EntityPreview, - // PeopleAvatar, SearchIcon, Spinner }, @@ -238,6 +221,8 @@ export default { data() { return { isLoading: false, + isLoadingMoreAssets: false, + isLoadingMoreShots: false, limit: AVAILABLE_LIMITS[0], limitOptions: AVAILABLE_LIMITS.map(value => ({ label: value, value })), productionId: '', @@ -339,6 +324,29 @@ export default { }) }, + loadMoreResults(indexName) { + const index_names = [indexName] + const loadingField = `isLoadingMore${stringHelpers.capitalize(indexName)}` + this[loadingField] = true + + this.searchData({ + query: this.searchQuery, + limit: this.limit, + offset: this.results[indexName].length, + productionId: this.productionId, + index_names + }) + .then(results => { + this.results[indexName] = this.results[indexName].concat( + results[indexName] + ) + }) + .catch(console.error) + .finally(() => { + this[loadingField] = false + }) + }, + selectPrevious() { this.selectedIndex-- if (this.selectedIndex < 0) { diff --git a/src/locales/en.js b/src/locales/en.js index 4bc96fda8c..ac906a1658 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -458,6 +458,7 @@ export default { or: 'or', no: 'No', less_filters: 'Fewer filters', + load_more: 'Load more', loading: 'Loading...', loading_data: 'Loading data', loading_error: 'An error occurred while loading data.', diff --git a/src/store/api/client.js b/src/store/api/client.js index 64e4ceb69d..a40333692b 100644 --- a/src/store/api/client.js +++ b/src/store/api/client.js @@ -134,9 +134,9 @@ const client = { return client.pget(path) }, - searchData(query, limit, index_names, productionId) { + searchData(query, limit, offset, index_names, productionId) { const path = '/api/data/search' - const data = { query, limit, index_names } + const data = { query, limit, offset, index_names } if (productionId !== 'all') data.project_id = productionId return client.ppost(path, data) } diff --git a/src/store/modules/main.js b/src/store/modules/main.js index 8ba3d2334c..6fb9221461 100644 --- a/src/store/modules/main.js +++ b/src/store/modules/main.js @@ -75,11 +75,8 @@ const actions = { }) }, - searchData(_, { query, limit, productionId, index_names }) { - if (!limit) { - limit = 3 - } - return client.searchData(query, limit, index_names, productionId) + searchData(_, { query, limit = 3, offset = 0, productionId, index_names }) { + return client.searchData(query, limit, offset, index_names, productionId) } }