verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Customer list with q-card
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2022-06-08 07:43:20 +02:00
parent 2baf3c04a2
commit f372bd5338
1 changed files with 169 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
src/pages/Customer/CustomerList.vue
View File

@ -1,37 +1,184 @@
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { ref, onMounted } from 'vue';
import axios from 'axios';
// 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: 'Bruce Wayne',
username: 'batman',
email: 'batman@gotham',
phone: '555-555-5555',
expanded: ref(false),
name: 'id',
label: 'ID',
align: 'right',
field: (row) => row.id,
sortable: true,
},
{
id: 1102,
name: 'James Gordon',
username: 'jamesgordon',
email: 'jamesgordon@gotham',
phone: '555-555-1111',
expanded: ref(false),
name: 'name',
label: 'Name',
align: 'left',
field: (row) => row.name,
sortable: true,
},
{
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) {
router.push({ path: `/customer/${id}` });
const customers = ref([]);
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>
<template>
<q-page class="q-pa-md">
<div class="column items-center q-gutter-y-md">
<q-card v-for="customer in customers" :key="customer.id" class="card">
<!-- v-ripple :to="{ path: '/dashboard' }" -->
<div>
<q-table
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-section class="q-pa-md">
<div class="text-h6">{{ customer.name }}</div>
@ -97,7 +244,7 @@ function navigate(id) {
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</q-card> -->
</div>
</q-page>
</template>