- Griglia Orizzontale a Carosello
- Aggiornato Tabella Eventi - Lista Ultimi Movimenti - Ultime strette di mano - Ultimi Invitanti alla App
This commit is contained in:
Surya Paolo
@@ -68,4 +68,11 @@
|
||||
|
||||
.hint_search{
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.clOrizzontal{
|
||||
|
||||
}
|
||||
.q-carousel__slide{
|
||||
padding: 8px !important;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted } from 'vue'
|
||||
import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted, nextTick } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
@@ -361,6 +361,8 @@ export default defineComponent({
|
||||
const showMap = ref(false)
|
||||
const showMapAtLeast1 = ref(false)
|
||||
const mapInitialized = ref(false)
|
||||
const slideGridOriz = ref(0)
|
||||
const autoplay = ref(true)
|
||||
|
||||
|
||||
const newRecordBool = ref(false)
|
||||
@@ -371,6 +373,12 @@ export default defineComponent({
|
||||
const recModif = ref(<any>{})
|
||||
const showInnerDialog = ref(false)
|
||||
|
||||
const carouselTabRef = ref(<any>null)
|
||||
const isAtStart = ref(true)
|
||||
const isAtEnd = ref(false)
|
||||
const activeIndex = ref(0)
|
||||
const addEventScroll = ref(false)
|
||||
|
||||
const mytable = ref('')
|
||||
const mytitle = ref('')
|
||||
const mytitlenew = ref('')
|
||||
@@ -1209,6 +1217,8 @@ export default defineComponent({
|
||||
spinner_visible.value = false
|
||||
changetable.value = false
|
||||
startsearch.value = false
|
||||
|
||||
checkScrollPosition()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1306,6 +1316,8 @@ export default defineComponent({
|
||||
// console.log(' ...DONE ')
|
||||
done(pagination.value.rowsNumber === 0 ? true : false)
|
||||
|
||||
checkScrollPosition()
|
||||
|
||||
alreadymounting.value = true
|
||||
})
|
||||
} else {
|
||||
@@ -1660,13 +1672,55 @@ export default defineComponent({
|
||||
|
||||
myvertical.value = props.vertical
|
||||
|
||||
showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
|
||||
if (props.prop_search) {
|
||||
showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
|
||||
} else {
|
||||
showfilter.value = props.prop_showfilter
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('ERRORE', e)
|
||||
}
|
||||
}
|
||||
|
||||
const checkScrollPosition = () => {
|
||||
console.log('checkScrollPosition')
|
||||
const container = carouselTabRef.value
|
||||
if (!container ) return
|
||||
|
||||
if (!addEventScroll.value && carouselTabRef.value) {
|
||||
carouselTabRef.value?.addEventListener('scroll', checkScrollPosition)
|
||||
addEventScroll.value = true
|
||||
}
|
||||
|
||||
if (carouselTabRef.value) {
|
||||
console.log('carouselTabRef LISTEN')
|
||||
} else {
|
||||
console.log('carouselTabRef NO !')
|
||||
}
|
||||
console.log(' .... >>> AVANTI ', container.scrollLeft, container.clientWidth)
|
||||
|
||||
isAtStart.value = container.scrollLeft <= 0
|
||||
isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
|
||||
|
||||
if (serverData.value.length > 0) { // Assicurarsi che ci siano elementi
|
||||
console.log('entro dentro...')
|
||||
const cardWidth = container.scrollWidth / serverData.value.length
|
||||
activeIndex.value = Math.round(container.scrollLeft / cardWidth)
|
||||
}
|
||||
}
|
||||
|
||||
const scroll = (direction: any) => {
|
||||
const container = carouselTabRef.value;
|
||||
if (!container || !serverData.value.length) return;
|
||||
|
||||
const cardWidth = container.scrollWidth / serverData.value.length;
|
||||
container.scrollBy({
|
||||
left: direction * cardWidth,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
function mounted() {
|
||||
// console.log('mounted...')
|
||||
try {
|
||||
@@ -1713,6 +1767,10 @@ export default defineComponent({
|
||||
|
||||
changeTable(tablesel.value, true)
|
||||
|
||||
nextTick(() => {
|
||||
checkScrollPosition()
|
||||
})
|
||||
|
||||
// Aggiungi gli listener agli eventi della tastiera
|
||||
document.addEventListener('keydown', onEscapeKey);
|
||||
// window.addEventListener('popstate', onBackButton);
|
||||
@@ -2188,7 +2246,7 @@ export default defineComponent({
|
||||
|
||||
newRecord.value = {}
|
||||
newRecordBool.value = false
|
||||
|
||||
|
||||
tools.showPositiveNotif($q, t('db.recupdated'))
|
||||
// refresh()
|
||||
} else {
|
||||
@@ -2476,6 +2534,10 @@ export default defineComponent({
|
||||
// Rimuovi i listener al distruggere del componente
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('keydown', onEscapeKey);
|
||||
|
||||
carouselTabRef.value?.removeEventListener('scroll', checkScrollPosition)
|
||||
|
||||
|
||||
// window.removeEventListener('popstate', onBackButton);
|
||||
});
|
||||
|
||||
@@ -2700,6 +2762,13 @@ export default defineComponent({
|
||||
gotoCurrentLocation,
|
||||
showInMap,
|
||||
showMapAtLeast1,
|
||||
carouselTabRef,
|
||||
isAtStart,
|
||||
isAtEnd,
|
||||
activeIndex,
|
||||
scroll,
|
||||
slideGridOriz,
|
||||
autoplay,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -267,12 +267,17 @@
|
||||
dense
|
||||
type="search"
|
||||
debounce="500"
|
||||
:hint="!hintinbtnsearch ? hint: ''"
|
||||
:hint="!hintinbtnsearch ? hint : ''"
|
||||
:error-message="noresultLabel"
|
||||
:error="(getNumRecFromQuery() === 0 && !startsearch) && myfilter !== ''"
|
||||
:error="
|
||||
getNumRecFromQuery() === 0 && !startsearch && myfilter !== ''
|
||||
"
|
||||
:label="hintinbtnsearch ? hint : $t('grid.search')"
|
||||
@keyup.enter="doSearch"
|
||||
@clear="myfilter = ''; doSearch()"
|
||||
@clear="
|
||||
myfilter = '';
|
||||
doSearch();
|
||||
"
|
||||
@update:model-value="findByDebounce ? doSearch() : null"
|
||||
:clearable="!!myfilter"
|
||||
class="col q-mx-xs"
|
||||
@@ -284,10 +289,10 @@
|
||||
</q-input>
|
||||
|
||||
<q-btn
|
||||
v-if="prop_search && myfilter || search"
|
||||
v-if="(prop_search && myfilter) || search"
|
||||
color="primary"
|
||||
icon="fas fa-search"
|
||||
@click="showSearchOnTop ? showSearchDialog = true : doSearch()"
|
||||
@click="showSearchOnTop ? (showSearchDialog = true) : doSearch()"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
@@ -400,181 +405,192 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(row, indexrow) in serverData" :key="indexrow">
|
||||
<div
|
||||
v-if="
|
||||
showType === costanti.SHOW_MYCARD ||
|
||||
(myvertical !== costanti.VISUTABLE_USER_TABGROUP &&
|
||||
myvertical !== costanti.VISUTABLE_USER_TABCIRCUIT &&
|
||||
myvertical === costanti.VISUTABLE_LISTA &&
|
||||
shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel))
|
||||
"
|
||||
<div v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ">
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="autoplay"
|
||||
v-model="slideGridOriz"
|
||||
navigation
|
||||
control-color="blue-4"
|
||||
control-text-color="white"
|
||||
arrows
|
||||
ref="carousel"
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
height="500px"
|
||||
width="100%"
|
||||
control-type="push"
|
||||
class="bg-grey-2 shadow-2 rounded-borders"
|
||||
@mouseenter="autoplay = false"
|
||||
@mouseleave="autoplay = true"
|
||||
>
|
||||
<div v-if="row && withdate">
|
||||
<div v-if="setShowMonth(row, indexrow)">
|
||||
<div>
|
||||
<div v-if="row.dateTimeStart">
|
||||
<strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
|
||||
</div>
|
||||
<q-carousel-slide
|
||||
v-for="(rec, indexrow) in serverData"
|
||||
:key="indexrow"
|
||||
:name="indexrow"
|
||||
>
|
||||
<CMyRecCard
|
||||
:table="tablesel"
|
||||
:prop_myrec="rec"
|
||||
@cmdext="cmdExt"
|
||||
:editOn="editOn"
|
||||
:margin_right="margin_right"
|
||||
>
|
||||
</CMyRecCard>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
<div v-if="false">
|
||||
<div class="card-carousel-container">
|
||||
<div class="card-carousel" ref="carouselTabRef">
|
||||
<q-card
|
||||
v-for="(rec, indexrow) in serverData"
|
||||
:key="indexrow"
|
||||
:class="`my-card-elem center_img bordered ` + ' titolo_card'"
|
||||
:style="`height: auto; !important; width: 350px !important;`"
|
||||
>
|
||||
<CMyRecCard
|
||||
:table="tablesel"
|
||||
:prop_myrec="rec"
|
||||
@cmdext="cmdExt"
|
||||
:editOn="editOn"
|
||||
:margin_right="margin_right"
|
||||
>
|
||||
</CMyRecCard>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
class="swipe-indicator left"
|
||||
v-if="!isAtStart"
|
||||
@click="scroll(-1)"
|
||||
>
|
||||
<q-icon name="chevron_left" size="2rem" color="white" />
|
||||
</div>
|
||||
<div
|
||||
class="swipe-indicator right"
|
||||
v-if="!isAtEnd"
|
||||
@click="scroll(1)"
|
||||
>
|
||||
<q-icon name="chevron_right" size="2rem" color="white" />
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<div
|
||||
v-for="(_, index) in serverData"
|
||||
:key="index"
|
||||
:class="['dot', { active: index === activeIndex }]"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-for="(row, indexrow) in serverData" :key="indexrow">
|
||||
<div
|
||||
v-if="
|
||||
showType === costanti.SHOW_MYCARD ||
|
||||
(myvertical !== costanti.VISUTABLE_USER_TABGROUP &&
|
||||
myvertical !== costanti.VISUTABLE_USER_TABCIRCUIT &&
|
||||
myvertical === costanti.VISUTABLE_LISTA &&
|
||||
shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel))
|
||||
"
|
||||
>
|
||||
<div v-if="row && withdate">
|
||||
<div v-if="setShowMonth(row, indexrow)">
|
||||
<div>
|
||||
<q-separator />
|
||||
<div v-if="row.dateTimeStart">
|
||||
<strong>{{
|
||||
tools.getstrMonth(row.dateTimeStart)
|
||||
}}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<q-separator />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CMyRecGrpCard
|
||||
v-if="tablesel === shared_consts.TABLES_MYGROUPS"
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
>
|
||||
</CMyRecGrpCard>
|
||||
<CMyRecCircuitCard
|
||||
v-else-if="tablesel === shared_consts.TABLES_CIRCUITS"
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
>
|
||||
</CMyRecCircuitCard>
|
||||
<CMyRecCard
|
||||
v-else
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
:editOn="editOn"
|
||||
:margin_right="margin_right"
|
||||
>
|
||||
</CMyRecCard>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
(showType === costanti.SHOW_USERINFO &&
|
||||
myvertical !== costanti.VISUTABLE_SCHEDA_USER) ||
|
||||
(myvertical === 2 &&
|
||||
shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel))
|
||||
"
|
||||
class="fill-all-width"
|
||||
>
|
||||
<div>
|
||||
<CMyUser
|
||||
:notsetcmd="true"
|
||||
:mycontact="row"
|
||||
:visu="visufind"
|
||||
:groupname="extrafield"
|
||||
:circuitname="circuitname"
|
||||
:actionType="actionType"
|
||||
:labelextra="col_title ? row[col_title] : ''"
|
||||
:labelFooter="
|
||||
col_footer
|
||||
? tools.getLabelFooterByRow(row, col_footer, tablesel)
|
||||
: ''
|
||||
"
|
||||
@showInnerDialog="showInnerDialog"
|
||||
<CMyRecGrpCard
|
||||
v-if="tablesel === shared_consts.TABLES_MYGROUPS"
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
>
|
||||
</CMyUser>
|
||||
|
||||
<q-separator></q-separator>
|
||||
</CMyRecGrpCard>
|
||||
<CMyRecCircuitCard
|
||||
v-else-if="tablesel === shared_consts.TABLES_CIRCUITS"
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
>
|
||||
</CMyRecCircuitCard>
|
||||
<CMyRecCard
|
||||
v-else
|
||||
:table="tablesel"
|
||||
:prop_myrec="row"
|
||||
@cmdext="cmdExt"
|
||||
:editOn="editOn"
|
||||
:margin_right="margin_right"
|
||||
>
|
||||
</CMyRecCard>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
(showType === costanti.SHOW_GROUPINFO &&
|
||||
myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) ||
|
||||
(myvertical === 2 && tablesel === 'mygroups') ||
|
||||
myvertical === costanti.VISUTABLE_GROUP_CIRCUIT
|
||||
"
|
||||
class="fill-all-width"
|
||||
>
|
||||
<div>
|
||||
<CMyGroups
|
||||
v-model="filtergrp"
|
||||
:circuitname="circuitname"
|
||||
:finder="false"
|
||||
:mygrp="row"
|
||||
:visu="visufind ? visufind : costanti.FIND_GROUP"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
showType === costanti.SHOW_MOVEMENTS && tablesel === 'movements'
|
||||
"
|
||||
>
|
||||
<CSingleMovement :mov="row" />
|
||||
<!--<div v-if="false" class="q-pa-xs row items-start q-gutter-xs">
|
||||
<q-card class="my-card text-black">
|
||||
<q-toolbar
|
||||
class="bg-primary text-white"
|
||||
style="min-height: 30px"
|
||||
<div
|
||||
v-else-if="
|
||||
(showType === costanti.SHOW_USERINFO &&
|
||||
myvertical !== costanti.VISUTABLE_SCHEDA_USER) ||
|
||||
(myvertical === 2 &&
|
||||
shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel))
|
||||
"
|
||||
class="fill-all-width"
|
||||
>
|
||||
<div>
|
||||
<CMyUser
|
||||
:notsetcmd="true"
|
||||
:mycontact="row"
|
||||
:visu="visufind"
|
||||
:groupname="extrafield"
|
||||
:circuitname="circuitname"
|
||||
:actionType="actionType"
|
||||
:labelextra="col_title ? row[col_title] : ''"
|
||||
:labelFooter="
|
||||
col_footer
|
||||
? tools.getLabelFooterByRow(row, col_footer, tablesel)
|
||||
: ''
|
||||
"
|
||||
@showInnerDialog="showInnerDialog"
|
||||
>
|
||||
<q-toolbar-title>
|
||||
<span class="q-ma-sm">
|
||||
<q-icon
|
||||
v-if="tools.isEntrataByRecMov(row)"
|
||||
name="fas fa-box-tissue"
|
||||
color="green"
|
||||
></q-icon>
|
||||
<q-icon
|
||||
v-else-if="tools.isUscitaByRecMov(row)"
|
||||
name="fas fa-share-square"
|
||||
color="red"
|
||||
></q-icon>
|
||||
</span>
|
||||
{{
|
||||
tools.isEntrataByRecMov(row)
|
||||
? t('movement.movin')
|
||||
: tools.isUscitaByRecMov(row)
|
||||
? t('movement.movout')
|
||||
: ''
|
||||
}}
|
||||
</q-toolbar-title>
|
||||
</q-toolbar>
|
||||
<q-card-section>
|
||||
<div v-for="col in mycolumns" :key="col.name">
|
||||
<div
|
||||
v-if="
|
||||
showColCheck(
|
||||
col,
|
||||
tools.TIPOVIS_SHOW_RECORD,
|
||||
true,
|
||||
1,
|
||||
row
|
||||
)
|
||||
"
|
||||
:class="
|
||||
!col.extrafield ||
|
||||
(col.extrafield &&
|
||||
(col.tipovisu !== costanti.TipoVisu.LINK ||
|
||||
(col.tipovisu === costanti.TipoVisu.LINK &&
|
||||
userStore.getImgByProfile(row, true, col))))
|
||||
? `tdclass`
|
||||
: ``
|
||||
"
|
||||
>
|
||||
<div :class="getclrow(row)">
|
||||
<CMyPopupEdit
|
||||
:table="mytable"
|
||||
:canEdit="false"
|
||||
:canModify="false"
|
||||
:disable="false"
|
||||
:mycol="col"
|
||||
:row="row"
|
||||
:field="col.field"
|
||||
:visulabel="true"
|
||||
:subfield="col.subfield"
|
||||
minuteinterval="1"
|
||||
@save="SaveValue"
|
||||
@show="selItem(row, col)"
|
||||
@showandsave="showandsave"
|
||||
>
|
||||
</CMyPopupEdit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>-->
|
||||
</CMyUser>
|
||||
|
||||
<q-separator></q-separator>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
(showType === costanti.SHOW_GROUPINFO &&
|
||||
myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) ||
|
||||
(myvertical === 2 && tablesel === 'mygroups') ||
|
||||
myvertical === costanti.VISUTABLE_GROUP_CIRCUIT
|
||||
"
|
||||
class="fill-all-width"
|
||||
>
|
||||
<div>
|
||||
<CMyGroups
|
||||
v-model="filtergrp"
|
||||
:circuitname="circuitname"
|
||||
:finder="false"
|
||||
:mygrp="row"
|
||||
:visu="visufind ? visufind : costanti.FIND_GROUP"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
showType === costanti.SHOW_MOVEMENTS && tablesel === 'movements'
|
||||
"
|
||||
>
|
||||
<CSingleMovement :mov="row" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-slot:loading>
|
||||
|
||||
Reference in New Issue
Block a user