From 74d3d0c4faa541b6dfdfa28e187885658ae11448 Mon Sep 17 00:00:00 2001
From: anjujangid <anju06@pinamik.com>
Date: Sat, 5 Feb 2022 15:49:06 +0530
Subject: [PATCH] created table in order page

---
 git_info.json                               |   2 +-
 src/routes/retailer/boxed_order_history.vue | 375 ++++++++++----------
 src/stores/retailer/orderlist.js            |  42 ++-
 3 files changed, 214 insertions(+), 205 deletions(-)

diff --git a/git_info.json b/git_info.json
index 0980b42..caa7c53 100644
--- a/git_info.json
+++ b/git_info.json
@@ -1 +1 @@
-{"branch_name":"dev","last_commit_date":"2022-02-03T06:19:18.000Z","last_commit_author":"sidharth","last_commit_hash":"cae143cacdaecc9deef0e128226c79d63a3a8bb2"}
\ No newline at end of file
+{"branch_name":"dev","last_commit_date":"2022-02-03T07:51:08.000Z","last_commit_author":"rakesh","last_commit_hash":"d5f0c96eb734aa04ebb26447e10f4b25a34a6f05"}
\ No newline at end of file
diff --git a/src/routes/retailer/boxed_order_history.vue b/src/routes/retailer/boxed_order_history.vue
index 7355b2c..c02ca7c 100644
--- a/src/routes/retailer/boxed_order_history.vue
+++ b/src/routes/retailer/boxed_order_history.vue
@@ -1,171 +1,186 @@
 <template>
   <v-container>
-    
-      <div class="h3 my-5 py-5 body-font1">Order Management</div>
-      <v-form>
-        <v-row
-          class="
-            d-flex
-            justify-center
-            align-center align-md-baseline
-            justify-md-start
-          "
-        >
-          <v-col cols="12" sm="12" md="12" lg="12">
-            <v-text-field
-              label="Order Number"
-              persistent-hint
+    <div class="h3 my-5 py-5 body-font1">Order Management</div>
+    <v-form>
+      <v-row
+        class="
+          d-flex
+          justify-center
+          align-center align-md-baseline
+          justify-md-start
+        "
+      >
+        <v-col cols="12" sm="12" md="12" lg="12">
+          <v-text-field
+            label="Order Number"
+            persistent-hint
+            outlined
+            hide-details
+            v-model="orderNumber"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" sm="12" md="6" lg="4">
+          <v-menu
+            v-model="menu1"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="createdDate"
+                label="Created From"
+                persistent-hint
+                readonly
+                v-bind="attrs"
+                v-on="on"
+                outlined
+                hide-details
+              ></v-text-field>
+            </template>
+            <v-date-picker
+              v-model="date1"
+              no-title
+              @input="menu1 = false"
+            ></v-date-picker>
+          </v-menu>
+        </v-col>
+
+        <div class="pt-md-7">-</div>
+
+        <v-col cols="12" sm="12" md="6" lg="4">
+          <v-menu
+            v-model="menu2"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="toDate"
+                label="To"
+                persistent-hint
+                readonly
+                v-bind="attrs"
+                v-on="on"
+                outlined
+                hide-details
+              ></v-text-field>
+            </template>
+            <v-date-picker
+              v-model="date2"
+              no-title
+              @input="menu2 = false"
+            ></v-date-picker>
+          </v-menu>
+        </v-col>
+
+        <v-col cols="12" sm="12" md="12" lg="12">
+          <v-text-field
+            label="Purchase Order Number"
+            persistent-hint
+            outlined
+            hide-details
+            v-model="purchaseOrderNumber"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="12" sm="12" md="6" lg="3">
+          <v-hover v-slot:default="{ hover }">
+            <v-btn
+              :class="hover ? 'white--text  warning' : 'warning--text'"
+              class="width-250px"
               outlined
-              hide-details
-              v-model="orderNumber"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" sm="12" md="6" lg="4">
-            <v-menu
-              v-model="menu1"
-              :close-on-content-click="false"
-              transition="scale-transition"
-              offset-y
+              @click="reset"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-text-field
-                  v-model="createdDate"
-                  label="Created From"
-                  persistent-hint
-                  readonly
-                  v-bind="attrs"
-                  v-on="on"
-                  outlined
-                  hide-details
-                 
-              
-                ></v-text-field>
-              </template>
-              <v-date-picker
-                v-model="date1"
-                no-title
-                @input="menu1 = false"
-              ></v-date-picker>
-            </v-menu>
-          </v-col>
-
-          <div class="pt-md-7">-</div>
-
-          <v-col cols="12" sm="12" md="6" lg="4">
-            <v-menu
-              v-model="menu2"
-              :close-on-content-click="false"
-              transition="scale-transition"
-              offset-y
-            >
-              <template v-slot:activator="{ on, attrs }">
-                <v-text-field
-                  v-model=" toDate"
-                  label="To"
-                  persistent-hint
-                  readonly
-                  v-bind="attrs"
-                  v-on="on"
-                  outlined
-                  hide-details
-                ></v-text-field>
-              </template>
-              <v-date-picker
-                v-model="date2"
-                no-title
-                @input="menu2 = false"
-              ></v-date-picker>
-            </v-menu>
-          </v-col>
-
-          <v-col cols="12" sm="12" md="12" lg="12">
-            <v-text-field
-              label="Purchase Order Number"
-              persistent-hint
+              Reset
+            </v-btn>
+          </v-hover>
+        </v-col>
+        <v-col cols="12" sm="12" md="6" lg="3">
+          <v-hover v-slot:default="{ hover }">
+            <v-btn
+              :class="hover ? 'white--text  warning' : 'warning--text'"
+              class="width-250px"
               outlined
