Lightning Web Components Specialist Superbadge Solution Boat Detail Tabs Component

BOAT DETAIL TABS

boatDetailTabs.html

<template>

    <template if:false={wiredRecord.data}>

      <!-- lightning card for the label when wiredRecord has no data goes here  -->

        <lightning-card class= "slds-align_absolute-center no-boat-height">

            <span>{label.labelPleaseSelectABoat}</span>

        </lightning-card>

    </template>

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

       <!-- lightning card for the content when wiredRecord has data goes here  -->

       <lightning-card>

           <lightning-tabset variant="scoped">

               <lightning-tab label={label.labelDetails}>

                   <lightning-card icon-name={detailsTabIconName} title={boatName}>

                       <lightning-button slot="actions" title={boatName} label={label.labelFullDetails} onclick={navigateToRecordViewPage}></lightning-button>

                       <lightning-record-view-form density="compact"

                            record-id={boatId}

                            object-api-name="Boat__c">

                            <lightning-output-field field-name="BoatType__c" class="slds-form-element_1-col"></lightning-output-field>

                            <lightning-output-field field-name="Length__c" class="slds-form-element_1-col"></lightning-output-field>

                            <lightning-output-field field-name="Price__c" class="slds-form-element_1-col"></lightning-output-field>

                            <lightning-output-field field-name="Description__c" class="slds-form-element_1-col"></lightning-output-field>

                       </lightning-record-view-form>

                   </lightning-card>

               </lightning-tab>

               <lightning-tab label={label.labelReviews}  value="reviews"><c-boat-reviews record-id={boatId}></c-boat-reviews></lightning-tab>

               <lightning-tab label={label.labelAddReview}> <c-boat-add-review-form record-id={boatId} oncreatereview={handleReviewCreated}></c-boat-add-review-form></lightning-tab>

           </lightning-tabset>

       </lightning-card>

    </template>

  </template>

boatDetailTabs.js

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

import labelDetails from '@salesforce/label/c.Details';

import labelReviews from '@salesforce/label/c.Reviews';

import labelPleaseSelectABoat from '@salesforce/label/c.Please_select_a_boat';

import labelAddReview from '@salesforce/label/c.Add_Review';

import labelFullDetails from '@salesforce/label/c.Full_Details';

import { getRecord } from 'lightning/uiRecordApi'

import BOAT_ID_FIELD from '@salesforce/schema/Boat__c.Id';

import BOAT_NAME_FIELD from '@salesforce/schema/Boat__c.Name';

import BOATMC from '@salesforce/messageChannel/BoatMessageChannel__c';

import { APPLICATION_SCOPE,subscribe,MessageContext,unsubscribe} from 'lightning/messageService';

import { getFieldValue } from 'lightning/uiRecordApi';

import { NavigationMixin } from 'lightning/navigation';

const BOAT_FIELDS = [BOAT_ID_FIELD, BOAT_NAME_FIELD];

export default class BoatDetailTabs extends NavigationMixin(LightningElement) {

    @api boatId;

    wiredRecord;

    label = {

      labelDetails,

      labelReviews,

      labelAddReview,

      labelFullDetails,

      labelPleaseSelectABoat,

    };

    

    // Decide when to show or hide the icon

    // returns 'utility:anchor' or null

    get detailsTabIconName() {

      return this.wiredRecord && this.wiredRecord.data ? 'utility:anchor' : null;

     }

    

    // Utilize getFieldValue to extract the boat name from the record wire

    @wire(getRecord,{recordId: '$boatId', fields: BOAT_FIELDS})

    wiredRecord;

    get boatName() {

      return getFieldValue(this.wiredRecord.data, BOAT_NAME_FIELD);

     }

    

    // Private

    subscription = null;

    // Initialize messageContext for Message Service

  @wire(MessageContext)

  messageContext;

    

    // Subscribe to the message channel

    subscribeMC() {

      if(this.subscription) { return; }

      // local boatId must receive the recordId from the message

      this.subscription = subscribe(

          this.messageContext, 

          BOATMC, 

          (message) => {

              this.boatId = message.recordId;

          }, 

          { scope: APPLICATION_SCOPE }

      );

    }

    

    // Calls subscribeMC()

    connectedCallback() { 

      this.subscribeMC();

    }

    

    // Navigates to record page

    navigateToRecordViewPage() {

      this[NavigationMixin.Navigate]({

        type: "standard__recordPage",

        attributes: {

            recordId: this.boatId,

            actionName: "view"

        }

    });

     }

    

    // Navigates back to the review list, and refreshes reviews component

    handleReviewCreated() {

      this.template.querySelector('lightning-tabset').activeTabValue = 'reviews';

      this.template.querySelector(c-boat-reviews).refresh();

     }

  }

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

boatDetailTabs.css

.no-boat-height {

    height: 3rem;

  }