Files
salvato.newfreeplanet/src/components/CGridTableRec/CGridTableRec.vue
Surya Paolo d4e0f2cf1a - corretto img profilo
- corretto coordinata non obbligatoria
2024-09-17 18:50:05 +02:00

1543 lines
51 KiB
Vue
Executable File

<template>
<div v-if="tools.isDebugOn()"></div>
<div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
<q-toggle
v-if="tools.isManager() && !showMap"
v-model="editOn"
color="green"
icon="fas fa-pencil-alt"
class="fixed-toggle"
>
</q-toggle>
<div
v-if="mytable && visButtRow()"
class="centermydiv q-my-sm"
style="text-align: center"
>
<q-btn
rounded
dense
color="primary"
size="lg"
:label="getlabelAddRow()"
@click="createNewRecordDialog"
></q-btn>
</div>
<div
v-if="butt_modif_new || mytitle"
:class="$q.screen.lt.sm ? `` : `q-ma-xs` + ` `"
>
<div class="q-table__title" style="min-width: 150px">
{{ mytitle }}
</div>
<q-space></q-space>
<div v-if="butt_modif_new" class="row justify-center">
<q-btn
v-if="
mytable &&
!shared_consts.TABLES_FINDER.includes(mytable) &&
!showMap
"
rounded
dense
size="sm"
flat
:color="canEdit ? 'positive' : 'light-gray'"
:disable="disabilita()"
:val="lists.MenuAction.CAN_EDIT_TABLE"
icon="fas fa-pencil-alt"
@update:model-value="changefuncAct"
@click="canEdit = !canEdit"
>
</q-btn>
<q-btn
v-if="mytable && labelBtnAddExtra"
rounded
outline
size="md"
color="primary"
class="q-mb-sm"
:label="labelBtnAddExtra"
:disable="startsearch"
icon="fas fa-plus"
@click="createNewRecord"
>
</q-btn>
</div>
</div>
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="2em" color="primary" />
</q-inner-loading>
<CTitleBanner
v-if="subtitle"
:title="subtitle"
bgcolor="bg-blue"
clcolor="text-white"
>
</CTitleBanner>
<div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
<div v-if="(prop_search || canEdit) && finder" class="q-my-xs text-right">
<!--<q-btn
size="sm"
dense
icon="fas fa-filter"
:label="t('grid.showfilters')"
@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">
<CMySelect
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-if="
(item.type === costanti.FieldType.select ||
item.type === costanti.FieldType.select_by_server) &&
lengthopt(item, false, false) > 1
"
: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, 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 &&
lengthopt(item, false) > 1
"
: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
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
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>
</q-slide-transition>
<div v-if="prop_search || canEdit">
<div
v-if="searchList && finder"
class="row justify-between q-mb-sm q-mx-sm"
>
<q-btn
class=""
dense
:label="
!showfilter ? $t('grid.openfilter') : $t('grid.closefilter')
"
color="positive"
:icon="!showfilter ? 'fas fa-filter' : 'fas fa-arrow-up'"
@click="showfilter = !showfilter"
><q-badge
v-if="getNumFilterSelected()"
color="red"
floating
transparent
>
{{ getNumFilterSelected() }}
</q-badge>
</q-btn>
<q-btn
v-if="prop_search"
class=""
dense
:label="t('grid.search')"
color="primary"
icon="fas fa-search"
@click="showSearchDialog = true"
>
</q-btn>
<q-btn-toggle
v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)"
v-model="showMap"
push
glossy
dense
toggle-color="secondary"
:options="[
{
label: t('grid.showmap'),
value: true,
icon: 'fas fa-map-marked-alt',
},
{ label: t('grid.showlist'), value: false, icon: 'fas fa-list' },
]"
/>
</div>
<q-space></q-space>
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
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="true" class="">
<div v-if="pagination.rowsNumber === 1 && prop_search">
{{ pagination.rowsNumber }} elemento trovato
<span v-html="getLabelAreaMap()"></span>
</div>
<div v-if="pagination.rowsNumber > 1 && prop_search">
{{ pagination.rowsNumber }} {{ labelElemFind }}
<span v-html="getLabelAreaMap()"></span>
</div>
</div>
<div v-if="choose_visutype && $q.screen.gt.xs" 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 !== shared_consts.TABLES_MYGROUPS && !finder" v-model="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="$t('grid.table')"
/>
</div>
</div>
<div v-if="showMapAtLeast1" v-show="showMap">
<CMapByTable
ref="myMapComp"
mytable=""
:arrcord="serverData"
@clickMarker="clickMarker"
@updateMapBoundaries="updateMapBoundaries"
@updateMapZoomOut="updateMapZoomOut"
>
</CMapByTable>
</div>
<div v-if="!showMap">
<q-infinite-scroll
ref="myinfscroll"
v-if="
shared_consts.VERTIC_SHOW_GRID.includes(myvertical) &&
!loading &&
alreadymounting
"
:initial-index="0"
@load="onLoadScroll"
:offset="350"
debounce="300"
>
<div v-if="showHeaderCol">
<div
v-for="col in mycolumns"
:key="col.name"
class="text-italic text-weight-bold"
>
<span
v-if="col && showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)"
>
{{ col.label }}
</span>
</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="row && withdate">
<div v-if="setShowMonth(row, indexrow)">
<div>
<div v-if="row.dateTimeStart">
<strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
</div>
<div>
<q-separator />
</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"
:labelextra="col_title ? row[col_title] : ''"
:labelFooter="
col_footer
? tools.getLabelFooterByRow(row, col_footer, tablesel)
: ''
"
@showInnerDialog="showInnerDialog"
>
</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'
"
>
<div 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"
>
<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>
</div>
</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-if="
!shared_consts.VERTIC_SHOW_GRID.includes(myvertical) && !loading
"
: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
bordered
class="my-sticky-header-table"
:rows="serverData"
:columns="mycolumns"
:filter="myfilter"
v-model:pagination="pagination"
@request="onRequest"
virtual-scroll
:row-key="colkey"
:loading="startsearch"
@selection="selectionclick"
binary-state-sort
:visible-columns="colVisib"
:no-data-label="nodataLabel"
:no-results-label="noresultLabel"
:selected-rows-label="getSelectedString"
selection="single"
v-model:selected="selected"
>
<template
v-if="
!(
myvertical === costanti.VISUTABLE_SCHEDA_USER ||
myvertical === 2 ||
myvertical === costanti.VISUTABLE_SCHEDA_GROUP
)
"
v-slot:header="props"
>
<q-tr :props="props">
<q-th> </q-th>
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
class="text-italic text-weight-bold"
>
<span
v-if="col && showColCheck(col, tools.TIPOVIS_SHOW_RECORD, true)"
>
{{ col.label }}
</span>
</q-th>
</q-tr>
</template>
<template v-else v-slot:header="props">
<q-tr :props="props">
<q-th> </q-th>
<span v-for="col in props.cols" :key="col.name">
<q-th
v-if="col.sortable"
:key="col.name"
:props="props"
class="text-italic text-weight-bold"
>
<span>
{{ col.label }}
</span>
</q-th>
</span>
</q-tr>
</template>
<template
v-slot:top-right
v-if="tablesList || arrfilters || enableExport"
>
<span style="display: none">{{ (actual = null) }}</span>
<q-select
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
v-if="tablesList"
v-model="tablesel"
rounded
outlined
dense
:options="tablesList"
:display-value="mytitle"
emit-value
@update:model-value="changeTable"
>
</q-select>
<q-btn
v-if="enableExport"
color="primary"
icon-right="archive"
:label="t('export.csv')"
no-caps
@click="exportTable"
/>
<div class="row">
<q-toggle
v-for="(filt, index) of arrfilters"
:key="index"
v-model="myfilterand"
:disable="filt.hide"
:val="filt.value"
:label="filt.label"
>
</q-toggle>
</div>
<!--<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>-->
</template>
<template v-slot:top-left>
<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
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
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 ' + ($q.screen.lt.sm ? ' full-width' : '')"
>
<q-input
v-model="search"
filled
dense
type="search"
debounce="500"
:hint="hint"
:error-message="noresultLabel"
:error="getNumRecFromQuery() === 0 && !startsearch"
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
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
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 v-if="choose_visutype && $q.screen.gt.xs" 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 !== shared_consts.TABLES_MYGROUPS && !finder" v-model="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>
<template v-slot:body="props">
<q-tr :props="props" class="trclass">
<q-td auto-width class="tdclass">
<q-checkbox dense v-model="props.selected"></q-checkbox>
</q-td>
<q-td v-for="col in mycolumns" :key="col.name" :props="props">
<div
v-if="
showColCheck(
col,
tools.TIPOVIS_SHOW_RECORD,
true,
1,
props.row
)
"
class="tdclass"
>
<div :class="getclrow(props.row)">
<CMyPopupEdit
:table="mytable"
:canEdit="canEdit"
:canModify="
tools.canModifyThisRec(props.row, tablesel) || editOn
"
:disable="disabilita()"
:mycol="col"
v-model:row="props.row"
:field="col.field"
:subfield="col.subfield"
minuteinterval="1"
@save="SaveValue"
@show="selItem(props.row, col)"
@showandsave="showandsave"
>
</CMyPopupEdit>
</div>
</div>
</q-td>
<q-td v-for="col in mycolumns" :key="col.name" :props="props">
<div v-if="colExtra.includes(col.name)" class="tdclass">
<div v-if="col.action && visCol(col)">
<q-btn
flat
round
color="red"
:icon="col.icon"
size="sm"
@click="clickFunz(props.row, col)"
></q-btn>
</div>
</div>
</q-td>
</q-tr>
<br />
</template>
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card
:class="
props.selected
? 'bg-grey-2 my-card-withshadow no-padding'
: 'my-card-withshadow no-padding'
"
style="
background: radial-gradient(circle, #ffffff 0%, #bbddff 100%);
"
>
<q-bar
v-if="
!visuinpage &&
(tools.canModifyThisRec(props.row, tablesel) || editOn)
"
dense
class="bg-primary text-white full-height"
>
<q-badge
v-if="props.row['adType']"
:color="fieldsTable.getColByAdType(props.row['adType'])"
>
{{
fieldsTable.getValByTabAndId(
tablesel,
'adType',
props.row['adType']
)
}}
<q-icon
:name="fieldsTable.getIconByAdType(props.row['adType'])"
color="white"
class="q-ml-xs"
/>
</q-badge>
<q-space />
<q-btn
v-if="tools.canModifyThisRec(props.row, tablesel) || editOn"
flat
round
color="white"
icon="fas fa-pencil-alt"
size="sm"
@click="
clickFunz(
props.row,
prop_mycolumns.find(
(rec) => rec.action === lists.MenuAction.CAN_EDIT_TABLE
)
)
"
></q-btn>
<q-btn
v-if="tools.canModifyThisRec(props.row, tablesel) || editOn"
flat
round
color="white"
icon="fas fa-trash-alt"
size="sm"
@click="
clickFunz(
props.row,
prop_mycolumns.find(
(rec) => rec.action === lists.MenuAction.DELETE_RECTABLE
)
)
"
></q-btn>
</q-bar>
<!--<q-toolbar dense v-if="col_title" class="bg-primary text-white centeritems">
<q-toolbar-title>
{{ props.row[col_title] }}
</q-toolbar-title>
</q-toolbar>-->
<q-card-section class="">
<q-list dense>
<div v-for="col in mycolumns" :key="col.name">
<q-item
v-if="
showColCheck(
col,
tools.TIPOVIS_SHOW_RECORD,
false,
tools.getValue(props.row, col.field, col.subfield)
)
"
:class="clByCol(col)"
class="riduci_pad"
>
<q-item-section avatar v-if="col.icon">
<q-item-label class="q-table__col">
<q-icon :name="col.icon"></q-icon>
</q-item-label>
</q-item-section>
<q-item-section avatar v-if="visuIntestazCol(col)">
<q-item-label class="q-table__col">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section>
<div class="tdclass">
<div :class="getclrow(props.row)">
<CMyPopupEdit
:table="mytable"
:canEdit="canEdit"
:canModify="
tools.canModifyThisRec(props.row, tablesel) ||
editOn
"
:disable="disabilita()"
:mycol="col"
v-model:row="props.row"
:field="col.field"
:subfield="col.subfield"
minuteinterval="1"
@save="SaveValue"
@show="selItem(props.row, col)"
@showandsave="showandsave"
>
</CMyPopupEdit>
</div>
</div>
</q-item-section>
</q-item>
</div>
</q-list>
</q-card-section>
</q-card>
</div>
</template>
</q-table>
</div>
<!--<q-page-sticky
v-if="mytable && butt_modif_new && !hidetitleIfEmpty"
position="bottom-right"
:offset="[18, 68]"
>
<q-btn
fab
glossy
class="semi-transparent"
icon="add"
color="primary"
@click="createNewRecordDialog"
/>
</q-page-sticky>-->
<q-dialog
v-model="showSearchDialog"
transition-show="slide-up"
transition-hide="slide-down"
class="q-dialog-fullscreen no-padding-dialog"
>
<q-card class="dialog_card q-dialog-on-top no-padding q-my-sm">
<q-card-section class="no-padding">
<q-input
:class="'q-mr-sm full-width '"
v-model="search"
filled
autofocus
type="search"
:hint="
pagination.rowsNumber === 1 && prop_search
? `${pagination.rowsNumber} ` +
t('grid.found') +
' ' +
getLabelAreaMap(false)
: pagination.rowsNumber > 1 && prop_search
? `${pagination.rowsNumber} ${labelElemFind}` +
' ' +
getLabelAreaMap(false)
: ''
"
debounce="500"
:error-message="noresultLabel"
:error="getNumRecFromQuery() === 0 && !startsearch"
:label="hint ? hint : $t('grid.search')"
v-on:keyup.enter="doSearch"
>
<template v-slot:prepend>
<q-spinner-oval v-if="startsearch" color="primary" size="1em" />
<q-icon v-else name="search" />
</template>
<template v-slot:append>
<q-btn
v-if="showMap"
dense
flat
text-color="primary"
@click="gotoCurrentLocation"
icon="fas fa-crosshairs"
class="q-ml-sm"
></q-btn>
</template>
<template v-slot:after>
<q-select
v-if="prop_SortFieldsAvailable.length > 0"
:behavior="'menu'"
rounded
outlined
v-model="ordinam"
:options="prop_SortFieldsAvailable"
:label="$t('grid.order')"
emit-value
map-options
style="min-width: 120px"
>
</q-select>
<!-- Pulsante per ottenere la posizione GPS -->
<q-btn
label=""
color="primary"
@click="doSearch"
icon="fas fa-search"
></q-btn>
</template>
</q-input>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-model="visupagedialog"
transition-show="slide-up"
transition-hide="slide-down"
@hide="hidewindow"
:maximized="$q.screen.lt.sm"
:persistent="false"
:class="
'dialog_annunci ' +
($q.screen.lt.sm ? 'bottom-dialog' : ' right-align-dialog')
"
>
<CMyCardGrpPopup
v-if="mytable === shared_consts.TABLES_MYGROUPS"
:table="mytable"
:prop_myrec="myrecdialog"
>
</CMyCardGrpPopup>
<CMyCardCircuitPopup
v-else-if="mytable === shared_consts.TABLES_CIRCUITS"
:table="mytable"
:prop_myrec="myrecdialog"
>
</CMyCardCircuitPopup>
<!--<CMyCardService
v-else-if="shared_consts.TABLES_FAVORITE_BOOKMARK.includes(mytable)"
:table="mytable"
:idRec="myrecdialog._id"
>
</CMyCardService>-->
<CMyCardService
v-else-if="shared_consts.TABLES_FAVORITE_BOOKMARK.includes(mytable)"
:table="mytable"
:prop_myrec="myrecdialog"
:idRec="myIdRecDialog"
:showAnteprima="false"
@showInMap="showInMap"
>
</CMyCardService>
<CMyCardPopup v-else :table="mytable" :prop_myrec="myrecdialog">
</CMyCardPopup>
</q-dialog>
<div v-if="rowclicksel">
<CTitleBanner title="Record:"></CTitleBanner>
<div
class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
v-for="mycol in mycolumns"
:key="mycol.name"
>
<div v-if="showColCheck(mycol, tools.TIPOVIS_SHOW_RECORD, false)">
<div class="row items-center justify-center q-gutter-md q-ma-xs">
<div class="q-ma-xs">
<q-field
rounded
outlined
:bg-color="$q.dark.isActive ? '' : 'orange-3'"
dense
>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
{{ mycol.label }}
</div>
</template>
</q-field>
</div>
<div
class="q-ma-sm q-pa-sm colmodif col-grow popupedit"
@click="colclicksel = mycol"
>
<CMyPopupEdit
:table="mytable"
:canEdit="true"
:canModify="
tools.canModifyThisRec(rowclicksel, tablesel) || editOn
"
:disable="disabilita()"
:isInModif="mycol.isInModif"
view="field"
:mycol="mycol"
:showall="true"
:row="rowclicksel"
:tablesel="mycol.tablesel"
:field="mycol.field"
:subfield="mycol.subfield"
@save="SaveValdb"
@show="selItem(rowclicksel, mycol)"
@showandsave="showandsave"
@annulla="annulla"
@update_col="update_col"
>
</CMyPopupEdit>
</div>
</div>
</div>
</div>
</div>
<q-dialog
v-model="newRecordBool"
@hide="hidewindow"
:maximized="$q.screen.lt.sm"
permanent
>
<q-card class="dialog_card">
<q-bar dense class="bg-primary text-white">
Aggiungi {{ mytitle }}:
<q-space />
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-bar>
<q-card-section class="inset-shadow">
<div
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `"
v-for="col in mycolumns"
:key="col.name"
>
<!--<div class="text-center q-my-xs" v-if="(col.fieldtype === costanti.FieldType.separator)">
<q-btn color="primary" size="md" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
label="Campi Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<div
v-if="
showColCheck(
col,
tools.TIPOVIS_NEW_RECORD,
true,
0,
newRecord
) && col.foredit
"
>
<div class="">
<CMyPopupEdit
:table="mytable"
:canEdit="true"
:canModify="true"
:mycol="col"
v-model:row="newRecord"
:field="col.field"
:subfield="col.subfield"
:tablesel="col.tablesel"
:value_extra="getValueExtra(col, newRecord)"
:isInModif="true"
minuteinterval="1"
:visulabel="true"
:insertMode="true"
@save="SaveValue"
@show="selItem(newRecord, col)"
@showandsave="showandsave"
@update_col="update_col"
>
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn
:label="t('dialog.insert')"
color="primary"
@click="saveNewRecord"
></q-btn>
<q-btn
flat
:label="t('dialog.cancel')"
color="primary"
v-close-popup
@click="annulla"
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog
v-model="newRecordBoolOld"
@hide="hidewindow"
:maximized="$q.screen.lt.sm"
permanent
>
<q-card class="dialog_card">
<q-bar dense class="bg-primary text-white">
Nuovo {{ mytitle }}:
<q-space />
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-bar>
<q-card-section class="inset-shadow">
<div
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `"
v-for="col in mycolumns"
:key="col.name"
>
<!--<div class="text-center q-my-xs" v-if="(col.fieldtype === costanti.FieldType.separator)">
<q-btn color="primary" size="md" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
label="Campi Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<div
v-if="
showColCheck(
col,
tools.TIPOVIS_NEW_RECORD,
true,
0,
newRecord
) && col.foredit
"
>
<div class="">
<CMyPopupEdit
:table="mytable"
:canEdit="true"
:canModify="true"
:mycol="col"
v-model:row="newRecord"
:field="col.field"
:subfield="col.subfield"
:tablesel="col.tablesel"
:value_extra="getValueExtra(col, newRecord)"
:isInModif="true"
minuteinterval="1"
:visulabel="true"
:insertMode="true"
@save="SaveValue"
@show="selItem(newRecord, col)"
@showandsave="showandsave"
>
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn
:label="t('dialog.save')"
color="primary"
@click="saveNewRecord"
></q-btn>
<q-btn
flat
:label="t('dialog.cancel')"
color="primary"
v-close-popup
@click="annulla"
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog
v-model="editRecordBool"
@hide="hidewindow"
:maximized="$q.screen.lt.sm"
>
<q-card class="dialog_card">
<q-bar dense class="bg-primary text-white">
<span class="ellipsis">{{ recModif[col_title] }}</span>
<q-space />
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-bar>
<q-card-section class="inset-shadow">
<div v-for="col in mycolumns" :key="col.name">
<!--<div class="text-center q-my-xs" v-if="(col.fieldtype === costanti.FieldType.separator)">
<q-btn color="primary" size="md" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'"
label="Campi Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<div
v-if="
showColCheck(col, tools.TIPOVIS_EDIT_RECORD, false) &&
col.foredit
"
class="tdclass"
>
<div>
<CMyPopupEdit
:table="mytable"
:canEdit="true"
:canModify="
tools.canModifyThisRec(recModif, tablesel) || editOn
"
:tablesel="col.tablesel"
:mycol="col"
:isInModif="true"
v-model:row="recModif"
:field="col.field"
:subfield="col.subfield"
:value_extra="getValueExtra(col, recModif)"
minuteinterval="1"
@save="SaveValue"
@show="selItem(recModif, col, true)"
@showandsave="showandsave"
@update_col="update_col"
>
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn
:label="t('dialog.save')"
color="primary"
@click="saverecModif"
></q-btn>
<q-btn
flat
:label="t('dialog.cancel')"
color="primary"
@click="cancelrecModif"
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<span v-if="!hidetitleIfEmpty"> <br /></span>
</div>
<q-dialog v-model="showNotification" :maximized="$q.screen.lt.sm">
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title> Notifiche </q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<CNotifSettings> </CNotifSettings>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./CGridTableRec.ts">
</script>
<style lang="scss">
@import './CGridTableRec.scss';
</style>