Actually im new to mongoDB and mongoose, and im tryig to get nested join using three schemas and grouping them.
const company = Schema(
{
title: {type: String, required: true},
}
);
const plans = Schema(
{
companyId: {type: Schema.Types.ObjectId, ref: 'company', required: true},
title: {type: String, required: true},
}
);
const promotions = Schema(
{
planId: {type: Schema.Types.ObjectId, ref: 'plans', required: true},
title: {type: String, required: true},
}
);
I got the below result but separated, and I would like to group it, any help with this point would be appreciated?
[
{
_id: '621c2749ac447abf20a8a263',
title: 'test 1',
plans: {
_id: '621c290ad6bce1084f900b0b',
title: 'test 1',
promotions: {
_id: '621d1187b18de3c35fa3963b',
title: 'test 1',
},
},
},
{
_id: '621c2749ac447abf20a8a263',
title: 'test 2',
plans: {
_id: '621c290ad6bce1084f900b0b',
title: 'test 2',
promotions: {
_id: '621d1187b18de3c35fa3963d',
title: 'test 2',
},
},
},
];
The result that i want to achieve is:
[
{
title: 'company name',
plans: [
{
title:'plan name',
promotions: [
{
title:'promotion name'
}
]
},
...
]
},
...
]
A nested "$lookup" is one way to do it.
db.company.aggregate([
{
// lookup plans matching companies
"$lookup": {
"from": "plans",
"localField": "_id",
"foreignField": "companyId",
"pipeline": [
{
// lookup promotions matching plans
"$lookup": {
"from": "promotions",
"localField": "_id",
"foreignField": "planId",
"as": "promotions"
}
}
],
"as": "plans"
}
},
{
// drop unwanted fields
"$project": {
"_id": 0,
"plans._id": 0,
"plans.companyId": 0,
"plans.promotions._id": 0,
"plans.promotions.planId": 0
}
}
])
Try it on mongoplayground.net.
how to display the following json data ?
i have json data like this, and want to display it in table, i use vue-bostrapt .
Previously I tried like this, but it's not perfect.
this my json
[
{
"id":"1",
"name": "KINTIL",
"desc": "Kintil is good",
"location": [
{
"prov": "Jawa Barat",
"city": "Bandung"
},
{
"prov": "Banten",
"city": "Tanggerang"
}
],
"applied": [
{
"item_name": "galian"
},
{
"item_name": "timbunan"
}
],
"exception": [
{
"ex_name": "F001",
"ex_value": "001001"
},
{
"ex_name": "M001",
"ex_value": "002002"
}
]
}
]
and this html
<b-table class="table spacing-table" style="font-size: 13px;" show-empty
:items="inovasi" :fields="fields" :current-page="currentPage" :per-page="0" :filter="filter" >
</b-table>
and this my script
import json from "../static/data.json";
export default {
name: 'tes',
data() {
return {
inovasi:[],
filter: null,
fields: [
{
key: 'id',
label: 'id',
sortable: true
},
{
key: 'name',
label: 'name',
sortable: true
},
{
key: 'location',
label: 'location',
sortable: true
},
{
key: 'applied',
label: 'applied',
sortable: true
},
{ key: 'actions', label: 'Doc' }
],
currentPage: 0,
perPage: 5,
totalItems: 0
}
},
mounted() {
this.inovasi = json;
},
computed:{
},
methods: {
}
}
this result
how to display location and applied , into a single row table ?
thanks in advance for those who have answered :)
thanks
You can do it using formatter like
fields: [
{
key: 'id',
label: 'id',
sortable: true
},
{
key: 'name',
label: 'name',
sortable: true
},
{
key: 'location',
label: 'location',
sortable: true,
formatter: (value, key, item) => {
return value.map(x => 'prov: ' + x.prov + ' city:' + x.city).join(", ")
}
},
{
key: 'applied',
label: 'applied',
sortable: true,
formatter: (value, key, item) => {
return value.map(x => x.item_name).join(", ")
}
},
{ key: 'actions', label: 'Doc' }
],
It will show for the location column this: prov: Jawa Barat city:Bandung, prov: Banten city:Tanggerang and for the applied column this: galian, timbunan
I was able to add a custom action to the table but I still don't know how to use that custom action to open a record in a different page/modal when it's clicked. How to assign the ID to that record row? How to pass it to a different view?
in the component.html
<ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"></ng2-smart-table>
in the component.ts
settings = {
mode: 'external',
hideSubHeader: true,
actions: {
position: 'right',
add: false,
edit:false,
delete: false,
custom: [
{ name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
],
},
columns: {
firstName: {
title: 'First Name',
type: 'string',
},
lastName: {
title: 'Last Name',
type: 'string',
},
username: {
title: 'Username',
type: 'string',
},
email: {
title: 'E-mail',
type: 'string',
},
age: {
title: 'Age',
type: 'number',
},
},
};
onCustomAction(event): void {
//WHAT TO DO HERE?
}
SOLVED
onCustomAction(event): void {
//get action name to switch in case of different actions.
var actionName = event.action;
//get row id.
var id = event.data.id;
//navigate to edit/view url.
this.router.navigate(url)
}
your can inject NbdialogService in constuctor to open in dialog/Modal
private dialogService: NbDialogService
onCustomAction(event) {
switch (event.action) {
case 'view-details':
this.service.getDetails(event.data.Id)
.pipe(
tap(res => {
this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
context: {
details: res,
},
});
})
).subscribe();
break;
default:
console.log('Not Implemented Action');
break;
}
or navigate sure as you did by this.router.navigate(url)
In my project I am using extjs in front-end. yii2 in backend. I created a form to retrieve selected data from database.
As you can see I have two date fields and a dropdown list. And I have a group of checkboxes. This is a screenshot of my database table.
I should select the data I want using checkboxes and get them from database between 'from' to 'to' dates. When I click RUN button those selected data should be loaded to the grid in the below. When I click download button, those selected data should be downloaded to a csv file. But when I click RUN button it sends same API call twice. And one API gets data correctly and other one sends and error saying 'Undefined index: from'. This is the code in my view.
recordData: {
date: null,
from: null,
to: null,
rb1: null,
rb1: null,
rb2: null,
rb3: null,
rb4: null,
time: null,
rb5: null,
rb6: null,
rb7: null,
weight: 0,
status: 1
}
},
initComponent: function () {
var me = this;
me.title = 'Reports',
me.store = Ext.create('store.Reports');
Ext.apply(me, {
items: [{
xtype: 'form',
border: false,
padding: 10,
bodyStyle: { "background-color": "#e4e4e4" },
width: '100%',
store: me.store,
defaults: {
selectOnFocus: true,
labelWidth: 125
},
items: [{
xtype: 'datefield',
fieldLabel: 'From',
padding: '10 0 0 40',
name: 'from',
format: 'Y-m-d',
labelWidth: 150,
value: me.recordData.from,
displayField: 'from',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
xtype: 'datefield',
fieldLabel: 'To',
padding: '20 0 0 40',
name: 'to',
format: 'Y-m-d',
labelWidth: 150,
value: me.recordData.to,
displayField: 'to',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
xtype: 'combobox',
fieldLabel: 'Report Type',
padding: '20 0 0 40',
name: 'type',
labelWidth: 150,
store: [
['Order Report', 'Order Report']
],
value: me.recordData.type,
displayField: 'type',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
width: '100%',
bodyStyle: { "background-color": "#e4e4e4" },
padding: '20 0 0 40',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Customize Report',
width: 700,
labelWidth: 150,
columns: 3,
vertical: false,
items: [
{ boxLabel: 'Order ID', name: 'rb1', inputValue: '1', itemId: 'check1' },
{ boxLabel: 'Connection Number', name: 'rb2', inputValue: '2', itemId: 'check2' },
{ boxLabel: 'Status', name: 'rb3', inputValue: '3', itemId: 'check3' },
{ boxLabel: 'Action', name: 'rb4', inputValue: '4', itemId: 'check4' },
{ boxLabel: 'LOB', name: 'rb5', inputValue: '5', itemId: 'check5' },
{ boxLabel: 'Channel', name: 'rb6', inputValue: '6', itemId: 'check6' },
{ boxLabel: 'Company Name', name: 'rb7', inputValue: '7', itemId: 'check7' }
]
}]
}, {
buttons: [{
xtype: 'button',
text: 'RUN',
itemId: 'btnRun',
handler: function (button, event) {
//console.log("Working!", form);
var form = button.up('form');
//targetGridpanel = button.up();
//console.log("Working!", targetGridpanel);
//console.log("Working!", form);
if (form.isDirty()) {
var _vals = form.getValues();
if (!form.isValid()) {
console.log("Not Working!");
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: me.action + ' Report',
msg: 'Fill mandatory fields'
});
} else {
//console.log(_vals);
me.store.saveRecord(_vals, function () {
});
//me.store.load();
if (me.down('#check1').isDirty()) {
me.down('#rb1').show(true);
}
if (me.down('#check2').isDirty()) {
me.down('#rb2').show(true);
}
if (me.down('#check3').isDirty()) {
me.down('#rb3').show(true);
}
if (me.down('#check4').isDirty()) {
me.down('#rb4').show(true);
}
if (me.down('#check5').isDirty()) {
me.down('#rb5').show(true);
me.down('#time').show(true);
}
if (me.down('#check6').isDirty()) {
me.down('#rb6').show(true);
}
if (me.down('#check7').isDirty()) {
me.down('#rb7').show(true);
}
}
} else {
console.log("Close!");
}
}
}]
}, {
xtype: 'gridpanel',
store: me.store,
flex: 1,
margin: '20 0 0 0',
//minHeight: 300,
height: 240,
viewConfig: {
stripeRows: true
},
bbar: {
xtype: 'pagingtoolbar',
store: me.store,
displayInfo: true,
plugins: Ext.create('Ext.ux.ProgressBarPager')
},
columns: [{
dataIndex: 'date',
//itemId:'date',
text: 'DATE',
flex: 1,
menuDisabled: false,
}, {
dataIndex: 'rb1',
itemId: 'rb1',
text: 'ORDER ID',
flex: 1,
menuDisabled: false,
hidden: true,
}, {
dataIndex: 'rb2',
itemId: 'rb2',
text: 'CONNECTION NUMBER',
menuDisabled: false,
hidden: true,
flex: 2
}, {
dataIndex: 'rb3',
itemId: 'rb3',
text: 'STATUS',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb5',
itemId: 'rb5',
text: 'LOB',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb4',
itemId: 'rb4',
text: 'ACTION',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'time',
itemId: 'time',
text: 'ACTION TIME',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb6',
itemId: 'rb6',
text: 'CHANNEL',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb7',
itemId: 'rb7',
text: 'COMPANY NAME',
menuDisabled: false,
hidden: true,
flex: 1.5
}]
}
, {
buttons: [{
xtype: 'button',
text: 'DOWNLOAD',
itemId: 'download',
//actionMethods: {'read': 'POST'},
handler: function (button, event) {
var self = button.up();
var form = self.up('form');
var vals = form.getValues();
//console.log('Download', vals);
if (vals.from && vals.to && vals.type && (vals.rb1 || vals.rb2 || vals.rb3 || vals.rb4 || vals.rb5 || vals.rb6 || vals.rb7)) {
if (button) {
Ext.Msg.show({
icon: Ext.MessageBox.QUESTION,
buttons: Ext.Msg.YESNO,
title: 'Download Report',
msg: 'Do you want to download the <strong>selected</strong> report file?',
fn: function (buttonId, text, opt) {
if ('yes' == buttonId) {
//console.log(buttonId);
var dummyFormId = 'py-form-' + (new Date()).getTime();
//console.log(dummyFormId);
var frm = document.createElement('form');
frm.id = dummyFormId;
frm.name = dummyFormId;
//console.log(frm);
frm.className = 'x-hidden';
document.body.appendChild(frm);
Ext.Ajax.request({
url: utils.createUrl('api', 'report-download'),
form: Ext.fly(dummyFormId),
isUpload: true,
params: {
from: vals.from,
to: vals.to,
type: vals.type,
rb1: vals.rb1,
rb2: vals.rb2,
rb3: vals.rb3,
rb4: vals.rb4,
rb5: vals.rb5,
rb6: vals.rb6,
rb7: vals.rb7
},
callback: function (opts, success, res) {
console.log('Hello');
//Ext.getBody().unmask();
//console.log(params);
try {
if (success) {
var response = Ext.decode(res.responseText);
if (!response.success) {
throw response.data;
}
} else {
throw response.data;
}
} catch (ex) {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Download Report',
msg: 'No Data Found'
});
}
},
// fn: function () {
// console.log(arguments);
// }
});
}
}
});
}
} else {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Download Report',
msg: 'Please fill the form first'
});
}
}
}
]
}
]
}],
});
me.callParent(arguments);
I send these data to a store file. This is store file code.
extend: 'Ext.data.Store',
model: 'model.Report',
storeId: 'reportStore',
autoLoad: false,
pageSize: Configs.grid.pageSize,
saveRecord: function(data,fnCallBack) {
var me = this;
//var data = this.data;
//autoLoad: true,
//console.log(data);
Ext.getBody().mask('Please wait...');
Ext.Ajax.request({
url: utils.createUrl('api', 'report-read'),
params: data,
callback: function(opts, success, res) {
Ext.getBody().unmask();
try {
if(success) {
var response = App.decodeHttpResp(res.responseText);
if(response.success) {
Ext.Msg.show({
icon: Ext.MessageBox.INFO,
buttons: Ext.Msg.OK,
title: 'Reports',
msg: 'Report saved successfully'
});
} else {
throw response.error;
}
me.load();
} else {
throw 'Unknown Reason';
}
} catch (ex) {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Report',
msg: 'Failed to save data<br />' +
'Reason: ' + ex
});
}
}
});
}
This is my front-end model.
extend: 'Ext.data.Model',
fields: [
{ name: 'from', type: 'auto' },
{ name: 'to', type: 'auto' },
{ name: 'rb1', type: 'auto' },
{ name: 'rb2', type: 'auto' },
{ name: 'rb3', type: 'auto' },
{ name: 'rb4', type: 'auto' },
{ name: 'rb5', type: 'auto' },
{ name: 'time', type: 'auto' },
{ name: 'rb6', type: 'auto' },
{ name: 'rb7', type: 'auto' }
],
proxy: {
type: 'ajax',
noCache: false,
actionMethods: {'read': 'POST'},
api: {
read: utils.createUrl('api', 'report-read'),
//create: utils.createUrl('api', 'user-update'),
// update: utils.createUrl('api', 'user-update'),
// destroy: utils.createUrl('api', 'user-delete')
},
reader: {
type: 'json',
root: 'data'
},
listeners: {
exception: function(proxy, response, operation) {
App.showHttpError('Reports', response);
//console.log(this.fields);
}
}
}
Using these files I send data to controller. That's where my API is defined.
This is my controller function.
public function actionReportRead(){
$post = Yii::$app->request->post();
$time = 0;
$_vals = (new Order())->readReports(
#$post['start'],
#$post['limit'],
$post['from'],
$post['to'],
#$post['rb1'],
#$post['rb2'],
#$post['rb3'],
#$post['rb5'],
#$post['rb4'],
#$time,
#$post['rb6'],
#$post['rb7']
);
$this->setOutputData($_vals);
$this->setOutputStatus(true);
}
This is the model for that.
public function readReports($start, $limit,$from,$to, $rb1, $rb2, $rb3, $rb5, $rb4, $time, $rb6, $rb7 )
{
if (!$start) { $start = 0; };
if (!$limit) { $limit = Config::PAGE_SIZE; };
//$q = (new ActiveQuery(self::className()));
$q = self::find();
//$q->where(['between', 'submitted_time', $from, $to ]);
$q->alias('T')->andWhere(['BETWEEN', 'T.submitted_time', $from, $to ]);
$q->limit($limit);
$q->offset($start);
$q->orderBy(['T.order_id' => SORT_ASC]);
$data = [];
$action = null;
foreach ($q->all() as $_o) {
if($_o->status == 2){
$action = 'Data Entry Verified';
$time = $_o->timeDataEntry;
}else if($_o->status == 3){
$action = 'QC Accepted';
$time = $_o->timeQcPass;
}else if($_o->status == 4){
$action = 'Accepted';
$time = $_o->timeVerify;
}else if($_o->status == 1){
$action = 'Verification Pending';
$time = $_o->timeQcReject;
}else if($_o->status == 0){
$action = 'Rejected';
$time = $_o->timeQcReject;
}
$userlist='SELECT name FROM Company WHERE id = '.$_o->company_id;
$rsuserlist = Yii::$app->db->createCommand($userlist)->query();
$row = $rsuserlist->read();
$data[] = (object) array(
'date' =>$_o->submitted_time,
'rb1' =>$_o->order_id,
'rb2' =>$_o->conn,
'rb3' =>$_o->status,
'rb5' =>$_o->conn_type,
'rb4' =>$action,
'time' =>$time,
'rb6' =>$_o->channel,
'rb7' =>$row['name']
);
}
$json=Json::encode($data);
$this->logger->actLog($json);
return $data;
}
As I have found backend is fine. But I am not pretty sure. I new to extjs. So, I tried many ways but nothing worked. Data is not being loaded to grid and API sends me the error, I mentioned before. Please help me to solve this problem. What should I do more.
I found the answer and I am answering my own question.
Here, one API gets all the data correctly. Other one doesn't get 'from' and 'to' values. So I used following code.
me.store.getProxy().extraParams = {
from: vals.from,
to: vals.to
};
Using this I could send all the parameters to other API and eliminate that issue. Now data is fetched to the grid without a problem.
I want to show to users subset of columns and allow them to add extra columns if needed. I am struggling to load only subset of columns on load. Please find the code below I have done.
<kendo-grid k-options="vm.mainGridOptions"
k-columns="vm.mainGridColumns"
k-sortable="true"
k-filterable="{mode: 'row'}"
k-column-menu="true"
k-serverFiltering="false"
k-pageSize="10"
k-pageable="{ pageSizes: [5, 10, 25, 50, 100] }"> </kendo-grid>
Controller code
var mainGridDataSource = new kendo.data.DataSource({
transport: { read: mainGridReadEventHandler, cache: true },
serverFiltering: false,
page: 1,
pageSize: 10,
schema: {
data: 'data',
total: 'total',
model: {
fields: {
customerName: { type: "string" },
serviceAccountStatus: { type: "string" },
customerNumber: { type: "string" },
serviceType: { type: "string" },
utilityAccountNumber: { type: "string" },
serviceAddress: { type: "string" },
billingAccountNumber: { type: "string" },
utility: { type: "string" },
phoneNumber: { type: "string" },
email: { type: "string" }
}
}
}
});
vm.mainGridColumns = [
{
field: "customerName",
title: "Name",
template:
"<a ui-sref='resiservice.account-search.customer-details({ customerId:${customerId}, serviceAccountId:${serviceAccountId} })'>${customerName}</a>"
},
{
field: "serviceAccountStatus",
title: "Status"
},
{
field: "customerNumber",
title: "NAP Customer #"
},
{
field: "serviceType",
title: "Commodity"
},
{
field: "utilityAccountNumber",
title: "Utility/Account #"
},
{
field: "serviceAddress",
title: "Service Address"
},
{
field: "billingAccountNumber",
title: "NAP Account #"
},
{
field: "utility",
title: "Utility"
},
{
field: "phoneNumber",
title: "Phone #"
},
{
field: "email",
title: "Email Address"
}
];
Currently columns list coming like this first time
And i want to achive like this
Use columns.hidden property to hide a column, i.e.
{
field: "utility",
title: "Utility",
hidden: true
},
{
field: "phoneNumber",
title: "Phone #",
hidden: true
},
{
field: "email",
title: "Email Address",
hidden: true
}
For example:
http://dojo.telerik.com/EzuFO
The column is still visible on the list of columns in menu.