From 7249886e8fdbb0eca1d9494b3c31c7c723a98527 Mon Sep 17 00:00:00 2001
From: paoloar77 <paolo.arena77@gmail.com>
Date: Mon, 14 Feb 2022 15:38:23 +0100
Subject: [PATCH] Creare Visualizzazione Nuova della scheda della MySkill
 (Bacheca)

---
 _ALL_SITES/freeplanet.app/db/i18n_website.js  |  2 +-
 _ALL_SITES/freeplanet.app/db/static_data.ts   |  2 +-
 .../insiemesipuo.app/db/i18n_website.js       |  2 +-
 _ALL_SITES/insiemesipuo.app/db/static_data.ts |  2 +-
 .../db/i18n_website.js                        |  2 +-
 .../popolodelnuovomondo.app/db/static_data.ts |  2 +-
 src/components/CFinder/CFinder.vue            |  3 +-
 src/components/CGridTableRec/CGridTableRec.ts |  5 +-
 .../CGridTableRec/CGridTableRec.vue           | 19 +++--
 src/components/CMyPopupEdit/CMyPopupEdit.vue  |  2 +
 src/components/CMySkill/CMySkill.scss         |  4 ++
 src/components/CMySkill/CMySkill.ts           | 72 +++++++++++++++++++
 src/components/CMySkill/CMySkill.vue          | 45 ++++++++++++
 src/components/CMySkill/index.ts              |  1 +
 src/components/CProvaPao/CProvaPao.ts         |  2 +
 src/components/index.ts                       |  1 +
 src/db/i18n_website.js                        |  2 +-
 src/db/static_data.ts                         |  2 +-
 src/statics/lang/it.js                        |  2 +-
 src/store/Modules/costanti.ts                 |  1 +
 src/store/Modules/fieldsTable.ts              | 10 +--
 src/store/Modules/tools.ts                    |  1 -
 src/store/Modules/toolsext.ts                 |  1 +
 src/views/user/mypageskill/mypageskill.vue    |  3 +-
 24 files changed, 164 insertions(+), 24 deletions(-)
 create mode 100755 src/components/CMySkill/CMySkill.scss
 create mode 100755 src/components/CMySkill/CMySkill.ts
 create mode 100755 src/components/CMySkill/CMySkill.vue
 create mode 100755 src/components/CMySkill/index.ts

