BOAT SEARCH RESULTS
boatSearchResults.html
<template>
<lightning-tabset variant="scoped">
<lightning-tab label="Gallery">
<template if:true={boats.data}>
<div class="slds-scrollable_y">
<!-- layout horizontally aligned to the center -->
<!-- layout allowing multiple rows -->
<lightning-layout horizontal-align="center" multiple-rows>
<!-- template looping through each boat -->
<template for:each={boats.data} for:item="boat">
<!-- lightning-layout-item for each boat -->
<lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6" medium-device-size="4" large-device-size="3">
<!-- Each BoatTile goes here -->
<c-boat-tile boat={boat} selected-boat-id={selectedBoatId} onboatselect={updateSelectedTile}>
</c-boat-tile>
</lightning-layout-item>
</template>
</lightning-layout>
</div>
</template>
</lightning-tab>
<lightning-tab label="Boat Editor">
<!-- Scrollable div and lightning datatable go here -->
<template if:true={boats.data}>
<div class="slds-scrollable_y">
<lightning-datatable key-field="Id" data={boats.data} columns={columns} onsave={handleSave}
draft-values={draftValues} hide-checkbox-column show-row-number-column>
</lightning-datatable>
</div>
</template>
</lightning-tab>
<lightning-tab label="Boats Near Me">
<!-- boatsNearMe component goes here -->
<c-boats-near-me boat-type-id={boatTypeId}></c-boats-near-me>
</lightning-tab>
</lightning-tabset>
</template>
boatSearchResults.js
import { LightningElement, wire, api, track } from 'lwc';
import getBoats from '@salesforce/apex/BoatDataService.getBoats';
import { updateRecord } from 'lightning/uiRecordApi';
import { showToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import { publish, MessageContext } from 'lightning/messageService';
import BoatMC from '@salesforce/messageChannel/BoatMessageChannel__c';
const SUCCESS_TITLE = 'Success';
const MESSAGE_SHIP_IT = 'Ship it!';
const SUCCESS_VARIANT = 'success';
const ERROR_TITLE = 'Error';
const ERROR_VARIANT = 'error';
export default class BoatSearchResults extends LightningElement {
selectedBoatId = '';
columns = [];
boatTypeId = '';
@track boats;
@track draftValues = [];
isLoading = false;
error = undefined;
wiredBoatsResult;
// wired message context
@wire(MessageContext)
messageContext;
columns = [
{ label: 'Name', fieldName: 'Name', type: 'text', editable: 'true' },
{ label: 'Length', fieldName: 'Length__c', type: 'number', editable: 'true' },
{ label: 'Price', fieldName: 'Price__c', type: 'currency', editable: 'true' },
{ label: 'Description', fieldName: 'Description__c', type: 'text', editable: 'true' }
];
// wired getBoats method
@wire(getBoats, { boatTypeId: '$boatTypeId' })
wiredBoats(result) {
this.boats = result;
if (result.error) {
this.error = result.error;
this.boats = undefined;
}
this.isLoading = false;
this.notifyLoading(this.isLoading);
}
// public function that updates the existing boatTypeId property
// uses notifyLoading
@api
searchBoats(boatTypeId) {
this.isLoading = true;
this.notifyLoading(this.isLoading);
this.boatTypeId = boatTypeId;
}
// this public function must refresh the boats asynchronously
// uses notifyLoading
@api
async refresh() {
this.isLoading = true;
this.notifyLoading(this.isLoading);
await refreshApex(this.boats);
this.isLoading = false;
this.notifyLoading(this.isLoading);
}
// this function must update selectedBoatId and call sendMessageService
updateSelectedTile(event) {
this.selectedBoatId = event.detail.boatId;
this.sendMessageService(this.selectedBoatId);
}
// Publishes the selected boat Id on the BoatMC.
sendMessageService(boatId) {
// explicitly pass boatId to the parameter recordId
publish(this.messageContext, BoatMC, { recordId : boatId });
}
// This method must save the changes in the Boat Editor
// Show a toast message with the title
// clear lightning-datatable draft values
handleSave(event) {
this.notifyLoading(true);
const recordInputs = event.detail.draftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
console.log(recordInputs);
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
//update boat record
Promise.all(promises)
.then(res => {
this.dispatchEvent(
new ShowToastEvent({
title: SUCCESS_TITLE,
message: MESSAGE_SHIP_IT ,
variant: SUCCESS_VARIANT
})
);
this.draftValues = [];
return this.refresh();
}).catch(error => {
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: CONST_ERROR,
variant: ERROR_VARIANT
})
);
this.notifyLoading(false);
})
.finally(() => {
this.draftValues = [];
});
}
// Check the current value of isLoading before dispatching the doneloading or loading custom event
@api
notifyLoading(isLoading) {
if (isLoading) {
this.dispatchEvent(new CustomEvent('loading'));
} else {
this.dispatchEvent(CustomEvent('doneloading'));
}
}
}
boatSearchResults.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Comments
Post a Comment