/**
 * 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