From 016b54791ae30ce3a52ee1d61bea2d3610e982ee Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Tue, 6 Mar 2018 09:37:17 +0200
Subject: [PATCH] Rework reports to use KnockoutJS

---
 .../views/reports/report_builder.blade.php    | 280 ++++++++++--------
 1 file changed, 157 insertions(+), 123 deletions(-)

diff --git a/resources/views/reports/report_builder.blade.php b/resources/views/reports/report_builder.blade.php
index 8a0c39874bcd..eadd515879cd 100644
--- a/resources/views/reports/report_builder.blade.php
+++ b/resources/views/reports/report_builder.blade.php
@@ -33,7 +33,6 @@
 		.tablesorter-column-selector input {
 			margin-right: 8px;
 		}
-
 	</style>
 
 @stop
@@ -148,7 +147,9 @@
                 <div class="row">
                     <div class="col-md-6">
 
-						{!! Former::select('report_type')->options($reportTypes, $reportType)->label(trans('texts.type')) !!}
+						{!! Former::select('report_type')
+								->data_bind("options: report_types, optionsText: 'transType', optionsValue: 'type', value: report_type")
+								->label(trans('texts.type')) !!}
 
 						<div class="form-group">
                             <label for="reportrange" class="control-label col-lg-4 col-sm-4">
@@ -177,10 +178,9 @@
 									->addOption(trans('texts.year'), 'year') !!}
 
 						{!! Former::select('subgroup')
-									->addOption('', '') !!}
-
-						<div id="statusField" style="display:none">
+									->data_bind("options: subgroups, optionsText: 'transField', optionsValue: 'field', value: subgroup") !!}
 
+						<div id="statusField" style="display:none" data-bind="visible: showStatus">
 							<div class="form-group">
 								<label for="status_ids" class="control-label col-lg-4 col-sm-4">{{ trans('texts.status') }}</label>
 								<div class="col-lg-8 col-sm-8">
@@ -193,19 +193,19 @@
 							</div>
 						</div>
 
-						<div id="dateField" style="display:none">
+						<div id="dateField" style="display:none" data-bind="visible: showInvoiceOrPaymentDate">
                             {!! Former::select('date_field')->label(trans('texts.filter'))
                                     ->addOption(trans('texts.invoice_date'), FILTER_INVOICE_DATE)
                                     ->addOption(trans('texts.payment_date'), FILTER_PAYMENT_DATE) !!}
                         </div>
 
-						<div id="currencyType" style="display:none">
+						<div id="currencyType" style="display:none" data-bind="visible: showCurrencyType">
                             {!! Former::select('currency_type')->label(trans('texts.currency'))
                                     ->addOption(trans('texts.default'), 'default')
                                     ->addOption(trans('texts.converted'), 'converted') !!}
                         </div>
 
-						<div id="invoiceOrExpenseField" style="display:none">
+						<div id="invoiceOrExpenseField" style="display:none" data-bind="visible: showInvoiceOrExpense">
 							{!! Former::select('document_filter')->label('filter')
 								->addOption(trans('texts.all'), '')
 									->addOption(trans('texts.invoice'), 'invoice')
@@ -229,9 +229,7 @@
 	<center class="buttons form-inline">
 		<span class="well" style="padding-right:8px; padding-left:14px;">
 		{!! Former::select('format')
-					->addOption('CSV', 'csv')
-					->addOption('XLSX', 'xlsx')
-					->addOption('PDF', 'pdf')
+					->data_bind("options: export_formats, optionsText: 'transFormat', optionsValue: 'format', value: export_format")
 					->raw() !!} &nbsp;
 
 		{!! Button::normal(trans('texts.export'))
@@ -239,11 +237,11 @@
 				->appendIcon(Icon::create('download-alt')) !!}
 
 		{!! Button::normal(trans('texts.cancel_schedule'))
-				->withAttributes(['id' => 'cancelSchduleButton', 'onclick' => 'onCancelScheduleClick()', 'style' => 'display:none'])
+				->withAttributes(['id' => 'cancelSchduleButton', 'onclick' => 'onCancelScheduleClick()', 'style' => 'display:none', 'data-bind' => 'visible: showCancelScheduleButton'])
 				->appendIcon(Icon::create('remove')) !!}
 
 		{!! Button::primary(trans('texts.schedule'))
-				->withAttributes(['id'=>'scheduleButton', 'onclick' => 'showScheduleModal()', 'style' => 'display:none'])
+				->withAttributes(['id'=>'scheduleButton', 'onclick' => 'showScheduleModal()', 'style' => 'display:none', 'data-bind' => 'visible: showScheduleButton, css: enableScheduleButton'])
 				->appendIcon(Icon::create('time')) !!}
 
 	 	</span> &nbsp;&nbsp;
@@ -433,72 +431,6 @@
 		});
 	}
 
