[ANGULAR] Filter task according to the condition when click submit button

[ducminh1511]

Hello friends,

Currently I have a problem, I have made options, I hope that when you click on each option and click on the SUBMIT button the tasks will be filtered according to the conditions. For example: type = 1 will display the tasks with type = 1 in DB. I have handled that when submit will push the types of the respective options up. Here is my code:

app.component.html

<bry-gantt
  #gantt
  [columns]="ganttConfig.columns"
  [subGridConfigs]="ganttConfig.subGridConfigs"
  [project]="ganttConfig.project"
  [taskDrag]="ganttConfig.features.taskDrag"
  [taskResize]="ganttConfig.features.taskResize"
  [taskEdit]="ganttConfig.features.taskEdit"
  [taskRenderer]="ganttConfig.taskRenderer"
  [viewPreset]="ganttConfig.features.viewPreset"
  [timeRanges]="ganttConfig.features.timeRanges"
  [eventColor]="ganttConfig.features.eventColor"
</bry-gantt>

<div class="btn">
  <form [formGroup]="taskForm" (ngSubmit)="submit()">
    <p>
      <select formControlName="taskSelect">
        <option [ngValue]="null" disabled>Select type task</option>
        <option
          *ngFor="let taskSelect of tasksSelects"
          [ngValue]="taskSelect.id"
        >
          {{ taskSelect.name }}
        </option>
      </select>

  <button type="submit" class="btn-submit">Submit</button>
</p>
  </form>
</div>

[ducminh1511]

app.component.ts
export class AppComponent implements OnInit {
    taskForm: FormGroup;
    

constructor(private fb: FormBuilder) {}

private calendarInstance: Gantt;
private eventStore: EventStore;

title = 'gantt-chart-project';
ganttConfig = ganttConfig;

type = 0;
name = '';

tasksSelects = [{
        id: 1,
        type: 1,
        name: 'Task'
    },
    {
        id: 2,
        type: 2,
        name: 'Inspection'
    },
    {
        id: 3,
        type: 3,
        name: 'Material'
    },
];

ngOnInit(): void {
    LocaleManager.applyLocale('Ja');
    
    this.taskForm = this.fb.group({
        taskSelect: [null],
    });
    
    this.setDefaults();
    
    this.taskForm.get('taskSelect').valueChanges.subscribe((f) => {
        this.onTaskChanged(f);
    });
}

submit() {
    console.log('Form Submitted');
    console.log(this.taskForm.value.taskSelect == 1);
    
}

setDefaults() {
    this.taskForm.get('taskSelect').patchValue(null);
}

onTaskChanged(value) {
    console.log('onTaskChanged');
    console.log(value);
}
}

[ducminh1511]

ganttConfig.ts
class MyModel extends TaskModel {
    static get fields() {
        return [
            // { name : 'deadline', type : 'date' },
            {
                name: 'color'
            },
        ];
    }
}

const project = new ProjectModel({
    taskModelClass: (MyModel as unknown) as TaskModel,
    transport: {
        load: {
            url: '../assets/data/launch-saas.json',
        },
    },
    autoLoad: true,
});

// const gantt = new Gantt({
//   gantt.on('taskclick', ({
//     taskRecord
// }) => console.log(taskRecord))
// });

