[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.

[stewart_wo]

Do we have something like this

this.taskboard.on('toolClick', ({ taskRecord}) => {
     this.taskboard.removeTask(taskRecord);
});

here in angular component file?

ngAfterViewInit(): void {
    Promise.all([
      this.loaderService.initializeLoader(this.viewContainer, this.cdRef),
    ]).then(() => {
      const styleElement = this.renderer.createElement('style');
      const cssText = `.b-taskboard-column-header::after { background-image: url('${this.serverUrl}/assets/images/right_arrow.svg') }`;
        

  this.taskboard = this.taskboardComponent.instance;
  
  this.taskboard.on('taskclick', ({ taskRecord, event }) => {
    if (event.target.matches('.task_edit_action')) {
      this.taskboard.editTask(taskRecord);
    }
    if (event.target.matches('.task_delete_action')) {
      this.handleTaskDelete(taskRecord);
    }
  });
  
  this.taskboard.on('beforeSave', ({ source, editor, record, values }) => {
    this.updateTaskRecord({ record, values });
  });
  
  this.taskboard.columns.on('remove', ({ records }) => {
    this.removeColumn(records);
  });

  this.taskboard.on('toolClick', ({ taskRecord}) => {
        this.taskboard.removeTask(taskRecord);
  });

});
  }

for removing the task while click on editPopup close icon.

[tasnim]

Here is how you can remove the task on click on the close icon

    taskEditFeature = {
        editorConfig : {
            listeners : {
                toolClick(props: any) {
                    const { source } = props;
                    const taskEditor = source.up();
                    const taskboard = source.up('taskboard');
                    taskboard.project.taskStore.remove(taskEditor.record);
                }
            }
        }
    }

[stewart_wo]

Thanks .... this is working.

Is there any similar listeners which we can used for remove the task on cancel button click as well in popup?

[tasnim]

To suggest an exact approach, need to see how your code looks like for cancel button. For buttons there is a click listener which you can listen to and put your logic there https://bryntum.com/products/taskboard/docs/api/Core/widget/Button#event-click