-	function setFiltersShown() {
-		var val = $('#report_type').val();
-		$('#dateField').toggle(val == '{{ ENTITY_TAX_RATE }}');
-		$('#statusField').toggle(['invoice', 'quote', 'product'].indexOf(val) >= 0);
-		$('#invoiceOrExpenseField').toggle(val == '{{ ENTITY_DOCUMENT }}');
-		$('#currencyType').toggle(val == '{{ ENTITY_PAYMENT }}');
-	}
-
-	function setDocumentZipShown() {
-		var val = $('#report_type').val();
-		var showOption = ['invoice', 'quote', 'expense', 'document'].indexOf(val) >= 0;
-		var numOptions = $('#format option').size();
-		if (showOption && numOptions == 3) {
-			$("#format").append(new Option("ZIP - {{ trans('texts.documents') }}", 'zip'));
-		} else if (! showOption && numOptions == 4) {
-			$("#format option:last").remove();
-		}
-	}
-
-	function setScheduleButton() {
-		var reportType = $('#report_type').val();
-		$('#scheduleButton').toggle(! scheduledReportMap[reportType]);
-		$('#cancelSchduleButton').toggle(!! scheduledReportMap[reportType]);
-	}
-
-	function setSubgroupOptions() {
-		var reportType = $('#report_type').val();
-		var $subgroup = $('#subgroup');
-
-		$subgroup.find('option').remove().end();
-		$subgroup.append(new Option('', ''));
-
-		if (['client'].indexOf(reportType) == -1) {
-			$subgroup.append(new Option("{{ trans('texts.client') }}", 'client'));
-		}
-		$subgroup.append(new Option("{{ trans('texts.user') }}", 'user'));
-
-		if (reportType == 'activity') {
-			$subgroup.append(new Option("{{ trans('texts.category') }}", 'category'));
-		} else if (reportType == 'aging') {
-			$subgroup.append(new Option("{{ trans('texts.age') }}", 'age'));
-		} else if (reportType == 'expense') {
-			$subgroup.append(new Option("{{ trans('texts.vendor') }}", 'vendor'));
-			$subgroup.append(new Option("{{ trans('texts.category') }}", 'category'));
-		} else if (reportType == 'payment') {
-			$subgroup.append(new Option("{{ trans('texts.method') }}", 'method'));
-		} else if (reportType == 'profit_and_loss') {
-			$subgroup.append(new Option("{{ trans('texts.type') }}", 'type'));
-		} else if (reportType == 'task') {
-			$subgroup.append(new Option("{{ trans('texts.project') }}", 'project'));
-		} else if (reportType == 'client') {
-			$subgroup.append(new Option("{{ trans('texts.country') }}", 'country'));
-		} else if (reportType == 'invoice' || reportType == 'quote') {
-			$subgroup.append(new Option("{{ trans('texts.status') }}", 'status'));
-		} else if (reportType == 'product') {
-			$subgroup.append(new Option("{{ trans('texts.product') }}", 'product'));
-		}
-
-		if (isStorageSupported()) {
-			var lastSubgroup = localStorage.getItem('last:report_subgroup');
-			if (lastSubgroup) {
-				$('#subgroup').val(lastSubgroup);
-			}
-		}
-	}
-
 	var sumColumns = [];
 	@foreach ($columns as $column => $class)
 		sumColumns.push("{{ in_array($column, ['amount', 'paid', 'balance', 'cost', 'duration', 'tax', 'qty']) ? trans("texts.{$column}") : false }}");
