surya/myprojplanet_vite
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 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) => { const labelcombo = computed(() => (item: any) => {
let lab = item.label let lab = item.label

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

@@ -3,234 +3,210 @@
:class="$q.screen.lt.sm ? `` : `q-pa-xs`" :class="$q.screen.lt.sm ? `` : `q-pa-xs`"
v-if="isfinishLoading && mycolumns" v-if="isfinishLoading && mycolumns"
> >
<div <q-layout view="hHh lpR fFf" :class="`shadow-2 rounded-borders `">
class="centermydiv q-mx-sm" <div>
:style="`text-align: center; background-color: ${mycolor}`" <div v-if="prop_search || canEdit" class="q-my-xs text-right">
></div> <q-btn
<div> size="sm"
<div v-if="prop_search || canEdit" class="q-my-xs text-right"> dense
<q-btn icon="fas fa-filter"
size="sm" :label="$t('grid.showfilters')"
dense @click="showfilter = !showfilter"
icon="fas fa-filter" ></q-btn>
:label="$t('grid.showfilters')" </div>
@click="showfilter = !showfilter" <q-slide-transition>
></q-btn> <div class="row no-wrap shadow-1">
</div> <q-header elevated reveal>
<q-slide-transition> <q-toolbar class="glossy" style="">
<div class="row no-wrap shadow-1"> <div class="col-3">
<q-header elevated> <q-select
<q-toolbar class="glossy" style=""> v-model="tablesel"
<div class="col-3"> :options="optionsMainCards"
<q-select emit-value
v-model="tablesel" borderless
:options="optionsMainCards" map-options
emit-value behavior="menu"
borderless @update:model-value="gotoPageSel"
map-options >
behavior="menu" <template v-slot:option="scope">
@update:model-value="gotoPageSel" <q-item v-bind="scope.itemProps">
> <q-item-section avatar>
<template v-slot:option="scope"> <q-icon :name="scope.opt.icon" />
<q-item v-bind="scope.itemProps"> </q-item-section>
<q-item-section avatar> <q-item-section>
<q-icon :name="scope.opt.icon" /> <q-item-label>{{ scope.opt.label }}</q-item-label>
</q-item-section> <!--<q-item-label caption>{{
<q-item-section>
<q-item-label>{{ scope.opt.label }}</q-item-label>
<!--<q-item-label caption>{{
scope.opt.description scope.opt.description
}}</q-item-label>--> }}</q-item-label>-->
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
<q-space /> <q-space />
<q-btn <q-btn
size="sm"
size="sm" class="col-1 q-mx-xs"
class="col-1 q-mx-xs" icon="fas fa-plus"
icon="fas fa-plus" @click="createNewRecordDialog"
@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
"
> >
</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}} item: {{ item}}
</div>--> </div>-->
<CMySelect <CMySelect
v-if="item.type === costanti.FieldType.multiselect_by_server" v-if="
:col="fieldsTable.getColByColumns(mycolumns, item.key)" item.type === costanti.FieldType.multiselect_by_server
:multiselect_by_server="true" "
:label="labelcombo(item)" :col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-model:arrvalue="item.arrvalue" :multiselect_by_server="true"
@update:arrvalue="searchval(item.arrvalue, item.table)" :label="labelcombo(item)"
:addall="item.addall" v-model:arrvalue="item.arrvalue"
:addnone="item.addnone" @update:arrvalue="searchval(item.arrvalue, item.table)"
:addlast="true" :addall="item.addall"
:tablesel="item.tablesel" :addnone="item.addnone"
:pickup="true" :addlast="true"
:param1="item.param1" :tablesel="item.tablesel"
label-color="primary" :pickup="true"
class="combowidth" :param1="item.param1"
color="primary" label-color="primary"
:icon_alternative="item.icon" class="comboselector"
:optval="fieldsTable.getKeyByTable(item.table)" color="primary"
:optlab="fieldsTable.getLabelByTable(item.table)" :icon_alternative="item.icon"
:filter="item.filter" :optval="fieldsTable.getKeyByTable(item.table)"
:filter_extra="item.filter_extra" :optlab="fieldsTable.getLabelByTable(item.table)"
:options="valoriopt(item, false)" :filter="item.filter"
:useinput="true" :filter_extra="item.filter_extra"
> :options="valoriopt(item, false)"
</CMySelect> :useinput="true"
<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"
> >
<div </CMySelect>
v-if="
scope.opt[fieldsTable.getLabelByTable(item.table)] || <q-select
(scope.opt && checkIfShowRec(scope.opt)) 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 <div
removable v-if="
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[fieldsTable.getLabelByTable(item.table)] ||
scope.opt (scope.opt && checkIfShowRec(scope.opt))
}} "
</q-chip> >
</div> <q-chip
</template> removable
<template dense
v-slot:option="{ itemProps, opt, selected, toggleOption }" @remove="scope.removeAtIndex(scope.index)"
> v-if="checkIfShowRec(scope.opt)"
<q-item v-bind="itemProps"> color="white"
<q-item-section> text-color="mycol"
<q-item-label>{{ class="q-my-none q-ml-xs q-mr-none"
opt[fieldsTable.getLabelByTable(item.table)] >
}}</q-item-label> <q-avatar
</q-item-section> color="primary"
<q-item-section side> text-color="white"
<q-toggle :icon="item.icon"
:model-value="selected" size="12px"
@update:model-value="toggleOption(opt)" />
/> {{
</q-item-section> scope.opt[
</q-item> fieldsTable.getLabelByTable(item.table)
</template> ] || scope.opt
</q-select> }}
</div> </q-chip>
</q-toolbar> </div>
</q-header> </template>
</div> <template
</q-slide-transition> v-slot:option="{ itemProps, opt, selected, toggleOption }"
>
<div <q-item v-bind="itemProps">
v-if="prop_search || canEdit" <q-item-section>
class="row justify-center vertical-middle" <q-item-label>{{
> opt[fieldsTable.getLabelByTable(item.table)]
<div v-if="prop_search" class="q-mr-sm full-width"> }}</q-item-label>
<q-input </q-item-section>
v-model="search" <q-item-section side>
filled <q-toggle
dense :model-value="selected"
type="search" @update:model-value="toggleOption(opt)"
debounce="500" />
:hint="hint" </q-item-section>
label="Cerca" </q-item>
v-on:keyup.enter="doSearch" </template>
> </q-select>
<template v-slot:prepend> </div>
<q-icon name="search" /> </q-toolbar>
</template> </q-header>
<template v-if="searchList" v-slot:after> </div>
<q-btn </q-slide-transition>
dense
label=""
color="primary"
@click="showfilter = !showfilter"
icon="fas fa-filter"
></q-btn>
</template>
</q-input>
</div>
<q-space></q-space>
</div> </div>
</div> <div class="q-my-md">
<slot />
</div>
</q-layout>
</div> </div>
</template> </template>
<script lang="ts" src="./CBarSelection.ts"> <script lang="ts" src="./CBarSelection.ts">

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

