Skip to main content

/**

* 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

4 answers
  1. Jul 12, 2021, 3:06 PM

    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

0/9000