ayanova/src/views/ay-history.vue

@@ -2,13 +2,22 @@
   <v-row row v-if="this.formState.ready">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col rows="12">
-      {{ obj }}
-      <v-timeline>
-        <v-timeline-item>timeline item</v-timeline-item>
-        <v-timeline-item class="text-right">timeline item</v-timeline-item>
-        <v-timeline-item>timeline item</v-timeline-item>
+      <v-timeline :dense="$vuetify.breakpoint.smAndDown">
+        <v-timeline-item v-for="i in obj" :key="i.index" large>
+          <template v-slot:opposite>
+            <span>{{ i.date }}</span>
+          </template>
+          <v-card class="elevation-2">
+            <v-card-title class="headline">{{ i.name }}</v-card-title>
+            <v-card-text>
+              {{ i.event }}
+              {{ i.textra }}
+            </v-card-text>
+          </v-card>
+        </v-timeline-item>
       </v-timeline>
     </v-col>
+    <div>{{ obj }}</div>
   </v-row>
 </template>
 
@@ -91,6 +100,7 @@ export default {
             vm.formState.serverError = res.error;
             window.$gz.form.setErrorBoxErrors(vm);
           } else {
+            //TODO: PAGING update last offset
             let temp = res.data;
             let timeZoneName = window.$gz.locale.getBrowserTimeZoneName();
             let languageName = window.$gz.locale.getBrowserLanguages();
@@ -104,9 +114,10 @@ export default {
                 languageName,
                 hour12
               );
+              temp[i].index = i; //TODO: PAGING
             }
 
-            vm.obj = temp;
+            vm.obj = temp; //TODO: PAGING
 
             //Update the form status
             window.$gz.form.setFormState({