diff --git a/_ALL_SITES/freeplanet.app/db/i18n_website.js b/_ALL_SITES/freeplanet.app/db/i18n_website.js
index a03410f3..2837e648 100755
--- a/_ALL_SITES/freeplanet.app/db/i18n_website.js
+++ b/_ALL_SITES/freeplanet.app/db/i18n_website.js
@@ -9,7 +9,7 @@ const msg_website = {
       Category: 'Categorie',
       Todo: 'Todo',
       personal: 'Personale',
-      work: 'Lavoro',
+      bacheca: 'Bacheca',
       shopping: 'Spesa',
       Admin: 'Admin',
       Test1: 'Test1',
diff --git a/_ALL_SITES/freeplanet.app/db/static_data.ts b/_ALL_SITES/freeplanet.app/db/static_data.ts
index c615dfb2..ddcc917e 100755
--- a/_ALL_SITES/freeplanet.app/db/static_data.ts
+++ b/_ALL_SITES/freeplanet.app/db/static_data.ts
@@ -384,7 +384,7 @@ const baseroutes: IListRoutes[] = [
     order: 10,
     path: '/bacheca',
     materialIcon: 'fas fa-bullhorn',
-    name: 'mypages.work',
+    name: 'mypages.bacheca',
     component: () => import('@/root/bacheca/bacheca.vue'),
     meta: { requiresAuth: true },
     inmenu: true,
diff --git a/_ALL_SITES/insiemesipuo.app/db/i18n_website.js b/_ALL_SITES/insiemesipuo.app/db/i18n_website.js
index c1059426..ae7d4c5d 100755
--- a/_ALL_SITES/insiemesipuo.app/db/i18n_website.js
+++ b/_ALL_SITES/insiemesipuo.app/db/i18n_website.js
@@ -9,7 +9,7 @@ const msg_website = {
       Category: 'Categorie',
       Todo: 'Todo',
       personal: 'Personale',
-      work: 'Lavoro',
+      bacheca: 'Bacheca',
       shopping: 'Spesa',
       Admin: 'Admin',
       Test1: 'Test1',
diff --git a/_ALL_SITES/insiemesipuo.app/db/static_data.ts b/_ALL_SITES/insiemesipuo.app/db/static_data.ts
index 35538e13..1494f48d 100755
--- a/_ALL_SITES/insiemesipuo.app/db/static_data.ts
+++ b/_ALL_SITES/insiemesipuo.app/db/static_data.ts
@@ -384,7 +384,7 @@ const baseroutes: IListRoutes[] = [
     order: 100,
     path: '/bacheca',
     materialIcon: 'fas fa-bullhorn',
-    name: 'mypages.work',
+    name: 'mypages.bacheca',
     component: () => import('@/root/bacheca/bacheca.vue'),
     meta: { requiresAuth: true },
     inmenu: true,
diff --git a/_ALL_SITES/popolodelnuovomondo.app/db/i18n_website.js b/_ALL_SITES/popolodelnuovomondo.app/db/i18n_website.js
index c1059426..ae7d4c5d 100755
--- a/_ALL_SITES/popolodelnuovomondo.app/db/i18n_website.js
+++ b/_ALL_SITES/popolodelnuovomondo.app/db/i18n_website.js
@@ -9,7 +9,7 @@ const msg_website = {
       Category: 'Categorie',
       Todo: 'Todo',
       personal: 'Personale',
-      work: 'Lavoro',
+      bacheca: 'Bacheca',
       shopping: 'Spesa',
       Admin: 'Admin',
       Test1: 'Test1',
diff --git a/_ALL_SITES/popolodelnuovomondo.app/db/static_data.ts b/_ALL_SITES/popolodelnuovomondo.app/db/static_data.ts
index cc610b2e..06a99c43 100755
--- a/_ALL_SITES/popolodelnuovomondo.app/db/static_data.ts
+++ b/_ALL_SITES/popolodelnuovomondo.app/db/static_data.ts
@@ -384,7 +384,7 @@ const baseroutes: IListRoutes[] = [
     order: 10,
     path: '/bacheca',
     materialIcon: 'fas fa-bullhorn',
-    name: 'mypages.work',
+    name: 'mypages.bacheca',
     component: () => import('@/root/bacheca/bacheca.vue'),
     meta: { requiresAuth: true },
     inmenu: true,
diff --git a/src/components/CFinder/CFinder.vue b/src/components/CFinder/CFinder.vue
index 41c21b05..b6ca5f81 100755
--- a/src/components/CFinder/CFinder.vue
+++ b/src/components/CFinder/CFinder.vue
@@ -21,7 +21,8 @@
         col_title="descr"
         col_footer="idCity"
         col_tabfooter="mycities"
-        :vertical="-1"
+        :vertical="costanti.VISUTABLE_LISTA"
+        :showType="costanti.SHOW_MYSKILL"
         :nodataLabel="idSector > 0 ? 'Nessuna Competenza trovata': 'Selezionare un Settore'"
         :prop_search="true"
         :finder="true"
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index de75fdfa..6842ffe2 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -32,6 +32,7 @@ import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
 import translate from '@/globalroutines/util'
 import { toolsext } from '@store/Modules/toolsext'
+import { CMySkill } from '@/components/CMySkill'
 
 export default defineComponent({
   name: 'CGridTableRec',
@@ -204,7 +205,7 @@ export default defineComponent({
       default: '',
     },
   },
-  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups, CMyUser },
+  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups, CMyUser, CMySkill },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -900,7 +901,7 @@ export default defineComponent({
       pagination.value = props.prop_pagination
 
       myvertical.value = props.vertical
-      myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
+      // myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
 
       showfilteradv.value = tools.getCookie('s_adv', false)
     }
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index e6f708eb..2bd3b3d9 100755
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
-    <div class="centermydiv q-ma-sm" style="text-align: center">
+    <div class="centermydiv q-my-sm" style="text-align: center">
       <q-btn
         v-if="mytable && visButtRow()" rounded dense color="primary"
         size="lg"
@@ -35,7 +35,8 @@
       <q-spinner-tail size="2em" color="primary"/>
     </q-inner-loading>
     <q-table
-      :grid="myvertical === costanti.VISUTABLE_SCHEDA_USER || myvertical === 2 || myvertical === costanti.VISUTABLE_SCHEDA_GROUP"
+      :grid="(myvertical === costanti.VISUTABLE_SCHEDA_USER || myvertical === 2 || myvertical === costanti.VISUTABLE_SCHEDA_GROUP)"
+      :grid-header="false"
       flat
       bordered
       class="my-sticky-header-table"
@@ -258,9 +259,9 @@
         <div v-if="choose_visutype" class="">
           <q-radio v-model="myvertical" :val="2" label="Lista"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
-          <q-radio v-if="mytable === toolsext.TABMYGROUPS" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP" label="Scheda"
+          <q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP" label="Scheda"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
-          <q-radio v-else v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_USER" label="Scheda"
+          <q-radio v-else-if="mytable !== toolsext.TABMYGROUPS && !finder" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_USER" label="Scheda"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
           <q-radio v-if="$q.screen.gt.xs" v-model="myvertical" :val="0" label="Tabella"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
@@ -313,7 +314,15 @@
       </template>
 
       <template v-slot:item="props">
-        <div v-if="((showType === costanti.SHOW_USERINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_USER) || ((myvertical === 2) && (shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel)))" class="fill-all-width">
+        <div v-if="showType === costanti.SHOW_MYSKILL">
+          <CMySkill
+            :prop_myskill="props.row"
+            :visu="visufind"
+          >
+          </CMySkill>
+
+        </div>
+        <div v-else-if="((showType === costanti.SHOW_USERINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_USER) || ((myvertical === 2) && (shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel)))" class="fill-all-width">
           <div>
             <CMyUser
               :mycontact="props.row"
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index d9ee238a..49897b4b 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -432,6 +432,7 @@
               </div>
             </div>
             <div v-else>
+              <!--
               <div class="row justify-evenly">
                 <q-btn
                   v-if="myvalue"
@@ -448,6 +449,7 @@
                 >
                 </q-btn>
               </div>
+              -->
               <!--<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>-->
 
               <div v-if="!isFieldDb()">
diff --git a/src/components/CMySkill/CMySkill.scss b/src/components/CMySkill/CMySkill.scss
new file mode 100755
index 00000000..b892863a
--- /dev/null
+++ b/src/components/CMySkill/CMySkill.scss
@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}
diff --git a/src/components/CMySkill/CMySkill.ts b/src/components/CMySkill/CMySkill.ts
new file mode 100755
index 00000000..b94a5484
--- /dev/null
+++ b/src/components/CMySkill/CMySkill.ts
@@ -0,0 +1,72 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { IImgGallery, IMySkill, IUserFields, IUserProfile } from 'model'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMySkill',
+  emits: ['setCmd'],
+  props: {
+    prop_myskill: {
+      type: Object as PropType<IMySkill | null>,
+      required: false,
+      default: null,
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const $router = useRouter()
+    const $route = useRoute()
+
+    const username = ref('')
+
+    const myskill = ref(<IMySkill | null>null)
+
+    watch(() => props.prop_myskill, (newval, oldval) => {
+      console.log('watch: myskill')
+      mounted()
+    })
+
+    function mounted() {
+      if (props.prop_myskill) {
+        myskill.value = props.prop_myskill
+      }
+    }
+
+    function getImgUser(profile: IUserFields) {
+      return userStore.getImgByProfile(profile)
+    }
+
+    function naviga(path: string) {
+      $router.push(path)
+    }
+
+    function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
+      emit('setCmd', $q, cmd, myusername, value, groupname)
+    }
+
+    onMounted(mounted)
+
+    return {
+      myskill,
+      costanti,
+      getImgUser,
+      naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      fieldsTable,
+    }
+  },
+})
diff --git a/src/components/CMySkill/CMySkill.vue b/src/components/CMySkill/CMySkill.vue
new file mode 100755
index 00000000..bce46af0
--- /dev/null
+++ b/src/components/CMySkill/CMySkill.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="q-py-xs centermydiv" :style="`min-width: `+ (tools.getwidth($q) - 20) +`px;`">
+    <q-item v-if="myskill" clickable v-ripple>
+      <q-item-section avatar @click="naviga(`/my/` + myskill.username)">
+        <q-badge class="q-my-xs self-center" :color="myskill.adType === 1 ? 'green' : 'red'">
+          {{ fieldsTable.getValByTabAndId('myskills', 'adType', myskill.adType) }}
+          <q-icon :name="myskill.adType === 1 ? 'fas fa-street-view' : 'fas fa-search'" color="white"
+                  class="q-ml-xs"/>
+        </q-badge>
+        <q-avatar size="60px">
+          <q-img :src="getImgUser(myskill)" :alt="myskill.username" img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section @click="naviga(`/mypage/` + myskill._id)">
+        <q-item-label class="full-width">
+          <span v-for="(rec, ind) of myskill.recSkill" :key="ind"> <q-chip
+            dense
+            class="text-center shadow-5 glossy bg-blue chipmodif">{{ rec.descr }}</q-chip></span>
+          <span v-for="(rec, ind) of myskill.myskill" :key="ind"> <q-chip
+            dense
+            class="text-center shadow-5 glossy bg-green chipmodif">{{ rec.descr }}</q-chip></span>
+
+          <!--<span> - {{ myskill.profile.qualifica }}</span>-->
+        </q-item-label>
+        <q-item-label lines="3">{{ myskill.descr }}<br>
+        </q-item-label>
+        <q-item-label overline lines="1" style="text-align: right">
+          <span class="text-weight-bold">{{ myskill.username }}</span> -
+          <span v-for="(rec, ind) of myskill.mycities" :key="ind">{{ rec.comune }}</span>
+        </q-item-label>
+      </q-item-section>
+
+    </q-item>
+    <q-separator inset="item"/>
+  </div>
+
+</template>
+
+<script lang="ts" src="./CMySkill.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMySkill.scss';
+</style>
diff --git a/src/components/CMySkill/index.ts b/src/components/CMySkill/index.ts
new file mode 100755
index 00000000..b09110be
--- /dev/null
+++ b/src/components/CMySkill/index.ts
@@ -0,0 +1 @@
+export { default as CMySkill } from './CMySkill.vue'
diff --git a/src/components/CProvaPao/CProvaPao.ts b/src/components/CProvaPao/CProvaPao.ts
index 418516de..da88f109 100755
--- a/src/components/CProvaPao/CProvaPao.ts
+++ b/src/components/CProvaPao/CProvaPao.ts
@@ -10,3 +10,5 @@ export default defineComponent({
     },
   },
 })
+
+
diff --git a/src/components/index.ts b/src/components/index.ts
index 71e162e6..65a8a176 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -42,4 +42,5 @@ export * from './CMyGroups'
 export * from './CDashboard'
 export * from './CMainView'
 export * from './CBigBtn'
+export * from './CMySkill'
 // export * from './CPreloadImages'
diff --git a/src/db/i18n_website.js b/src/db/i18n_website.js
index c1059426..ae7d4c5d 100755
--- a/src/db/i18n_website.js
+++ b/src/db/i18n_website.js
@@ -9,7 +9,7 @@ const msg_website = {
       Category: 'Categorie',
       Todo: 'Todo',
       personal: 'Personale',
-      work: 'Lavoro',
+      bacheca: 'Bacheca',
       shopping: 'Spesa',
       Admin: 'Admin',
       Test1: 'Test1',
diff --git a/src/db/static_data.ts b/src/db/static_data.ts
index 35538e13..1494f48d 100755
--- a/src/db/static_data.ts
+++ b/src/db/static_data.ts
@@ -384,7 +384,7 @@ const baseroutes: IListRoutes[] = [
     order: 100,
     path: '/bacheca',
     materialIcon: 'fas fa-bullhorn',
-    name: 'mypages.work',
+    name: 'mypages.bacheca',
     component: () => import('@/root/bacheca/bacheca.vue'),
     meta: { requiresAuth: true },
     inmenu: true,
diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js
index d00bd9a6..b3bb8394 100755
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -876,7 +876,7 @@ const msg_it = {
       follow_groups: 'Gruppi che Seguo',
       create_group: 'Crea Gruppo',
       friends: 'Amici',
-      work: 'Lavoro',
+      bacheca: 'Bacheca',
       groups: 'Gruppi',
       request_friends: 'Rich. Amicizia',
       request_sent_friends: 'Rich. Inviate',
diff --git a/src/store/Modules/costanti.ts b/src/store/Modules/costanti.ts
index edf63da2..8cbf948b 100755
--- a/src/store/Modules/costanti.ts
+++ b/src/store/Modules/costanti.ts
@@ -10,6 +10,7 @@ export const costanti = {
 
   SHOW_USERINFO: 1,
   SHOW_GROUPINFO: 5,
+  SHOW_MYSKILL: 10,
 
   BINARY_CHECK: 1,
 
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index a8b5b284..2228982d 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -570,7 +570,7 @@ export const colmySkills = [
     jointable: 'skills',
     filter_table: 'sectors',
     filter_field: 'idSector',
-    noshowlabel: true,
+    noshowlabel: false,
     icon: 'engineering',
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView,
     allowNewValue: true,
@@ -583,7 +583,7 @@ export const colmySkills = [
     jointable: 'subskills',
     filter_table: 'skills',
     filter_field: 'idSkill',
-    noshowlabel: true,
+    noshowlabel: false,
     icon: 'far fa-id-card',
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
     allowNewValue: true,
@@ -595,7 +595,7 @@ export const colmySkills = [
     required: false,
     jointable: 'levels',
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
-    noshowlabel: true,
+    noshowlabel: false,
     icon: 'grading',
   }),
   AddCol({
@@ -604,7 +604,7 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect,
     jointable: 'statusSkills',
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
-    noshowlabel: true,
+    noshowlabel: false,
     icon: 'mood',
   }),
   AddCol({
@@ -613,7 +613,7 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect,
     jointable: 'contribtypes',
     showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
-    noshowlabel: true,
+    noshowlabel: false,
     icon: 'currency_exchange',
     //icon: 'fas fa-hands-helping',
   }),
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 8590394a..bfa1e0eb 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -102,7 +102,6 @@ export const tools = {
     'lime',
     'orange',
     'deeporange',
-    'grey',
     'blue-gray',
     'yellow',
   ],
diff --git a/src/store/Modules/toolsext.ts b/src/store/Modules/toolsext.ts
index a7f9658c..7796c6ff 100755
--- a/src/store/Modules/toolsext.ts
+++ b/src/store/Modules/toolsext.ts
@@ -60,6 +60,7 @@ export const toolsext = {
   TABUSER: 'users',
   TABFRIENDS: 'friends',
   TABMYGROUPS: 'mygroups',
+  TABMYSKILLS: 'myskills',
   TABNAVI: 'navi',
   TABLISTAINGRESSO: 'listaingressos',
   TABGRADUATORIA: 'graduatorias',
diff --git a/src/views/user/mypageskill/mypageskill.vue b/src/views/user/mypageskill/mypageskill.vue
index 564636b7..2a71d713 100755
--- a/src/views/user/mypageskill/mypageskill.vue
+++ b/src/views/user/mypageskill/mypageskill.vue
@@ -1,6 +1,7 @@
 <template>
+
   <CMyPage
-    :title='myskill.subTitle' imgbackground="images/calendario_eventi.jpg"
+    :title='myskill.username' imgbackground="images/calendario_eventi.jpg"
     sizes="max-height: 120px" styleadd="bottom: -20px !important;">
 
     <div class="q-ma-sm q-gutter-sm q-pa-xs">