Skip to main content

Hello, can anybody help me out here? Stuck at this since 2 days!!

LWC Superbadge Challenge 8 - HandleSave() error

 

boatSearchResults.html

<template>

<lightning-tabset variant="scoped">

<lightning-tab label="Gallery">

<template if:true={boats.data}>

<div class="slds-scrollable_y">

<lightning-layout horizontal-align="center" multiple-rows>

<template for:each={boats.data} for:item="boat">

<lightning-layout-item

key={boat.Id}

padding="around-small"

size="12"

small-device-size="6"

medium-device-size="4"

large-device-size="3"

>

<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 LOADING_EVENT = 'loading';

const DONE_LOADING_EVENT = 'doneloading';

export default class BoatSearchResults extends LightningElement {

boatTypeId = '';

@track boats;

@track draftValues = [];

selectedBoatId = '';

isLoading = false;

error = undefined;

wiredBoatsResult;

@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' }

];

@api

searchBoats(boatTypeId) {

this.isLoading = true;

this.notifyLoading(this.isLoading);

this.boatTypeId = boatTypeId;

}

@wire(getBoats, { boatTypeId: '$boatTypeId' })

wiredBoats(result) {

this.boats = result;

if (result.error) {

this.error = result.error;

this.boats = undefined;

} else if (result.data) {

//this.boats = result.data;

}

this.isLoading = false;

this.notifyLoading(this.isLoading);

}

updateSelectedTile(event) {

this.selectedBoatId = event.detail.boatId;

this.sendMessageService(this.selectedBoatId);

}

handleSave(event) {

const recordInputs = event.detail.draftValues.slice().map(draft => {

const fields = Object.assign({}, draft);

return { fields };

});

const promises = recordInputs.map(recordInput => updateRecord(recordInput));

Promise.all(promises)

.then(() => {

this.showToastEvent('Success','Ship It!','success');

return this.refresh();

})

.catch( error => {

this.error = error;

this.showToastEvent('Error', error.body.message, 'error');

}).finally(() => {

this.draftValues = [];

});

}

@api

async refresh() {

this.isLoading = true;

this.notifyLoading(this.isLoading);

await refreshApex(this.boats);

this.isLoading = false;

this.notifyLoading(this.isLoading);

}

notifyLoading(isLoading) {

var spinnerEvent;

if (isLoading) {

spinnerEvent = new CustomEvent(LOADING_EVENT);

} else {

spinnerEvent = new CustomEvent(DONE_LOADING_EVENT);

}

this.dispatchEvent(spinnerEvent);

}

showToastEvent(title, message, variant) {

const toastEvent = new ShowToastEvent({

title : title,

message : message,

variant : variant

});

this.dispatchEvent(toastEvent);

}

sendMessageService(selectedBoatId) {

publish(this.messageContext, BOATMC, { recordId : selectedBoatId });

}

}

 

The functionality seems to be working fine, any help is appreciated.

Thank you!

6 respuestas
  1. 8 jul 2020, 19:47
    This may be a case of a picky checker. The code I passed with was similar, but rather than including constants for LOADING_EVENT and DONE_LOADING_EVENT, I entered the text into the toast messages themselves. I also used "new ShowToast Event" for success and error rather than using the helper function this.showToastEvent(). These changes might make the checker like it better?
0/9000