BOAT REVIEWS COMPONENT
boatReviews.html
<template>
<!-- div for when there are no reviews available -->
<template if:false={reviewsToShow}>
<div class="slds-align_absolute-center">No reviews available</div>
</template>
<template if:true={reviewsToShow}>
<!-- div for when there are reviews available -->
<div class="slds-feed reviews-style slds-is-relative slds-scrollable_y">
<!-- insert spinner -->
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
</template>
<ul class="slds-feed__list">
<!-- start iteration -->
<template for:each={boatReviews} for:item="boatReview">
<li class="slds-feed__item" key={boatReview.Id}>
<article class="slds-post">
<header class="slds-post__header slds-media">
<div class="slds-media__figure">
<!-- display the creator’s picture -->
<lightning-avatar variant="circle" src={boatReview.CreatedBy.SmallPhotoUrl}
alternative-text={boatReview.CreatedBy.Name} class="slds-m-right_small"></lightning-avatar>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<p>
<!-- display creator’s name -->
<a value={boatReview.CreatedBy.Id} title={boatReview.CreatedBy.Name} data-record-id={boatReview.CreatedBy.Id} onclick={navigateToRecord}>
{boatReview.CreatedBy.Name}
</a>
<span> - {boatReview.CreatedBy.CompanyName}</span>
</p>
</div>
<p class="slds-text-body_small">
<!-- display created date -->
<lightning-formatted-date-time value={boatReview.CreatedDate}>
</lightning-formatted-date-time>
</p>
</div>
</header>
<div class="slds-text-longform">
<p class="slds-text-title_caps">{boatReview.Name}</p>
<lightning-formatted-rich-text value={boatReview.Comment__c}></lightning-formatted-rich-text>
</div>
<!-- display five star rating on readonly mode -->
<c-five-star-rating read-only="true" value={boatReview.Rating__c} ></c-five-star-rating>
</article>
</li>
</template>
<!-- end iteration -->
</ul>
</div>
</template>
</template>
boatReviews.js
import { LightningElement,api,track } from 'lwc';
import getAllReviews from '@salesforce/apex/BoatDataService.getAllReviews';
import { NavigationMixin } from 'lightning/navigation';
export default class BoatReviews extends NavigationMixin(LightningElement) {
// Private
boatId;
error;
@track boatReviews;
isLoading;
// Getter and Setter to allow for logic to run on recordId change
@api
get recordId() {
return this.boatId;
}
set recordId(value) {
this.setAttribute('boatId', value);
this.boatId = value;
//console.log(' @@@ boat Id' + this.boatId);
this.getReviews();
}
// Getter to determine if there are reviews to display
get reviewsToShow() {
console.log( 'this.boatReviews ==> ' +this.boatReviews);
return (this.boatReviews != undefined && this.boatReviews != null && this.boatReviews != '') ? true : false;
}
// Public method to force a refresh of the reviews invoking getReviews
@api
refresh() {
this.getReviews();
}
// Imperative Apex call to get reviews for given boat
// returns immediately if boatId is empty or null
// sets isLoading to true during the process and false when it’s completed
// Gets all the boatReviews from the result, checking for errors.
getReviews() {
console.log(' refresh getReviews ' + this.boatId);
this.isLoading = true;
getAllReviews({boatId : this.boatId})
.then(result => {
this.boatReviews = result;
this.isLoading = false;
console.log(' == getAllReviews == ');
})
.catch(error => {
this.boatReviews = undefined;
this.error = error;
});
}
// Helper method to use NavigationMixin to navigate to a given record on click
navigateToRecord(event) {
const userId = event.target.dataset.recordId
// Generate a URL to a User record page
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: userId ,
objectApiName: 'User',
actionName: 'view',
},
});
}
}
boatReviews.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>
boatReviews.css
.reviews-style {
max-height: 250px;
}
Comments
Post a Comment