Currency Format

src/components/timeshare/buy/weekListComponent.vue

@@ -1,15 +1,12 @@
 <template>
   <div>
-    <button @click="addDummyWeek" class="btn btn-primary">Add Dummy</button>
     <table class="table table-bordered">
       <thead>
         <tr>
           <th>Resort</th>
           <th>Unit Number</th>
           <th>Week Number</th>
-          <th>Module</th>
           <th>Bedrooms</th>
-          <th>Season</th>
           <th>Price</th>
           <th>Status</th>
           <th>Interested</th>
@@ -20,10 +17,8 @@
           <td>{{item.resort.resortName}}</td>
           <td>{{item.unitNumber}}</td>
           <td>{{item.weekNumber}}</td>
-          <td>{{item.module}}</td>
           <td>{{item.bedrooms}}</td>
-          <td>{{item.season}}</td>
-          <td>{{item.sellPrice}}</td>
+          <td>{{item.sellPrice | toCurrency}}</td>
           <td>{{item.status ? item.status.description : ''}}</td>
           <td></td>
         </tr>

src/main.js

@@ -8,6 +8,18 @@ Vue.use(EvaIcons);
 
 Vue.config.productionTip = false;
 
+Vue.filter('toCurrency', (value) => {
+  if (typeof value !== 'number') {
+    return value;
+  }
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'ZAR',
+    minimumFractionDigits: 2,
+  });
+  return formatter.format(value);
+});
+
 new Vue({
   render: h => h(App),
   router,