surya/salvato.newfreeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Bar Selector City at the Top !

Browse Source
This commit is contained in:
Surya Paolo
2022-12-02 10:44:57 +01:00
parent 07f5f1c4c9
commit 7deb7b6414
8 changed files with 328 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CBarSelection/CBarSelection.ts
View File

@@ -136,7 +136,13 @@ export default defineComponent({
tablesel.value = props.table
})
watch(() => globalStore.myselector.data, (newval, oldval) => {
const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
if (rec) {
rec.value = globalStore.myselector.data
}
})
const labelcombo = computed(() => (item: any) => {
let lab = item.label

410
src/components/CBarSelection/CBarSelection.vue
View File

@@ -3,234 +3,210 @@
:class="$q.screen.lt.sm ? `` : `q-pa-xs`"
v-if="isfinishLoading && mycolumns"
>
<div
class="centermydiv q-mx-sm"
:style="`text-align: center; background-color: ${mycolor}`"
></div>
<div>
<div v-if="prop_search || canEdit" 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 class="row no-wrap shadow-1">
<q-header elevated>
<q-toolbar class="glossy" style="">
<div class="col-3">
<q-select
v-model="tablesel"
:options="optionsMainCards"
emit-value
borderless
map-options
behavior="menu"
@update:model-value="gotoPageSel"
>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<q-icon :name="scope.opt.icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ scope.opt.label }}</q-item-label>
<!--<q-item-label caption>{{
<q-layout view="hHh lpR fFf" :class="`shadow-2 rounded-borders `">
<div>
<div v-if="prop_search || canEdit" 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 class="row no-wrap shadow-1">
<q-header elevated reveal>
<q-toolbar class="glossy" style="">
<div class="col-3">
<q-select
v-model="tablesel"
:options="optionsMainCards"
emit-value
borderless
map-options
behavior="menu"
@update:model-value="gotoPageSel"
>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<q-icon :name="scope.opt.icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ scope.opt.label }}</q-item-label>
<!--<q-item-label caption>{{
scope.opt.description
}}</q-item-label>-->
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<q-btn
size="sm"
class="col-1 q-mx-xs"
icon="fas fa-plus"
@click="createNewRecordDialog"
>
</q-btn>
<div class="col" 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
"
:label="item.value ? '' : labelcombo(item)"
v-model:value="item.value"
@update:value="searchval(item.value, item.table)"
:addall="item.addall"
:addnone="item.addnone"
:addlast="true"
:tablesel="
item.type === costanti.FieldType.select_by_server
? item.tablesel
: ''
"
:pickup="item.type === costanti.FieldType.select_by_server"
label-color="white"
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
"
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<q-space />
<q-btn
size="sm"
class="col-1 q-mx-xs"
icon="fas fa-plus"
@click="createNewRecordDialog"
>
</CMySelect>
</q-btn>
<div
class="col"
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
"
:label="item.value && (item.value._id > 0) ? undefined : labelcombo(item)"
v-model:value="item.value"
@update:value="searchval(item.value, item.table)"
:addall="item.addall"
:addnone="item.addnone"
:addlast="true"
:tablesel="
item.type === costanti.FieldType.select_by_server
? item.tablesel
: ''
"
:pickup="item.type === costanti.FieldType.select_by_server"
label-color="white"
myclass="comboselector"
color="primary"
:dense="true"
: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"
style="font-size: 0.8rem !important;"
:useinput="
item.useinput &&
item.type !== costanti.FieldType.select_by_server
"
>
</CMySelect>
<!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
<!--<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"
:addlast="true"
: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
: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"
<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"
:addlast="true"
:tablesel="item.tablesel"
:pickup="true"
:param1="item.param1"
label-color="primary"
class="comboselector"
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"
>
<div
v-if="
scope.opt[fieldsTable.getLabelByTable(item.table)] ||
(scope.opt && checkIfShowRec(scope.opt))
"
</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
:useinput="item.useinput"
:options="valoriopt(item, item.addall, item.addnone)"
:filter="item.filter"
class="comboselector"
: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"
>
<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"
/>
{{
<div
v-if="
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>
</div>
</q-toolbar>
</q-header>
</div>
</q-slide-transition>
<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:prepend>
<q-icon name="search" />
</template>
<template v-if="searchList" v-slot:after>
<q-btn
dense
label=""
color="primary"
@click="showfilter = !showfilter"
icon="fas fa-filter"
></q-btn>
</template>
</q-input>
</div>
<q-space></q-space>
(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>
</div>
</q-toolbar>
</q-header>
</div>
</q-slide-transition>
</div>
</div>
<div class="q-my-md">
<slot />
</div>
</q-layout>
</div>
</template>
<script lang="ts" src="./CBarSelection.ts">

140
src/components/CFinder/CFinder.vue
View File

@@ -1,79 +1,79 @@
<template>
<CTitlePage :ind="ind" :table="table"/>
<div class="bi-border-all">
<div class="q-ma-xs q-gutter-xs">
<div v-if="showFilterPersonal" class="text-center">
<q-btn-toggle
v-model="myrecfiltertoggle"
push
glossy
toggle-color="primary"
:options="myoptions"
/>
</div>
<div v-if="false" class="q-mr-sm">
<q-input
v-model="search"
filled
dense
type="search"
debounce="500"
:hint="t('finder.search_skill')"
v-on:keyup.enter="doSearch"
<CTitlePage :ind="ind" :table="table">
<div class="bi-border-all">
<div class="q-ma-xs q-gutter-xs">
<div v-if="showFilterPersonal" class="text-center">
<q-btn-toggle
v-model="myrecfiltertoggle"
push
glossy
toggle-color="primary"
:options="myoptions"
/>
</div>
<div v-if="false" class="q-mr-sm">
<q-input
v-model="search"
filled
dense
type="search"
debounce="500"
:hint="t('finder.search_skill')"
v-on:keyup.enter="doSearch"
>
<template v-slot:after>
<q-btn
dense
label=""
color="primary"
@click="doSearch"
icon="search"
></q-btn>
</template>
</q-input>
</div>
<CGridTableRec
v-if="searchList.length > 0"
:prop_mytable="table"
prop_mytitle=""
:prop_mycolumns="col"
:prop_colkey="prop_colkey"
:col_title="col_title"
:col_footer="col_footer"
:col_tabfooter="col_tabfooter"
:vertical="costanti.VISUTABLE_LISTA"
:prop_pagination="mypagination"
:showType="showType"
:hint="hint"
:nodataLabel="noMsgRecord"
:prop_search="true"
:finder="true"
:choose_visutype="visuType"
:butt_modif_new="true && !noButtAdd"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:defaultnewrec="getdefaultnewrec"
:selector="selector"
labelBtnAddRow="NONE"
:labelBtnAddExtra="noButtAdd ? `` : ``"
:extraparams="extraparams()"
>
<template v-slot:after>
<q-btn
dense
label=""
color="primary"
@click="doSearch"
icon="search"
></q-btn>
</template>
</q-input>
</CGridTableRec>
</div>
<CGridTableRec
v-if="searchList.length > 0"
:prop_mytable="table"
prop_mytitle=""
:prop_mycolumns="col"
:prop_colkey="prop_colkey"
:col_title="col_title"
:col_footer="col_footer"
:col_tabfooter="col_tabfooter"
:vertical="costanti.VISUTABLE_LISTA"
:prop_pagination="mypagination"
:showType="showType"
:hint="hint"
:nodataLabel="noMsgRecord"
:prop_search="true"
:finder="true"
:choose_visutype="visuType"
:butt_modif_new="true && !noButtAdd"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:defaultnewrec="getdefaultnewrec"
:selector="selector"
labelBtnAddRow="NONE"
:labelBtnAddExtra="noButtAdd ? `` : ``"
:extraparams="extraparams()"
<q-page-scroller
position="bottom-right"
:scroll-offset="850"
:offset="[18, 18]"
style="opacity: 0.3"
>
</CGridTableRec>
<q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</div>
<q-page-scroller
position="bottom-right"
:scroll-offset="850"
:offset="[18, 18]"
style="opacity: 0.3"
>
<q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</div>
</CTitlePage>
</template>
<script lang="ts" src="./CFinder.ts">

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

@@ -247,9 +247,11 @@ export default defineComponent({
default: '',
},
},
components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
components: {
CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
CMyRecCircuitCard },
CMyRecCircuitCard
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
@@ -352,13 +354,24 @@ export default defineComponent({
const rec = searchList.value.find((myrec) => myrec.table === globalStore.myselector.table) // check if exist
if (rec) {
rec.value = globalStore.myselector.data
// Reset others tables
const rec2 = searchList.value.find((myrec) => myrec.table === toolsext.TABREGIONS) // check if exist
if (rec2) {
rec2.value = costanti.FILTER_TUTTI
}
const rec3 = searchList.value.find((myrec) => myrec.table === toolsext.TABPROVINCE) // check if exist
if (rec3) {
rec3.value = costanti.FILTER_TUTTI
}
}
if (value) {
refresh()
}
},
)
)
watch(() => searchList.value, (to: any, from: any) => {
@@ -454,9 +467,10 @@ export default defineComponent({
if (arrvalues)
trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
}
if (valsaved && trovato)
if (valsaved && trovato) {
item.value = valsaved
else {
globalStore.myselector.data = item.value
} else {
if (arrvalues) {
item.value = costanti.FILTER_TUTTI
}
@@ -478,6 +492,11 @@ export default defineComponent({
item.value = costanti.FILTER_TUTTI
}
}
if (item.value === costanti.FILTER_TUTTI) {
globalStore.myselector.data = { _id: 0, comune: '' }
} else {
globalStore.myselector.data = item.value
}
}
}
@@ -504,6 +523,22 @@ export default defineComponent({
tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
}
// setCategBySector('sectorgoods', table, newval)
} else if (table === toolsext.TABCITIES) {
const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
if (rec) {
if (rec.value === costanti.FILTER_TUTTI) {
globalStore.myselector.data = { _id: 0, comune: '' }
} else {
globalStore.myselector.data = rec.value
}
}
} else if (table === toolsext.TABPROVINCE) {
const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABPROVINCE) // check if exist
if (rec) {
globalStore.myselector.data = { _id: 0, comune: '' }
}
}
@@ -1004,8 +1039,8 @@ export default defineComponent({
onUpdateData(0,
{
pagination: pagination.value
}, done)
pagination: pagination.value
}, done)
}
@@ -1944,7 +1979,7 @@ export default defineComponent({
return actualDate.value
}
function onLoadScroll (index: number, done: any) {
function onLoadScroll(index: number, done: any) {
if (index > 1) {
// console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber)
if (numRecLoaded.value < pagination.value.rowsNumber || (pagination.value.rowsNumber <= 0 && clickbuttsearch.value)) {
@@ -1962,7 +1997,7 @@ export default defineComponent({
}
}
function wrapCsvValue (val: any, formatFn?: any, row?: any, col?: IColGridTable) {
function wrapCsvValue(val: any, formatFn?: any, row?: any, col?: IColGridTable) {
let formatted = formatFn !== void 0
? formatFn(val, row)
: val
@@ -1992,7 +2027,7 @@ export default defineComponent({
}
// onMounted(mounted)
function exportTable () {
function exportTable() {
// console.log('row', serverData.value)
// console.log('mycolumns.value', mycolumns.value)
// naive encoding to csv format
@@ -2005,7 +2040,7 @@ export default defineComponent({
row,
col
)).join(','))
).join('\r\n')
).join('\r\n')
const status = exportFile(
'export-' + mytable.value + '_' + tools.getstrYYMMDDHHMMDateTime(tools.getDateNow()) + '.csv',

3
src/components/CMySelect/CMySelect.ts
View File

@@ -27,7 +27,8 @@ export default defineComponent({
value: [String, Number, Object],
label: {
type: String,
required: true,
required: false,
default: undefined,
},
myclass: {
type: String,

8
src/components/CMySelect/CMySelect.vue
View File

@@ -76,26 +76,24 @@
v-if="pickup"
:model-value="myvalue"
@update:model-value="changeval"
clearable
rounded
outlined
:dense="dense"
options-dense
use-input
:label="label"
input-debounce="300"
:dense="dense"
:input-class="myclass"
:options="valori"
:option-value="optval"
:option-label="optlab"
map-options
@filter="filterFn"
:label="label"
options-selected-class="text-deep-blue"
v-bind="$attrs"
class="combowidth"
>
<template v-if="getIcon()" v-slot:prepend>
<q-icon :name="getIcon()" />
<q-icon size="xs" :name="getIcon()" />
</template>
<template v-slot:no-option>
<q-item>

1
src/components/CTitlePage/CTitlePage.vue
View File

@@ -22,6 +22,7 @@
:prop_search="false"
:table="table"
>
<slot />
</CBarSelection>
</div>
</template>

8
src/css/app.scss
View File

@@ -1003,7 +1003,7 @@ h3 {
place-content: center;
}
.combowidth {
.combowidth, .comboselector {
min-width: 190px;
@media (max-width: 450px) {
@@ -1012,6 +1012,12 @@ h3 {
}
}
.comboselector {
font-size: 0.85rem !important;
flex-wrap: nowrap;
white-space: nowrap;
}
.myimg-view {
border-radius: 5px !important;
height: 90px;