surya/newfreeplanet_OLD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

InfiniteScroll: Le liste (Beni / Servizi / Eventi) devono essere caricate in automatico, scorrendo la lista...

Browse Source 
fix category
This commit is contained in:
paoloar77
2022-08-15 15:10:00 +02:00
parent 0b6188699e
commit c93361dfa2
38 changed files with 1051 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CGridTableRec/CGridTableRec.scss
View File

@@ -9,6 +9,7 @@
.tdclass, .trclass{
min-height: 20px !important;
margin-top: 5px;
}
.q-table td {

189
src/components/CGridTableRec/CGridTableRec.ts
View File

@@ -251,8 +251,12 @@ export default defineComponent({
const $router = useRouter()
const myinfscroll = ref(null)
const serverData: any = ref([])
const numRecLoaded = ref(0)
const spinner_visible = ref(false)
const changetable = ref(false)
const searchList = ref(<ISearchList[]>[])
let actual = ''
@@ -302,7 +306,10 @@ export default defineComponent({
watch(() => searchList.value, (to: any, from: any) => {
// console.log('watch searchlist', to)
refresh()
if (searchList.value && !changetable.value) {
console.log('REFRR searchList.value', to)
refresh()
}
})
watch(() => showfilteradv.value, (newval: any, from: any) => {
@@ -311,7 +318,10 @@ export default defineComponent({
watch(() => props.filtercustom, (to: any, from: any) => {
// console.log('filtercustom', to)
refresh()
if (JSON.stringify(to) !== JSON.stringify(from)) {
console.log('REFRR props.filtercustom', to, from)
refresh()
}
})
$router.beforeResolve((to: any) => {
@@ -325,6 +335,7 @@ export default defineComponent({
})
function setCategBySector(tablecat: string, tabsector: string, newval: any) {
console.log('setCategBySector', tablecat, tabsector, newval)
const recSector = searchList.value.find((rec) => rec.table === tabsector)
if (recSector)
@@ -341,10 +352,12 @@ export default defineComponent({
if (arrvalues)
trovato = arrvalues.find((rec: any) => rec[rec.key] === valsaved)
}
console.log(' ...item', item)
if (valsaved && trovato)
item.value = valsaved
else {
if (arrvalues) {
console.log(' ...filter tutti')
item.value = costanti.FILTER_TUTTI
}
}
@@ -400,7 +413,7 @@ export default defineComponent({
}
function searchval(newval: any, table: any) {
console.log('searchval', newval, table)
console.log('REFRR searchval', newval, table)
tools.setCookie(tools.COOK_SEARCH + table, newval)
if (table === toolsext.TABSKILLS) {
@@ -410,12 +423,19 @@ export default defineComponent({
}
} else if (table === toolsext.TABSECTORS) {
setCategBySector(toolsext.TABSKILLS, table, newval)
} else if (table === toolsext.TABSECTORGOODS) {
setCategBySector(toolsext.TABGOODS, table, newval)
} else if (table === toolsext.TABREGIONS) {
setProvinceByRegion(toolsext.TABPROVINCE, table, newval)
} else if (table === 'goods') {
setCategBySector('sectorgoods', table, newval)
} else if (table === toolsext.TABGOODS) {
const recSector = searchList.value.find((rec) => rec.table === toolsext.TABSECTORGOODS)
if (recSector) {
tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
}
// setCategBySector('sectorgoods', table, newval)
}
refresh()
}
@@ -440,7 +460,7 @@ export default defineComponent({
// emulate ajax call
// SELECT * FROM ... WHERE...LIMIT...
async function fetchFromServer(startRow: any, endRow: any, param_myfilter: any, param_myfilterand: any, sortBy: any, descending: any) {
// console.log('fetchFromServer')
let myobj: any = {}
if (sortBy) {
myobj = {}
@@ -623,7 +643,7 @@ export default defineComponent({
let obj2: any = {}
if (idSectorGood > 0) {
// idSectorGood
obj2['sectorgood._id'] = idSectorGood
obj2['sectorGood._id'] = idSectorGood
filtersearch2.push(obj2)
}
} else if ((item.table === 'subskills') && item.value === costanti.FILTER_TUTTI) {
@@ -742,8 +762,11 @@ export default defineComponent({
savefilter()
if (!mytable.value)
if (!mytable.value) {
startsearch.value = false
return
}
// console.log('myfilterandnow', myfilterandnow, 'myfilterandnow', myfilterandnow)
@@ -762,7 +785,7 @@ export default defineComponent({
const startRow = (page - 1) * rowsPerPage
const endRow = startRow + fetchCount
// console.log('startRow', startRow, 'endRow', endRow)
console.log('onRequest: startRow', startRow, 'endRow', endRow)
serverData.value = []
@@ -798,9 +821,86 @@ export default defineComponent({
// ...and turn of loading indicator
loading.value = false
spinner_visible.value = false
changetable.value = false
startsearch.value = false
})
}
function onUpdateData(index: number, myprops: any, done: any) {
const { page, rowsPerPage, rowsNumber, sortBy, descending } = myprops.pagination
const myfilternow = myfilter.value
const myfilterandnow = myfilterand.value
savefilter()
if (!mytable.value) {
startsearch.value = false
if (myinfscroll.value) {
// @ts-ignore
myinfscroll.value.resume()
}
done()
return
}
// function all rows if "All" (0) is rowsel
const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage
// calculate starting row of data
const startRow = numRecLoaded.value
const endRow = startRow + fetchCount
console.log('startRow', startRow, 'endRow', endRow, 'fetchCount', fetchCount)
if (startRow < pagination.value.rowsNumber) {
// fetch data from "server"
return fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
pagination.value.rowsNumber = getRowsNumberCount(myfilter)
console.log(' ...rowsNumber', pagination.value.rowsNumber)
if (returnedData.value === []) {
// no more data
} else {
try {
numRecLoaded.value = numRecLoaded.value + (returnedData.value ? returnedData.value.length : 0)
console.log(' ...numRecLoaded.value', numRecLoaded.value)
serverData.value = [...serverData.value, ...returnedData.value]
} catch (e) {
serverData.value = []
}
}
// don't forfunction to update local pagination object
pagination.value.page = page
pagination.value.rowsPerPage = rowsPerPage
pagination.value.sortBy = sortBy
pagination.value.descending = descending
// console.log('pagination', pagination)
// ...and turn of loading indicator
changetable.value = false
startsearch.value = false
if (myinfscroll.value) {
// @ts-ignore
myinfscroll.value.resume()
}
console.log(' ...DONE ')
done()
})
} else {
startsearch.value = false
if (myinfscroll.value) {
// @ts-ignore
myinfscroll.value.resume()
}
}
}
function refresh_arr() {
const myarr = [...serverData.value]
@@ -809,19 +909,37 @@ export default defineComponent({
}
function refresh_table() {
onRequest({
pagination: pagination.value
})
rowclicksel.value = null
}
function refresh_infscroll(done: any) {
rowclicksel.value = null
onUpdateData(0,
{
pagination: pagination.value
}, done)
}
function refresh() {
console.log('refresh', 'startsearch', startsearch.value)
// console.log('refresh')
if (!startsearch.value)
if (startsearch.value)
return false
console.log('REFRESH!')
startsearch.value = true
serverData.value = []
numRecLoaded.value = 0
search.value = search.value.trim()
@@ -834,10 +952,21 @@ export default defineComponent({
// console.log('myfilter', myfilter.value)
refresh_table()
if (shared_consts.VERTIC_SHOW_GRID.includes(myvertical.value)) {
if (myinfscroll.value) {
// @ts-ignore
myinfscroll.value.stop()
}
refresh_infscroll(function () { return true })
} else {
refresh_table()
}
}
watch(() => mycodeid.value, (newval, oldval) => {
console.log('REFRR - mycodeid.value', newval)
refresh()
})
@@ -846,6 +975,8 @@ export default defineComponent({
myvertical.value === costanti.VISUTABLE_SCHEDA_GROUP ||
myvertical.value === costanti.VISUTABLE_SCHEDA_USER ||
(props.showType === costanti.SHOW_USERINFO))) {
console.log('REFRR - updateTables.value', newval)
refresh()
userStore.updateTables = false
@@ -865,6 +996,10 @@ export default defineComponent({
return userStore.isFacilitatore
}
function isAdmin() {
return userStore.isAdmin
}
function disabilita() {
if ((mytable.value === 'users') && (isFacilitatore() && !userStore.isAdmin && !userStore.isManager)) {
return true
@@ -891,6 +1026,14 @@ export default defineComponent({
item['idSkill'] = costanti.FILTER_NESSUNO
newRecord.value['idSkill'] = item['idSkill']
}
} else if (col.jointable === toolsext.TABSECTORGOODS) {
// Sbianca la select della Categoria Beni
if (item && item.hasOwnProperty('idGood')) {
item['idGood'] = costanti.FILTER_NESSUNO
newRecord.value['idGood'] = item['idGood']
console.log('newRecord', newRecord)
}
}
rowsel = item
idsel = item._id
@@ -936,7 +1079,7 @@ export default defineComponent({
}
function annulla(val: any) {
console.log('annulla')
console.log('GridTable annulla')
/*
if (newRecord.value) {
globalStore.DeleteRec({ table: mytable.value, id: newRecord.value._id })
@@ -1280,7 +1423,8 @@ export default defineComponent({
}
function changeTable(mysel: any) {
// console.log('changeTable', tablesel.value)
console.log('changeTable', tablesel.value)
changetable.value = true
if (tablesel.value === undefined || tablesel.value === '')
return
@@ -1379,12 +1523,12 @@ export default defineComponent({
}
}
startsearch.value = true
console.log('REFRR - changetable')
refresh()
}
function doSearch() {
console.log('REFRR - doSearch')
refresh()
}
@@ -1721,6 +1865,17 @@ export default defineComponent({
return actualDate.value
}
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 {
pagination.value.page = pagination.value.page + 1
refresh_infscroll(done)
}
}
}
// onMounted(mounted)
created()
@@ -1809,6 +1964,10 @@ export default defineComponent({
getActualDate,
actualDate,
actual,
isAdmin,
onLoadScroll,
numRecLoaded,
myinfscroll,
}
}
})

231
src/components/CGridTableRec/CGridTableRec.vue
View File

@@ -33,7 +33,208 @@
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="2em" color="primary"/>
</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 `">
<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)"
:label="labelcombo(item)"
v-model:value="item.value"
@update:value="searchval(item.value, item.table)"
:addall="item.addall"
:addnone="item.addnone"
:tablesel="item.type === costanti.FieldType.select_by_server ? item.tablesel : ''"
:pickup="item.type === costanti.FieldType.select_by_server"
label-color="primary"
class="combowidth"
color="primary"
:icon_alternative="item.icon"
:optval="fieldsTable.getKeyByTable(item.table)"
:optlab="fieldsTable.getLabelByTable(item.table)"
:options="valoriopt(item, false)"
:filter="item.filter"
:filter_extra="item.filter_extra"
:useinput="item.useinput && item.type !== costanti.FieldType.select_by_server">
</CMySelect>
<!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
item: {{ item}}
</div>-->
<CMySelect
v-if="item.type === costanti.FieldType.multiselect_by_server"
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
:multiselect_by_server="true"
:label="labelcombo(item)"
v-model:arrvalue="item.arrvalue"
@update:arrvalue="searchval(item.arrvalue, item.table)"
:addall="item.addall"
:addnone="item.addnone"
:tablesel="item.tablesel"
:pickup="true"
:param1="item.param1"
label-color="primary"
class="combowidth"
color="primary"
:icon_alternative="item.icon"
:optval="fieldsTable.getKeyByTable(item.table)"
:optlab="fieldsTable.getLabelByTable(item.table)"
:filter="item.filter"
:filter_extra="item.filter_extra"
:options="valoriopt(item, false)"
:useinput="true">
</CMySelect>
<q-select
v-if="(item.type === costanti.FieldType.multiselect)"
v-model="item.arrvalue"
label-color="primary"
:label="labelcombo(item)"
@update:model-value="searchval(item.arrvalue, item.table)"
rounded
dense
outlined
multiple
options-dense
emit-value
map-options
stack-label
:useinput="item.useinput"
:options="valoriopt(item, item.addall, item.addnone)"
:filter="item.filter"
class="combowidth"
:option-value="fieldsTable.getKeyByTable(item.table)"
>
<template v-if="item.icon" v-slot:prepend>
<q-icon :name="item.icon"/>
</template>
<template
v-if="item.arrvalue.length >= 1"
v-slot:selected-item="scope">
<div
v-if="scope.opt[fieldsTable.getLabelByTable(item.table)] || (scope.opt && checkIfShowRec(scope.opt)) ">
<q-chip
removable
dense
@remove="scope.removeAtIndex(scope.index)"
v-if="checkIfShowRec(scope.opt)"
color="white"
text-color="mycol"
class="q-my-none q-ml-xs q-mr-none"
>
<q-avatar color="primary" text-color="white" :icon="item.icon" size="12px"/>
{{ scope.opt[fieldsTable.getLabelByTable(item.table)] || (scope.opt) }}
</q-chip>
</div>
</template>
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
<q-item v-bind="itemProps">
<q-item-section>
<q-item-label>{{ opt[fieldsTable.getLabelByTable(item.table)] }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle :model-value="selected" @update:model-value="toggleOption(opt)"/>
</q-item-section>
</q-item>
</template>
</q-select>
</span>
</div>
<div v-if="(prop_search || canEdit)"
class="row justify-center vertical-middle">
<div v-if="prop_search" class="q-mr-sm full-width">
<q-input
v-model="search" filled dense type="search" debounce="500" :hint="hint"
label="Cerca"
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>
</q-input>
</div>
<q-space></q-space>
<q-select
v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit) && showCol && myvertical === 0"
v-model="colVisib"
rounded
outlined
multiple
dense
options-dense
:display-value="$t('grid.columns')"
emit-value
map-options
:options="mycolumns"
option-value="name"
@update:model-value="changeCol">
</q-select>
</div>
<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 />
<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>
<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)"
:grid-header="shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && shared_consts.TABLES_WITH_SORTING.includes(mytable)"
flat
@@ -42,10 +243,14 @@
:rows="serverData"
:columns="mycolumns"
:filter="myfilter"
v-model:pagination="pagination"
v-model:pagination="pagination2"
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"
@request="onRequest"
@selection="selectionclick"
binary-state-sort
:visible-columns="colVisib"
@@ -98,7 +303,7 @@
</template>
<template v-slot:top-right v-if="tablesList || arrfilters">
<span style="display: none">{{actual = null}}</span>
<span style="display: none">{{ actual = null }}</span>
<q-select
v-if="tablesList"
@@ -291,17 +496,15 @@
<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 v-if="choose_visutype" class="">
<q-radio v-model="myvertical" :val="2" label="Lista"
@update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
<q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP"
<div v-if="choose_visutype && $q.screen.gt.xs && isAdmin()" class="">
<q-radio v-model="myvertical" :val="2" label="Lista"/>
<!--<q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP"
label="Scheda"
@update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
<q-radio v-else-if="mytable !== toolsext.TABMYGROUPS && !finder" v-model="myvertical"
:val="costanti.VISUTABLE_SCHEDA_USER" label="Scheda"
@update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
<q-radio v-if="$q.screen.gt.xs" v-model="myvertical" :val="0" label="Tabella"
@update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
:val="costanti.VISUTABLE_SCHEDA_USER" slabel="Scheda"
@update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>-->
<q-radio v-if="$q.screen.gt.xs" v-model="myvertical" :val="0" label="Tabella"/>
</div>
</template>
@@ -357,8 +560,8 @@
<div v-if="props.row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
<div v-if="props.row.dateTimeStart && (tools.getstrVeryShortDate(props.row.dateTimeStart) !== actual)" class="actualdate">
<span style="display: none">{{actual = tools.getstrVeryShortDate(props.row.dateTimeStart)}}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{tools.getstrDateLong(props.row.dateTimeStart) }}</q-chip>
<span style="display: none">{{ actual = tools.getstrVeryShortDate(props.row.dateTimeStart) }}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(props.row.dateTimeStart) }}</q-chip>
</div>
</div>
@@ -611,7 +814,7 @@
label="Campi Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<div
v-if="showColCheck(col, tools.TIPOVIS_EDIT_RECORD, false) && col.foredit">
v-if="showColCheck(col, tools.TIPOVIS_EDIT_RECORD, false) && col.foredit" class="tdclass">
<div>
<CMyPopupEdit
:table="mytable"