Customer list with q-card
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
2baf3c04a2
commit
f372bd5338
|
|
@ -1,37 +1,184 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import axios from 'axios';
|
||||||
const router = useRouter();
|
// import { useRouter } from 'vue-router';
|
||||||
|
// const router = useRouter();
|
||||||
|
const gridView = ref(true);
|
||||||
|
const loading = ref(false);
|
||||||
|
const pagination = ref({
|
||||||
|
sortBy: 'id ASC',
|
||||||
|
descending: false,
|
||||||
|
page: 1,
|
||||||
|
rowsPerPage: 10,
|
||||||
|
rowsNumber: 10,
|
||||||
|
});
|
||||||
|
|
||||||
const customers = [
|
const columns = [
|
||||||
{
|
{
|
||||||
id: 1101,
|
name: 'id',
|
||||||
name: 'Bruce Wayne',
|
label: 'ID',
|
||||||
username: 'batman',
|
align: 'right',
|
||||||
email: 'batman@gotham',
|
field: (row) => row.id,
|
||||||
phone: '555-555-5555',
|
sortable: true,
|
||||||
expanded: ref(false),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1102,
|
name: 'name',
|
||||||
name: 'James Gordon',
|
label: 'Name',
|
||||||
username: 'jamesgordon',
|
align: 'left',
|
||||||
email: 'jamesgordon@gotham',
|
field: (row) => row.name,
|
||||||
phone: '555-555-1111',
|
sortable: true,
|
||||||
expanded: ref(false),
|
},
|
||||||
|
{
|
||||||
|
name: 'phone',
|
||||||
|
label: 'Phone',
|
||||||
|
align: 'left',
|
||||||
|
field: (row) => row.phone,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'city',
|
||||||
|
label: 'City',
|
||||||
|
align: 'left',
|
||||||
|
field: (row) => row.city,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'email',
|
||||||
|
label: 'Email',
|
||||||
|
align: 'left',
|
||||||
|
field: (row) => row.email,
|
||||||
|
sortable: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
function navigate(id) {
|
const customers = ref([]);
|
||||||
router.push({ path: `/customer/${id}` });
|
|
||||||
|
async function totalRows() {
|
||||||
|
const { data } = await axios.get('/api/Clients/count');
|
||||||
|
|
||||||
|
return data.count;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function onRequest(props) {
|
||||||
|
const { page, rowsPerPage, sortBy, descending } = props.pagination;
|
||||||
|
|
||||||
|
// Loading status
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
const sort = descending ? `${sortBy} DESC` : `${sortBy} ASC`;
|
||||||
|
const filter = {
|
||||||
|
order: sort,
|
||||||
|
limit: rowsPerPage,
|
||||||
|
skip: rowsPerPage * (page - 1),
|
||||||
|
};
|
||||||
|
const { data } = await axios.get('/api/Clients', {
|
||||||
|
params: { filter },
|
||||||
|
});
|
||||||
|
|
||||||
|
customers.value = data;
|
||||||
|
|
||||||
|
pagination.value.rowsNumber = await totalRows();
|
||||||
|
|
||||||
|
pagination.value.page = page;
|
||||||
|
pagination.value.rowsPerPage = rowsPerPage;
|
||||||
|
pagination.value.sortBy = sortBy;
|
||||||
|
pagination.value.descending = descending;
|
||||||
|
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function swapView() {
|
||||||
|
gridView.value = !gridView.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onRequest({ pagination: pagination.value });
|
||||||
|
});
|
||||||
|
|
||||||
|
// function navigate(id) {
|
||||||
|
// router.push({ path: `/customer/${id}` });
|
||||||
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-page class="q-pa-md">
|
<q-page class="q-pa-md">
|
||||||
<div class="column items-center q-gutter-y-md">
|
<div>
|
||||||
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
<q-table
|
||||||
<!-- v-ripple :to="{ path: '/dashboard' }" -->
|
title="Customers"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="customers"
|
||||||
|
row-key="id"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
:loading="loading"
|
||||||
|
@request="onRequest"
|
||||||
|
binary-state-sort
|
||||||
|
:grid="gridView"
|
||||||
|
:card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
|
||||||
|
>
|
||||||
|
<template #loading>
|
||||||
|
<q-inner-loading showing color="orange" />
|
||||||
|
</template>
|
||||||
|
<template #top-right>
|
||||||
|
<q-btn round flat dense size="md" icon="download">
|
||||||
|
<q-tooltip>Export to CSV</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn round flat dense size="md" icon="grid_view" @click="swapView()">
|
||||||
|
<q-tooltip>Swap View</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
<template #item="props">
|
||||||
|
<q-card class="card">
|
||||||
|
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
||||||
|
<q-item-section class="q-pa-md">
|
||||||
|
<div class="text-h6">{{ props.row.name }}</div>
|
||||||
|
<q-item-label caption>@{{ props.row.username }}</q-item-label>
|
||||||
|
<div class="q-mt-md">
|
||||||
|
<q-list>
|
||||||
|
<q-item class="q-pa-none">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>Email</q-item-label>
|
||||||
|
<q-item-label>{{ props.row.email }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item class="q-pa-none">
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label caption>Phone</q-item-label>
|
||||||
|
<q-item-label>{{ props.row.phone }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
<q-btn color="grey-7" round flat icon="more_vert">
|
||||||
|
<q-menu cover auto-close>
|
||||||
|
<q-list>
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section>Action 1</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section>Action 2</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
<q-separator vertical />
|
||||||
|
<q-card-actions vertical class="justify-between">
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="orange"
|
||||||
|
icon="arrow_circle_right"
|
||||||
|
@click="navigate(props.row.id)"
|
||||||
|
/>
|
||||||
|
<q-btn flat round color="accent" icon="preview" />
|
||||||
|
<q-btn flat round color="accent" icon="vn:ticket" />
|
||||||
|
</q-card-actions>
|
||||||
|
</q-item>
|
||||||
|
</q-card>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
|
<!-- <q-card v-for="customer in customers" :key="customer.id" class="card">
|
||||||
|
|
||||||
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
||||||
<q-item-section class="q-pa-md">
|
<q-item-section class="q-pa-md">
|
||||||
<div class="text-h6">{{ customer.name }}</div>
|
<div class="text-h6">{{ customer.name }}</div>
|
||||||
|
|
@ -97,7 +244,7 @@ function navigate(id) {
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</div>
|
</div>
|
||||||
</q-slide-transition>
|
</q-slide-transition>
|
||||||
</q-card>
|
</q-card> -->
|
||||||
</div>
|
</div>
|
||||||
</q-page>
|
</q-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue