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

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

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,
}
}
})