Merge pull request #2271 from nextcloud/fix/sortFilterTags

sort tags in filter

src/components/Controls.vue

@@ -67,7 +67,7 @@
 					<template>
 						<div class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
-							<div v-for="label in board.labels" :key="label.id" class="filter--item">
+							<div v-for="label in labelsSorted" :key="label.id" class="filter--item">
 								<input
 									:id="label.id"
 									v-model="filter.tags"

src/components/card/CardSidebar.vue

@@ -46,10 +46,10 @@
 					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
 				</div>
 				<div class="section-details">
-					<Multiselect v-model="allLabels"
+					<Multiselect v-model="assignedLabels"
 						:multiple="true"
 						:disabled="!canEdit"
-						:options="currentBoard.labels"
+						:options="labelsSorted"
 						:placeholder="t('deck', 'Assign a tag to this card…')"
 						:taggable="true"
 						label="title"
@@ -266,7 +266,7 @@ export default {
 			assignedUsers: null,
 			addedLabelToCard: null,
 			copiedCard: null,
-			allLabels: null,
+			assignedLabels: null,
 			locale: getLocale(),
 
 			saving: false,
@@ -370,6 +370,9 @@ export default {
 		renderedDescription() {
 			return markdownIt.render(this.copiedCard.description || '')
 		},
+		labelsSorted() {
+			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
 	},
 	watch: {
 		currentCard() {
@@ -390,7 +393,7 @@ export default {
 			}
 
 			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
-			this.allLabels = this.currentCard.labels
+			this.assignedLabels = [...this.currentCard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 
 			if (this.currentCard.assignedUsers && this.currentCard.assignedUsers.length > 0) {
 				this.assignedUsers = this.currentCard.assignedUsers.map((item) => ({

src/components/cards/CardItem.vue

@@ -60,7 +60,7 @@
 				tag="ul"
 				class="labels"
 				@click="openCard">
-				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+				<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
 					<span @click="applyLabelFilter(label)">{{ label.title }}</span>
 				</li>
 			</transition-group>
@@ -126,7 +126,9 @@ export default {
 		currentCard() {
 			return this.card && this.$route && this.$route.params.cardId === this.card.id
 		},
-
+		labelsSorted() {
+			return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
 	},
 	methods: {
 		openCard() {