FILTRO CITTA Sopra ogni pagina !
This commit is contained in:
Surya Paolo
250
src/components/CBarSelection/CBarSelection.vue
Executable file
250
src/components/CBarSelection/CBarSelection.vue
Executable file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div
|
||||
: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}`"
|
||||
>
|
||||
<q-btn
|
||||
v-if="table && visButtRow()"
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
size="lg"
|
||||
:label="getlabelAddRow()"
|
||||
@click="createNewRecordDialog"
|
||||
></q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="prop_search || canEdit" class="q-my-xs text-right">
|
||||
<q-btn
|
||||
size="sm"
|
||||
dense
|
||||
icon="fas fa-filter"
|
||||
:label="!showfilter ? $t('grid.showfilters') : $t('grid.hidefilters')"
|
||||
@click="showfilter = !showfilter"
|
||||
></q-btn>
|
||||
</div>
|
||||
<q-slide-transition>
|
||||
<div v-show="true">
|
||||
<div v-show="searchList" class="barselection">
|
||||
<div class="myitem myitem-0">
|
||||
<q-icon :name="myicon" size="xs" />
|
||||
</div>
|
||||
<div class="myitem myitem-1 mybanner">
|
||||
<q-select
|
||||
filled
|
||||
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>
|
||||
|
||||
<div
|
||||
class="myitem myitem-2"
|
||||
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="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="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"
|
||||
: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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./CBarSelection.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './CBarSelection.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user