feat(CalendarList): remove ordering modal and add hidden to end of list

Signed-off-by: Grigory Vodyanov <[email protected]>

src/components/AppNavigation/CalendarList.vue

@@ -5,15 +5,18 @@
 
 <template>
 	<div class="calendar-list-wrapper">
-		<button @click="showOrderModal = !showOrderModal">
-			Show modal
-		</button>
 		<CalendarListNew />
 		<template v-if="!isPublic">
-			<CalendarListItem v-for="calendar in sortedCalendars.personal"
-				:key="calendar.id"
-				class="draggable-calendar-list-item"
-				:calendar="calendar" />
+			<draggable v-model="sortedCalendars.personal"
+				:disabled="disableDragging"
+				v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
+				draggable=".draggable-calendar-list-item"
+				@update="updateInput">
+				<CalendarListItem v-for="calendar in sortedCalendars.personal"
+					:key="calendar.id"
+					class="draggable-calendar-list-item"
+					:calendar="calendar" />
+			</draggable>
 		</template>
 		<template v-else>
 			<PublicCalendarListItem v-for="calendar in sortedCalendars.personal"
@@ -23,10 +26,16 @@
 
 		<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" />
+			<draggable v-model="sortedCalendars.shared"
+				:disabled="disableDragging"
+				v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
+				draggable=".draggable-calendar-list-item"
+				@update="updateInput">
+				<CalendarListItem v-for="calendar in sortedCalendars.shared"
+					:key="calendar.id"
+					class="draggable-calendar-list-item"
+					:calendar="calendar" />
+			</draggable>
 		</template>
 		<template v-else>
 			<PublicCalendarListItem v-for="calendar in sortedCalendars.shared"
@@ -36,10 +45,16 @@
 
 		<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" />
+			<draggable v-model="sortedCalendars.deck"
+				:disabled="disableDragging"
+				v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
+				draggable=".draggable-calendar-list-item"
+				@update="updateInput">
+				<CalendarListItem v-for="calendar in sortedCalendars.deck"
+					:key="calendar.id"
+					class="draggable-calendar-list-item"
+					:calendar="calendar" />
+			</draggable>
 		</template>
 		<template v-else>
 			<PublicCalendarListItem v-for="calendar in sortedCalendars.deck"
@@ -55,10 +70,16 @@
 			</template>
 			<template>
 				<div v-if="!isPublic">
-					<CalendarListItem v-for="calendar in sortedCalendars.hidden"
-						:key="calendar.id"
-						class="draggable-calendar-list-item"
-						:calendar="calendar" />
+					<draggable v-model="sortedCalendars.hidden"
+						:disabled="disableDragging"
+						v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
+						draggable=".draggable-calendar-list-item"
+						@update="updateInput">
+						<CalendarListItem v-for="calendar in sortedCalendars.hidden"
+							:key="calendar.id"
+							class="draggable-calendar-list-item"
+							:calendar="calendar" />
+					</draggable>
 				</div>
 				<div v-else>
 					<PublicCalendarListItem v-for="calendar in sortedCalendars.hidden"
@@ -72,21 +93,17 @@
 		<template>
 			<CalendarListItemLoadingPlaceholder v-if="loadingCalendars" />
 		</template>
-
-		<NcModal :show.sync="showOrderModal" @close="showOrderModal = false">
-			<CalendarOrderModal :passed-calendars="calendars" />
-		</NcModal>
 	</div>
 </template>
 
 <script>
-import { NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationSpacer, NcModal } from '@nextcloud/vue'
+import { NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationSpacer } from '@nextcloud/vue'
 import CalendarListItem from './CalendarList/CalendarListItem.vue'
 import CalendarListNew from './CalendarList/CalendarListNew.vue'
-import CalendarOrderModal from './CalendarList/CalendarOrderModal.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'
 import pLimit from 'p-limit'
