diff options
Diffstat (limited to 'app/assets/javascripts/issues_list/components/issues_list_app.vue')
-rw-r--r-- | app/assets/javascripts/issues_list/components/issues_list_app.vue | 132 |
1 files changed, 61 insertions, 71 deletions
diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue index d5cab77f26c..dbf7717b248 100644 --- a/app/assets/javascripts/issues_list/components/issues_list_app.vue +++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue @@ -9,7 +9,7 @@ import { GlTooltipDirective, } from '@gitlab/ui'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; -import { toNumber } from 'lodash'; +import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql'; import createFlash from '~/flash'; import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue'; import IssuableByEmail from '~/issuable/components/issuable_by_email.vue'; @@ -17,13 +17,12 @@ import IssuableList from '~/issuable_list/components/issuable_list_root.vue'; import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants'; import { API_PARAM, - apiSortParams, CREATED_DESC, i18n, + initialPageParams, MAX_LIST_SIZE, PAGE_SIZE, PARAM_DUE_DATE, - PARAM_PAGE, PARAM_SORT, PARAM_STATE, RELATIVE_POSITION_DESC, @@ -49,7 +48,8 @@ import { getSortOptions, } from '~/issues_list/utils'; import axios from '~/lib/utils/axios_utils'; -import { convertObjectPropsToCamelCase, getParameterByName } from '~/lib/utils/common_utils'; +import { getParameterByName } from '~/lib/utils/common_utils'; +import { scrollUp } from '~/lib/utils/scroll_utils'; import { DEFAULT_NONE_ANY, OPERATOR_IS_ONLY, @@ -107,9 +107,6 @@ export default { emptyStateSvgPath: { default: '', }, - endpoint: { - default: '', - }, exportCsvPath: { default: '', }, @@ -173,15 +170,43 @@ export default { dueDateFilter: getDueDateValue(getParameterByName(PARAM_DUE_DATE)), exportCsvPathWithQuery: this.getExportCsvPathWithQuery(), filterTokens: getFilterTokens(window.location.search), - isLoading: false, issues: [], - page: toNumber(getParameterByName(PARAM_PAGE)) || 1, + pageInfo: {}, + pageParams: initialPageParams, showBulkEditSidebar: false, sortKey: getSortKey(getParameterByName(PARAM_SORT)) || defaultSortKey, state: state || IssuableStates.Opened, totalIssues: 0, }; }, + apollo: { + issues: { + query: getIssuesQuery, + variables() { + return { + projectPath: this.projectPath, + search: this.searchQuery, + sort: this.sortKey, + state: this.state, + ...this.pageParams, + ...this.apiFilterParams, + }; + }, + update: ({ project }) => project.issues.nodes, + result({ data }) { + this.pageInfo = data.project.issues.pageInfo; + this.totalIssues = data.project.issues.count; + this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery(); + }, + error(error) { + createFlash({ message: this.$options.i18n.errorFetchingIssues, captureError: true, error }); + }, + skip() { + return !this.hasProjectIssues; + }, + debounce: 200, + }, + }, computed: { hasSearch() { return this.searchQuery || Object.keys(this.urlFilterParams).length; @@ -348,7 +373,6 @@ export default { return { due_date: this.dueDateFilter, - page: this.page, search: this.searchQuery, state: this.state, ...urlSortParams[this.sortKey], @@ -361,7 +385,6 @@ export default { }, mounted() { eventHub.$on('issuables:toggleBulkEdit', this.toggleBulkEditSidebar); - this.fetchIssues(); }, beforeDestroy() { eventHub.$off('issuables:toggleBulkEdit', this.toggleBulkEditSidebar); @@ -406,54 +429,11 @@ export default { fetchUsers(search) { return axios.get(this.autocompleteUsersPath, { params: { search } }); }, - fetchIssues() { - if (!this.hasProjectIssues) { - return undefined; - } - - this.isLoading = true; - - const filterParams = { - ...this.apiFilterParams, - }; - - if (filterParams.epic_id) { - filterParams.epic_id = filterParams.epic_id.split('::&').pop(); - } else if (filterParams['not[epic_id]']) { - filterParams['not[epic_id]'] = filterParams['not[epic_id]'].split('::&').pop(); - } - - return axios - .get(this.endpoint, { - params: { - due_date: this.dueDateFilter, - page: this.page, - per_page: PAGE_SIZE, - search: this.searchQuery, - state: this.state, - with_labels_details: true, - ...apiSortParams[this.sortKey], - ...filterParams, - }, - }) - .then(({ data, headers }) => { - this.page = Number(headers['x-page']); - this.totalIssues = Number(headers['x-total']); - this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true })); - this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery(); - }) - .catch(() => { - createFlash({ message: this.$options.i18n.errorFetchingIssues }); - }) - .finally(() => { - this.isLoading = false; - }); - }, getExportCsvPathWithQuery() { return `${this.exportCsvPath}${window.location.search}`; }, getStatus(issue) { - if (issue.closedAt && issue.movedToId) { + if (issue.closedAt && issue.moved) { return this.$options.i18n.closedMoved; } if (issue.closedAt) { @@ -484,18 +464,26 @@ export default { }, handleClickTab(state) { if (this.state !== state) { - this.page = 1; + this.pageParams = initialPageParams; } this.state = state; - this.fetchIssues(); }, handleFilter(filter) { this.filterTokens = filter; - this.fetchIssues(); }, - handlePageChange(page) { - this.page = page; - this.fetchIssues(); + handleNextPage() { + this.pageParams = { + afterCursor: this.pageInfo.endCursor, + firstPageSize: PAGE_SIZE, + }; + scrollUp(); + }, + handlePreviousPage() { + this.pageParams = { + beforeCursor: this.pageInfo.startCursor, + lastPageSize: PAGE_SIZE, + }; + scrollUp(); }, handleReorder({ newIndex, oldIndex }) { const issueToMove = this.issues[oldIndex]; @@ -530,9 +518,11 @@ export default { createFlash({ message: this.$options.i18n.reorderError }); }); }, - handleSort(value) { - this.sortKey = value; - this.fetchIssues(); + handleSort(sortKey) { + if (this.sortKey !== sortKey) { + this.pageParams = initialPageParams; + } + this.sortKey = sortKey; }, toggleBulkEditSidebar(showBulkEditSidebar) { this.showBulkEditSidebar = showBulkEditSidebar; @@ -556,18 +546,18 @@ export default { :tabs="$options.IssuableListTabs" :current-tab="state" :tab-counts="tabCounts" - :issuables-loading="isLoading" + :issuables-loading="$apollo.queries.issues.loading" :is-manual-ordering="isManualOrdering" :show-bulk-edit-sidebar="showBulkEditSidebar" :show-pagination-controls="showPaginationControls" - :total-items="totalIssues" - :current-page="page" - :previous-page="page - 1" - :next-page="page + 1" + :use-keyset-pagination="true" + :has-next-page="pageInfo.hasNextPage" + :has-previous-page="pageInfo.hasPreviousPage" :url-params="urlParams" @click-tab="handleClickTab" @filter="handleFilter" - @page-change="handlePageChange" + @next-page="handleNextPage" + @previous-page="handlePreviousPage" @reorder="handleReorder" @sort="handleSort" @update-legacy-bulk-edit="handleUpdateLegacyBulkEdit" @@ -646,7 +636,7 @@ export default { </li> <blocking-issues-count class="gl-display-none gl-sm-display-block" - :blocking-issues-count="issuable.blockingIssuesCount" + :blocking-issues-count="issuable.blockedByCount" :is-list-item="true" /> </template> |