Feat: Highlight cards with important labels

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
This commit is contained in:
Kostiantyn Miakshyn
2025-09-07 16:58:30 +02:00
parent 4a879ab1fb
commit bbe72b93d9
14 changed files with 186 additions and 41 deletions

View File

@@ -212,28 +212,32 @@ Returns an array of board items
"color": "31CC7C",
"boardId": 10,
"cardId": null,
"id": 37
"id": 37,
"customSettings": {}
},
{
"title": "To review",
"color": "317CCC",
"boardId": 10,
"cardId": null,
"id": 38
"id": 38,
"customSettings": {}
},
{
"title": "Action needed",
"color": "FF7A66",
"boardId": 10,
"cardId": null,
"id": 39
"id": 39,
"customSettings": { "isImportant": true }
},
{
"title": "Later",
"color": "F1DB50",
"boardId": 10,
"cardId": null,
"id": 40
"id": 40,
"customSettings": {}
}
],
"acl": [],
@@ -282,28 +286,32 @@ A 403 response might be returned if the users ability to create new boards has b
"color": "31CC7C",
"boardId": "10",
"cardId": null,
"id": 37
"id": 37,
"customSettings": {}
},
{
"title": "To review",
"color": "317CCC",
"boardId": "10",
"cardId": null,
"id": 38
"id": 38,
"customSettings": {}
},
{
"title": "Action needed",
"color": "FF7A66",
"boardId": "10",
"cardId": null,
"id": 39
"id": 39,
"customSettings": {}
},
{
"title": "Later",
"color": "F1DB50",
"boardId": "10",
"cardId": null,
"id": 40
"id": 40,
"customSettings": {}
}
],
"acl": [],
@@ -867,7 +875,8 @@ The request can fail with a bad request response for the following reasons:
"color": "31CC7C",
"boardId": "2",
"cardId": null,
"id": 5
"id": 5,
"customSettings": { "isImportant": false }
}
```
@@ -875,16 +884,18 @@ The request can fail with a bad request response for the following reasons:
#### Request parameters
| Parameter | Type | Description |
| --------- | ------- | ---------------------------------------- |
| boardId | Integer | The id of the board the label belongs to |
| Parameter | Type | Description |
|----------------|---------|------------------------------------------------------------------------------|
| boardId | Integer | The id of the board the label belongs to |
| customSettings | Object | An key-value structure, currently supported only bool property `isImportant` |
#### Request data
```json
{
"title": "Finished",
"color": "31CC7C"
"color": "31CC7C",
"customSettings": { "isImportant": false }
}
```
@@ -896,10 +907,11 @@ The request can fail with a bad request response for the following reasons:
#### Request parameters
| Parameter | Type | Description |
| --------- | ------- | ---------------------------------------- |
| boardId | Integer | The id of the board the label belongs to |
| labelId | Integer | The id of the label |
| Parameter | Type | Description |
| --------- | ------- |-----------------------------------------------------------------------------------|
| boardId | Integer | The id of the board the label belongs to |
| labelId | Integer | The id of the label |
| customSettings | Object | An key-value structure, currently supported only bool property `isImportant` |
#### Request data
@@ -907,7 +919,8 @@ The request can fail with a bad request response for the following reasons:
```json
{
"title": "Finished",
"color": "31CC7C"
"color": "31CC7C",
"customSettings": { }
}
```

View File

@@ -50,10 +50,12 @@ class LabelApiController extends ApiController {
*
* @params $title
* @params $color
* @param array<string, scalar> $customSettings
*
* Create a new label
*/
public function create($title, $color) {
$label = $this->labelService->create($title, $color, $this->request->getParam('boardId'));
public function create($title, $color, array $customSettings = []) {
$label = $this->labelService->create($title, $color, $this->request->getParam('boardId'), $customSettings);
return new DataResponse($label, HTTP::STATUS_OK);
}
@@ -64,10 +66,12 @@ class LabelApiController extends ApiController {
*
* @params $title
* @params $color
* @param array<string, scalar> $customSettings
*
* Update a specific label
*/
public function update($title, $color) {
$label = $this->labelService->update($this->request->getParam('labelId'), $title, $color);
public function update($title, $color, array $customSettings = []) {
$label = $this->labelService->update($this->request->getParam('labelId'), $title, $color, $customSettings);
return new DataResponse($label, HTTP::STATUS_OK);
}

View File

@@ -25,10 +25,11 @@ class LabelController extends Controller {
* @param $title
* @param $color
* @param $boardId
* @param array<string, scalar> $customSettings
* @return \OCP\AppFramework\Db\Entity
*/
public function create($title, $color, $boardId) {
return $this->labelService->create($title, $color, $boardId);
public function create($title, $color, $boardId, array $customSettings = []) {
return $this->labelService->create($title, $color, $boardId, $customSettings);
}
/**
@@ -36,10 +37,11 @@ class LabelController extends Controller {
* @param $id
* @param $title
* @param $color
* @param array<string, scalar> $customSettings
* @return \OCP\AppFramework\Db\Entity
*/
public function update($id, $title, $color) {
return $this->labelService->update($id, $title, $color);
public function update($id, $title, $color, array $customSettings = []) {
return $this->labelService->update($id, $title, $color, $customSettings);
}
/**

View File

@@ -9,6 +9,8 @@ namespace OCA\Deck\Db;
/**
* @method getTitle(): string
* @method getCustomSettings(): string
* @method setCustomSettings(string $customSettings)
*/
class Label extends RelationalEntity {
protected $title;
@@ -16,15 +18,32 @@ class Label extends RelationalEntity {
protected $boardId;
protected $cardId;
protected $lastModified;
protected $customSettings;
public function __construct() {
$this->addType('id', 'integer');
$this->addType('boardId', 'integer');
$this->addType('cardId', 'integer');
$this->addType('lastModified', 'integer');
$this->addType('customSettings', 'string');
}
public function getETag() {
return md5((string)$this->getLastModified());
}
public function getCustomSettingsArray(): array {
return $this->customSettings ? json_decode($this->customSettings, true) : [];
}
public function setCustomSettingsArray(array $customSettings): void {
$this->setCustomSettings(json_encode($customSettings ?: new \stdClass()));
}
public function jsonSerialize(): array {
$data = parent::jsonSerialize();
$data['customSettings'] = $this->getCustomSettingsArray() ?: new \stdClass();
return $data;
}
}

View File

@@ -0,0 +1,32 @@
<?php
/**
* SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
declare(strict_types=1);
namespace OCA\Deck\Migration;
use Closure;
use OCP\DB\ISchemaWrapper;
use OCP\DB\Types;
use OCP\Migration\IOutput;
use OCP\Migration\SimpleMigrationStep;
class Version20000Date20250907000000 extends SimpleMigrationStep {
public function changeSchema(IOutput $output, Closure $schemaClosure, array $options): ?ISchemaWrapper {
/** @var ISchemaWrapper $schema */
$schema = $schemaClosure();
$table = $schema->getTable('deck_labels');
if (!$table->hasColumn('custom_settings')) {
$table->addColumn('custom_settings', Types::JSON, [
'notnull' => false,
]);
}
return $schema;
}
}

View File

@@ -340,7 +340,7 @@ class CardService {
// clone labels that are assigned to card but don't exist in new board
if (empty($filteredLabels)) {
if ($this->permissionService->getPermissions($boardId)[Acl::PERMISSION_MANAGE] === true) {
$newLabel = $this->labelService->create($label->getTitle(), $label->getColor(), $board->getId());
$newLabel = $this->labelService->create($label->getTitle(), $label->getColor(), $board->getId(), $label->getCustomSettingsArray());
$boardLabels[] = $label;
$this->assignLabel($card->getId(), $newLabel->getId());
}

View File

@@ -62,6 +62,7 @@ class LabelService {
* @param $title
* @param $color
* @param $boardId
* @param array<string, scalar> $customSettings
* @return \OCP\AppFramework\Db\Entity
* @throws StatusException
* @throws \OCA\Deck\NoPermissionException
@@ -69,7 +70,7 @@ class LabelService {
* @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
* @throws BadRequestException
*/
public function create($title, $color, $boardId) {
public function create($title, $color, $boardId, array $customSettings = []) {
$this->labelServiceValidator->check(compact('title', 'color', 'boardId'));
$this->permissionService->checkPermission(null, $boardId, Acl::PERMISSION_MANAGE);
@@ -89,6 +90,7 @@ class LabelService {
$label->setTitle($title);
$label->setColor($color);
$label->setBoardId($boardId);
$label->setCustomSettingsArray($customSettings);
$this->changeHelper->boardChanged($boardId);
return $this->labelMapper->insert($label);
}
@@ -99,7 +101,7 @@ class LabelService {
$originLabel = $this->find($labelId);
$filteredValues = array_values(array_filter($boardLabels, fn ($item) => $item->getTitle() === $originLabel->getTitle()));
if (empty($filteredValues)) {
$label = $this->create($originLabel->getTitle(), $originLabel->getColor(), $targetBoardId);
$label = $this->create($originLabel->getTitle(), $originLabel->getColor(), $targetBoardId, $originLabel->getCustomSettingsArray());
return $label;
}
return $originLabel;
@@ -130,6 +132,7 @@ class LabelService {
* @param $id
* @param $title
* @param $color
* @param array<string, scalar> $customSettings
* @return \OCP\AppFramework\Db\Entity
* @throws StatusException
* @throws \OCA\Deck\NoPermissionException
@@ -137,7 +140,7 @@ class LabelService {
* @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
* @throws BadRequestException
*/
public function update($id, $title, $color) {
public function update($id, $title, $color, array $customSettings = []) {
$this->labelServiceValidator->check(compact('title', 'color', 'id'));
$this->permissionService->checkPermission($this->labelMapper, $id, Acl::PERMISSION_MANAGE);
@@ -161,6 +164,7 @@ class LabelService {
$label->setTitle($title);
$label->setColor($color);
$label->setCustomSettingsArray($customSettings);
$this->changeHelper->boardChanged($label->getBoardId());
return $this->labelMapper->update($label);
}

View File

@@ -281,6 +281,7 @@ export default {
}
.board {
padding-left: $board-gap;
position: relative;
overflow-x: auto;
flex-grow: 1;

View File

@@ -7,6 +7,7 @@
<NcAppSidebar v-if="board != null"
:actions="[]"
:name="board.title"
style="width: 400px"
@close="closeSidebar">
<NcAppSidebarTab id="sharing"
:order="0"

View File

@@ -15,7 +15,11 @@
@input="updateColor">
<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
</NcColorPicker>
<input v-model="editingLabel.title" type="text">
<NcCheckboxRadioSwitch v-model="editingLabelIsImportant"
type="switch">
{{ t('deck', 'Important') }}
</NcCheckboxRadioSwitch>
<input v-model="editingLabel.title" type="text" style="margin-right: 20px;">
<input :disabled="!editLabelObjValidated"
type="submit"
value=""
@@ -34,10 +38,18 @@
</template>
<template v-else>
<div v-if="canManage && !isArchived" class="label-title" @click="clickEdit(label)">
<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
<span :style="{
backgroundColor: `#${label.color}`,
color: textColor(label.color),
fontWeight: label.customSettings.isImportant ? 'bold' : 'normal'
}">{{ label.title }}</span>
</div>
<div v-else class="label-title">
<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
<span :style="{
backgroundColor: `#${label.color}`,
color: textColor(label.color),
fontWeight: label.customSettings.isImportant ? 'bold' : 'normal'
}">{{ label.title }}</span>
</div>
<NcActions v-if="canManage && !isArchived">
@@ -62,7 +74,11 @@
@input="updateColor">
<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
</NcColorPicker>
<input v-model="addLabelObj.title" type="text">
<NcCheckboxRadioSwitch v-model="addLabelIsImportant"
type="switch">
{{ t('deck', 'Important') }}
</NcCheckboxRadioSwitch>
<input v-model="addLabelObj.title" type="text" style="margin-right: 20px;">
<input :disabled="!addLabelObjValidated"
type="submit"
value=""
@@ -88,7 +104,7 @@
import { mapGetters } from 'vuex'
import Color from '../../mixins/color.js'
import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
import { NcColorPicker, NcActions, NcActionButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
export default {
name: 'TagsTabSidebar',
@@ -96,6 +112,7 @@ export default {
NcColorPicker,
NcActions,
NcActionButton,
NcCheckboxRadioSwitch,
},
mixins: [Color],
data() {
@@ -139,7 +156,22 @@ export default {
labelsSorted() {
return [...this.labels].sort((a, b) => a.title.localeCompare(b.title))
},
addLabelIsImportant: {
get() {
return this.addLabelObj?.customSettings?.isImportant || false
},
set(isImportant) {
this.addLabelObj.customSettings = { ...this.addLabelObj.customSettings, isImportant }
},
},
editingLabelIsImportant: {
get() {
return this.editingLabel?.customSettings?.isImportant
},
set(isImportant) {
this.editingLabel.customSettings = { ...this.editingLabel.customSettings, isImportant }
},
},
},
methods: {
updateColor(c) {
@@ -157,15 +189,23 @@ export default {
this.$store.dispatch('removeLabelFromCurrentBoard', id)
},
updateLabel(label) {
this.$store.dispatch('updateLabelFromCurrentBoard', this.editingLabel)
const payload = {
...this.editingLabel,
customSettings: { ...this.editingLabel.customSettings },
}
this.$store.dispatch('updateLabelFromCurrentBoard', payload)
this.editingLabelId = null
},
clickShowAddLabel() {
this.addLabelObj = { cardId: null, color: this.defaultColors[Math.floor(Math.random() * this.defaultColors.length)], title: '' }
this.addLabelObj = { cardId: null, color: this.defaultColors[Math.floor(Math.random() * this.defaultColors.length)], title: '', customSettings: {} }
this.addLabel = true
},
clickAddLabel() {
this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
const payload = {
...this.addLabelObj,
customSettings: { ...this.addLabelObj.customSettings },
}
this.$store.dispatch('addLabelToCurrentBoard', payload)
this.addLabel = false
this.addLabelObj = null
},

View File

@@ -6,10 +6,19 @@
<template>
<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
<div :ref="`card${card.id}`"
:class="{'compact': compactMode, 'current-card': currentCard, 'no-labels': !hasLabels, 'card__editable': canEdit, 'card__archived': card.archived, 'card__highlight': highlight}"
:class="{
'compact': compactMode,
'current-card': currentCard,
'no-labels': !hasLabels,
'card__editable': canEdit,
'card__archived': card.archived,
'card__highlight': highlight,
'card__important': !!importantColor,
}"
tag="div"
:tabindex="0"
class="card"
:style="{'box-shadow': importantColor ? `-5px 0px 0px 0px ${importantColor}` : null}"
@click="openCard"
@keyup.self="handleCardKeyboardShortcut"
@mouseenter="focus(card.id)">
@@ -133,6 +142,14 @@ export default {
currentBoard: state => state.currentBoard,
showCardCover: state => state.showCardCover,
shortcutLock: state => state.shortcutLock,
importantColor() {
for (const label of this.card.labels) {
if (label.customSettings.isImportant) {
return '#' + label.color
}
}
return null
},
}),
...mapGetters([
'isArchived',
@@ -421,6 +438,10 @@ export default {
&.card__highlight {
animation: highlight 2s;
}
&:not(.card__important) {
box-shadow: -5px 0px 0px 0px var(--color-main-background);
}
.card-labels {
display: flex;
align-items: end;

View File

@@ -272,6 +272,7 @@ export default new Vuex.Store({
labelToUpdate.title = newLabel.title
labelToUpdate.color = newLabel.color
labelToUpdate.customSettings = newLabel.customSettings
},
addLabelToCurrentBoard(state, newLabel) {
state.currentBoard.labels.push(newLabel)

View File

@@ -45,11 +45,13 @@ class LabelTest extends TestCase {
'lastModified' => null,
'color' => '000000',
'ETag' => $label->getETag(),
'customSettings' => new \stdClass(),
], $label->jsonSerialize());
}
public function testJsonSerializeCard() {
$label = $this->createLabel();
$label->setCardId(123);
$label->setCustomSettingsArray(['isImportant' => true]);
$this->assertEquals([
'id' => 1,
'title' => 'My Label',
@@ -58,6 +60,7 @@ class LabelTest extends TestCase {
'lastModified' => null,
'color' => '000000',
'ETag' => $label->getETag(),
'customSettings' => ['isImportant' => true]
], $label->jsonSerialize());
}
}

View File

@@ -75,14 +75,16 @@ class LabelServiceTest extends TestCase {
$label->setTitle('Label title');
$label->setBoardId(123);
$label->setColor('00ff00');
$label->setCustomSettingsArray(['isImportant' => true]);
$this->labelMapper->expects($this->once())
->method('insert')
->willReturn($label);
$b = $this->labelService->create('Label title', '00ff00', 123);
$b = $this->labelService->create('Label title', '00ff00', 123, ['isImportant' => true]);
$this->assertEquals($b->getTitle(), 'Label title');
$this->assertEquals($b->getBoardId(), 123);
$this->assertEquals($b->getColor(), '00ff00');
$this->assertEquals($b->getCustomSettingsArray(), ['isImportant' => true]);
}
@@ -111,6 +113,7 @@ class LabelServiceTest extends TestCase {
$label->setId(1);
$label->setTitle('title');
$label->setColor('00ff00');
$label->setCustomSettingsArray(['isImportant' => true]);
$this->labelMapper->expects($this->once())
->method('find')
->willReturn($label);
@@ -119,6 +122,7 @@ class LabelServiceTest extends TestCase {
$expectedLabel->setTitle('title');
$expectedLabel->setColor('00ff00');
$expectedLabel->setBoardId(1);
$expectedLabel->setCustomSettingsArray(['isImportant' => true]);
$this->labelMapper->expects($this->once())
->method('insert')
->with($expectedLabel)