1. Home
  2. Forum
  3. Vue
  4. Update recources after event add

Update recources after event add

I have a problem, and I try to count the total number of hours in events for each resource.

At the time of loading, the value of the resource's time will be calculated and loaded by api. The problem is how to change this value at the moment of changing, acquiring, adding an event. Or can somehow redraw this field at the time of the successful change.


<e-resources>
<e-resource aria-readonly="true" :allowMultiple='allowMultiple' field='person_id' title='Employees' name='person' :dataSource='employeeDataSource'
textField='Text' idField='Id'colorField='Color'> </e-resource>
</e-resources>
 


var resourceHeaderVue = Vue.component("resourceHeader", {
template: `<div class='template-wrap'>
<img class="employee-image" :src="getImage(data)" :alt="getImage(data)"/>
<div class="employee-name">{{getEmployeeName(data)}}</div>
<div class="employee-time">{{getEmployeeTime(data)}}</div>
</div>`,

data() {
return {
data: {}
};
},
methods: {
getEmployeeName: function (data) {
let value = JSON.parse(JSON.stringify(data));
return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;
},
getImage: function(data) {
let value = JSON.parse(JSON.stringify(data));
return 'images/fotos/'+ value.resourceData.Id +'.jpg';
},
getEmployeeTime: function (data) {
let value = JSON.parse(JSON.stringify(data));
return value.resourceData.Time;
},

}
});


export default Vue.extend({
data: function () {
return {



}
},

methods:{



onRenderCell: function (args) {

if (args.elementType === 'emptyCells' && args.element.classList.contains('e-resource-left-td')) {
let target = args.element.querySelector('.e-resource-text');
target.innerHTML = '<div class="name">Employee</div><div class="capacity">Working Hours</div>';
}
},


}


4 Replies
VT Vadims Talapins May 14, 2019 06:30 AM UTC

I have found one solution but, is one question. How can I get all events by "group Index" to calculate time.

onEventRendered: function (args) {

let resource = this.$refs.ScheduleObj.getResourcesByIndex(args.element.dataset.groupIndex);
let resuurceEvents = ????????????
(Calculations by resuurceEvents)
resource.resourceData.Time = timeCount;
}

KK Karthigeyan Krishnamurthi Syncfusion Team May 14, 2019 11:32 AM UTC

Hi Vadims, 
 
Greetings from Syncfusion. 
 
We have prepared the below sample to display the events duration in each resource header using eventRendered and dataBinding events. 
 
onEventRendered: function(args) { 
  let totalEvents = this.$refs.ScheduleObj.ej2Instances.eventsData; 
  var dm = new DataManager({ json: totalEvents }); 
  let resources = this.$refs.ScheduleObj.ej2Instances.resources[0] 
    .dataSource; 
  resources.forEach(function(resource) { 
    var hours = 0; 
    var datasource = dm.executeLocal( 
      new Query().where("person_id", "equal", resource.Id) 
    ); 
    datasource.forEach(function(data) { 
      hours += Math.abs(data.EndTime - data.StartTime) / 36e5; 
    }); 
    document.getElementById(resource.Id).innerHTML = hours + " Hours"; 
  }); 
}, 
ondataBinding: function(args) {  
  if (args.result.length == 0) { // This function is to update the resource header when last event is deleted in Schedule 
      let resources = this.$refs.ScheduleObj.ej2Instances.resources[0] 
    .dataSource; 
  resources.forEach(function(resource) { 
     document.getElementById(resource.Id).innerHTML = 0 + " Hours"; 
  }); 
  } 
} 
 
Regards, 
Karthi 


VT Vadims Talapins May 20, 2019 07:45 AM UTC

Thank you!

NR Nevitha Ravi Syncfusion Team May 20, 2019 10:10 AM UTC

Hi Vadims, 
  
You are most welcome! 
  
Regards, 
Nevitha 
  


Loader.
Up arrow icon