Members, Circuits

src/components/CMyCircuit/CMyCircuit.scss

@@ -2,3 +2,4 @@
   display: flex;
   flex: 1;
 }
+

src/components/CMyCircuit/CMyCircuit.ts

@@ -12,6 +12,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { CUserNonVerif } from '@/components/CUserNonVerif'
 import { CSaldo } from '@/components/CSaldo'
 import { toolsext } from '@store/Modules/toolsext'
+import { useGlobalStore } from '@store/globalStore'
 
 export default defineComponent({
   name: 'CMyCircuit',
@@ -43,6 +44,8 @@ export default defineComponent({
     const $router = useRouter()
     const $route = useRoute()
 
+    const globalStore = useGlobalStore()
+
     const circuit = ref(<ICircuit | null>null)
     const account = computed(() => circuit.value ? userStore.getAccountByCircuitId(circuit.value._id) : null )
 
@@ -51,6 +54,8 @@ export default defineComponent({
 
     const table = ref(toolsext.TABCIRCUITS)
 
+    const showingtooltip = ref(false)
+
     watch(() => props.mycircuit, (newval, oldval) => {
       mounted()
     })
@@ -101,6 +106,8 @@ export default defineComponent({
       account,
       qtarem,
       saldo,
+      globalStore,
+      showingtooltip,
     }
   },
 })

src/components/CMyCircuit/CMyCircuit.vue

@@ -6,29 +6,54 @@
           <q-avatar size="60px">
             <q-img :src="getImgCircuit(circuit)" :alt="circuit.name" img-class="imgprofile" height="60px"/>
           </q-avatar>
+          <div class=" q-ma-xs q-px-xs shadow-2 rounded-borders"><span class="q-mx-xs">{{ circuit.numMembers }}</span>
+            <q-icon name="fas fa-users" size="xs" color="blue"></q-icon>
+          </div>
         </q-item-section>
 
-        <q-item-section @click="naviga(tools.getPathByTableAndRec(table, circuit))">
-          <q-item-label><strong>{{ circuit.name }}</strong> <span v-if="circuit.subname"> ({{ circuit.subname }})</span>
+        <q-item-section>
+          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))"><strong>{{ circuit.name }}</strong> <span
+            v-if="circuit.subname"> ({{ circuit.subname }})</span>
           </q-item-label>
-          <q-item-label v-if="circuit.longdescr" caption lines="3"><em>{{ circuit.longdescr }}</em></q-item-label>
-          <q-item-label  v-if="!circuit.transactionsEnabled" caption lines="1">
-            <q-icon name="fas fa-lock">
-            </q-icon></q-item-label>
+          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))" v-if="circuit.longdescr" caption lines="3"><em>{{ circuit.longdescr }}</em>
+          </q-item-label>
+          <q-item-label caption lines="1">
+            <q-chip
+              v-if="circuit.status !== undefined && circuit.status !== 0" :color="circuitStore.getColorCircuitClass(circuit)"
+              text-color="white"
+              size="md"
+              :icon="globalStore.getValueByTableSingle('statuscircuit', circuit.status, 'icon')">{{
+                globalStore.getValueByTableSingle('statuscircuit', circuit.status)
+              }}
+              <q-btn
+                class="q-ml-sm"
+                icon="fas fa-info" color="primary" text-color="white"
+                size="xs"
+                round
+                @click="showingtooltip = !showingtooltip">
+                <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{globalStore.getValueByTableSingle('statuscircuit', circuit.status, 'hint')}}</q-tooltip>
+              </q-btn>
+            </q-chip>
 
-          <q-item-label lines="1">
+          </q-item-label>
+          <q-item-label v-if="(!circuit.transactionsEnabled) && (circuit.status === shared_consts.CIRCUIT_STATUS.FASE3_MONETA_ABILITATA)" caption lines="1">
+            <q-icon v-if="!circuit.transactionsEnabled" name="fas fa-lock">
+            </q-icon>
+            <span class="text-red text-weight-bold">{{ $t('circuit.transaction_suspended') }}</span>
+          </q-item-label>
+
+          <q-item-label @click="naviga(tools.getPathByTableAndRec(table, circuit))" lines="1">
             <CSaldo
               :account="account"
               :symbol="circuit.symbol"
               :color="circuit.color"
               :saldo="saldo"
               :qtarem="qtarem"
-              >
+            >
             </CSaldo>
           </q-item-label>
         </q-item-section>
 
-
         <q-item-section side v-if="visu === costanti.USER_CIRCUITS">
           <q-item-label>
             <q-btn rounded :icon="userStore.IsMyCircuitByName(circuit.name) ? `fas fa-ellipsis-h` : `fas fa-user`">