feat: #2906 add card ID badge

- adds vscode settings file to gitingore
- adds new badge for card ID
- adds card ID to board filter
- adds settings to disable card ID badge

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

src/components/cards/CardBadges.vue

@@ -22,6 +22,7 @@
 
 <template>
 	<div v-if="card" class="badges">
+		<CardId v-if="idBadge" class="icon-badge" :card="card" />
 		<div v-if="card.commentsCount > 0"
 			v-tooltip="commentsHint"
 			class="icon-badge"
@@ -50,6 +51,7 @@
 </template>
 <script>
 import NcAvatarList from './AvatarList.vue'
+import CardId from './badges/CardId.vue'
 import CardMenu from './CardMenu.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
@@ -59,7 +61,7 @@ import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
+	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon, CardId },
 	props: {
 		card: {
 			type: Object,
@@ -82,6 +84,9 @@ export default {
 			}
 			return null
 		},
+		idBadge() {
+			return this.$store.getters.config('cardIdBadge')
+		},
 	},
 	methods: {
 		openComments() {
@@ -103,7 +108,8 @@ export default {
 			display: flex;
 			margin-right: 2px;
 
-			span {
+			span,
+			&::v-deep span {
 				padding: 10px 2px;
 			}
 		}

src/components/cards/CardItem.vue

@@ -74,6 +74,7 @@
 					<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
 				</li>
 			</transition-group>
+
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
 				<CardBadges :card="card" />
 			</div>

src/components/cards/badges/CardId.vue

@@ -0,0 +1,46 @@
+<!--
+	- @copyright Copyright (c) 2022 Adrian Missy <adrian.missy@onewavestudios.com>
+	-
+	- @author Adrian Missy <adrian.missy@onewavestudios.com>
+	-
+	- @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 v-if="card" class="cardid">
+		<span>#{{ card.id }}</span>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'CardId',
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.cardid {
+		font-size: .9em;
+	}
+</style>

src/components/navigation/AppNavigation.vue

@@ -72,6 +72,16 @@
 						</label>
 					</div>
 
+					<div>
+						<input id="toggle-idbadge"
+							v-model="cardIdBadge"
+							type="checkbox"
+							class="checkbox">
+						<label for="toggle-idbadge">
+							{{ t('deck', 'Show card ID badge') }}
+						</label>
+					</div>
+
 					<div>
 						<input id="toggle-calendar"
 							v-model="configCalendar"
@@ -168,6 +178,14 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		cardIdBadge: {
+			get() {
+				return this.$store.getters.config('cardIdBadge')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardIdBadge: newValue })
+			},
+		},
 		configCalendar: {
 			get() {
 				return this.$store.getters.config('calendar')