OLFBP-753, export Order History table

I think this will change as it does not specify the fields

package.json

@@ -53,6 +53,7 @@
     "element-ui": "2.7.0",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
+    "papaparse": "^5.0.2",
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",

src/views/orders/list.vue

@@ -1,31 +1,100 @@
 <template>
   <div class="app-container">
-
     <div class="filter-container">
-      <el-input v-model="listQuery.orderId" placeholder="Order Id" width="10%" />
+      <el-row :gutter="10">
-      <el-date-picker
+        <el-col :xs="7" :sm="6" :md="6" :lg="4" :xl="3">
-        v-model="listQuery.dateRange"
+          <el-input v-model="listQuery.orderId" placeholder="Order Id" style="width: 100%;" />
-        type="daterange"
+        </el-col>
-        range-separator="To"
+        <el-col :xs="17" :sm="6" :md="6" :lg="6" :xl="5">
-        start-placeholder="Start date"
+          <el-date-picker
-        end-placeholder="End date"
+            v-model="listQuery.dateRange"
-      />
+            type="daterange"
-      <el-select v-model="listQuery.sellerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Seller Accounts" loading-text="Loading...">
+            range-separator="To"
-        <el-option v-for="(item,index) in sellerAccounts" :key="item+index" :label="item.name" :value="item.id" />
+            start-placeholder="Start date"
-      </el-select>
+            end-placeholder="End date"
-      <el-select v-model="listQuery.buyerAccountId" :remote-method="getRemoteAccountList" filterable default-first-option remote placeholder="Buyer Accounts" loading-text="Loading...">
+            style="width: 100%;"
-        <el-option v-for="(item,index) in buyerAccounts" :key="item+index" :label="item.name" :value="item.id" />
+          />
-      </el-select>
+        </el-col>
-      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
-        Search
+          <el-select
-      </el-button>
+            v-model="listQuery.sellerAccountId"
-      <el-button class="filter-item" type="danger" icon="el-icon-remove" @click="resetFilter">
+            style="width: 100%;"
-        Reset
+            :remote-method="getRemoteAccountList"
-      </el-button>
+            filterable
+            default-first-option
+            remote
+            placeholder="Seller Accounts"
+            loading-text="Loading..."
+          >
+            <el-option
+              v-for="(item,index) in sellerAccounts"
+              :key="item+index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-col>
+        <el-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
+          <el-select
+            v-model="listQuery.buyerAccountId"
+            style="width: 100%;"
+            :remote-method="getRemoteAccountList"
+            filterable
+            default-first-option
+            remote
+            placeholder="Buyer Accounts"
+            loading-text="Loading..."
+          >
+            <el-option
+              v-for="(item,index) in buyerAccounts"
+              :key="item+index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-col>
+        <el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="2">
+          <el-button
+            class="filter-item"
+            type="primary"
+            icon="el-icon-search"
+            style="width: 100%;"
+            @click="handleFilter"
+          >Search</el-button>
+        </el-col>
+        <el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="2">
+          <el-button
+            class="filter-item"
+            type="danger"
+            icon="el-icon-remove"
+            style="width: 100%;"
+            @click="resetFilter"
+          >Reset</el-button>
+        </el-col>
+        <el-col :xs="7" :sm="6" :md="6" :lg="3" :xl="3">
+          <el-button
+            v-if="list !== null"
+            class="filter-item"
+            type="warning"
+            icon="el-icon-remove"
+            style="width: 100%;"
+            :disabled="!(list.length > 0)"
+            @click="downloadCsv"
+          >Download .csv</el-button>
+        </el-col>
+      </el-row>
     </div>
 
-    <el-table v-loading="listLoading" :data="list" border fit style="width: 100%" :summary-method="getSummary" show-summary>
+    <el-table
-      <el-table-column align="center" label="Date" sortable prop="created" width="200">
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      style="width: 100%"
+      :summary-method="getSummary"
+      show-summary
+    >
+      <el-table-column align="center" label="Date" sortable prop="created" width="300">
         <template slot-scope="scope">
           <span>{{ scope.row.created }}</span>
         </template>
@@ -33,7 +102,13 @@
 
       <el-table-column align="center" prop="orderId" sortable label="Order Id" width="100" />
 
-      <el-table-column align="center" prop="offers[0].seller.name" sortable label="Seller" width="250" />
+      <el-table-column
+        align="center"
+        prop="offers[0].seller.name"
+        sortable
+        label="Seller"
+        width="250"
+      />
 
       <el-table-column align="center" prop="buyer.name" sortable label="Buyer" width="250" />
 
@@ -49,25 +124,20 @@
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column class-name="status-col" label="Status" width="200">
         <template slot-scope="{row}">
-          <el-tag :type="row.status | statusFilter">
+          <el-tag :type="row.status | statusFilter">{{ row.status }}</el-tag>
-            {{ row.status }}
-          </el-tag>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="Actions" width="120">
         <template slot-scope="scope">
           <router-link :to="'/orders/edit/' + scope.row._id">
