Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 1x 1x 1x 1x 4x 1x | <template>
<div class="d-flex flex-column">
<div class="border-bottom p-3">
<div class="d-flex justify-content-between">
<p class="text-uppercase">total orders</p>
<p>Today</p>
</div>
<span v-if="!todayOrders.length"
>There were no sales during this time</span
>
<span v-else>{{ todayOrders.length }}</span>
</div>
<TopProducts
class="border-bottom p-3"
:topTodayProducts="topTodayProducts"
/>
<TopBundles class="border-bottom p-3" :topTodayBundles="topTodayBundles" />
<div class="d-flex flex-column p-3">
<p class="text-uppercase">orders amount</p>
<OrderAmount />
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import TopProducts from "./TopProducts.vue";
import TopBundles from "./TopBundles.vue";
import OrderAmount from "./OrderAmount.vue";
export default {
name: "AdminHomeRightSide",
components: {
TopProducts,
TopBundles,
OrderAmount,
},
data: () => ({
topTodayProducts: [],
topTodayBundles: [],
}),
computed: {
...mapGetters({
todayOrders: "admin_orders/todayOrders",
}),
},
watch: {
todayOrders: function () {
this.topToday();
},
},
methods: {
parseDate: function (date) {
const curDate = new Date(date);
const day = date.getDay();
const month = curDate.toLocaleString("en-US", {
month: "long",
});
return `${month} ${day}`;
},
parseSumm: function (summ) {
return new Intl.NumberFormat("en-US", {
maximumSignificantDigits: 3,
}).format(summ);
},
topToday: function () {
const allProducts = [];
const allBundles = [];
this.todayOrders.map((item) => {
const { order_bundles, order_items } = item;
order_items.map((item) => {
const { product } = item;
const index = allProducts.findIndex((item) => (item.id = product.id));
if (index !== -1) {
allProducts[index].count = allProducts[index].count + 1;
} else {
allProducts.push({ ...product, count: 1 });
}
});
order_bundles.map((item) => {
const { bundle } = item;
const index = allBundles.findIndex((item) => (item.id = bundle.id));
if (index !== -1) {
allBundles[index].count = allBundles[index].count + 1;
} else {
allBundles.push({ ...bundle, count: 1 });
}
});
});
this.topTodayProducts = allProducts
.sort((a, b) => a.count - b.count)
.slice(0, 4);
this.topTodayBundles = allBundles
.sort((a, b) => a.count - b.count)
.slice(0, 4);
},
},
};
</script>
<style scoped>
.border-bottom {
border-bottom: 1px solid #000;
}
.paid {
border-radius: 20px;
background: green;
font-size: 15px;
}
</style> |