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 | 143 |
1 files changed, 143 insertions, 0 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 new file mode 100644 index 00000000000..c57fa5a82fa --- /dev/null +++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue @@ -0,0 +1,143 @@ +<script> +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { toNumber } from 'lodash'; +import createFlash from '~/flash'; +import IssuableList from '~/issuable_list/components/issuable_list_root.vue'; +import { IssuableStatus } from '~/issue_show/constants'; +import { PAGE_SIZE } from '~/issues_list/constants'; +import axios from '~/lib/utils/axios_utils'; +import { convertObjectPropsToCamelCase, getParameterByName } from '~/lib/utils/common_utils'; +import { __ } from '~/locale'; +import IssueCardTimeInfo from './issue_card_time_info.vue'; + +export default { + PAGE_SIZE, + components: { + GlIcon, + IssuableList, + IssueCardTimeInfo, + BlockingIssuesCount: () => import('ee_component/issues/components/blocking_issues_count.vue'), + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: { + endpoint: { + default: '', + }, + fullPath: { + default: '', + }, + }, + data() { + return { + currentPage: toNumber(getParameterByName('page')) || 1, + isLoading: false, + issues: [], + totalIssues: 0, + }; + }, + computed: { + urlParams() { + return { + page: this.currentPage, + state: IssuableStatus.Open, + }; + }, + }, + mounted() { + this.fetchIssues(); + }, + methods: { + fetchIssues(pageToFetch) { + this.isLoading = true; + + return axios + .get(this.endpoint, { + params: { + page: pageToFetch || this.currentPage, + per_page: this.$options.PAGE_SIZE, + state: IssuableStatus.Open, + with_labels_details: true, + }, + }) + .then(({ data, headers }) => { + this.currentPage = Number(headers['x-page']); + this.totalIssues = Number(headers['x-total']); + this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true })); + }) + .catch(() => { + createFlash({ message: __('An error occurred while loading issues') }); + }) + .finally(() => { + this.isLoading = false; + }); + }, + handlePageChange(page) { + this.fetchIssues(page); + }, + }, +}; +</script> + +<template> + <issuable-list + :namespace="fullPath" + recent-searches-storage-key="issues" + :search-input-placeholder="__('Search or filter results…')" + :search-tokens="[]" + :sort-options="[]" + :issuables="issues" + :tabs="[]" + current-tab="" + :issuables-loading="isLoading" + :show-pagination-controls="true" + :total-items="totalIssues" + :current-page="currentPage" + :previous-page="currentPage - 1" + :next-page="currentPage + 1" + :url-params="urlParams" + @page-change="handlePageChange" + > + <template #timeframe="{ issuable = {} }"> + <issue-card-time-info :issue="issuable" /> + </template> + <template #statistics="{ issuable = {} }"> + <li + v-if="issuable.mergeRequestsCount" + v-gl-tooltip + class="gl-display-none gl-sm-display-block" + :title="__('Related merge requests')" + data-testid="issuable-mr" + > + <gl-icon name="merge-request" /> + {{ issuable.mergeRequestsCount }} + </li> + <li + v-if="issuable.upvotes" + v-gl-tooltip + class="gl-display-none gl-sm-display-block" + :title="__('Upvotes')" + data-testid="issuable-upvotes" + > + <gl-icon name="thumb-up" /> + {{ issuable.upvotes }} + </li> + <li + v-if="issuable.downvotes" + v-gl-tooltip + class="gl-display-none gl-sm-display-block" + :title="__('Downvotes')" + data-testid="issuable-downvotes" + > + <gl-icon name="thumb-down" /> + {{ issuable.downvotes }} + </li> + <blocking-issues-count + class="gl-display-none gl-sm-display-block" + :blocking-issues-count="issuable.blockingIssuesCount" + :is-list-item="true" + /> + </template> + </issuable-list> +</template> |