Our flexible Kanban board for managing tasks with drag drop


Post by ghulam.ghous »

Hello,

About the ticket timeframe, not sure but I believe it is going to take some time. I have already assigned it to me and will get to it as soon as possible.

I am also able to see some inconsistencies with the approach that I have mentioned to you. I have another suggestion that you can try. Set autoAssignWeight: false on taskstore. Then you can assign the weights manually in data and it will work according to your needs. But as I mentioned earlier, you will also need to set the below config to true: https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskDrag#config-reorderTaskRecords


Post by stewart_wo »

Thanks for your reply.

We can use this setting but challenge here is to calculate different weights in particular column like, min, max and weight of above and bottom if task is inserted in between.

If you guys have APIs for the same then it would be easy to call these APIs and get the values. I don't want to write too much logic for the same which may mess overall code just because of this functionality.


Post by johan.isaksson »

Hi,

I have read through the thread and before we venture deeper into weights etc. I'd like to take a step back and try to understand your use-case properly. Please pretend there are no weights, and describe what you want to achieve.

Best regards,
Johan Isaksson

Post by stewart_wo »

Hi Johan,

Although this has been mentioned in previous thread as well but let me reiterate the problem statement. I want to push recent task to the top of the identified column but when user drag and drop then I want to maintain the order as it is.

Hope that explains.


Post by johan.isaksson »

And with recent task you mean a task that is added in the UI? Or some recent tasks in your dataset?

Best regards,
Johan Isaksson

Post by stewart_wo »

Recent task in my dataset. We push the record through some different page and save this into database. When Bryntum Taskboard loads then this record/task should come at the top of the column.


Post by johan.isaksson »

Understood. And how can that be determined in the dataset, by the task order? Or do you pass weights from your backend? Or by some timestamp?

I will probably help me better help you if you can share a small dataset, with some info on how you want it to be displayed. I can then try and make you a small demo that does what you want

Best regards,
Johan Isaksson

Post by stewart_wo »

yes, we pass weight from the backend using tickcount of date and time. By that we assign very high weight to newly created task so that it always comes to the top of the column.

We will share you the dataset as well soon.


Post by johan.isaksson »

Ok will wait for the dataset and then see how I can help

Best regards,
Johan Isaksson

Post by stewart_wo »

We are providing a demo dataset to test our requirements. In the code, we added an extra field 'weight' and arranged the data to show in descending order by weight.

If a new task is created from the Kanban page or comes from another page, in both scenarios, the task will be shown at the top. We try to give high weight to tasks in both cases.

app.data.ts file