@@ -520,31 +452,21 @@
         });
 
 		$('#format').change(function() {
-			@if (! auth()->user()->hasFeature(FEATURE_REPORTS))
+			if (! isStorageSupported()) {
 				return;
-			@endif
-			var val = $('#format').val();
-			$('#scheduleButton').prop('disabled', val == 'zip');
-            if (isStorageSupported() && val != 'zip') {
-                localStorage.setItem('last:report_format', val);
-            }
+			}
+			setTimeout(function() {
+				localStorage.setItem('last:report_format', model.export_format());
+			}, 1);
         });
 
         $('#report_type').change(function() {
-			@if (! auth()->user()->hasFeature(FEATURE_REPORTS))
+            if (! isStorageSupported()) {
 				return;
-			@endif
-
-			var val = $('#report_type').val();
-			setFiltersShown();
-			setDocumentZipShown();
-			setScheduleButton();
-			setSubgroupOptions();
-
-			$('#scheduleButton').prop('disabled', $('#format').val() == 'zip');
-            if (isStorageSupported()) {
-                localStorage.setItem('last:report_type', val);
-            }
+			}
+			setTimeout(function() {
+				localStorage.setItem('last:report_type', model.report_type());
+			}, 1);
         });
 
 		$('#group').change(function() {
@@ -554,9 +476,12 @@
         });
 
 		$('#subgroup').change(function() {
-            if (isStorageSupported()) {
-                localStorage.setItem('last:report_subgroup', $('#subgroup').val());
-            }
+			if (! isStorageSupported()) {
+				return;
+			}
+			setTimeout(function() {
+				localStorage.setItem('last:report_subgroup', model.subgroup());
+			}, 1);
         });
 
 		// parse 1,000.00 or 1.000,00
@@ -571,7 +496,137 @@
 			}
 		}
 
