[ANGULAR] How to remove new task card if user close new task modal

[amit.sharma]

if the user clicks the Cancel button or cross button (╳)

it shows an empty card

When the user clicks the cancel button, this card should be hidden.

We open a modal for both adding and editing tasks.

    taskEdit: {
      editorConfig: {
        title: 'Edit Opportunity',
        autoUpdateRecord: false,
        defaults: {
          labelWidth: '30%',
        },
        width: '35em',
      },
      items: {
        name: {
          disabled: true,
          label: 'Organization',
        },
        opportunityService: {
          type: 'combo',
          items: [],
          name: 'opportunityService',
          label: 'Service',
          weight: 200,
          required: true,
        },
        resources: {
          label: 'Team Member',
          weight: 400,
          multiSelect: false,
        },
        estmargin: {
          type: 'text',
          label: 'EST Margin (per month)',
          name: 'estimatedMargin',
          disabled: true,
          weight: 500,
        },
        color: null,
        description: {
          weight: 600,
          label: 'Subtitle'
        },
      },
      processItems({ feature, items, taskRecord }) {
        const customerName = feature.owner.customerName;
        feature._editorConfig.title = 'Edit Opportunity';
        if (taskRecord.originalData.name == 'New task') {
          feature._editorConfig.title = 'Add Opportunity';
          delete items.estmargin;
        }
        taskRecord.set('name', customerName);
        items.opportunityService.items =
          feature.owner.initialConfig.features.taskEdit.items.opportunityService.items;
      },
    },
  

[alex.l]

Hi,

I guess you added a task into https://bryntum.com/products/taskboard/docs/api/TaskBoard/store/TaskStore before you opened your editor. You simply need to remove it. in Cancel button handler https://bryntum.com/products/taskboard/docs/api/TaskBoard/store/TaskStore#function-remove
https://bryntum.com/products/taskboard/docs/api/Core/widget/Button
and here https://bryntum.com/products/taskboard/docs/api/Core/widget/Popup#event-toolClick

[stewart_wo]

Which event will fire when the user clicks the header cross button?

[tasnim]

Hi,

As Alex mentioned that you can use https://bryntum.com/products/taskboard/docs/api/Core/widget/Popup#event-toolClick event to achieve it.

Here is an example code snippet for you

    features : {
        taskEdit : {
            editorConfig : {
                listeners : {
                    toolClick(props) {
                        console.log(props);
                    }
                }
            }
        }
    }

[stewart_wo]

How can we access our component function from the config file?

config file

    features : {
        taskEdit : {
            editorConfig : {
                listeners : {
                    toolClick(props) {
                        console.log(props);
                           this.removeDummyTask();
                    }
                }
            }
        }
    }
   

component code

 ngAfterViewInit(): void {
      this.taskboard = this.taskboardComponent.instance;
 
  this.taskboard.on('beforeCancel', ({ source  }) => {  
    this.taskboard.removeTask(this.dummyTask);
  });
 
  this.taskboard.on('beforeTaskEdit', ({ taskRecord }) => {
    this.dummyTask = taskRecord;
});
  
  
  this.cdRef.detectChanges();
  
});
  }
  removeDummyTask(){
    this.taskboard.removeTask(this.dummyTask);
  }

[tasnim]

You can define the taskEdit feature inside the Class too

First, you'd need to add it at the top of the class

export class AppComponent {
    taskEditFeature = {
        editorConfig : {
            listeners : {
                toolClick(props) {
                    console.log(props);
                }
            }
        }
    };

And then you'd need to assign it to the markup

<bryntum-task-board
    #taskboard
    [taskEditFeature] = "taskEditFeature"
</bryntum-task-board>

Hope it helps.