feat: add tabs
This commit is contained in:
Vlad Stan
parent
1f386a7bc3
commit
f0cc78dc47
|
|
@ -69,61 +69,131 @@ page_container %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-table
|
<q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
|
||||||
dense
|
<q-tab name="tokens" label="Tokens"></q-tab>
|
||||||
flat
|
<q-tab name="orders" label="Orders"></q-tab>
|
||||||
:data="buyOrders"
|
<q-tab name="history" label="History"></q-tab>
|
||||||
:columns="buysTable.columns"
|
</q-tabs>
|
||||||
:pagination.sync="buysTable.pagination"
|
<q-tab-panels v-model="tab">
|
||||||
no-data-label="No buys made yet"
|
<q-tab-panel name="tokens">
|
||||||
:filter="buysTable.filter"
|
<q-table
|
||||||
>
|
dense
|
||||||
{% raw %}
|
flat
|
||||||
<template v-slot:body="props">
|
:data="buyOrders"
|
||||||
<q-tr :props="props">
|
:columns="buysTable.columns"
|
||||||
<q-td key="status" :props="props">
|
:pagination.sync="buysTable.pagination"
|
||||||
<div v-if="props.row.status == 'pending'">
|
no-data-label="No buys made yet"
|
||||||
<q-icon
|
:filter="buysTable.filter"
|
||||||
@click="showInvoiceDialog(props.row)"
|
>
|
||||||
name="settings_ethernet"
|
{% raw %}
|
||||||
color="grey"
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td key="status" :props="props">
|
||||||
|
<div v-if="props.row.status == 'pending'">
|
||||||
|
<q-icon
|
||||||
|
@click="showInvoiceDialog(props.row)"
|
||||||
|
name="settings_ethernet"
|
||||||
|
color="grey"
|
||||||
|
>
|
||||||
|
<q-tooltip>Pending</q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
<q-badge
|
||||||
|
size="lg"
|
||||||
|
color="secondary"
|
||||||
|
class="q-mr-md cursor-pointer"
|
||||||
|
@click="recheckBuyOrder(props.row.hash)"
|
||||||
|
>
|
||||||
|
Recheck
|
||||||
|
</q-badge>
|
||||||
|
</div>
|
||||||
|
<div v-if="props.row.status === 'paid'">
|
||||||
|
<q-icon name="call_received" color="green"></q-icon>
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="amount"
|
||||||
|
:props="props"
|
||||||
|
:class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
|
||||||
>
|
>
|
||||||
<q-tooltip>Pending</q-tooltip>
|
<div>{{props.row.amount}}</div>
|
||||||
</q-icon>
|
</q-td>
|
||||||
<q-badge
|
|
||||||
size="lg"
|
|
||||||
color="secondary"
|
|
||||||
class="q-mr-md cursor-pointer"
|
|
||||||
@click="recheckBuyOrder(props.row.hash)"
|
|
||||||
>
|
|
||||||
Recheck
|
|
||||||
</q-badge>
|
|
||||||
</div>
|
|
||||||
<div v-if="props.row.status === 'paid'">
|
|
||||||
<q-icon name="call_received" color="green"></q-icon>
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td
|
|
||||||
key="amount"
|
|
||||||
:props="props"
|
|
||||||
:class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
|
|
||||||
>
|
|
||||||
<div>{{props.row.amount}}</div>
|
|
||||||
</q-td>
|
|
||||||
|
|
||||||
<q-td key="memo" :props="props">
|
<q-td key="memo" :props="props">
|
||||||
<div>{{props.row.memo}}</div>
|
<div>{{props.row.memo}}</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td key="date" :props="props">
|
<q-td key="date" :props="props">
|
||||||
<div>{{props.row.date}}</div>
|
<div>{{props.row.date}}</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
<q-td key="hash" :props="props">
|
<q-td key="hash" :props="props">
|
||||||
<div>{{props.row.hash}}</div>
|
<div>{{props.row.hash}}</div>
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
</q-table>
|
</q-table>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="orders">
|
||||||
|
<q-table
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
:data="buyOrders"
|
||||||
|
:columns="buysTable.columns"
|
||||||
|
:pagination.sync="buysTable.pagination"
|
||||||
|
no-data-label="No buys made yet"
|
||||||
|
:filter="buysTable.filter"
|
||||||
|
>
|
||||||
|
{% raw %}
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td key="status" :props="props">
|
||||||
|
<div v-if="props.row.status == 'pending'">
|
||||||
|
<q-icon
|
||||||
|
@click="showInvoiceDialog(props.row)"
|
||||||
|
name="settings_ethernet"
|
||||||
|
color="grey"
|
||||||
|
>
|
||||||
|
<q-tooltip>Pending</q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
<q-badge
|
||||||
|
size="lg"
|
||||||
|
color="secondary"
|
||||||
|
class="q-mr-md cursor-pointer"
|
||||||
|
@click="recheckBuyOrder(props.row.hash)"
|
||||||
|
>
|
||||||
|
Recheck
|
||||||
|
</q-badge>
|
||||||
|
</div>
|
||||||
|
<div v-if="props.row.status === 'paid'">
|
||||||
|
<q-icon name="call_received" color="green"></q-icon>
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
key="amount"
|
||||||
|
:props="props"
|
||||||
|
:class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
|
||||||
|
>
|
||||||
|
<div>{{props.row.amount}}</div>
|
||||||
|
</q-td>
|
||||||
|
|
||||||
|
<q-td key="memo" :props="props">
|
||||||
|
<div>{{props.row.memo}}</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="date" :props="props">
|
||||||
|
<div>{{props.row.date}}</div>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="hash" :props="props">
|
||||||
|
<div>{{props.row.hash}}</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
{% endraw %}
|
||||||
|
</q-table>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="history">
|
||||||
|
<span>History</span>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -331,6 +401,7 @@ page_container %}
|
||||||
showInvoiceDetails: false,
|
showInvoiceDetails: false,
|
||||||
showPayInvoice: false,
|
showPayInvoice: false,
|
||||||
tokens: [],
|
tokens: [],
|
||||||
|
tab: 'tokens',
|
||||||
|
|
||||||
receive: {
|
receive: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user