created form in order page

git_info.json

@@ -1 +1 @@
-{"branch_name":"beta","last_commit_date":"2022-01-24T12:46:48.000Z","last_commit_author":"anju j","last_commit_hash":"29509c005abdd92691f4543999a119df3fd403c0"}
+{"branch_name":"dev","last_commit_date":"2022-01-24T12:54:49.000Z","last_commit_author":"rakesh","last_commit_hash":"4ffb843e46532353dd9a1963aa9f3f079c2ebed2"}

src/routes/retailer/boxed_order_history.scss

@@ -0,0 +1,4 @@
+.width-250px {
+    width: 100% !important;
+  }
+  

src/routes/retailer/boxed_order_history.vue

@@ -1,11 +1,229 @@
 <template>
+  <v-container>
     <div>
-        <p>this is boxed order history page</p>
+      <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
+                @click="reset"
+              >
+                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
+                @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>
+        </v-row>
+      </v-form>
     </div>
+  </v-container>
 </template>
 <script>
-export default {
+import {createHelpers} from "vuex-map-fields";
-   name: 'BoxedOrderHistoryPage',
+const {mapFields} = createHelpers({
+  getterType:"orderlist/getField",
+  mutationType: "orderlist/updateField"
+})
 
-}
+export default {
+  name: "BoxedOrderHistoryPage",
+  data: () => ({
+    date1: "",
+    date2: "",
+    menu1: false,
+    menu2: false,
+    headers: [
+      {
+        text: "Date",
+        align: "start",
+        sortable: false,
+        value: "date",
+      },
+      { text: "Order #", value: "order" },
+      { text: "Retailer Name", value: "retailername" },
+      { text: "Sales Rep Name", value: "salesrepname" },
+      { text: "Status", value: "status" },
+      { 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() {
+      return this.formatDate(this.date1);
+    },
+    toDate() {
+      return this.formatDate(this.date2);
+    },
+    ...mapFields([
+      "orderNumber",
+      // "createdDate",
+      // "toDate",
+      "purchaseOrderNumber"
+    ])
+  },
+
+  methods: {
+    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")}`;
+    },
+    reset() {
+      this.$refs.form.reset();
+    },
+    searchOrder(value){
+      value.preventDeafult();
+
+    }
+  },
+};
 </script>
+<style src="./boxed_order_history.scss" lang="scss" scoped/>

src/stores/index.js

@@ -15,6 +15,7 @@ import { auth } from './gate/auth.module';
 import { headerCategoryList } from './retailer/header';
 import { meProductOne } from './retailer/me_product.one';
 import { catalogBrowser } from './retailer/catalog_browser';
+import {orderlist} from "./retailer/orderlist"
 Vue.use(Vuex)
 
 /**
@@ -32,7 +33,8 @@ const store = new Vuex.Store({
     productOne,    
     userCartProduct,      
     meProductOne,      
-    catalogBrowser
+    catalogBrowser,
+    orderlist
 
   }
 })

src/stores/retailer/orderlist.js

@@ -0,0 +1,33 @@
+import { getField, updateField } from 'vuex-map-fields';
+
+export const orderlist = {
+    namespaced: true,
+    state: {
+        inprogress: false,
+        orderNumber: "",
+        createdDate: "",
+        toDate: "",
+        purchaseOrderNumber: ""
+
+    },
+    getters: {
+        getField,
+
+    },
+    mutations: {
+        updateField,
+        inProgress(state, yesOrNo) {
+            state.inProgress = yesOrNo
+        },
+        // SetOrderlist(state, orderItem) {
+        // // console.log(state.orderNumber=orderItem)
+        // }   
+    },
+
+    actions: {
+        searchOrder:({ commit }, orderItem) => {
+            commit('SetOrderlist', orderItem);
+        }
+    }
+
+}