export default {
    

columns: [{
    type: 'name',
    field: 'name',
    text: '名前',
    width: 1
}],
subGridConfigs: {
    locked: {
        collapsed: true
    },
},

listeners: {
    taskClick: ({
            taskRecord
        }) =>
        console.log('taskRecord=>>>>>>>>>>>>', taskRecord),
},

features: {
    taskDrag: {
        validatorFn(taskRecords, date, duration, newResource) {
            const firstDraggedTask = taskRecords[0], // or better use a loop
                isValid = firstDraggedTask.color === '#303331';
            console.log('taskRecord', taskRecords[0].color);
            return {
                valid: newResource.available && isValid,
            };
        },
    },
    taskResize: {
        validatorFn(record) {
            console.log('taskRecord1111111', record);
            return record.taskRecord.originalData.color != '#303331';
        },
    },
    
    taskEdit: false,
    
    timeRanges: {
        
        showCurrentTimeLine: true,
    },
    
    viewPreset: {
        // base: "weekAndDay",
        base: 'weekAndDay',
        tickWidth: 52,
        headers: [
            // {
            //   unit: 'month',
            //   dateFormat: 'YYYY年 MMM',
            // },
            {
                unit: 'week',
                dateFormat: 'YYYY年 MMM',
            },
            {
                unit: 'day',
                dateFormat: 'ddd',
            },
            {
                unit: 'day',
                dateFormat: 'D',
            },
        ],
    },
    
    eventColor: null,
    
    dependencies: false,
},
taskRenderer: ({
    taskRecord,
    renderData
}) => {
    if (taskRecord.color) {
        renderData.style += `background-color:${taskRecord.color}`;
    }
    
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return taskRecord.name;
    }
},
project,
};

[ducminh1511]

 "tasks": {
     "rows": [
         

     {
         "id": 51,
         "name": "上棟日",
         "manuallyScheduled": true,
         "startDate": "2021-02-21",
         "duration": 4,
         "color": "#ffffff",
         "cls": "foo",
         "type": 1
     },
     {
         "id": 52,
         "name": "ルーフィング敷き",
         "manuallyScheduled": true,
         "startDate": "2021-02-21",
         "duration": 1,
         "color": "#de4949",
         "type": 2
     },
     {
         "id": 61,
         "name": "ユニットバス施工",
         "manuallyScheduled": true,
         "duration": 5,
         "startDate": "2021-02-21",
         "color": "#303331",
         "type": 3
         
     },
     {
         "id": 57,
         "name": "床暖",
         "manuallyScheduled": true,
         "duration": 2,
         "startDate": "2021-02-22",
         "color": "#de4949",
         "type": 2
         
     },
     {
         "id": 59,
         "name": "ガス配管日",
         "manuallyScheduled": true,
         "duration": 3,
         "startDate": "2021-02-23",
         "color": "#de4949",
         "type": 2
         
     },
     {
         "id": 60,
         "name": "水道配管日",
         "manuallyScheduled": true,
         "duration": 2,
         "startDate": "2021-02-24",
         "color": "#303331",
         "type": 3
         
     },
     {
         "id": 53,
         "name": "屋根本葺き工事",
         "manuallyScheduled": true,
         "duration": 2,
         "startDate": "2021-02-24",
         "color": "#a1cbed",
         "type": 2
         
     },
     {
         "id": 54,
         "name": "防蟻工事",
         "manuallyScheduled": true,
         "duration": 1,
         "startDate": "2021-02-25",
         "color": "#a1cbed",
         "type": 2
         
     },
     {
         "id": 55,
         "name": "中間検査",
         "manuallyScheduled": true,
         "startDate": "2021-02-26",
         "duration": 1,
         "color": "#303331",
         "type": 3
     },
     {
         "id": 58,
         "name": "電気配線日",
         "manuallyScheduled": true,
         "startDate": "2021-02-26",
         "duration": 1,
         "color": "#303331",
         "type": 3
     },
     
     {
         "id": 56,
         "name": "防水工事",
         "manuallyScheduled": true,
         "startDate": "2021-02-27",
         "duration": 1,
         "color": "#a1cbed",
         "type": 2
     }
 ]
 },

[pmiklashevich]

You can filter tasks in TaskStore:
https://www.bryntum.com/docs/gantt/#Gantt/data/TaskStore#function-filter
https://www.bryntum.com/docs/gantt/#Gantt/data/TaskStore#function-filterBy

[ducminh1511]

Hi,

Do you have any specific sample

[pmiklashevich]

You can find lots of code snippets in the docs. Try in console of this demo for example: https://www.bryntum.com/examples/gantt/advanced/

gantt.taskStore.filter({
    id: 'filterByType',
    property: 'percentDone', // choose data field you want
    operator: '=',
    value: 50
})

The object describes filter object https://www.bryntum.com/docs/gantt/#Core/util/CollectionFilter#config-property