200 lines
9.2 KiB
JavaScript
200 lines
9.2 KiB
JavaScript
import { LightningElement,track, api } from 'lwc';
|
|
import No_records_to_display from '@salesforce/label/c.No_records_to_display';
|
|
import Product from '@salesforce/label/c.Product';
|
|
import Order from '@salesforce/label/c.Order';
|
|
import Draft_Order from '@salesforce/label/c.Draft_Order';
|
|
import Customer from '@salesforce/label/c.Customer';
|
|
import Location from '@salesforce/label/c.Location';
|
|
import Collection from '@salesforce/label/c.Collection';
|
|
import Order_Number from '@salesforce/label/c.Order_Number';
|
|
import Status from '@salesforce/label/c.Status';
|
|
import Title from '@salesforce/label/c.Title';
|
|
import Created_At from '@salesforce/label/c.Created_At';
|
|
import Modified_At from '@salesforce/label/c.Modified_At';
|
|
import Name from '@salesforce/label/c.Name';
|
|
import First_Name from '@salesforce/label/c.First_Name';
|
|
import Last_Name from '@salesforce/label/c.Last_Name';
|
|
import Total_Orders from '@salesforce/label/c.Total_Orders';
|
|
import Published_at from '@salesforce/label/c.Published_at';
|
|
import Updated_at from '@salesforce/label/c.Updated_at';
|
|
import Total_Price from '@salesforce/label/c.Total_Price';
|
|
import Total_Discounts from '@salesforce/label/c.Total_Discounts';
|
|
import Country from '@salesforce/label/c.Country';
|
|
import Active from '@salesforce/label/c.Active';
|
|
|
|
export default class DisplayData extends LightningElement {
|
|
|
|
// GLOBAL VARIABLES
|
|
@api objectName;
|
|
@api displayData;
|
|
|
|
_objectData = [];
|
|
|
|
// objectData is now a reactive setter: the Apex call in the parent (recordTypeMapping)
|
|
// resolves AFTER this component first mounts, so processing must re-run whenever the
|
|
// parent hands over new data — not just once in connectedCallback.
|
|
@api
|
|
get objectData() {
|
|
return this._objectData;
|
|
}
|
|
set objectData(value) {
|
|
this._objectData = value;
|
|
this.processObjectData();
|
|
}
|
|
|
|
// LOCAL VARIABLES
|
|
@track showDetail = false;
|
|
@track column3;
|
|
@track column4;
|
|
@track column5;
|
|
@track objectList = [];
|
|
@track showJson;
|
|
@track displayJson = false;
|
|
@track errorMessage = false;
|
|
@track label = {
|
|
No_records_to_display ,
|
|
Product, Order, Draft_Order,
|
|
Customer, Location, Collection , Order_Number, Status , Title , Created_At , Modified_At , Name ,
|
|
First_Name , Last_Name , Total_Orders , Published_at , Updated_at , Total_Price , Total_Discounts ,
|
|
Country , Active
|
|
};
|
|
|
|
//Handles the onclick of Object name bars on 'Import Sample Records' modal
|
|
handleClick(){
|
|
this.showDetail = !this.showDetail;
|
|
}
|
|
|
|
// DISPLAY-ONLY getters for the styled accordion header (no functional impact)
|
|
get objectInitials() {
|
|
return this.objectName ? this.objectName.substring(0, 2).toUpperCase() : '';
|
|
}
|
|
|
|
// ── Object icon selection ────────────────────────────────────────────────
|
|
// Replaces the 2-letter initials avatar with the same brand SVG used for
|
|
// each object on the Field Mapping / Object Setup pages. Compared against
|
|
// the imported custom labels (same ones the parent passes down), matching
|
|
// the existing objectName == this.label.X pattern in processObjectData(),
|
|
// so it stays correct if the labels are translated.
|
|
get isProductIcon() { return this.objectName == this.label.Product; }
|
|
get isCustomerIcon() { return this.objectName == this.label.Customer; }
|
|
get isCollectionIcon() { return this.objectName == this.label.Collection; }
|
|
get isOrderIcon() { return this.objectName == this.label.Order; }
|
|
get isDraftOrderIcon() { return this.objectName == this.label.Draft_Order; }
|
|
get isLocationIcon() { return this.objectName == this.label.Location; }
|
|
|
|
get recordCount() {
|
|
return this.objectList ? this.objectList.length : 0;
|
|
}
|
|
|
|
//connected call back
|
|
connectedCallback() {
|
|
console.log('SYNC MADE EASY: Display Data Connected Callback');
|
|
this.processObjectData();
|
|
}
|
|
|
|
//Processes objectData into objectList — runs on initial mount AND every time
|
|
//the parent updates objectData (e.g. once the Shopify sample-data Apex call resolves).
|
|
processObjectData() {
|
|
// Reset so re-processing (on late-arriving data) doesn't duplicate rows
|
|
this.objectList = [];
|
|
if(this.objectData != '' && this.objectData != null && this.objectData.length > 0){
|
|
this.errorMessage = true;
|
|
if(this.objectName == this.label.Product){
|
|
let index = 1;
|
|
for(let product of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:product.id, column3:product.title, column4:product.created_at, column5:product.updated_at, jsonBody:JSON.stringify(Object.keys(product).reverse().reduce((acc, key) => {
|
|
acc[key] = product[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.Title;
|
|
this.column4 = this.label.Created_At;
|
|
this.column5 = this.label.Modified_At;
|
|
|
|
}else if(this.objectName == this.label.Customer){
|
|
let index = 1;
|
|
for(let customer of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:customer.id, column3:customer.first_name, column4:customer.last_name, column5:customer.orders_count, jsonBody: JSON.stringify(Object.keys(customer).reverse().reduce((acc, key) => {
|
|
acc[key] = customer[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.First_Name;
|
|
this.column4 = this.label.Last_Name;
|
|
this.column5 = this.label.Total_Orders;
|
|
|
|
}else if(this.objectName == this.label.Collection){
|
|
let index = 1;
|
|
for(let collection of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:collection.id, column3:collection.title, column4:collection.published_at, column5:collection.updated_at, jsonBody: JSON.stringify(Object.keys(collection).reverse().reduce((acc, key) => {
|
|
acc[key] = collection[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.Title;
|
|
this.column4 = this.label.Published_at;
|
|
this.column5 = this.label.Updated_at;
|
|
}else if(this.objectName == this.label.Order){
|
|
let index = 1;
|
|
for(let order of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:order.id, column3:order.order_number, column4:order.total_price, column5:order.total_discounts, jsonBody: JSON.stringify(Object.keys(order).reverse().reduce((acc, key) => {
|
|
acc[key] = order[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.Order_Number;
|
|
this.column4 = this.label.Total_Price;
|
|
this.column5 = this.label.Total_Discounts;
|
|
}else if(this.objectName == this.label.Draft_Order){
|
|
let index = 1;
|
|
for(let draftorder of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:draftorder.id, column3:draftorder.name, column4:draftorder.status, column5:draftorder.created_at, jsonBody: JSON.stringify(Object.keys(draftorder).reverse().reduce((acc, key) => {
|
|
acc[key] = draftorder[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.Name;
|
|
this.column4 = this.label.Status;
|
|
this.column5 = this.label.Created_At;
|
|
}else if(this.objectName == this.label.Location){
|
|
let index = 1;
|
|
for(let location of this.objectData){
|
|
this.objectList.push({srNumber:index, shopifyId:location.id, column3:location.name, column4:location.country, column5:location.active, jsonBody: JSON.stringify(Object.keys(location).reverse().reduce((acc, key) => {
|
|
acc[key] = location[key];
|
|
return acc;
|
|
}, {}), null, "\t")})
|
|
index++;
|
|
}
|
|
this.column3 = this.label.Name;
|
|
this.column4 = this.label.Country;
|
|
this.column5 = this.label.Active;
|
|
}
|
|
}else{
|
|
this.errorMessage = false;
|
|
}
|
|
|
|
}
|
|
|
|
//This method handles onclick on JSON button and show the JSON.
|
|
jsonClick(event){
|
|
this.displayJson = true;
|
|
this.showJson = event.target.value;
|
|
|
|
const sendEvent = new CustomEvent("getjsonvalue", {
|
|
detail : this.displayJson
|
|
});
|
|
|
|
this.dispatchEvent(sendEvent);
|
|
|
|
const sendJsonEvent = new CustomEvent("sendjson", {
|
|
detail : this.showJson
|
|
});
|
|
|
|
this.dispatchEvent(sendJsonEvent);
|
|
}
|
|
} |