dotnetreport-ng 5.1.1 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/dotnetreport-ng.umd.js +2 -2
- package/bundles/dotnetreport-ng.umd.js.map +1 -1
- package/dotnetreport-ng-5.2.0.tgz +0 -0
- package/esm2015/lib/dotnetdashboard/dotnetdashboard.component.js +1180 -1165
- package/esm2015/lib/dotnetreport/dotnetreport.component.js +1180 -1165
- package/fesm2015/dotnetreport-ng.js +2359 -2329
- package/fesm2015/dotnetreport-ng.js.map +1 -1
- package/package.json +24 -31
- package/dotnetreport-ng-5.1.1.tgz +0 -0
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
this.ngOnInit();
|
|
105
105
|
};
|
|
106
106
|
DotnetreportComponent.prototype.renderKOTemplates = function () {
|
|
107
|
-
this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n <!-- Dotnet Report HTML Templates -->\n<script type=\"text/html\" id=\"report-filter\">\n <div class=\"form-group\">\n <!-- ko if: !hasForeignKey-->\n <!-- ko if: fieldType=='DateTime'-->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n to\n <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n <!-- /ko -->\n <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n <option value=\"\"></option>\n <option>Today</option>\n <option>Today +</option>\n <option>Today -</option>\n <option>Yesterday</option>\n <option>This Week</option>\n <option>Last Week</option>\n <option>This Month</option>\n <option>Last Month</option>\n <option>This Year</option>\n <option>Last Year</option>\n <option>This Month To Date</option>\n <option>This Year To Date</option>\n <option>Last 30 Days</option>\n <optgroup label=\"Comparison Options\">\n <option>>= Today</option>\n <option><= Today</option>\n <option>>= Today +</option>\n <option><= Today +</option>\n <option>>= Today -</option>\n <option><= Today -</option>\n </optgroup>\n </select>\n <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n </div>\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n to\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n <option value=\"1\">Yes</option>\n <option value=\"0\">No</option>\n </select>\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: hasForeignKey-->\n <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='='-->\n <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n <!-- /ko -->\n <!-- /ko -->\n </div>\n</script>\n<script type=\"text/html\" id=\"pager-template\">\n <div class=\"pager-container\">\n <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a> \n <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n <span class=\"pager-pageinfo\">\n <span>Page</span> \n <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n value: currentPage,\n attr: { max: pages() }\" /> \n <span>of</span> \n <span data-bind=\"text: pages\"></span>\n </span> \n\n <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a> \n <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-column-header\">\n <!-- ko foreach: Columns -->\n <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor(), 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n <!-- /ko -->\n <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <a href=\"\" data-bind=\"click: function(){ !$parent.IsDrillDown() ? $parents[3].changeSort(SqlField) : $parents[1].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n <span data-bind=\"text: (!$parent.IsDrillDown() ? $parents[3].pager.sortColumn() : $parents[1].pager.sortColumn()) === SqlField ? ((!$parent.IsDrillDown() ? $parents[3].pager.sortDescending() : $parents[1].pager.sortDescending()) ? '▼' : '▲') : ''\"></span>\n </a>\n <!-- /ko -->\n\n <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n <div class=\"dropup\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n <span class=\"fa fa-clone\"></span> Outer Group\n </a>\n </li>\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\"></span> Field Settings\n </a>\n </li>\n </ul>\n </div>\n </div>\n\n </th>\n <!-- /ko -->\n</script>\n\n<script type=\"text/html\" id=\"report-column\">\n <!-- ko foreach: Items -->\n <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign() ? fieldAlign() : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n <div data-bind=\"style: {'width': fieldWidth }\">\n <!-- ko if: LinkTo-->\n <a data-bind=\"attr: {href: LinkTo}\"><span data-bind=\"html: FormattedValue\"></span></a>\n <!-- /ko-->\n <!-- ko ifnot: LinkTo-->\n <span data-bind=\"html: FormattedValue\"></span>\n <!-- /ko-->\n </div>\n </td>\n</script>\n\n<script type=\"text/html\" id=\"report-pivot\">\n <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n <table class=\"table table-hover table-condensed\">\n <thead>\n <tr>\n <th></th>\n <!-- ko foreach: Rows -->\n <th>\n <span data-bind=\"text: Items[0].FormattedValue\"></span>\n </th>\n <!-- /ko -->\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Columns\">\n <tr>\n <!-- ko if: $index() > 0 -->\n <td>\n <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n </td>\n <!-- ko foreach: $parent.Rows -->\n <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tbody>\n </table>\n\n </div>\n\n</script>\n\n<script type=\"text/html\" id=\"report-table\">\n <div class=\"table-responsive\" >\n <table class=\"table table-hover table-condensed\">\n <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n <tr class=\"no-highlight\">\n <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n <th style=\"width: 30px; border-left: 1px solid;\"></th>\n <!-- /ko -->\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: $parent.rows -->\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n <!-- /ko -->\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- ko if: isExpanded -->\n <tr>\n <td style=\"width: 30px;\"></td>\n <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n <!-- ko if: DrillDownData -->\n <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n <thead>\n <tr class=\"no-highlight\">\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: Rows -->\n <tr>\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n <div class=\"form-inline small text-muted\">\n <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n </div>\n <div class=\"pull-left\">\n <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n </div>\n <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n <div data-bind=\"template: 'pager-template', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n </td>\n </tr>\n <!-- /ko -->\n <!-- /ko -->\n </tbody>\n <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n <td></td>\n <!-- /ko -->\n <!-- ko foreach: Items -->\n <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tfoot>\n <!-- /ko -->\n </table>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-template\">\n <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n <!-- ko if: $parent.ReportType() == 'Pivot' -->\n <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n <!-- /ko -->\n\n <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"clear-fix\"></div>\n\n <div data-bind=\"foreach: outerGroupData\">\n <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n <h6 data-bind=\"html: display\"></h6>\n <div class=\"\" style=\"padding-top: 5px;\"></div>\n <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n <!-- /ko -->\n </div>\n <!-- /ko -->\n</script>\n<script type=\"text/html\" id=\"admin-mode-template\">\n <div class=\"row\" style=\"padding: 10px 10px\">\n <div class=\"material-switch pull-right\">\n <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n <label for=\"admin-mode\" class=\"label-primary\"></label>\n </div>\n <div class=\"pull-right\">Admin Mode</div>\n </div>\n\n <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n </div>\n</script>\n<script type=\"text/html\" id=\"manage-access-template\">\n <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n\n <div class=\"form-group row\" data-bind=\"ifnot: manageAccess.isDashboard\">\n <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n <div class=\"col-md-3 col-sm-3\">\n <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n </div>\n <div class=\"col-md-1 col-sm-1\">\n <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n </div>\n </div>\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n </div>\n\n <div class=\"row small\">\n <div class=\"col-md-6\">\n <b>Manage by User</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.users -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <b>Delete by User</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"col-md-6\">\n <b>Manage by User Role</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.userRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User Role</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <br />\n <b>Delete by User Role</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</script>\n<script type=\"text/html\" id=\"filter-group\">\n <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n <div class=\"rules-group-container\">\n <div class=\"rules-group-header\">\n <div data-bind=\"visible: !isRoot\">\n <div class=\"pull-left\">\n <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n </label>\n </div>\n </div>\n <div class=\"pull-right\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button> \n </div>\n </div>\n <div data-bind=\"visible: isRoot\">\n <div class=\"btn-group btn-group-sm\">\n <label class=\"btn btn-primary\">Filter Conditions</label>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n\n <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n </div>\n </div>\n</script>\n<script type=\"text/html\" id=\"fly-filter-template\">\n <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n <div class=\"card-header\">\n <h5 class=\"card-title\">\n <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\n <i class=\"fa fa-filter\"></i>Choose filter options\n </a>\n </h5>\n </div>\n <div id=\"filter-panel\" class=\"card-body\">\n <div>\n <!-- ko foreach: FlyFilters -->\n <div class=\"row\">\n\n <div class=\"col-sm-5 col-xs-4\">\n <div data-bind=\"with: Field\" class=\"checkbox\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-xs-5\">\n <div data-bind=\"if: $parent.Apply\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"filter-inner\">\n <div class=\"rules-list\" >\n <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n <table class=\"table table-hover table-borderless\">\n <thead>\n <tr>\n <th style=\"width: 10%\"></th>\n <th style=\"width: 30%\">Field</th>\n <th style=\"width: 10%\"></th>\n <th style=\"width: 30%\">Filter</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Filters\">\n <tr class=\"rule-container\">\n <td>\n <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n <option>And</option>\n <option>Or</option>\n </select>\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-1].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td>\n <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parentContext.$parent.canAddSeries() && $index()==0 -->\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n <!--/ko -->\n </td>\n </tr>\n <!-- ko foreach: compareTo -->\n <tr>\n <td></td>\n <td style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></td>\n <td>Compare To</td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n </div>\n </td>\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n </div>\n\n <div class=\"rule-container\" >\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n <div>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n </div>\n </div>\n </div>\n\n</script>\n\n<script type=\"text/html\" id=\"filter-parameters\">\n <div class=\"table-responsive card\">\n <div class=\"card-body\">\n <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n <table class=\"table table-hover table-borderless\" data-bind=\"visible: showParameters\">\n <thead>\n <tr>\n <th style=\"width: 30%\">Filter</th>\n <th style=\"width: 20%\"></th>\n <th style=\"width: 30%\">Value</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Parameters\">\n <tr data-bind=\"ifnot: Hidden\">\n <td data-bind=\"text: DisplayName\">\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td></td>\n </tr>\n\n </tbody>\n </table>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-schedule\">\n <div data-bind=\"with: scheduleBuilder\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n Schedule Report\n </label>\n </div>\n <div data-bind=\"if: hasSchedule\">\n\n <div class=\"form-inline form-group\">\n <div class=\"row col-sm-12\">\n <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span> \n <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n <div data-bind=\"if: selectedOption() == 'once'\">\n on <input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n </div>\n <div data-bind=\"if: showDays\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n </div>\n <div data-bind=\"if: showDates\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n </div>\n <div data-bind=\"if: showMonths\">\n of <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n </div>\n <div data-bind=\"if: showAtTime\">\n at <select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n <option>AM</option>\n <option>PM</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"alert alert-info\">\n Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n <span data-bind=\"if: selectedOption() == 'once'\">\n on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n </span>\n <span data-bind=\"if: showDays\">\n on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n </span>\n <span data-bind=\"if: showDates\">\n on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n </span>\n <span data-bind=\"if: showMonths\">\n of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n </span>\n <span data-bind=\"if: showAtTime\">\n at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n </span>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Email to</label>\n <div class=\"col-sm-6\">\n <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n </div>\n <label class=\"col-sm-2 control-label\">Report Format</label>\n <div class=\"col-sm-2\">\n <select class=\"form-control\" data-bind=\"value: format\">\n <option value=\"EXCEL\">Excel</option>\n <option value=\"CSV\">CSV</option>\n <option value=\"PDF\">PDF</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-2 control-label\">\n <div class=\"checkbox\">\n <label title=\"Set a date to start sending scheduled report\">\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n Set Schedule Start Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n </div>\n </div>\n </div>\n\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-2 control-label\">\n <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n Set Schedule End Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n </div>\n </div>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-field-options\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n </div>\n <div class=\"modal-body needs-validation\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n Make Header Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n Make Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n Outer Group\n </label>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-link-edit\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Setup Link Field</h5>\n </div>\n <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n </div>\n </div>\n <div data-bind=\"if: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n Send field value as Report Filter Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n </div>\n </div>\n </div>\n <div data-bind=\"ifnot: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"url\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n </div>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n Send field value as Query Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-designer\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"myModalLabel\">\n <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/docs/designing-reports/\">\n <span class=\"fa fa-question-circle\"></span>\n </a>Design your Report\n </h5>\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>\n </div>\n <div class=\"modal-body needs-validation\">\n <h5><span class=\"fa fa-file\"></span> Choose Report Type</h5>\n <div class=\"row\">\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n <span class=\"fa fa-2x fa-list-alt\"></span>\n <p>List</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n <span class=\"fa fa-2x fa-table\"></span>\n <p>Summary</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n <span class=\"fa fa-2x fa-bar-chart\"></span>\n <p>Bar</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n <span class=\"fa fa-2x fa-pie-chart\"></span>\n <p>Pie</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n <span class=\"fa fa-2x fa-line-chart\"></span>\n <p>Line</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType()=='Map'}\">\n <span class=\"fa fa-2x fa-globe\"></span>\n <p>Map</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n <span class=\"fa fa-2x fa-window-maximize\"></span>\n <p>Single Value</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n <span class=\"fa fa-2x fa-random\"></span>\n <p>Pivot</p>\n </div>\n </div>\n </div>\n <hr />\n <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span> Choose Data for Report</h5>\n <div class=\"pull-right btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n </label>\n </div>\n <div class=\"clearfix\"></div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n </div>\n\n <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n <div data-bind=\"with: textQuery.searchFields\">\n <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n </div>\n </div>\n\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n <div class=\"small pull-left\">\n Check the fields you would like to use in the Report\n </div>\n <div class=\"pull-right btn-toolbar\">\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n </div>\n </div>\n <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: fieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n <br />\n <div class=\"card\">\n <div class=\"card-header\">\n <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n </div>\n <div class=\"card-body\">\n <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: jsonColumnName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n <br />\n <br />\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"row\">\n <div class=\"col-md-12 pull-right\">\n <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n </div>\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n <div class=\"alert alert-info\">\n You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n Please note that Custom Field must be chosen in within the same Section and their data types must match.\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-6 small\">\n Setup your Formula for calculating this Field\n </div>\n <div class=\"col-sm-6 right-align\">\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n </div>\n </div>\n <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n <div class=\"col-sm-12\">\n <div class=\"alert alert-info\">\n For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n </div>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Label</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Data Format</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n <!-- ko ifnot: formulaOnlyHasDateFields -->\n <option>String</option>\n <option>Integer</option>\n <option>Decimal</option>\n <option>Currency</option>\n <!-- /ko -->\n <!-- ko if: formulaOnlyHasDateFields -->\n <option>Days</option>\n <option>Hours</option>\n <option>Minutes</option>\n <option>Seconds</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n <div class=\"col-sm-10\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n </div>\n </div>\n\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Formula</label>\n <div class=\"col-sm-10\">\n <div data-bind=\"foreach: formulaFields\">\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n <div data-bind=\"if: setupFormula.isConstantValue\">\n <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n </div>\n </div>\n </div>\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n <option>+</option>\n <!-- /ko -->\n <option>-</option>\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <option>*</option>\n <option>/</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n <div data-bind=\"if: SelectedFields().length>0\">\n <hr />\n <h5><span class=\"fa fa-table\"></span> Selected data for the Report</h5>\n <div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n </div>\n <div data-bind=\"visible: ReportType()=='Map'\">\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Map Graph, the first field below has to be a Region, like a Country.\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Map Display</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n </div>\n </div>\n </div>\n <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n <li class=\"list-group-item\">\n <div class=\"row\">\n <div class=\"col\">\n <span class=\"fa fa-columns\"></span>\n <span data-bind=\"text: selectedFieldName\"></span>\n <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n </span>\n </div>\n <div class=\"col\">\n <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n </div>\n <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate()) && $parent.isChart() && $index()>0\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal() && (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <hr />\n <div>\n <h5><span class=\"fa fa-filter\"></span> Choose filters</h5>\n\n <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n </div>\n\n <div class=\"checkbox col-12\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n Allow setting up and saving filters on Report\n </label>\n </div>\n <br />\n </div>\n </div>\n </div>\n <hr />\n <div data-bind=\"if: SaveReport\">\n <h5><span class=\"fa fa-hourglass\"></span> Choose Schedule</h5>\n\n <div style=\"padding: 10px 10px\">\n <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n </div>\n <hr />\n </div>\n <div>\n <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n <label class=\"col-sm-2 control-label\">Report Name</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Report Description</label>\n <div class=\"col-sm-10\">\n <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n </div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Sort By</label>\n <div class=\"col-sm-6\">\n <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n </div>\n </div>\n <div data-bind=\"foreach: SortFields\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\"> Then Sort By</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n Include Total Row\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n Show only Unique Records\n </label>\n </div>\n <div class=\"form-group row\">\n <div class=\"checkbox col-md-2\">\n <label >\n <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n Max Records\n </label>\n </div>\n <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: isChart\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n Show Data along with Graph\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n Save Report\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n <label class=\"col-sm-2 control-label\">Choose Folder</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n </div>\n </div>\n\n <div data-bind=\"if: adminMode\">\n <hr />\n <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n </div>\n </div>\n </div>\n </script>\n ");
|
|
107
|
+
this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n <!-- Dotnet Report HTML Templates -->\n <script type=\"text/html\" id=\"report-filter\">\n <div class=\"form-group\">\n <!-- ko if: !hasForeignKey-->\n <!-- ko if: fieldType=='DateTime'-->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n to\n <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n <!-- /ko -->\n <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n <option value=\"\"></option>\n <option>Today</option>\n <option>Today +</option>\n <option>Today -</option>\n <option>Yesterday</option>\n <option>This Week</option>\n <option>Last Week</option>\n <option>This Month</option>\n <option>Last Month</option>\n <option>This Year</option>\n <option>Last Year</option>\n <option>This Month To Date</option>\n <option>This Year To Date</option>\n <option>Last 30 Days</option>\n <optgroup label=\"Comparison Options\">\n <option>>= Today</option>\n <option><= Today</option>\n <option>>= Today +</option>\n <option><= Today +</option>\n <option>>= Today -</option>\n <option><= Today -</option>\n </optgroup>\n </select>\n <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n </div>\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n to\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n <option value=\"1\">Yes</option>\n <option value=\"0\">No</option>\n </select>\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='='-->\n <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n <!-- /ko -->\n <!-- /ko -->\n </div>\n </script>\n <script type=\"text/html\" id=\"pager-template\">\n <div class=\"pager-container\">\n <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a> \n <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n <span class=\"pager-pageinfo\">\n <span>Page</span> \n <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n value: currentPage,\n attr: { max: pages() }\" /> \n <span>of</span> \n <span data-bind=\"text: pages\"></span>\n </span> \n \n <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a> \n <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-column-header\">\n <!-- ko foreach: Columns -->\n <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n <!-- /ko -->\n <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <a href=\"\" data-bind=\"click: function(){ $parents[3].pager ? $parents[3].changeSort(SqlField) : $parents[5].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n <span data-bind=\"text: ($parents[3].pager ? $parents[3].pager.sortColumn() : $parents[5].pager.sortColumn()) === SqlField ? (($parents[3].pager ? $parents[3].pager.sortDescending() : $parents[5].pager.sortDescending()) ? '▼' : '▲') : ''\"></span>\n </a>\n <!-- /ko -->\n \n <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n <div class=\"dropup\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n <span class=\"fa fa-clone\"></span> Outer Group\n </a>\n </li>\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\"></span> Field Settings\n </a>\n </li>\n </ul>\n </div>\n </div>\n \n </th>\n <!-- /ko -->\n </script>\n \n <script type=\"text/html\" id=\"report-column\">\n <!-- ko foreach: Items -->\n <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n <div data-bind=\"style: {'width': fieldWidth }\">\n <!-- ko if: LinkTo-->\n <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: FormattedValue\"></span></a>\n <!-- /ko-->\n <!-- ko ifnot: LinkTo-->\n <span data-bind=\"html: FormattedValue\"></span>\n <!-- /ko-->\n </div>\n </td>\n </script>\n \n <script type=\"text/html\" id=\"report-pivot\">\n <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n <table class=\"table table-hover table-condensed\">\n <thead>\n <tr>\n <th></th>\n <!-- ko foreach: Rows -->\n <th>\n <span data-bind=\"text: Items[0].FormattedValue\"></span>\n </th>\n <!-- /ko -->\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Columns\">\n <tr>\n <!-- ko if: $index() > 0 -->\n <td>\n <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n </td>\n <!-- ko foreach: $parent.Rows -->\n <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tbody>\n </table>\n \n </div>\n \n </script>\n \n <script type=\"text/html\" id=\"report-table\">\n <div class=\"table-responsive\" >\n <table class=\"table table-hover table-condensed\">\n <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n <tr class=\"no-highlight\">\n <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n <th style=\"width: 30px; border-left: 1px solid;\"></th>\n <!-- /ko -->\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n <!-- ko if: $parents[2].ReportType()=='Single' -->\n <div style=\"text-align: center; width: 100%\">\n <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n </div>\n <!-- /ko -->\n <!-- ko if: $parents[2].ReportType()!='Single' -->\n No records found\n <!-- /ko -->\n </td>\n </tr>\n <!-- ko foreach: $parent.rows -->\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n <!-- /ko -->\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- ko if: isExpanded -->\n <tr>\n <td style=\"width: 30px;\"></td>\n <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n <!-- ko if: DrillDownData -->\n <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n <thead>\n <tr class=\"no-highlight\">\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: Rows -->\n <tr>\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n <div class=\"form-inline small text-muted\">\n <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n </div>\n <div class=\"pull-left\">\n <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n </div>\n <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n <div data-bind=\"template: 'pager-template', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n </td>\n </tr>\n <!-- /ko -->\n <!-- /ko -->\n </tbody>\n <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n <td></td>\n <!-- /ko -->\n <!-- ko foreach: Items -->\n <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tfoot>\n <!-- /ko -->\n </table>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-template\">\n <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n <!-- ko if: $parent.ReportType() == 'Pivot' -->\n <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n <!-- /ko -->\n \n <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"clear-fix\"></div>\n \n <div data-bind=\"foreach: outerGroupData\">\n <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n <h6 data-bind=\"html: display\"></h6>\n <div class=\"\" style=\"padding-top: 5px;\"></div>\n <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n <!-- /ko -->\n </div>\n <!-- /ko -->\n </script>\n <script type=\"text/html\" id=\"admin-mode-template\">\n <div class=\"row\" style=\"padding: 10px 10px\">\n <div class=\"material-switch pull-right\">\n <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n <label for=\"admin-mode\" class=\"label-primary\"></label>\n </div>\n <div class=\"pull-right\">Admin Mode</div>\n </div>\n \n <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n </div>\n </script>\n <script type=\"text/html\" id=\"manage-access-template\">\n <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n \n <div class=\"form-group row\">\n <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n <div class=\"col-md-3 col-sm-3\">\n <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n </div>\n <div class=\"col-md-1 col-sm-1\">\n <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n </div>\n </div>\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n </div>\n \n <div class=\"row small\">\n <div class=\"col-md-6\">\n <b>Manage by User</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.users -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <b>Delete by User</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"col-md-6\">\n <b>Manage by User Role</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.userRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User Role</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <br />\n <b>Delete by User Role</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </script>\n <script type=\"text/html\" id=\"filter-group\">\n <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n <div class=\"rules-group-container\">\n <div class=\"rules-group-header\">\n <div data-bind=\"visible: !isRoot\">\n <div class=\"pull-left\">\n <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n </label>\n </div>\n </div>\n <div class=\"pull-right\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button> \n </div>\n </div>\n <div data-bind=\"visible: isRoot\">\n <div class=\"btn-group btn-group-sm\">\n <label class=\"btn btn-primary\">Filter Conditions</label>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n \n <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n </div>\n </div>\n </script>\n <script type=\"text/html\" id=\"fly-filter-template\">\n <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n <div class=\"card-header\">\n <h5 class=\"card-title\">\n <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n <i class=\"fa fa-filter\"></i>Choose filter options\n </a>\n </h5>\n </div>\n <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }\" class=\"card-body collapse collapsed\">\n <div>\n <!-- ko foreach: FlyFilters -->\n <div class=\"row\">\n <div class=\"col-sm-5 col-xs-4\">\n <div data-bind=\"with: Field\" class=\"checkbox\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFilterName\"></span>\n </label>\n </div>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n <div data-bind=\"if: $parent.Apply\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"filter-inner\">\n <div class=\"rules-list\" >\n <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n <table class=\"table table-hover table-borderless\">\n <thead>\n <tr>\n <th class=\"row\">\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-4\">Field</div>\n <div class=\"col-md-2\"></div>\n <div class=\"col-md-4\">Filter</div>\n <div class=\"col-md-1\"></div>\n </th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Filters\">\n <tr class=\"rule-container\">\n <td class=\"row\">\n <div class=\"col-md-1\">\n <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n <option>And</option>\n <option>Or</option>\n </select>\n </div>\n <div class=\"col-md-3\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-2].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n </div>\n </div>\n <div class=\"col-md-2\">\n <div data-bind=\"with: Field\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n </div>\n <div class=\"col-md-5\">\n <div data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parents[$parents.length-2].canAddSeries() && $index()==0 -->\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n <!--/ko -->\n <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n </div>\n <div class=\"col-md-1\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n </div>\n </td>\n </tr>\n <!-- ko foreach: compareTo -->\n <tr>\n <td class=\"row\">\n <div class=\"col-md-6\"> </div>\n <div class=\"col-md-2\">\n <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n <span>Compare To</span>\n </div>\n <div class=\"col-md-4\">\n <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n </div>\n </td>\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n </div>\n \n <div class=\"rule-container\" >\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n <div>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n </div>\n </div>\n </div>\n \n </script>\n \n <script type=\"text/html\" id=\"filter-parameters\">\n <div class=\"table-responsive card\">\n <div class=\"card-body\">\n <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n <table class=\"table table-hover table-borderless\" data-bind=\"visible: showParameters\">\n <thead>\n <tr>\n <th style=\"width: 30%\">Filter</th>\n <th style=\"width: 20%\"></th>\n <th style=\"width: 30%\">Value</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Parameters\">\n <tr data-bind=\"ifnot: Hidden\">\n <td data-bind=\"text: DisplayName\">\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td></td>\n </tr>\n \n </tbody>\n </table>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-schedule\">\n <div data-bind=\"with: scheduleBuilder\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n Schedule Report\n </label>\n </div>\n <div data-bind=\"if: hasSchedule\">\n <div class=\"form-inline form-group\">\n <div class=\"row col-sm-12\">\n <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span> \n <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n <div data-bind=\"if: selectedOption() == 'once'\">\n on <input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n </div>\n <div data-bind=\"if: showDays\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n </div>\n <div data-bind=\"if: showDates\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n </div>\n <div data-bind=\"if: showMonths\">\n of <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n </div>\n <div data-bind=\"if: showAtTime\">\n at <select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n <option>AM</option>\n <option>PM</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"alert alert-info\">\n Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n <span data-bind=\"if: selectedOption() == 'once'\">\n on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n </span>\n <span data-bind=\"if: showDays\">\n on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n </span>\n <span data-bind=\"if: showDates\">\n on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n </span>\n <span data-bind=\"if: showMonths\">\n of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n </span>\n <span data-bind=\"if: showAtTime\">\n at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n </span>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Email to</label>\n <div class=\"col-sm-6\">\n <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n </div>\n <label class=\"col-sm-2 control-label\">Report Format</label>\n <div class=\"col-sm-2\">\n <select class=\"form-control\" data-bind=\"value: format\">\n <option value=\"EXCEL\">Excel</option>\n <option value=\"CSV\">CSV</option>\n <option value=\"PDF\">PDF</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-4 control-label\">\n <div class=\"checkbox\">\n <label title=\"Set a date to start sending scheduled report\">\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n Set Schedule Start Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n </div>\n </div>\n </div>\n \n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-4 control-label\">\n <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n Set Schedule End Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n </div>\n </div>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-field-options\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n </div>\n <div class=\"modal-body needs-validation\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n Make Header Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n Make Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n Outer Group\n </label>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-link-edit\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Setup Link Field</h5>\n </div>\n <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n </div>\n </div>\n <div data-bind=\"if: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n Send field value as Report Filter Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n </div>\n </div>\n </div>\n <div data-bind=\"ifnot: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n </div>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n Send field value as Query Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-designer\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"myModalLabel\">\n <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n <span class=\"fa fa-question-circle\"></span>\n </a>Design your Report\n </h5>\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>\n </div>\n <div class=\"modal-body needs-validation\">\n <h5><span class=\"fa fa-file\"></span> Choose Report Type</h5>\n <div class=\"row\">\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n <span class=\"fa fa-2x fa-list-alt\"></span>\n <p>List</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n <span class=\"fa fa-2x fa-table\"></span>\n <p>Summary</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n <span class=\"fa fa-2x fa-bar-chart\"></span>\n <p>Bar</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n <span class=\"fa fa-2x fa-pie-chart\"></span>\n <p>Pie</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n <span class=\"fa fa-2x fa-line-chart\"></span>\n <p>Line</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n <span class=\"fa fa-2x fa-globe\"></span>\n <p>Map</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n <span class=\"fa fa-2x fa-window-maximize\"></span>\n <p>Single Value</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n <span class=\"fa fa-2x fa-random\"></span>\n <p>Pivot</p>\n </div>\n </div>\n </div>\n <hr />\n <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span> Choose Data for Report</h5>\n <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n </label>\n </div>\n <div class=\"clearfix\"></div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n </div>\n \n <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n <div data-bind=\"with: textQuery.searchFields\">\n <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n </div>\n </div>\n \n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n <div class=\"small pull-left\">\n Check the fields you would like to use in the Report\n </div>\n <div class=\"pull-right btn-toolbar\">\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n \n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n </div>\n </div>\n <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: fieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n <br />\n <div class=\"card\">\n <div class=\"card-header\">\n <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n </div>\n <div class=\"card-body\">\n <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: jsonColumnName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n <br />\n <br />\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"row\">\n <div class=\"col-md-12 pull-right\">\n <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n \n </div>\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n <div class=\"alert alert-info\">\n You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n Please note that Custom Field must be chosen in within the same Section and their data types must match.\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-6 small\">\n Setup your Formula for calculating this Field\n </div>\n <div class=\"col-sm-6 right-align\">\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n </div>\n </div>\n <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n <div class=\"col-sm-12\">\n <div class=\"alert alert-info\">\n For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n </div>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Label</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Data Format</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n <!-- ko ifnot: formulaOnlyHasDateFields -->\n <option>String</option>\n <option>Integer</option>\n <option>Decimal</option>\n <option>Currency</option>\n <!-- /ko -->\n <!-- ko if: formulaOnlyHasDateFields -->\n <option>Days</option>\n <option>Hours</option>\n <option>Minutes</option>\n <option>Seconds</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n <div class=\"col-sm-10\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n </div>\n </div>\n \n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Formula</label>\n <div class=\"col-sm-10\">\n <div data-bind=\"foreach: formulaFields\">\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n <div data-bind=\"if: setupFormula.isConstantValue\">\n <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n </div>\n </div>\n </div>\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n <option>+</option>\n <!-- /ko -->\n <option>-</option>\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <option>*</option>\n <option>/</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n <div data-bind=\"if: SelectedFields().length>0\">\n <hr />\n <h5><span class=\"fa fa-table\"></span> Selected data for the Report</h5>\n <div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n </div>\n <div data-bind=\"visible: ReportType()=='Map'\">\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Map Graph, the first field below has to be a Region, like a Country.\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Map Display</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n </div>\n </div>\n </div>\n <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n <li class=\"list-group-item\">\n <div class=\"row\">\n <div class=\"col\">\n <span class=\"fa fa-columns\"></span>\n <span data-bind=\"text: selectedFieldName\"></span>\n <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n </span>\n </div>\n <div class=\"col\">\n <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n </div>\n <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate()) && $parent.isChart() && $index()>0\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal() && (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <hr />\n <div>\n <h5><span class=\"fa fa-filter\"></span> Choose filters</h5>\n \n <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n </div>\n \n <div class=\"checkbox col-12\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n Allow setting up and saving filters on Report\n </label>\n </div>\n <br />\n </div>\n </div>\n </div>\n <hr />\n <div data-bind=\"if: SaveReport\">\n <h5><span class=\"fa fa-hourglass\"></span> Choose Schedule</h5>\n \n <div style=\"padding: 10px 10px\">\n <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n </div>\n <hr />\n </div>\n <div>\n <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n <label class=\"col-sm-2 control-label\">Report Name</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Report Description</label>\n <div class=\"col-sm-10\">\n <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n </div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Sort By</label>\n <div class=\"col-sm-6\">\n <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n </div>\n </div>\n <div data-bind=\"foreach: SortFields\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\"> Then Sort By</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n Include Total Row\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n Show only Unique Records\n </label>\n </div>\n <div class=\"form-group row\">\n <div class=\"checkbox col-md-2\">\n <label >\n <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n Max Records\n </label>\n </div>\n <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: isChart\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n Show Data along with Graph\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n Save Report\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n <label class=\"col-sm-2 control-label\">Choose Folder</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n </div>\n </div>\n \n <div data-bind=\"if: adminMode\">\n <hr />\n <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n </div>\n </div>\n </div>\n </script>\n ");
|
|
108
108
|
this.cdref.detectChanges();
|
|
109
109
|
};
|
|
110
110
|
DotnetreportComponent.prototype.bindWindowResize = function (vm) {
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
this.ngOnInit();
|
|
208
208
|
};
|
|
209
209
|
DotnetdashboardComponent.prototype.renderKOTemplates = function () {
|
|
210
|
-
this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n <!-- Dotnet Report HTML Templates -->\n<script type=\"text/html\" id=\"report-filter\">\n <div class=\"form-group\">\n <!-- ko if: !hasForeignKey-->\n <!-- ko if: fieldType=='DateTime'-->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n to\n <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n <!-- /ko -->\n <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n <option value=\"\"></option>\n <option>Today</option>\n <option>Today +</option>\n <option>Today -</option>\n <option>Yesterday</option>\n <option>This Week</option>\n <option>Last Week</option>\n <option>This Month</option>\n <option>Last Month</option>\n <option>This Year</option>\n <option>Last Year</option>\n <option>This Month To Date</option>\n <option>This Year To Date</option>\n <option>Last 30 Days</option>\n <optgroup label=\"Comparison Options\">\n <option>>= Today</option>\n <option><= Today</option>\n <option>>= Today +</option>\n <option><= Today +</option>\n <option>>= Today -</option>\n <option><= Today -</option>\n </optgroup>\n </select>\n <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n </div>\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n to\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n <option value=\"1\">Yes</option>\n <option value=\"0\">No</option>\n </select>\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: hasForeignKey-->\n <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='='-->\n <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n <!-- /ko -->\n <!-- /ko -->\n </div>\n</script>\n<script type=\"text/html\" id=\"pager-template\">\n <div class=\"pager-container\">\n <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a> \n <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n <span class=\"pager-pageinfo\">\n <span>Page</span> \n <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n value: currentPage,\n attr: { max: pages() }\" /> \n <span>of</span> \n <span data-bind=\"text: pages\"></span>\n </span> \n\n <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a> \n <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-column-header\">\n <!-- ko foreach: Columns -->\n <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor(), 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n <!-- /ko -->\n <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <a href=\"\" data-bind=\"click: function(){ !$parent.IsDrillDown() ? $parents[3].changeSort(SqlField) : $parents[1].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n <span data-bind=\"text: (!$parent.IsDrillDown() ? $parents[3].pager.sortColumn() : $parents[1].pager.sortColumn()) === SqlField ? ((!$parent.IsDrillDown() ? $parents[3].pager.sortDescending() : $parents[1].pager.sortDescending()) ? '▼' : '▲') : ''\"></span>\n </a>\n <!-- /ko -->\n\n <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n <div class=\"dropup\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n <span class=\"fa fa-clone\"></span> Outer Group\n </a>\n </li>\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\"></span> Field Settings\n </a>\n </li>\n </ul>\n </div>\n </div>\n\n </th>\n <!-- /ko -->\n</script>\n\n<script type=\"text/html\" id=\"report-column\">\n <!-- ko foreach: Items -->\n <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign() ? fieldAlign() : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n <div data-bind=\"style: {'width': fieldWidth }\">\n <!-- ko if: LinkTo-->\n <a data-bind=\"attr: {href: LinkTo}\"><span data-bind=\"html: FormattedValue\"></span></a>\n <!-- /ko-->\n <!-- ko ifnot: LinkTo-->\n <span data-bind=\"html: FormattedValue\"></span>\n <!-- /ko-->\n </div>\n </td>\n</script>\n\n<script type=\"text/html\" id=\"report-pivot\">\n <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n <table class=\"table table-hover table-condensed\">\n <thead>\n <tr>\n <th></th>\n <!-- ko foreach: Rows -->\n <th>\n <span data-bind=\"text: Items[0].FormattedValue\"></span>\n </th>\n <!-- /ko -->\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Columns\">\n <tr>\n <!-- ko if: $index() > 0 -->\n <td>\n <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n </td>\n <!-- ko foreach: $parent.Rows -->\n <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tbody>\n </table>\n\n </div>\n\n</script>\n\n<script type=\"text/html\" id=\"report-table\">\n <div class=\"table-responsive\" >\n <table class=\"table table-hover table-condensed\">\n <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n <tr class=\"no-highlight\">\n <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n <th style=\"width: 30px; border-left: 1px solid;\"></th>\n <!-- /ko -->\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: $parent.rows -->\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n <!-- /ko -->\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- ko if: isExpanded -->\n <tr>\n <td style=\"width: 30px;\"></td>\n <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n <!-- ko if: DrillDownData -->\n <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n <thead>\n <tr class=\"no-highlight\">\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: Rows -->\n <tr>\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n <div class=\"form-inline small text-muted\">\n <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n </div>\n <div class=\"pull-left\">\n <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n </div>\n <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n <div data-bind=\"template: 'pager-template', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n </td>\n </tr>\n <!-- /ko -->\n <!-- /ko -->\n </tbody>\n <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n <td></td>\n <!-- /ko -->\n <!-- ko foreach: Items -->\n <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tfoot>\n <!-- /ko -->\n </table>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-template\">\n <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n <!-- ko if: $parent.ReportType() == 'Pivot' -->\n <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n <!-- /ko -->\n\n <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"clear-fix\"></div>\n\n <div data-bind=\"foreach: outerGroupData\">\n <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n <h6 data-bind=\"html: display\"></h6>\n <div class=\"\" style=\"padding-top: 5px;\"></div>\n <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n <!-- /ko -->\n </div>\n <!-- /ko -->\n</script>\n<script type=\"text/html\" id=\"admin-mode-template\">\n <div class=\"row\" style=\"padding: 10px 10px\">\n <div class=\"material-switch pull-right\">\n <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n <label for=\"admin-mode\" class=\"label-primary\"></label>\n </div>\n <div class=\"pull-right\">Admin Mode</div>\n </div>\n\n <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n </div>\n</script>\n<script type=\"text/html\" id=\"manage-access-template\">\n <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n\n <div class=\"form-group row\" data-bind=\"ifnot: manageAccess.isDashboard\">\n <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n <div class=\"col-md-3 col-sm-3\">\n <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n </div>\n <div class=\"col-md-1 col-sm-1\">\n <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n </div>\n </div>\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n </div>\n\n <div class=\"row small\">\n <div class=\"col-md-6\">\n <b>Manage by User</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.users -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <b>Delete by User</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"col-md-6\">\n <b>Manage by User Role</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.userRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User Role</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <br />\n <b>Delete by User Role</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</script>\n<script type=\"text/html\" id=\"filter-group\">\n <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n <div class=\"rules-group-container\">\n <div class=\"rules-group-header\">\n <div data-bind=\"visible: !isRoot\">\n <div class=\"pull-left\">\n <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n </label>\n </div>\n </div>\n <div class=\"pull-right\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button> \n </div>\n </div>\n <div data-bind=\"visible: isRoot\">\n <div class=\"btn-group btn-group-sm\">\n <label class=\"btn btn-primary\">Filter Conditions</label>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n\n <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n </div>\n </div>\n</script>\n<script type=\"text/html\" id=\"fly-filter-template\">\n <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n <div class=\"card-header\">\n <h5 class=\"card-title\">\n <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\n <i class=\"fa fa-filter\"></i>Choose filter options\n </a>\n </h5>\n </div>\n <div id=\"filter-panel\" class=\"card-body\">\n <div>\n <!-- ko foreach: FlyFilters -->\n <div class=\"row\">\n\n <div class=\"col-sm-5 col-xs-4\">\n <div data-bind=\"with: Field\" class=\"checkbox\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-xs-5\">\n <div data-bind=\"if: $parent.Apply\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"filter-inner\">\n <div class=\"rules-list\" >\n <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n <table class=\"table table-hover table-borderless\">\n <thead>\n <tr>\n <th style=\"width: 10%\"></th>\n <th style=\"width: 30%\">Field</th>\n <th style=\"width: 10%\"></th>\n <th style=\"width: 30%\">Filter</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Filters\">\n <tr class=\"rule-container\">\n <td>\n <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n <option>And</option>\n <option>Or</option>\n </select>\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-1].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td>\n <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parentContext.$parent.canAddSeries() && $index()==0 -->\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n <!--/ko -->\n </td>\n </tr>\n <!-- ko foreach: compareTo -->\n <tr>\n <td></td>\n <td style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></td>\n <td>Compare To</td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n </div>\n </td>\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n </div>\n\n <div class=\"rule-container\" >\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n <div>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n </div>\n </div>\n </div>\n\n</script>\n\n<script type=\"text/html\" id=\"filter-parameters\">\n <div class=\"table-responsive card\">\n <div class=\"card-body\">\n <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n <table class=\"table table-hover table-borderless\" data-bind=\"visible: showParameters\">\n <thead>\n <tr>\n <th style=\"width: 30%\">Filter</th>\n <th style=\"width: 20%\"></th>\n <th style=\"width: 30%\">Value</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Parameters\">\n <tr data-bind=\"ifnot: Hidden\">\n <td data-bind=\"text: DisplayName\">\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td></td>\n </tr>\n\n </tbody>\n </table>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-schedule\">\n <div data-bind=\"with: scheduleBuilder\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n Schedule Report\n </label>\n </div>\n <div data-bind=\"if: hasSchedule\">\n\n <div class=\"form-inline form-group\">\n <div class=\"row col-sm-12\">\n <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span> \n <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n <div data-bind=\"if: selectedOption() == 'once'\">\n on <input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n </div>\n <div data-bind=\"if: showDays\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n </div>\n <div data-bind=\"if: showDates\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n </div>\n <div data-bind=\"if: showMonths\">\n of <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n </div>\n <div data-bind=\"if: showAtTime\">\n at <select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n <option>AM</option>\n <option>PM</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"alert alert-info\">\n Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n <span data-bind=\"if: selectedOption() == 'once'\">\n on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n </span>\n <span data-bind=\"if: showDays\">\n on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n </span>\n <span data-bind=\"if: showDates\">\n on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n </span>\n <span data-bind=\"if: showMonths\">\n of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n </span>\n <span data-bind=\"if: showAtTime\">\n at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n </span>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Email to</label>\n <div class=\"col-sm-6\">\n <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n </div>\n <label class=\"col-sm-2 control-label\">Report Format</label>\n <div class=\"col-sm-2\">\n <select class=\"form-control\" data-bind=\"value: format\">\n <option value=\"EXCEL\">Excel</option>\n <option value=\"CSV\">CSV</option>\n <option value=\"PDF\">PDF</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-2 control-label\">\n <div class=\"checkbox\">\n <label title=\"Set a date to start sending scheduled report\">\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n Set Schedule Start Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n </div>\n </div>\n </div>\n\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-2 control-label\">\n <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n Set Schedule End Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n </div>\n </div>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-field-options\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n </div>\n <div class=\"modal-body needs-validation\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n Make Header Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n Make Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n Outer Group\n </label>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-link-edit\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Setup Link Field</h5>\n </div>\n <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n </div>\n </div>\n <div data-bind=\"if: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n Send field value as Report Filter Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n </div>\n </div>\n </div>\n <div data-bind=\"ifnot: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"url\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n </div>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n Send field value as Query Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n </div>\n </div>\n </div>\n</script>\n\n<script type=\"text/html\" id=\"report-designer\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"myModalLabel\">\n <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/docs/designing-reports/\">\n <span class=\"fa fa-question-circle\"></span>\n </a>Design your Report\n </h5>\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>\n </div>\n <div class=\"modal-body needs-validation\">\n <h5><span class=\"fa fa-file\"></span> Choose Report Type</h5>\n <div class=\"row\">\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n <span class=\"fa fa-2x fa-list-alt\"></span>\n <p>List</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n <span class=\"fa fa-2x fa-table\"></span>\n <p>Summary</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n <span class=\"fa fa-2x fa-bar-chart\"></span>\n <p>Bar</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n <span class=\"fa fa-2x fa-pie-chart\"></span>\n <p>Pie</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n <span class=\"fa fa-2x fa-line-chart\"></span>\n <p>Line</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType()=='Map'}\">\n <span class=\"fa fa-2x fa-globe\"></span>\n <p>Map</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n <span class=\"fa fa-2x fa-window-maximize\"></span>\n <p>Single Value</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n <span class=\"fa fa-2x fa-random\"></span>\n <p>Pivot</p>\n </div>\n </div>\n </div>\n <hr />\n <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span> Choose Data for Report</h5>\n <div class=\"pull-right btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n </label>\n </div>\n <div class=\"clearfix\"></div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n </div>\n\n <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n <div data-bind=\"with: textQuery.searchFields\">\n <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n </div>\n </div>\n\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n <div class=\"small pull-left\">\n Check the fields you would like to use in the Report\n </div>\n <div class=\"pull-right btn-toolbar\">\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n </div>\n </div>\n <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: fieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n <br />\n <div class=\"card\">\n <div class=\"card-header\">\n <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n </div>\n <div class=\"card-body\">\n <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: jsonColumnName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n <br />\n <br />\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"row\">\n <div class=\"col-md-12 pull-right\">\n <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n </div>\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n <div class=\"alert alert-info\">\n You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n Please note that Custom Field must be chosen in within the same Section and their data types must match.\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-6 small\">\n Setup your Formula for calculating this Field\n </div>\n <div class=\"col-sm-6 right-align\">\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n </div>\n </div>\n <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n <div class=\"col-sm-12\">\n <div class=\"alert alert-info\">\n For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n </div>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Label</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Data Format</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n <!-- ko ifnot: formulaOnlyHasDateFields -->\n <option>String</option>\n <option>Integer</option>\n <option>Decimal</option>\n <option>Currency</option>\n <!-- /ko -->\n <!-- ko if: formulaOnlyHasDateFields -->\n <option>Days</option>\n <option>Hours</option>\n <option>Minutes</option>\n <option>Seconds</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n <div class=\"col-sm-10\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n </div>\n </div>\n\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Formula</label>\n <div class=\"col-sm-10\">\n <div data-bind=\"foreach: formulaFields\">\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n <div data-bind=\"if: setupFormula.isConstantValue\">\n <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n </div>\n </div>\n </div>\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n <option>+</option>\n <!-- /ko -->\n <option>-</option>\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <option>*</option>\n <option>/</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n <div data-bind=\"if: SelectedFields().length>0\">\n <hr />\n <h5><span class=\"fa fa-table\"></span> Selected data for the Report</h5>\n <div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n </div>\n <div data-bind=\"visible: ReportType()=='Map'\">\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Map Graph, the first field below has to be a Region, like a Country.\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Map Display</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n </div>\n </div>\n </div>\n <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n <li class=\"list-group-item\">\n <div class=\"row\">\n <div class=\"col\">\n <span class=\"fa fa-columns\"></span>\n <span data-bind=\"text: selectedFieldName\"></span>\n <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n </span>\n </div>\n <div class=\"col\">\n <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n </div>\n <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate()) && $parent.isChart() && $index()>0\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal() && (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <hr />\n <div>\n <h5><span class=\"fa fa-filter\"></span> Choose filters</h5>\n\n <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n </div>\n\n <div class=\"checkbox col-12\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n Allow setting up and saving filters on Report\n </label>\n </div>\n <br />\n </div>\n </div>\n </div>\n <hr />\n <div data-bind=\"if: SaveReport\">\n <h5><span class=\"fa fa-hourglass\"></span> Choose Schedule</h5>\n\n <div style=\"padding: 10px 10px\">\n <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n </div>\n <hr />\n </div>\n <div>\n <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n <label class=\"col-sm-2 control-label\">Report Name</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Report Description</label>\n <div class=\"col-sm-10\">\n <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n </div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Sort By</label>\n <div class=\"col-sm-6\">\n <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n </div>\n </div>\n <div data-bind=\"foreach: SortFields\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\"> Then Sort By</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n Include Total Row\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n Show only Unique Records\n </label>\n </div>\n <div class=\"form-group row\">\n <div class=\"checkbox col-md-2\">\n <label >\n <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n Max Records\n </label>\n </div>\n <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: isChart\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n Show Data along with Graph\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n Save Report\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n <label class=\"col-sm-2 control-label\">Choose Folder</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n </div>\n </div>\n\n <div data-bind=\"if: adminMode\">\n <hr />\n <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n </div>\n </div>\n </div>\n </script>\n ");
|
|
210
|
+
this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n <!-- Dotnet Report HTML Templates -->\n <script type=\"text/html\" id=\"report-filter\">\n <div class=\"form-group\">\n <!-- ko if: !hasForeignKey-->\n <!-- ko if: fieldType=='DateTime'-->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n to\n <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n <!-- /ko -->\n <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n <option value=\"\"></option>\n <option>Today</option>\n <option>Today +</option>\n <option>Today -</option>\n <option>Yesterday</option>\n <option>This Week</option>\n <option>Last Week</option>\n <option>This Month</option>\n <option>Last Month</option>\n <option>This Year</option>\n <option>Last Year</option>\n <option>This Month To Date</option>\n <option>This Year To Date</option>\n <option>Last 30 Days</option>\n <optgroup label=\"Comparison Options\">\n <option>>= Today</option>\n <option><= Today</option>\n <option>>= Today +</option>\n <option><= Today +</option>\n <option>>= Today -</option>\n <option><= Today -</option>\n </optgroup>\n </select>\n <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n </div>\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n From\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n to\n <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n <option value=\"1\">Yes</option>\n <option value=\"0\">No</option>\n </select>\n <!-- /ko -->\n <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n <!-- /ko -->\n <!-- /ko -->\n <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='='-->\n <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n <!-- /ko -->\n <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n <!-- /ko -->\n <!-- /ko -->\n </div>\n </script>\n <script type=\"text/html\" id=\"pager-template\">\n <div class=\"pager-container\">\n <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a> \n <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n <span class=\"pager-pageinfo\">\n <span>Page</span> \n <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n value: currentPage,\n attr: { max: pages() }\" /> \n <span>of</span> \n <span data-bind=\"text: pages\"></span>\n </span> \n \n <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a> \n <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-column-header\">\n <!-- ko foreach: Columns -->\n <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n <!-- /ko -->\n <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n <a href=\"\" data-bind=\"click: function(){ $parents[3].pager ? $parents[3].changeSort(SqlField) : $parents[5].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n <span data-bind=\"text: ($parents[3].pager ? $parents[3].pager.sortColumn() : $parents[5].pager.sortColumn()) === SqlField ? (($parents[3].pager ? $parents[3].pager.sortDescending() : $parents[5].pager.sortDescending()) ? '▼' : '▲') : ''\"></span>\n </a>\n <!-- /ko -->\n \n <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n <div class=\"dropup\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n <span class=\"fa fa-clone\"></span> Outer Group\n </a>\n </li>\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\"></span> Field Settings\n </a>\n </li>\n </ul>\n </div>\n </div>\n \n </th>\n <!-- /ko -->\n </script>\n \n <script type=\"text/html\" id=\"report-column\">\n <!-- ko foreach: Items -->\n <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n <div data-bind=\"style: {'width': fieldWidth }\">\n <!-- ko if: LinkTo-->\n <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: FormattedValue\"></span></a>\n <!-- /ko-->\n <!-- ko ifnot: LinkTo-->\n <span data-bind=\"html: FormattedValue\"></span>\n <!-- /ko-->\n </div>\n </td>\n </script>\n \n <script type=\"text/html\" id=\"report-pivot\">\n <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n <table class=\"table table-hover table-condensed\">\n <thead>\n <tr>\n <th></th>\n <!-- ko foreach: Rows -->\n <th>\n <span data-bind=\"text: Items[0].FormattedValue\"></span>\n </th>\n <!-- /ko -->\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Columns\">\n <tr>\n <!-- ko if: $index() > 0 -->\n <td>\n <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n </td>\n <!-- ko foreach: $parent.Rows -->\n <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tbody>\n </table>\n \n </div>\n \n </script>\n \n <script type=\"text/html\" id=\"report-table\">\n <div class=\"table-responsive\" >\n <table class=\"table table-hover table-condensed\">\n <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n <tr class=\"no-highlight\">\n <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n <th style=\"width: 30px; border-left: 1px solid;\"></th>\n <!-- /ko -->\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n <!-- ko if: $parents[2].ReportType()=='Single' -->\n <div style=\"text-align: center; width: 100%\">\n <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n </div>\n <!-- /ko -->\n <!-- ko if: $parents[2].ReportType()!='Single' -->\n No records found\n <!-- /ko -->\n </td>\n </tr>\n <!-- ko foreach: $parent.rows -->\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n <!-- /ko -->\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- ko if: isExpanded -->\n <tr>\n <td style=\"width: 30px;\"></td>\n <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n <!-- ko if: DrillDownData -->\n <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n <thead>\n <tr class=\"no-highlight\">\n <!-- ko template: 'report-column-header', data: $data -->\n <!-- /ko-->\n </tr>\n </thead>\n <tbody>\n <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n No records found\n </td>\n </tr>\n <!-- ko foreach: Rows -->\n <tr>\n <!-- ko template: 'report-column', data: $data -->\n <!-- /ko-->\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n <div class=\"form-inline small text-muted\">\n <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n </div>\n <div class=\"pull-left\">\n <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n </div>\n <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n <div data-bind=\"template: 'pager-template', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n </td>\n </tr>\n <!-- /ko -->\n <!-- /ko -->\n </tbody>\n <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n <tr>\n <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n <td></td>\n <!-- /ko -->\n <!-- ko foreach: Items -->\n <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n </td>\n <!-- /ko -->\n <!-- /ko -->\n </tr>\n </tfoot>\n <!-- /ko -->\n </table>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-template\">\n <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n <!-- ko if: $parent.ReportType() == 'Pivot' -->\n <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n <!-- /ko -->\n \n <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n </a>\n <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n <li class=\"dropdown-item small\">\n <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"clear-fix\"></div>\n \n <div data-bind=\"foreach: outerGroupData\">\n <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n <h6 data-bind=\"html: display\"></h6>\n <div class=\"\" style=\"padding-top: 5px;\"></div>\n <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n <!-- /ko -->\n </div>\n <!-- /ko -->\n </script>\n <script type=\"text/html\" id=\"admin-mode-template\">\n <div class=\"row\" style=\"padding: 10px 10px\">\n <div class=\"material-switch pull-right\">\n <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n <label for=\"admin-mode\" class=\"label-primary\"></label>\n </div>\n <div class=\"pull-right\">Admin Mode</div>\n </div>\n \n <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n </div>\n </script>\n <script type=\"text/html\" id=\"manage-access-template\">\n <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n \n <div class=\"form-group row\">\n <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n <div class=\"col-md-3 col-sm-3\">\n <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n </div>\n <div class=\"col-md-1 col-sm-1\">\n <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n </div>\n </div>\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n </div>\n \n <div class=\"row small\">\n <div class=\"col-md-6\">\n <b>Manage by User</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.users -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <b>Delete by User</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.users.length == 0\">\n Users list not populated or not applicable\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"col-md-6\">\n <b>Manage by User Role</b> (allow edit)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.userRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <br />\n <b>View only by User Role</b> (no edit/delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n <div data-bind=\"ifnot: manageAccess.isDashboard\">\n <br />\n <b>Delete by User Role</b> (allow delete)\n <div class=\"row container-fluid\">\n <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n <div class=\"pull-left\">\n <div class=\"checkbox\">\n <label class=\"label label-info\">\n <input type=\"checkbox\" data-bind=\"checked: selected\"> <span data-bind=\"text: text\"></span> \n </label>\n </div>\n </div>\n <!-- /ko -->\n <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n User Roles list not populated or not applicable\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </script>\n <script type=\"text/html\" id=\"filter-group\">\n <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n <div class=\"rules-group-container\">\n <div class=\"rules-group-header\">\n <div data-bind=\"visible: !isRoot\">\n <div class=\"pull-left\">\n <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n </label>\n </div>\n </div>\n <div class=\"pull-right\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button> \n </div>\n </div>\n <div data-bind=\"visible: isRoot\">\n <div class=\"btn-group btn-group-sm\">\n <label class=\"btn btn-primary\">Filter Conditions</label>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n \n <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n </div>\n </div>\n </script>\n <script type=\"text/html\" id=\"fly-filter-template\">\n <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n <div class=\"card-header\">\n <h5 class=\"card-title\">\n <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n <i class=\"fa fa-filter\"></i>Choose filter options\n </a>\n </h5>\n </div>\n <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }\" class=\"card-body collapse collapsed\">\n <div>\n <!-- ko foreach: FlyFilters -->\n <div class=\"row\">\n <div class=\"col-sm-5 col-xs-4\">\n <div data-bind=\"with: Field\" class=\"checkbox\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFilterName\"></span>\n </label>\n </div>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n <div data-bind=\"if: $parent.Apply\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n </div>\n </div>\n <!-- /ko -->\n <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"filter-inner\">\n <div class=\"rules-list\" >\n <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n <table class=\"table table-hover table-borderless\">\n <thead>\n <tr>\n <th class=\"row\">\n <div class=\"col-md-1\"></div>\n <div class=\"col-md-4\">Field</div>\n <div class=\"col-md-2\"></div>\n <div class=\"col-md-4\">Filter</div>\n <div class=\"col-md-1\"></div>\n </th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Filters\">\n <tr class=\"rule-container\">\n <td class=\"row\">\n <div class=\"col-md-1\">\n <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n <option>And</option>\n <option>Or</option>\n </select>\n </div>\n <div class=\"col-md-3\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-2].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n </div>\n </div>\n <div class=\"col-md-2\">\n <div data-bind=\"with: Field\">\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n </div>\n </div>\n </div>\n <div class=\"col-md-5\">\n <div data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </div>\n <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parents[$parents.length-2].canAddSeries() && $index()==0 -->\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n <!--/ko -->\n <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n </div>\n <div class=\"col-md-1\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n </div>\n </td>\n </tr>\n <!-- ko foreach: compareTo -->\n <tr>\n <td class=\"row\">\n <div class=\"col-md-6\"> </div>\n <div class=\"col-md-2\">\n <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n <span>Compare To</span>\n </div>\n <div class=\"col-md-4\">\n <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n </div>\n </td>\n </tr>\n <!-- /ko -->\n </tbody>\n </table>\n </div>\n \n <div class=\"rule-container\" >\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n <div>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n </div>\n </div>\n </div>\n \n </script>\n \n <script type=\"text/html\" id=\"filter-parameters\">\n <div class=\"table-responsive card\">\n <div class=\"card-body\">\n <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n <table class=\"table table-hover table-borderless\" data-bind=\"visible: showParameters\">\n <thead>\n <tr>\n <th style=\"width: 30%\">Filter</th>\n <th style=\"width: 20%\"></th>\n <th style=\"width: 30%\">Value</th>\n <th></th>\n </tr>\n </thead>\n <tbody data-bind=\"foreach: Parameters\">\n <tr data-bind=\"ifnot: Hidden\">\n <td data-bind=\"text: DisplayName\">\n </td>\n <td>\n <div class=\"form-group\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n </div>\n </td>\n <td data-bind=\"with: Field\">\n <div data-bind=\"template: 'report-filter', data: $data\"></div>\n </td>\n <td></td>\n </tr>\n \n </tbody>\n </table>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-schedule\">\n <div data-bind=\"with: scheduleBuilder\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n Schedule Report\n </label>\n </div>\n <div data-bind=\"if: hasSchedule\">\n <div class=\"form-inline form-group\">\n <div class=\"row col-sm-12\">\n <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span> \n <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n <div data-bind=\"if: selectedOption() == 'once'\">\n on <input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n </div>\n <div data-bind=\"if: showDays\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n </div>\n <div data-bind=\"if: showDates\">\n on <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n </div>\n <div data-bind=\"if: showMonths\">\n of <select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n </div>\n <div data-bind=\"if: showAtTime\">\n at <select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n <option>AM</option>\n <option>PM</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"alert alert-info\">\n Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n <span data-bind=\"if: selectedOption() == 'once'\">\n on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n </span>\n <span data-bind=\"if: showDays\">\n on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n </span>\n <span data-bind=\"if: showDates\">\n on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n </span>\n <span data-bind=\"if: showMonths\">\n of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n </span>\n <span data-bind=\"if: showAtTime\">\n at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n </span>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Email to</label>\n <div class=\"col-sm-6\">\n <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n </div>\n <label class=\"col-sm-2 control-label\">Report Format</label>\n <div class=\"col-sm-2\">\n <select class=\"form-control\" data-bind=\"value: format\">\n <option value=\"EXCEL\">Excel</option>\n <option value=\"CSV\">CSV</option>\n <option value=\"PDF\">PDF</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-4 control-label\">\n <div class=\"checkbox\">\n <label title=\"Set a date to start sending scheduled report\">\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n Set Schedule Start Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n </div>\n </div>\n </div>\n \n <div class=\"form-horizontal form-group\">\n <div class=\"form-group row\">\n <div class=\"col-sm-4 control-label\">\n <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n Set Schedule End Date\n </label>\n </div>\n </div>\n <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n </div>\n </div>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-field-options\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n </div>\n <div class=\"modal-body needs-validation\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n Make Header Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n Make Text Bold\n </label>\n </div>\n <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n </button>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n <div class=\"col-sm-12\">\n <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n Outer Group\n </label>\n </div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-link-edit\">\n <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Setup Link Field</h5>\n </div>\n <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n </div>\n </div>\n <div data-bind=\"if: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n Send field value as Report Filter Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n <div class=\"col-sm-7 col-md-7\">\n <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n </div>\n </div>\n </div>\n <div data-bind=\"ifnot: LinksToReport\">\n <div class=\"form-group row\">\n <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n </div>\n </div>\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n Send field value as Query Parameter\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n <div class=\"col-sm-7 col-md-7\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n </div>\n </div>\n <br />\n </div>\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n </div>\n </div>\n </div>\n </script>\n \n <script type=\"text/html\" id=\"report-designer\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\" id=\"myModalLabel\">\n <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n <span class=\"fa fa-question-circle\"></span>\n </a>Design your Report\n </h5>\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>\n </div>\n <div class=\"modal-body needs-validation\">\n <h5><span class=\"fa fa-file\"></span> Choose Report Type</h5>\n <div class=\"row\">\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n <span class=\"fa fa-2x fa-list-alt\"></span>\n <p>List</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n <span class=\"fa fa-2x fa-table\"></span>\n <p>Summary</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n <span class=\"fa fa-2x fa-bar-chart\"></span>\n <p>Bar</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n <span class=\"fa fa-2x fa-pie-chart\"></span>\n <p>Pie</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n <span class=\"fa fa-2x fa-line-chart\"></span>\n <p>Line</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n <span class=\"fa fa-2x fa-globe\"></span>\n <p>Map</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n <span class=\"fa fa-2x fa-window-maximize\"></span>\n <p>Single Value</p>\n </div>\n </div>\n <div class=\"col-md-3 col-sm-3 col-xs-6\">\n <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n <span class=\"fa fa-2x fa-random\"></span>\n <p>Pivot</p>\n </div>\n </div>\n </div>\n <hr />\n <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span> Choose Data for Report</h5>\n <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n </label>\n <label class=\"btn btn-primary\">\n <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n </label>\n </div>\n <div class=\"clearfix\"></div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n </div>\n \n <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n <div data-bind=\"with: textQuery.searchFields\">\n <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n </div>\n </div>\n \n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n <div class=\"small pull-left\">\n Check the fields you would like to use in the Report\n </div>\n <div class=\"pull-right btn-toolbar\">\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n \n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n </div>\n </div>\n <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: fieldName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n <br />\n <div class=\"card\">\n <div class=\"card-header\">\n <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n </div>\n <div class=\"card-body\">\n <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n <div class=\"col-md-3 col-sm-4 col-xs-6\">\n <div class=\"list-group-item\">\n <div class=\"checkbox\">\n <label>\n <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n <span data-bind=\"text: jsonColumnName\"></span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n <br />\n <br />\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"row\">\n <div class=\"col-md-12 pull-right\">\n <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n \n </div>\n <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n <div class=\"alert alert-info\">\n You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n Please note that Custom Field must be chosen in within the same Section and their data types must match.\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-sm-6 small\">\n Setup your Formula for calculating this Field\n </div>\n <div class=\"col-sm-6 right-align\">\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n </div>\n </div>\n <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n <div class=\"col-sm-12\">\n <div class=\"alert alert-info\">\n For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n </div>\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Label</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Data Format</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n <!-- ko ifnot: formulaOnlyHasDateFields -->\n <option>String</option>\n <option>Integer</option>\n <option>Decimal</option>\n <option>Currency</option>\n <!-- /ko -->\n <!-- ko if: formulaOnlyHasDateFields -->\n <option>Days</option>\n <option>Hours</option>\n <option>Minutes</option>\n <option>Seconds</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n <div class=\"col-sm-10\">\n <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n </div>\n </div>\n \n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Field Formula</label>\n <div class=\"col-sm-10\">\n <div data-bind=\"foreach: formulaFields\">\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n <div data-bind=\"if: setupFormula.isConstantValue\">\n <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n </div>\n </div>\n </div>\n <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n <option>+</option>\n <!-- /ko -->\n <option>-</option>\n <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n <option>*</option>\n <option>/</option>\n <!-- /ko -->\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n <div data-bind=\"if: SelectedFields().length>0\">\n <hr />\n <h5><span class=\"fa fa-table\"></span> Selected data for the Report</h5>\n <div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n </div>\n <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n </div>\n <div data-bind=\"visible: ReportType()=='Map'\">\n <div class=\"alert alert-info\">\n <span class=\"fa fa-lightbulb-o fa-2x\"></span> For Map Graph, the first field below has to be a Region, like a Country.\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Map Display</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n </div>\n </div>\n </div>\n <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n <li class=\"list-group-item\">\n <div class=\"row\">\n <div class=\"col\">\n <span class=\"fa fa-columns\"></span>\n <span data-bind=\"text: selectedFieldName\"></span>\n <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n </span>\n </div>\n <div class=\"col\">\n <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n </div>\n <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate()) && $parent.isChart() && $index()>0\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal() && (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n </span>\n </div>\n <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n </span>\n </div>\n </div>\n </div>\n </li>\n </ul>\n </div>\n <hr />\n <div>\n <h5><span class=\"fa fa-filter\"></span> Choose filters</h5>\n \n <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n <div data-bind=\"template: {name: 'filter-group'}\"></div>\n </div>\n \n <div class=\"checkbox col-12\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n Allow setting up and saving filters on Report\n </label>\n </div>\n <br />\n </div>\n </div>\n </div>\n <hr />\n <div data-bind=\"if: SaveReport\">\n <h5><span class=\"fa fa-hourglass\"></span> Choose Schedule</h5>\n \n <div style=\"padding: 10px 10px\">\n <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n </div>\n <hr />\n </div>\n <div>\n <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n <label class=\"col-sm-2 control-label\">Report Name</label>\n <div class=\"col-sm-10\">\n <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n </div>\n </div>\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Report Description</label>\n <div class=\"col-sm-10\">\n <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n </div>\n </div>\n <div data-bind=\"ifnot: useStoredProc\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\">Sort By</label>\n <div class=\"col-sm-6\">\n <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n </div>\n </div>\n <div data-bind=\"foreach: SortFields\">\n <div class=\"form-group row\">\n <label class=\"col-sm-2 control-label\"> Then Sort By</label>\n <div class=\"col-sm-4\">\n <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n </div>\n <div class=\"col-sm-2\">\n <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n Include Total Row\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n Show only Unique Records\n </label>\n </div>\n <div class=\"form-group row\">\n <div class=\"checkbox col-md-2\">\n <label >\n <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n Max Records\n </label>\n </div>\n <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n </div>\n </div>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: isChart\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n Show Data along with Graph\n </label>\n </div>\n <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n <label>\n <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n Save Report\n </label>\n </div>\n <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n <label class=\"col-sm-2 control-label\">Choose Folder</label>\n <div class=\"col-sm-10\">\n <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n </div>\n </div>\n \n <div data-bind=\"if: adminMode\">\n <hr />\n <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\">\n <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n </div>\n </div>\n </div>\n </script>\n ");
|
|
211
211
|
this.cdref.detectChanges();
|
|
212
212
|
};
|
|
213
213
|
DotnetdashboardComponent.prototype.bindWindowResize = function (vm) {
|