@@ -1,79 +1,79 @@
<template> <template>
<CTitlePage :ind="ind" :table="table"/> <CTitlePage :ind="ind" :table="table">
<div class="bi-border-all"> <div class="bi-border-all">
<div class="q-ma-xs q-gutter-xs"> <div class="q-ma-xs q-gutter-xs">
<div v-if="showFilterPersonal" class="text-center"> <div v-if="showFilterPersonal" class="text-center">
<q-btn-toggle <q-btn-toggle
v-model="myrecfiltertoggle" v-model="myrecfiltertoggle"
push push
glossy glossy
toggle-color="primary" toggle-color="primary"
:options="myoptions" :options="myoptions"
/> />
</div> </div>
<div v-if="false" class="q-mr-sm"> <div v-if="false" class="q-mr-sm">
<q-input <q-input
v-model="search" v-model="search"
filled filled
dense dense
type="search" type="search"
debounce="500" debounce="500"
:hint="t('finder.search_skill')" :hint="t('finder.search_skill')"
v-on:keyup.enter="doSearch" 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> </CGridTableRec>
<q-btn
dense
label=""
color="primary"
@click="doSearch"
icon="search"
></q-btn>
</template>
</q-input>
</div> </div>
<CGridTableRec <q-page-scroller
v-if="searchList.length > 0" position="bottom-right"
:prop_mytable="table" :scroll-offset="850"
prop_mytitle="" :offset="[18, 18]"
:prop_mycolumns="col" style="opacity: 0.3"
: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()"
> >
</CGridTableRec> <q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</div> </div>
</CTitlePage>
<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>
</template> </template>
<script lang="ts" src="./CFinder.ts"> <script lang="ts" src="./CFinder.ts">

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

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

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

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

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

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

8
src/css/app.scss
View File

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