Add new cards to top or bottom

cypress/e2e/cardColor.js

@@ -46,7 +46,7 @@ describe('Card color', function () {
 
 		const newCardTitle = 'Card with color'
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 		cy.get('.stack__card-add form input#new-stack-input-main')
 			.type(newCardTitle)

cypress/e2e/cardFeatures.js

@@ -25,6 +25,17 @@ const useModal = (useModal) => {
 	})
 }
 
+const addCardsAtTop = (enabled) => {
+	return cy.request({
+		method: 'POST',
+		url: `${Cypress.env('baseUrl')}/ocs/v2.php/apps/deck/api/v1.0/config/stackAddCardAtTop?format=json`,
+		auth,
+		body: { value: enabled },
+	}).then((response) => {
+		expect(response.status).to.eq(200)
+	})
+}
+
 describe('Card', function () {
 	let boardId
 	before(function () {
@@ -52,7 +63,7 @@ describe('Card', function () {
 		cy.get('.board .stack').eq(0).within(() => {
 			cy.get('.card:contains("Hello world")').should('be.visible')
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -63,13 +74,78 @@ describe('Card', function () {
 		})
 	})
 
+	describe('New card position', function() {
+		afterEach(function() {
+			addCardsAtTop(false)
+		})
+
+		it('Adds new cards to the configured side of the list', function() {
+			const bottomCardTitle = 'Card added at bottom'
+			const firstTopCardTitle = 'First card added at top'
+			const secondTopCardTitle = 'Second card added at top'
+			const finalBottomCardTitle = 'Card added at bottom again'
+
+			addCardsAtTop(false)
+			cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('createCard')
+			cy.intercept({ method: 'PUT', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards/*/reorder' }).as('reorderCard')
+			cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/config/stackAddCardAtTop' }).as('setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('[data-cy="action:add-card"]').click()
+				cy.get('.stack__card-add input[type="text"]').type(bottomCardTitle)
+				cy.get('.stack__card-add input[type="submit"]').click()
+				cy.wait('@createCard')
+				cy.get('.card').last().should('contain', bottomCardTitle)
+			})
+
+			cy.get('[data-cy="navigation:settings"]').click()
+			cy.get('[data-cy="setting:add-card-at-top"] input[role="switch"]').check({ force: true })
+			cy.wait('@setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+
+			for (const title of [firstTopCardTitle, secondTopCardTitle]) {
+				cy.get('.board .stack').eq(0).within(() => {
+					cy.get('[data-cy="action:add-card"]').click()
+					cy.get('.stack__card-add input[type="text"]').type(title)
+					cy.get('.stack__card-add input[type="submit"]').click()
+					cy.wait('@createCard')
+				})
+			}
+
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('.card').eq(0).should('contain', secondTopCardTitle)
+				cy.get('.card').eq(1).should('contain', firstTopCardTitle)
+			})
+			cy.get('@reorderCard.all').should('have.length', 0)
+
+			cy.reload()
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('.card').eq(0).should('contain', secondTopCardTitle)
+				cy.get('.card').eq(1).should('contain', firstTopCardTitle)
+			})
+
+			cy.get('[data-cy="navigation:settings"]').click()
+			cy.get('[data-cy="setting:add-card-at-top"] input[role="switch"]').uncheck({ force: true })
+			cy.wait('@setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('[data-cy="action:add-card"]').click()
+				cy.get('.stack__card-add input[type="text"]').type(finalBottomCardTitle)
+				cy.get('.stack__card-add input[type="submit"]').click()
+				cy.wait('@createCard')
+				cy.get('.card').last().should('contain', finalBottomCardTitle)
+			})
+		})
+	})
+
 	it('Create card from overview', function () {
 		cy.visit(`/apps/deck/#/`)
 		const newCardTitle = 'Test create from overview'
 		cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('save')
 		cy.intercept({ method: 'GET', url: '**/apps/deck/boards/*' }).as('getBoard')
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 
 		// Somehow this avoids the electron crash
@@ -98,7 +174,7 @@ describe('Card', function () {
 		cy.visit(`/apps/deck/#/board/${boardId}`)
 		const absoluteUrl = `https://example.com`
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -120,7 +196,7 @@ describe('Card', function () {
 		const absoluteUrl = `https://example.com`
 		const plainTitle = 'New title'
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -238,7 +314,9 @@ describe('Card', function () {
 			cy.visit(`/apps/deck/board/${boardId}`)
 			cy.reload()
 			cy.get('.board .stack').eq(0).within(() => {
-				cy.get(`.card:contains("${newCardTitle}")`).should('be.visible')
+				cy.get(`.card:contains("${newCardTitle}")`)
+					.scrollIntoView({ block: 'center' })
+					.should('be.visible')
 			})
 		})
 	})
@@ -260,7 +338,7 @@ describe('Card', function () {
 		it('Set a due date', function () {
 			const newCardTitle = 'Card with a due date'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
@@ -296,7 +374,7 @@ describe('Card', function () {
 		it('Add a label', function () {
 			const newCardTitle = 'Card with labels'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
@@ -316,7 +394,9 @@ describe('Card', function () {
 			cy.get('.vs__selected .tag:contains("Action needed")')
 				.parent().find('button').click()
 
-			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
+			cy.get(`.card:contains("${newCardTitle}")`)
+				.scrollIntoView({ block: 'center' })
+				.find('.labels li:contains("Later")')
 				.should('be.visible')
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
 				.should('not.exist')

cypress/e2e/sharingFeatures.js

@@ -32,7 +32,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -50,7 +50,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -71,7 +71,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 		})
 	})

lib/Controller/CardOcsController.php

@@ -21,6 +21,12 @@
 use OCP\IRequest;
 
 class CardOcsController extends OCSController {
+	/**
+	 * Sentinel order used when the client does not request a specific position.
+	 * Cards created with this order are appended to the end of the stack.
+	 */
+	private const DEFAULT_ORDER = 999;
+
 	public function __construct(
 		string $appName,
 		IRequest $request,
@@ -36,7 +42,7 @@ public function __construct(
 
 	#[NoAdminRequired]
 	#[PublicPage]
-	public function create(string $title, int $stackId, ?int $boardId = null, ?string $type = 'plain', ?string $owner = null, ?int $order = 999, ?string $description = '', $duedate = null, $startdate = null, ?array $labels = [], ?array $users = [], ?string $color = null) {
+	public function create(string $title, int $stackId, ?int $boardId = null, ?string $type = 'plain', ?string $owner = null, ?int $order = self::DEFAULT_ORDER, ?string $description = '', $duedate = null, $startdate = null, ?array $labels = [], ?array $users = [], ?string $color = null) {
 		if ($boardId) {
 			$board = $this->boardService->find($boardId, false);
 			if ($board->getExternalId()) {
@@ -48,7 +54,8 @@ public function create(string $title, int $stackId, ?int $boardId = null, ?strin
 		if (!$owner) {
 			$owner = $this->userId;
 		}
-		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color);
+		// An explicit order means the client wants the card at that position, so shift the surrounding cards
+		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== self::DEFAULT_ORDER);
 
 		// foreach ($labels as $label) {
 		// 	$this->assignLabel($card->getId(), $label);

lib/Service/CardService.php

@@ -30,6 +30,7 @@
 use OCP\Collaboration\Reference\IReferenceManager;
 use OCP\Comments\ICommentsManager;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IDBConnection;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserManager;
@@ -58,6 +59,7 @@ public function __construct(
 		private CardServiceValidator $cardServiceValidator,
 		private AssignmentService $assignmentService,
 		private IReferenceManager $referenceManager,
+		private IDBConnection $connection,
 		private ?string $userId,
 	) {
 	}
@@ -187,7 +189,7 @@ public function findCalendarEntries(int $boardId): array {
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws BadrequestException
 	 */
-	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null): Card {
+	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null, bool $insertAtPosition = false): Card {
 		$this->cardServiceValidator->check(compact('title', 'stackId', 'type', 'order', 'owner'));
 
 		$this->permissionService->checkPermission($this->stackMapper, $stackId, Acl::PERMISSION_EDIT);
@@ -204,7 +206,21 @@ public function create(string $title, int $stackId, string $type, int $order, st
 		$card->setDuedate($duedate);
 		$card->setStartdate($startdate);
 		$card->setColor($color);
-		$card = $this->cardMapper->insert($card);
+
+		if (!$insertAtPosition) {
+			$card = $this->cardMapper->insert($card);
+		} else {
+			// Insert at the requested position and shift the surrounding cards
+			$this->connection->beginTransaction();
+			try {
+				$card = $this->cardMapper->insert($card);
+				$this->reorderCards($card->getId(), $stackId, $order);
+				$this->connection->commit();
+			} catch (\Throwable $e) {
+				$this->connection->rollBack();
+				throw $e;
+			}
+		}
 
 		$this->activityManager->triggerEvent(ActivityManager::DECK_OBJECT_CARD, $card, ActivityManager::SUBJECT_CARD_CREATE, [], $card->getOwner());
 		$this->changeHelper->cardChanged($card->getId(), false);
@@ -467,6 +483,17 @@ public function reorder(int $id, int $stackId, int $order): array {
 		$changes->setAfter($card);
 		$this->activityManager->triggerUpdateEvents(ActivityManager::DECK_OBJECT_CARD, $changes, ActivityManager::SUBJECT_CARD_UPDATE);
 
+		$result = $this->reorderCards($id, $stackId, $order);
+		$this->changeHelper->cardChanged($id, false);
+		$this->eventDispatcher->dispatchTyped(new CardUpdatedEvent($card, $changes->getBefore()));
+
+		return $result;
+	}
+
+	/**
+	 * @return list<Card>
+	 */
+	private function reorderCards(int $id, int $stackId, int $order): array {
 		$cardsToReorder = $this->cardMapper->findAll($stackId);
 		$result = [];
 		$i = 0;
@@ -489,8 +516,6 @@ public function reorder(int $id, int $stackId, int $order): array {
 			$this->cardMapper->update($cardToReorder);
 			$result[$cardToReorder->getOrder()] = $cardToReorder;
 		}
-		$this->changeHelper->cardChanged($id, false);
-		$this->eventDispatcher->dispatchTyped(new CardUpdatedEvent($card, $changes->getBefore()));
 
 		return array_values($result);
 	}

lib/Service/ConfigService.php

@@ -52,7 +52,8 @@ public function getAll(): array {
 		$data = [
 			'calendar' => $this->isCalendarEnabled(),
 			'cardDetailsInModal' => $this->isCardDetailsInModal(),
-			'cardIdBadge' => $this->isCardIdBadgeEnabled()
+			'cardIdBadge' => $this->isCardIdBadgeEnabled(),
+			'stackAddCardAtTop' => $this->isStackAddCardAtTopEnabled()
 		];
 		if ($this->groupManager->isAdmin($userId)) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -134,6 +135,15 @@ public function isCardIdBadgeEnabled(): bool {
 		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'cardIdBadge', $defaultState);
 	}
 
+	public function isStackAddCardAtTopEnabled(): bool {
+		$userId = $this->getUserId();
+		if ($userId === null) {
+			return false;
+		}
+
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', false);
+	}
+
 	public function ensureFederationEnabled() {
 		if (!$this->get('federationEnabled')) {
 			throw new FederationDisabledException();
@@ -181,6 +191,10 @@ public function set($key, $value) {
 				$this->config->setUserValue($userId, Application::APP_ID, 'cardIdBadge', (string)$value);
 				$result = $value;
 				break;
+			case 'stackAddCardAtTop':
+				$this->config->setUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				// extra check that user only send one of the allowed board settings and not something random
 				$parts = explode(':', $key, 3);

src/components/Controls.vue

@@ -14,7 +14,7 @@
 				{{ overviewName }}
 			</h2>
 			<NcActions>
-				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
+				<NcActionButton data-cy="action:add-card" icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>

src/components/DeckAppSettings.vue

@@ -12,6 +12,9 @@
 			<NcFormBox>
 				<NcFormBoxSwitch v-model="cardDetailsInModal"
 					:label="t('deck', 'Use bigger card view')" />
+				<NcFormBoxSwitch v-model="stackAddCardAtTop"
+					data-cy="setting:add-card-at-top"
+					:label="t('deck', 'Add new cards at the top of a list')" />
 			</NcFormBox>
 		</NcAppSettingsSection>
 
@@ -119,6 +122,14 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop: {
+			get() {
+				return this.$store.getters.config('stackAddCardAtTop') === true
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
+			},
+		},
 		cardIdBadge: {
 			get() {
 				return this.$store.getters.config('cardIdBadge')

src/components/board/Board.vue

@@ -334,12 +334,11 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					$margin-x: calc($stack-gap * -1);
 					display: flex;
 					flex-direction: column;
 					gap: $stack-gap;
 					padding: $stack-gap;
-					margin: 0 $margin-x;
+					margin: 0 calc(#{$stack-gap} * -1);
 					overflow-y: auto;
 					scrollbar-gutter: stable;
 				}