Lightning Web Components Specialist Superbadge Solution Boat Search Form Component

 BOAT SEARCH FORM

boatSearchForm.html

<template>

    <lightning-layout>

      <lightning-layout-item class="slds-align-middle">

        <lightning-combobox onchange={handleSearchOptionChange} value={selectedBoatTypeId} 

        options={searchOptions} class="slds-align-middle">

      </lightning-combobox>

      </lightning-layout-item>

    </lightning-layout>

  </template>

boatSearchForm.js

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

import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";

export default class BoatSearchForm extends LightningElement {

 @track selectedBoatTypeId = '';  

  // Private

 @track error = undefined;  

  // Needs explicit track due to nested data

 @track searchOptions;

  

  // Wire a custom Apex method

  @wire(getBoatTypes)

    boatTypes({ error, data }) {

    if (data) {

      this.searchOptions = data.map(type => {

        return {

          label: type.Name,

          value: type.Id

        };

          // TODO: complete the logic

      });

      this.searchOptions.unshift({ label: 'All Types', value: '' });

    } else if (error) {

      this.searchOptions = undefined;

      this.error = error;

    }

  }

  

  // Fires event that the search option has changed.

  // passes boatTypeId (value of this.selectedBoatTypeId) in the detail

  handleSearchOptionChange(event) {

    event.preventDefault();

    this.selectedBoatTypeId = event.detail.value;

    // Create the const searchEvent

    // searchEvent must be the new custom event search

    const searchEvent = new CustomEvent("search", {

      detail: {

        boatTypeId: this.selectedBoatTypeId

      }

    });

    this.dispatchEvent(searchEvent);

  }

}

boatSearchForm.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>