Gantt store data in Firestore with Angular

[Wyssen]

I'm using Angular and Firestore for my project. I cannot find out how I can CRUD the Gantt data to Firestore with Angular. How can I do it, is there an example? 

[Monisha Sivanthilingam]

Hi Wyssen, 

 

Greetings from Syncfusion support. 

 

We have prepared a sample connecting the Gantt to the Firebase. Please follow the following steps to fetch data and update it using CRUD operations. 

 

Step 1: Follow the installation guidelines to create a firebase project using your mail account. The below link has the installation guidelines. 

 

Guidelines: https://console.firebase.google.com/ 

 

Step 2: Next, create your own Gantt application in Angular using the below Getting Started page. 

 

Getting Started: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/ 

 

Step 3: Copy the Firebase SDK snippet from the (settings -> Project settings) and integrate them in your angular Gantt Chart application in the environments/environment.ts. 

 

 

 

Step 4: To fetch data from the Firebase, refer to the following code snippets in the app.component.ts file of your Gantt Chart application. 

 

 

constructor(db: AngularFirestore) { 

    this.data = db.collection('GanttData'); 

    db.collection('GanttData').valueChanges().subscribe(data => { 

      this.dataSource = data; 

      let obj = (document.getElementById('ganttDefault') as any).ej2_instances[0]; 

      let length = this.dataSource.length; 

      for (let i = 0; i < length; i++) { 

        let EndDate = this.dataSource[i].EndDate.seconds.toString() + "000"; 

        let StartDate = this.dataSource[i].StartDate.seconds.toString() + "000"; 

        this.dataSource[i].StartDate = new Date(parseInt(StartDate)); 

        this.dataSource[i].EndDate = new Date(parseInt(EndDate)); 

      } 

      obj.dataSource = this.dataSource; 

    }) 

  } 

 

 

Step 5: Now, we can perform CRUD operations and update the data in the data base by making use of the add, save and delete request types in the actionComplete event. The following code snippets demonstrate the solution. 

 

 

public actionComplete(args: any): void { 

    if (args.requestType == 'add') { 

      // add new records 

      let guid = (this.GuidFun() + this.GuidFun() + "-" + this.GuidFun() + "-4" + this.GuidFun().substr(0, 3) + "-" + this.GuidFun() + "-" + this.GuidFun() + this.GuidFun() + this.GuidFun()).toLowerCase(); 

      args.data.taskData.DocumentId = guid.toString(); 

      this.ganttData.TaskId = args.data.taskData.TaskId; 

      this.ganttData.TaskName = args.data.taskData.TaskName; 

      this.ganttData.StartDate = args.data.taskData.StartDate; 

      this.ganttData.EndDate = args.data.taskData.EndDate; 

      this.ganttData.Duration = args.data.taskData.Duration; 

      this.ganttData.Progress = args.data.taskData.Progress; 

      this.ganttData.Predecessor = args.data.taskData.Predecessor; 

      this.ganttData.ParentId = args.data.taskData.ParentId; 

      this.ganttData.DocumentId = args.data.taskData.DocumentId; 

      this.data.doc(guid).set(this.ganttData); 

    } 

    if (args.requestType == 'save' || (args.modifiedTaskData && args.modifiedTaskData.length > 0)) { 

      //update exisitng record 

      var data = args.modifiedTaskData; 

      for (var i = 0; i < data.length; i++) { 

        this.data.doc(data[i].DocumentId).update({ TaskId: data[i].TaskId }); 

        this.data.doc(data[i].DocumentId).update({ TaskName: data[i].TaskName }); 

        this.data.doc(data[i].DocumentId).update({ StartDate: data[i].StartDate }); 

        this.data.doc(data[i].DocumentId).update({ EndDate: data[i].EndDate }); 

        this.data.doc(data[i].DocumentId).update({ Duration: data[i].Duration }); 

        this.data.doc(data[i].DocumentId).update({ Progress: data[i].Progress }); 

        this.data.doc(data[i].DocumentId).update({ Predecessor: data[i].Predecessor }); 

        this.data.doc(data[i].DocumentId).update({ ParentId: data[i].ParentId }); 

      } 

    } 

    if (args.requestType == 'delete') { 

      //delete a record 

      for (var i = 0; i < args.data.length; i++) { 

        this.data.doc(args.data[i].taskData.DocumentId).delete(); 

      } 

    } 

  } 

 

 

Step 6: Next, run the Firebase service and then, run the Gantt Chart application. The following screenshot shows the data in the Firebase DB. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                                          

 

 

 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.