Lightning Web Component Specialist Step-8 Superbadge

#Lightning #LWC #Lightning Web Components #LWC Superbadge Challenge #Trailhead Challenges

Below is my code

<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';

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;

        }

        this.isLoading = false;

        this.notifyLoading(this.isLoading);

    }

    updateSelectedTile(event) {

        this.selectedBoatId = event.detail.boatId;

        this.sendMessageService(this.selectedBoatId);

    }

    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));

       Promise.all(promises).then(res => {

           this.dispatchEvent(

               new ShowToastEvent({

                   title: 'Success',

                   message: 'Ship It!',

                   variant: 'success'

               })

           );

           this.draftValues = [];

           return this.refresh();

       }).catch(error => {

           this.error = error;

           this.dispatchEvent(

                new ShowToastEvent({

                    title: 'Error',

                    message: 'Contact System Admin!',

                    variant: 'error'

                })

            );

            this.notifyLoading(false);

       }).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) {

        if (isLoading) {

            this.dispatchEvent(new CustomEvent('loading'));

        } else {

            this.dispatchEvent(CustomEvent('doneloading'));

        }

    }

     sendMessageService(boatId) { 

        publish(this.messageContext, BoatMC, { recordId : boatId });

    }

}