-              hide-details
-              v-model="purchaseOrderNumber"
-            ></v-text-field>
-          </v-col>
-          <v-col cols="12" sm="12" md="6" lg="3">
-            <v-hover v-slot:default="{ hover }">
+              @click="searchOrder"
+            >
+              Search
+            </v-btn>
+          </v-hover>
+        </v-col>
+        <v-col cols="12" sm="12" md="6" lg="3">
+          <v-hover v-slot:default="{ hover }">
+            <router-link
+              target="_blank"
+              class="text-decoration-none"
+              :to="{ name: '' }"
+            >
               <v-btn
-                :class="hover ? 'white--text  warning' : 'warning--text'"
+                :class="hover ? 'white--text  primary' : 'primary--text'"
                 class="width-250px"
                 outlined
-                @click="reset"
               >
-                Reset
+                New Order
               </v-btn>
-            </v-hover>
-          </v-col>
-          <v-col cols="12" sm="12" md="6" lg="3">
-            <v-hover v-slot:default="{ hover }">
-              <v-btn
-                :class="hover ? 'white--text  warning' : 'warning--text'"
-                class="width-250px"
-                outlined
-                @click="searchOrder"
-              >
-                Search
-              </v-btn>
-            </v-hover>
-          </v-col>
-          <v-col cols="12" sm="12" md="6" lg="3">
-            <v-hover v-slot:default="{ hover }">
-              <router-link
-                target="_blank"
-                class="text-decoration-none"
-                :to="{ name: '' }"
-              >
-                <v-btn
-                  :class="hover ? 'white--text  primary' : 'primary--text'"
-                  class="width-250px"
-                  outlined
-                >
-                  New Order
-                </v-btn>
-              </router-link>
-            </v-hover>
-          </v-col>
-          <v-col cols="12" sm="12" md="12" lg="12">
-            <v-data-table
-              :headers="headers"
-              :items="desserts"
-              :items-per-page="10"
-              class="elevation-1 pt-5"
-            ></v-data-table>
-          </v-col>
+            </router-link>
+          </v-hover>
+        </v-col>
+        <v-col cols="12" sm="12" md="12" lg="12">
+           <v-row class="mt-12" justify="center" v-if="inProgress">
+          <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
         </v-row>
-      </v-form>
-      <p>{{OrderHistory}}</p>
- 
+         <v-row no-gutters v-else>
+           <v-col>
+              <v-data-table
+            :headers="headers"
+            :items="OrderHistory"
+            :items-per-page="10"
+            class="elevation-1 pt-5"
+          >
+            <template v-slot:item.date="{ item }">
+              <span>{{ isoStringToNormalDate(item.updatedAt) }}</span>
+            </template>
+            <template v-slot:item.order="{ item }">
+              <span>{{ item.items[0].orderId }}</span>
+            </template>
+            <template v-slot:item.status="{ item }">
+              <span>{{ item.status }}</span>
+            </template>
+            <template v-slot:item.action="{ item }">
+              <v-hover v-slot:default="{ hover }">
+                <router-link
+                  :class="
+                    hover ? 'content-link-hover-color' : 'secondary--text'
+                  "
+                  to
+                  @click.native="viewMyOrder(item.items[0].orderId)"
+                  class="ls-n009 text-decoration-none body myorders-route-link"
+                  >View Order</router-link
+                >
+              </v-hover>
+            </template>
+          </v-data-table>
+           </v-col>
+         </v-row>
+        </v-col>
+      </v-row>
+    </v-form>
+    <!-- <ul v-for="(listorder, index) in OrderHistory" v-bind:key="index">
+    <li> {{ listorder.items[0].orderId}}</li> 
+    </ul> -->
   </v-container>
-</template>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
+</template>                                                                             
 <script>
