trendplays/resources/js/panel/orders.vue

<template>
    <div>
        <section class="pending-pane">
            <div class="actions">
                <a class="new-order" href="#new-order">New</a
                ><a class="new-order" href="#credits">Add Credits</a>
            </div>
            <h4>Pending Orders</h4>
            <ul>
                <template v-bind:key="order.id" v-for="order in orders">
                    <div class="pending-item" v-if="order.status == 'pending'">
                        <div class="pending-heading">
                            <li @click="togglePending($event)">
                                {{ order.service.name }} ({{
                                    order.updated_at
                                }})
                            </li>
                            <img
                                class="chevron"
                                src="../../images/chevron-down.svg"
                                alt=""
                            />
                        </div>
                        <div class="pending-content">
                            <p>
                                ID: {{ order.id }}<br />URL: {{ order.url
                                }}<br />Quantity: {{ order.quantity
                                }}<br />Note: {{ order.note }}
                            </p>
                        </div>
                    </div>
                </template>
            </ul>
        </section>
        <div class="info-grey">
            <p>Orders are typically completed within 1-5 days.</p>
            <div></div>
        </div>
        <section class="history-pane">
            <h4>Order History</h4>

            <div class="table-scroller">
                <table>
                    <thead>
                        <th>Date</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Quantity</th>
                    </thead>
                    <tbody>
                        <tr
                            v-bind:key="order.id"
                            v-for="order in orders.slice(
                                historyPage * 10 - 10,
                                historyPage * 10
                            )"
                        >
                            <td>{{ order.updated_at }}</td>
                            <td>{{ order.id }}</td>
                            <td>{{ order.service.name }}</td>
                            <td :class="order.status" class="status">
                                <span>{{
                                    order.status.charAt(0).toUpperCase() +
                                    order.status.slice(1)
                                }}</span>
                            </td>
                            <td>{{ order.quantity }}</td>
                            <td><eye @click="select(order)"></eye></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <img
                @click="moveHistory(false)"
                class="nav-btn left"
                src="../../images/arrow-left-circle-fill.svg"
                alt=""
            />
            <p class="nav-legend">
                {{ historyPage }}/{{ Math.ceil(orders.length / 10) }}
            </p>
            <img
                @click="moveHistory(true)"
                class="nav-btn right"
                src="../../images/arrow-right-circle-fill.svg"
                alt=""
            />
        </section>

        <order-item
            v-if="selected"
            @close="close"
            :selected="selected"
            :token="token"
            @change-url="(url) => (selected.url = url)"
        ></order-item>
    </div>
</template>

<script>
import Eye from "../icons/eye-fill.vue";
import OrderItem from "./order-item.vue";

function togglePending(event) {
    event.target.parentNode.parentNode.classList.toggle("selected");
}

function moveHistory(forward) {
    if (forward) {
        this.historyPage += 1;
    } else {
        this.historyPage -= 1;
    }
    if (this.historyPage < 1) {
        this.historyPage = 1;
        return;
    } else if (this.historyPage > this.orders.length / 10 + 1) {
        this.historyPage -= 1;
        return;
    }
}

function close() {
    this.selected = null;
}

function select(order) {
    this.selected = order;
}

export default {
    components: { Eye, OrderItem },
    data() {
        return { historyPage: 1, selected: null };
    },
    methods: {
        togglePending,
        moveHistory,
        close,
        select,
    },
    props: ["orders", "token"],
};
</script>