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

Infinite scroll
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2022-06-14 07:39:01 +02:00
parent f372bd5338
commit 978197023f
1 changed files with 117 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,14 +3,17 @@ import { ref, onMounted } from 'vue';
import axios from 'axios'; import axios from 'axios';
// import { useRouter } from 'vue-router'; // import { useRouter } from 'vue-router';
// const router = useRouter(); // const router = useRouter();
const fabPos = ref([18, 18]);
const draggingFab = ref(false);
const gridView = ref(true); const gridView = ref(true);
const loading = ref(false); const loading = ref(false);
const pagination = ref({ const pagination = ref({
sortBy: 'id ASC', sortBy: 'id ASC',
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: 10, rowsPerPage: 5,
rowsNumber: 10,
}); });
const columns = [ const columns = [
@ -75,7 +78,11 @@ async function onRequest(props) {
params: { filter }, params: { filter },
}); });
customers.value = data; for (const row of data) {
customers.value.push(row);
}
//customers.value = newData;
pagination.value.rowsNumber = await totalRows(); pagination.value.rowsNumber = await totalRows();
@ -95,6 +102,23 @@ onMounted(() => {
onRequest({ pagination: pagination.value }); onRequest({ pagination: pagination.value });
}); });
async function onLoad(index, done) {
console.log('scroll:', index);
pagination.value.page = pagination.value.page + 1;
await onRequest({ pagination: pagination.value });
done();
//done(true);
}
function moveFab(ev) {
draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y];
}
// function navigate(id) { // function navigate(id) {
// router.push({ path: `/customer/${id}` }); // router.push({ path: `/customer/${id}` });
// } // }
@ -103,80 +127,83 @@ onMounted(() => {
<template> <template>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<div> <div>
<q-table <q-infinite-scroll @load="onLoad" :offset="100" style="height: 1000px">
title="Customers" <q-table
:columns="columns" :columns="columns"
:rows="customers" :rows="customers"
row-key="id" row-key="id"
v-model:pagination="pagination" v-model:pagination="pagination"
:loading="loading" :loading="loading"
@request="onRequest" @request="onRequest"
binary-state-sort binary-state-sort
:grid="gridView" :grid="true"
:card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']" :card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
> :hide-pagination="true"
<template #loading> >
<q-inner-loading showing color="orange" /> <template #loading>
</template> <q-inner-loading showing color="orange" />
<template #top-right> </template>
<q-btn round flat dense size="md" icon="download"> <template #top-right>
<q-tooltip>Export to CSV</q-tooltip> <q-btn round flat dense size="md" icon="download">
</q-btn> <q-tooltip>Export to CSV</q-tooltip>
<q-btn round flat dense size="md" icon="grid_view" @click="swapView()"> </q-btn>
<q-tooltip>Swap View</q-tooltip> <q-btn round flat dense size="md" icon="grid_view" @click="swapView()">
</q-btn> <q-tooltip>Swap View</q-tooltip>
</template> </q-btn>
<template #item="props"> </template>
<q-card class="card"> <template #item="props">
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable"> <q-card class="card">
<q-item-section class="q-pa-md"> <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
<div class="text-h6">{{ props.row.name }}</div> <q-item-section class="q-pa-md">
<q-item-label caption>@{{ props.row.username }}</q-item-label> <div class="text-h6">{{ props.row.name }}</div>
<div class="q-mt-md"> <q-item-label caption>#{{ props.row.id }}</q-item-label>
<q-list> <div class="q-mt-md">
<q-item class="q-pa-none"> <q-list>
<q-item-section> <q-item class="q-pa-none">
<q-item-label caption>Email</q-item-label> <q-item-section>
<q-item-label>{{ props.row.email }}</q-item-label> <q-item-label caption>Email</q-item-label>
</q-item-section> <q-item-label>{{ props.row.email }}</q-item-label>
</q-item> </q-item-section>
<q-item class="q-pa-none"> </q-item>
<q-item-section> <q-item class="q-pa-none">
<q-item-label caption>Phone</q-item-label> <q-item-section>
<q-item-label>{{ props.row.phone }}</q-item-label> <q-item-label caption>Phone</q-item-label>
</q-item-section> <q-item-label>{{ props.row.phone }}</q-item-label>
</q-item> </q-item-section>
</q-list> </q-item>
</div> </q-list>
</q-item-section> </div>
<q-btn color="grey-7" round flat icon="more_vert"> </q-item-section>
<q-menu cover auto-close> <q-btn color="grey-7" round flat icon="more_vert">
<q-list> <q-menu cover auto-close>
<q-item clickable> <q-list>
<q-item-section>Action 1</q-item-section> <q-item clickable>
</q-item> <q-item-section>Action 1</q-item-section>
<q-item clickable> </q-item>
<q-item-section>Action 2</q-item-section> <q-item clickable>
</q-item> <q-item-section>Action 2</q-item-section>
</q-list> </q-item>
</q-menu> </q-list>
</q-btn> </q-menu>
<q-separator vertical /> </q-btn>
<q-card-actions vertical class="justify-between"> <q-separator vertical />
<q-btn <q-card-actions vertical class="justify-between">
flat <q-btn
round flat
color="orange" round
icon="arrow_circle_right" color="orange"
@click="navigate(props.row.id)" 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-btn flat round color="accent" icon="preview" />
</q-card-actions> <q-btn flat round color="accent" icon="vn:ticket" />
</q-item> </q-card-actions>
</q-card> </q-item>
</template> </q-card>
</q-table> </template>
</q-table>
</q-infinite-scroll>
<!-- <q-card v-for="customer in customers" :key="customer.id" class="card"> <!-- <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">
@ -246,6 +273,19 @@ onMounted(() => {
</q-slide-transition> </q-slide-transition>
</q-card> --> </q-card> -->
</div> </div>
<q-page-sticky position="bottom-right" :offset="fabPos">
<q-fab
icon="add"
direction="up"
color="light-green-6"
:disable="draggingFab"
v-touch-pan.prevent.mouse="moveFab"
>
<q-fab-action @click="onClick" color="light-green-4" icon="person_add" :disable="draggingFab" />
<q-fab-action @click="onClick" color="light-green-4" icon="mail" :disable="draggingFab" />
</q-fab>
</q-page-sticky>
</q-page> </q-page>
</template> </template>