From 7c0403bfc9acbc9f6e9407d34bc865a772d842d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Mon, 7 Sep 2020 14:24:48 +0200
Subject: [PATCH] sort tags in filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/components/Controls.vue         |  2 +-
 src/components/card/CardSidebar.vue | 11 +++++++----
 src/components/cards/CardItem.vue   |  6 ++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 8320c7256..3830056fd 100644
--- a/src/components/Controls.vue
+++ b/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"
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index deee23875..4e59fd6b9 100644
--- a/src/components/card/CardSidebar.vue
+++ b/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"
@@ -265,7 +265,7 @@ export default {
 			assignedUsers: null,
 			addedLabelToCard: null,
 			copiedCard: null,
-			allLabels: null,
+			assignedLabels: null,
 			locale: getLocale(),
 
 			saving: false,
@@ -369,6 +369,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() {
@@ -389,7 +392,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) => ({
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index fd74ec6d9..ef17f54da 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -56,7 +56,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>
@@ -122,7 +122,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() {