Moving Cards is not saved

[Berational91]

Describe the bug
If you have more than one board only movements of tasks in the first board is saved, when you're moving with drag&drop. On the Second board you can drag&drop, but after refresh the cards are in the old positions. The only way to move tasks in the second board is to edit the card and choose the column you want.

I've looked in the Debugger and you get this error, when you move the cards.

The reason for this is, that the ids of the colums are incremental and the increment is shared across boards.

Here you can see how the code is trying to get the column-object:

• It get's the colId (which is only in the first board in the range of [0,ColumnCount-1])
• tries to get column object from array, which expects an index in the range of [0,ColumnCount-1]
• The problem: Since the Id's are incremental across all boards, the ids on the second board are not starting at 0, so you are out of the index of the array and the const column is undefined.

To Reproduce
Steps to reproduce the behavior:

1. Create two boards, with some columns
2. Move Tasks in first Board, reload page (will work)
3. Move Tasks in second Board, reload page (will not work)

[colebaty]

Hello @Berational91! I'm having the same issue you reported. I was gonna take a look into this but I wanted to check first to see if you'd made any progress.

[colebaty]

I think making the changes below should fix this problem. This is in src/app/board/column/column.component.ts beginning at line 298. My webdev foo is weak so I haven't been able to figure out how to test this yet - any pointers would be appreciated.

//currently in v1.0.2
    const colId = event.container.id.substr(3) as unknown as number - 1;
    const column = this.activeBoard.columns[colId];

//suggested changes
    const colId = event.container.id.substr(3) as unknown as number ;
    const column = this.activeBoard.columns[
      this.activeBoard.columns.findIndex(column => {
        return column.id == colId;
    )}];

Proof of concept:

As @Berational91 identified earlier, the issue has to do with indexing the columns for a given board. this.activeBoard.columns is an array indexed from [0, n-1], n = number of columns. However, event.container.id is a string that looks like colX, where X is the column ID.

this.activeboard.columns

Column IDs are assigned globally and incrementally. Consider a brand new installation. First we create the first board, with three columns. If we visit each column, the value of event.container.id will be col1, col2, and col3, respectively. Next, create the second board, again with three columns. These columns have IDs of col4, col5, and col6.

Return to the first board, and create a fourth column. This column will have the ID of col7, but in this.activeBoard.columns, it will have an index of 3. In the original code, colId will have the value 6, but 6 is out of bounds for the this.activeBoard.columns array, which only has four elements in it. This is the error.

Since the column IDs are unique, however, we can use Array.findIndex() for the column lookup.

[colebaty]

@kiswa Is there any possibility this change could be tested? I've been trying most of the last week to get a working dev environment, mostly using the Dockerfile provided on the dev branch, but I'm not having much luck. I suspect enough time has passed since the last release that the package dependencies have grown fatally out-of-date.

Here's what I've been trying to get the Docker build off the ground locally. I've been trying to manually source some of the docker images based on the date of the last release (September 2020). Here's the Dockerfile I've been using, and the error messages from when it fails. Any insight here would be appreciated.

Dockerfile

# -------------------
# Build Stage 1 (npm)
# -------------------
#FROM node:alpine AS appbuild
FROM node:14.8-alpine AS appbuild

RUN apk add --update --no-cache p7zip

WORKDIR /usr/src/app

COPY ./package.json ./
RUN npm install

COPY . ./
RUN npm run build:prod
#RUN npm run watch
#RUN npm run build:dev
#RUN npm run build


# ------------------------
# Build Stage 2 (composer)
# ------------------------
#FROM composer AS apibuild
FROM composer:1.10.12 AS apibuild

WORKDIR /app

COPY ./src/api ./
RUN composer install


# --------------------------
# Build Stage 3 (php-apache)
# This build takes the production build from staging builds
# --------------------------
# php7.3 is no longer available in the apt repos; my local 'prod' instance
# runs fine with 7.4, though, and this throws no errors in the build process
#FROM php:7.3-apache 
FROM php:7.4-apache

