parkstay.frontend.parkstay: escape JSON passed as attribute to existi…

…ng booking UI

parkstay/frontend/parkstay/package.json

@@ -17,6 +17,7 @@
     "datatables.net-responsive": "^2.1.0",
     "datatables.net-responsive-bs": "^2.1.0",
     "eonasdan-bootstrap-datetimepicker": "^4.17.43",
+    "html-escape": "^2.0.0",
     "jquery": "^3.1.1",
     "jquery-validation": "^1.15.1",
     "json2csv": "^3.11.4",
@@ -30,6 +31,7 @@
     "slick-carousel-browserify": "^1.6.12",
     "sweetalert2": "^6.6.9",
     "vue": "^2.4.4",
+    "vue-data-tables": "^3.1.4",
     "vue-resource": "^1.0.3",
     "vue-router": "^2.0.1",
     "vuex": "^2.2.1",

parkstay/frontend/parkstay/src/components/booking/dashboard.vue

@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import {$,bus,datetimepicker,api_endpoints,helpers,Moment,swal,select2} from "../../hooks.js"
+import {$,bus,datetimepicker,api_endpoints,helpers,Moment,swal,htmlEscape,select2} from "../../hooks.js"
 import loader from "../utils/loader.vue"
 import datatable from '../utils/datatable.vue'
 import changebooking from "./changebooking.vue"
@@ -257,12 +257,12 @@ export default {
                                 column += record_payment;
                             }
                             if (full.editable){
-                                var change_booking = "<a href='edit/"+full.id+"' class='text-primary' data-change = '"+booking+"' > Change</a><br/>";
-                                var cancel_booking = "<a href='#' class='text-primary' data-cancel='"+booking+"' > Cancel</a><br/>";
+                                var change_booking = "<a href='edit/"+full.id+"' class='text-primary' data-change = '"+htmlEscape(booking)+"' > Change</a><br/>";
+                                var cancel_booking = "<a href='#' class='text-primary' data-cancel='"+htmlEscape(booking)+"' > Cancel</a><br/>";
                                 column += cancel_booking;
                                 column += change_booking;
                             }
-                            full.has_history ? column += "<a href='edit/"+full.id+"' class='text-primary' data-history = '"+booking+"' > View History</a><br/>" : '';
+                            full.has_history ? column += "<a href='edit/"+full.id+"' class='text-primary' data-history = '"+htmlEscape(booking)+"' > View History</a><br/>" : '';
                             $.each(full.active_invoices,(i,v) =>{
                                 invoices += "<a href='/ledger/payments/invoice-pdf/"+v+"' target='_blank' class='text-primary'><i style='color:red;' class='fa fa-file-pdf-o'></i>&nbsp #"+v+"</a><br/>"; 
                             });

parkstay/frontend/parkstay/src/hooks.js

@@ -16,6 +16,7 @@ var daterangepicker = require('bootstrap-daterangepicker');
 var formValidate = require('./components/utils/validator.js');
 var Moment = MomentRange.extendMoment(moment);
 var swal = require('sweetalert2');
+var htmlEscape = require('html-escape');
 import api_endpoints from './apps/api.js';
 import store from './apps/store';
 import helpers from './components/utils/helpers.js';
@@ -37,5 +38,6 @@ export {
     awesomplete,
     formValidate,
     swal,
+    htmlEscape,
     store
 }