Merge pull request #6129 from nextcloud/enh/sidebar-organization

Improve sidebar organization

src/components/AppNavigation/CalendarList.vue

@@ -9,17 +9,66 @@
 		v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
 		draggable=".draggable-calendar-list-item"
 		@update="update">
+		<CalendarListNew />
 		<template v-if="!isPublic">
-			<CalendarListItem v-for="calendar in calendars"
+			<CalendarListItem v-for="calendar in sortedCalendars.personal"
 				:key="calendar.id"
 				class="draggable-calendar-list-item"
 				:calendar="calendar" />
 		</template>
 		<template v-else>
-			<PublicCalendarListItem v-for="calendar in calendars"
+			<PublicCalendarListItem v-for="calendar in sortedCalendars.personal"
 				:key="calendar.id"
 				:calendar="calendar" />
 		</template>
+
+		<NcAppNavigationCaption v-if="sortedCalendars.shared.length" :name="$t('calendar', 'Shared calendars')" />
+		<template v-if="!isPublic">
+			<CalendarListItem v-for="calendar in sortedCalendars.shared"
+				:key="calendar.id"
+				class="draggable-calendar-list-item"
+				:calendar="calendar" />
+		</template>
+		<template v-else>
+			<PublicCalendarListItem v-for="calendar in sortedCalendars.shared"
+				:key="calendar.id"
+				:calendar="calendar" />
+		</template>
+
+		<NcAppNavigationCaption v-if="sortedCalendars.deck.length" :name="$t('calendar', 'Deck')" />
+		<template v-if="!isPublic">
+			<CalendarListItem v-for="calendar in sortedCalendars.deck"
+				:key="calendar.id"
+				class="draggable-calendar-list-item"
+				:calendar="calendar" />
+		</template>
+		<template v-else>
+			<PublicCalendarListItem v-for="calendar in sortedCalendars.deck"
+				:key="calendar.id"
+				:calendar="calendar" />
+		</template>
+
+		<NcAppNavigationSpacer />
+
+		<NcAppNavigationItem v-if="sortedCalendars.hidden.length" :name="$t('calendar', 'Hidden')" :allow-collapse="true">
+			<template #icon>
+				<CalendarMinus :size="20" />
+			</template>
+			<template>
+				<div v-if="!isPublic">
+					<CalendarListItem v-for="calendar in sortedCalendars.hidden"
+						:key="calendar.id"
+						class="draggable-calendar-list-item"
+						:calendar="calendar" />
+				</div>
+				<div v-else>
+					<PublicCalendarListItem v-for="calendar in sortedCalendars.hidden"
+						:key="calendar.id"
+						:calendar="calendar" />
+				</div>
+			</template>
+		</NcAppNavigationItem>
+
 		<!-- The header slot must be placed here, otherwise vuedraggable adds undefined as item to the array -->
 		<template #footer>
 			<CalendarListItemLoadingPlaceholder v-if="loadingCalendars" />
@@ -28,9 +77,12 @@
 </template>
 
 <script>
+import { NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationSpacer } from '@nextcloud/vue'
 import CalendarListItem from './CalendarList/CalendarListItem.vue'
+import CalendarListNew from './CalendarList/CalendarListNew.vue'
 import PublicCalendarListItem from './CalendarList/PublicCalendarListItem.vue'
 import CalendarListItemLoadingPlaceholder from './CalendarList/CalendarListItemLoadingPlaceholder.vue'
+import CalendarMinus from 'vue-material-design-icons/CalendarMinus.vue'
 import draggable from 'vuedraggable'
 import debounce from 'debounce'
 import { showError } from '@nextcloud/dialogs'
