InfiniteScroll

Circuits
This commit is contained in:
paoloar77
2022-08-17 00:36:30 +02:00
parent c93361dfa2
commit 8a41aff739
13 changed files with 147 additions and 74 deletions

View File

@@ -248,6 +248,7 @@ export default defineComponent({
const myrecdialog = ref(null)
const startsearch = ref(false)
const clickbuttsearch = ref(false)
const $router = useRouter()
@@ -283,7 +284,7 @@ export default defineComponent({
const colclicksel = ref(null)
const selected: any = ref([])
const showfilteradv = ref(false) // filtri avanzati
const showfilter = ref(false) // filtri avanzati
const filter = ref(0)
const filtergrp = ref(costanti.MY_GROUPS)
@@ -312,8 +313,8 @@ export default defineComponent({
}
})
watch(() => showfilteradv.value, (newval: any, from: any) => {
tools.setCookie('s_adv', newval)
watch(() => showfilter.value, (newval: any, from: any) => {
tools.setCookie('s_adv', newval ? '1' : '0')
})
watch(() => props.filtercustom, (to: any, from: any) => {
@@ -849,10 +850,10 @@ export default defineComponent({
// calculate starting row of data
const startRow = numRecLoaded.value
const endRow = startRow + fetchCount
console.log('startRow', startRow, 'endRow', endRow, 'fetchCount', fetchCount)
console.log('startRow', startRow, 'endRow', endRow, 'rowsNumber', pagination.value.rowsNumber)
if (startRow < pagination.value.rowsNumber) {
if ((startRow < pagination.value.rowsNumber) || clickbuttsearch.value) {
// fetch data from "server"
return fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
@@ -890,7 +891,7 @@ export default defineComponent({
}
console.log(' ...DONE ')
done()
done(pagination.value.rowsNumber === 0 ? true : false)
})
} else {
startsearch.value = false
@@ -930,6 +931,7 @@ export default defineComponent({
function refresh() {
console.log('refresh', 'startsearch', startsearch.value)
clickbuttsearch.value = true
// console.log('refresh')
if (startsearch.value)
return false
@@ -963,6 +965,7 @@ export default defineComponent({
refresh_table()
}
clickbuttsearch.value = false
}
watch(() => mycodeid.value, (newval, oldval) => {
@@ -1245,7 +1248,7 @@ export default defineComponent({
myvertical.value = props.vertical
// myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
showfilteradv.value = tools.getCookie('s_adv', false)
showfilter.value = tools.getCookie('s_adv', '0') !== '0'
}
function mounted() {
@@ -1868,11 +1871,15 @@ export default defineComponent({
function onLoadScroll (index: number, done: any) {
if (index > 0) {
console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber)
if (numRecLoaded.value >= pagination.value.rowsNumber) {
done(true)
} else {
if (numRecLoaded.value < pagination.value.rowsNumber || (pagination.value.rowsNumber <= 0 && clickbuttsearch.value)) {
if (pagination.value.rowsNumber === 0) {
pagination.value.page = 0
}
pagination.value.page = pagination.value.page + 1
refresh_infscroll(done)
} else {
done(true)
}
}
}
@@ -1956,7 +1963,7 @@ export default defineComponent({
getValueExtra,
shared_consts,
getLabelFooterByRow,
showfilteradv,
showfilter,
cmdExt,
visupagedialog,
myrecdialog,

View File

@@ -35,14 +35,16 @@
</q-inner-loading>
<div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
<div v-if="searchList"
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `">
<div v-if="(prop_search || canEdit)" class="q-my-xs text-right">
<q-btn size="sm" dense icon="fas fa-filter" :label="!showfilter ? $t('grid.showfilters') : $t('grid.hidefilters')"
@click="showfilter = !showfilter"></q-btn>
</div>
<q-slide-transition>
<div v-show="showfilter">
<div v-show="searchList"
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `">
<span v-for="(item, index) in searchList" :key="index">
<!--<div class="text-center q-my-xs" v-if="(item.type === costanti.FieldType.separator)">
<q-btn size="sm" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'" label="Filtri Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<CMySelect
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-if="(item.type === costanti.FieldType.select) || (item.type === costanti.FieldType.select_by_server)"
@@ -150,7 +152,9 @@
</q-select>
</span>
</div>
</div>
</div>
</q-slide-transition>
<div v-if="(prop_search || canEdit)"
class="row justify-center vertical-middle">
@@ -162,8 +166,11 @@
v-on:keyup.enter="doSearch"
>
<template v-slot:after>
<q-btn v-if="mytable" dense label="" color="primary" @click="refresh" icon="search"></q-btn>
<template v-slot:prepend>
<q-icon name="search"/>
</template>
<template v-if="searchList" v-slot:after>
<q-btn dense label="" color="primary" @click="showfilter = !showfilter" icon="fas fa-filter"></q-btn>
</template>
</q-input>
</div>
@@ -191,48 +198,47 @@
<div v-if="pagination.rowsNumber === 1 && prop_search">{{ pagination.rowsNumber }} elemento trovato</div>
<div v-if="pagination.rowsNumber > 1 && prop_search">{{ pagination.rowsNumber }} elementi trovati</div>
</div>
numRecLoaded: {{numRecLoaded}}
<q-infinite-scroll
ref="myinfscroll"
v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
initial-index="0"
@load="onLoadScroll" :offset="350"
debounce="300"
>
INFINITE: <br />
<q-infinite-scroll
ref="myinfscroll"
v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
:initial-index="0"
@load="onLoadScroll" :offset="350"
debounce="300"
<div v-for="(row, index) in serverData" :key="index" class="caption">
<div v-if="row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
>
<div v-if="row.dateTimeStart && (tools.getstrVeryShortDate(row.dateTimeStart) !== actual)" class="actualdate">
<span style="display: none">{{ actual = tools.getstrVeryShortDate(row.dateTimeStart) }}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(row.dateTimeStart) }}</q-chip>
</div>
<div v-for="(row, index) in serverData" :key="index" class="caption">
<div v-if="row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
<div v-if="row.dateTimeStart && (tools.getstrVeryShortDate(row.dateTimeStart) !== actual)" class="actualdate">
<span style="display: none">{{ actual = tools.getstrVeryShortDate(row.dateTimeStart) }}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(row.dateTimeStart) }}</q-chip>
</div>
<CMyRecGrpCard
v-if="tablesel === toolsext.TABMYGROUPS"
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecGrpCard>
<CMyRecCard
v-else
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecCard>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px"/>
</div>
</template>
</q-infinite-scroll>
<CMyRecGrpCard
v-if="tablesel === toolsext.TABMYGROUPS"
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecGrpCard>
<CMyRecCard
v-else
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecCard>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px"/>
</div>
</template>
</q-infinite-scroll>
<q-table
v-else
:grid="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
@@ -243,12 +249,8 @@
:rows="serverData"
:columns="mycolumns"
:filter="myfilter"
v-model:pagination="pagination2"
v-model:pagination="pagination"
virtual-scroll
:virtual-scroll-item-size="48"
:virtual-scroll-sticky-size-start="48"
@virtual-scroll="onScroll"
:rows-per-page-options="[0]"
:row-key="colkey"
:loading="loading"
@selection="selectionclick"

View File

@@ -56,6 +56,7 @@ export default defineComponent({
const { t } = useI18n()
const username = ref('')
const spinner_visible = ref(false)
const listTrusted = ref(<IUserFields[]>[])
const filtroutente = ref(<any[]>[])
@@ -154,12 +155,14 @@ export default defineComponent({
function loadFriends() {
// Carica il profilo di quest'utente
if (username.value) {
spinner_visible.value = true
userStore.loadFriends(username.value).then((ris) => {
// console.log('ris', ris)
if (ris) {
listTrusted.value = ris.listTrusted ? ris.listTrusted : []
filtroutente.value = [{ userId: userStore.my._id }]
}
spinner_visible.value = false
})
}
@@ -237,6 +240,7 @@ export default defineComponent({
setCmd,
updateValue,
myoptions,
spinner_visible,
}
}
})

View File

@@ -16,6 +16,9 @@
/>
</div>
<div v-if="finder" class="">
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="2em" color="primary"/>
</q-inner-loading>
<div v-if="modelValue === costanti.FIND_PEOPLE">
<slot></slot>

View File

@@ -0,0 +1,3 @@
.q-tab__label {
font-size: 0.7rem !important;
}

View File

@@ -5,31 +5,43 @@
bordered
>
<q-tabs
class="text-grey-10 text-h6"
dense
class="text-grey-10 mylabfooter"
active-color="primary"
no-caps
indicator-color="transparent"
>
<q-route-tab
to="/"
class="mylabfooter"
:label="$t('tabdown.home')"
icon="fas fa-home"
/>
<q-route-tab
v-if="static_data.functionality.ENABLE_VIEW_GROUPS"
class="mylabfooter"
:label="$t('tabdown.groups')"
to="/groups"
icon="fas fa-users"
/>
<q-route-tab
v-if="static_data.functionality.ENABLE_VIEW_USERS"
class="mylabfooter"
:label="$t('tabdown.friends')"
to="/friends"
icon="fas fa-user-friends"
/>
<q-route-tab
v-if="static_data.functionality.ENABLE_VIEW_BOOKINGS"
class="mylabfooter"
:label="$t('tabdown.bookings')"
to="/admin/eventlist"
icon="fas fa-calendar-plus"
/>
<q-route-tab
v-if="static_data.functionality.ENABLE_VIEW_PROFILE"
class="mylabfooter"
:label="$t('tabdown.profile')"
:to="`/my/`+getMyUsername()"
icon="person"
/>
@@ -40,6 +52,6 @@
<script lang="ts" src="./MyFooter.ts">
</script>
<style lang="scss" scoped>
<style lang="scss">
@import './MyFooter.scss';
</style>

View File

@@ -883,12 +883,17 @@ export interface IMyHosp extends IMyMain {
date_updated?: Date,
}
export interface ICircuitList {
Num: number,
inscription_date?: Date
}
export interface ICircuit {
_id: number
groupnameId: string
name: string
subname: string
descr: string
longdescr: string
systemUserDescr: string
systemUserId: string
founderUserId: string

View File

@@ -1,6 +1,6 @@
import { IToken } from '@model/other'
import { ICart, IOrderCart, IShareWithUs } from '@src/model/Products'
import { IGallery, IImgGallery } from '@model/GlobalStore'
import { ICircuit, ICircuitList, IGallery, IImgGallery } from '@model/GlobalStore'
const enum ESexType {
None = 0,
@@ -30,6 +30,7 @@ export interface IMyGroup {
username_who_block?: string
date_blocked?: Date
createdBy?: string
circuits_list?: ICircuitList[]
}
export interface ICalcStat {

View File

@@ -3,7 +3,7 @@
<CGridTableRec
prop_mytable="circuits"
prop_mytitle="Lista Circuiti"
:prop_mycolumns="fieldsTable.circuitslist()"
:prop_mycolumns="fieldsTable.circuitslistcomplete()"
prop_colkey="_id"
nodataLabel="Nessun Circuito"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato"

View File

@@ -17,6 +17,8 @@ const msg_it = {
columns: 'Colonne',
tableslist: 'Tabelle',
nodata: 'Nessun Dato',
showfilters: 'Mostra Filtri',
hidefilters: 'Nascondi Filtri',
},
gallery: {
author_username: 'Utente',
@@ -1011,6 +1013,7 @@ const msg_it = {
report_user: 'Segnala Utente',
},
groups: {
info1: 'Info',
info: 'Informazioni su questo gruppo',
member: 'membro',
members: 'membri',
@@ -1041,6 +1044,8 @@ const msg_it = {
hidden: 'Nascosto',
private_descr: 'Solo i membri possono vedere chi fa parte del gruppo',
hidden_descr: 'il Gruppo non sarà visibile nella ricerca',
page: 'Pagina',
circuits: 'Circuiti',
},
finder: {
search_skill: 'Cerca una specializzazione'
@@ -1126,8 +1131,15 @@ const msg_it = {
editor: {
showtool: 'Mostra strumenti per formattare il testo',
hidetool: 'Nascondi strumenti per formattare il testo',
}
},
tabdown: {
home: 'Home',
groups: 'Gruppi',
friends: 'Amici',
bookings: 'Prenotaz.',
profile: 'Profilo',
}
},
};

View File

@@ -2387,11 +2387,12 @@ export const colTableSubCashCategory = [
AddCol({ name: 'notes', label_trans: 'reg.note' }),
]
export const colTableCircuit = [
export const colTableCircuitComplete = [
AddCol({ name: 'Num', label_trans: 'circuit.num', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'groupnameId', label_trans: 'circuit.groupnameId' }), // da togliere poi
AddCol({ name: 'name', label_trans: 'circuit.name' }),
AddCol({ name: 'subname', label_trans: 'circuit.subname' }),
AddCol({ name: 'descr', label_trans: 'circuit.descr' }),
AddCol({ name: 'longdescr', label_trans: 'circuit.descr', fieldtype: costanti.FieldType.html }),
AddCol({ name: 'systemUserDescr', label_trans: 'circuit.systemUserDescr' }),
AddCol({ name: 'systemUserId', label_trans: 'circuit.systemUserId', fieldtype: costanti.FieldType.select, jointable: 'users', }),
AddCol({ name: 'founderUserId', label_trans: 'circuit.founderUserId', fieldtype: costanti.FieldType.select, jointable: 'users', }),
@@ -2418,6 +2419,21 @@ export const colTableCircuit = [
AddCol(DuplicateRec),
]
export const colTableCircuit = [
AddCol({ name: 'groupnameId', label_trans: 'circuit.groupnameId' }), // da togliere poi
AddCol({ name: 'name', label_trans: 'circuit.name' }),
AddCol({ name: 'subname', label_trans: 'circuit.subname' }),
AddCol({ name: 'longdescr', label_trans: 'circuit.descr', fieldtype: costanti.FieldType.html }),
AddCol({ name: 'systemUserId', label_trans: 'circuit.systemUserId', fieldtype: costanti.FieldType.select, jointable: 'users', }),
AddCol({ name: 'founderUserId', label_trans: 'circuit.founderUserId', fieldtype: costanti.FieldType.select, jointable: 'users', }),
AddCol({ name: 'nome_valuta', label_trans: 'circuit.nome_valuta' }),
AddCol({ name: 'symbol', label_trans: 'circuit.symbol' }),
AddCol({ name: 'data_costituz', label_trans: 'circuit.data_costituz', fieldtype: costanti.FieldType.date }),
AddCol({ name: 'img_logo', label_trans: 'circuit.img_logo' }),
AddCol(DeleteRec),
AddCol(DuplicateRec),
]
export const colTableAccount = [
AddCol({ name: 'circuitId', label_trans: 'account.circuitId', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'userId', label_trans: 'account.users', fieldtype: costanti.FieldType.select, jointable: 'users', }),
@@ -2549,6 +2565,10 @@ export const fieldsTable = {
'myhosps',
],
circuitslistcomplete() {
return colTableCircuitComplete
},
circuitslist() {
return colTableCircuit
},

View File

@@ -88,7 +88,7 @@ export default defineComponent({
filtercustom.value = []
arrfilterand.value = []
const filt_loaded = tools.getCookie(tools.COOK_SEARCH + tools.FRIENDS_SEARCH)
const filt_loaded = tools.getCookie(tools.COOK_SEARCH + tools.FRIENDS_SEARCH, costanti.FIND_PEOPLE, true)
filter.value = filt_loaded ? filt_loaded : costanti.FIND_PEOPLE
}
watch(() => filter.value, (newval: any, oldval) => {

View File

@@ -100,10 +100,11 @@
-->
<q-tabs v-model="tabgrp" class="text-blue">
<q-tab label="Info" name="info" icon="fas fa-info"></q-tab>
<q-tab v-if="!!mygrp.note" label="Pagina" name="page" icon="fas fa-file-word"></q-tab>
<q-tab :label="t('groups.info1')" name="info" icon="fas fa-info"></q-tab>
<q-tab v-if="!!mygrp.note" :label="t('groups.page')" name="page" icon="fas fa-file-word"></q-tab>
<q-tab v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
:label="t('groups.subscribes')" name="membri" icon="fas fa-users"></q-tab>
:label="t('groups.subscribes')" name="members" icon="fas fa-users"></q-tab>
<q-tab :label="t('groups.circuits')" name="circuits" icon="fas fa-coins"></q-tab>
</q-tabs>
<q-tab-panels v-model="tabgrp" animated>
@@ -234,7 +235,10 @@
</div>
</q-tab-panel>
<q-tab-panel name="membri" style="max-width: 400px;" v-if="tools.iCanShowGroupsMember(mygrp)">
<q-tab-panel name="circuits">
</q-tab-panel>
<q-tab-panel name="members" style="max-width: 400px;" v-if="tools.iCanShowGroupsMember(mygrp)">
<q-tabs v-model="tabmembers" class="text-blue">
<q-tab label="Tutti" name="all" icon="fas fa-users"></q-tab>