-            <el-button type="primary" size="small" icon="el-icon-edit">
+            <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
-              Edit
-            </el-button>
           </router-link>
         </template>
       </el-table-column>
     </el-table>
-
   </div>
 </template>
 
@@ -75,6 +145,8 @@
 const fetchAccountList = require('@/api/account').fetchList
 import { fetchList } from '@/api/order'
 import moment from 'moment'
+import papa from 'papaparse'
+import { saveAs } from 'file-saver'
 
 export default {
   name: 'OrderList',
@@ -89,7 +161,7 @@ export default {
     totalPrice(offers) {
       let price = 0
       offers.forEach(element => {
-        price += ((element.price * 10) * element.quantityOrdered)
+        price += element.price * 10 * element.quantityOrdered
       })
       return `€${(price * 1.19).toFixed(2)}`
     }
@@ -108,7 +180,13 @@ export default {
         orderId: '',
         buyerAccountId: '',
         sellerAccountId: '',
-        dateRange: [moment().startOf('day').startOf('week').toDate(), moment().toDate()]
+        dateRange: [
+          moment()
+            .startOf('day')
+            .startOf('week')
+            .toDate(),
+          moment().toDate()
+        ]
       }
     }
   },
@@ -117,14 +195,39 @@ export default {
     this.getList()
   },
   methods: {
+    downloadCsv() {
+      var csvDoc = []
+      for (var i = 0; i < this.list.length; i++) {
+        csvDoc.push({
+          Created: this.list[i].created,
+          'Order Id': this.list[i].orderId,
+          Seller: this.list[i].offers[0].seller.name,
+          Buyer: this.list[i].buyer.name,
+          Total: this.$options.filters.totalPrice(this.list[i].offers),
+          Products: this.list[i].offers.length,
+          Status: this.$options.filters.statusFilter(this.list[i].status)
+        })
+      }
+      const output = '\ufeff' + papa.unparse(csvDoc)
+      var blob = new Blob([output], { type: 'text/plain;charset=utf-8' })
+      saveAs(blob, 'orders.csv')
+    },
     getRemoteAccountList(query) {
       query = {}
       query.platform = 'OLFDE'
       query.limit = 100
       fetchAccountList(query).then(response => {
         if (!response.data.docs) return
-        this.sellerAccounts = response.data.docs.filter(a => a.type === 'seller').map(v => { return { name: v.name, id: v._id } })
+        this.sellerAccounts = response.data.docs
-        this.buyerAccounts = response.data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
+          .filter(a => a.type === 'seller')
+          .map(v => {
+            return { name: v.name, id: v._id }
+          })
+        this.buyerAccounts = response.data.docs
+          .filter(a => a.type === 'buyer')
+          .map(v => {
+            return { name: v.name, id: v._id }
+          })
       })
     },
     getSummary(param) {
@@ -134,7 +237,7 @@ export default {
       let totalPrice = 0
       data.forEach(order => {
         order.offers.forEach(element => {
-          totalPrice += ((element.price * 10) * element.quantityOrdered)
+          totalPrice += element.price * 10 * element.quantityOrdered
         })
       })
 
@@ -165,7 +268,9 @@ export default {
 
       // If we have an orderId, that trumps all other fields
       if (this.listQuery.orderId && this.listQuery.orderId.length > 0) {
-        this.list = allItems.filter(o => o.orderId.indexOf(this.listQuery.orderId) > -1)
+        this.list = allItems.filter(
+          o => o.orderId.indexOf(this.listQuery.orderId) > -1
+        )
       } else {
         // We don't have an order id, let's check the other fields to use
         let newResults = allItems
@@ -173,16 +278,23 @@ export default {
         if (this.listQuery.dateRange.length === 2) {
           newResults = newResults.filter(o => {
             const created = new Date(o.created).getTime()
-            return created > this.listQuery.dateRange[0].getTime() && created < this.listQuery.dateRange[1].getTime()
+            return (
+              created > this.listQuery.dateRange[0].getTime() &&
+              created < this.listQuery.dateRange[1].getTime()
+            )
           })
         }
 
         if (this.listQuery.sellerAccountId.length > 0) {
-          newResults = newResults.filter(o => o.offers[0].seller._id === this.listQuery.sellerAccountId)
+          newResults = newResults.filter(
+            o => o.offers[0].seller._id === this.listQuery.sellerAccountId
+          )
         }
 
         if (this.listQuery.buyerAccountId.length > 0) {
-          newResults = newResults.filter(o => o.buyer._id === this.listQuery.buyerAccountId)
+          newResults = newResults.filter(
+            o => o.buyer._id === this.listQuery.buyerAccountId
+          )
         }
 
         this.list = newResults
@@ -201,4 +313,8 @@ export default {
   right: 15px;
   top: 10px;
 }
+
+.el-col {
+  padding-top: 10px;
+}
 </style>