- Fare LISTA MOVIMENTI più comprensibile

- Grafica Circuiti

src/components/CMovements/CMovements.scss

@@ -1,9 +1,9 @@
-.myfrom {
+.userfrom {
     color: red;
     font-weight: bold;
 }
 
-.myto {
+.userto {
     color: green;
     font-weight: bold;
 }

src/components/CMovements/CMovements.ts

@@ -5,22 +5,29 @@ import { useGlobalStore } from '@store/globalStore'
 import { useI18n } from '@/boot/i18n'
 
 import { CMyImgUser } from '@/components/CMyImgUser'
+import { CSingleMovement } from '@/components/CSingleMovement'
 import { CCurrencyValue } from '@/components/CCurrencyValue'
 import { tools } from '@store/Modules/tools'
-import { IMovQuery, IMovement } from '@src/model'
+import { IMovQuery, IMovVisu, IMovement } from '@src/model'
 
 import { shared_consts } from '@src/common/shared_vuejs'
 
 export default defineComponent({
   name: 'CMovements',
-  components: { CMyImgUser, CCurrencyValue },
+  components: { CMyImgUser, CCurrencyValue, CSingleMovement },
   props: {
     numcol: {
       type: Number,
       required: false,
       default: 3
     },
+    username: {
+      type: String,
+      required: false,
+      default: ''
+    },
   },
+  emits: ['loaded'],
   setup(props, { emit }) {
 
     const userStore = useUserStore()
@@ -28,16 +35,60 @@ export default defineComponent({
     const globalStore = useGlobalStore()
     const { t } = useI18n();
 
-    const datastat = ref(<any>{})
+    const numtransaz = ref(0)
+    const prectransaz = ref(0)
+
+    const tab = ref('tutti')
 
     const mylist = computed(() => {
-      if (globalStore.datastat)
-        return globalStore.datastat.last_transactions
-      else
+      if (globalStore.datastat || userStore.my.profile) {
+        let arrtransaz: any = []
+        if (props.username) {
+          numtransaz.value = userStore.my.profile.last_my_transactions!.length
+
+          arrtransaz = userStore.my.profile.last_my_transactions
+        } else {
+          if (globalStore.datastat) {
+            numtransaz.value = globalStore.datastat.last_transactions!.length
+
+            arrtransaz = globalStore.datastat.last_transactions
+          }
+        }
+
+        if (prectransaz.value !== numtransaz.value) {
+          emit('loaded', { numtransaz: numtransaz.value })
+          prectransaz.value = numtransaz.value
+        }
+
+        return arrtransaz
+      } else
         return []
     })
 
+    const getInviati = computed(() => {
+      if (props.username && mylist.value) {
+        const list = mylist.value.filter((rec: IMovVisu) => {
+          return (props.username && (rec.userfrom && (rec.userfrom.username === props.username)))
+        })
+        return list
+      }
+    })
+
+    const getRicevuti = computed(() => {
+      if (props.username && mylist.value) {
+        const list =  mylist.value.filter((rec: IMovVisu) => {
+          return (props.username && (rec.userto && (rec.userto.username === props.username)))
+        })
+        return list
+      }
+      return []
+    })
+
     async function mounted() {
+      numtransaz.value = 0
+      prectransaz.value = 0
+
+      emit('loaded', { numtransaz: 0 })
 
     }
 
@@ -77,13 +128,18 @@ export default defineComponent({
       mounted()
     })
 
+
     return {
       userStore,
+      getInviati,
+      getRicevuti,
       tools,
       mylist,
       getFromToStr,
       t,
       navigabyMov,
+      numtransaz,
+      tab,
     }
   }
 })

src/components/CMovements/CMovements.vue

@@ -1,63 +1,74 @@
 <template>
-  <q-list bordered>
-    <q-item
-      v-for="(mov, index) in mylist"
-      :key="mov._id"
-      :class="[
-        'm-mb-sm',
-        {
-          'background-even': index % 2 === 0,
-          'background-odd': index % 2 !== 0,
-        },
-      ]"
-      clickable
-      v-ripple
+  <div v-if="username">
+    <q-tabs
+      v-model="tab"
+      dense
+      inline-label
+      class="bg-primary text-white shadow-2"
     >
-      <q-item-section avatar @click="navigabyMov(mov, true)">
-        <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
-      </q-item-section>
+      <q-tab name="tutti" label="Tutti" />
+      <q-tab
+        name="inviati"
+        :label="t('circuit.inviati') + ' (' + getInviati.length + ')'"
+      />
+      <q-tab
+        name="ricevuti"
+        :label="t('circuit.ricevuti') + ' (' + getRicevuti.length + ')'"
+      />
+    </q-tabs>
 
-      <q-item-section>
-        <q-item-label class="causale" v-if="mov.causal">{{
-          mov.causal
-        }}</q-item-label>
-        <q-item-label lines="1">
-          {{ t('movement.from') }} <span class="myfrom">{{ mov.myfrom }}</span>
-        </q-item-label>
-        <q-item-label lines="1">
-          {{ t('movement.to') }}
-          <span class="myto">{{ mov.myto }}</span></q-item-label
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="tutti">
+        <div v-if="mylist.length === 0">
+          {{ t('circuit.nessun_movimento_inviato') }}
+        </div>
+        <c-single-movement
+          v-for="(mov, index) in mylist"
+          :key="index"
+          :index="index"
+          :mov="mov"
+          :visu="0"
         >
-        <q-item-label
-          caption
-          lines="1"
-          v-if="mov.circuitfrom"
-          class="circuit"
-          >{{ mov.circuitfrom.name }}</q-item-label
+        </c-single-movement>
+      </q-tab-panel>
+      <q-tab-panel name="inviati">
+        <div v-if="getInviati.length === 0">
+          {{ t('circuit.nessun_movimento_inviato') }}
+        </div>
+        <c-single-movement
+          v-for="(mov2, index2) in getInviati"
+          :key="index2"
+          :index="index2"
+          :mov="mov2"
+          :visu="1"
         >
-        <q-item-label
-          caption
-          lines="1"
-          v-if="mov.transactionDate"
-          class="date"
-          >{{ tools.getstrDateTime(mov.transactionDate) }}</q-item-label
+        </c-single-movement>
+      </q-tab-panel>
+      <q-tab-panel name="ricevuti">
+        <div v-if="getRicevuti.length === 0">
+          {{ t('circuit.nessun_movimento_ricevuto') }}
+        </div>
+        <c-single-movement
+          v-for="(mov3, index3) in getRicevuti"
+          :key="index3"
+          :index="index3"
+          :mov="mov3"
+          :visu="2"
         >
-        <q-item-label caption lines="1" style="text-align: center">
-          <CCurrencyValue
-            :symbol="mov.circuitfrom.symbol"
-            color="red"
-            v-model="mov.amount"
-            :small="true"
-            label=""
-          >
-          </CCurrencyValue
-        ></q-item-label>
-      </q-item-section>
-
-      <q-item-section side @click="navigabyMov(mov, false)">
-        <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
-      </q-item-section>
-    </q-item>
+        </c-single-movement>
+      </q-tab-panel>
+    </q-tab-panels>
+    <slot></slot>
+    <div style="margin-bottom: 50px"></div>
+  </div>
+  <q-list v-else bordered>
+    <c-single-movement
+      v-for="(mov, index) in mylist"
+      :key="index"
+      :index="index"
+      :mov="mov"
+    >
+    </c-single-movement>
   </q-list>
 </template>