From 5ad5ba9167841ec638588d61c225680b6195d793 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Thu, 15 Jul 2021 15:47:39 +0000
Subject: [PATCH 1/2] Fix few UI bugs.

1. The ordering in OTAJobTable was incorrect. Now fixed.
2. The JobDisplay card in JobList wasn't rendered correctly.

Test: Mannual tested.
Change-Id: I53d861fb60a623552487f957b42f4cd7404e654e
---
 tools/otagui/src/components/JobDisplay.vue  |  4 ++--
 tools/otagui/src/components/OTAJobTable.vue | 18 ++++++++----------
 tools/otagui/src/views/JobList.vue          |  9 ++++-----
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/tools/otagui/src/components/JobDisplay.vue b/tools/otagui/src/components/JobDisplay.vue
index ee4abb601..98368b380 100644
--- a/tools/otagui/src/components/JobDisplay.vue
+++ b/tools/otagui/src/components/JobDisplay.vue
@@ -36,8 +36,8 @@ export default {
 
 <style>
 .job-display {
-  padding: 20px;
-  width: 250px;
+  padding: 5%;
+  width: 90%;
   cursor: pointer;
   border: 1px solid #39495c;
   margin-bottom: 18px;
diff --git a/tools/otagui/src/components/OTAJobTable.vue b/tools/otagui/src/components/OTAJobTable.vue
index ae5931129..8fcc92796 100644
--- a/tools/otagui/src/components/OTAJobTable.vue
+++ b/tools/otagui/src/components/OTAJobTable.vue
@@ -82,13 +82,13 @@ export default {
     }
   },
   created() {
-    this.rows = this.jobs
+    this.rows = this.sort(this.jobs, this.sortable.order, this.sortable.sort, 0, 10)
     this.total = this.jobs.length
   },
   methods: {
     sort(arr, key, sortOrder, offset, limit) {
       let orderNumber = 1
-      if (sortOrder==="asc") {
+      if (sortOrder==="desc") {
         orderNumber = -1
       }
       return arr.sort(function(a, b) {
@@ -97,17 +97,15 @@ export default {
         if (keyA < keyB) return -1*orderNumber;
         if (keyA > keyB) return 1*orderNumber;
         return 0;
-      }).slice(offset, limit);
+      }).slice(offset, offset + limit);
     },
     doSearch(offset, limit, order, sort) {
       this.isLoading = true
-      setTimeout(() => {
-        this.sortable.order = order
-        this.sortable.sort = sort
-        this.rows = this.sort(this.jobs, order, sort, offset, limit)
-        this.total = this.jobs.length
-      }, 600)
-      setTimeout(() => {this.isLoading=false}, 1000)
+      this.sortable.order = order
+      this.sortable.sort = sort
+      this.rows = this.sort(this.jobs, order, sort, offset, limit)
+      this.total = this.jobs.length
+      this.isLoading = false
     }
   }
 }
diff --git a/tools/otagui/src/views/JobList.vue b/tools/otagui/src/views/JobList.vue
index 1bf30edd2..0dd96cefd 100644
--- a/tools/otagui/src/views/JobList.vue
+++ b/tools/otagui/src/views/JobList.vue
@@ -4,12 +4,11 @@
     :jobs="jobs"
   />
   <v-row>
-    <v-cow
+    <v-col
       v-for="job in jobs"
       :key="job.id"
-      cols="3"
-      sm="12"
-      class="ma-5"
+      cols="12"
+      sm="3"
     >
       <JobDisplay
         :job="job"
@@ -17,7 +16,7 @@
         @mouseover="mouseOver(job.id, true)"
         @mouseout="mouseOver(job.id, false)"
       />
-    </v-cow>
+    </v-col>
   </v-row>
   <v-btn
     block

From c52791ae3852bc0ba8a1b591ae23509c4dbd45c5 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Thu, 15 Jul 2021 17:29:54 +0000
Subject: [PATCH 2/2] Add data table for build library.

Currently, users cannot choose build from the datatable directly, but
the datatable will give options to sort the builds uploaded and then
select from the sorted list.

Test: mannual tested.
Change-Id: If4e8ff7210a19170f7a7e6f77f03d21f6a10e6ac
---
 tools/otagui/src/components/BuildTable.vue  | 85 +++++++++++++++++++++
 tools/otagui/src/components/OTAJobTable.vue | 20 +----
 tools/otagui/src/services/TableService.js   | 13 ++++
 tools/otagui/src/views/SimpleForm.vue       |  6 ++
 4 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 tools/otagui/src/components/BuildTable.vue
 create mode 100644 tools/otagui/src/services/TableService.js

