Lightning Web Components Specialist Superbadge Solution Similar Boats Component

 SIMILAR BOATS COMONENT

similarBoats.html

<template>

    <lightning-card title={getTitle} icon-name="custom:custom54">

      <lightning-layout multiple-rows="true">

        <template if:true={noBoats}>

          <p class="slds-align_absolute-center">There are no related boats by {similarBy}!</p>

        </template>

        <!-- Loop through the list of similar boats -->

        <template for:each={relatedBoats} for:item="boat">

          <!-- Responsive lightning-layout-item -->

          <lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6" 

          medium-device-size="4"  large-device-size="4">

            <!-- Each boat tile goes here -->

            <c-boat-tile boat={boat} onboatselect={openBoatDetailPage}></c-boat-tile>

          </lightning-layout-item>

        </template>

      </lightning-layout>

    </lightning-card>

</template>

similarBoats.js

import { LightningElement, api, wire } from 'lwc';

import { NavigationMixin } from 'lightning/navigation'

// import getSimilarBoats

import getSimilarBoats from '@salesforce/apex/BoatDataService.getSimilarBoats';

export default class SimilarBoats extends NavigationMixin(LightningElement) {

    // Private

    currentBoat;

    relatedBoats;

    boatId;

    error;

    

    // public

    @api

    get recordId() {

        // returns the boatId

        return this.boatId;

      }

      set recordId(value) {

          // sets the boatId value

          this.setAttribute('boatId', value);          

          this.boatId = value;

          // sets the boatId attribute

         

      }

    // public

    @api similarBy;

    

    // Wire custom Apex call, using the import named getSimilarBoats

    // Populates the relatedBoats list

    @wire(getSimilarBoats, { boatId: '$boatId', similarBy: '$similarBy' })

    similarBoats({ error, data }) {

        if (data) {

            this.relatedBoats = data;

            this.error = undefined;

            

        } else if(error) {

            this.relatedBoats = undefined;

            this.error = error;

        }

     }

    get getTitle() {

      return 'Similar boats by ' + this.similarBy;

    }

    get noBoats() {

      return !(this.relatedBoats && this.relatedBoats.length > 0);

    }

    

    // Navigate to record page

    openBoatDetailPage(event) { 

        this[NavigationMixin.Navigate]({

            type: 'standard__recordPage',

            attributes: {

                recordId: event.detail.boatId,

                objectApiName: BOAT_OBJECT,

                actionName: 'view'

            },

        });

    }

}

similarBoats.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>similarBoats</masterLabel>    

    <description>Similar Boats</description>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordPage">

            <property label="Enter the property you want to compare by" name="similarBy" type="String" datasource="Type,Price,Length"  />

            <objects>

                <object>Boat__c</object>

            </objects>

        </targetConfig> 

    </targetConfigs>

</LightningComponentBundle>