"use strict";
import Vue from "/static/js/vue.esm.browser.min.js";
import { Mask, Panel, Toolbar, Widget, Combo } from "/static/js/grid.module.js";
import mixins from "./mixins.js";
import "./MediabuyersReport.js";
import "./TeamLeadersReport.js";
const ALL_BUYERS = "All buyers";
const ALL_GROUPS = "All groups";
new Vue({
el: "#app",
mixins: [mixins],
data: {
filtersPanel: {"instance": null},
filters: {
user: ALL_BUYERS,
group: ALL_GROUPS
},
buyersNames: [],
groups: [],
},
methods: {
/**
* Add date range picker to element.
*/
setDateRangePicker() {
const d = moment();
const that = this;
$(`#${that.dateRangePickerElementId}`).daterangepicker({
startDate: d,
endDate: d,
ranges: {
'Today': [d, d],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), d],
'Last 14 Days': [moment().subtract(13, 'days'), d],
'Last 30 Days': [moment().subtract(29, 'days'), d],
'This Week': [moment().startOf("week"), moment().endOf("week")],
'Last Week': [moment().subtract(1, 'weeks').startOf('isoWeek'),
moment().subtract(1, 'weeks').endOf('isoWeek')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'),
moment().subtract(1, 'month').endOf('month')]
}
}, that.period_cb);
that.period_cb(d, d);
},
/**
* Show selected date range.
* @param {Date} start - Start date.
* @param {Date} end - End date.
*/
async period_cb(start, end){
this.startDate = start.format('MM-DD-YYYY');
this.endDate = end.format('MM-DD-YYYY');
$(`#${this.dateRangePickerElementId} span`).html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
await this.getData();
},
/**
* Set bryntum grid filters panel.
*/
async setFiltersPanel() {
let buyersFilterField = new Combo({
items: this.buyersNames,
placeholder: "Buyer",
style: "margin-right: 10px;",
value: this.filters.user,
cls: "filter-by-buyer",
listeners: {
action: (elem) => {
this.filters.user = elem.value;
this.getData();
}
}
});
let teamsFilterField = new Combo({
items: this.groups,
placeholder: "Team",
style: "margin-right: 10px;",
value: this.filters.group,
cls: "filter-by-team",
listeners: {
action: (elem) => {
this.filters.group = elem.value;
this.getData();
}
}
});
let dateRangeFilter = new Widget({
cls: "filter-by-date-range-field",
html: "<div id=\"period\" style=\"background: #fff; display: inline-block;\" class=\"ml-2 border pointer p-3\">" +
"<i class=\"fa fa-calendar\"></i> " +
"<span class=\"range\"></span> <i class=\"fa fa-caret-down\"></i>" +
"</div>"
})
let toolbar = new Toolbar({
items: [
buyersFilterField,
teamsFilterField,
dateRangeFilter
]
});
this.filtersPanel.instance = new Panel({
adopt: "filters",
floating: true,
centered: true,
cls: "filters-panel",
items: [
toolbar,
],
tbar: []
});
}
// /**
// * Set handlers to tabs.
// */
// setTabs() {
// let tabs = document.getElementsByClassName('js-tabs');
// if( tabs.length > 0 ) {
// for( let index = 0; index < tabs.length; index++ ) {
// (function(i){new Tab(tabs[index]);})(index);
// }
// }
// },
},
computed: {
},
async created() {
Mask.mask("Loading");
await this.setFiltersPanel();
Mask.unmask();
// setTimeout(this.setTabs, 1);
}
});
<div class="col-12" v-cloak id="app">{% verbatim %}
<div class="filters"></div>
<!-- <mediabuyers-report ref="mediabuyers-report"></mediabuyers-report>-->
<!-- <team-leaders-report ref="team-leaders-report"></team-leaders-report>-->
</div>
I try to set filter panel, i am using "Panel" widget.
vue.esm.browser.min.js:6 TypeError: Cannot read property 'childNodes' of null
at Panel.startConfigure (grid.module.js:10)
at Panel.startConfigure (grid.module.js:10)
at Panel.setConfig (grid.module.js:10)
at Panel.setConfig (grid.module.js:10)
at Panel.configure (grid.module.js:10)
at Panel.construct (grid.module.js:10)
at Panel.construct (grid.module.js:10)
at Panel.construct (grid.module.js:10)
at Panel.construct (grid.module.js:10)
at new Base (grid.module.js:10
)
