salvato.newfreeplanet/src/components/CBarSelection/CBarSelection.vue

<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 class="col-3">
                  <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: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>