diff --git a/tools/otagui/src/components/BuildTable.vue b/tools/otagui/src/components/BuildTable.vue
new file mode 100644
index 000000000..d04662dbb
--- /dev/null
+++ b/tools/otagui/src/components/BuildTable.vue
@@ -0,0 +1,85 @@
+<template>
+  <TableLite
+    :columns="columns"
+    :is-re-search="isReSearch"
+    :is-loading="isLoading"
+    :rows="rows"
+    :sortable="sortable"
+    :total="total"
+    @do-search="doSearch"
+  />
+</template>
+
+<script>
+import TableLite from 'vue3-table-lite'
+import FormDate from '../services/FormDate.js'
+import { TableSort } from '../services/TableService.js'
+
+export default {
+  components: {
+    TableLite
+  },
+  props: {
+    builds: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      rows: null,
+      columns: [
+        {
+          label: "Build Name",
+          field: "file_name",
+          sortable: true
+        },
+        {
+          label: "Upload Time",
+          field: "time",
+          sortable: true,
+          display: function (row) {
+            return FormDate.formDate(row.time)
+          }
+        },
+        {
+          label: "Build ID",
+          field: "build_id",
+          sortable: true
+        },
+        {
+          label: "Build Version",
+          field: "build_version",
+          sortable: true
+        },
+        {
+          label: "Build Flavor",
+          field: "build_flavor",
+          sortable: true
+        }
+      ],
+      sortable: {
+        order: "time",
+        sort: "desc",
+      },
+      isReSearch: false,
+      isLoading: false,
+      total: 0
+    }
+  },
+  created() {
+    this.rows = TableSort(this.builds, this.sortable.order, this.sortable.sort, 0, 10)
+    this.total = this.builds.length
+  },
+  methods: {
+    doSearch(offset, limit, order, sort) {
+      this.isLoading = true
+      this.sortable.order = order
+      this.sortable.sort = sort
+      this.rows = TableSort(this.builds, order, sort, offset, limit)
+      this.total = this.builds.length
+      this.isLoading = false
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/tools/otagui/src/components/OTAJobTable.vue b/tools/otagui/src/components/OTAJobTable.vue
index 8fcc92796..cad9bfc1e 100644
--- a/tools/otagui/src/components/OTAJobTable.vue
+++ b/tools/otagui/src/components/OTAJobTable.vue
@@ -13,6 +13,7 @@
 <script>
 import TableLite from 'vue3-table-lite'
 import FormDate from '../services/FormDate.js'
+import { TableSort } from '../services/TableService.js'
 
 export default {
   components: {
@@ -70,7 +71,7 @@ export default {
           display: function (row) {
             return FormDate.formDate(row.finish_time)
           }
-        }
+        },
       ],
       sortable: {
         order: "start_time",
@@ -82,28 +83,15 @@ export default {
     }
   },
   created() {
-    this.rows = this.sort(this.jobs, this.sortable.order, this.sortable.sort, 0, 10)
+    this.rows = TableSort(this.jobs, this.sortable.order, this.sortable.sort, 0, 10)
     this.total = this.jobs.length
   },
   methods: {
-    sort(arr, key, sortOrder, offset, limit) {
-      let orderNumber = 1
-      if (sortOrder==="desc") {
-        orderNumber = -1
-      }
-      return arr.sort(function(a, b) {
-        var keyA = a[key],
-          keyB = b[key];
-        if (keyA < keyB) return -1*orderNumber;
-        if (keyA > keyB) return 1*orderNumber;
-        return 0;
-      }).slice(offset, offset + limit);
-    },
     doSearch(offset, limit, order, sort) {
       this.isLoading = true
       this.sortable.order = order
       this.sortable.sort = sort
-      this.rows = this.sort(this.jobs, order, sort, offset, limit)
+      this.rows = TableSort(this.jobs, order, sort, offset, limit)
       this.total = this.jobs.length
       this.isLoading = false
     }
diff --git a/tools/otagui/src/services/TableService.js b/tools/otagui/src/services/TableService.js
new file mode 100644
index 000000000..d2ae3059b
--- /dev/null
+++ b/tools/otagui/src/services/TableService.js
@@ -0,0 +1,13 @@
+export function TableSort(arr, key, sortOrder, offset, limit) {
+  let orderNumber = 1
+  if (sortOrder==="desc") {
+    orderNumber = -1
+  }
+  return arr.sort(function(a, b) {
+    var keyA = a[key],
+      keyB = b[key];
+    if (keyA < keyB) return -orderNumber;
+    if (keyA > keyB) return orderNumber;
+    return 0;
+  }).slice(offset, offset + limit);
+}
\ No newline at end of file
diff --git a/tools/otagui/src/views/SimpleForm.vue b/tools/otagui/src/views/SimpleForm.vue
index 8326e311e..eb4ea05a5 100644
--- a/tools/otagui/src/views/SimpleForm.vue
+++ b/tools/otagui/src/views/SimpleForm.vue
@@ -68,6 +68,10 @@
       <ul>
         <h3>Build Library</h3>
         <UploadFile @file-uploaded="fetchTargetList" />
+        <BuildTable
+          v-if="targetDetails.length>0"
+          :builds="targetDetails"
+        />
         <li
           v-for="targetDetail in targetDetails"
           :key="targetDetail.file_name"
@@ -111,6 +115,7 @@ import ApiService from '../services/ApiService.js'
 import UploadFile from '@/components/UploadFile.vue'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import FormDate from '../services/FormDate.js'
+import BuildTable from '@/components/BuildTable.vue'
 import { uuid } from 'vue-uuid'
 
 export default {
@@ -120,6 +125,7 @@ export default {
     UploadFile,
     FileSelect,
     PartialCheckbox,
+    BuildTable
   },
   data() {
     return {