Our flexible Kanban board for managing tasks with drag drop


Post by marcio »

Hey rodel.ocfemia,

We'll be waiting for your demo to assist you better.

Best regards,
Márcio


Post by rodel.ocfemia »

Hi marcio,
Please find code below. Basically there is expand/collapse functionality. When the card is in expanded mode, double click on the status to change the status. Once the status is changed, the card moves accordingly. However, the collapse (red) should remain unchanged. But once the card moves, it changes back to Expand (blue). I'm trying to figure out how can I make the icon still Collapse(red) when I changed the status. Thanks

index.umd.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="description" content="This example shows basic setup of the TaskBoard."/>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Bryntum TaskBoard - Basic demo</title>
	<script src="../_shared/browser/helper.js?460834"></script>
	<link rel="stylesheet" href="../../build/taskboard.stockholm.css?460834" data-bryntum-theme>
	<link rel="stylesheet" href="../_shared/shared.css?460834">
	<link rel="stylesheet" href="resources/app.css?460834">
</head>
<style>
	.expand {
		border: 1px solid blue;
		background-color: blue;
		height: 15px;
		width: 50px;
		color: white;
	}
	.expand::before {
		content: "Expand"
	}
	.collapse {
		border: 1px solid red;
		background-color: red;
		height: 15px;
		width: 50px;
		color: white;
	}
	.collapse::before {
		content: "Collapse"
	}
</style>
<body>
	<div id="container">
	</div>
	<!-- Using UMD bundle -->
	<script src="../_shared/locales/examples.locales.umd.js?460834"></script>
	<script data-default-locale="En" src="../../build/taskboard.umd.min.js?460834"></script>
	<script src="../_shared/shared.umd.js?460834"></script>
	<script src="app.umd.js?460834"></script>	
</body>
</html>

app.umd.js

'use strict';

var { TaskBoard} = bryntum.taskboard;

var taskBoard = new TaskBoard({
    appendTo          : 'container',
    // Url for resource avatar images
    resourceImagePath : '../_shared/images/users/',
    // Experimental, transition moving cards using the editor
    useDomTransition  : true,
    // Columns to display
    columns           : [{
        id    : 'todo',
        text  : 'Todo',
        color : 'orange'
    }, {
        id      : 'doing',
        text    : 'Doing',
        color   : 'blue',
        tooltip : 'Items that are currently in progress'
    }, {
        id   : 'done',
        text : 'Done'
    }],
    // Field used to pair a task to a column
    columnField : 'status',
    // Project using inline data

taskStore: { fields: ['showStatus', 'showField1', 'showField2'] },

headerItems: {
    text: {
       type: 'template',
       template: ({ taskRecord }) => `<table style="width:100%;">
                                        <tr>
                                            <td style="width:5%;"><div class="expand"></div></td>
                                            <td style="width:95%;">${taskRecord.name}</td>
                                        </tr>
                                    </table>`,
       style: { width: '100%' }
    }
 },
 features: {
    simpleTaskEdit : true,
    taskEdit: false
 },
 bodyItems: {
            status   : {
                type      : 'template',
                hidden    : true,
                template  : ({ taskRecord }) => `<div>Status: ${taskRecord.status}</div>`,
                editor : { type : 'combo', items : ['todo','doing', 'done'] }
            },
            field1: { type: 'template', hidden: true, template: ({ taskRecord }) => `<div><b>${taskRecord.field1}</b></div>` },
            field2: { type: 'template', hidden: true, template: ({ taskRecord }) => `<div><b>${taskRecord.field2}</b></div>` },
},    
project     : {
    tasks : [{
        id     : 1,
        name   : 'Book flight',
        status : 'todo',
        prio   : 'medium',
        field1 : 'field1',
        field2 : 'field2'
    }, {
        id     : 2,
        name   : 'Book hotel',
        status : 'todo',
        prio   : 'medium',
        field1 : 'field1',
        field2 : 'field2'
    }, {
        id     : 3,
        name   : 'Pack bags',
        status : 'doing',
        prio   : 'low',
        field1 : 'field1',
        field2 : 'field2'
    }]
},
processItems({ bodyItems, taskRecord }) {
    bodyItems.status.hidden = !taskRecord.showStatus;
    bodyItems.field1.hidden = !taskRecord.showField1;
    bodyItems.field2.hidden = !taskRecord.showField2;
},
listeners: {
}
});

taskBoard.on({
    taskClick({ taskRecord, event }) {
        if (event.target.classList.contains('expand') ) {
            event.target.classList.remove('expand')
            event.target.classList.add('collapse')

        taskRecord.showStatus = true
        taskRecord.showField1 = true
        taskRecord.showField2 = true

        return;
    }
    if (event.target.classList.contains('collapse') ) {
        event.target.classList.remove('collapse')
        event.target.classList.add('expand')

        taskRecord.showStatus = false
        taskRecord.showField1 = false
        taskRecord.showField2 = false
        return;
    }
}
 });

Post by marcio »

Hey,

Checking the code that you shared, the taskClick listener has the table as event.target, which will not trigger the if in any case, could you confirm that this is working for you??

Best regards,
Márcio


Post by rodel.ocfemia »

Hi,
The taskClick is working from my end. When Expand is clicked, the other fields are displayed, plus the Expand disappears and Collapse appears. Then vice versa. My only concern is when in collapse mode then i changed the status, the card moves accordingly but the Collapse is reset to Expand while other fields are still displayed.


Post by rodel.ocfemia »

Hi marcio,
By the way, you need to copy the code from index.umd.html because it has the css definitions of target and collapse of divs that are defined inside the table as part of header.


Post by marcio »

Hey rodel.ocfemia,

I'm attaching a video to demonstrate the behavior that I've found using your code. At least as far as I understood, it's working correctly. Could you confirm if I tested it correctly??

Attachments
Bryntum TaskBoard - Basic demo - 20 October 2022.mp4
(175.61 KiB) Downloaded 51 times

Best regards,
Márcio


Post by rodel.ocfemia »

Hi marcio,
Please try to change the status (I enabled the inline editing already), once changed the card will move accordingly but the collapse text will be replaced by Expand while other fields are visible.


Post by rodel.ocfemia »

Hi marcio,
You might be thinking why create status drop down if we can just drag the card. But currently we need to display several types of status then it has mapping to the main 3 status. For example Status1 is mapped to 'todo'. So if I changed status to Status1, the card should move automatically to 'todo'.


Post by marcio »

Hi rodel,

Sorry for the delay, but I'm here with good news. I'm sharing a piece of code with a working application just like you mentioned, we always recommend avoid editing DOM nodes directly as you shared earlier, to avoid that kind of situation, the problem was being caused on this line

 <td style="width:5%;"><div class="expand"></div></td>

As the default after a render would be always be the expand class, that's why I updated to have a check there with the collapse class as well, check it here

"use strict";

var { TaskBoard } = bryntum.taskboard;

var taskBoard = new TaskBoard({
  appendTo: "container",
  // Url for resource avatar images
  resourceImagePath: "../_shared/images/users/",
  // Experimental, transition moving cards using the editor
  useDomTransition: true,
  // Columns to display
  columns: [
    {
      id: "todo",
      text: "Todo",
      color: "orange",
    },
    {
      id: "doing",
      text: "Doing",
      color: "blue",
      tooltip: "Items that are currently in progress",
    },
    {
      id: "done",
      text: "Done",
    },
  ],
  // Field used to pair a task to a column
  columnField: "status",
  // Project using inline data

  taskStore: { fields: ["showStatus", "showField1", "showField2"] },

  headerItems: {
    text: {
      type: "template",
      template: ({ taskRecord }) => {
        const classToAdd = taskRecord.showStatus ? "collapse" : "expand";
        return `<table style="width:100%;">
                  <tr>
                      <td style="width:5%;"><div class="${classToAdd}"></div></td>
                      <td style="width:95%;">${taskRecord.name}</td>
                  </tr>
              </table>`;
      },
      style: { width: "100%" },
    },
  },
  features: {
    simpleTaskEdit: true,
    taskEdit: false,
  },
  bodyItems: {
    status: {
      type: "template",
      hidden: true,
      template: ({ taskRecord }) => `<div>Status: ${taskRecord.status}</div>`,
      editor: { type: "combo", items: ["todo", "doing", "done"] },
    },
    field1: {
      type: "template",
      hidden: true,
      template: ({ taskRecord }) => `<div><b>${taskRecord.field1}</b></div>`,
    },
    field2: {
      type: "template",
      hidden: true,
      template: ({ taskRecord }) => `<div><b>${taskRecord.field2}</b></div>`,
    },
  },
  project: {
    tasks: [
      {
        id: 1,
        name: "Book flight",
        status: "todo",
        prio: "medium",
        field1: "field1",
        field2: "field2",
      },
      {
        id: 2,
        name: "Book hotel",
        status: "todo",
        prio: "medium",
        field1: "field1",
        field2: "field2",
      },
      {
        id: 3,
        name: "Pack bags",
        status: "doing",
        prio: "low",
        field1: "field1",
        field2: "field2",
      },
    ],
  },
  processItems({ bodyItems, taskRecord }) {
    bodyItems.status.hidden = !taskRecord.showStatus;
    bodyItems.field1.hidden = !taskRecord.showField1;
    bodyItems.field2.hidden = !taskRecord.showField2;
  },
  listeners: {},
});

taskBoard.on({
  taskClick({ taskRecord, event }) {
    if (event.target.classList.contains("expand")) {
      taskRecord.showStatus = true;
      taskRecord.showField1 = true;
      taskRecord.showField2 = true;

  return;
}
if (event.target.classList.contains("collapse")) {
  taskRecord.showStatus = false;
  taskRecord.showField1 = false;
  taskRecord.showField2 = false;
  return;
}
  },
});
Attachments
Bryntum TaskBoard - Basic demo - 24 October 2022.mp4
(81.87 KiB) Downloaded 50 times

Best regards,
Márcio


Post by rodel.ocfemia »

Hi Marcio,
Thanks a lot. This solves the issue.


Post Reply