+		function ReportTypeModel(type, transType) {
+			var self = this;
+			self.type = type;
+			self.transType = transType;
+		}
+
+		function ExportFormatModel(format, transFormat) {
+			var self = this;
+			self.format = format;
+			self.transFormat = transFormat;
+		}
+
+		function SubgroupModel(field, transField) {
+			var self = this;
+			self.field = field;
+			self.transField = transField;
+		}
+
+		function ViewModel() {
+			var self = this;
+			self.report_types = ko.observableArray();
+			self.report_type = ko.observable();
+			self.export_format = ko.observable();
+			self.start_date = ko.observable();
+			self.end_date = ko.observable();
+			self.group = ko.observable();
+			self.subgroup = ko.observable();
+
+			@foreach ($reportTypes as $key => $val)
+				self.report_types.push(new ReportTypeModel("{{ $key }}", "{{ $val}}"));
+			@endforeach
+
+			self.subgroups = ko.computed(function() {
+				var reportType = self.report_type();
+
+				var options = [
+					new SubgroupModel('', '')
+				];
+
+				if (['client'].indexOf(reportType) == -1) {
+					options.push(new SubgroupModel('client', "{{ trans('texts.client') }}"));
+				}
+
+				options.push(new SubgroupModel('user', "{{ trans('texts.user') }}"));
+
+				if (reportType == 'activity') {
+					options.push(new SubgroupModel('category', "{{ trans('texts.category') }}"));
+				} else if (reportType == 'aging') {
+					options.push(new SubgroupModel('age', "{{ trans('texts.age') }}"));
+				} else if (reportType == 'expense') {
+					options.push(new SubgroupModel('vendor', "{{ trans('texts.vendor') }}"));
+					options.push(new SubgroupModel('category', "{{ trans('texts.category') }}"));
+				} else if (reportType == 'payment') {
+					options.push(new SubgroupModel('method', "{{ trans('texts.method') }}"));
+				} else if (reportType == 'profit_and_loss') {
+					options.push(new SubgroupModel('type', "{{ trans('texts.type') }}"));
+				} else if (reportType == 'task') {
+					options.push(new SubgroupModel('project', "{{ trans('texts.project') }}"));
+				} else if (reportType == 'client') {
+					options.push(new SubgroupModel('country', "{{ trans('texts.country') }}"));
+				} else if (reportType == 'invoice' || reportType == 'quote') {
+					options.push(new SubgroupModel('status', "{{ trans('texts.status') }}"));
+				} else if (reportType == 'product') {
+					options.push(new SubgroupModel('product', "{{ trans('texts.product') }}"));
+				}
+
+				return options;
+			});
+
+			self.export_formats = ko.computed(function() {
+				var options = [
+					new ExportFormatModel('csv', 'CSV'),
+					new ExportFormatModel('xlsx', 'XLSX'),
+					new ExportFormatModel('pdf', 'PDF'),
+				]
+
+				if (['{{ ENTITY_INVOICE }}', '{{ ENTITY_QUOTE }}', '{{ ENTITY_EXPENSE }}', '{{ ENTITY_DOCUMENT }}'].indexOf(self.report_type()) >= 0) {
+					options.push(new ExportFormatModel('zip', 'ZIP - {{ trans('texts.documents') }}'));
+				}
+
+				return options;
+			});
+
+			if (isStorageSupported()) {
+				var lastReportType = localStorage.getItem('last:report_type');
+				if (lastReportType) {
+					self.report_type(lastReportType);
+				}
+				var lastSubgroup = localStorage.getItem('last:report_subgroup');
+				if (lastSubgroup) {
+					self.subgroup(lastSubgroup);
+				}
+				var lastFormat = localStorage.getItem('last:report_format');
+				if (lastFormat) {
+					self.export_format(lastFormat);
+				}
+			}
+
+			self.showInvoiceOrPaymentDate = ko.computed(function() {
+				return self.report_type() == '{{ ENTITY_TAX_RATE }}';
+			});
+
+			self.showStatus = ko.computed(function() {
+				return ['{{ ENTITY_INVOICE }}', '{{ ENTITY_QUOTE }}', '{{ ENTITY_PRODUCT }}'].indexOf(self.report_type()) >= 0;
+			});
+
+			self.showInvoiceOrExpense = ko.computed(function() {
+				return self.report_type() == '{{ ENTITY_DOCUMENT }}';
+			});
+
+			self.showCurrencyType = ko.computed(function() {
+				return self.report_type() == '{{ ENTITY_PAYMENT }}';
+			});
+
+			self.enableScheduleButton = ko.computed(function() {
+				return self.export_format() == 'zip' ? 'disabled' : 'enabled';
+			});
+
+			self.showScheduleButton = ko.computed(function() {
+				return ! scheduledReportMap[self.report_type()];
+			});
+
+			self.showCancelScheduleButton = ko.computed(function() {
+				return !! scheduledReportMap[self.report_type()];
+			});
+		}
+
 		$(function(){
+			window.model = new ViewModel();
+			ko.applyBindings(model);
+
 			var statusIds = isStorageSupported() ? (localStorage.getItem('last:report_status_ids') || '') : '';
 			$('#statuses_{{ ENTITY_INVOICE }}').select2({
 				//allowClear: true,
@@ -644,36 +699,15 @@
 				widgets: ['zebra', 'uitheme'],
 			}).show();
 
-			setTimeout(function() {
-				setFiltersShown();
-				setDocumentZipShown();
-				setScheduleButton();
-				setSubgroupOptions();
-			}, 1);
-
 			if (isStorageSupported()) {
-				var lastReportType = localStorage.getItem('last:report_type');
-				if (lastReportType) {
-					$('#report_type').val(lastReportType);
-				}
 				var lastGroup = localStorage.getItem('last:report_group');
 				if (lastGroup) {
 					$('#group').val(lastGroup);
 				}
-				var lastSubgroup = localStorage.getItem('last:report_subgroup');
-				if (lastSubgroup) {
-					$('#subgroup').val(lastSubgroup);
-				}
 				var lastDocumentFilter = localStorage.getItem('last:document_filter');
 				if (lastDocumentFilter) {
 					$('#document_filter').val(lastDocumentFilter);
 				}
-				var lastFormat = localStorage.getItem('last:report_format');
-				if (lastFormat) {
-					setTimeout(function() {
-						$('#format').val(lastFormat);
-					}, 1);
-				}
 			}
 		});
     })