forked from verdnatura/salix-front
Infinite scroll
This commit is contained in:
parent
f372bd5338
commit
978197023f
|
|
@ -3,14 +3,17 @@ import { ref, onMounted } from 'vue';
|
|||
import axios from 'axios';
|
||||
// import { useRouter } from 'vue-router';
|
||||
// const router = useRouter();
|
||||
|
||||
const fabPos = ref([18, 18]);
|
||||
const draggingFab = ref(false);
|
||||
|
||||
const gridView = ref(true);
|
||||
const loading = ref(false);
|
||||
const pagination = ref({
|
||||
sortBy: 'id ASC',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 10,
|
||||
rowsPerPage: 5,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
|
|
@ -75,7 +78,11 @@ async function onRequest(props) {
|
|||
params: { filter },
|
||||
});
|
||||
|
||||
customers.value = data;
|
||||
for (const row of data) {
|
||||
customers.value.push(row);
|
||||
}
|
||||
|
||||
//customers.value = newData;
|
||||
|
||||
pagination.value.rowsNumber = await totalRows();
|
||||
|
||||
|
|
@ -95,6 +102,23 @@ onMounted(() => {
|
|||
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) {
|
||||
// router.push({ path: `/customer/${id}` });
|
||||
// }
|
||||
|
|
@ -103,80 +127,83 @@ onMounted(() => {
|
|||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<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-infinite-scroll @load="onLoad" :offset="100" style="height: 1000px">
|
||||
<q-table
|
||||
:columns="columns"
|
||||
:rows="customers"
|
||||
row-key="id"
|
||||
v-model:pagination="pagination"
|
||||
:loading="loading"
|
||||
@request="onRequest"
|
||||
binary-state-sort
|
||||
:grid="true"
|
||||
:card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
|
||||
:hide-pagination="true"
|
||||
>
|
||||
<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.id }}</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-infinite-scroll>
|
||||
|
||||
<!-- <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">
|
||||
|
|
@ -246,6 +273,19 @@ onMounted(() => {
|
|||
</q-slide-transition>
|
||||
</q-card> -->
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue