Merge pull request #5280 from nextcloud/bugfix/multiple

lib/Dashboard/DeckWidgetToday.php

@@ -80,6 +80,6 @@ class DeckWidgetToday implements IWidget {
 	 * @inheritDoc
 	 */
 	public function load(): void {
-		\OCP\Util::addScript('deck', 'dashboard');
+		\OCP\Util::addScript('deck', 'deck-dashboard');
 	}
 }

lib/Dashboard/DeckWidgetTomorrow.php

@@ -80,6 +80,6 @@ class DeckWidgetTomorrow implements IWidget {
 	 * @inheritDoc
 	 */
 	public function load(): void {
-		\OCP\Util::addScript('deck', 'dashboard');
+		\OCP\Util::addScript('deck', 'deck-dashboard');
 	}
 }

src/App.vue

@@ -194,4 +194,10 @@ export default {
 		width: 100%;
 	}
 
+	.modal__card {
+		height: 100vh;
+		max-height: calc(100vh - 120px);
+		overflow: auto;
+	}
+
 </style>

src/components/ActivityEntry.vue

@@ -25,7 +25,7 @@
 		<div class="activity--header">
 			<img :src="activity.icon" class="activity--icon">
 			<NcRichText class="activity--subject" :text="message.subject" :arguments="message.parameters" />
-			<div class="activity--timestamp">
+			<div class="activity--timestamp" :title="formatReadableDate(activity.datetime)">
 				{{ relativeDate(activity.datetime) }}
 			</div>
 		</div>
@@ -39,6 +39,7 @@ import { NcRichText, NcUserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
 import relativeDate from '../mixins/relativeDate.js'
+import formatReadableDate from '../mixins/readableDate.js'
 
 const InternalLink = {
 	name: 'InternalLink',
@@ -62,7 +63,7 @@ export default {
 	components: {
 		NcRichText,
 	},
-	mixins: [relativeDate],
+	mixins: [relativeDate, formatReadableDate],
 	props: {
 		activity: {
 			type: Object,

src/components/ActivityList.vue

@@ -84,7 +84,20 @@ export default {
 			params.append('object_id', '' + this.objectId)
 			params.append('limit', ACTIVITY_FETCH_LIMIT)
 
-			const response = await axios.get(generateOcsUrl(`apps/activity/api/v2/activity/${this.filter}`) + '?' + params)
+			const response = await axios.get(
+				generateOcsUrl(`apps/activity/api/v2/activity/${this.filter}`) + '?' + params,
+				{
+					validateStatus: (status) => {
+						return (status >= 200 && status < 300) || status === 304
+					},
+				},
+			)
+
+			if (response.status === 304) {
+				this.endReached = true
+				return []
+			}
+
 			let activities = response.data.ocs.data
 			if (this.filter === 'deck') {
 				// We need to manually filter activities here, since currently we use two different types and there is no way
@@ -95,7 +108,7 @@ export default {
 				})
 			}
 			this.activities.push(...activities)
-			if (response.data.ocs.meta.statuscode === 304 || activities.length === 0) {
+			if (activities.length === 0) {
 				this.endReached = true
 				return []
 			}

src/components/board/Stack.vue

@@ -217,7 +217,7 @@ export default {
 			})
 		},
 		dragHandleSelector() {
-			return this.canEdit ? null : '.no-drag'
+			return this.canEdit && !this.showArchived ? null : '.no-drag'
 		},
 		cardDetailsInModal: {
 			get() {

src/components/board/TagsTabSidebar.vue

@@ -130,7 +130,7 @@ export default {
 			return true
 		},
 		labelsSorted() {
-			return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+			return [...this.labels].sort((a, b) => a.title.localeCompare(b.title))
 		},
 
 	},

src/components/card/CardSidebar.vue

@@ -39,13 +39,7 @@
 				{{ t('deck', 'Open in bigger view') }}
 			</NcActionButton>
 
-			<NcActionButton v-for="action in cardActions"
+			<CardMenuEntries :card="currentCard" :hide-details-entry="true" />
-				:key="action.label"
-				:close-after-click="true"
-				:icon="action.icon"
-				@click="action.callback(cardRichObject)">
-				{{ action.label }}
-			</NcActionButton>
 		</template>
 
 		<NcAppSidebarTab id="details"
@@ -104,6 +98,7 @@ import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
+import CardMenuEntries from '../cards/CardMenuEntries.vue'
 
 const capabilities = window.OC.getCapabilities()
 
@@ -121,6 +116,7 @@ export default {
 		AttachmentIcon,
 		CommentIcon,
 		HomeIcon,
+		CardMenuEntries,
 	},
 	mixins: [relativeDate],
 	props: {
@@ -239,7 +235,7 @@ section.app-sidebar__tab--active {
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
 	padding: 0 14px;
-	max-height: 100%;
+	height: auto;
 	overflow: initial;
 	user-select: text;
 	-webkit-user-select: text;

src/components/card/CardSidebarTabDetails.vue

@@ -119,8 +119,10 @@ export default {
 		this.initialize()
 	},
 	methods: {
-		descriptionChanged(newDesc) {
+		async descriptionChanged(newDesc) {
-			this.$store.dispatch('updateCardDesc', { ...this.card, description: newDesc })
+			if (newDesc === this.copiedCard.description) {
+				return
+			}
 			this.copiedCard.description = newDesc
 		},
 		async initialize() {

src/components/card/Description.vue

@@ -187,17 +187,26 @@ export default {
 	mounted() {
 		this.setupEditor()
 	},
-	beforeDestroy() {
+	async beforeDestroy() {
-		this?.editor?.destroy()
+		await this.destroyEditor()
 	},
 	methods: {
 		async setupEditor() {
-			this?.editor?.destroy()
+			await this.destroyEditor()
+			this.descriptionLastEdit = 0
+			this.description = this.card.description
 			this.editor = await window.OCA.Text.createEditor({
 				el: this.$refs.editor,
 				content: this.card.description,
 				readOnly: !this.canEdit,
+				onLoaded: () => {
+					this.descriptionLastEdit = 0
+				},
 				onUpdate: ({ markdown }) => {
+					if (this.description === markdown) {
+						this.descriptionLastEdit = 0
+						return
+					}
 					this.description = markdown
 					this.updateDescription()
 				},
@@ -207,6 +216,10 @@ export default {
 			})
 
 		},
+		async destroyEditor() {
+			await this.saveDescription()
+			this?.editor?.destroy()
+		},
 		addKeyListeners() {
 			this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
 				if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
@@ -287,6 +300,7 @@ export default {
 				return
 			}
 			this.descriptionSaving = true
+			await this.$store.dispatch('updateCardDesc', { ...this.card, description: this.description })
 			this.$emit('change', this.description)
 			this.descriptionLastEdit = 0
 			this.descriptionSaving = false

src/components/cards/CardItem.vue

@@ -44,9 +44,8 @@
 					tabindex="0"
 					class="editable"
 					:aria-label="t('deck', 'Edit card title')"
-					@click.stop="startEditing(card)"
 					@keydown.enter.stop.prevent="startEditing(card)">
-					{{ card.title }}
+					<span @click.stop="startEditing(card)">{{ card.title }}</span>
 				</h3>
 				<form v-else-if="editing"
 					v-click-outside="cancelEdit"
@@ -299,7 +298,9 @@ export default {
 				padding-left: 4px;
 				align-self: center;
 				&.editable {
-					cursor: text;
+					span {
+						cursor: text;
+					}
 
 					&:focus {
 						outline: 2px solid var(--color-border-dark);

src/components/cards/CardMenu.vue

@@ -21,206 +21,24 @@
   -->
 
 <template>
-	<div v-if="card" class="card-menu">
+	<div v-if="card" class="card-menu" @click.stop.prevent>
-		<div @click.stop.prevent>
+		<NcActions>
-			<NcActions>
+			<CardMenuEntries :card="card" />
-				<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
+		</NcActions>
-					icon="icon-user"
-					:close-after-click="true"
-					@click="assignCardToMe()">
-					{{ t('deck', 'Assign to me') }}
-				</NcActionButton>
-				<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
-					icon="icon-user"
-					:close-after-click="true"
-					@click="unassignCardFromMe()">
-					{{ t('deck', 'Unassign myself') }}
-				</NcActionButton>
-				<NcActionButton icon="icon-checkmark" :close-after-click="true" @click="changeCardDoneStatus()">
-					{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
-				</NcActionButton>
-				<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
-					{{ t('deck', 'Move card') }}
-				</NcActionButton>
-				<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
-					<CardBulletedIcon slot="icon" :size="20" decorative />
-					{{ t('deck', 'Card details') }}
-				</NcActionButton>
-				<NcActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
-					<template #icon>
-						<ArchiveIcon :size="20" decorative />
-					</template>
-					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
-				</NcActionButton>
-				<NcActionButton v-if="showArchived === false"
-					icon="icon-delete"
-					:close-after-click="true"
-					@click="deleteCard()">
-					{{ t('deck', 'Delete card') }}
-				</NcActionButton>
-			</NcActions>
-		</div>
-		<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
-			<div class="modal__content">
-				<h3>{{ t('deck', 'Move card to another board') }}</h3>
-				<NcMultiselect v-model="selectedBoard"
-					:placeholder="t('deck', 'Select a board')"
-					:options="activeBoards"
-					:max-height="100"
-					label="title"
-					@select="loadStacksFromBoard" />
-				<NcMultiselect v-model="selectedStack"
-					:placeholder="t('deck', 'Select a list')"
-					:options="stacksFromBoard"
-					:max-height="100"
-					label="title">
-					<span slot="noOptions">
-						{{ t('deck', 'List is empty') }}
-					</span>
-				</NcMultiselect>
-
-				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
-					{{ t('deck', 'Move card') }}
-				</button>
-				<button @click="modalShow=false">
-					{{ t('deck', 'Cancel') }}
-				</button>
-			</div>
-		</NcModal>
 	</div>
 </template>
 <script>
-import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
+import { NcActions } from '@nextcloud/vue'
-import { mapGetters, mapState } from 'vuex'
+import CardMenuEntries from './CardMenuEntries.vue'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
-import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import { getCurrentUser } from '@nextcloud/auth'
-import { showUndo } from '@nextcloud/dialogs'
-
-import '@nextcloud/dialogs/dist/index.css'
 
 export default {
 	name: 'CardMenu',
-	components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
+	components: { NcActions, CardMenuEntries },
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
 	},
-	data() {
-		return {
-			modalShow: false,
-			selectedBoard: '',
-			selectedStack: '',
-			stacksFromBoard: [],
-		}
-	},
-	computed: {
-		...mapGetters([
-			'isArchived',
-			'boards',
-		]),
-		...mapState({
-			showArchived: state => state.showArchived,
-			currentBoard: state => state.currentBoard,
-		}),
-		canEdit() {
-			if (this.currentBoard) {
-				return this.$store.getters.canEdit
-			}
-			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
-			return !!board?.permissions?.PERMISSION_EDIT
-		},
-		isBoardAndStackChoosen() {
-			if (this.selectedBoard === '' || this.selectedStack === '') {
-				return false
-			}
-			return true
-		},
-		isCurrentUserAssigned() {
-			return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
-		},
-		activeBoards() {
-			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
-		},
-
-		boardId() {
-			return this.card?.boardId ? this.card.boardId : this.$route.params.id
-		},
-	},
-	methods: {
-		openCard() {
-			const boardId = this.card?.boardId ? this.card.boardId : this.$route.params.id
-			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
-		},
-		deleteCard() {
-			this.$store.dispatch('deleteCard', this.card)
-			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', this.card))
-		},
-		changeCardDoneStatus() {
-			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
-		},
-		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
-		},
-		assignCardToMe() {
-			this.$store.dispatch('assignCardToUser', {
-				card: this.card,
-				assignee: {
-					userId: getCurrentUser()?.uid,
-					type: 0,
-				},
-			})
-		},
-		unassignCardFromMe() {
-			this.$store.dispatch('removeUserFromCard', {
-				card: this.card,
-				assignee: {
-					userId: getCurrentUser()?.uid,
-					type: 0,
-				},
-			})
-		},
-		async moveCard() {
-			this.copiedCard = Object.assign({}, this.card)
-			this.copiedCard.stackId = this.selectedStack.id
-			this.$store.dispatch('moveCard', this.copiedCard)
-			if (parseInt(this.boardId) === parseInt(this.selectedStack.boardId)) {
-				await this.$store.commit('addNewCard', { ...this.copiedCard })
-			}
-			this.modalShow = false
-		},
-		async loadStacksFromBoard(board) {
-			try {
-				const url = generateUrl('/apps/deck/stacks/' + board.id)
-				const response = await axios.get(url)
-				this.stacksFromBoard = response.data
-			} catch (err) {
-				return err
-			}
-		},
-	},
 }
 </script>
-
-<style lang="scss" scoped>
-	.modal__content {
-		width: 25vw;
-		min-width: 250px;
-		min-height: 120px;
-		text-align: center;
-		margin: 20px 20px 100px 20px;
-
-		.multiselect {
-			margin-bottom: 10px;
-		}
-	}
-
-	.modal__content button {
-		float: right;
-		margin-top: 50px;
-	}
-</style>

src/components/cards/CardMenuEntries.vue

@@ -0,0 +1,243 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<NcActionButton v-if="!hideDetailsEntry" :close-after-click="true" @click="openCard">
+			<CardBulletedIcon slot="icon" :size="20" decorative />
+			{{ t('deck', 'Card details') }}
+		</NcActionButton>
+		<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
+			icon="icon-user"
+			:close-after-click="true"
+			@click="assignCardToMe()">
+			{{ t('deck', 'Assign to me') }}
+		</NcActionButton>
+		<NcActionButton v-if="canEdit && isCurrentUserAssigned"
+			icon="icon-user"
+			:close-after-click="true"
+			@click="unassignCardFromMe()">
+			{{ t('deck', 'Unassign myself') }}
+		</NcActionButton>
+		<NcActionButton v-if="canEdit"
+			icon="icon-checkmark"
+			:close-after-click="true"
+			@click="changeCardDoneStatus()">
+			{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
+		</NcActionButton>
+		<NcActionButton v-if="canEdit"
+			icon="icon-external"
+			:close-after-click="true"
+			@click="modalShow=true">
+			{{ t('deck', 'Move card') }}
+		</NcActionButton>
+		<NcActionButton v-for="action in cardActions"
+			:key="action.label"
+			:close-after-click="true"
+			:icon="action.icon"
+			@click="action.callback(cardRichObject)">
+			{{ action.label }}
+		</NcActionButton>
+		<NcActionButton v-if="canEditBoard" :close-after-click="true" @click="archiveUnarchiveCard()">
+			<template #icon>
+				<ArchiveIcon :size="20" decorative />
+			</template>
+			{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+		</NcActionButton>
+		<NcActionButton v-if="canEdit"
+			icon="icon-delete"
+			:close-after-click="true"
+			@click="deleteCard()">
+			{{ t('deck', 'Delete card') }}
+		</NcActionButton>
+		<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+			<div class="modal__content">
+				<h3>{{ t('deck', 'Move card to another board') }}</h3>
+				<NcMultiselect v-model="selectedBoard"
+					:placeholder="t('deck', 'Select a board')"
+					:options="activeBoards"
+					:max-height="100"
+					label="title"
+					@select="loadStacksFromBoard" />
+				<NcMultiselect v-model="selectedStack"
+					:placeholder="t('deck', 'Select a list')"
+					:options="stacksFromBoard"
+					:max-height="100"
+					label="title">
+					<span slot="noOptions">
+						{{ t('deck', 'List is empty') }}
+					</span>
+				</NcMultiselect>
+
+				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
+					{{ t('deck', 'Move card') }}
+				</button>
+				<button @click="modalShow=false">
+					{{ t('deck', 'Cancel') }}
+				</button>
+			</div>
+		</NcModal>
+	</div>
+</template>
+<script>
+import { NcModal, NcActionButton, NcMultiselect } from '@nextcloud/vue'
+import { mapGetters, mapState } from 'vuex'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import CardBulletedIcon from 'vue-material-design-icons/CardBulleted.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { showUndo } from '@nextcloud/dialogs'
+
+import '@nextcloud/dialogs/dist/index.css'
+
+export default {
+	name: 'CardMenuEntries',
+	components: { NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+		hideDetailsEntry: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			modalShow: false,
+			selectedBoard: '',
+			selectedStack: '',
+			stacksFromBoard: [],
+		}
+	},
+	computed: {
+		...mapGetters([
+			'isArchived',
+			'boards',
+			'cardActions',
+		]),
+		...mapState({
+			showArchived: state => state.showArchived,
+			currentBoard: state => state.currentBoard,
+		}),
+		canEdit() {
+			return !this.card.archived
+		},
+		canEditBoard() {
+			if (this.currentBoard) {
+				return this.$store.getters.canEdit
+			}
+			const board = this.$store.getters.boards.find((item) => item.id === this.card.boardId)
+			return !!board?.permissions?.PERMISSION_EDIT
+		},
+		isBoardAndStackChoosen() {
+			if (this.selectedBoard === '' || this.selectedStack === '') {
+				return false
+			}
+			return true
+		},
+		isCurrentUserAssigned() {
+			return this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === getCurrentUser()?.uid)
+		},
+		activeBoards() {
+			return this.$store.getters.boards.filter((item) => item.deletedAt === 0 && item.archived === false)
+		},
+
+		boardId() {
+			return this.card?.boardId ? this.card.boardId : this.$route.params.id
+		},
+	},
+	methods: {
+		openCard() {
+			const boardId = this.card?.boardId ? this.card.boardId : this.$route.params.id
+			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+		},
+		deleteCard() {
+			this.$store.dispatch('deleteCard', this.card)
+			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', this.card))
+		},
+		changeCardDoneStatus() {
+			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+		},
+		archiveUnarchiveCard() {
+			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+		},
+		assignCardToMe() {
+			this.$store.dispatch('assignCardToUser', {
+				card: this.card,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		unassignCardFromMe() {
+			this.$store.dispatch('removeUserFromCard', {
+				card: this.card,
+				assignee: {
+					userId: getCurrentUser()?.uid,
+					type: 0,
+				},
+			})
+		},
+		async moveCard() {
+			this.copiedCard = Object.assign({}, this.card)
+			this.copiedCard.stackId = this.selectedStack.id
+			this.$store.dispatch('moveCard', this.copiedCard)
+			if (parseInt(this.boardId) === parseInt(this.selectedStack.boardId)) {
+				await this.$store.commit('addNewCard', { ...this.copiedCard })
+			}
+			this.modalShow = false
+		},
+		async loadStacksFromBoard(board) {
+			try {
+				const url = generateUrl('/apps/deck/stacks/' + board.id)
+				const response = await axios.get(url)
+				this.stacksFromBoard = response.data
+			} catch (err) {
+				return err
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.modal__content {
+		width: 25vw;
+		min-width: 250px;
+		min-height: 120px;
+		text-align: center;
+		margin: 20px 20px 100px 20px;
+
+		.multiselect {
+			margin-bottom: 10px;
+		}
+	}
+
+	.modal__content button {
+		float: right;
+		margin-top: 50px;
+	}
+</style>