sidharth.kothari
/
retailer-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created table in order page

This commit is contained in:
anjujangid 2022-02-05 15:49:06 +05:30
parent d5f0c96eb7
commit 74d3d0c4fa
3 changed files with 214 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
git_info.json
View File

@ -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"}

371
src/routes/retailer/boxed_order_history.vue
View File

@ -1,171 +1,186 @@
<template> <template>
<v-container> <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
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="h3 my-5 py-5 body-font1">Order Management</div> <div class="pt-md-7">-</div>
<v-form>
<v-row <v-col cols="12" sm="12" md="6" lg="4">
class=" <v-menu
d-flex v-model="menu2"
justify-center :close-on-content-click="false"
align-center align-md-baseline transition="scale-transition"
justify-md-start offset-y
" >
> <template v-slot:activator="{ on, attrs }">
<v-col cols="12" sm="12" md="12" lg="12"> <v-text-field
<v-text-field v-model="toDate"
label="Order Number" label="To"
persistent-hint 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 outlined
hide-details @click="reset"
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 }"> Reset
<v-text-field </v-btn>
v-model="createdDate" </v-hover>
label="Created From" </v-col>
persistent-hint <v-col cols="12" sm="12" md="6" lg="3">
readonly <v-hover v-slot:default="{ hover }">
v-bind="attrs" <v-btn
v-on="on" :class="hover ? 'white--text warning' : 'warning--text'"
outlined class="width-250px"
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 outlined
hide-details @click="searchOrder"
v-model="purchaseOrderNumber" >
></v-text-field> Search
</v-col> </v-btn>
<v-col cols="12" sm="12" md="6" lg="3"> </v-hover>
<v-hover v-slot:default="{ 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 <v-btn
:class="hover ? 'white--text warning' : 'warning--text'" :class="hover ? 'white--text primary' : 'primary--text'"
class="width-250px" class="width-250px"
outlined outlined
@click="reset"
> >
Reset New Order
</v-btn> </v-btn>
</v-hover> </router-link>
</v-col> </v-hover>
<v-col cols="12" sm="12" md="6" lg="3"> </v-col>
<v-hover v-slot:default="{ hover }"> <v-col cols="12" sm="12" md="12" lg="12">
<v-btn <v-row class="mt-12" justify="center" v-if="inProgress">
:class="hover ? 'white--text warning' : 'warning--text'" <v-progress-circular :size="60" color="primary" indeterminate></v-progress-circular>
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-row>
</v-form> <v-row no-gutters v-else>
<p>{{OrderHistory}}</p> <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> </v-container>
</template> </template>
<script> <script>
import {createHelpers} from "vuex-map-fields";
const {mapFields} = createHelpers({
getterType:"orderlist/getField",
mutationType: "orderlist/updateField"
})
export default { export default {
name: "BoxedOrderHistoryPage", name: "BoxedOrderHistoryPage",
components:{ components: {},
},
data: () => ({ data: () => ({
date1: "", date1: "",
date2: "", date2: "",
menu1: false, menu1: false,
menu2: false, menu2: false,
headers: [ headers: [
{ { text: "Date", value: "date" },
text: "Date",
align: "start",
sortable: false,
value: "date",
},
{ text: "Order #", value: "order" }, { text: "Order #", value: "order" },
{ text: "Retailer Name", value: "retailername" }, { text: "Retailer Name", value: "retailername" },
{ text: "Sales Rep Name", value: "salesrepname" }, { text: "Sales Rep Name", value: "salesrepname" },
@ -173,26 +188,6 @@ export default {
{ text: "PO Number", value: "POnumber" }, { text: "PO Number", value: "POnumber" },
{ text: "Action", value: "action" }, { 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: { computed: {
createdDate() { createdDate() {
@ -201,37 +196,43 @@ export default {
toDate() { toDate() {
return this.formatDate(this.date2); 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: { methods: {
viewMyOrder(itemId) {
this.$store.dispatch("orderlist/fetchOrderList", itemId);
this.$router
.push({
name: "ViewProduct",
params: { orderId: itemId },
})
.catch((error) => {
error;
});
},
formatDate(date) { formatDate(date) {
if (!date) return null; if (!date) return null;
const [year, month, day] = date.split("-"); const [year, month, day] = date.split("-");
return `${month}/${day}/${year}`; 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(); value.preventDeafult();
} },
},
created() {
this.$store.dispatch("orderlist/fetchOrderList");
}, },
created(){
this.$store.dispatch("orderlist/fetchOrderList")
}
}; };
</script> </script>
<style src="./boxed_order_history.scss" lang="scss" scoped/> <style src="./boxed_order_history.scss" lang="scss" scoped/>

38
src/stores/retailer/orderlist.js
View File

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