Files
salvato.newfreeplanet/src/components/CBarSelection/CBarSelection.vue
2022-12-09 01:03:52 +01:00

234 lines
9.0 KiB
Vue
Executable File

<template>
<div
:class="$q.screen.lt.sm ? `` : `q-pa-xs`"
v-if="isfinishLoading && mycolumns"
>
<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 v-if="$q.screen.gt.xs" class="col-1">
<q-avatar @click="toHome" class="imglink">
<img
:src="tools.getimglogo()"
height="27"
alt="Immagine Logo"
/>
</q-avatar>
</div>
<div class="col-4">
<q-select
v-model="tablesel"
:options="optionsMainCards"
emit-value
borderless
map-options
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
@update:model-value="gotoPageSel"
>
<template v-slot:prepend>
<q-icon :name="iconsel" />
</template>
<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 && 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">
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="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"
>
</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"
>
<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>
</q-toolbar>
</q-header>
</div>
</q-slide-transition>
</div>
<div class="q-my-md">
<slot />
</div>
</q-layout>
</div>
</template>
<script lang="ts" src="./CBarSelection.ts">
</script>
<style lang="scss">
@import './CBarSelection.scss';
</style>