Hello,
This is the code that I have placed in the file.
frappe.pages['purchase-receipt-vu'].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Purchase Receitp View',
single_column: true
});
//Code to Add Field to Page
let MyField = page.add_field({
label: 'QC Status',
fieldtype: 'Select',
fieldname: 'qc_status',
options:[
'',
'All',
'QC Pending',
'QC Passed'
],
change(){
//frappe.msgprint(MyField.get_value());
if(MyField.get_value() === 'All'){
//Load all data
datatable.freeze
data = []
frappe.call({
method: "mymfg.api.get_purchase_receipt_view_all"
}).done((r) => {
console.log(r)
console.log(r.message)
let data = []
datatable.freeze
$.each(r.message, function(_i, e){
let rr = {
'Date':e.posting_date,
'Supplier Name':e.supplier_name,
'PO':e.purchase_order,
'Item Name':e.item_name,
'Received Qty':e.received_qty,
'Reject Qty':e.rejected_qty,
'Batch #':e.batch_no,
'Coil Heat #':e.coil_heat_no,
'Coil Qty':e.coil_qty,
'Coil Wt.':e.coil_wt,
'QC':e.quality_inspection,
'Action Button':e.name2
}
data.push(rr)
})
//let data = r.map(Object.values)
datatable.refresh(data, columns)
})
}
if(MyField.get_value() === 'QC Pending'){
//Load all PR Pending QC
datatable.freeze
data = []
frappe.call({
method: "mymfg.api.get_purchase_receipt_view_qc_pending"
}).done((r) => {
console.log(r)
console.log(r.message)
let data = []
datatable.freeze
$.each(r.message, function(_i, e){
let rr = {
'Date':e.posting_date,
'Supplier Name':e.supplier_name,
'PO':e.purchase_order,
'Item Name':e.item_name,
'Received Qty':e.received_qty,
'Reject Qty':e.rejected_qty,
'Batch #':e.batch_no,
'Coil Heat #':e.coil_heat_no,
'Coil Qty':e.coil_qty,
'Coil Wt.':e.coil_wt,
'QC':e.quality_inspection,
'Action Button':e.name2
}
data.push(rr)
})
//let data = r.map(Object.values)
datatable.refresh(data, columns)
})
}
if(MyField.get_value() === 'QC Passed'){
//Load all PR Passed QC
datatable.freeze
data = []
frappe.call({
method: "mymfg.api.get_purchase_receipt_view_qc_pass"
}).done((r) => {
console.log(r)
console.log(r.message)
let data = []
datatable.freeze
$.each(r.message, function(_i, e){
let rr = {
'Date':e.posting_date,
'Supplier Name':e.supplier_name,
'PO':e.purchase_order,
'Item Name':e.item_name,
'Received Qty':e.received_qty,
'Reject Qty':e.rejected_qty,
'Batch #':e.batch_no,
'Coil Heat #':e.coil_heat_no,
'Coil Qty':e.coil_qty,
'Coil Wt.':e.coil_wt,
'QC':e.quality_inspection,
'Action Button':e.name2
}
data.push(rr)
})
//let data = r.map(Object.values)
datatable.refresh(data, columns)
})
}
}
});
//Append a Div
$("<div class='datatable'></div>").appendTo('.layout-main-section');
//--set up our empty datatable
// let el = document.querySelector('.layout-main-section')
let el = document.querySelector('.datatable');
//let button_formatter = (value) => `<button onclick="alert('This is ${value})">Action!</button>`;
let button_formatter = (value) => `<button onclick="btn_view('${value}')">Action!</button>`
let columns = [
{name:'Date', editable:false, focusable:false},
{name:'Supplier Name', editable:false, focusable:false},
{name:'PO', editable:false, focusable:false},
{name:'Item Name', editable:false, focusable:false},
{name:'Received Qty', editable:false, focusable:false},
{name:'Reject Qty', editable:false, focusable:false},
{name:'Batch #', editable:false, focusable:false},
{name:'Coil Heat #', editable:false, focusable:false},
{name:'Coil Qty', editable:false, focusable:false},
{name:'Coil Wt.', editable:false, focusable:false},
{name:'QC', editable:false, focusable:false},
{name: "Action Button", focusable: false, format: button_formatter}
]
let datatable = new frappe.DataTable(el, { columns: columns, data: [], layout: "fluid", inlineFilters: "true", serialNoColumn: "false" });
//use regular ajax api methods to fetch document data, then refresh
frappe.call({
method: "mymfg.api.get_purchase_receipt_view_all"
}).done((r) => {
console.log(r)
console.log(r.message)
let data = []
datatable.freeze
$.each(r.message, function(_i, e){
let rr = {
'Date':e.posting_date,
'Supplier Name':e.supplier_name,
'PO':e.purchase_order,
'Item Name':e.item_name,
'Received Qty':e.received_qty,
'Reject Qty':e.rejected_qty,
'Batch #':e.batch_no,
'Coil Heat #':e.coil_heat_no,
'Coil Qty':e.coil_qty,
'Coil Wt.':e.coil_wt,
'QC':e.quality_inspection,
'Action Button':e.name2
}
data.push(rr)
})
//let data = r.map(Object.values)
datatable.refresh(data, columns)
})
}
function btn_view(MyVal){
//Code to show dialog to update
}
Why is the page when loaded for the first time comes up empty.
What mistake am I making here?
TIA
Yogi Yang