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 | 1x 1x 1x 2x 1x | <template>
<ul class="p-0 m-0">
<li
v-for="order_amount in order_amounts"
:key="order_amount.date"
class="
d-flex
flex-md-row flex-column
justify-content-between
align-items-center
"
>
<span class="text-nowrap">{{ order_amount.date }}</span>
<span class="text-nowrap">$ {{ order_amount.total | formatNumber }}</span>
</li>
<a href="/#" v-on:click.prevent="openModal('order-amount-apex-charts')"
>View report</a
>
<OrderAmoutApexChartsModal />
</ul>
</template>
<script>
import { mapActions } from "vuex";
import "~/utils/filters";
import OrderAmoutApexChartsModal from "./OrderAmoutApexChartsModal.vue";
export default {
name: "OrderAmount",
components: { OrderAmoutApexChartsModal },
data: () => ({
order_amounts: [],
}),
methods: {
...mapActions({
getOrdersByTime: "admin_orders/getOrdersByTime",
}),
openModal: function (modal) {
this.$root.$emit("bv::show::modal", modal);
},
},
async mounted() {
//fromDate = minus 3 days from current date
const fromDate = new Date(new Date().setDate(new Date().getDate() - 3));
const result = await this.getOrdersByTime(fromDate);
this.order_amounts = result.reduce((acc, item) => {
const date = new Date(item.created_at).toDateString();
if (!acc.length) {
acc.push({ date, total: item.total });
return acc;
}
const index = acc.findIndex((item) => item.date === date);
if (index !== -1) {
acc[index].total = acc[index].total + item.total;
} else {
acc.push({ date, total: item.total });
}
return acc;
}, []);
},
};
</script>
<style scoped>
</style> |