Merge pull request #4156 from oneWaveAdrian/2906-visual-card-id

feat: #2906 add card ID badge

.gitignore

@@ -9,3 +9,4 @@ tests/.phpunit.result.cache
 vendor/
 .php_cs.cache
 \.idea/
+settings.json

docs/API.md

@@ -1066,6 +1066,7 @@ Deck stores user and app configuration values globally and per board. The GET en
 | --- | --- |
 | calendar | Determines if the calendar/tasks integration through the CalDAV backend is enabled for the user (boolean) | 
 | cardDetailsInModal | Determines if the bigger view is used (boolean) | 
+| cardIdBadge | Determines if the ID badges are displayed on cards (boolean) | 
 | groupLimit | Determines if creating new boards is limited to certain groups of the instance. The resulting output is an array of group objects with the id and the displayname (Admin only)|  
 
 ```
@@ -1079,6 +1080,7 @@ Deck stores user and app configuration values globally and per board. The GET en
     "data": {
       "calendar": true,
       "cardDetailsInModal": true,
+      "cardIdBadge": true,
       "groupLimit": [
         {
           "id": "admin",
@@ -1109,6 +1111,7 @@ Deck stores user and app configuration values globally and per board. The GET en
 | notify-due | `off`, `assigned` or `all` |
 | calendar | Boolean |
 | cardDetailsInModal | Boolean |
+| cardIdBadge | Boolean |
 
 #### Example request
 

lib/Service/ConfigService.php

@@ -71,6 +71,7 @@ public function getAll(): array {
 		$data = [
 			'calendar' => $this->isCalendarEnabled(),
 			'cardDetailsInModal' => $this->isCardDetailsInModal(),
+			'cardIdBadge' => $this->isCardIdBadgeEnabled()
 		];
 		if ($this->groupManager->isAdmin($this->getUserId())) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -100,6 +101,11 @@ public function get(string $key) {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardDetailsInModal', true);
+			case 'cardIdBadge':
+				if ($this->getUserId() === null) {
+					return false;
+				}
+				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
 		}
 		return false;
 	}
@@ -131,6 +137,16 @@ public function isCardDetailsInModal(int $boardId = null): bool {
 		return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'board:' . $boardId . ':cardDetailsInModal', $defaultState);
 	}
 
+	public function isCardIdBadgeEnabled(): bool {
+		if ($this->getUserId() === null) {
+			return false;
+		}
+		$appConfigState = $this->config->getAppValue(Application::APP_ID, 'cardIdBadge', 'yes') === 'no';
+		$defaultState = (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', $appConfigState);
+
+		return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', $defaultState);
+	}
+
 	public function set($key, $value) {
 		if ($this->getUserId() === null) {
 			throw new NoPermissionException('Must be logged in to set user config');
@@ -153,6 +169,10 @@ public function set($key, $value) {
 				$this->config->setUserValue($this->getUserId(), Application::APP_ID, 'cardDetailsInModal', (string)$value);
 				$result = $value;
 				break;
+			case 'cardIdBadge':
+				$this->config->setUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				[$boardId, $boardConfigKey] = explode(':', $key);
 				if ($boardConfigKey === 'notify-due' && !in_array($value, [self::SETTING_BOARD_NOTIFICATION_DUE_ALL, self::SETTING_BOARD_NOTIFICATION_DUE_ASSIGNED, self::SETTING_BOARD_NOTIFICATION_DUE_OFF], true)) {

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 <[email protected]>
+	-
+	- @author Adrian Missy <[email protected]>
+	-
+	- @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')

src/store/card.js

@@ -183,7 +183,7 @@ export default {
 							}) !== -1
 						} else {
 							hasMatch = hasMatch && (card.title.toLowerCase().includes(filterOutQuotes(match).toLowerCase())
-								|| card.description.toLowerCase().includes(filterOutQuotes(match).toLowerCase()))
+								|| card.description.toLowerCase().includes(filterOutQuotes(match).toLowerCase()) || card.id === parseInt(filterOutQuotes(match)))
 						}
 						if (!hasMatch) {
 							return false