Merge pull request #4105 from nextcloud/enh/group-overview

poll overview for groups

Author: dartcafe

lib/Controller/PageController.php

@@ -44,6 +44,7 @@ public function __construct(
 	#[FrontpageRoute(verb: 'GET', url: '/combo', postfix: 'combo')]
 	#[FrontpageRoute(verb: 'GET', url: '/not-found', postfix: 'notFound')]
 	#[FrontpageRoute(verb: 'GET', url: '/list/{category}', postfix: 'list')]
+	#[FrontpageRoute(verb: 'GET', url: '/group/{slug}', postfix: 'group')]
 	public function index(): TemplateResponse {
 		Util::addScript(AppConstants::APP_ID, 'polls-main');
 		$this->eventDispatcher->dispatchTyped(new LoadAdditionalScriptsEvent());

lib/Db/PollGroup.php

@@ -68,6 +68,16 @@ public function hasPoll(int $pollId): bool {
 		return in_array($pollId, $polls, true);
 	}
 
+	public function getSlug(): string {
+		// sanitize the title to remove any unwanted characters
+		$slug = preg_replace('/[^a-zA-Z0-9\s]/', '', $this->getTitle());
+		// in case the title is empty, use a default slug
+		if ($slug === '') {
+			$slug = 'group';
+		}
+		return strtolower(str_replace(' ', '-', $slug)) . '-' . $this->getId();
+	}
+
 	// alias of getOwner()
 	public function getUserId(): string {
 		return $this->getOwner();
@@ -93,6 +103,7 @@ public function jsonSerialize(): array {
 			'title' => $this->getTitle(),
 			'titleExt' => $this->getTitleExt(),
 			'pollIds' => $this->getPollIds(),
+			'slug' => $this->getSlug(),
 		];
 	}
 }

src/router.ts

@@ -94,6 +94,19 @@ const routes: RouteRecordRaw[] = [
 			votePage: false,
 		},
 	},
+	{
+		path: '/group/:slug',
+		components: {
+			default: List,
+			navigation: Navigation,
+		},
+		props: true,
+		name: 'group',
+		meta: {
+			publicPage: false,
+			votePage: false,
+		},
+	},
 	{
 		path: '/combo',
 		components: {

src/stores/polls.ts

@@ -60,6 +60,7 @@ export type PollGroup = {
 	title: string
 	titleExt: string
 	pollIds: number[]
+	slug: string
 }
 
 export type PollCategoryList = Record<FilterType, PollCategory>
@@ -285,6 +286,7 @@ export const usePollsStore = defineStore('polls', {
 		pollsWithGroups(state: PollList): Poll[] {
 			return state.polls.filter((poll: Poll) => poll.pollGroups.length > 0)
 		},
+
 		currentCategory(state: PollList): PollCategory {
 			const sessionStore = useSessionStore()
 
@@ -297,10 +299,34 @@ export const usePollsStore = defineStore('polls', {
 			return state.categories[FilterType.Relevant]
 		},
 
+		currentGroup(state: PollList): PollGroup | undefined {
+			const sessionStore = useSessionStore()
+			if (sessionStore.route.name === 'group') {
+				return state.pollGroups.find(
+					(group) => group.slug === sessionStore.route.params.slug,
+				)
+			}
+			return undefined
+		},
+
+		groupPolls(state: PollList): Poll[] {
+			if (!this.currentGroup) {
+				return []
+			}
+			return state.polls.filter((poll) =>
+				this.currentGroup?.pollIds.includes(poll.id),
+			)
+		},
+
 		/*
 		 * polls list, filtered by current category and sorted
 		 */
 		pollsFilteredSorted(state: PollList): Poll[] {
+			const sessionStore = useSessionStore()
+			if (sessionStore.route.name === 'group') {
+				return this.groupPolls
+			}
+
 			return orderBy(
 				state.polls.filter((poll: Poll) =>
 					this.currentCategory?.filterCondition(poll),

src/stores/session.ts

@@ -24,6 +24,7 @@ interface RouteParams {
 	id: number
 	token: string
 	type: FilterType
+	slug: string
 }
 
 export type Route = {
@@ -121,6 +122,7 @@ export const useSessionStore = defineStore('session', {
 				id: 0,
 				token: '',
 				type: FilterType.Relevant,
+				slug: '',
 			},
 		},
 		userStatus: {
@@ -227,6 +229,7 @@ export const useSessionStore = defineStore('session', {
 			this.route.params.id = payload.params.id as unknown as number
 			this.route.params.token = payload.params.token as string
 			this.route.params.type = payload.params.type as FilterType
+			this.route.params.slug = payload.params.slug as string
 		},
 
 		// Share store

src/views/Navigation.vue

@@ -194,6 +194,10 @@ onMounted(() => {
 				:name="pollGroup.title"
 				:title="pollGroup.titleExt"
 				:allow-collapse="sessionStore.appSettings.navigationPollsInList"
+				:to="{
+					name: 'group',
+					params: { slug: pollGroup.slug },
+				}"
 				:open="false">
 				<template #icon>
 					<GroupIcon :size="iconSize" />
@@ -219,8 +223,8 @@ onMounted(() => {
 						"
 						class="force-not-active"
 						:to="{
-							name: 'list',
-							params: { type: pollGroup.id },
+							name: 'group',
+							params: { slug: pollGroup.slug },
 						}"
 						:name="t('polls', 'Show all')">
 						<template #icon>

src/views/PollList.vue

@@ -30,9 +30,16 @@ const sessionStore = useSessionStore()
 const router = useRouter()
 const route = useRoute()
 
-const title = computed(
-	() => pollsStore.categories[route.params.type as FilterType].titleExt,
-)
+const title = computed(() => {
+	if (route.name === 'group') {
+		return (
+			pollsStore.currentGroup?.titleExt
+			|| pollsStore.currentGroup?.title
+			|| t('polls', 'Group without title')
+		)
+	}
+	return pollsStore.categories[route.params.type as FilterType].titleExt
+})
 
 const showMore = computed(
 	() =>
@@ -56,12 +63,22 @@ const infoLoaded = computed(() =>
 		},
 	),
 )
-const description = computed(
-	() => pollsStore.categories[route.params.type as FilterType].description,
-)
+
+const description = computed(() => {
+	if (route.name === 'group') {
+		return (
+			pollsStore.currentGroup?.description
+			|| t('polls', 'Group without description')
+		)
+	}
+
+	return pollsStore.categories[route.params.type as FilterType].description
+})
+
 const emptyPollListnoPolls = computed(
 	() => pollsStore.pollsFilteredSorted.length < 1,
 )
+
 const windowTitle = computed(() => `${t('polls', 'Polls')} - ${title.value}`)
 
 const emptyContent = computed(() => {