-import {createHelpers} from "vuex-map-fields";
-const {mapFields} = createHelpers({
-  getterType:"orderlist/getField",
-  mutationType: "orderlist/updateField"                                                                                                                                                     
-})
-
 export default {
   name: "BoxedOrderHistoryPage",
-  components:{
-   
-  },
+  components: {},
   data: () => ({
     date1: "",
     date2: "",
     menu1: false,
     menu2: false,
     headers: [
-      {
-        text: "Date",
-        align: "start",
-        sortable: false,
-        value: "date",
-      },
+      { text: "Date", value: "date" },
       { text: "Order #", value: "order" },
       { text: "Retailer Name", value: "retailername" },
       { text: "Sales Rep Name", value: "salesrepname" },
@@ -173,26 +188,6 @@ export default {
       { text: "PO Number", value: "POnumber" },
       { text: "Action", value: "action" },
     ],
-    desserts: [
-      {
-        date: "1/27/22",
-        order: 1000316968,
-        retailername: "Pinamik Technologiess",
-        salesrepname: "Brent Kruger bkruger@gmx.com",
-        status: "In Process WS",
-        POnumber: "",
-        action: "View Order",
-      },
-      {
-        date: "1/27/22",
-        order: 1000316968,
-        retailername: "Pinamik Technologiess",
-        salesrepname: "Brent Kruger bkruger@gmx.com",
-        status: "In Process WS",
-        POnumber: "",
-        action: "View Order",
-      },
-    ],
   }),
   computed: {
     createdDate() {
@@ -201,37 +196,43 @@ export default {
     toDate() {
       return this.formatDate(this.date2);
     },
-    ...mapFields([
-      // "orderNumber",
-      // // "createdDate",
-      // // "toDate",
-      // "purchaseOrderNumber"
-      "OrderHistory"
-
-    ])
+    OrderHistory() {
+      return this.$store.state.orderlist.OrderHistory.items;
+    },
+     inProgress() {
+      return this.$store.state.orderlist.inProgress;
+    },
   },
 
   methods: {
+    viewMyOrder(itemId) {
+      this.$store.dispatch("orderlist/fetchOrderList", itemId);
+      this.$router
+        .push({
+          name: "ViewProduct",
+          params: { orderId: itemId },
+        })
+        .catch((error) => {
+          error;
+        });
+    },
     formatDate(date) {
       if (!date) return null;
       const [year, month, day] = date.split("-");
       return `${month}/${day}/${year}`;
     },
-    parseDate(date) {
-      if (!date) return null;
-      const [month, day, year] = date.split("/");
-      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    isoStringToNormalDate(date) {
+      let newDateTime = Date.parse(date);
+      let tmp = new Date(newDateTime).toLocaleDateString().split("/");
+      return (date = tmp[1] + "/" + tmp[0] + "/" + tmp[2]);
     },
-    reset() {
-      this.$refs.form.reset();
-    },
-    searchOrder(value){
+    searchOrder(value) {
       value.preventDeafult();
-    }
+    },
+  },
+  created() {
+    this.$store.dispatch("orderlist/fetchOrderList");
   },
- created(){
-   this.$store.dispatch("orderlist/fetchOrderList")
-  }
 };
 </script>
 <style src="./boxed_order_history.scss" lang="scss" scoped/>
diff --git a/src/stores/retailer/orderlist.js b/src/stores/retailer/orderlist.js
index f07c9c7..c3981b1 100644
--- a/src/stores/retailer/orderlist.js
+++ b/src/stores/retailer/orderlist.js
@@ -5,12 +5,13 @@ import humps from 'lodash-humps';
 export const orderlist = {
     namespaced: true,
     state: {
-        fetchInProgress: false,
-        orderNumber: "",
-        createdDate: "",
-        toDate: "",
-        purchaseOrderNumber: "",
-        OrderHistory :{},
+        inProgress: true,
+        OrderHistory: {},
+
+        // orderNumber: "",
+        // createdDate: "",
+        // toDate: "",
+        // purchaseOrderNumber: "",
 
     },
     getters: {
@@ -19,14 +20,14 @@ export const orderlist = {
     },
     mutations: {
         updateField,
-        fetchInProgress(state, yesOrNo) {
-            state.fetchInProgress = yesOrNo
+        inProgress(state, yesOrNo) {
+            state.inProgress = yesOrNo
         },
         // SetOrderlist(state, orderItem) {
         // // console.log(state.orderNumber=orderItem)
         // }  ,
-        setorderHistory(state,orderhistorydata) {
-            state.OrderHistory=orderhistorydata
+        setOrderHistory(state, orderhistorydata) {
+            state.OrderHistory = orderhistorydata
         }
     },
 
@@ -35,15 +36,22 @@ export const orderlist = {
             commit('SetOrderlist', orderItem);
         },
         fetchOrderList: async ({ commit }) => {
-            let OrderHistory = await doFetchOrderHistory();
-            if ( OrderHistory) {
-                commit('setorderHistory', humps( OrderHistory));
+            try {
+                commit('inProgress', true);
+                let OrderHistory = await doFetchOrderHistory();
+                if (OrderHistory) {
+                    commit('inProgress', false);
+                    commit('setOrderHistory', humps(OrderHistory));
+                }
             }
-        },
+            catch (error) {
+                commit('inProgress', false);
+                throw error
+            }
+        }
     }
 }
-    
-    
 
-    
+
+