Skip to content

Instantly share code, notes, and snippets.

@dhaniksahni
Created July 30, 2020 14:53
Show Gist options
  • Save dhaniksahni/3e99e51a0210f5927730dccb6d3695be to your computer and use it in GitHub Desktop.
Save dhaniksahni/3e99e51a0210f5927730dccb6d3695be to your computer and use it in GitHub Desktop.
.lgc-bg {
background-color: rgb(242, 242, 242);
}
.slds-spinner_container {
top: 50% !important;
bottom: 50% !important;
}
<template>
<lightning-card title="Recognise Brand from image" icon-name="action:record">
<div class="slds-m-around_large">
<div if:false={isLoaded} class="slds-is-relative">
<div class="slds-spinner_container slds-align_absolute-center">
<div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</div>
<lightning-layout vertical-align="slds-grid_vertical-align-start">
<lightning-layout-item size="6" flexibility="auto" padding="around-small">
<lightning-combobox
name="progress"
label="Cases"
value={selectedCase}
options={selectOptions}
onchange={handleCaseChange}></lightning-combobox>
</lightning-layout-item>
<lightning-layout-item size="8" flexibility="auto">
</lightning-layout-item>
</lightning-layout>
<lightning-layout vertical-align="center" horizontal-align="spread">
<lightning-layout-item size="6" flexibility="auto" padding="around-small">
<iframe src={imageUrl} width="500px" height="400px"></iframe>
</lightning-layout-item>
<lightning-layout-item size="1">
<div class="slds-p-around_medium lgc-bg-inverse">
<lightning-button-icon icon-name="standard:macros" size="medium" onclick={getBrandDetail} ></lightning-button-icon>
</div>
</lightning-layout-item>
<lightning-layout-item size="5">
<div style="height: 300px;">
<lightning-datatable
key-field="id"
data={data}
columns={columns}>
</lightning-datatable>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</template>
import { LightningElement,wire,track,api } from 'lwc';
import getImage from '@salesforce/apex/LogoRecognizer.getImage';
import getLogoInformation from '@salesforce/apex/LogoRecognizer.getLogoInformation';
import getLogoCases from '@salesforce/apex/LogoRecognizer.getLogoCases';
const columns = [
{ label: 'Brand Name', fieldName: 'BrandName' },
{ label: 'Accuracy Score', fieldName: 'Score'}
];
export default class LogoRecognition extends LightningElement {
@api isLoaded = false;
@api recordId;
imageUrl;
downloadUrl;
data = [];;
error;
selectOptions=[];
columns=columns;
@track selectedCase;
@wire(getLogoCases)
lists({ error, data }) {
if (data) {
for(const list of data){
const option = {
label: list.Id,
value: list.Id
};
this.selectOptions = [ ...this.selectOptions, option ];
}
} else if (error) {
console.error(error);
}
this.isLoaded=true;
}
handleCaseChange(e)
{
this.isLoaded=false;
this.recordId=e.detail.value;
getImage({id: e.detail.value})
.then((data,error) => {
if (data) {
this.imageUrl=data.PublicUrl;
this.downloadUrl=data.DownloadableUrl;
this.error = undefined;
this.isLoaded=true;
} else if (error) {
this.error = error;
console.log('Error:'+ JSON.stringify(error));
this.isLoaded=true;
}
});
}
getBrandDetail(event)
{
this.isLoaded=false;
getLogoInformation({ record: this.recordId})
.then((data,error) => {
if (data) {
this.data=data;
} else {
this.error = error;
console.log('Error:'+ JSON.stringify(error));
}
this.isLoaded=true;
})
.catch(error => {
console.log(error);
this.isLoaded=true;
});
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment