- Griglia Orizzontale a Carosello

- Aggiornato Tabella Eventi
- Lista Ultimi Movimenti
- Ultime strette di mano
- Ultimi Invitanti alla App

package.json

@@ -126,6 +126,7 @@
     "jest": "^29.7.0",
     "json-loader": "^0.5.7",
     "node-sass": "^9.0.0",
+    "nodemon": "^3.1.7",
     "npm-check-updates": "^17.1.3",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "parcel": "^2.12.0",

src/common/shared_vuejs.ts

@@ -167,6 +167,7 @@ export const shared_consts = {
     MAPPACOMUNI: 370,
     MAPPAGETCOORDINATE: 380,
     EDITADDRESSBYCOORD: 390,
+    GRID_ORIZ: 400,
   },
 
   QUERYTYPE_MYGROUP: 1,
@@ -310,8 +311,8 @@ export const shared_consts = {
   TABLES_WITH_SORTING: ['mybachecas', 'myhosps'],
   TABLES_REC_ID: ['skills', 'goods', 'subskills', 'myskills', 'mybachecas', 'myhosps', 'mygoods'],
 
-  // costanti.VISUTABLE_SCHEDA_USER, VISUTABLE_SCHEDA_GROUP, VISUTABLE_USER_TABGROUP, VISUTABLE_USER_TABCIRCUIT, VISUTABLE_GROUP_CIRCUIT
+  // costanti.VISUTABLE_SCHEDA_USER, VISUTABLE_SCHEDA_GROUP, VISUTABLE_USER_TABGROUP, VISUTABLE_USER_TABCIRCUIT, VISUTABLE_GROUP_CIRCUIT, VISUTABLE_
-  VERTIC_SHOW_GRID: [-1, 2, -3, -4, -5, -6],
+  VERTIC_SHOW_GRID: [-1, 2, -3, -4, -5, -6, -10],
 
   TABLES_UPDATE_LASTIFIED: ['myskills', 'mybachecas', 'myhosps', 'mygoods', 'bots'],
   TABLES_FINDER: ['myskills', 'mybachecas', 'myhosps', 'mygoods', 'mygroups'],
@@ -1668,6 +1669,10 @@ export const shared_consts = {
       value: 280,
       label: 'Tutorial',
     },
+    {
+      value: 400,
+      label: 'Griglia Tabelle',
+    },
   ],
 
   TypesElemAdminTools: [

src/components/CGridOriz/CGridOriz.scss

@@ -0,0 +1,29 @@
+
+.cltitlebg{
+
+}
+
+.titletext {
+  color: white;
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 3rem;
+  text-shadow: .25rem .25rem .5rem black;
+  letter-spacing: .00937em;
+  opacity: 0.9;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .titletext {
+    color: white;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 2rem;
+    text-shadow: .25rem .25rem .5rem black;
+  }
+}
+
+.q-img__content > div{
+  background: rgba(0,0,0,0.17) !important;
+}

src/components/CGridOriz/CGridOriz.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="q-ma-xs">
+    <CGridTableRec
+      ref="myGridRef"
+      v-if="searchList.length > 0 && table"
+      :prop_mytable="table"
+      :options="tools.optionsTable(table)"
+      :prop_mytitlenew="tools.getTitleAnnuncio(table)"
+      prop_mytitle=""
+      :prop_mycolumns="col"
+      :prop_colkey="prop_colkey"
+      :col_title="col_title"
+      :col_footer="col_footer"
+      :col_tabfooter="col_tabfooter"
+      :vertical="tipovisu"
+      :prop_pagination="mypagination"
+      :showType="showType"
+      :hint="hint"
+      :nodataLabel="noMsgRecord"
+      :prop_search="prop_search"
+      :finder="true"
+      labelElemFind="trovati"
+      :choose_visutype="visuType"
+      :butt_modif_new="false"
+      :noresultLabel="
+        t('grid.nosearchfound') + ' ' + (showMap ? t('grid.intheareamap') : '')
+      "
+      :arrfilters="arrfilterand"
+      :filtercustom="filtercustom"
+      :prop_searchList="searchList"
+      labelBtnAddRow="NONE"
+      :prop_SortFieldsAvailable="mySortFieldsAvailable"
+      labelBtnAddExtra=""
+      :extraparams="tools.extraparams(table, { myrecfiltertoggle })"
+      :prop_showMap="showMap"
+      @clickButtBar="clickButtBar"
+    >
+    </CGridTableRec>
+  </div>
+</template>
+
+<script lang="ts" src="./CGridOriz.ts">
+</script>
+<style lang="scss" scoped>
+@import './CGridOriz.scss';
+</style>

src/components/CGridOriz/index.ts

@@ -0,0 +1 @@
+export { default as CGridOriz } from './CGridOriz.vue'

src/components/CGridTableRec/CGridTableRec.scss

@@ -68,4 +68,11 @@
 
 .hint_search{
   color: gray;
+}
+
+.clOrizzontal{
+
+}
+.q-carousel__slide{
+  padding: 8px !important;
 }

src/components/CGridTableRec/CGridTableRec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted } from 'vue'
+import { defineComponent, PropType, ref, watch, toRef, onMounted, onBeforeUnmount, toRefs, computed, inject, onUnmounted, nextTick } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 
 import { tools } from '../../store/Modules/tools'
@@ -361,6 +361,8 @@ export default defineComponent({
     const showMap = ref(false)
     const showMapAtLeast1 = ref(false)
     const mapInitialized = ref(false)
+    const slideGridOriz = ref(0)
+    const autoplay = ref(true)
 
 
     const newRecordBool = ref(false)
@@ -371,6 +373,12 @@ export default defineComponent({
     const recModif = ref(<any>{})
     const showInnerDialog = ref(false)
 
+    const carouselTabRef = ref(<any>null)
+    const isAtStart = ref(true)
+    const isAtEnd = ref(false)
+    const activeIndex = ref(0)
+    const addEventScroll = ref(false)
+
     const mytable = ref('')
     const mytitle = ref('')
     const mytitlenew = ref('')
@@ -1209,6 +1217,8 @@ export default defineComponent({
         spinner_visible.value = false
         changetable.value = false
         startsearch.value = false
+
+        checkScrollPosition()
       })
     }
 
@@ -1306,6 +1316,8 @@ export default defineComponent({
           // console.log('   ...DONE ')
           done(pagination.value.rowsNumber === 0 ? true : false)
 
+          checkScrollPosition()
+
           alreadymounting.value = true
         })
       } else {
@@ -1660,13 +1672,55 @@ export default defineComponent({
 
         myvertical.value = props.vertical
 
-        showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
+        if (props.prop_search) {
+          showfilter.value = props.prop_showfilter || (tools.getCookie('s_adv', '0') !== '0')
+        } else {
+          showfilter.value = props.prop_showfilter
+        }
 
       } catch (e) {
         console.error('ERRORE', e)
       }
     }
 
+    const checkScrollPosition = () => {
+      console.log('checkScrollPosition')
+      const container = carouselTabRef.value
+      if (!container ) return
+
+      if (!addEventScroll.value && carouselTabRef.value) {
+        carouselTabRef.value?.addEventListener('scroll', checkScrollPosition)
+        addEventScroll.value = true
+      }
+
+      if (carouselTabRef.value) {
+        console.log('carouselTabRef LISTEN')
+      } else {
+        console.log('carouselTabRef NO !')
+      }
+      console.log('  .... >>> AVANTI ', container.scrollLeft, container.clientWidth)
+    
+      isAtStart.value = container.scrollLeft <= 0
+      isAtEnd.value = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1
+    
+      if (serverData.value.length > 0) { // Assicurarsi che ci siano elementi
+        console.log('entro dentro...')
+        const cardWidth = container.scrollWidth / serverData.value.length
+        activeIndex.value = Math.round(container.scrollLeft / cardWidth)
+      }
+    }
+
+    const scroll = (direction: any) => {
+      const container = carouselTabRef.value;
+      if (!container || !serverData.value.length) return;
+
+      const cardWidth = container.scrollWidth / serverData.value.length;
+      container.scrollBy({
+        left: direction * cardWidth,
+        behavior: 'smooth',
+      });
+    };
+    
     function mounted() {
       // console.log('mounted...')
       try {
@@ -1713,6 +1767,10 @@ export default defineComponent({
 
         changeTable(tablesel.value, true)
 
+        nextTick(() => {
+          checkScrollPosition()
+        })
+
         // Aggiungi gli listener agli eventi della tastiera
         document.addEventListener('keydown', onEscapeKey);
         // window.addEventListener('popstate', onBackButton);
@@ -2188,7 +2246,7 @@ export default defineComponent({
 
               newRecord.value = {}
               newRecordBool.value = false
-              
+
               tools.showPositiveNotif($q, t('db.recupdated'))
               // refresh()
             } else {
@@ -2476,6 +2534,10 @@ export default defineComponent({
     // Rimuovi i listener al distruggere del componente
     onBeforeUnmount(() => {
       document.removeEventListener('keydown', onEscapeKey);
+
+      carouselTabRef.value?.removeEventListener('scroll', checkScrollPosition)
+
+
       // window.removeEventListener('popstate', onBackButton);
     });
 
@@ -2700,6 +2762,13 @@ export default defineComponent({
       gotoCurrentLocation,
       showInMap,
       showMapAtLeast1,
+      carouselTabRef,
+      isAtStart,
+      isAtEnd,
+      activeIndex,
+      scroll,      
+      slideGridOriz,
+      autoplay,
     }
   }
 })

src/components/CGridTableRec/CGridTableRec.vue

@@ -267,12 +267,17 @@
             dense
             type="search"
             debounce="500"
-            :hint="!hintinbtnsearch ? hint: ''"
+            :hint="!hintinbtnsearch ? hint : ''"
             :error-message="noresultLabel"
-            :error="(getNumRecFromQuery() === 0 && !startsearch) && myfilter !== ''"
+            :error="
+              getNumRecFromQuery() === 0 && !startsearch && myfilter !== ''
+            "
             :label="hintinbtnsearch ? hint : $t('grid.search')"
             @keyup.enter="doSearch"
-            @clear="myfilter = ''; doSearch()"
+            @clear="
+              myfilter = '';
+              doSearch();
+            "
             @update:model-value="findByDebounce ? doSearch() : null"
             :clearable="!!myfilter"
             class="col q-mx-xs"
@@ -284,10 +289,10 @@
           </q-input>
 
           <q-btn
-            v-if="prop_search && myfilter || search"
+            v-if="(prop_search && myfilter) || search"
             color="primary"
             icon="fas fa-search"
-            @click="showSearchOnTop ? showSearchDialog = true : doSearch()"
+            @click="showSearchOnTop ? (showSearchDialog = true) : doSearch()"
           />
 
           <q-btn-toggle
@@ -400,181 +405,192 @@
           </div>
         </div>
 
-        <div v-for="(row, indexrow) in serverData" :key="indexrow">
+        <div v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ">
-          <div
+          <q-carousel
-            v-if="
+            swipeable
-              showType === costanti.SHOW_MYCARD ||
+            animated
-              (myvertical !== costanti.VISUTABLE_USER_TABGROUP &&
+            :autoplay="autoplay"
-                myvertical !== costanti.VISUTABLE_USER_TABCIRCUIT &&
+            v-model="slideGridOriz"
-                myvertical === costanti.VISUTABLE_LISTA &&
+            navigation
-                shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel))
+            control-color="blue-4"
-            "
+            control-text-color="white"
+            arrows
+            ref="carousel"
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            height="500px"
+            width="100%"
+            control-type="push"
+            class="bg-grey-2 shadow-2 rounded-borders"
+            @mouseenter="autoplay = false"
+            @mouseleave="autoplay = true"
           >
-            <div v-if="row && withdate">
+            <q-carousel-slide
-              <div v-if="setShowMonth(row, indexrow)">
+              v-for="(rec, indexrow) in serverData"
-                <div>
+              :key="indexrow"
-                  <div v-if="row.dateTimeStart">
+              :name="indexrow"
-                    <strong>{{ tools.getstrMonth(row.dateTimeStart) }}</strong>
+            >
-                  </div>
+              <CMyRecCard
+                :table="tablesel"
+                :prop_myrec="rec"
+                @cmdext="cmdExt"
+                :editOn="editOn"
+                :margin_right="margin_right"
+              >
+              </CMyRecCard>
+            </q-carousel-slide>
+          </q-carousel>
+
+          <div v-if="false">
+            <div class="card-carousel-container">
+              <div class="card-carousel" ref="carouselTabRef">
+                <q-card
+                  v-for="(rec, indexrow) in serverData"
+                  :key="indexrow"
+                  :class="`my-card-elem center_img bordered ` + ' titolo_card'"
+                  :style="`height: auto; !important; width: 350px !important;`"
+                >
+                  <CMyRecCard
+                    :table="tablesel"
+                    :prop_myrec="rec"
+                    @cmdext="cmdExt"
+                    :editOn="editOn"
+                    :margin_right="margin_right"
+                  >
+                  </CMyRecCard>
+                </q-card>
+              </div>
+              <div
+                class="swipe-indicator left"
+                v-if="!isAtStart"
+                @click="scroll(-1)"
+              >
+                <q-icon name="chevron_left" size="2rem" color="white" />
+              </div>
+              <div
+                class="swipe-indicator right"
+                v-if="!isAtEnd"
+                @click="scroll(1)"
+              >
+                <q-icon name="chevron_right" size="2rem" color="white" />
+              </div>
+              <div class="scroll-indicator">
+                <div
+                  v-for="(_, index) in serverData"
+                  :key="index"
+                  :class="['dot', { active: index === activeIndex }]"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else>
+          <div v-for="(row, indexrow) in serverData" :key="indexrow">
+            <div
+              v-if="
+                showType === costanti.SHOW_MYCARD ||
+                (myvertical !== costanti.VISUTABLE_USER_TABGROUP &&
+                  myvertical !== costanti.VISUTABLE_USER_TABCIRCUIT &&
+                  myvertical === costanti.VISUTABLE_LISTA &&
+                  shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel))
+              "
+            >
+              <div v-if="row && withdate">
+                <div v-if="setShowMonth(row, indexrow)">
                   <div>
-                    <q-separator />
+                    <div v-if="row.dateTimeStart">
+                      <strong>{{
+                        tools.getstrMonth(row.dateTimeStart)
+                      }}</strong>
+                    </div>
+                    <div>
+                      <q-separator />
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            <CMyRecGrpCard
+              <CMyRecGrpCard
-              v-if="tablesel === shared_consts.TABLES_MYGROUPS"
+                v-if="tablesel === shared_consts.TABLES_MYGROUPS"
-              :table="tablesel"
+                :table="tablesel"
-              :prop_myrec="row"
+                :prop_myrec="row"
-              @cmdext="cmdExt"
+                @cmdext="cmdExt"
-            >
-            </CMyRecGrpCard>
-            <CMyRecCircuitCard
-              v-else-if="tablesel === shared_consts.TABLES_CIRCUITS"
-              :table="tablesel"
-              :prop_myrec="row"
-              @cmdext="cmdExt"
-            >
-            </CMyRecCircuitCard>
-            <CMyRecCard
-              v-else
-              :table="tablesel"
-              :prop_myrec="row"
-              @cmdext="cmdExt"
-              :editOn="editOn"
-              :margin_right="margin_right"
-            >
-            </CMyRecCard>
-          </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
-                :notsetcmd="true"
-                :mycontact="row"
-                :visu="visufind"
-                :groupname="extrafield"
-                :circuitname="circuitname"
-                :actionType="actionType"
-                :labelextra="col_title ? row[col_title] : ''"
-                :labelFooter="
-                  col_footer
-                    ? tools.getLabelFooterByRow(row, col_footer, tablesel)
-                    : ''
-                "
-                @showInnerDialog="showInnerDialog"
               >
-              </CMyUser>
+              </CMyRecGrpCard>
-
+              <CMyRecCircuitCard
-              <q-separator></q-separator>
+                v-else-if="tablesel === shared_consts.TABLES_CIRCUITS"
+                :table="tablesel"
+                :prop_myrec="row"
+                @cmdext="cmdExt"
+              >
+              </CMyRecCircuitCard>
+              <CMyRecCard
+                v-else
+                :table="tablesel"
+                :prop_myrec="row"
+                @cmdext="cmdExt"
+                :editOn="editOn"
+                :margin_right="margin_right"
+              >
+              </CMyRecCard>
             </div>
-          </div>
+            <div            
-          <div
+              v-else-if="
-            v-else-if="
+                (showType === costanti.SHOW_USERINFO &&
-              (showType === costanti.SHOW_GROUPINFO &&
+                  myvertical !== costanti.VISUTABLE_SCHEDA_USER) ||
-                myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) ||
+                (myvertical === 2 &&
-              (myvertical === 2 && tablesel === 'mygroups') ||
+                  shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel))
-              myvertical === costanti.VISUTABLE_GROUP_CIRCUIT
+              "
-            "
+              class="fill-all-width"
-            class="fill-all-width"
+            >
-          >
+              <div>
-            <div>
+                <CMyUser
-              <CMyGroups
+                  :notsetcmd="true"
-                v-model="filtergrp"
+                  :mycontact="row"
-                :circuitname="circuitname"
+                  :visu="visufind"
-                :finder="false"
+                  :groupname="extrafield"
-                :mygrp="row"
+                  :circuitname="circuitname"
-                :visu="visufind ? visufind : costanti.FIND_GROUP"
+                  :actionType="actionType"
-              />
+                  :labelextra="col_title ? row[col_title] : ''"
-            </div>
+                  :labelFooter="
-          </div>
+                    col_footer
-          <div
+                      ? tools.getLabelFooterByRow(row, col_footer, tablesel)
-            v-else-if="
+                      : ''
-              showType === costanti.SHOW_MOVEMENTS && tablesel === 'movements'
+                  "
-            "
+                  @showInnerDialog="showInnerDialog"
-          >
-            <CSingleMovement :mov="row" />
-            <!--<div v-if="false" class="q-pa-xs row items-start q-gutter-xs">
-              <q-card class="my-card text-black">
-                <q-toolbar
-                  class="bg-primary text-white"
-                  style="min-height: 30px"
                 >
-                  <q-toolbar-title>
+                </CMyUser>
-                    <span class="q-ma-sm">
+
-                      <q-icon
+                <q-separator></q-separator>
-                        v-if="tools.isEntrataByRecMov(row)"
+              </div>
-                        name="fas fa-box-tissue"
+            </div>
-                        color="green"
+            <div
-                      ></q-icon>
+              v-else-if="
-                      <q-icon
+                (showType === costanti.SHOW_GROUPINFO &&
-                        v-else-if="tools.isUscitaByRecMov(row)"
+                  myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) ||
-                        name="fas fa-share-square"
+                (myvertical === 2 && tablesel === 'mygroups') ||
-                        color="red"
+                myvertical === costanti.VISUTABLE_GROUP_CIRCUIT
-                      ></q-icon>
+              "
-                    </span>
+              class="fill-all-width"
-                    {{
+            >
-                      tools.isEntrataByRecMov(row)
+              <div>
-                        ? t('movement.movin')
+                <CMyGroups
-                        : tools.isUscitaByRecMov(row)
+                  v-model="filtergrp"
-                        ? t('movement.movout')
+                  :circuitname="circuitname"
-                        : ''
+                  :finder="false"
-                    }}
+                  :mygrp="row"
-                  </q-toolbar-title>
+                  :visu="visufind ? visufind : costanti.FIND_GROUP"
-                </q-toolbar>
+                />
-                <q-card-section>
+              </div>
-                  <div v-for="col in mycolumns" :key="col.name">
+            </div>
-                    <div
+            <div
-                      v-if="
+              v-else-if="
-                        showColCheck(
+                showType === costanti.SHOW_MOVEMENTS && tablesel === 'movements'
-                          col,
+              "
-                          tools.TIPOVIS_SHOW_RECORD,
+            >
-                          true,
+              <CSingleMovement :mov="row" />
-                          1,
+            </div>
-                          row
-                        )
-                      "
-                      :class="
-                        !col.extrafield ||
-                        (col.extrafield &&
-                          (col.tipovisu !== costanti.TipoVisu.LINK ||
-                            (col.tipovisu === costanti.TipoVisu.LINK &&
-                              userStore.getImgByProfile(row, true, col))))
-                          ? `tdclass`
-                          : ``
-                      "
-                    >
-                      <div :class="getclrow(row)">
-                        <CMyPopupEdit
-                          :table="mytable"
-                          :canEdit="false"
-                          :canModify="false"
-                          :disable="false"
-                          :mycol="col"
-                          :row="row"
-                          :field="col.field"
-                          :visulabel="true"
-                          :subfield="col.subfield"
-                          minuteinterval="1"
-                          @save="SaveValue"
-                          @show="selItem(row, col)"
-                          @showandsave="showandsave"
-                        >
-                        </CMyPopupEdit>
-                      </div>
-                    </div>
-                  </div>
-                </q-card-section>
-              </q-card>
-            </div>-->
           </div>
         </div>
         <template v-slot:loading>

src/components/CMyEditElem/CMyEditElem.vue

@@ -1158,6 +1158,57 @@
           >
           </q-input>
         </div>
+        <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
+          <div v-if="enableEdit" class="row">
+            <q-select
+              v-model="myel.container"
+              :options="[
+                { label: 'Eventi', value: 'mybachecas' },
+                { label: 'Servizi', value: 'myskills' },
+              ]"
+              label="Tabella"
+              emit-value
+              map-options
+              @input="saveElem"
+              style="min-width: 120px"
+            >
+            </q-select>
+            <br />
+            <q-select
+              v-model="myel.number"
+              :options="[
+                { label: 'Orizzontale', value: costanti.VISUTABLE_GRID_ORIZ },
+                { label: 'Griglia', value: costanti.VISUTABLE_LISTA },
+                { label: 'Scheda User', value: costanti.VISUTABLE_SCHEDA_USER },
+                { label: 'User Info', value: costanti.SHOW_USERINFO },
+              ]"
+              label="Visualizzazione"
+              emit-value
+              map-options
+              style="min-width: 120px"
+              @input="saveElem"
+            >
+            </q-select>
+            <q-toggle
+              v-model="myel.parambool"
+              color="positive"
+              label="Search"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-toggle
+              v-model="myel.parambool2"
+              color="positive"
+              label="Finder"
+              @update:model-value="modifElem"
+            ></q-toggle>
+            <q-toggle
+              v-model="myel.parambool3"
+              color="positive"
+              label="Mostra Mappa"
+              @update:model-value="modifElem"
+            ></q-toggle>
+          </div>
+        </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.CALENDAR">
           <div v-if="enableEdit" class="row">
             <q-input

src/components/CMyElem/CMyElem.ts

@@ -9,6 +9,7 @@ import { useGlobalStore } from '@store/globalStore'
 import { CImgTitle } from '../CImgTitle/index'
 import { CImgPoster } from '@/components/CImgPoster'
 import { CTitle } from '@/components/CTitle/index'
+import { CGridOriz } from '@/components/CGridOriz/index'
 import { tools } from '@store/Modules/tools'
 import { shared_consts } from '@/common/shared_vuejs'
 import { LandingFooter } from '@/components/LandingFooter'
@@ -66,7 +67,7 @@ export default defineComponent({
     CTitleBanner, CShareSocial, CCheckAppRunning, CRegistration,
     CVisuVideoPromoAndPDF, CECommerce, CCatalogo, CAITools,
     CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
-    CDashGroup, CMovements,
+    CDashGroup, CMovements, CGridOriz,
     // ,  //CMapMarker, 
   },
   emits: ['selElemClick'],

src/components/CMyElem/CMyElem.vue

@@ -325,7 +325,13 @@
                 :key="index"
                 :name="index"
                 :img-src="
-                  getsrcbyimg(costanti.DIR_UPLOAD + `pages/` + myel.path + `/` + rec.imagefile)
+                  getsrcbyimg(
+                    costanti.DIR_UPLOAD +
+                      `pages/` +
+                      myel.path +
+                      `/` +
+                      rec.imagefile
+                  )
                 "
                 :alt="rec.alt"
                 class="carousel_slide"
@@ -482,6 +488,16 @@
         <div v-if="editOn" class="elemEdit">CSendRISTo</div>
         <CSendRISTo></CSendRISTo>
       </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
+        <div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
+        <CGridOriz
+          :table="myel.container"
+          :tipovisu="myel.number"
+          :prop_search="myel.parambool"
+          :finder="myel.parambool2"
+          :showMap="myel.parambool3"
+        ></CGridOriz>
+      </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">
         <div v-if="editOn" class="elemEdit">CStatusReg</div>
         <CStatusReg> </CStatusReg>

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -164,6 +164,9 @@
                     <q-item-label caption>{{
                       tools.getUserNameOnlyIfToShow(row, col)
                     }}</q-item-label>
+                    <q-item-label v-if="row.profile.resid_province" style="text-align:right;">
+                      ({{ row.profile.resid_province }})
+                    </q-item-label>
                   </q-item-section>
                   <q-item-section side></q-item-section>
                 </q-item>

src/components/CMyRecCard/CMyRecCard.scss

@@ -21,7 +21,7 @@
   /* Arrotonda leggermente gli angoli */
   border-radius: 8px;
   /* Aggiungi un po' di spazio interno intorno ai contenuti */
-  padding: 16px;
+  padding: 8px;
   /* Colore di sfondo bianco per separare dal resto del contenuto */
   background-color: #eff;
 

src/components/CMyRecCard/CMyRecCard.vue

@@ -1,10 +1,6 @@
 <!--suppress ALL -->
 <template>
-
+  <div class="q-py-xs centermydiv cardrec" :style="{ maxWidth: computedWidth }">
-  <div
-    class="q-py-xs centermydiv cardrec"
-    :style="{ maxWidth: computedWidth }"
-  >
     <div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
       <div class="row">
         <div class="col-2 q-my-sm">
@@ -18,9 +14,69 @@
             <span class="ev_month">{{
               tools.getstrMonth3Letters(myrec.dateTimeStart)
             }}</span>
+            <span class="ev_hour">{{
+              tools.getstrTime(myrec.dateTimeStart)
+            }}</span>
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) ===
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_hour_end"
+              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
+            >
+            <div
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="q-mx-sm"
+            >
+              ------
+            </div>
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_dayofweek"
+              >{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_day"
+              >{{ tools.getstrDay(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_month"
+              >{{ tools.getstrMonth3Letters(myrec.dateTimeEnd) }}</span
+            >
+            <span
+              v-if="
+                tools.getstrDay(myrec.dateTimeStart) !==
+                tools.getstrDay(myrec.dateTimeEnd)
+              "
+              class="ev_hour_end"
+              >{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
+            >
+            <q-avatar size="50px" class="q-my-sm">
+              <q-img
+                :src="getImgUser(myrec)"
+                :alt="myrec.username"
+                img-class="imgprofile"
+                height="50px"
+              />
+            </q-avatar>
           </div>
         </div>
-        <div class="col-10">          
+        <div class="col-10">
           <q-img
             :src="
               tools.getFullFileName(myrec.photos, table, myrec.username, '')
@@ -28,12 +84,12 @@
             :alt="myrec.descr"
             img-class="imgprofile"
             height="270px"
-            fit="contain"
+            fit="cover"
             @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
           />
-          <div class="event_date">
+          <!--<div class="event_date">
             <span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
-          </div>
+          </div>-->
         </div>
       </div>
     </div>
@@ -101,7 +157,7 @@
       </q-item-section>
 
       <q-item-section
-        v-else-if="!myrec.organisedBy"
+        v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
         avatar
         @click="naviga(`/my/` + myrec.username)"
       >
@@ -158,19 +214,20 @@
             style="vertical-align: middle"
           >
             <q-badge
-              v-if="(recstatus === shared_consts.STATUSSKILL_ONLINE) || myrec.idStatusSkill.length > 1"
+              v-if="
+                recstatus === shared_consts.STATUSSKILL_ONLINE ||
+                myrec.idStatusSkill.length > 1
+              "
               dense
               :color="globalStore.getColByStatusSkills(recstatus)"
-              text-color="white"              
+              text-color="white"
             >
               <q-icon
                 :name="globalStore.getStatusSkillIconById(recstatus)"
                 color="white"
-                
               />&nbsp;
               {{ globalStore.getStatusSkillById(recstatus) }}
             </q-badge>
-            
           </span>
 
           <!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>

src/components/CProductCard/CProductCard.ts

@@ -10,6 +10,8 @@ import { CCopyBtn } from '../CCopyBtn'
 import { CMyFieldRec } from '../CMyFieldRec'
 import { CMyValueDb } from '../CMyValueDb'
 
+import VueBarcode from 'vue-barcode'
+
 import { func_tools, toolsext } from '@store/Modules/toolsext'
 
 import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct } from '@src/model'

src/components/CProductCard/CProductCard.vue

@@ -223,6 +223,11 @@
           <div class="product_code">
             &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
           </div>
+          <div v-if="false" class="barcode">
+            <barcode :value="myproduct.productInfo.code" format="EAN-13">
+            </barcode>
+            <vue-barcode ></vue-barcode>
+          </div>
           <div
             v-if="
               myproduct.productInfo.subcatprods &&

src/components/CSingleMovement/CSingleMovement.scss

@@ -23,13 +23,28 @@
     font-style: italic;
 }
 
+:root {
+    --causale-text-color: #555;
+    --causale-bg-color: #f9f9f9;
+}
+
+body.body--dark {
+    --causale-text-color: #bbb;
+    --causale-bg-color: #333;
+}
+
 .causale {
-    font-style: italic; /* Testo in corsivo */
+    position: relative;
-    color: #555;        /* Colore del testo (può essere un grigio o un altro colore per le citazioni) */
+    /* Necessario per il posizionamento corretto del pseudo-elemento */
-    border-left: 4px solid #ccc; /* Linea a sinistra per emulare lo stile di una citazione */
+    font-style: italic;
-    padding-left: 10px; /* Spazi a sinistra per il padding */
+    color: #555;
-    margin: 8px 0; /* Spaziatura sopra e sotto */
+    padding-left: 0px;
-  }
+    margin: 8px 0;
+    color: var(--causale-text-color);
+    background-color: var(--causale-bg-color);
+}
+
+
 .userto,
 .userfrom {
     white-space: pre-wrap;
@@ -42,15 +57,15 @@
     /* Allinea gli elementi al centro verticalmente */
 }
 
-.q-item__section--main ~ .q-item__section--side{
+.q-item__section--main~.q-item__section--side {
     padding-left: 2px !important;
 }
 
-.q-item__section--side{
+.q-item__section--side {
     padding-right: 4px !important;
 }
 
-.schede-mov{
+.schede-mov {
     margin-top: 2px;
     margin-bottom: 2px;
     padding-top: 2px;

src/components/CSingleMovement/CSingleMovement.vue

@@ -9,8 +9,6 @@
         'background-odd': index % 2 !== 0,
       },
     ]"
-    clickable
-    v-ripple
   >
     <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
       <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
@@ -31,9 +29,6 @@
       <q-item-label class="causalDest" v-if="mov.causalDest">{{
         mov.causalDest
       }}</q-item-label>
-      <q-item-label class="causale" v-if="mov.causal">&quot;{{
-        mov.causal
-      }}&quot;</q-item-label>
       <q-item-label v-if="visu !== 1" lines="3">
         {{ t('movement.from') }}
         <span class="userfrom">{{
@@ -49,7 +44,11 @@
       <q-item-label caption lines="1" v-if="mov.circuitfrom" class="circuit">{{
         mov.circuitfrom.name
       }}</q-item-label>
-      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date">{{
+      <q-item-label class="causale" v-if="mov.causal">
+        <q-icon name="fas fa-star" color="orange"></q-icon>
+        &quot;{{ mov.causal }}&quot;</q-item-label
+      >
+      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date text-right">{{
         tools.getstrDateTime(mov.transactionDate)
       }}</q-item-label>
     </q-item-section>

src/components/CStatusReg/CStatusReg.scss

@@ -6,4 +6,18 @@
     display: flex;
     justify-content: space-between;
     /* Distribuisce gli elementi uniformemente */
+}
+
+.clDateStrette{
+    color: white;
+    font-style: italic;
+}
+.iscritto_da, .iscritto_da_name{
+    font-style: italic;
+    font-size: 0.85rem;
+    color: lightgray;
+}
+
+.iscritto_da_name{
+    color: white !important;
 }

src/components/CStatusReg/CStatusReg.ts

@@ -231,6 +231,7 @@ export default defineComponent({
       getImgUserByUsername,
       gotoPage,
       userStore,
+      t,
     }
 
   }

src/components/CStatusReg/CStatusReg.vue

@@ -102,73 +102,17 @@
                        :myval="datastat.num_teleg_pending" mycol="negative"></CCardStat>-->
           </div>
 
-          <div class="column animazione">
+          <q-list bordered>
-            <q-tabs v-model="mytab" class="text-blue">
+            <q-expansion-item
-              <q-tab
+              group="somegroup"
-                name="reg"
+              icon="fas fa-user-plus"
-                :label="$t('statusreg.newreg')"
+              :label="$t('statusreg.newreg')"
-                icon="fas fa-user-plus"
+              default-opened
-              />
+              header-class="text-primary"
-              <q-tab
+            >
-                name="online"
+              <q-card>
-                :label="$t('statusreg.onlineusers')"
+                <q-card-section>
-                icon="fas fa-wifi"
+                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
-              />
-              <q-tab
-                name="diffusori"
-                :label="$t('statusreg.diffusori')"
-                icon="fas fa-medal"
-              />
-              <q-tab
-                name="strettelist"
-                :label="$t('statusreg.strettelist')"
-                icon="fas fa-handshake"
-              />
-            </q-tabs>
-
-            <q-tab-panels v-model="mytab" animated>
-              <q-tab-panel name="reg">
-                <div class="q-pa-md" style="max-width: 350px; margin: auto">
-                  <transition-group
-                    name="fade"
-                    mode="out-in"
-                    appear
-                    enter-active-class="animazione fadeIn"
-                    leave-active-class="animazione fadeOut"
-                  >
-                    <q-item
-                      v-for="(user, index) in lastsreg"
-                      :key="index"
-                      class="animated"
-                      v-ripple
-                    >
-                      <q-item-section>
-                        <q-item-label lines="1">
-                          <CMyFieldRec
-                            table="users"
-                            :id="user._id"
-                            :rec="user"
-                            field="username"
-                            :canEdit="false"
-                            :canModify="false"
-                            :fieldtype="costanti.FieldType.username_chip"
-                          >
-                          </CMyFieldRec>
-                        </q-item-label>
-                      </q-item-section>
-
-                      <q-item-section side>
-                        <q-item-label>{{
-                          tools.getstrDateTimeShort(user.date_reg)
-                        }}</q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </transition-group>
-                </div>
-              </q-tab-panel>
-              <q-tab-panel name="online">
-                <div class="q-pa-md" style="max-width: 350px; margin: auto">
-                  <q-list bordered>
                     <transition-group
                       name="fade"
                       mode="out-in"
@@ -177,11 +121,11 @@
                       leave-active-class="animazione fadeOut"
                     >
                       <q-item
-                        v-for="(user, index) in lastsonline"
+                        v-for="(user, index) in lastsreg"
                         :key="index"
                         class="animated chip_shadow q-ma-sm"
-                        clickable
                         v-ripple
+                        clickable
                         @click="gotoPage(`/my/${user.username}`)"
                       >
                         <q-item-section avatar>
@@ -197,212 +141,326 @@
                           </q-avatar>
                         </q-item-section>
                         <q-item-section class="">
-                          <q-item-label>{{
+                          <q-item-label>
-                            tools.getNameToShow(user)
+                            {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
-                          }}</q-item-label>
+                          </q-item-label>
                           <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
+                            tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
                           }}</q-item-label>
+                          <q-item-label class="iscritto_da">
+                            {{ t('statusreg.invite_by') }}:
+                            <span class="iscritto_da_name">{{
+                              tools.getNameToShow(user.user_aportador)
+                            }}</span>
+                          </q-item-label>
                         </q-item-section>
                         <q-item-section side>
-                          <div
+                          <q-item-label style="color: white">{{
-                            :class="
+                            tools.getstrshortDate(user.date_reg)
-                              `text-h6 q-mr-sm text-bold ` + $q.dark.isActive
+                          }}</q-item-label>
-                                ? `text-white`
-                                : `text-black`
-                            "
-                          >
-                            <CTimeAgo :datetime="user.lasttimeonline" />
-                          </div>
                         </q-item-section>
                       </q-item>
                     </transition-group>
-                  </q-list>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+
+            <q-separator />
+
+            <q-expansion-item
+              expand-separator
+              group="somegroup"
+              icon="fas fa-medal"
+              :label="$t('statusreg.lastsharedlink')"
+              header-class="text-purple"
+            >
+              <div>
+                <div class="text-center text-bold text-h6">Unisciti a RISO</div>
+                <div class="text-center">
+                  Se ancora non sei registrato a RISO, scegli un invitante che
+                  conosci. Questa persona dovrà ammetterti per permetterti di
+                  accedere alle funzionalità.
                 </div>
-              </q-tab-panel>
+              </div>
-              <q-tab-panel name="diffusori">
+
-                <div class="q-pa-md" style="max-width: 350px; margin: auto">
+              <q-item
-                  <div class="text-center text-bold text-h6">
+                v-for="(user, index) in lastssharedlink"
-                    Aiuta RISO a crescere
+                :key="index"
-                  </div>
+                class="animated chip_shadow q-ma-sm"
-                  <div class="text-center">
+                clickable
-                    Condividi il tuo link d'invito, alimentando nuovi ingressi
+                v-ripple
-                    alla RETE Solidale di RISO.
+                @click="gotoPage(`/registrati/${user.user_aportador.username}`)"
-                  </div>
+              >
-                  <q-list bordered>
+                <q-item-section avatar>
-                    <transition-group
+                  <q-avatar round size="48px">
-                      name="fade"
+                    <img
-                      mode="out-in"
+                      :src="userStore.getImgByProfile(user.user_aportador)"
-                      appear
+                    />
-                      enter-active-class="animazione fadeIn"
+                  </q-avatar>
-                      leave-active-class="animazione fadeOut"
+                </q-item-section>
-                    >
+                <q-item-section class="">
-                      <q-item
+                  <q-item-label>
-                        v-for="(user, index) in diffusorilist"
+                    {{ tools.getNameToShow(user.user_aportador, null, {showprov: true, html: true}) }}
-                        :key="index"
+                  </q-item-label>
-                        class="animated chip_shadow q-ma-sm"
+                  <q-item-label caption>{{
-                        clickable
+                    tools.getUserNameOnlyIfToShow(user.user_aportador, null, {showprov: true, html: true})
-                        v-ripple
+                  }}</q-item-label>
-                        @click="gotoPage(`/my/${user.username}`)"
+                  <q-item-label class="iscritto_da">
+                    {{ t('statusreg.has_invited') }}:
+                    <span class="iscritto_da_name">{{
+                      tools.getNameToShow(user)
+                    }}</span>
+                  </q-item-label>
+                </q-item-section>
+                <q-item-section side
+                  ><span class="text-h6 q-mr-sm"></span
+                ></q-item-section>
+              </q-item>
+            </q-expansion-item>
+
+            <q-expansion-item
+              group="somegroup"
+              icon="fas fa-wifi"
+              :label="
+                $t('statusreg.onlineusers', { today: datastat.online_today })
+              "
+              header-class="text-teal"
+            >
+              <q-card>
+                <q-card-section>
+                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
+                    <q-list bordered>
+                      <transition-group
+                        name="fade"
+                        mode="out-in"
+                        appear
+                        enter-active-class="animazione fadeIn"
+                        leave-active-class="animazione fadeOut"
                       >
-                        <q-item-section avatar>
+                        <q-item
-                          <q-avatar round size="48px">
+                          v-for="(user, index) in lastsonline"
-                            <img :src="userStore.getImgByProfile(user)" />
+                          :key="index"
-                            <q-badge
+                          class="animated chip_shadow q-ma-sm"
-                              v-if="tools.isUserOnline(user)"
+                          clickable
-                              align="top"
+                          v-ripple
-                              floating
+                          @click="gotoPage(`/my/${user.username}`)"
-                              color="green"
-                              >online</q-badge
-                            >
-                          </q-avatar>
-                        </q-item-section>
-                        <q-item-section class="">
-                          <q-item-label overline>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
-                          </q-item-label>
-                          <q-item-label>
-                            {{ tools.getNameToShow(user) }}</q-item-label
-                          >
-                          <q-item-label caption>{{
-                            tools.getUserNameOnlyIfToShow(user)
-                          }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section side
-                          ><div
-                            :class="
-                              `text-h6 q-mx-sm q-px-sm text-bold ` +
-                              ($q.dark.isActive ? `text-white` : `text-black`)
-                            "
-                          >
-                            {{ user.count }}
-                          </div></q-item-section
                         >
-                      </q-item>
+                          <q-item-section avatar>
-                    </transition-group>
+                            <q-avatar round size="48px">
-                  </q-list>
+                              <img :src="userStore.getImgByProfile(user)" />
-                </div>
+                              <q-badge
-              </q-tab-panel>
+                                v-if="tools.isUserOnline(user)"
-              <q-tab-panel name="strettelist">
+                                align="top"
-                <div class="q-pa-md" style="max-width: 350px; margin: auto">
+                                floating
-                  <div class="text-center text-bold text-h6">
+                                color="green"
-                    Strette di Mano
+                                >online</q-badge
-                  </div>
+                              >
-                  <div class="text-center">
+                            </q-avatar>
-                    Più persone conoscerai di persona e maggiore aumenterà la
+                          </q-item-section>
-                    Rete di fiducia.
+                          <q-item-section class="">
-                  </div>
+                            <q-item-label
-                  <q-list bordered>
+                              >{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
-                    <transition-group
+                            </q-item-label>
-                      name="fade"
+                            <q-item-label caption>{{
-                      mode="out-in"
+                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
-                      appear
+                            }}</q-item-label>
-                      enter-active-class="animazione fadeIn"
+                          </q-item-section>
-                      leave-active-class="animazione fadeOut"
+                          <q-item-section side>
-                    >
+                            <div
-                      <q-item
+                              :class="
-                        v-for="(user, index) in strettelist"
+                                `text-h6 q-mr-sm text-bold ` + $q.dark.isActive
-                        :key="index"
+                                  ? `text-white`
-                        class="animated chip_shadow q-ma-sm"
+                                  : `text-black`
-                        clickable
+                              "
-                        v-ripple
-                        @click="gotoPage(`/my/${user.username}`)"
-                      >
-                        <q-item-section avatar>
-                          <q-avatar round size="48px">
-                            <img :src="userStore.getImgByProfile(user)" />
-                            <q-badge
-                              v-if="tools.isUserOnline(user)"
-                              align="top"
-                              floating
-                              color="green"
-                              >online</q-badge
                             >
-                          </q-avatar>
+                              <CTimeAgo :datetime="user.lasttimeonline" />
-                        </q-item-section>
+                            </div>
-                        <q-item-section class="">
+                          </q-item-section>
-                          <q-item-label overline>
+                        </q-item>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
+                      </transition-group>
-                          </q-item-label>
+                    </q-list>
-                          <q-item-label>
+                  </div>
-                            {{ tools.getNameToShow(user) }}</q-item-label
+                </q-card-section>
-                          >
+              </q-card>
-                          <q-item-label caption>{{
+            </q-expansion-item>
-                            tools.getUserNameOnlyIfToShow(user)
+
-                          }}</q-item-label>
+            <q-separator />
-                        </q-item-section>
+
-                        <q-item-section side
+            <q-expansion-item
-                          ><div
+              v-if="false"
-                            :class="
+              expand-separator
-                              `text-h6 q-mx-sm q-px-sm text-bold ` +
+              group="somegroup"
-                              ($q.dark.isActive ? `text-white` : `text-black`)
+              icon="fas fa-medal"
-                            "
+              :label="$t('statusreg.diffusori')"
-                          >
+              header-class="text-purple"
-                            {{ user.count }}
+            >
-                          </div></q-item-section
+              <q-card>
+                <q-card-section>
+                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
+                    <div class="text-center text-bold text-h6">
+                      Aiuta RISO a crescere
+                    </div>
+                    <div class="text-center">
+                      Condividi il tuo link d'invito, alimentando nuovi ingressi
+                      alla RETE Solidale di RISO.
+                    </div>
+                    <q-list bordered>
+                      <transition-group
+                        name="fade"
+                        mode="out-in"
+                        appear
+                        enter-active-class="animazione fadeIn"
+                        leave-active-class="animazione fadeOut"
+                      >
+                        <q-item
+                          v-for="(user, index) in diffusorilist"
+                          :key="index"
+                          class="animated chip_shadow q-ma-sm"
+                          clickable
+                          v-ripple
+                          @click="gotoPage(`/my/${user.username}`)"
                         >
-                      </q-item>
+                          <q-item-section avatar>
-                    </transition-group>
+                            <q-avatar round size="48px">
-                  </q-list>
+                              <img :src="userStore.getImgByProfile(user)" />
-                </div>
+                              <q-badge
-              </q-tab-panel>
+                                v-if="tools.isUserOnline(user)"
-              <q-tab-panel name="sharedlink">
+                                align="top"
-                <div class="q-pa-md" style="max-width: 300px">
+                                floating
-                  <div class="text-center text-bold text-h6">
+                                color="green"
-                    Registrati con questi invitanti:
+                                >online</q-badge
-                  </div>
+                              >
-                  <div class="text-center">
+                            </q-avatar>
-                    Cliccare sulla persona per procedere alla registrazione
+                          </q-item-section>
-                  </div>
+                          <q-item-section class="">
-                  <q-list bordered>
+                            <q-item-label overline>
-                    <transition-group
+                              <div class="index_diffusore">
-                      name="fade"
+                                {{ index + 1 }}°
-                      mode="out-in"
+                              </div>
-                      appear
+                            </q-item-label>
-                      enter-active-class="animazione fadeIn"
+                            <q-item-label>
-                      leave-active-class="animazione fadeOut"
+                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
-                    >
+                            </q-item-label>
-                      <q-item
+                            <q-item-label caption>{{
-                        v-for="(user, index) in lastssharedlink"
+                              tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
-                        :key="index"
+                            }}</q-item-label>
-                        class="animated chip_shadow q-ma-sm"
+                          </q-item-section>
-                        clickable
+                          <q-item-section side
-                        v-ripple
+                            ><div
-                        @click="gotoPage(`/registrati/${user.username}`)"
+                              :class="
-                      >
+                                `text-h6 q-mx-sm q-px-sm text-bold ` +
-                        <q-item-section avatar>
+                                ($q.dark.isActive ? `text-white` : `text-black`)
-                          <q-avatar round size="48px">
+                              "
-                            <img :src="userStore.getImgByProfile(user)" />
-                            <q-badge
-                              v-if="tools.isUserOnline(user)"
-                              align="top"
-                              floating
-                              color="green"
-                              >online</q-badge
                             >
-                          </q-avatar>
+                              {{ user.count }}
-                        </q-item-section>
+                            </div></q-item-section
-                        <q-item-section class="">
-                          <q-item-label overline>
-                            <div class="index_diffusore">{{ index + 1 }}°</div>
-                          </q-item-label>
-                          <q-item-label>
-                            {{ tools.getNameToShow(user) }}</q-item-label
                           >
-                          <q-item-label caption>{{
+                        </q-item>
-                            tools.getUserNameOnlyIfToShow(user)
+                      </transition-group>
-                          }}</q-item-label>
+                    </q-list>
-                        </q-item-section>
+                  </div>
-                        <q-item-section side
+                </q-card-section>
-                          ><span class="text-h6 q-mr-sm"></span
+              </q-card>
-                        ></q-item-section>
+            </q-expansion-item>
-                      </q-item>
+
-                    </transition-group>
+            <q-separator />
-                  </q-list>
+
-                </div>
+            <q-expansion-item
-              </q-tab-panel>
+              group="somegroup"
-            </q-tab-panels>
+              icon="fas fa-handshake"
-          </div>
+              :label="$t('handshake.last_strettedimano')"
+              header-class="bg-teal text-white"
+              expand-icon-class="text-white"
+            >
+              <q-card class="bg-teal-2">
+                <q-card-section>
+                  <div class="q-pa-md" style="max-width: 350px; margin: auto">
+                    <div class="text-center text-bold text-h6">
+                      Strette di Mano
+                    </div>
+                    <div class="text-center">
+                      Più persone conoscerai di persona e maggiore aumenterà la
+                      Rete di fiducia.
+                    </div>
+                    <q-list bordered>
+                      <transition-group
+                        name="fade"
+                        mode="out-in"
+                        appear
+                        enter-active-class="animazione fadeIn"
+                        leave-active-class="animazione fadeOut"
+                      >
+                        <q-item
+                          v-for="(user, index) in strettelist"
+                          :key="index"
+                          class="animated chip_shadow q-ma-sm"
+                          clickable
+                          v-ripple
+                        >
+                          <q-item-section avatar>
+                            <q-avatar
+                              round
+                              size="48px"
+                              @click="gotoPage(`/my/${user.username}`)"
+                            >
+                              <img :src="userStore.getImgByProfile(user)" />
+                              <q-badge
+                                v-if="tools.isUserOnline(user)"
+                                align="top"
+                                floating
+                                color="green"
+                                >online</q-badge
+                              >
+                            </q-avatar>
+                          </q-item-section>
+                          <q-item-section class="">
+                            <q-item-label class="clDateStrette">
+                              {{
+                                tools.getstrDateTimeLong(
+                                  user.profile.handshake.date
+                                )
+                              }}</q-item-label
+                            >
+                            <q-item-label>
+                              {{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
+                            </q-item-label>
+
+                            <q-item-label style="text-align: right">
+                              {{ tools.getNameToShow(user.userfriend, null, {showprov: true, html: true}) }}
+                              </q-item-label
+                            >
+                          </q-item-section>
+                          <q-item-section side>
+                            <q-avatar
+                              round
+                              size="48px"
+                              @click="
+                                gotoPage(`/my/${user.userfriend.username}`)
+                              "
+                            >
+                              <img
+                                :src="
+                                  userStore.getImgByProfile(user.userfriend)
+                                "
+                              />
+                              <q-badge
+                                v-if="tools.isUserOnline(user.userfriend)"
+                                align="top"
+                                floating
+                                color="green"
+                                >online</q-badge
+                              >
+                            </q-avatar>
+                          </q-item-section>
+                        </q-item>
+                      </transition-group>
+                    </q-list>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </q-expansion-item>
+          </q-list>
 
           <!--<CGeoChart :mydata="datastat.arr_nations">
 

src/css/app.scss

@@ -1132,8 +1132,9 @@ h3 {
 .imgprofile {
   border: 0px solid rgb(29, 118, 13);
   border-radius: 16px;
-  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
   margin: 1px;
+  object-position: 50% 5% !important;
 }
 
 .imgprofile_small {
@@ -1404,8 +1405,10 @@ h3 {
 .chip_shadow {
   border-radius: 20px;
   background: #1729ea;
-  background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
+  background: -webkit-linear-gradient(45deg, #1e90ff, #3742fa) !important; /* A combination of lighter blues */
-  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
+  background: linear-gradient(45deg, #3a90e7, #8e92e4) !important;
+  box-shadow: 1px 1px 3px #5f6f8b;
+  color: #ffffff; /* Ensure the text is white for better contrast */
 }
 
 .last_access {
@@ -1948,6 +1951,20 @@ h3 {
   text-align: center;
 }
 
+.ev_hour, .ev_hour_end {
+  color: black;
+  font-size: 0.85rem;
+  text-align: center;
+}
+
+.ev_hour{
+  color: green;
+}
+
+.ev_hour_end{
+  color: red;
+}
+
 .col-105 {
   height: auto;
   width: 90%;
@@ -2314,6 +2331,13 @@ $coloreprincipale: lightblue;
   --background-odd-light: white;
   --background-even-dark: rgba(45, 45, 45, 0.7); /* Aggiustare per il tema dark */
   --background-odd-dark: rgba(30, 30, 30, 1); /* Aggiustare per il tema dark */
+  --text-color: #555;
+  --bg-color: #f9f9f9;
+}
+
+body.body--dark {
+  --text-color: #bbb;
+  --bg-color: #333;
 }
 
 .background-even {
@@ -2347,3 +2371,21 @@ $coloreprincipale: lightblue;
   }  
 }
 
+.citation {
+  font-style: italic; /* Testo in corsivo per indicare una citazione */
+  border-left: 4px solid #cccccc; /* Barra verticale per evidenziare la citazione */
+  margin: 10px 0; /* Spaziatura verticale */
+  padding: 10px 20px; /* Spaziatura interna */
+  color: #555555; /* Colore del testo leggermente attenuato */
+  background-color: #f9f9f9; /* Sfondo leggero per evidenziare la citazione */
+}
+
+.comment {
+  font-size: 0.9em; /* Testo leggermente più piccolo */
+  color: #666666; /* Colore del testo attenuato */
+  background-color: #f4f4f4; /* Sfondo neutro */
+  padding: 10px; /* Spaziatura interna */
+  border-radius: 5px; /* Angoli arrotondati */
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); /* Leggera ombra per effetto di profondità */
+  margin: 10px 0; /* Spaziatura verticale */
+}

src/model/GlobalStore.ts

@@ -140,6 +140,7 @@ export interface IMyElem {
   parambool2?: boolean
   parambool3?: boolean
   number?: number
+  num2?: number
   imgback?: string
   ratio?: string
   containerHtml?: string

src/statics/lang/it.js

@@ -313,7 +313,7 @@ const msg_it = {
       domanda_removefriend: 'Rimuovi dagli Amici {username}?',
       domanda_removehandshake: 'Rimuovi dalla lista Strette di Mano {username}?',
       domanda_exit_fromgroup: 'Uscire dal Gruppo {groupname} ?',
-      domanda_addadminofmygroup: 'Aggiungere {username} come Amministratore del Gruppo {groupname} ?',
+      domanda_addadminofmygroup: 'Aggiungere {username} come Amministratore / Amministratrice del Gruppo {groupname} ?',
       domanda_removeadminofmygroup: 'Rimuovere {username} dall\' incarico di Amministratore del Gruppo {groupname} ?',
       removedfriend: 'Rimosso dalla lista di Amici',
       removedhandshake: 'Rimosso dalla lista Strette di Mano',
@@ -1255,6 +1255,7 @@ const msg_it = {
     handshake: {
       strettadimano: 'Stretta di mano',
       strettedimano: 'Strette di mano',
+      last_strettedimano: 'Ultime Strette di mano',
       received: 'Ricevute',
       incommon: 'Strette in Comune',
       accept_trust: 'Accetta la Stretta di mano',
@@ -1452,7 +1453,7 @@ const msg_it = {
       remove_from_mylist: 'Rimuovi dal Circuito',
       reject_ask: 'Rifiuta l\'ingresso dal Circuito',
       domanda_exit_fromcircuit: 'Sei veramente sicuro di voler uscire dal {circuitname} ?',
-      domanda_addadminofcircuit: 'Aggiungere {username} come Amministratore del {circuitname} ?',
+      domanda_addadminofcircuit: 'Aggiungere {username} come Amministratore/Amministratrice del {circuitname} ?',
       domanda_removeadminofcircuit: 'Rimuovere {username} dall\' incarico di Amministratore del {circuitname} ?',
       domanda_refuse_circuit: 'Rifiutare la richiesta di {username} per entrare nel {circuitname}?',
       refusedcircuit: 'Rifiutato a {username} la richiesta di entrare nel Circuito',
@@ -1673,6 +1674,8 @@ const msg_it = {
     },
 
     statusreg: {
+      invite_by: 'Invitata da',
+      has_invited: 'ha invitato',
       reg: 'Utenti Attivi',
       verifieds: 'Verificati',
       online_today: 'On Line Oggi',
@@ -1681,11 +1684,12 @@ const msg_it = {
       autorizzare: 'In attesa di Abilitazione',
       passeggeri: 'Passeggeri Navi',
       giainlista: 'Gia in Lista',
-      newreg: 'Iscritti',
+      newreg: 'Ultimi Iscritti',
-      onlineusers: 'OnLine',
+      onlineusers: 'OnLine ({today} oggi)',
       diffusori: 'Diffusori',
       strettelist: 'Strette',
       sharedlink: 'Diffusori',
+      lastsharedlink: 'Ultimi invitanti alla App',
       nationality: 'Nazionalità',
       nationality_born: 'Nazione di Nascita',
       verified: 'Verificata',

src/store/Modules/costanti.ts

@@ -310,6 +310,7 @@ export const costanti = {
   VISUTABLE_USER_TABGROUP: -4,
   VISUTABLE_USER_TABCIRCUIT: -5,
   VISUTABLE_GROUP_CIRCUIT: -6,
+  VISUTABLE_GRID_ORIZ: -10,
 
   DIR_UPLOAD: 'upload/',
 

src/store/Modules/fieldsTable.ts

@@ -165,6 +165,7 @@ export const colmyelems = [
   AddCol({ name: 'parambool2', label_trans: 'myelems.parambool2', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'parambool3', label_trans: 'myelems.parambool3', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'number', label_trans: 'myelems.number', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'num2', label_trans: 'myelems.num2', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'imgback', label_trans: 'myelems.imgback' }),
   AddCol({ name: 'size', label_trans: 'myelems.size' }),
   AddCol({ name: 'ratio', label_trans: 'myelems.ratio' }),

src/store/Modules/tools.ts

@@ -3309,6 +3309,11 @@ export const tools = {
     if (mytimestamp) return date.formatDate(mytimestamp, 'DD/MM HH:mm')
     return ''
   },
+  getstrDateTimeLong(mytimestamp: Date | number | string | undefined) {
+    // console.log('getstrDate', mytimestamp)
+    if (mytimestamp) return date.formatDate(mytimestamp, 'DD/MMM/YYYY HH:mm')
+    return ''
+  },
 
   getstrDateMonthTimeShort(mytimestamp: Date | number | string | undefined) {
     // console.log('getstrDate', mytimestamp)

src/store/UserStore.ts

@@ -683,12 +683,12 @@ export const useUserStore = defineStore('UserStore', {
     },
 
     getLinkProfileAndRIS(username: string, qtyris: string, causale: string = ''): string {
-      
+
       let myparams = ''
       if (username === '')
         username = this.my.username
       let mylink = tools.getUrlSite() + '/my/' + username
-      
+
       let myval = tools.strToVal(qtyris, true)
       if (myval !== null) {
         if (myparams)
@@ -773,7 +773,7 @@ export const useUserStore = defineStore('UserStore', {
       return myrec
     },
 
-    getNameToShow(user: any, col: any = null): string {
+    getNameToShow(user: any, col: any = null, options: any = {}): string {
       let name = ''
       let myrec = this.getRecByCol(user, col)
 
@@ -812,14 +812,27 @@ export const useUserStore = defineStore('UserStore', {
       if (!name && myrec.extrarec && myrec.extrarec.hasOwnProperty('contoComDest'))
         return myrec.extrarec.contoComDest
 
-      return name
+      return name + (options && options.showprov ? this.getProvinceByUser(myrec, options ? options.html : false) : '')
+
     },
 
-    getUserNameOnlyIfToShow(user: any, col: any = null): string {
+    getProvinceByUser(user: IUserFields, html: boolean = false) {
+      let mystr = ''
+      if (user && user.profile && user.profile.resid_province)
+        mystr = `(${user.profile.resid_province})`
+
+      if (html) {
+        mystr = `<span style='text-align: right'>${mystr}</span>`
+      }
+
+      return mystr
+    },
+
+    getUserNameOnlyIfToShow(user: any, col: any = null, options: any): string {
       let myrec = this.getRecByCol(user, col)
 
       if (myrec.name || myrec.surname) {
-        return myrec.username
+        return myrec.username + ((options && options.showprov) ? this.getProvinceByUser(myrec, options.html) : '')
       }
 
       return ''

src/views/user/myprofile/myprofile.scss

@@ -14,5 +14,9 @@
 .qualifica{
   border: solid 2px #4198ef;
   border-radius: 1rem;
-  padding: 5px;
+  padding: 4px;
+  margin: 2px;
+  text-align: center;
+  box-shadow: 0 0 0 1px #4A89F3;
+  text-shadow: .05rem .05rem .15rem #878787;
 }

src/views/user/myprofile/myprofile.vue

@@ -129,9 +129,9 @@
         <div v-if="userStore.userprofile._id" class="col-12 text-h8 q-mt-sm">
           <span v-if="userStore.userprofile.profile.qualifica">
             <em
-              ><span class="qualifica">{{
+              ><div class="qualifica">{{
                 userStore.userprofile.profile.qualifica
-              }}</span></em
+              }}</div></em
             >
           </span>
         </div>
@@ -247,9 +247,9 @@
           >
             <span v-if="userStore.userprofile.profile.qualifica">
               <em
-                ><span class="qualifica">{{
+                ><div class="qualifica">{{
                   userStore.userprofile.profile.qualifica
-                }}</span></em
+                }}</div></em
               >
             </span>
           </div>

yarn.lock

@@ -4843,7 +4843,7 @@ chart.js@^4.4.4:
   dependencies:
     "@kurkle/color" "^0.3.0"
 
-chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@3.6.0, chokidar@^3.4.2, chokidar@^3.5.2, chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -5676,7 +5676,7 @@ debug@2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
+debug@4, debug@^4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@^4.3.6, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -7782,6 +7782,11 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+ignore-by-default@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
+
 ignore-walk@^6.0.4:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-6.0.5.tgz#ef8d61eab7da169078723d1f82833b36e200b0dd"
@@ -8736,6 +8741,11 @@ js-yaml@~3.7.0:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
+jsbarcode@^3.5.8:
+  version "3.11.6"
+  resolved "https://registry.yarnpkg.com/jsbarcode/-/jsbarcode-3.11.6.tgz#96e8fbc3395476e162982a6064b98a09b5ea02c0"
+  integrity sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==
+
 jsbn@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
@@ -9949,6 +9959,22 @@ node-sass@^9.0.0:
     stdout-stream "^1.4.0"
     "true-case-path" "^2.2.1"
 
+nodemon@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-3.1.7.tgz#07cb1f455f8bece6a499e0d72b5e029485521a54"
+  integrity sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==
+  dependencies:
+    chokidar "^3.5.2"
+    debug "^4"
+    ignore-by-default "^1.0.1"
+    minimatch "^3.1.2"
+    pstree.remy "^1.1.8"
+    semver "^7.5.3"
+    simple-update-notifier "^2.0.0"
+    supports-color "^5.5.0"
+    touch "^3.1.0"
+    undefsafe "^2.0.5"
+
 nopt@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
@@ -11358,6 +11384,11 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
 
+pstree.remy@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
+
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -12258,6 +12289,13 @@ sigstore@^2.2.0:
     "@sigstore/tuf" "^2.3.4"
     "@sigstore/verify" "^1.2.1"
 
+simple-update-notifier@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
+  integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==
+  dependencies:
+    semver "^7.5.3"
+
 sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -12798,7 +12836,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -13025,6 +13063,11 @@ totalist@^3.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
   integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
+touch@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
+  integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -13255,6 +13298,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undefsafe@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
+
 undici-types@~6.19.2:
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
@@ -13473,6 +13521,13 @@ vendors@^1.0.0:
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+vue-barcode@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vue-barcode/-/vue-barcode-1.3.0.tgz#c1a4fede73b2d45cdd154a176d6fd0e20fb32df0"
+  integrity sha512-DxQ0hxes/dP6GajsJumpW6jV14VwlnTwStZbtE6G0wkewuJVDoDOdxUr5seGuxsMT9fJ0aty4X47Z5TG0M/gxg==
+  dependencies:
+    jsbarcode "^3.5.8"
+
 vue-class-component@^6.0.0, vue-class-component@^6.2.0:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"