From b6163b1fe1cb8269572f3f021add19fa43991481 Mon Sep 17 00:00:00 2001
From: Dean Bartok-Thomas <dean@spikedsoftware.com>
Date: Sun, 1 Sep 2019 23:09:20 +0100
Subject: [PATCH] Added orders list and filtering, displaying of order too

---
 package.json                                |   1 +
 src/api/order.js                            |  13 +
 src/router/index.js                         |  31 ++
 src/views/orders/components/OrderDetail.vue | 334 ++++++++++++++++++++
 src/views/orders/create.vue                 |  13 +
 src/views/orders/edit.vue                   |  13 +
 src/views/orders/list.vue                   | 204 ++++++++++++
 7 files changed, 609 insertions(+)
 create mode 100644 src/api/order.js
 create mode 100644 src/views/orders/components/OrderDetail.vue
 create mode 100644 src/views/orders/create.vue
 create mode 100644 src/views/orders/edit.vue
 create mode 100644 src/views/orders/list.vue

diff --git a/package.json b/package.json
index 351bf5dc..3780f34b 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 00000000..1585e733
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+const apiUrl = 'https://orders.service.development.therig.onlinefuelslabs.io'
+
+export function fetchList(query) {
+  query.platform = 'OLFDE'
+  query.accountId = '5caf6ca5bca1f9001212b6ec'
+  return axios.get(`${apiUrl}/orders`, { params: query })
+}
+
+export function fetchOrder(id) {
+  return axios.get(`${apiUrl}/orders/${id}`)
+}
diff --git a/src/router/index.js b/src/router/index.js
index fb160cfb..41a94db8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -292,6 +292,37 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/orders',
+    component: Layout,
+    redirect: '/orders/list',
+    name: 'Orders',
+    meta: {
+      title: 'Orders',
+      icon: 'example'
+    },
+    children: [
+      {
+        path: 'create',
+        component: () => import('@/views/orders/create'),
+        name: 'CreateOrder',
+        meta: { title: 'Create Order', icon: 'edit' }
+      },
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/orders/edit'),
+        name: 'EditOrder',
+        meta: { title: 'Edit Order', noCache: true, activeMenu: '/orders/list' },
+        hidden: true
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/orders/list'),
+        name: 'OrderList',
+        meta: { title: 'Order List', icon: 'list' }
+      }
+    ]
+  },
   {
     path: '/permission',
     component: Layout,
diff --git a/src/views/orders/components/OrderDetail.vue b/src/views/orders/components/OrderDetail.vue
new file mode 100644
index 00000000..c7d242cc
--- /dev/null
+++ b/src/views/orders/components/OrderDetail.vue
@@ -0,0 +1,334 @@
+<template>
+  <div class="createProduct-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          Save
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+
+        <el-row>
+          <el-col :span="20">
+            <div class="postInfo-container">
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Id" class="postInfo-container-item">
+                    <el-input v-model="postForm.orderId" placeholder="Id" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Seller" class="postInfo-container-item">
+                    <el-input v-model="postForm.offers[0].seller.name" placeholder="Seller" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Buyer" class="postInfo-container-item">
+                    <el-input v-model="postForm.buyer.name" placeholder="Buyer" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label-width="120px" label="Status" class="postInfo-container-item">
+                    <el-radio-group v-model="postForm.status">
+                      <el-radio-button label="Complete">Complete</el-radio-button>
+                      <el-radio-button label="Cancelled">Cancelled</el-radio-button>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="18">
+                  <el-form-item label-width="120px" label="Items" class="postInfo-container-item">
+
+                    <el-table :data="postForm.offers" border style="width: 100%">
+                      <el-table-column align="center" label="Id" width="100">
+                        <template slot-scope="scope">
+                          <span>{{ postForm.orderId }}-{{ scope.$index + 1 }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Product" width="170">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.fuel.name }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Terminal" width="170">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.terminal.name }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Lifting" width="120">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row | collectionTime }}</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Credit" width="120">
+                        <template>
+                          <span>Wie Vereinbart</span>
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Price" width="90">
+                        <template slot-scope="scope">
+                          <el-input v-model="scope.row.price" placeholder="0.00" />
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Volume" width="80">
+                        <template slot-scope="scope">
+                          <el-input v-model="scope.row.quantityOrdered" placeholder="0" />
+                        </template>
+                      </el-table-column>
+
+                      <el-table-column align="center" label="Line Total">
+                        <template slot-scope="scope">
+                          <span>{{ Number((scope.row.quantityOrdered * scope.row.price) * 10).toFixed(2) }}</span>
+                        </template>
+                      </el-table-column>
+
+                    </el-table>
+
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Ex. VAT" class="postInfo-container-item">
+                    <el-input v-model="exVatPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="VAT" class="postInfo-container-item">
+                    <el-input v-model="vatPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="isEdit">
+                <el-col :span="4">
+                  <el-form-item label-width="120px" label="Total" class="postInfo-container-item">
+                    <el-input v-model="totalPrice" placeholder="0" readonly />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Sticky from '@/components/Sticky' // 粘性header组件
+import { fetchOrder } from '@/api/order'
+
+const defaultForm = {
+  id: '',
+  orderId: ''
+}
+
+export default {
+  name: 'OrderDetail',
+  components: { Sticky },
+  filters: {
+    collectionTime(offer) {
+      if (offer.collectionRange) {
+        return 'Range'
+      } else {
+        return 'Add on days'
+      }
+    },
+    credit(offer) {
+      if (offer.collectionRange) {
+        return 'Range'
+      } else {
+        return 'Add on days'
+      }
+    }
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    const validateRequire = (rule, value, callback) => {
+      if (value === '') {
+        this.$message({
+          message: rule.field + 'Epic Success brudda',
+          type: 'error'
+        })
+        callback(new Error(rule.field + ' ERRRR'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      postForm: Object.assign({}, defaultForm),
+      loading: false,
+      regionListOptions: [],
+      rules: {
+        // image_uri: [{ validator: validateRequire }],
+        name: [{ validator: validateRequire }]
+        // content: [{ validator: validateRequire }],
+        // source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
+      },
+      tempRoute: {}
+    }
+  },
+  computed: {
+    displayTime: {
+      // set and get is useful when the data
+      // returned by the back end api is different from the front end
+      // back end return => "2013-06-25 06:59:25"
+      // front end need timestamp => 1372114765000
+      get() {
+        return (+new Date(this.postForm.display_time))
+      },
+      set(val) {
+        this.postForm.display_time = new Date(val)
+      }
+    },
+    exVatPrice: {
+      get() {
+        let price = 0
+        this.postForm.offers.forEach(element => {
+          price += ((element.price * 10) * element.quantityOrdered)
+        })
+        return price.toFixed(2)
+      }
+    },
+    vatPrice: {
+      get() {
+        return (Number(this.exVatPrice) * 0.19).toFixed(2)
+      }
+    },
+    totalPrice: {
+      get() {
+        return (Number(this.exVatPrice) + Number(this.vatPrice)).toFixed(2)
+      }
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      const id = this.$route.params && this.$route.params.id
+      this.fetchData(id)
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
+    }
+
+    // Why need to make a copy of this.$route here?
+    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
+    this.tempRoute = Object.assign({}, this.$route)
+  },
+  methods: {
+    fetchData(id) {
+      fetchOrder(id).then(response => {
+        const order = response.data.order
+
+        this.postForm = order
+
+        // // set tagsview title
+        this.setTagsViewTitle()
+
+        // // set page title
+        this.setPageTitle()
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    setTagsViewTitle() {
+      const title = 'Edit Order'
+      const route = Object.assign({}, this.tempRoute, { title: `${title} - ${this.postForm.orderId}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+    },
+    setPageTitle() {
+      const title = 'Edit Order'
+      document.title = `${title} - ${this.postForm.id}`
+    },
+    submitForm() {
+      this.$refs.postForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+
+          // Save the account
+          const methodToCall = this.isEdit ? function() {} : function() {}
+          methodToCall(this.postForm).then((r) => {
+            this.$notify({
+              title: 'Success',
+              message: 'FAQ Saved',
+              type: 'success',
+              duration: 2000
+            })
+
+            // Redirect to the edit page when we create a new one
+            if (!this.isEdit) { this.$router.push(`/faqs/edit/${r.data.createdFaq._id}`) }
+
+            this.loading = false
+          }).catch((e) => {
+            console.dir(e)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea /deep/ {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+</style>
diff --git a/src/views/orders/create.vue b/src/views/orders/create.vue
new file mode 100644
index 00000000..78935d4e
--- /dev/null
+++ b/src/views/orders/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <order-detail :is-edit="false" />
+</template>
+
+<script>
+import OrderDetail from './components/OrderDetail'
+
+export default {
+  name: 'CreateForm',
+  components: { OrderDetail }
+}
+</script>
+
diff --git a/src/views/orders/edit.vue b/src/views/orders/edit.vue
new file mode 100644
index 00000000..c16bed3e
--- /dev/null
+++ b/src/views/orders/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <order-detail :is-edit="true" />
+</template>
+
+<script>
+import OrderDetail from './components/OrderDetail'
+
+export default {
+  name: 'EditForm',
+  components: { OrderDetail }
+}
+</script>
+
diff --git a/src/views/orders/list.vue b/src/views/orders/list.vue
new file mode 100644
index 00000000..c0bb3fcf
--- /dev/null
+++ b/src/views/orders/list.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="app-container">
+
+    <div class="filter-container">
+      <el-input v-model="listQuery.orderId" placeholder="Order Id" width="10%" />
+      <el-date-picker
+        v-model="listQuery.dateRange"
+        type="daterange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+      />
+      <el-select v-model="listQuery.sellerAccountId" :remote-method="getRemoteAccountList" 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-select v-model="listQuery.buyerAccountId" :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-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        Search
+      </el-button>
+      <el-button class="filter-item" type="danger" icon="el-icon-remove" @click="resetFilter">
+        Reset
+      </el-button>
+    </div>
+
+    <el-table 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="200">
+        <template slot-scope="scope">
+          <span>{{ scope.row.created }}</span>
+        </template>
+      </el-table-column>
+
+      <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="buyer.name" sortable label="Buyer" width="250" />
+
+      <el-table-column align="center" label="Total" width="120">
+        <template slot-scope="scope">
+          <span>{{ scope.row.offers | totalPrice }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Products" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.offers.length }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column class-name="status-col" label="Status" width="110">
+        <template slot-scope="{row}">
+          <el-tag :type="row.status | statusFilter">
+            {{ 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">
+              Edit
+            </el-button>
+          </router-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+const fetchAccountList = require('@/api/account').fetchList
+import { fetchList } from '@/api/order'
+import moment from 'moment'
+
+export default {
+  name: 'OrderList',
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        Complete: 'success',
+        Cancelled: 'danger'
+      }
+      return statusMap[status]
+    },
+    totalPrice(offers) {
+      let price = 0
+      offers.forEach(element => {
+        price += ((element.price * 10) * element.quantityOrdered)
+      })
+      return `€${(price * 1.19).toFixed(2)}`
+    }
+  },
+  data() {
+    return {
+      sellerAccounts: [],
+      buyerAccounts: [],
+      originalList: null,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        orderId: '',
+        buyerAccountId: '',
+        sellerAccountId: '',
+        dateRange: [moment().startOf('day').startOf('week').toDate(), moment().toDate()]
+      }
+    }
+  },
+  created() {
+    this.listQuery.platform = 'OLFDE'
+    this.getList()
+  },
+  methods: {
+    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.buyerAccounts = response.data.docs.filter(a => a.type === 'buyer').map(v => { return { name: v.name, id: v._id } })
+      })
+    },
+    getSummary(param) {
+      const { data } = param
+      const sums = []
+
+      let totalPrice = 0
+      data.forEach(order => {
+        order.offers.forEach(element => {
+          totalPrice += ((element.price * 10) * element.quantityOrdered)
+        })
+      })
+
+      // Set the sum on the 4th column, as that's the cost one
+      sums[4] = Number(totalPrice * 1.19).toFixed(2)
+
+      return sums
+    },
+    getList() {
+      this.listLoading = true
+      fetchList(this.listQuery).then(response => {
+        this.originalList = response.data.orders
+        this.total = response.data.orders.length
+        this.listLoading = false
+
+        // Handle the filter for the initial load
+        this.handleFilter()
+      })
+    },
+    resetFilter() {
+      this.listQuery.orderId = ''
+      this.listQuery.dateRange = []
+      this.listQuery.sellerAccountId = ''
+      this.listQuery.buyerAccountId = ''
+    },
+    handleFilter() {
+      const allItems = this.originalList
+
+      // 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)
+      } else {
+        // We don't have an order id, let's check the other fields to use
+        let newResults = allItems
+
+        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()
+          })
+        }
+
+        if (this.listQuery.sellerAccountId.length > 0) {
+          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)
+        }
+
+        this.list = newResults
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>