/**
* Created by ARapole on 6/24/2021.
*/
import { LightningElement, wire, api, track } from "lwc";
import getAssetRecords from '@salesforce/apex/AssetController.getAssetRecords';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import {updateRecord} from "lightning/uiRecordApi";
export default class AssetTable extends LightningElement {
@api recordId;
@api records;
@track wiredRecords;
@track data = [];
error;
//have this attribute to track data changed
//with custom picklist or custom lookup
@track draftValues = [];
@api columns;
@track tableLoadingState = true;
lastSavedData = [];
connectedCallback() {
this.columns=[
{label: 'Asset Name', fieldName: 'Name', Type: 'text'},
{label: 'Account Name', fieldName: 'Account.Name' , Type: 'text'},
{label: 'Title Description', fieldName: 'Title_Description__c' , Type: 'text'},
{label: 'Asset Term', fieldName: 'Asset_Term__c' , Type: 'text'},
{label: 'Start Date', fieldName: 'Start_Date__c' , Type: 'Date'} ,
{label: 'End Date', fieldName: 'End_Date__c' , Type: 'Date'},
{label: 'Adjusted End Date ', fieldName: 'Adjusted_End_Date__c', Type: 'Date' , editable: true},
{
label: 'Adjusted End Date Reason ', fieldName: 'Adjusted_End_Date_Reason__c', type: 'picklist', editable: true, typeAttributes: {
placeholder: 'Choose adjusted end date reason', options: [
{ label: 'Start Date', value: 'Start Date' },
{ label: 'Extension', value: 'Extension' },
{ label: 'Add-on Alignment', value: 'Add-on Alignment' },
{ label: 'Proration', value: 'Proration' },
{ label: 'Error: Mixed Term', value: 'Error Mixed Term' },
{ label: 'Consecutive Terms', value: 'Consecutive Terms' },
{ label: 'Summer Pilot', value: 'Summer Pilot' },
] // list of all picklist options
, value: { fieldName: 'Adjusted_End_Date_Reason__c' } // default value for picklist
, context: { fieldName: 'Id' } // binding asset Id with context variable to be returned back
}
}
];
}
@wire(getAssetRecords, {subscriptionId: '$recordId'})
wiredAsset( { error, data } ) {
this.isSpinner = false;
if (data) {
this.data = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.data = undefined;
}
this.tableLoadingState = false;
this.lastSavedData = JSON.parse(JSON.stringify(this.data));
}
updateDataValues(updateItem) {
// let copyData = [... this.data];
let copyData = JSON.parse(JSON.stringify([... this.data]));
copyData.forEach(item => {
if (item.Id === updateItem.Id) {
for (let field in updateItem) {
item[field] = updateItem[field];
}
}
});
//write changes back to original data
this.data = [...copyData];
}
updateDraftValues(updateItem) {
let draftValueChanged = false;
// let copyDraftValues = [...this.draftValues];
let copyDraftValues=JSON.parse(JSON.stringify([...this.draftValues]));
//store changed value to do operations
//on save. This will enable inline editing &
//show standard cancel & save button
copyDraftValues.forEach(item => {
if (item.Id === updateItem.Id) {
let temUpdateItem=Object.assign([],updateItem);
for (let field in updateItem) {
item[field] = updateItem[field];
}
draftValueChanged = true;
}
});
if (draftValueChanged) {
this.draftValues = [...copyDraftValues];
} else {
this.draftValues = [...copyDraftValues, updateItem];
}
}
//listener handler to get the context and data
//updates datatable
picklistChanged(event) {
event.stopPropagation();
let dataRecieved = event.detail.data;
let updatedItem = { Id: dataRecieved.context, Adjusted_End_Date_Reason__c: dataRecieved.value };
this.updateDraftValues(updatedItem);
this.updateDataValues(updatedItem);
}
//handler to handle cell changes & update values in draft values
handleCellChange(event) {
this.updateDraftValues(event.detail.draftValues[0]);
// this.updateDraftValues(JSON.parse(JSON.stringify(this.data)));
}
handleSave(event){
this.lastSavedData = event.detail.draftValues;
const recordInputs=this.lastSavedData.slice().map(
draft =>{
const fields=Object.assign({},draft);
return {fields};
});
updateRecord(recordInputs).then(() => {
})
//update the records using the asset id
const promises=recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(res => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Asset Adjusted End Date UpdatedSuccessfully',
variant: 'Success'
})
);
this.lastSavedData=[];
//return this.refresh();
return refreshApex(this.error,this.data);
}).catch(error =>{
this.dispatchEvent(
new ShowToastEvent({
title : 'Error',
message: 'Could not update the Adjusted End Date An Error Occurred.',
variant: 'error'
})
);
}).finally(() =>{
this.lastSavedData=[];
});
return refreshApex(this.error,this.data);
}
handleCancel(event) {
//remove draftValues & revert data changes
this.data = JSON.parse(JSON.stringify(this.lastSavedData));
this.draftValues = [];
}
}
<template>
<template if:true={data}>
<c-custom-data-table
key-field="Id"
data={data}
columns={columns}
onpicklistchanged={picklistChanged}
onvalueselect={handleSelection}
draft-values={draftValues}
oncellchange={handleCellChange}
onsave={handleSave}
oncancel={handleCancel}
hide-checkbox-column
is-loading={tableLoadingState}>
</c-custom-data-table>
</template>
</template>
#LWC Component #Salesforce Developer #Lighting Web Components
Hi, @Aruna Rapole
Can you kindly share rest of the code related to this component, so I can recreate your issue at my end. As I can see currently, there is a custom component 'custom-data-table' for which the code is missing from the original question.
Regards
Manish