Circuit table...

src/components/CFinder/CFinder.ts

@@ -49,6 +49,7 @@ export default defineComponent({
     const searchList_Servizi = ref(<ISearchList[]>[])
     const searchList_Beni = ref(<ISearchList[]>[])
     const searchList_MyGroups = ref(<ISearchList[]>[])
+    const searchList_MyCircuits = ref(<ISearchList[]>[])
     const searchList_Events = ref(<ISearchList[]>[])
     const searchList_Hosp = ref(<ISearchList[]>[])
 
@@ -89,6 +90,12 @@ export default defineComponent({
                 $elemMatch: { username: { $eq: userStore.my.username } }
               },
             }]
+          } else if (props.table === toolsext.TABCIRCUITS) {
+            filtercustom.value = [{
+              'admins': {
+                $elemMatch: { username: { $eq: userStore.my.username } }
+              },
+            }]
 
           } else {
             filtercustom.value = [{ userId: userStore.my._id }]
@@ -118,6 +125,8 @@ export default defineComponent({
         return searchList_Servizi.value
       else if (props.table === toolsext.TABMYGROUPS)
         return searchList_MyGroups.value
+      else if (props.table === toolsext.TABCIRCUITS)
+        return searchList_MyCircuits.value
       else if (props.table === toolsext.TABMYBACHECAS)
         return searchList_Events.value
       else if (props.table === toolsext.TABMYHOSPS)
@@ -133,6 +142,8 @@ export default defineComponent({
         return costanti.SHOW_MYCARD
       else if (props.table === toolsext.TABMYGROUPS)
         return costanti.SHOW_MYCARD
+      else if (props.table === toolsext.TABCIRCUITS)
+        return costanti.SHOW_MYCARD
 
       return costanti.SHOW_MYCARD
     })
@@ -144,6 +155,8 @@ export default defineComponent({
         return 'nome del Servizio o settore da cercare'
       else if (props.table === toolsext.TABMYGROUPS)
         return 'nome del Gruppo da cercare'
+      else if (props.table === toolsext.TABCIRCUITS)
+        return 'nome del Circuito da cercare'
       else if (props.table === toolsext.TABMYBACHECAS)
         return 'nome dell\'Evento da cercare'
       else if (props.table === toolsext.TABMYHOSPS)
@@ -172,6 +185,8 @@ export default defineComponent({
         return 'Nessun Servizio trovato con i filtri selezionati'
       else if (props.table === toolsext.TABMYGROUPS)
         return 'Nessun Gruppo trovato con i filtri selezionati'
+      else if (props.table === toolsext.TABCIRCUITS)
+        return 'Nessun Circuito trovato con i filtri selezionati'
       else if (props.table === toolsext.TABMYBACHECAS)
         return 'Nessun Evento trovato con i filtri selezionati'
       else if (props.table === toolsext.TABMYHOSPS)
@@ -817,6 +832,21 @@ export default defineComponent({
 
       ]
 
+      searchList_MyCircuits.value = [
+        {
+          label: 'Regione',
+          table: 'regions',
+          key: 'idReg',
+          type: costanti.FieldType.select,
+          value: tools.getCookie(tools.COOK_SEARCH + 'regions', costanti.FILTER_TUTTI),
+          addall: true,
+          arrvalue: [],
+          filter: null,
+          useinput: false,
+          icon: 'fas fa-globe-europe'
+        },
+      ]
+
       searchList_MyGroups.value = [
         {
           label: 'Regione',
@@ -1247,6 +1277,8 @@ export default defineComponent({
         return tools.getdefaultnewrec_MyGoods()
       } else if (props.table === toolsext.TABMYGROUPS) {
         return tools.getdefaultnewrec_MyGroup()
+      } else if (props.table === toolsext.TABCIRCUITS) {
+        return tools.getdefaultnewrec_Circuit()
       }
       return null
     }

src/components/CGridTableRec/CGridTableRec.ts

@@ -25,6 +25,7 @@ import { CMyGroups } from '../CMyGroups'
 import { CMyFieldDb } from '../CMyFieldDb'
 import { CMyRecCard } from '../CMyRecCard'
 import { CMyRecGrpCard } from '../CMyRecGrpCard'
+import { CMyRecCircuitCard } from '../CMyRecCircuitCard'
 import { CMySelect } from '../CMySelect'
 import { CTitleBanner } from '../CTitleBanner'
 
@@ -36,6 +37,7 @@ import translate from '@/globalroutines/util'
 import { toolsext } from '@store/Modules/toolsext'
 import { CMyCardPopup } from '@/components/CMyCardPopup'
 import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
+import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
 import { useRouter } from 'vue-router'
 
 export default defineComponent({
@@ -216,7 +218,9 @@ export default defineComponent({
       default: '',
     },
   },
-  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups, CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup },
+  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
+    CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
+    CMyRecCircuitCard },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -918,6 +922,7 @@ export default defineComponent({
     }
 
     function refresh_infscroll(done: any) {
+      console.log('refresh_infscroll')
       rowclicksel.value = null
 
       onUpdateData(0,

src/components/CGridTableRec/CGridTableRec.vue

@@ -228,6 +228,13 @@
             @cmdext="cmdExt"
           >
           </CMyRecGrpCard>
+          <CMyRecCircuitCard
+            v-else-if="tablesel === toolsext.TABCIRCUITS"
+            :table="tablesel"
+            :prop_myrec="row"
+            @cmdext="cmdExt"
+          >
+          </CMyRecCircuitCard>
           <CMyRecCard
             v-else
             :table="tablesel"
@@ -595,67 +602,6 @@
 
       <template v-slot:item="props">
         <div
-          v-if="showType === costanti.SHOW_MYCARD || (myvertical !== costanti.VISUTABLE_USER_TABGROUP && myvertical === costanti.VISUTABLE_LISTA && shared_consts.TABLES_VISU_CMYSRECCARD.includes(tablesel)) ">
-
-          <div v-if="props.row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
-
-            <div v-if="props.row.dateTimeStart && (tools.getstrVeryShortDate(props.row.dateTimeStart) !== actual)" class="actualdate">
-              <span style="display: none">{{ actual = tools.getstrVeryShortDate(props.row.dateTimeStart) }}</span>
-              <q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(props.row.dateTimeStart) }}</q-chip>
-            </div>
-          </div>
-
-          <CMyRecGrpCard
-            v-if="tablesel === toolsext.TABMYGROUPS"
-            :table="tablesel"
-            :prop_myrec="props.row"
-            @cmdext="cmdExt"
-          >
-          </CMyRecGrpCard>
-          <CMyRecCard
-            v-else
-            :table="tablesel"
-            :prop_myrec="props.row"
-            @cmdext="cmdExt"
-          >
-          </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="props.row"
-              :visu="visufind"
-              :groupname="extrafield"
-              :labelextra="col_title ? props.row[col_title] : ''"
-              :labelFooter="col_footer ? getLabelFooterByRow(props.row) : ''"
-            >
-            </CMyUser>
-
-            <q-separator></q-separator>
-          </div>
-
-        </div>
-        <div
-          v-else-if="((showType === costanti.SHOW_GROUPINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_GROUP) || ((myvertical === 2) && (tablesel === 'mygroups'))"
-          class="fill-all-width">
-          <div>
-
-            <CMyGroups
-              v-model="filtergrp"
-              :finder="false"
-              :mygrp="props.row"
-              :visu="costanti.FIND_GROUP"
-            />
-          </div>
-
-        </div>
-        <div
-          v-else
           class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 "
           :style="props.selected ? 'transform: scale(0.95);' : ''"
         >
@@ -738,6 +684,12 @@
         :prop_myrec="myrecdialog">
 
       </CMyCardGrpPopup>
+      <CMyCardCircuitPopup
+        v-if="mytable === toolsext.TABCIRCUITS"
+        :table="mytable"
+        :prop_myrec="myrecdialog">
+
+      </CMyCardCircuitPopup>
       <CMyCardPopup
         v-else
         :table="mytable"

src/components/CMyCardCircuitPopup/CMyCardCircuitPopup.scss

@@ -0,0 +1,127 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}
+
+.qualifica{
+  border: solid 2px #4198ef;
+  border-radius: 1rem;
+  padding: 5px;
+}
+
+
+.text-bacheca{
+  margin: 10px;
+  border: solid 2px #4198ef;
+  border-radius: 1rem;
+  padding: 10px;
+
+}
+
+.note-bacheca{
+  border: solid 2px #C10015;
+  border-radius: 1rem;
+  padding: 10px;
+
+}
+
+.img {
+  margin-left: auto;
+  margin-right: auto;
+
+  max-height: 350px;
+  max-width: 350px;
+  @media (max-width: 500px) {
+    max-height: 400px;
+    max-width: 400px;
+  }
+}
+
+$graytext: #555;
+.cal {
+  color: black;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;
+    }
+  }
+
+  &__when {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;;
+    }
+  }
+
+  &__teacher {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;;
+    }
+  }
+
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}

src/components/CMyCardCircuitPopup/CMyCardCircuitPopup.ts

@@ -0,0 +1,109 @@
+import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'
+
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CDateTime } from '@/components/CDateTime'
+import { CMyPage } from '@/components/CMyPage'
+import { CCheckIfIsLogged } from '@/components/CCheckIfIsLogged'
+import { CMyFieldRec } from '@/components/CMyFieldRec'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { IColGridTable, IImgGallery, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { colCitys, fieldsTable } from '@store/Modules/fieldsTable'
+import { useRoute } from 'vue-router'
+import { useNotifStore } from '@store/NotifStore'
+
+export default defineComponent({
+  name: 'CMyCardCircuitPopup',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CDateTime, CMyPage, CMyFieldRec, CCheckIfIsLogged },
+  props: {
+    table: {
+      type: String,
+      required: true,
+    },
+    prop_myrec: {
+      type: Object as PropType<any>,
+      required: false,
+      default: null,
+    },
+    idRec: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  setup(props) {
+
+    const userStore = useUserStore()
+    const notifStore = useNotifStore()
+    const globalStore = useGlobalStore()
+    const $q = useQuasar()
+    const $route = useRoute()
+    const { t } = useI18n()
+
+    const showPic = ref(false)
+
+    const idnotif = computed(() => $route.query.idnotif ? $route.query.idnotif.toString() : '')
+
+    const myrec = ref({})
+    const col = ref(<IColGridTable>{})
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function load() {
+      // Carica il profilo di quest'utente
+      if (props.idRec && props.idRec > 0) {
+        userStore.loadGeneric(props.table, props.idRec, idnotif.value).then((ris) => {
+          myrec.value = ris
+          notifStore.setAsRead(idnotif.value)
+        })
+
+      } else {
+        myrec.value = props.prop_myrec
+      }
+
+      col.value = fieldsTable.getArrColsByTable(props.table)
+    }
+
+    watch(() => props.idRec, (to: any, from: any) => {
+      load()
+    })
+
+    function mounted() {
+      load()
+    }
+
+    function condividipag() {
+      const msg = self.location.host + tools.getPathByCircuit(myrec.value, props.table)
+      return tools.copyStringToClipboard($q, msg, true)
+    }
+
+    onMounted(mounted)
+
+    return {
+      profile,
+      tools,
+      costanti,
+      myrec,
+      shared_consts,
+      globalStore,
+      showPic,
+      userStore,
+      t,
+      fieldsTable,
+      colCitys,
+      toolsext,
+      col,
+      condividipag,
+    }
+  }
+})

src/components/CMyCardCircuitPopup/CMyCardCircuitPopup.vue

@@ -0,0 +1,100 @@
+<template>
+  <div v-if="!tools.isLogged()">
+    <CCheckIfIsLogged></CCheckIfIsLogged>
+  </div>
+
+  <q-card class="dialog_card q-mb-lg" v-if="myrec">
+    <q-footer
+      class="bg-white small-screen-only text-center"
+      bordered
+    >
+      <q-btn push rounded color="primary" icon="close" label="Chiudi" v-close-popup></q-btn>
+
+    </q-footer>
+    <q-bar dense class="bg-primary text-white">
+      {{ myrec.name }} ({{ myrec.subname }})
+      <q-space/>
+      <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+    </q-bar>
+    <q-card-section class="inset-shadow">
+      <!-- Per ora visualizzo solo la Prima Immagine -->
+      <div class="text-center">
+
+        <q-img
+          v-if="userStore.getImgByCircuit(myrec)"
+          :src="userStore.getImgByCircuit(myrec)"
+          class="img"
+          alt="immagine del Circuito"></q-img>
+      </div>
+
+      <!--:title="t(mycol.label_trans)"-->
+
+      <div v-for="(mycol, index) of col" :key="index">
+        <div
+          v-if="(mycol.visible && (tools.checkIfShowField(mycol, tools.TIPOVIS_SHOW_RECORD, false, tools.getValue(myrec, mycol.field, mycol.subfield))))">
+          <div v-if="mycol.fieldtype === costanti.FieldType.html && tools.getValue(myrec, mycol.field, mycol.subfield)">
+            <div class="note-bacheca"
+                 v-html="tools.getValue(myrec, mycol.field, mycol.subfield)">
+
+            </div>
+          </div>
+          <div v-else-if="mycol.name === 'longdescr'">
+            <div class="text-bacheca">
+              {{ tools.getValue(myrec, mycol.field, mycol.subfield) }}
+            </div>
+          </div>
+          <div v-else-if="mycol.name === 'img_logo' && myrec.img_logo">
+          </div>
+          <div v-else-if="mycol.name === 'admins'">
+            <CMyFieldRec
+              title="Amministratori:"
+              :table="table"
+              :id="myrec._id"
+              :rec="myrec"
+              :field="mycol.field"
+              :canEdit="false"
+              :canModify="false">
+            </CMyFieldRec>
+
+          </div>
+          <CMyFieldRec
+            v-else
+            :table="table"
+            :id="myrec._id"
+            :rec="myrec"
+            :field="mycol.field"
+            :canEdit="false"
+            :canModify="false">
+          </CMyFieldRec>
+        </div>
+      </div>
+
+      <div class="row q-ma-sm q-pa-sm justify-center">
+        <div class="q-ma-sm">
+          <q-btn
+            icon="far fa-file-alt" label="Apri" color="primary" text-color="white"
+            :to="tools.getToByCol(col, table, myrec)"
+          />
+        </div>
+        <div class="q-ma-sm">
+          <q-btn
+            v-if="myrec._id"
+            text-color="black" icon="fas fa-share-alt"
+            label="Condividi"
+            @click="condividipag"></q-btn>
+        </div>
+      </div>
+
+      <br><br>
+    </q-card-section>
+
+  </q-card>
+</template>
+
+<script lang="ts" src="./CMyCardCircuitPopup.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyCardCircuitPopup.scss';
+</style>
+

src/components/CMyCardCircuitPopup/index.ts

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

src/components/CMyCircuit/CMyCircuit.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMyCircuit/CMyCircuit.ts

@@ -0,0 +1,93 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { ICircuit, IImgGallery, IUserFields, IUserProfile, IFriends } from 'model'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { CUserNonVerif } from '@/components/CUserNonVerif'
+import { toolsext } from '@store/Modules/toolsext'
+
+export default defineComponent({
+  name: 'CMyCircuit',
+  emits: ['setCmd'],
+  components: {CUserNonVerif},
+  props: {
+    mycircuit: {
+      type: Object as PropType<ICircuit | null>,
+      required: false,
+      default: null,
+    },
+    circuitname: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    visu: {
+      type: Number,
+      required: true,
+    }
+  },
+
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const $router = useRouter()
+    const $route = useRoute()
+
+    const circuit = ref(<ICircuit | null>null)
+
+    const table = ref(toolsext.TABCIRCUITS)
+
+    watch(() => props.mycircuit, (newval, oldval) => {
+      mounted()
+    })
+
+    function mounted() {
+      if (!props.mycircuit) {
+        if (props.circuitname) {
+          circuit.value = null
+        }
+      } else {
+        if (props.mycircuit) {
+          circuit.value = props.mycircuit
+        }
+      }
+    }
+
+    function getImgCircuit(circuit: ICircuit) {
+      return userStore.getImgByCircuit(circuit)
+    }
+
+    function naviga(path: string) {
+      $router.push(path)
+    }
+
+    function setCmd(cmd: number, myusername: string, value: any = '') {
+      emit('setCmd', cmd, myusername, value)
+    }
+
+    function myusername() {
+      return userStore.my.username
+    }
+
+    onMounted(mounted)
+
+    return {
+      circuit,
+      costanti,
+      getImgCircuit,
+      naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      table,
+      myusername,
+    }
+  },
+})

src/components/CMyCircuit/CMyCircuit.vue

@@ -0,0 +1,117 @@
+<template>
+  <div v-if="tools.isUserOk()">
+    <div v-if="circuit">
+      <q-item class="q-my-sm" clickable>
+        <q-item-section avatar @click="naviga(tools.getPathByCircuit(circuit, table))">
+          <q-avatar size="60px">
+            <q-img :src="getImgCircuit(circuit)" :alt="circuit.name" img-class="imgprofile" height="60px"/>
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section @click="naviga(tools.getPathByCircuit(circuit, table))">
+          <q-item-label><strong>{{ circuit.name }}</strong> ({{ circuit.subname }})
+          </q-item-label>
+          <q-item-label v-if="circuit.longdescr" caption lines="3"><em>{{ circuit.longdescr }}</em></q-item-label>
+        </q-item-section>
+
+        <q-item-section side v-if="visu === costanti.MY_CIRCUITS">
+          <q-item-label>
+            <q-btn rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REMOVE_FROM_MYGROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.remove_from_mygroups') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-if="tools.iAmAdminGroup(circuit.groupnameId)" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list style="min-width: 150px">
+                  <q-item v-if="!tools.iAmAdminGroup(circuit.groupnameId)" clickable icon="fas fa-ban" v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.BLOCK_GROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.block_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side v-if="visu === costanti.USER_GROUPS">
+          <q-item-label>
+            <q-btn rounded :icon="userStore.IsMyGroupByGroupname(circuit.groupnameId) ? `fas fa-ellipsis-h` : `fas fa-user`">
+              <q-menu>
+                <q-list v-if="(!userStore.IsMyGroupByGroupname(circuit.groupnameId) && !userStore.IsAskedGroupByGroupname(circuit.groupnameId) && !userStore.IsRefusedGroupByGroupname(circuit.groupnameId))" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), true, circuitgroupnameId)">
+                    <q-item-section>{{ $t('groups.ask_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-else-if="(!userStore.IsMyGroupByGroupname(circuit.groupnameId) && userStore.IsAskedGroupByGroupname(circuit.groupnameId) && !userStore.IsRefusedGroupByGroupname(circuit.groupnameId))" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.refuse_ask_group') }}</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.cancel_ask_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-else-if="userStore.IsMyGroupByGroupname(circuit.groupnameId)" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.REMOVE_FROM_MYGROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.exit_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-if="tools.iAmAdminGroup(circuit.groupnameId)" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side v-if="visu === costanti.REQ_GROUP">
+          <q-item-label>
+            <q-btn rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REQGROUP, myusername(), false, circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.reject_ask_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side v-if="visu === costanti.ASK_SENT_CIRCUIT">
+          <q-item-label>
+            <q-btn rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.REFUSE_REQ_GROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.refuse_ask_group') }}</q-item-section>
+                  </q-item>
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="tools.setCmd($q, shared_consts.GROUPSCMD.CANCEL_REQ_GROUP, myusername(), '', circuit.groupnameId)">
+                    <q-item-section>{{ $t('groups.cancel_ask_group') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </div>
+  </div>
+  <div v-else>
+    <CUserNonVerif></CUserNonVerif>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyCircuit.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyCircuit.scss';
+</style>

src/components/CMyCircuit/index.ts

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

src/components/CMyCircuits/CMyCircuits.ts

@@ -0,0 +1,131 @@
+import { CMyCircuit } from '@/components/CMyCircuit'
+import { computed, defineComponent, onMounted, PropType, ref, toRef } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useCircuitStore } from '@store/CircuitStore'
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { ICircuit, ISearchList, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { tools } from '@store/Modules/tools'
+import { CUserNonVerif } from '@/components/CUserNonVerif'
+
+
+export default defineComponent({
+  name: 'CMyCircuits',
+  components: { CMyCircuit, CUserNonVerif },
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    finder: {
+      type: Boolean,
+      required: true,
+    },
+    circuit: {
+      type: Object as PropType<ICircuit | null>,
+      required: false,
+      default: null,
+    },
+    circuitname: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    visu: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const circuitStore = useCircuitStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const username = ref('')
+
+    const filtroutente = ref(<any[]>[])
+
+    const listcircuitsfiltered = computed(() => {
+      let arr: any[] = []
+      try {
+        if (props.modelValue === costanti.CIRCUITS) {
+          arr = circuitStore.listcircuits
+         } else if (props.modelValue === costanti.MY_USERACCOUNTS ) {
+             arr = userStore.my.profile.listUserAccounts
+        } else if (props.modelValue === costanti.MANAGE_CIRCUITS) {
+          // arr = userStore.my.profile.manage_mycircuits
+        } else if (props.modelValue === costanti.ASK_SENT_CIRCUIT) {
+          arr = userStore.my.profile.asked_circuits
+        }
+      } catch (e) {
+        arr = []
+      }
+
+      return arr
+    })
+
+    const myoptions = computed(() => {
+      const mybutt = []
+      mybutt.push({ label: t('mypages.find_circuit'), value: costanti.FIND_CIRCUIT })
+      mybutt.push({ label: t('mypages.follow_circuits') + ' (' + numMyCircuits.value + ')', value: costanti.MY_USERACCOUNTS })
+      // mybutt.push({ label: t('mypages.manage_my_circuits') + ' (' + numManageCircuits.value + ')', value: costanti.MANAGE_CIRCUITS })
+
+
+      if (numAskSentCircuits.value > 0 || props.modelValue === costanti.ASK_SENT_CIRCUIT)
+        mybutt.push({
+          label: t('mypages.request_sent_circuits') + ' (' + numAskSentCircuits.value + ')',
+          value: costanti.ASK_SENT_CIRCUIT
+        })
+
+
+      return mybutt
+    })
+
+
+    const numMyCircuits = computed(() => {
+      const arr = userStore.my.profile.listUserAccounts
+      return (arr) ? arr.length : 0
+    })
+
+    const numAskSentCircuits = computed(() => {
+      const arr = userStore.my.profile.asked_circuits
+      return (arr) ? arr.length : 0
+    })
+
+    async function loadCircuits() {
+      // Carica il profilo di quest'utente
+      if (username.value) {
+        filtroutente.value = await tools.loadCircuits()
+      }
+    }
+
+    function mounted() {
+      username.value = userStore.my.username
+      loadCircuits()
+
+    }
+
+    function updateValue(val: number) {
+      emit('update:modelValue', val)
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      costanti,
+      shared_consts,
+      filtroutente,
+      listcircuitsfiltered,
+      updateValue,
+      myoptions,
+      userStore,
+    }
+  }
+})

src/components/CMyCircuits/CMyCircuits.vue

@@ -0,0 +1,55 @@
+<template>
+  <div v-if="tools.isUserOk()">
+    <div v-if="finder" class="q-gutter-sm q-pa-sm q-pb-sm">
+      <q-btn-toggle
+        :model-value="modelValue"
+        @update:model-value="updateValue"
+        class="my-custom-toggle"
+        no-caps
+        rounded
+        unelevated
+        push
+        toggle-color="primary"
+        color="white"
+        text-color="primary"
+        :options="myoptions"
+      />
+    </div>
+    <div v-if="finder" class="">
+      <div v-if="modelValue === costanti.FIND_CIRCUIT">
+        <slot></slot>
+      </div>
+      <div v-else>
+        <q-list>
+        <span v-for="(circuit, index) in listcircuitsfiltered" :key="index" class="q-my-sm" clickable>
+          <CMyCircuit
+            :mycircuit="circuit"
+            :visu="modelValue">
+          </CMyCircuit>
+        </span>
+        </q-list>
+      </div>
+    </div>
+    <div v-else>
+      <q-list class="width-container">
+      <span class="q-my-sm" clickable>
+      <CMyCircuit
+        :mycircuit="mycircuit"
+        :visu="visu">
+      </CMyCircuit>
+      </span>
+      </q-list>
+    </div>
+  </div>
+  <div v-else>
+    <CUserNonVerif></CUserNonVerif>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyCircuits.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyCircuits';
+</style>
+

src/components/CMyCircuits/index.ts

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

src/components/CMyGroup/CMyGroup.vue

@@ -83,7 +83,7 @@
             </q-btn>
           </q-item-label>
         </q-item-section>
-        <q-item-section side v-if="visu === costanti.ASK_SENT_GROUPS">
+        <q-item-section side v-if="visu === costanti.ASK_SENT_GROUP">
           <q-item-label>
             <q-btn rounded icon="fas fa-ellipsis-h">
               <q-menu>

src/components/CMyRecCircuitCard/CMyRecCircuitCard.scss

@@ -0,0 +1,30 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}
+
+.text_user_city{
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 0.85rem;
+  color: grey;
+}
+
+
+.actualdate{
+
+}
+
+
+.cardrec{
+  @media (min-width: 500px) {
+    margin: 1px;
+    padding: 4px;
+  }
+
+}
+
+.text_title{
+  color: blue;
+}

src/components/CMyRecCircuitCard/CMyRecCircuitCard.ts

@@ -0,0 +1,74 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { IImgGallery, 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 { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { CMyCardPopup } from '@/components/CMyCardPopup'
+// import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMyRecCircuitCard',
+  components: { CMyCardPopup },
+  emits: ['setCmd', 'cmdext'],
+  props: {
+    table: {
+      type: String,
+      required: true,
+    },
+    prop_myrec: {
+      type: Object as PropType<any | null>,
+      required: false,
+      default: null,
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    // const $q = useQuasar()
+    const { t } = useI18n()
+    // const $router = useRouter()
+
+    const myrec = ref(<any | null>null)
+
+    watch(() => props.prop_myrec, (newval, oldval) => {
+
+      mounted()
+    })
+
+    function mounted() {
+      if (props.prop_myrec) {
+        myrec.value = props.prop_myrec
+      }
+    }
+
+    function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
+      emit('setCmd', $q, cmd, myusername, value, groupname)
+    }
+
+    function cmdExt(cmd: any, val1: any, val2: any) {
+      emit('cmdext', cmd, val1, val2)
+    }
+
+    onMounted(mounted)
+
+    return {
+      t,
+      myrec,
+      costanti,
+      // naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      toolsext,
+      fieldsTable,
+      cmdExt,
+    }
+  },
+})

src/components/CMyRecCircuitCard/CMyRecCircuitCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="q-py-xs centermydiv cardrec"
+       :style="`max-width: `+ (tools.getwidth($q) - 20) +`px; ` + ($q.screen.lt.sm ? (`min-width: `+ (tools.getwidth($q) - 20) +`px;`) : ``)">
+
+    <q-item v-if="myrec" clickable v-ripple class="shadow-2 q-btn--rounded bg-teal-1">
+
+      <q-item-section v-if="myrec.img_logo" avatar
+                      @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-avatar size="60px">
+          <q-img :src="userStore.getImgByCircuit(myrec)" :alt="myrec.descr"
+                 img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-item-label v-if="myrec.name" lines="1" class="text_title">
+          <span class="text-weight-bold">{{ myrec.name }}</span>
+        </q-item-label>
+        <q-item-label v-if="myrec.subname" lines="1" class="text_title">
+          <span>{{ myrec.subname }}</span>
+        </q-item-label>
+        <q-item-label lines="3" v-if="myrec.longdescr">{{ myrec.longdescr }}<br>
+        </q-item-label>
+      </q-item-section>
+      <q-item-section side v-if="tools.canModifyThisRec(myrec, table)">
+        <q-item-label>
+          <q-btn rounded icon="fas fa-pencil-alt">
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup
+                        @click="cmdExt(costanti.CMD_MODIFY, myrec._id)">
+                  <q-item-section side>
+                    <q-icon name="fas fa-pencil-alt"/>
+                  </q-item-section>
+                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
+                </q-item>
+              </q-list>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup @click="cmdExt(costanti.CMD_DELETE, myrec._id)">
+                  <q-item-section side>
+                    <q-icon name="fas fa-trash-alt"/>
+                  </q-item-section>
+                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-item-label>
+      </q-item-section>
+
+    </q-item>
+    <q-separator inset="item"/>
+  </div>
+
+</template>
+
+<script lang="ts" src="./CMyRecCircuitCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyRecCircuitCard.scss';
+</style>

src/components/CMyRecCircuitCard/index.ts

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

src/components/index.ts

@@ -43,12 +43,15 @@ export * from './CMyUser'
 export * from './CVerifyTelegram'
 export * from './CMyFriends'
 export * from './CMyGroups'
+export * from './CMyCircuits'
 export * from './CDashboard'
 export * from './CMainView'
 export * from './CLabel'
 export * from './CBigBtn'
 export * from './CMyRecCard'
 export * from './CMyRecGrpCard'
+export * from './CMyRecCircuitCard'
+export * from './CMyCardCircuitPopup'
 export * from './CPresentazione'
 export * from './CAccomodation'
 export * from './COpenStreetMap'