created table in order page

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"}
+{"branch_name":"dev","last_commit_date":"2022-02-03T07:51:08.000Z","last_commit_author":"rakesh","last_commit_hash":"d5f0c96eb734aa04ebb26447e10f4b25a34a6f05"}

src/routes/retailer/boxed_order_history.vue

@@ -1,6 +1,5 @@
 <template>
   <v-container>
-    
     <div class="h3 my-5 py-5 body-font1">Order Management</div>
     <v-form>
       <v-row
@@ -37,8 +36,6 @@
                 v-on="on"
                 outlined
                 hide-details
-                 
-              
               ></v-text-field>
             </template>
             <v-date-picker
@@ -60,7 +57,7 @@
           >
             <template v-slot:activator="{ on, attrs }">
               <v-text-field
-                  v-model=" toDate"
+                v-model="toDate"
                 label="To"
                 persistent-hint
                 readonly
@@ -129,43 +126,61 @@
           </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-row no-gutters v-else>
+           <v-col>
               <v-data-table
             :headers="headers"
-              :items="desserts"
+            :items="OrderHistory"
             :items-per-page="10"
             class="elevation-1 pt-5"
-            ></v-data-table>
+          >
+            <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>
-      <p>{{OrderHistory}}</p>
+    <!-- <ul v-for="(listorder, index) in OrderHistory" v-bind:key="index">
- 
+    <li> {{ listorder.items[0].orderId}}</li> 
+    </ul> -->
   </v-container>
 </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", value: "date" },
-        text: "Date",
-        align: "start",
-        sortable: false,
-        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([
+    OrderHistory() {
-      // "orderNumber",
+      return this.$store.state.orderlist.OrderHistory.items;
-      // // "createdDate",
+    },
-      // // "toDate",
+     inProgress() {
-      // "purchaseOrderNumber"
+      return this.$store.state.orderlist.inProgress;
-      "OrderHistory"
+    },
-
-    ])
   },
 
   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) {
+    isoStringToNormalDate(date) {
-      if (!date) return null;
+      let newDateTime = Date.parse(date);
-      const [month, day, year] = date.split("/");
+      let tmp = new Date(newDateTime).toLocaleDateString().split("/");
-      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+      return (date = tmp[1] + "/" + tmp[0] + "/" + tmp[2]);
     },
-    reset() {
+    searchOrder(value) {
-      this.$refs.form.reset();
-    },
-    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/>

src/stores/retailer/orderlist.js

@@ -5,12 +5,13 @@ import humps from 'lodash-humps';
 export const orderlist = {
     namespaced: true,
     state: {
-        fetchInProgress: false,
+        inProgress: true,
-        orderNumber: "",
+        OrderHistory: {},
-        createdDate: "",
+
-        toDate: "",
+        // orderNumber: "",
-        purchaseOrderNumber: "",
+        // createdDate: "",
-        OrderHistory :{},
+        // toDate: "",
+        // purchaseOrderNumber: "",
 
     },
     getters: {
@@ -19,14 +20,14 @@ export const orderlist = {
     },
     mutations: {
         updateField,
-        fetchInProgress(state, yesOrNo) {
+        inProgress(state, yesOrNo) {
-            state.fetchInProgress = yesOrNo
+            state.inProgress = yesOrNo
         },
         // SetOrderlist(state, orderItem) {
         // // console.log(state.orderNumber=orderItem)
         // }  ,
-        setorderHistory(state,orderhistorydata) {
+        setOrderHistory(state, orderhistorydata) {
-            state.OrderHistory=orderhistorydata
+            state.OrderHistory = orderhistorydata
         }
     },
 
@@ -35,15 +36,22 @@ export const orderlist = {
             commit('SetOrderlist', orderItem);
         },
         fetchOrderList: async ({ commit }) => {
+            try {
+                commit('inProgress', true);
                 let OrderHistory = await doFetchOrderHistory();
-            if ( OrderHistory) {
+                if (OrderHistory) {
-                commit('setorderHistory', humps( OrderHistory));
+                    commit('inProgress', false);
+                    commit('setOrderHistory', humps(OrderHistory));
+                }
+            }
+            catch (error) {
+                commit('inProgress', false);
+                throw error
+            }
         }
-        },
     }
 }
 
 
 
 
-