export const projectData = {

tasks : [
    { id : 1, name : 'Book flight', status : 'done', prio : 'medium', weight: 100 },
    { id : 2, name : 'Book hotel', status : 'done', prio : 'medium', weight: 200 },
    { id : 3, name : 'Pack bags', status : 'doing', prio : 'low', weight: 300 },
    { id : 4, name : 'Get visa', status : 'doing', prio : 'high', weight: 400 },
    { id : 5, name : 'Book train', status : 'done', prio : 'medium', weight: 500 },
    { id : 6, name : 'Go to airport', status : 'todo', prio : 'low', weight: 600 },
    { id : 7, name : 'Renew passport', status : 'todo', prio : 'high', weight: 700 },
    { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium', weight: 800 },
    { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium', weight: 900 },
    { id : 10, name : 'Canyoning', status : 'todo', prio : 'low', weight: 1000 },
    { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium', weight: 1100 },
    { id : 12, name : 'Diving license', status : 'todo', prio : 'medium', weight: 1200 },
    { id : 13, name : 'Book cab', status : 'done', prio : 'low', weight: 1300 },
    { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium', weight: 1400 },
    { id : 15, name : 'Take pictures', status : 'todo', prio : 'low', weight: 1500 },
    { id : 16, name : 'Take selfies', status : 'todo', prio : 'high', weight: 1600 },
    { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium', weight: 1700 },
    { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium', weight: 1800 },
    { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high', weight: 1900 },
    { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium', weight: 2000 },
    { id : 21, name : 'Iron shirts', status : 'done', prio : 'low', weight: 2100 }
],

resources : [
    { id : 1, name : 'Angelo', image : 'angelo.jpg' },
    { id : 2, name : 'Celia', image : 'celia.jpg' },
    { id : 3, name : 'Dave', image : 'dave.jpg' },
    { id : 4, name : 'Emilia', image : 'emilia.jpg' },
    { id : 5, name : 'Gloria', image : 'gloria.jpg' },
    { id : 6, name : 'Henrik', image : 'henrik.jpg' },
    { id : 7, name : 'Kate', image : 'kate.jpg' },
    { id : 8, name : 'Lee', image : 'lee.jpg' },
    { id : 9, name : 'Lisa', image : 'lisa.jpg' },
    { id : 10, name : 'Mark', image : 'mark.jpg' },
    { id : 11, name : 'Steve', image : 'steve.jpg' }
],

assignments : [
    { id : 1, event : 7, resource : 1 },
    { id : 2, event : 7, resource : 2 },
    { id : 3, event : 8, resource : 2 },
    { id : 4, event : 4, resource : 3 },
    { id : 5, event : 7, resource : 3 },
    { id : 6, event : 7, resource : 4 },
    { id : 7, event : 7, resource : 5 },
    { id : 8, event : 7, resource : 6 },
    { id : 9, event : 7, resource : 7 },
    { id : 10, event : 7, resource : 8 },
    { id : 11, event : 7, resource : 9 },
    { id : 12, event : 7, resource : 10 },
    { id : 13, event : 7, resource : 11 },
    { id : 14, event : 16, resource : 7 },
    { id : 15, event : 16, resource : 8 },
    { id : 16, event : 16, resource : 9 },
    { id : 17, event : 16, resource : 10 },
    { id : 18, event : 16, resource : 11 },
    { id : 19, event : 19, resource : 10 },
    { id : 20, event : 9, resource : 7 },
    { id : 21, event : 12, resource : 8 },
    { id : 22, event : 14, resource : 9 },
    { id : 23, event : 17, resource : 10 },
    { id : 24, event : 18, resource : 10 },
    { id : 25, event : 11, resource : 9 },
    { id : 26, event : 20, resource : 8 },
    { id : 27, event : 1, resource : 7 },
    { id : 28, event : 2, resource : 6 },
    { id : 29, event : 5, resource : 5 },
    { id : 30, event : 6, resource : 4 },
    { id : 31, event : 10, resource : 3 },
    { id : 32, event : 15, resource : 2 },
    { id : 33, event : 3, resource : 1 },
    { id : 34, event : 13, resource : 2 },
    { id : 35, event : 21, resource : 3 },
    { id : 36, event : 8, resource : 3 },
    { id : 37, event : 17, resource : 9 },
    { id : 38, event : 17, resource : 8 },
    { id : 39, event : 17, resource : 7 },
    { id : 40, event : 17, resource : 6 }
]
};

component file code

import {
    Component,
    ViewChild,
    AfterViewInit,
    ViewEncapsulation,
} from "@angular/core";
import {
    BryntumTaskBoardComponent,
    BryntumTaskBoardProjectModelComponent,
} from "@bryntum/taskboard-angular";
import { TaskBoard } from "@bryntum/taskboard";

import { taskBoardProps } from "./app.config";
import { projectData } from "./app.data";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements AfterViewInit {
    taskBoardProps = taskBoardProps;
    projectData = projectData;

// Bryntum TaskBoard Angular wrapper reference
@ViewChild(BryntumTaskBoardComponent, { static: false })
taskBoardComponent!: BryntumTaskBoardComponent;
@ViewChild(BryntumTaskBoardProjectModelComponent, { static: true })
project!: BryntumTaskBoardProjectModelComponent;

private taskBoard!: TaskBoard;

ngAfterViewInit(): void {
    this.taskBoard = this.taskBoardComponent.instance;
    //@ts-ignore
    this.taskBoard.project.taskStore.addSorter({
        field: "weight",
        ascending: false,
    });
}
}

You can download this example and update the code.
https://bryntum.com/products/taskboard/examples/frameworks/angular/inline-data/dist/inline-data/


Post Reply