FILTRO CITTA Sopra ogni pagina !
This commit is contained in:
Surya Paolo
72
src/components/CBarSelection/CBarSelection.scss
Executable file
72
src/components/CBarSelection/CBarSelection.scss
Executable file
@@ -0,0 +1,72 @@
|
||||
.colmodif {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coldate {
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.tdclass, .trclass{
|
||||
min-height: 20px !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.q-table td {
|
||||
padding-left: 1px;
|
||||
padding-right: 2px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
&__title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.q-table {
|
||||
&__col {
|
||||
font-size: 1rem;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.newrec_fields{
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.riduci_pad {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px !important;
|
||||
}
|
||||
|
||||
|
||||
.q-table__top{
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.barselection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.myitem {
|
||||
padding: 0px 6px 0px 6px !important;
|
||||
}
|
||||
|
||||
.myitem-0 {
|
||||
flex-grow: 0;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.myitem-1 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.myitem-2 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
334
src/components/CBarSelection/CBarSelection.ts
Executable file
334
src/components/CBarSelection/CBarSelection.ts
Executable file
@@ -0,0 +1,334 @@
|
||||
import { inject, defineComponent, PropType, ref, watch, toRef, onMounted, toRefs, computed } from 'vue'
|
||||
import { useI18n } from '@src/boot/i18n'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
|
||||
import { fieldsTable } from '@store/Modules/fieldsTable'
|
||||
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
|
||||
import {
|
||||
IColGridTable,
|
||||
IFilter,
|
||||
ITableRec,
|
||||
ISearchList,
|
||||
IPagination,
|
||||
IParamDialog,
|
||||
IMySkill
|
||||
} from 'model'
|
||||
import { lists } from '@store/Modules/lists'
|
||||
import { IParamsQuery } from 'model'
|
||||
import { CMyPopupEdit } from '../CMyPopupEdit'
|
||||
import { CMyFriends } from '../CMyFriends'
|
||||
import { CMyUser } from '../CMyUser'
|
||||
import { CMyGroups } from '../CMyGroups'
|
||||
import { CMyFieldDb } from '../CMyFieldDb'
|
||||
import { CMyRecCard } from '../CMyRecCard'
|
||||
import { CMyRecGrpCard } from '../CMyRecGrpCard'
|
||||
import { CMyRecCircuitCard } from '../CMyRecCircuitCard'
|
||||
import { CMySelect } from '../CMySelect'
|
||||
import { CTitleBanner } from '../CTitleBanner'
|
||||
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
import { useQuasar, exportFile } from 'quasar'
|
||||
import { costanti } from '@costanti'
|
||||
import translate from '@/globalroutines/util'
|
||||
import { toolsext } from '@store/Modules/toolsext'
|
||||
import { CMyCardPopup } from '@/components/CMyCardPopup'
|
||||
import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
|
||||
import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CBarSelection',
|
||||
props: {
|
||||
table: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
prop_search: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
mytitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
myicon: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
mycolor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'Cerca',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
|
||||
CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
|
||||
CMyRecCircuitCard
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const globalStore = useGlobalStore()
|
||||
const isfinishLoading = computed(() => globalStore.finishLoading)
|
||||
|
||||
const $router = useRouter()
|
||||
|
||||
const search = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
const visupagedialog = ref(false)
|
||||
const myrecdialog = ref(null)
|
||||
|
||||
const myinfscroll = ref(null)
|
||||
|
||||
const serverData: any = ref([])
|
||||
const numRecLoaded = ref(0)
|
||||
const changetable = ref(false)
|
||||
const searchList = ref([] as ISearchList[])
|
||||
|
||||
const actual = ''
|
||||
|
||||
const tablesel = ref('')
|
||||
const myfilter = ref('')
|
||||
const myfilterand: any = ref([])
|
||||
let rowsel: any = {}
|
||||
const dark = true
|
||||
const canEdit = ref(false)
|
||||
const optionsMainCards = ref()
|
||||
|
||||
let returnedCount = 0
|
||||
const colVisib: any = ref([])
|
||||
const colExtra: any = ref([])
|
||||
const actualDate: any = ref(null as any)
|
||||
|
||||
const rowclicksel = ref(null as any)
|
||||
const colclicksel = ref(null)
|
||||
|
||||
const selector = inject('selector', {})
|
||||
const showfilter = ref(false) // filtri avanzati
|
||||
|
||||
const filter = ref(0)
|
||||
const filtergrp = ref(costanti.MY_GROUPS)
|
||||
|
||||
const mycolumns = ref([])
|
||||
|
||||
const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
|
||||
// console.log('valoriopt', item.table)
|
||||
return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
|
||||
})
|
||||
|
||||
watch(() => props.table, (newval, oldval) => {
|
||||
tablesel.value = props.table
|
||||
})
|
||||
|
||||
|
||||
|
||||
const labelcombo = computed(() => (item: any) => {
|
||||
let lab = item.label
|
||||
if (item.showcount)
|
||||
lab += ' (' + valoriopt.value(item, false, false).length + ')'
|
||||
return lab
|
||||
})
|
||||
|
||||
const myselector = computed({
|
||||
get: () => globalStore.myselector,
|
||||
set: val => {
|
||||
globalStore.myselector = val
|
||||
},
|
||||
})
|
||||
|
||||
function refresh() {
|
||||
//
|
||||
// emit('updatesearch', )
|
||||
}
|
||||
|
||||
function setProvinceByRegion(tableprov: string, tabregion: string, newval: any) {
|
||||
|
||||
const recRegion = searchList.value.find((rec) => rec.table === tabregion)
|
||||
if (recRegion)
|
||||
tools.setCookie(tools.COOK_SEARCH + tabregion, newval)
|
||||
|
||||
for (const item of searchList.value) {
|
||||
if (item.table === tableprov) {
|
||||
const valsaved = tools.getCookie(tools.COOK_SEARCH + tableprov + '_' + newval, costanti.FILTER_TUTTI)
|
||||
const rec = searchList.value.find((myrec) => myrec.table === tableprov) // check if exist
|
||||
let trovato = false
|
||||
let arrvalues = []
|
||||
if (rec) {
|
||||
arrvalues = valoriopt.value(rec.value, false, false)
|
||||
if (arrvalues)
|
||||
trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
|
||||
}
|
||||
if (valsaved && trovato)
|
||||
item.value = valsaved
|
||||
else {
|
||||
if (arrvalues) {
|
||||
item.value = costanti.FILTER_TUTTI
|
||||
}
|
||||
}
|
||||
} else if (item.table === toolsext.TABCITIES) {
|
||||
const valsaved = tools.getCookie(tools.COOK_SEARCH + toolsext.TABCITIES + '_' + newval, costanti.FILTER_TUTTI)
|
||||
const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
|
||||
let trovato = false
|
||||
let arrvalues = []
|
||||
if (rec) {
|
||||
arrvalues = valoriopt.value(rec.value, false, false)
|
||||
if (arrvalues)
|
||||
trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
|
||||
}
|
||||
if (valsaved && trovato)
|
||||
item.value = valsaved
|
||||
else {
|
||||
if (arrvalues) {
|
||||
item.value = costanti.FILTER_TUTTI
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function searchval(newval: any, table: any) {
|
||||
// console.log('REFRR searchval', newval, table)
|
||||
|
||||
globalStore.myselector = { table, data: newval }
|
||||
// console.log('globalStore.myselector', globalStore.myselector)
|
||||
|
||||
tools.setCookie(tools.COOK_SEARCH + table, newval)
|
||||
|
||||
if (table === toolsext.TABREGIONS) {
|
||||
setProvinceByRegion(toolsext.TABPROVINCE, table, newval)
|
||||
} else if (table === toolsext.TABGOODS) {
|
||||
const recSector = searchList.value.find((rec) => rec.table === toolsext.TABSECTORGOODS)
|
||||
if (recSector) {
|
||||
tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
|
||||
}
|
||||
// setCategBySector('sectorgoods', table, newval)
|
||||
}
|
||||
|
||||
|
||||
refresh()
|
||||
}
|
||||
|
||||
function getRowsNumberCount() {
|
||||
|
||||
return returnedCount
|
||||
}
|
||||
|
||||
|
||||
function created() {
|
||||
//
|
||||
|
||||
}
|
||||
|
||||
function doSearch() {
|
||||
// console.log('REFRR - doSearch')
|
||||
refresh()
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
|
||||
optionsMainCards.value = []
|
||||
let obj = { label: '', value: '', icon: '' }
|
||||
for (let i = 0; i < costanti.MAINCARDS.length - 1; i++) {
|
||||
let rec: any = costanti.MAINCARDS[i]
|
||||
if (rec.table) {
|
||||
obj.label = rec.title
|
||||
obj.value = rec.table
|
||||
obj.icon = rec.icon
|
||||
optionsMainCards.value.push({...obj})
|
||||
}
|
||||
}
|
||||
|
||||
tablesel.value = props.table
|
||||
|
||||
console.log(' . TABLE =', props.table)
|
||||
mycolumns.value = fieldsTable.getArrColsByTable(props.table)
|
||||
|
||||
searchList.value = [
|
||||
{
|
||||
label: 'Comune',
|
||||
table: 'cities',
|
||||
key: 'idCity',
|
||||
type: costanti.FieldType.select_by_server,
|
||||
value: tools.getCookie(tools.COOK_SEARCH + 'cities', costanti.FILTER_TUTTI),
|
||||
addall: true,
|
||||
arrvalue: [],
|
||||
useinput: true,
|
||||
filter: null,
|
||||
tablesel: 'cities',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
function visButtRow() {
|
||||
return false
|
||||
}
|
||||
|
||||
function gotoPageSel() {
|
||||
const rec = costanti.MAINCARDS.find((rec: any) => rec.table === tablesel.value)
|
||||
if (rec) {
|
||||
$router.push(rec.to)
|
||||
}
|
||||
}
|
||||
|
||||
created()
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
isfinishLoading,
|
||||
search,
|
||||
canEdit,
|
||||
rowclicksel,
|
||||
colVisib,
|
||||
colExtra,
|
||||
colclicksel,
|
||||
loading,
|
||||
serverData,
|
||||
myfilter,
|
||||
lists,
|
||||
myfilterand,
|
||||
tools,
|
||||
costanti,
|
||||
toolsext,
|
||||
fieldsTable,
|
||||
globalStore,
|
||||
searchList,
|
||||
searchval,
|
||||
valoriopt,
|
||||
labelcombo,
|
||||
filter,
|
||||
filtergrp,
|
||||
shared_consts,
|
||||
showfilter,
|
||||
visupagedialog,
|
||||
myrecdialog,
|
||||
actualDate,
|
||||
actual,
|
||||
numRecLoaded,
|
||||
myinfscroll,
|
||||
t,
|
||||
mycolumns,
|
||||
visButtRow,
|
||||
doSearch,
|
||||
myselector,
|
||||
optionsMainCards,
|
||||
tablesel,
|
||||
gotoPageSel,
|
||||
}
|
||||
}
|
||||
})
|
||||
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>
|
||||
1
src/components/CBarSelection/index.ts
Executable file
1
src/components/CBarSelection/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CBarSelection} from './CBarSelection.vue'
|
||||
Reference in New Issue
Block a user