@@ -44,9 +96,14 @@ export default {
 	name: 'CalendarList',
 	components: {
 		CalendarListItem,
+		CalendarListNew,
 		CalendarListItemLoadingPlaceholder,
 		PublicCalendarListItem,
 		draggable,
+		NcAppNavigationCaption,
+		NcAppNavigationItem,
+		NcAppNavigationSpacer,
+		CalendarMinus,
 	},
 	props: {
 		isPublic: {
@@ -69,6 +126,40 @@ export default {
 		...mapState(useCalendarsStore, {
 			serverCalendars: 'sortedCalendarsSubscriptions',
 		}),
+		/**
+		 * Calendars sorted by personal, shared, deck, and hidden
+		 *
+		 * @return {Map}
+		 */
+		sortedCalendars() {
+			const sortedCalendars = {
+				personal: [],
+				shared: [],
+				deck: [],
+				hidden: [],
+			}
+
+			this.calendars.forEach((calendar) => {
+				if (calendar.isSharedWithMe) {
+					sortedCalendars.shared.push(calendar)
+					return
+				}
+
+				if (calendar.url.includes('app-generated--deck--board')) {
+					sortedCalendars.deck.push(calendar)
+					return
+				}
+
+				if (!calendar.enabled) {
+					sortedCalendars.hidden.push(calendar)
+					return
+				}
+
+				sortedCalendars.personal.push(calendar)
+			})
+
+			return sortedCalendars
+		},
 		loadingKeyCalendars() {
 			return this._uid + '-loading-placeholder-calendars'
 		},

src/components/AppNavigation/CalendarList/CalendarListItem.vue

@@ -6,15 +6,15 @@
 <template>
 	<AppNavigationItem :loading="calendar.loading"
 		:aria-description="descriptionAppNavigationItem"
-		:name="calendar.displayName || $t('calendar', 'Untitled calendar')"
+		:name="calendarDisplayName || $t('calendar', 'Untitled calendar')"
 		:class="{deleted: isBeingDeleted, disabled: !calendar.enabled}"
 		@click.prevent.stop="toggleEnabled"
 		@update:menuOpen="actionsMenuOpen = $event">
 		<template #icon>
-			<CheckboxBlankCircle v-if="calendar.enabled"
+			<CheckboxMarked v-if="calendar.enabled"
 				:size="20"
 				:fill-color="calendar.color" />
-			<CheckboxBlankCircleOutline v-else
+			<CheckboxBlank v-else
 				:size="20"
 				:fill-color="calendar.color" />
 		</template>
@@ -82,8 +82,8 @@ import {
 	NcActionCaption,
 } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
-import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle.vue'
-import CheckboxBlankCircleOutline from 'vue-material-design-icons/CheckboxBlankCircleOutline.vue'
+import CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'
+import CheckboxBlank from 'vue-material-design-icons/CheckboxBlankOutline.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Undo from 'vue-material-design-icons/Undo.vue'
 import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
@@ -97,8 +97,8 @@ export default {
 		NcAvatar,
 		ActionButton,
 		AppNavigationItem,
-		CheckboxBlankCircle,
-		CheckboxBlankCircleOutline,
+		CheckboxMarked,
+		CheckboxBlank,
 		Pencil,
 		Undo,
 		LinkVariant,
@@ -205,6 +205,14 @@ export default {
 		countdown() {
 			return this.calendar.countdown
 		},
+
+		calendarDisplayName() {
+			if (this.calendar.displayName.substring(0, 5) === 'Deck:') {
+				return this.calendar.displayName.substring(5)
+			} else {
+				return this.calendar.displayName
+			}
+		},
 	},
 	methods: {
 		/**

src/components/AppNavigation/CalendarList/CalendarListNew.vue

@@ -4,12 +4,12 @@
 -->
 
 <template>
-	<AppNavigationItem class="app-navigation-entry-new-calendar"
+	<NcAppNavigationCaption class="app-navigation-entry-new-calendar"
 		:class="{'app-navigation-entry-new-calendar--open': isOpen}"
-		:name="$t('calendar', 'New calendar')"
+		:name="$t('calendar', 'Calendars')"
 		:menu-open.sync="isOpen"
 		@click.prevent.stop="toggleDialog">
-		<template #icon>
+		<template #actionsTriggerIcon>
 			<Plus :size="20" />
 		</template>
 		<template #actions>
@@ -93,7 +93,7 @@
 			<PublicCalendarSubscriptionPicker v-if="showPublicCalendarSubscriptionPicker"
 				@close="showPublicCalendarSubscriptionPicker = false" />
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationCaption>
 </template>
 
 <script>
@@ -102,7 +102,7 @@ import {
 	NcActionInput as ActionInput,
 	NcActionSeparator as ActionSeparator,
 	NcActionText as ActionText,
-	NcAppNavigationItem as AppNavigationItem,
+	NcAppNavigationCaption,
 } from '@nextcloud/vue'
 import {
 	showError,
@@ -126,7 +126,7 @@ export default {
 		ActionInput,
 		ActionSeparator,
 		ActionText,
-		AppNavigationItem,
+		NcAppNavigationCaption,
 		CalendarBlank,
 		CalendarCheck,
 		PublicCalendarSubscriptionPicker: () => import(/* webpackChunkName: "public-calendar-subscription-picker" */ '../../Subscription/PublicCalendarSubscriptionPicker.vue'),

src/views/Calendar.vue

@@ -26,8 +26,6 @@
 				<!-- Calendar / Subscription List -->
 				<CalendarList :is-public="!isAuthenticatedUser"
 					:loading-calendars="loadingCalendars" />
-				<CalendarListNew v-if="!loadingCalendars && isAuthenticatedUser"
-					:disabled="loadingCalendars" />
 				<EditCalendarModal />
 
 				<!-- Appointment Configuration List -->
@@ -67,7 +65,6 @@ import {
 import AppNavigationHeader from '../components/AppNavigation/AppNavigationHeader.vue'
 import CalendarList from '../components/AppNavigation/CalendarList.vue'
 import Settings from '../components/AppNavigation/Settings.vue'
-import CalendarListNew from '../components/AppNavigation/CalendarList/CalendarListNew.vue'
 import EmbedTopNavigation from '../components/AppNavigation/EmbedTopNavigation.vue'
 import EmptyCalendar from '../components/EmptyCalendar.vue'
 import CalendarGrid from '../components/CalendarGrid.vue'
@@ -118,7 +115,6 @@ export default {
 		AppContent,
 		AppNavigation,
 		AppNavigationSpacer,
-		CalendarListNew,
 		Trashbin,
 		EditCalendarModal,
 		EditSimple,