Circuit table...

src/common/shared_vuejs.ts

@@ -17,8 +17,8 @@ export const shared_consts = {
 
   QUERYTYPE_MYGROUP: 1,
   QUERYTYPE_REFUSED_USER_GRP: 2,
-
   ALL_SAW_AND_ACCEPTED: 3,
+  QUERYTYPE_CIRCUIT: 10,
 
   FILTER_EXTRALIST_NOT_REGISTERED: 1,
   FILTER_EXTRALIST_NOT_CONTACTED: 2,
@@ -125,6 +125,8 @@ export const shared_consts = {
 
   TABLES_VISU_IMG: ['myskills', 'mybachecas', 'myhosps', 'mygoods', 'mygroups'],
   TABLES_DIRECTORY_A_PARTE: ['mygroups'],
+  TABLES_WITH_ADMINS: ['mygroups', 'circuits'],
+  TABLES_DIRECTORY_SINGLE_IMG: ['circuits'],
 
   VISIB_ALL: 0,
   VISIB_ONLYIF_VERIFIED: 1,

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'

src/db/static_data.ts

@@ -24,6 +24,7 @@ const functionality: IFunctionality = {
   ENABLE_ECOMMERCE: false,
   ENABLE_REG_ISP: true,
   ENABLE_GROUPS: true,
+  ENABLE_CIRCUITS: true,
   SHOW_COMPETENZE: true,
   ENABLE_VIEW_GROUPS: true,
   ENABLE_VIEW_USERS: true,
@@ -588,6 +589,17 @@ const baseroutes: IListRoutes[] = [
     inmenu: true,
     infooter: true,
   },
+  {
+    active: functionality.ENABLE_CIRCUITS,
+    order: 133,
+    path: '/circuits',
+    materialIcon: 'fas fa-coins',
+    name: 'mypages.circuits',
+    component: () => import('@/views/user/mycircuits/mycircuits.vue'),
+    meta: { requiresAuth: true },
+    inmenu: true,
+    infooter: true,
+  },
   {
     active: true,
     order: 135,
@@ -609,6 +621,16 @@ const baseroutes: IListRoutes[] = [
     meta: { requiresAuth: true, newpage: true },
     inmenu: false,
     infooter: false,
+  },{
+    active: true,
+    order: 137,
+    path: '/circuit/:name',
+    materialIcon: 'fas fa-user',
+    name: 'proj.circuit2',
+    component: () => import('@/views/user/mycircuit/mycircuit.vue'),
+    meta: { requiresAuth: true, newpage: true },
+    inmenu: false,
+    infooter: false,
   },
   {
     active: true,

src/model/GlobalStore.ts

@@ -1,5 +1,5 @@
 import { IAction } from '@src/model/Projects'
-import { IMyGroup, IPaymentType } from '@src/model/UserStore'
+import { IFriends, IMyGroup, IPaymentType } from '@src/model/UserStore'
 import {
   IDepartment, IProducer, IShareWithUs, IStorehouse,
 } from '@src/model/Products'
@@ -498,6 +498,7 @@ export interface IFunctionality {
   ENABLE_REG_ISP?: boolean
   SHOW_NAMESURNAME?: boolean
   ENABLE_GROUPS?: boolean
+  ENABLE_CIRCUITS?: boolean
   SHOW_COMPETENZE?: boolean
   ENABLE_VIEW_GROUPS?: boolean
   ENABLE_VIEW_USERS?: boolean
@@ -888,6 +889,7 @@ export interface ICircuitList {
   inscription_date?: Date
 }
 
+
 export interface ICircuit {
   _id: number
   groupnameId: string
@@ -916,5 +918,17 @@ export interface ICircuit {
   ultimo_deper?: Date
   durata_deper?: number
   img_logo?: string
+  date_created?: Date
+  date_updated?: Date
+  admins?: IFriends[]
+  createdBy?: string
 }
 
+export interface IAccount {
+  username: string
+  circuitId: number
+  name: string
+  deperibile?: boolean
+  importo_iniziale?: number
+  saldo?: number
+}

src/model/UserStore.ts

@@ -1,6 +1,6 @@
 import { IToken } from '@model/other'
 import { ICart, IOrderCart, IShareWithUs } from '@src/model/Products'
-import { ICircuit, ICircuitList, IGallery, IImgGallery } from '@model/GlobalStore'
+import { IAccount, ICircuit, ICircuitList, IGallery, IImgGallery } from '@model/GlobalStore'
 
 const enum ESexType {
   None = 0,
@@ -100,6 +100,12 @@ export interface IUserProfile {
   asked_groups: any[]
   refused_groups: any[]
   list_usersgroup?: IFriends[]
+
+  asked_circuits: any[]
+  refused_circuits: any[]
+  listUserAccounts: IAccount[]
+  manage_mycircuits?: ICircuit[]
+
 }
 
 export interface IPaymentType {

src/statics/lang/it.js

@@ -693,6 +693,7 @@ const msg_it = {
       themebgcolor: 'Tema Colore Sfondo',
       group: 'Gruppo',
       group2: 'Gruppo2',
+      circuit2: 'Circuit2',
       respUsername: 'Responsabile',
       viceRespUsername: 'Vice Responsabile',
       vice2RespUsername: 'Vice 2 Responsabile',
@@ -996,6 +997,9 @@ const msg_it = {
       trusted: 'Fiducia Accettata',
       rejected: 'Rifiutati',
       provapao: 'Prova pao',
+      circuits: 'Circuiti',
+      find_circuit: 'Cerca Circuito',
+      follow_circuits: 'Circuiti di cui fai parte',
     },
     friends: {
       accept_trust: 'Accetta Fiducia',

src/store/CircuitStore.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+
+import {
+  ICircuit,
+} from '@src/model'
+import { tools } from '@store/Modules/tools'
+import translate from '@src/globalroutines/util'
+
+import * as Types from '@src/store/Api/ApiTypes'
+import { useGlobalStore } from '@store/globalStore'
+import { serv_constants } from '@store/Modules/serv_constants'
+import { Api } from '@api'
+import { toolsext } from '@store/Modules/toolsext'
+import { static_data } from '@src/db/static_data'
+
+
+import { shared_consts } from '@/common/shared_vuejs'
+import { costanti } from '@costanti'
+
+import globalroutines from '../globalroutines/index'
+
+export const useCircuitStore = defineStore('CircuitStore', {
+  state: () => ({
+    listcircuits: []
+  }),
+
+  getters: {
+
+
+  },
+
+  actions: {
+    getImgByCircuit(circ: ICircuit): string {
+
+      try {
+        return costanti.DIR_UPLOAD + 'circuits/' + circ.img_logo
+      } catch (e) {
+      }
+      return 'images/noimg.png'
+    },
+
+
+    async loadCircuits() {
+      return Api.SendReq('/users/circuits', 'POST', null)
+        .then((res) => {
+          return res.data
+        }).catch((error) => {
+          return {}
+        })
+
+    },
+
+  },
+})

src/store/Modules/costanti.ts

@@ -180,6 +180,7 @@ export const costanti = {
   FIND_PEOPLE: 10,
 
   GROUPS: 11,
+  CIRCUITS: 12,
   GRP_REJECTED: 14,
   REQ_GROUP: 15,
   ASK_SENT_GROUP: 16,
@@ -189,6 +190,12 @@ export const costanti = {
   CREATE_GROUP: 30,
   MANAGE_GROUPS: 31,
   ADMIN_GROUPS: 40,
+  FIND_CIRCUIT: 50,
+  MY_USERACCOUNTS: 51,
+  CREATE_CIRCUIT: 52,
+  MANAGE_CIRCUITS: 53,
+  ADMIN_CIRCUITS: 54,
+  ASK_SENT_CIRCUIT: 55,
 
   CMD_DELETE: 1,
   CMD_MODIFY: 2,

src/store/Modules/fieldsTable.ts

@@ -614,13 +614,6 @@ export const colmyUserGroup = [
     sortable: true,
     showWhen: 0
   }),
-  AddCol({
-    name: 'date_updated', label_trans: 'reg.pub_updated', fieldtype: costanti.FieldType.onlydate,
-    required: false,
-    visible: false,
-    sortable: true,
-    showWhen: 0
-  }),
   AddCol({
     name: 'photos',
     label_trans: 'skill.photos',
@@ -2416,6 +2409,28 @@ export const colTableCircuitComplete = [
   AddCol({ name: 'ultimo_deper', label_trans: 'circuit.ultimo_deper', fieldtype: costanti.FieldType.date }),
   AddCol({ name: 'durata_deper', label_trans: 'circuit.durata_deper', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'img_logo', label_trans: 'circuit.img_logo' }),
+  AddCol({
+    name: 'admins',
+    label_trans: 'groups.admins',
+    fieldtype: costanti.FieldType.multiselect,
+    jointable: 'friendsandme',
+    field_outtype: costanti.FieldType.object,
+    showWhen: costanti.showWhen.InView_OnlyifExist,
+  }),
+  AddCol({
+    name: 'date_created', label_trans: 'reg.pub_created', fieldtype: costanti.FieldType.onlydate,
+    required: false,
+    visible: false,
+    sortable: true,
+    showWhen: 0
+  }),
+  AddCol({
+    name: 'date_updated', label_trans: 'reg.pub_updated', fieldtype: costanti.FieldType.onlydate,
+    required: false,
+    visible: false,
+    sortable: true,
+    showWhen: 0
+  }),
   AddCol(DeleteRec),
   AddCol(DuplicateRec),
 ]
@@ -2435,7 +2450,7 @@ export const colTableCircuit = [
   AddCol(DuplicateRec),
 ]
 
-export const colTableAccount = [
+export const colmyUserCircuit = [
   AddCol({ name: 'circuitId', label_trans: 'account.circuitId', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'userId', label_trans: 'account.users', fieldtype: costanti.FieldType.select, jointable: 'users', }),
   AddCol({ name: 'name', label_trans: 'circuit.name' }),
@@ -2575,7 +2590,7 @@ export const fieldsTable = {
   },
 
   accountslist() {
-    return colTableAccount
+    return colmyUserCircuit
   },
 
   movslist() {

src/store/Modules/tools.ts

@@ -3,7 +3,7 @@ import {
   IColGridTable,
   IColl,
   ICollaborations, IDataToSet,
-  IEvents, IFriends, IMyGroup,
+  IEvents, IFriends, IMyGroup, ICircuit,
   IListRoutes,
   IParamDialog,
   IPathFile,
@@ -36,6 +36,7 @@ import { serv_constants } from '@store/Modules/serv_constants'
 import { useProjectStore } from '@store/Projects'
 import { useTodoStore } from '@store/Todos'
 import { useUserStore } from '@store/UserStore'
+import { useCircuitStore } from '@store/CircuitStore'
 import { useCalendarStore } from '@store/CalendarStore'
 import { Router } from 'vue-router'
 import { AxiosResponse, default as Axios } from 'axios'
@@ -65,6 +66,7 @@ export const tools = {
 
   FRIENDS_SEARCH: 'FR_SE',
   GROUP_SEARCH: 'GR_SE',
+  CIRCUIT_SEARCH: 'CI_SE',
 
   getprefCountries: ['it', 'es', 'us'],
 
@@ -5159,6 +5161,28 @@ export const tools = {
 
     return risultato
 
+  },
+  iAmAdminCircuit(name: string) {
+    const userStore = useUserStore()
+
+    let risultato = false
+
+    if (userStore.my.profile.manage_mycircuits) {
+      const ris = userStore.my.profile.manage_mycircuits.find((circuit: ICircuit) => {
+        if (circuit.name === name) {
+          return true
+        }
+      })
+      // console.log('ris', ris)
+      if (ris && ris.admins) {
+        const isadmin = ris.admins.find((user: IFriends) => user.username === userStore.my.username)
+        risultato = !!isadmin
+      }
+
+    }
+
+    return risultato
+
   },
 
   iAmPartOfThisGroup(grp: IMyGroup) {
@@ -5238,6 +5262,68 @@ export const tools = {
 
     return risultato
 
+  },
+  iAmTheCreatorOfTheCircuit(name: string) {
+    const userStore = useUserStore()
+
+    let risultato = false
+
+    if (userStore.my.profile.manage_mycircuits) {
+      const ris = userStore.my.profile.manage_mycircuits.find((circuit: ICircuit) => {
+        if (circuit.name === name) {
+          return true
+        }
+      })
+      // console.log('ris', ris)
+      return (ris && ris.createdBy === userStore.my.username)
+
+    }
+
+    return risultato
+
+  },
+
+  isUserTheCreatorOfThCircuit(name: string, username: string) {
+    const userStore = useUserStore()
+
+    let risultato = false
+
+    if (userStore.my.profile.manage_mycircuits) {
+      const ris = userStore.my.profile.manage_mycircuits.find((circuit: ICircuit) => {
+        if (circuit.name === name) {
+          return true
+        }
+      })
+      // console.log('ris', ris)
+      return (ris && ris.createdBy === username)
+
+    }
+
+    return risultato
+
+  },
+
+  isUserAdminCircuit(name: string, username: string) {
+    const userStore = useUserStore()
+
+    let risultato = false
+
+    if (userStore.my.profile.manage_mycircuits) {
+      const ris = userStore.my.profile.manage_mycircuits.find((circuit: ICircuit) => {
+        if (circuit.name === name) {
+          return true
+        }
+      })
+      // console.log('ris', ris)
+      if (ris && ris.admins) {
+        const isadmin = ris.admins.find((user: IFriends) => user.username === username)
+        risultato = !!isadmin
+      }
+
+    }
+
+    return risultato
+
   },
 
   setCmd($q: any, cmd: number, username: string, value: any, dest: string) {
@@ -5457,6 +5543,15 @@ export const tools = {
       link_telegram: '',
     }
   },
+  getdefaultnewrec_Circuit(): any {
+    return {
+      _id: 0,
+      name: '',
+      subname: '',
+      img_logo: '',
+      admins: [],
+    }
+  },
 
 
   getdefaultnewrec_MyBacheca(): any {
@@ -5508,6 +5603,8 @@ export const tools = {
       return 'mygood'
     } else if (table === toolsext.TABMYGROUPS) {
       return 'grp'
+    } else if (table === toolsext.TABCIRCUITS) {
+      return 'circuit'
     }
 
     return ''
@@ -5516,6 +5613,8 @@ export const tools = {
   getFullFileName(arrimage: IImgGallery[], table: string, username: string, groupname: string) {
     if (shared_consts.TABLES_DIRECTORY_A_PARTE.includes(table)) {
       return `upload/${table}/` + groupname + '/' + arrimage[0].imagefile
+    } else if (shared_consts.TABLES_DIRECTORY_SINGLE_IMG.includes(table)) {
+      return `upload/${table}/` + groupname + '/' + arrimage[0].imagefile
     } else {
       if (arrimage && arrimage.length > 0) {
         return 'upload/profile/' + username + '/' + table + '/' + arrimage[0].imagefile
@@ -5533,7 +5632,7 @@ export const tools = {
     if ((userStore.isAdmin || userStore.isManager))
       return true
 
-    if (tablesel === toolsext.TABMYGROUPS) {
+    if (shared_consts.TABLES_WITH_ADMINS.includes(tablesel)) {
       // is Admin ?
       if (rec.admins) {
         const trovato = rec.admins.find((myuser: any) => myuser.username === userStore.my.username)
@@ -5561,6 +5660,8 @@ export const tools = {
       return '/' + tools.getDirectoryByTable(table) + '/' + rec['_id']
     } else if (table === toolsext.TABMYGROUPS) {
       return '/grp/' + rec.groupname
+    } else if (table === toolsext.TABCIRCUITS) {
+      return '/circuit/' + rec.name
     }
 
     return ''
@@ -5570,6 +5671,10 @@ export const tools = {
     return '/' + tools.getDirectoryByTable(table) + '/' + grp.groupname
   },
 
+  getPathByCircuit(grp: any, table: string) {
+    return '/' + tools.getDirectoryByTable(table) + '/' + grp.name
+  },
+
   getPathByTable(table: string, pagename: string) {
     return '/' + tools.getDirectoryByTable(table) + '/' + pagename
   },
@@ -5693,6 +5798,30 @@ export const tools = {
     return []
   },
 
+  async loadCircuits() {
+    const userStore = useUserStore()
+    const circuitStore = useCircuitStore()
+    // Carica il profilo di quest'utente
+
+    await userStore.loadCircuits().then((ris) => {
+      // console.log('ris', ris)
+      if (ris) {
+
+        circuitStore.listcircuits = ris.listcircuits ? ris.listcircuits : []
+
+        // to Refresh Data User Accounts:
+        userStore.my.profile.listUserAccounts = ris.listUserAccounts ? ris.listUserAccounts : []
+
+        // Others not loaded at the beginning:
+        userStore.my.profile.asked_circuits = ris.listSentRequestCircuits ? ris.listSentRequestCircuits : []
+        userStore.my.profile.refused_circuits = ris.listRefusedCircuits ? ris.listRefusedCircuits : []
+        return [{ userId: userStore.my._id }]
+      }
+    })
+
+    return []
+  },
+
   async loadrecProfile() {
 
     const userStore = useUserStore()

src/store/Modules/toolsext.ts

@@ -93,6 +93,7 @@ export const toolsext = {
   TABLOCACCOM: 'locaccoms',
   TABPREF: 'hosps_preferences',
   TABPEOPLE: 'people',
+  TABCIRCUITS: 'circuits',
   SERVKEY_VERS: 'vers',
 
   ERR_GENERICO: -1,

src/store/UserStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 
 import {
+  ICircuit,
   IFriends, IMsgGlobParam,
   ISigninOptions,
   ISignupOptions, IUserFields, IUserNotifType, IUserProfile, IUserState,
@@ -63,6 +64,10 @@ export const DefaultUser: IUserFields = {
     notif_regions: [],
     notif_sectors: [],
     notif_sector_goods: [],
+    asked_circuits: [],
+    refused_circuits: [],
+    listUserAccounts: [],
+    manage_mycircuits: [],
   },
   cart: {
     userId: '',
@@ -115,6 +120,11 @@ export const DefaultProfile: IUserProfile = {
   notif_regions: [],
   notif_sectors: [],
   notif_sector_goods: [],
+
+  asked_circuits: [],
+  refused_circuits: [],
+  listUserAccounts: [],
+  manage_mycircuits: [],
 }
 
 export const useUserStore = defineStore('UserStore', {
@@ -202,6 +212,16 @@ export const useUserStore = defineStore('UserStore', {
         return false
     },
 
+    IsMyCircuitByGroupname(mycircuit: string): boolean {
+
+      /*if (this.my.profile.mycircuit)
+        return this.my.profile.mycircuit.findIndex((rec) => rec.name === name) >= 0
+      else
+        return false
+
+       */
+    },
+
     IsAskedFriendByUsername(username: string): boolean {
       if (this.my.profile.asked_friends)
         return this.my.profile.asked_friends.findIndex((rec) => rec.username === username) >= 0
@@ -277,6 +297,15 @@ export const useUserStore = defineStore('UserStore', {
         return ''
     },
 
+    getImgByCircuit(circ: ICircuit): string {
+
+      try {
+        return costanti.DIR_UPLOAD + 'circuits/' + circ.img_logo
+      } catch (e) {
+      }
+      return 'images/noimg.png'
+    },
+
     getImgByGroup(group: IMyGroup): string {
 
       try {
@@ -1063,6 +1092,21 @@ export const useUserStore = defineStore('UserStore', {
 
     },
 
+    async loadCIrcuit(name: string, idnotif: string) {
+      const data = {
+        name,
+        idnotif,
+      }
+
+      return Api.SendReq('/circuit/load', 'POST', data)
+        .then((res) => {
+          return {data: res.data, status: res.status}
+        }).catch((error) => {
+          return {data: null, status: error.status}
+        })
+
+    },
+
     async loadSkill(idSkill: string) {
       const data = {
         idSkill
@@ -1116,6 +1160,16 @@ export const useUserStore = defineStore('UserStore', {
 
     },
 
+    async loadCircuits() {
+      return Api.SendReq('/users/circuits', 'POST', null)
+        .then((res) => {
+          return res.data
+        }).catch((error) => {
+          return {}
+        })
+
+    },
+
     async setFriendsCmd($q: any, t: any, usernameOrig: string, usernameDest: string, cmd: number, value: any) {
       return Api.SendReq('/users/friends/cmd', 'POST', { usernameOrig, usernameDest, cmd, value })
         .then((res) => {

src/views/user/mycircuit/mycircuit.scss

@@ -0,0 +1,29 @@
+.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;
+}
+
+.members, .admins, .creator, .element{
+  font-weight: bold;
+  vertical-align: center;
+  padding: 5px;
+}
+
+
+.title_param{
+  font-size: 1.25rem;
+}

src/views/user/mycircuit/mycircuit.ts

@@ -0,0 +1,214 @@
+import { CGridTableRec } from '@/components/CGridTableRec'
+import { CMyFriends } from '@/components/CMyFriends'
+import { CMyUser } from '@/components/CMyUser'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CCheckIfIsLogged } from '@/components/CCheckIfIsLogged'
+import { CMyFieldRec } from '@/components/CMyFieldRec'
+import { CSkill } from '@/components/CSkill'
+import { CDateTime } from '@/components/CDateTime'
+import { tools } from '@store/Modules/tools'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRoute, useRouter } from 'vue-router'
+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 { ICity, IFriends, ICircuit, ISearchList, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { colmyUserPeople, colmyUserCircuit } from '@store/Modules/fieldsTable'
+import { useNotifStore } from '@store/NotifStore'
+
+
+export default defineComponent({
+  name: 'mycircuit',
+  components: { CProfile, CTitleBanner, CMyFieldRec, CSkill, CDateTime, CMyFriends, CGridTableRec, CMyUser, CCheckIfIsLogged },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const notifStore = useNotifStore()
+    const $route = useRoute()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const animation = ref('fade')
+
+    const name = computed(() => $route.params.name ? $route.params.name.toString() : '')
+    const idnotif = computed(() => $route.query.idnotif ? $route.query.idnotif.toString() : '')
+
+    const filtroutente = ref(<any[]>[])
+    const showPic = ref(false)
+
+    const circuit = ref(<ICircuit|null>{})
+    const mystatus = ref(<number>0)
+    const users_in_circuit = ref(<IFriends[]>[])
+
+    const loading = ref(false)
+
+    const tabgrp = ref('info')
+    const tabmembers = ref('all')
+    const tab = ref('membri')
+
+    const arrfilterand: any = ref([])
+    const filtercustom: any = ref([])
+    const filtercustom_rich: any = ref([])
+    const searchList = ref(<ISearchList[]>[])
+
+    const cities = ref(<ICity[]>[])
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function circuitname() {
+      return userStore.my.username
+    }
+
+    async function loadCircuit() {
+      // Carica il profilo di quest'utente
+      if (name.value) {
+        await userStore.loadCIrcuit(name.value, idnotif.value).then(({ data, status }: {data: any, status: number}) => {
+          console.log('data', data)
+          if (data) {
+            circuit.value = data.circuit
+            cities.value = data.cities
+            notifStore.setAsRead(idnotif.value)
+            users_in_circuit.value = data.users_in_circuit
+          } else {
+            circuit.value = null
+            users_in_circuit.value = []
+          }
+
+          mystatus.value = status
+
+          loading.value = false
+          // filtroutente.value = [{ userId: userStore.my._id }]
+        })
+
+      }
+    }
+
+    watch(() => name.value, (to: any, from: any) => {
+      loadCircuit()
+    })
+
+    async function mounted() {
+      loading.value = true
+      await loadCircuit()
+
+      searchList.value = []
+      filtercustom.value = [{ 'profile.mycircuits': { $elemMatch: {name: {$eq: name.value }} } } ]
+
+      arrfilterand.value = []
+      filtercustom_rich.value = []
+      //++TODO: sistemare la filtercustom ... richieste...
+    }
+
+    function getImgGrp() {
+      if (circuit.value)
+        return userStore.getImgByCircuit(circuit.value)
+      else
+        return ''
+    }
+
+    function checkifShow(col: string) {
+      //++Todo: checkifShow Permessi !
+      return true
+    }
+
+
+
+
+    function extraparams() {
+      let lk_tab = 'users'
+      let lk_LF = 'userId'
+      let lk_FF = '_id'
+      let lk_as = 'user'
+      let af_objId_tab = 'myId'
+
+      return {
+        lookup1: {
+          lk_tab,
+          lk_LF,
+          lk_FF,
+          lk_as,
+          af_objId_tab,
+          lk_proj: {
+            'username': 1,
+            'profile.img': 1,
+            'profile.mycircuits': 1,
+            'profile.qualifica': 1,
+            reported: 1,
+            date_report: 1,
+            username_who_report: 1,
+          }
+        },
+      }
+    }
+
+    function extraparams_rich() {
+      return {
+        querytype: shared_consts.QUERYTYPE_CIRCUIT,
+        myid: circuit.value ? circuit.value._id : '',
+      }
+    }
+
+    function extraparams_refused() {
+      return {
+
+      }
+    }
+
+    function numUsers() {
+      return users_in_circuit.value ? users_in_circuit.value.length : 0
+    }
+    function numAdmins() {
+      return (circuit.value && circuit.value.admins) ? circuit.value.admins.length : 0
+    }
+    function listaAdmins() {
+      return (circuit.value && circuit.value.admins) ? circuit.value.admins.map((rec) => rec.username).join(', ') : ''
+    }
+
+
+    onMounted(mounted)
+
+    return {
+      name,
+      profile,
+      tools,
+      costanti,
+      circuit,
+      shared_consts,
+      getImgGrp,
+      checkifShow,
+
+      filtroutente,
+      showPic,
+      circuitname,
+      userStore,
+      t,
+      animation,
+      arrfilterand,
+      filtercustom,
+      filtercustom_rich,
+      searchList,
+      colmyUserPeople,
+      colmyUserCircuit,
+      extraparams,
+      extraparams_rich,
+      extraparams_refused,
+      tab,
+      tabgrp,
+      tabmembers,
+      numUsers,
+      numAdmins,
+      listaAdmins,
+      users_in_circuit,
+      loading,
+      mystatus,
+      cities,
+    }
+  }
+})

src/views/user/mycircuit/mycircuit.vue

@@ -0,0 +1,401 @@
+<template>
+
+  <div class="q-gutter-sm q-pa-sm q-pb-md">
+    <div v-if="!circuit && !loading">
+      <div v-if="mystatus === 403">
+        <h3>Non hai i permessi per accedere al Gruppo.<br>
+
+          Occorre prima registrarsi alla App </h3>
+      </div>
+      <div v-else>
+        <h3>Gruppo non Esistente</h3>
+      </div>
+    </div>
+    <div v-else>
+
+      <div v-if="!tools.isLogged()">
+        <CCheckIfIsLogged></CCheckIfIsLogged>
+      </div>
+      <div>
+
+        <div v-if="circuit.longdescr" class="fit column no-wrap justify-evenly items-center content-start">
+
+          <div class="">
+            <q-avatar size="140px">
+              <q-img :src="getImgGrp()" :alt="circuitname()" img-class="imgprofile" height="140px" @click="showPic = true"/>
+            </q-avatar>
+          </div>
+
+          <div class="text-h6">
+            <span v-if="checkifShow('name')"> {{ circuit.title }}</span>
+          </div>
+          <div v-if="circuit.title !== circuit.name" class="col-12 text-h7 text-blue text-shadow-2">
+            {{ circuit.name }}
+          </div>
+
+          <q-banner
+            v-if="userStore.IsRefusedCircuitByName(circuit.name)"
+            rounded
+            class="bg-red text-white"
+            style="text-align: center;"
+          >
+            <em style="font-weight: bold">{{ $t('db.youarerefusedcircuit') }}</em><br>
+          </q-banner>
+
+
+          <div>
+            <q-btn
+              v-if="!userStore.IsMyCircuitByName(circuit.name) && !userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsRefusedCircuitByName(circuit.name)"
+              icon="fas fa-user-plus"
+              color="primary" :label="$t('circuits.ask_circuit')"
+              @click="tools.setRequestCircuit($q, userStore.my.username, circuit.name, true)"
+            />
+            <q-btn
+              v-if="userStore.IsMyCircuitByName(circuit.name)"
+              rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list v-if="true" style="min-width: 150px">
+                  <q-item clickable v-close-popup
+                          @click="tools.removeFromMyCircuits($q, userStore.my.username, circuit.name, $t('db.domanda_exit_fromcircuit', {name: circuit.name }))">
+                    <q-item-section avatar>
+                      <q-icon color="negative" name="fas fa-user-minus"/>
+                    </q-item-section>
+                    <q-item-section>{{ $t('circuits.exit_circuit') }}</q-item-section>
+                  </q-item>
+
+                  <q-list v-if="tools.iAmAdminCircuit(circuit.name)" style="min-width: 200px">
+                    <q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.CIRCUITSCMD.DELETE_CIRCUIT, userStore.my.username, '', circuit.name)">
+                      <q-item-section avatar>
+                        <q-icon color="negative" name="fas fa-trash-alt"/>
+                      </q-item-section>
+                      <q-item-section>{{ $t('circuits.delete_circuit') }}</q-item-section>
+                    </q-item>
+                  </q-list>
+
+
+                </q-list>
+              </q-menu>
+            </q-btn>
+
+            <q-btn
+              v-if="userStore.IsAskedCircuitByName(circuit.name) && !userStore.IsMyCircuitByName(circuit.name)"
+              icon="fas fa-user-minus"
+              flat :label="$t('circuits.cancel_ask_circuit_short')"
+              @click="tools.cancelReqCircuits($q, userStore.my.username, circuit.name)"
+            />
+          </div>
+
+        </div>
+        <div v-if="circuit.longdescr" class="no-wrap justify-evenly items-center content-start">
+
+
+          <!--
+          <q-btn
+            v-if="tools.iAmAdminCircuit(name)" icon="fas fa-pencil-alt"
+            color="blue"
+            size="md"
+            :label="$t('otherpages.modifgrp')"
+            to="/editgrp">
+          </q-btn>
+          -->
+
+          <q-tabs v-model="tabgrp" class="text-blue">
+            <q-tab :label="t('circuits.info1')" name="info" icon="fas fa-info"></q-tab>
+            <q-tab v-if="!!circuit.note" :label="t('circuits.page')" name="page" icon="fas fa-file-word"></q-tab>
+            <q-tab v-if="tools.iCanShowCircuitsMember(circuit) || tools.iAmAdminCircuit(name)"
+                   :label="t('circuits.subscribes')" name="members" icon="fas fa-users"></q-tab>
+            <q-tab :label="t('circuits.circuits')" name="circuits" icon="fas fa-coins"></q-tab>
+          </q-tabs>
+
+          <q-tab-panels v-model="tabgrp" animated>
+            <q-tab-panel name="info">
+              <div>
+                <q-card>
+                  <q-card-section>
+                    <div class="text-h6">{{ t('circuits.info') }}</div>
+                  </q-card-section>
+
+                  <q-separator/>
+
+                  <q-card-section>
+                    <div class="element">
+                      <q-icon name="fas fa-lightbulb"></q-icon>
+                      {{ $t('circuits.createdby', {
+                      username: circuit.createdBy,
+                      date: tools.getstrDateYY(circuit.date_created), })
+                      }}
+                    </div>
+                    <div v-if="!!circuit.date_updated && circuit.date_updated !== circuit.createdBy" class="element">
+                      <q-icon name="fas fa-pencil-alt"></q-icon>
+                      {{ $t('circuits.lastmodify', {
+                      date: tools.getstrDateYY(circuit.date_updated), })
+                      }}
+                    </div>
+
+                    <div v-if="circuit.visibility.includes(shared_consts.Visibility_Circuit.PRIVATE)" class="row">
+                      <div class="q-pa-xs">
+                        <q-icon name="fas fa-lock"></q-icon>
+                      </div>
+                      <div>
+                        <div class="title_param"> {{ $t('circuits.private') }}</div>
+                        {{ $t('circuits.private_descr') }}
+                      </div>
+                    </div>
+
+                    <div v-if="circuit.visibility.includes(shared_consts.Visibility_Circuit.HIDDEN)" class="row">
+                      <div class="q-pa-xs">
+                        <q-icon name="fas fa-eye-slash"></q-icon>
+                      </div>
+                      <div>
+                        <div class="title_param"> {{ $t('circuits.hidden') }}</div>
+                        {{ $t('circuits.hidden_descr') }}
+                      </div>
+                    </div>
+
+                    <div v-if="cities.length > 0" class="row">
+                      <div class="q-pa-xs">
+                        <q-icon name="fas fa-map-marker-alt"></q-icon>
+                      </div>
+                      <div>
+                        <div class="title_param">
+                          <div v-for="(city, index) of cities" :key="index">
+                            {{ city.comune }} ({{ city.prov }})
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="members">
+                      <q-icon name="fas fa-users"></q-icon>
+                      {{ numUsers() }} {{ numUsers() === 1 ? t('circuits.member') : t('circuits.members') }}
+                    </div>
+                    <div class="admins">
+                      <q-icon name="fas fa-user-cog"></q-icon>
+                      {{ numAdmins() }} {{ numAdmins() === 1 ? t('circuits.admin') : t('circuits.admins') }}
+                    </div>
+                    <div v-for="(user, index) of circuit.admins" :key="index">
+                      <CMyUser
+                        :mycontact="user"
+                        :visu="costanti.FIND_PEOPLE"
+                        @setCmd="tools.setCmd"
+                      >
+                      </CMyUser>
+                    </div>
+                  </q-card-section>
+                </q-card>
+
+                <br>
+              </div>
+              <q-card v-if="circuit.title">
+                <q-card-section>
+                  <div class="text-h6">Descrizione:</div>
+                </q-card-section>
+                <q-separator/>
+
+                <q-card-section>
+                  <div class="col-12 text-h7">
+                    <span v-if="checkifShow('descr')">{{ circuit.longdescr }}</span>
+                  </div>
+
+                  <div class="col-6 q-ma-xs">
+
+                    <q-btn
+                      v-if="getLinkGrpTelegram()" icon="fab fa-telegram"
+                      color="blue" type="a"
+                      size="md"
+                      rounded
+                      :label="$t('msgs.telegrammsg')"
+                      :href="getLinkGrpTelegram()" target="__blank">
+                    </q-btn>
+
+                  </div>
+                  <div class="col-6 q-ma-xs">
+                    <q-btn
+                      v-if="getLinkWebSite()" icon="fas fa-globe"
+                      color="blue" type="a"
+                      size="md"
+                      rounded
+                      :label="$t('reg.website')"
+                      :href="getLinkWebSite()" target="__blank">
+                    </q-btn>
+                  </div>
+
+                </q-card-section>
+              </q-card>
+
+            </q-tab-panel>
+
+            <q-tab-panel name="page">
+              <div v-if="circuit.note">
+                <br>
+                <div class="q-ma-sm q-gutter-sm q-pa-xs">
+                  <div v-if="circuit.note" v-html="circuit.note">
+                  </div>
+                </div>
+              </div>
+            </q-tab-panel>
+
+            <q-tab-panel name="circuits">
+              Scegli il Circuito
+
+              circuit.circuits_list {{circuit.circuits_list}}
+
+              Mostra la lista dei Circuiti Esistenti
+              (come la lista gruppi, in formato scheda)
+              con possibilità di aggiungerli ai gruppi in cui sei Admin
+
+
+            </q-tab-panel>
+            <q-tab-panel name="members" style="max-width: 400px;" v-if="tools.iCanShowCircuitsMember(circuit)">
+
+              <q-tabs
+                v-show="tools.iAmAdminCircuit(name)"
+                v-model="tabmembers" class="text-blue">
+                <q-tab label="Tutti" name="all" icon="fas fa-users"></q-tab>
+                <q-tab v-if="tools.iAmAdminCircuit(name)" label="Richieste" name="rich" icon="fas fa-user-plus"></q-tab>
+                <q-tab v-if="tools.iAmAdminCircuit(name)" label="Rifiutati" name="refused" icon="fas fa-user-minus"></q-tab>
+              </q-tabs>
+
+              <q-tab-panels v-model="tabmembers" animated>
+              <q-tab-panel name="all">
+
+              <CGridTableRec
+                ref="tabMembri"
+                prop_mytable="users"
+                prop_mytitle=""
+                :prop_mycolumns="colmyUserPeople"
+                prop_colkey="_id"
+                col_title="username"
+                :vertical="costanti.VISUTABLE_LISTA"
+                nodataLabel="Nessun Iscritto"
+                :prop_search="true"
+                hint="Username da trovare"
+                :finder="false"
+                :choose_visutype="true"
+                :finder_noNull="false"
+                :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
+                :butt_modif_new="false"
+                noresultLabel="Username non trovato"
+                :arrfilters="arrfilterand"
+                :filtercustom="filtercustom"
+                :prop_searchList="searchList"
+                :showType="costanti.SHOW_USERINFO"
+                :showCol="false"
+                :extrafield="name"
+                :extraparams="extraparams()"
+                :visufind="tools.iAmAdminCircuit(name) ? costanti.REQ_REMOVE_USER_TO_CIRCUIT : costanti.FIND_PEOPLE"
+              >
+
+              </CGridTableRec>
+              </q-tab-panel>
+              <q-tab-panel name="rich">
+
+                <CGridTableRec
+                  prop_mytable="mycircuits"
+                  prop_mytitle=""
+                  :prop_mycolumns="colmyUserPeople"
+                  prop_colkey="_id"
+                  col_title=""
+                  :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
+                  nodataLabel="Nessuna Richiesta in sospeso"
+                  :prop_search="false"
+                  hint="Username da trovare"
+                  :finder="false"
+                  :choose_visutype="false"
+                  :finder_noNull="false"
+                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
+                  :butt_modif_new="false"
+                  noresultLabel="Username non trovato"
+                  :arrfilters="arrfilterand"
+                  :filtercustom="filtercustom_rich"
+                  :prop_searchList="searchList"
+                  :showType="costanti.SHOW_USERINFO"
+                  keyMain=""
+                  :showCol="false"
+                  :extraparams="extraparams_rich()"
+                  :extrafield="name"
+                  :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
+                >
+
+                </CGridTableRec>
+              </q-tab-panel>
+              <q-tab-panel name="refused">
+
+                <CGridTableRec
+                  prop_mytable="mycircuits"
+                  prop_mytitle=""
+                  :prop_mycolumns="colmyUserPeople"
+                  prop_colkey="_id"
+                  col_title=""
+                  :vertical="costanti.VISUTABLE_USER_TABCIRCUIT"
+                  nodataLabel="Nessun utente Rifiutato"
+                  :prop_search="false"
+                  hint="Username da trovare"
+                  :finder="false"
+                  :choose_visutype="false"
+                  :finder_noNull="false"
+                  :options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
+                  :butt_modif_new="false"
+                  noresultLabel="Username non trovato"
+                  :arrfilters="arrfilterand"
+                  :filtercustom="filtercustom_rich"
+                  :prop_searchList="searchList"
+                  :showType="costanti.SHOW_USERINFO"
+                  keyMain=""
+                  :showCol="false"
+                  :extraparams="extraparams_refused()"
+                  :extrafield="name"
+                  :visufind="costanti.REQ_ADD_USER_TO_CIRCUIT"
+                >
+
+                </CGridTableRec>
+              </q-tab-panel>
+              </q-tab-panels>
+
+            </q-tab-panel>
+          </q-tab-panels>
+
+        </div>
+        <div v-else class="fit column no-wrap justify-evenly items-center content-start">
+          <q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
+          <q-card flat bordered style="width: 250px">
+            <div class="text-h6">
+              <q-skeleton :animation="animation"/>
+            </div>
+            <div class="col-12 text-h7 text-grey text-center">
+              {{ name }}
+            </div>
+            <div class="col-12 text-h7">
+              <q-skeleton :animation="animation"/>
+            </div>
+
+            <div class="col-12 text-h8 q-mt-sm">
+              <q-skeleton :animation="animation"/>
+            </div>
+            <div class="col-12 text-h8 q-mt-sm">
+              <q-skeleton :animation="animation"/>
+            </div>
+          </q-card>
+        </div>
+
+      </div>
+      <q-dialog
+        v-model="showPic"
+        full-height full-width
+      >
+
+        <img :src="getImgGrp()" :alt="name" class="full-width">
+
+      </q-dialog>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts" src="./mycircuit.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './mycircuit.scss';
+</style>
+

src/views/user/mycircuits/mycircuits.ts

@@ -0,0 +1,50 @@
+import { CMyCircuits } from '@/components/CMyCircuits'
+import { CFinder } from '@/components/CFinder'
+import { CGridTableRec } from '@/components/CGridTableRec'
+import { tools } from '@store/Modules/tools'
+import { toolsext } from '@store/Modules/toolsext'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRoute, useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { colmyUserCircuit } from '@store/Modules/fieldsTable'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'mycircuits',
+  components: { CMyCircuits, CGridTableRec, CFinder },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n()
+
+    const filter = ref(costanti.FIND_CIRCUIT)
+
+    const isfinishLoading = computed(() => globalStore.finishLoading)
+
+    function mounted() {
+
+      const filt_loaded = tools.getCookie(tools.COOK_SEARCH + tools.CIRCUIT_SEARCH, costanti.FIND_CIRCUIT, true)
+      console.log('filt_loaded', filt_loaded)
+      filter.value = filt_loaded ? filt_loaded : costanti.FIND_CIRCUIT
+    }
+
+    watch(() => filter.value, (newval: any, oldval) => {
+      tools.setCookie(tools.COOK_SEARCH + tools.CIRCUIT_SEARCH, newval)
+
+    })
+    onMounted(mounted)
+
+    return {
+      filter,
+      costanti,
+      shared_consts,
+      colmyUserCircuit,
+      toolsext,
+      isfinishLoading,
+    }
+  }
+})

src/views/user/mycircuits/mycircuits.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="isfinishLoading" class="">
+    <CMyCircuits
+      v-model="filter"
+      :finder="true"
+    >
+
+      <CFinder
+        :table="toolsext.TABCIRCUITS"
+        :showFilterPersonal="true"
+      />
+
+    </CMyCircuits>
+
+    <div v-if="filter === costanti.CREATE_CIRCUIT">
+      Nuovo Circuito:
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./mycircuits.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './mycircuits.scss';
+</style>
+

src/views/user/mygroup/mygroup.vue

@@ -236,6 +236,14 @@
             </q-tab-panel>
 
             <q-tab-panel name="circuits">
+              Scegli il Circuito
+
+              mygrp.circuits_list {{mygrp.circuits_list}}
+
+              Mostra la lista dei Circuiti Esistenti
+              (come la lista gruppi, in formato scheda)
+              con possibilità di aggiungerli ai gruppi in cui sei Admin
+
 
             </q-tab-panel>
             <q-tab-panel name="members" style="max-width: 400px;" v-if="tools.iCanShowGroupsMember(mygrp)">