Files
myprojplanet_vite/src/components/CGridTableRec/CGridTableRec.vue
paoloar77 bdfeb714d7 ver. 0.2.12
Sistemare i Gruppi : cardGruppo
2022-02-25 19:20:51 +01:00

650 lines
25 KiB
Vue
Executable File

<template>
<div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
<div class="centermydiv q-my-sm" style="text-align: center">
<q-btn
v-if="mytable && visButtRow()" 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-gutter-md q-ma-xs` + ` row`">
<div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
<q-space></q-space>
<div v-if="butt_modif_new">
<q-btn
v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable)" 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" rounded size="md" color="primary"
class="centermydiv"
label="Aggiungi"
:disable="loading"
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>
<q-table
: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"
:row-key="colkey"
:loading="loading"
@request="onRequest"
@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">
<span style="display: none">{{actual = null}}</span>
<q-select
v-if="tablesList"
v-model="tablesel"
rounded
outlined
dense
:options="tablesList"
:display-value="mytitle"
emit-value
@update:model-value="changeTable"
>
</q-select>
<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.getColByTable(mytable, item.key)"
v-if="(item.type === costanti.FieldType.select) || (item.type === costanti.FieldType.select_by_server)"
v-show="(item.filteradv && showfilteradv) || !item.filteradv"
:label="labelcombo(item)"
v-model:value="item.value"
@update:value="searchval(item.value, item.table)"
:addall="item.addall"
: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"
v-show="(item.filteradv && showfilteradv) || !item.filteradv"
:col="fieldsTable.getColByTable(mytable, item.key)"
:multiselect_by_server="true"
:label="labelcombo(item)"
v-model:arrvalue="item.arrvalue"
@update:arrvalue="searchval(item.arrvalue, item.table)"
:addall="item.addall"
: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-show="(item.filteradv && showfilteradv) || !item.filteradv"
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)"
: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 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"
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) "/>
</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)"
: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="showandsel">
</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
v-if="showType === costanti.SHOW_MYCARD || (myvertical !== costanti.VISUTABLE_USER_TABGROUP && myvertical === costanti.VISUTABLE_LISTA && shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel)) ">
<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>
</div>
</div>
<CMyRecGrpCard
v-if="tablesel === toolsext.TABMYGROUPS"
:table="tablesel"
:prop_myrec="props.row"
@cmdext="cmdExt"
>
</CMyRecGrpCard>
<CMyRecCard
v-else
:table="tablesel"
:prop_myrec="props.row"
@cmdext="cmdExt"
>
</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
:mycontact="props.row"
:visu="visufind"
:groupname="extrafield"
:labelextra="col_title ? props.row[col_title] : ''"
:labelFooter="col_footer ? getLabelFooterByRow(props.row) : ''"
>
</CMyUser>
<q-separator></q-separator>
</div>
</div>
<div
v-else-if="((showType === costanti.SHOW_GROUPINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) || ((myvertical === 2) && (tablesel === 'mygroups'))"
class="fill-all-width">
<div>
<CMyGroups
v-model="filtergrp"
:finder="false"
:mygrp="props.row"
:visu="costanti.FIND_GROUP"
/>
</div>
</div>
<div
v-else
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)" 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)"
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)"
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)"
: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="showandsel">
</CMyPopupEdit>
</div>
</div>
</q-item-section>
</q-item>
</div>
</q-list>
</q-card-section>
</q-card>
</div>
</template>
</q-table>
<q-dialog v-model="visupagedialog" @hide="hidewindow" :maximized="$q.screen.lt.sm">
<CMyCardGrpPopup
v-if="mytable === toolsext.TABMYGROUPS"
:table="mytable"
:prop_myrec="myrecdialog">
</CMyCardGrpPopup>
<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="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)"
:disable="disabilita()"
view="field"
:mycol="mycol"
:showall="true"
:row="rowclicksel"
:tablesel="mycol.tablesel"
:field="mycol.field"
:subfield="mycol.subfield"
@save="SaveValdb"
@show="selItem(rowclicksel, mycol)"
@showandsave="showandsel"
@annulla="annulla">
</CMyPopupEdit>
</div>
</div>
</div>
</div>
</div>
<q-dialog v-model="newRecordBool" @hide="hidewindow" :maximized="$q.screen.lt.sm">
<q-card class="dialog_card">
<q-bar dense class="bg-primary text-white">
Nuovo:
<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" class="newrec_fields">
<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="showandsel">
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn :label="$t('dialog.ok')" 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-else-if="showColCheck(col, tools.TIPOVIS_EDIT_RECORD, false) && col.foredit">
<div>
<CMyPopupEdit
:table="mytable"
:canEdit="true"
:canModify="tools.canModifyThisRec(recModif, tablesel)"
: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="showandsel">
</CMyPopupEdit>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<q-btn :label="$t('dialog.ok')" 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>
</div>
</template>
<script lang="ts" src="./CGridTableRec.ts">
</script>
<style lang="scss">
@import './CGridTableRec.scss';
</style>