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 | 91 |
1 files changed, 73 insertions, 18 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 5fb83dfd1ab..83b0bcebe67 100644 --- a/app/assets/javascripts/issues/list/components/issues_list_app.vue +++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue @@ -1,11 +1,11 @@ <script> import { GlButton, + GlButtonGroup, + GlDisclosureDropdown, + GlDisclosureDropdownGroup, GlFilteredSearchToken, GlTooltipDirective, - GlDropdown, - GlDropdownItem, - GlDropdownDivider, } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import fuzzaldrinPlus from 'fuzzaldrin-plus'; @@ -14,6 +14,7 @@ import IssueCardStatistics from 'ee_else_ce/issues/list/components/issue_card_st import IssueCardTimeInfo from 'ee_else_ce/issues/list/components/issue_card_time_info.vue'; import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql'; import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { createAlert, VARIANT_INFO } from '~/alert'; import { TYPENAME_USER } from '~/graphql_shared/constants'; import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue'; @@ -68,6 +69,9 @@ import { defaultWorkItemTypes, i18n, ISSUE_REFERENCE, + ISSUES_GRID_VIEW_KEY, + ISSUES_LIST_VIEW_KEY, + ISSUES_VIEW_TYPE_KEY, MAX_LIST_SIZE, PARAM_FIRST_PAGE_SIZE, PARAM_LAST_PAGE_SIZE, @@ -116,19 +120,23 @@ const CrmOrganizationToken = () => export default { i18n, issuableListTabs, + ISSUES_VIEW_TYPE_KEY, + ISSUES_GRID_VIEW_KEY, + ISSUES_LIST_VIEW_KEY, components: { CsvImportExportButtons, + GlDisclosureDropdown, + GlDisclosureDropdownGroup, EmptyStateWithAnyIssues, EmptyStateWithoutAnyIssues, GlButton, - GlDropdown, - GlDropdownDivider, - GlDropdownItem, + GlButtonGroup, IssuableByEmail, IssuableList, IssueCardStatistics, IssueCardTimeInfo, NewResourceDropdown, + LocalStorageSync, }, directives: { GlTooltip: GlTooltipDirective, @@ -194,6 +202,21 @@ export default { sortKey: CREATED_DESC, state: STATUS_OPEN, pageSize: DEFAULT_PAGE_SIZE, + viewType: ISSUES_LIST_VIEW_KEY, + subscribeDropdownOptions: { + items: [ + { + text: i18n.rssLabel, + href: this.rssPath, + extraAttrs: { 'data-testid': 'subscribe-rss' }, + }, + { + text: i18n.calendarLabel, + href: this.calendarPath, + extraAttrs: { 'data-testid': 'subscribe-calendar' }, + }, + ], + }, }; }, apollo: { @@ -504,6 +527,12 @@ export default { }) ); }, + gridViewFeatureEnabled() { + return Boolean(this.glFeatures?.issuesGridView); + }, + isGridView() { + return this.viewType === ISSUES_GRID_VIEW_KEY; + }, }, watch: { $route(newValue, oldValue) { @@ -764,6 +793,15 @@ export default { this.sortKey = sortKey; this.state = state || STATUS_OPEN; }, + switchViewType(type) { + // Filter the wrong data from localStorage + if (type === ISSUES_GRID_VIEW_KEY) { + this.viewType = ISSUES_GRID_VIEW_KEY; + return; + } + // The default view is list view + this.viewType = ISSUES_LIST_VIEW_KEY; + }, }, }; </script> @@ -798,6 +836,7 @@ export default { :has-next-page="pageInfo.hasNextPage" :has-previous-page="pageInfo.hasPreviousPage" :show-filtered-search-friendly-text="hasOrFeature" + :is-grid-view="isGridView" show-work-item-type-icon @click-tab="handleClickTab" @dismiss-alert="handleDismissAlert" @@ -810,6 +849,30 @@ export default { @page-size-change="handlePageSizeChange" > <template #nav-actions> + <local-storage-sync + v-if="gridViewFeatureEnabled" + :value="viewType" + :storage-key="$options.ISSUES_VIEW_TYPE_KEY" + @input="switchViewType" + > + <gl-button-group> + <gl-button + :variant="isGridView ? 'default' : 'confirm'" + data-testid="list-view-type" + @click="switchViewType($options.ISSUES_LIST_VIEW_KEY)" + > + {{ $options.i18n.listLabel }} + </gl-button> + <gl-button + :variant="isGridView ? 'confirm' : 'default'" + data-testid="grid-view-type" + @click="switchViewType($options.ISSUES_GRID_VIEW_KEY)" + > + {{ $options.i18n.gridLabel }} + </gl-button> + </gl-button-group> + </local-storage-sync> + <gl-button v-if="canBulkUpdate" :disabled="isBulkEditButtonDisabled" @@ -831,12 +894,12 @@ export default { :query-variables="newIssueDropdownQueryVariables" :extract-projects="extractProjects" /> - <gl-dropdown + <gl-disclosure-dropdown v-gl-tooltip.hover="$options.i18n.actionsLabel" category="tertiary" icon="ellipsis_v" no-caret - :text="$options.i18n.actionsLabel" + :toggle-text="$options.i18n.actionsLabel" text-sr-only data-qa-selector="issues_list_more_actions_dropdown" > @@ -845,16 +908,8 @@ export default { :export-csv-path="exportCsvPathWithQuery" :issuable-count="currentTabCount" /> - - <gl-dropdown-divider v-if="showCsvButtons" /> - - <gl-dropdown-item :href="rssPath"> - {{ $options.i18n.rssLabel }} - </gl-dropdown-item> - <gl-dropdown-item :href="calendarPath"> - {{ $options.i18n.calendarLabel }} - </gl-dropdown-item> - </gl-dropdown> + <gl-disclosure-dropdown-group :bordered="true" :group="subscribeDropdownOptions" /> + </gl-disclosure-dropdown> </template> <template #timeframe="{ issuable = {} }"> |