created table in order page
This commit is contained in:
anjujangid
parent
d5f0c96eb7
commit
74d3d0c4fa
|
|
@ -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"}
|
||||
|
|
@ -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/>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue