Add vehicle make and manufacturer CSV export functionality #746

public/assets/js/csv_export.js

@@ -0,0 +1,74 @@
+$(function() {
+	// export table to csv
+	$(document).on('click', '[data-export-csv]', async function(e) {
+		const el = e.target.closest('[data-export-csv]');
+		const oldLabel = el.innerHTML;
+
+		// set loading status
+		el.disabled = true;
+		el.innerHTML = 'Exporting...';
+
+		const formData = new FormData();
+
+		formData.append('datatable[pagination][page]', 1);
+		formData.append('datatable[pagination][perpage]', 10000000);
+
+		// get all rows
+		const response = await fetch(el.dataset.url, {
+			method: el.dataset.method,
+			body: formData,
+		});
+
+		const result = await response.json();
+
+		if (response.status === 200) {
+			// empty set returned
+			if (parseInt(result.meta.total) === 0) {
+				swal({
+					title: 'Whoops',
+					html: 'No data to export!',
+					type: 'warning',
+				});
+			}
+			
+			// build csv data
+			const csvRows = [];
+			const fieldList = el.dataset.fields.split(',');
+			csvRows.push(el.dataset.headers);
+
+			result.data.forEach((row) => {
+				const fieldData = [];
+				fieldList.forEach((field) => {
+					fieldData.push('"' + row[field] + '"');
+				});
+
+				csvRows.push(fieldData.join(','));
+			});
+
+			const csvData = csvRows.join('\n');
+
+			// build the csv file
+			const csvFile = new Blob([csvData], {
+                type: 'text/csv',
+            });
+
+			// create a link to the file and download it
+			const url = window.URL.createObjectURL(csvFile);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = el.dataset.filename + '.csv';
+			a.click();
+		} else {
+			// something went wrong on the server
+			swal({
+				title: 'Whoops',
+				html: 'An error has occurred while retrieving data.',
+				type: 'error',
+			});
+		}
+
+		// remove loading status
+		el.disabled = false;
+        el.innerHTML = oldLabel;
+	});
+});

templates/vehicle-manufacturer/list.html.twig

@@ -33,6 +33,13 @@
 									</div>
 								</div>
 								<div class="col-xl-4 order-1 order-xl-2 m--align-right">
+									<button type="button" class="btn btn-success m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill mr-2" data-export-csv data-url="{{ url('vmfg_rows') }}" data-method="post" data-headers="ID,Name" data-fields="id,name" data-filename="resq-vehicle-mfg-list-{{ 'now'|date('Y-m-d') }}">
+										<span>
+											<i class="fa fa-list"></i>
+											<span>Export Manufacturer List</span>
+										</span>
+									</button>
+
 									<a href="{{ url('vmfg_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
 										<span>
 											<i class="la la-industry"></i>
@@ -54,6 +61,7 @@
 {% endblock %}
 
 {% block scripts %}
+	<script src="{{ asset('assets/js/csv_export.js') }}"></script>
 	<script>
 		$(function() {
 			var options = {

templates/vehicle/list.html.twig

@@ -33,6 +33,13 @@
 									</div>
 								</div>
 								<div class="col-xl-4 order-1 order-xl-2 m--align-right">
+									<button type="button" class="btn btn-success m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill mr-2" data-export-csv data-url="{{ url('vehicle_rows') }}" data-method="post" data-headers="ID,Name,Manufacturer" data-fields="id,make,mfg_name" data-filename="resq-vehicle-make-list-{{ 'now'|date('Y-m-d') }}">
+										<span>
+											<i class="fa fa-list"></i>
+											<span>Export Vehicle List</span>
+										</span>
+									</button>
+
 									<a href="{{ url('vehicle_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
 										<span>
 											<i class="fa fa-car"></i>
@@ -54,6 +61,7 @@
 {% endblock %}
 
 {% block scripts %}
+	<script src="{{ asset('assets/js/csv_export.js') }}"></script>
 	<script>
 		$(function() {
 			var options = {