ENV PROJECT /var/www/html

RUN apt-get update && apt-get install -y sqlite3 php7.4-sqlite
#RUN apt-get update && apt-get install -y sqlite3 php7.3-sqlite
RUN a2enmod rewrite expires
# RUN docker-php-ext-install pdo_mysql

# RUN pecl install xdebug && docker-php-ext-enable xdebug
# COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

WORKDIR $PROJECT
COPY --from=appbuild /usr/src/app/dist ./
RUN rm -rf ./api/*
COPY --from=apibuild /app ./api/
RUN chmod 777 ./api
EXPOSE 80

errors

# ...a bunch of deprecation warnings
#0 8.657 DeprecationWarning: 'createFunctionExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
#0 8.657 DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
#0 8.676 Error: Error on worker #1: Error: Debug Failure. Unhandled SyntaxKind: Unknown.
#0 8.676     at pipelineEmitWithHintWorker (/usr/src/app/node_modules/typescript/lib/typescript.js:114185:22)
#0 8.676     at pipelineEmitWithHint (/usr/src/app/node_modules/typescript/lib/typescript.js:113716:17)
#0 8.676     at pipelineEmitWithComments (/usr/src/app/node_modules/typescript/lib/typescript.js:117404:13)
#0 8.676     at pipelineEmit (/usr/src/app/node_modules/typescript/lib/typescript.js:113656:13)
#0 8.676     at emit (/usr/src/app/node_modules/typescript/lib/typescript.js:113629:13)
#0 8.676     at emitParameter (/usr/src/app/node_modules/typescript/lib/typescript.js:114422:13)
#0 8.676     at pipelineEmitWithHintWorker (/usr/src/app/node_modules/typescript/lib/typescript.js:113765:32)
#0 8.676     at pipelineEmitWithHint (/usr/src/app/node_modules/typescript/lib/typescript.js:113716:17)
#0 8.676     at pipelineEmitWithComments (/usr/src/app/node_modules/typescript/lib/typescript.js:117404:13)
#0 8.676     at pipelineEmit (/usr/src/app/node_modules/typescript/lib/typescript.js:113656:13)
#0 8.676     at ClusterMaster.onWorkerMessage (/usr/src/app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:195:27)
#0 8.676     at /usr/src/app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:55:95
#0 8.676     at ClusterMaster.<anonymous> (/usr/src/app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:293:57)
#0 8.676     at step (/usr/src/app/node_modules/tslib/tslib.js:193:27)
#0 8.676     at Object.next (/usr/src/app/node_modules/tslib/tslib.js:174:57)
#0 8.676     at /usr/src/app/node_modules/tslib/tslib.js:167:75
#0 8.676     at new Promise (<anonymous>)
#0 8.676     at Object.__awaiter (/usr/src/app/node_modules/tslib/tslib.js:163:16)
#0 8.676     at EventEmitter.<anonymous> (/usr/src/app/node_modules/@angular/compiler-cli/ngcc/src/execution/cluster/master.js:287:32)
#0 8.676     at EventEmitter.emit (events.js:314:20)
#0 8.690 An unhandled exception occurred: NGCC failed.
#0 8.690 See "/tmp/ng-OJnIoL/angular-errors.log" for further details.
#0 8.705 npm ERR! code ELIFECYCLE
#0 8.706 npm ERR! syscall spawn
#0 8.706 npm ERR! file sh
#0 8.706 npm ERR! errno ENOENT
#0 8.707 npm ERR! taskboard@1.0.2 build: `ng b --output-hashing=none`
#0 8.708 npm ERR! spawn ENOENT
#0 8.708 npm ERR!
#0 8.708 npm ERR! Failed at the taskboard@1.0.2 build script.
#0 8.708 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#0 8.741
#0 8.741 npm ERR! A complete log of this run can be found in:
#0 8.741 npm ERR!     /root/.npm/_logs/2023-04-17T00_34_17_210Z-debug.log
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1