@@ -100,14 +117,13 @@ export default {
 	components: {
 		CalendarListItem,
 		CalendarListNew,
-		CalendarOrderModal,
 		CalendarListItemLoadingPlaceholder,
 		PublicCalendarListItem,
-		NcModal,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
 		NcAppNavigationSpacer,
 		CalendarMinus,
+		draggable,
 	},
 	props: {
 		isPublic: {
@@ -122,6 +138,15 @@ export default {
 	data() {
 		return {
 			calendars: [],
+			/**
+			 * Calendars sorted by personal, shared, deck, and hidden
+			 */
+			sortedCalendars: {
+				personal: [],
+				shared: [],
+				deck: [],
+				hidden: [],
+			},
 			disableDragging: false,
 			showOrderModal: false,
 		}
@@ -131,13 +156,33 @@ export default {
 		...mapState(useCalendarsStore, {
 			serverCalendars: 'sortedCalendarsSubscriptions',
 		}),
-		/**
-		 * Calendars sorted by personal, shared, deck, and hidden
-		 *
-		 * @return {Map}
-		 */
-		sortedCalendars() {
-			const sortedCalendars = {
+		loadingKeyCalendars() {
+			return this._uid + '-loading-placeholder-calendars'
+		},
+	},
+	watch: {
+		serverCalendars(val) {
+			this.calendars = val
+		},
+		calendars() {
+			this.sortCalendars()
+		},
+	},
+	mounted() {
+		this.calendarsStore.$onAction(({ name, args, after }) => {
+			if (name === 'toggleCalendarEnabled') {
+				after(() => {
+					const calendar = this.calendars.find((calendar) => calendar.id === args[0].calendar.id)
+					calendar.enabled = args[0].calendar.enabled
+					this.sortCalendars()
+					this.update()
+				})
+			}
+		})
+	},
+	methods: {
+		sortCalendars() {
+			this.sortedCalendars = {
 				personal: [],
 				shared: [],
 				deck: [],
@@ -146,42 +191,41 @@ export default {
 
 			this.calendars.forEach((calendar) => {
 				if (!calendar.enabled) {
-					sortedCalendars.hidden.push(calendar)
+					this.sortedCalendars.hidden.push(calendar)
 					return
 				}
 
 				if (calendar.isSharedWithMe) {
-					sortedCalendars.shared.push(calendar)
+					this.sortedCalendars.shared.push(calendar)
 					return
 				}
 
 				if (calendar.url.includes('app-generated--deck--board')) {
-					sortedCalendars.deck.push(calendar)
+					this.sortedCalendars.deck.push(calendar)
 					return
 				}
 
-				sortedCalendars.personal.push(calendar)
+				this.sortedCalendars.personal.push(calendar)
 			})
-
-			return sortedCalendars
-		},
-		loadingKeyCalendars() {
-			return this._uid + '-loading-placeholder-calendars'
-		},
-	},
-	watch: {
-		serverCalendars(val) {
-			this.calendars = val
 		},
-	},
-	methods: {
-		update: debounce(async function() {
+		updateInput: debounce(async function() {
+			await this.update()
+		}, 2500),
+		async update() {
 			this.disableDragging = true
-			const newOrder = this.calendars.reduce((newOrderObj, currentItem, currentIndex) => {
+			const currentCalendars = [
+				...this.sortedCalendars.personal,
+				...this.sortedCalendars.shared,
+				...this.sortedCalendars.deck,
+				...this.sortedCalendars.hidden,
+			]
+			const newOrder = currentCalendars.reduce((newOrderObj, currentItem, currentIndex) => {
 				newOrderObj[currentItem.id] = currentIndex
 				return newOrderObj
 			}, {})
 
+			this.calendars = currentCalendars
+
 			try {
 				await limit(() => this.calendarsStore.updateCalendarListOrder({ newOrder }))
 			} catch (err) {
@@ -191,7 +235,7 @@ export default {
 			} finally {
 				this.disableDragging = false
 			}
-		}, 2500),
+		},
 	},
 }
 </script>