Merged PR 58: #42 formatting date

#42 formatting date

Related work items: #42

src/layouts/DefaultLayout.vue

@@ -71,7 +71,7 @@
                         </v-row>
                       </v-card-text>
 
-                      <v-data-table-virtual :headers="headers" :items="currentUser.userTransactions" height="250"
+                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
                         item-value="name">
                       </v-data-table-virtual>
 
@@ -146,9 +146,8 @@ const currentUserName = ref("INVITÉ");
 let currentUser = null;
 
 const headers = ref([
-  { title: 'Transaction', value: 'index', width: '10%' },
-  { title: 'Montant', value: 'amount', width: '10%' },
-  { title: 'Date', value: 'created', width: '10%' },
+  { title: 'Montant', value: 'amount', width: '20%', key: "amount" },
+  { title: 'Date', value: 'created', width: '20%', key: "created" },
   { title: 'Message', value: 'tipMessage', width: '60%' }
 ]);
 

src/models/myUserModel.js

@@ -7,9 +7,18 @@ export default class MyUserModel
     lastName = "";
     userName = "";
     totalBalance = "";
-    userTransactions = new UserTransactionsModel()
+    userTransactions = [];
 
     static createFromApiResult(apiResult){
-        return Object.assign(new MyUserModel(), apiResult);
+        const userModel =  Object.assign(new MyUserModel(), apiResult);
+
+        const notMapperTransaction = Object.freeze(userModel.userTransactions);
+        userModel.userTransactions = [];
+
+        for (const transaction of notMapperTransaction) {
+            userModel.userTransactions.push(UserTransactionsModel.createFromApiResult(transaction))
+        }
+
+        return userModel;
     }
 }

src/models/userTransactionsModel.js

@@ -6,7 +6,18 @@ export default class UserTransactionsModel
     created = "";
 
 
-createFromApiResult(apiResult){
-        return Object.assign(apiResult, new UserTransactionsModel())
+    static createFromApiResult(apiResult){
+        const userTransactionModel = Object.assign(new UserTransactionsModel(), apiResult)
+
+        const date = new Date(userTransactionModel.created);
+        const options = {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            timeZone: 'America/Montreal'
+        };
+        userTransactionModel.created = new Intl.DateTimeFormat('fr-CA', options).format(date);
+
+        return userTransactionModel;
     }
 }