Added Bar Selector City at the Top !

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

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

View File

@@ -3,10 +3,7 @@
: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>
<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
@@ -19,7 +16,7 @@
</div>
<q-slide-transition>
<div class="row no-wrap shadow-1">
<q-header elevated>
<q-header elevated reveal>
<q-toolbar class="glossy" style="">
<div class="col-3">
<q-select
@@ -48,21 +45,24 @@
</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">
<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)"
: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"
@@ -75,14 +75,16 @@
"
:pickup="item.type === costanti.FieldType.select_by_server"
label-color="white"
class="combowidth"
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
@@ -95,7 +97,9 @@
</div>-->
<CMySelect
v-if="item.type === costanti.FieldType.multiselect_by_server"
v-if="
item.type === costanti.FieldType.multiselect_by_server
"
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
:multiselect_by_server="true"
:label="labelcombo(item)"
@@ -108,7 +112,7 @@
:pickup="true"
:param1="item.param1"
label-color="primary"
class="combowidth"
class="comboselector"
color="primary"
:icon_alternative="item.icon"
:optval="fieldsTable.getKeyByTable(item.table)"
@@ -136,7 +140,7 @@
:useinput="item.useinput"
:options="valoriopt(item, item.addall, item.addnone)"
:filter="item.filter"
class="combowidth"
class="comboselector"
:option-value="fieldsTable.getKeyByTable(item.table)"
>
<template v-if="item.icon" v-slot:prepend>
@@ -168,8 +172,9 @@
size="12px"
/>
{{
scope.opt[fieldsTable.getLabelByTable(item.table)] ||
scope.opt
scope.opt[
fieldsTable.getLabelByTable(item.table)
] || scope.opt
}}
</q-chip>
</div>
@@ -197,40 +202,11 @@
</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>
</div>
<div class="q-my-md">
<slot />
</div>
</q-layout>
</div>
</template>
<script lang="ts" src="./CBarSelection.ts">

View File

@@ -1,5 +1,5 @@
<template>
<CTitlePage :ind="ind" :table="table"/>
<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">
@@ -64,7 +64,6 @@
</CGridTableRec>
</div>
<q-page-scroller
position="bottom-right"
:scroll-offset="850"
@@ -74,6 +73,7 @@
<q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</div>
</CTitlePage>
</template>
<script lang="ts" src="./CFinder.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,6 +354,17 @@ 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) {
@@ -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: '' }
}
}
@@ -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

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,

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>

View File

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

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;