move sorting and view mode to user's menu

Signed-off-by: dartcafe <github@dartcafe.de>

src/components/Actions/index.js

@@ -2,13 +2,11 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-export { default as ActionChangeView } from './modules/ActionChangeView.vue'
 export { default as ActionDelete } from './modules/ActionDelete.vue'
 export { default as ActionDeleteOrphanedVotes } from './modules/ActionDeleteOrphanedVotes.vue'
 export { default as ActionOpenOptionsSidebar } from './modules/ActionOpenOptionsSidebar.vue'
 export { default as ActionOpenSharesSidebar } from './modules/ActionOpenSharesSidebar.vue'
 export { default as ActionRegister } from './modules/ActionRegister.vue'
 export { default as ActionSendConfirmed } from './modules/ActionSendConfirmed.vue'
-export { default as ActionSortOptions } from './modules/ActionSortOptions.vue'
 export { default as ActionSwitchSafeTable } from './modules/ActionSwitchSafeTable.vue'
 export { default as ActionToggleSidebar } from './modules/ActionToggleSidebar.vue'

src/components/Poll/PollHeaderButtons.vue

@@ -7,12 +7,12 @@
 	import { computed, onBeforeUnmount } from 'vue'
 	import { useRoute } from 'vue-router'
 	import { t } from '@nextcloud/l10n'
-	
+
 	import NcButton, { ButtonType } from '@nextcloud/vue/dist/Components/NcButton.js'
 	import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 	import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
-	
+
 	import { ActionToggleSidebar } from '../Actions/index.js'
 	import PollInformation from '../Poll/PollInformation.vue'
 	import UserMenu from '../User/UserMenu.vue'

src/components/User/UserMenu.vue

@@ -4,10 +4,11 @@
 -->
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { computed, ref } from 'vue'
 	import { useRouter } from 'vue-router'
 	import { debounce } from 'lodash'
 	import { showSuccess, showError } from '@nextcloud/dialogs'
+	import { emit } from '@nextcloud/event-bus'
 	import { t } from '@nextcloud/l10n'
 
 	import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -24,14 +25,21 @@
 	import EditAccountIcon from 'vue-material-design-icons/AccountEdit.vue'
 	import LogoutIcon from 'vue-material-design-icons/Logout.vue'
 	import EditEmailIcon from 'vue-material-design-icons/EmailEditOutline.vue'
+	import ListViewIcon from 'vue-material-design-icons/ViewListOutline.vue' // view-sequential-outline
+	import TableViewIcon from 'vue-material-design-icons/Table.vue' // view-comfy-outline
+	import SortByOriginalOrderIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+	import SortByRankIcon from 'vue-material-design-icons/FormatListNumbered.vue'
+	import SortByDateOptionIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue'
 
 	import { PollsAPI, ValidatorAPI } from '../../Api/index.js'
+	import { useOptionsStore } from '../../stores/options.ts'
 	import { usePollStore } from '../../stores/poll.ts'
+	import { usePreferencesStore } from '../../stores/preferences.ts'
 	import { useSessionStore } from '../../stores/session.ts'
 	import { useSubscriptionStore } from '../../stores/subscription.ts'
 	import { useVotesStore } from '../../stores/votes.ts'
 
-	import { StatusResults } from '../../Types/index.ts'
+	import { StatusResults, ViewMode, PollType } from '../../Types/index.ts'
 
 	import { deleteCookieByValue, findCookieByValue } from '../../helpers/index.ts'
 
@@ -43,9 +51,11 @@
 		label: string
 	}
 
+	const optionsStore = useOptionsStore()
 	const pollStore = usePollStore()
 	const sessionStore = useSessionStore()
 	const subscriptionStore = useSubscriptionStore()
+	const preferencesStore = usePreferencesStore()
 	const votesStore = useVotesStore()
 	const router = useRouter()
 	const hasCookie = !!findCookieByValue(sessionStore.publicToken)
@@ -84,6 +94,18 @@
 		}
 	}
 
+	/**
+	 *
+	 */
+	function changeView(): void {
+		emit('polls:transitions:off', 500)
+		if (pollStore.type === PollType.Date) {
+			preferencesStore.setViewDatePoll(pollStore.viewMode === ViewMode.TableView ? ViewMode.ListView : ViewMode.TableView)
+		} else if (pollStore.type === PollType.Text) {
+			preferencesStore.setViewTextPoll(pollStore.viewMode === ViewMode.TableView ? ViewMode.ListView : ViewMode.TableView)
+		}
+	}
+
 	async function copyLink() {
 		const personalLink = window.location.origin
 			+ router.resolve({
@@ -127,6 +149,25 @@
 		label: t('polls', 'Change name'),
 	})
 
+	const sortCaption = computed(() => {
+		if (optionsStore.ranked && pollStore.type === PollType.Date) {
+			return t('polls', 'Switch to date order')
+		}
+
+		if (optionsStore.ranked && pollStore.type === PollType.Text) {
+			return t('polls', 'Switch to original order')
+		}
+
+		return t('polls', 'Switch to ranked order')
+	})
+
+	const viewModeCaption = computed(() => {
+		if (pollStore.viewMode === ViewMode.TableView) {
+			return t('polls', 'Switch to list view')
+		}
+		return t('polls', 'Switch to table view')
+	})
+
 	const validateDisplayName = debounce(async function () {
 		if (sessionStore.share.user.displayName.length < 1) {
 			setDisplayNameStatus(StatusResults.Error)
@@ -209,6 +250,24 @@
 		<template #icon>
 			<SettingsIcon :size="20" decorative />
 		</template>
+		<NcActionButton :name="viewModeCaption"
+			:aria-label="viewModeCaption"
+			@click="changeView()">
+			<template #icon>
+				<ListViewIcon v-if="pollStore.viewMode === ViewMode.TableView" />
+				<TableViewIcon v-else />
+			</template>
+		</NcActionButton>
+
+		<NcActionButton :name="sortCaption"
+			:aria-label="sortCaption"
+			@click="optionsStore.ranked = !optionsStore.ranked">
+			<template #icon>
+				<SortByDateOptionIcon v-if="optionsStore.ranked && pollStore.type === PollType.Date" />
+				<SortByOriginalOrderIcon v-else-if="optionsStore.ranked && pollStore.type === PollType.Text" />
+				<SortByRankIcon v-else />
+			</template>
+		</NcActionButton>
 
 		<NcActionButton v-if="sessionStore.share?.type === 'external'"
 			:name="t('polls', 'Copy your personal link to clipboard')"

src/components/VoteTable/VoteTable.vue

@@ -10,7 +10,6 @@
 	import { ActionDelete } from '../Actions/index.js'
 
 	import VoteColumn from './VoteColumn.vue'
-	import VoteMenu from './VoteMenu.vue'
 	import UserItem from '../User/UserItem.vue'
 	import { usePollStore } from '../../stores/poll.ts'
 	import { useSessionStore } from '../../stores/session.ts'
@@ -33,9 +32,7 @@
 	<div class="vote-table" :class="[pollStore.viewMode, { closed: pollStore.isClosed }]">
 		<div class="vote-table__users sticky-left">
 			<div class="option-menu" />
-			<div class="column-header">
-				<VoteMenu />
-			</div>
+			<div class="column-header" />
 
 			<div v-for="(participant) in pollStore.safeParticipants"
 				:key="participant.id"