- Statistiche

- Menu e Sottomenu
- Lista ultimi Movimenti

src/components/CMovements/CMovements.scss

@@ -0,0 +1,17 @@
+.myfrom {
+    color: green;
+    font-weight: bold;
+}
+
+.myto {
+    color: red;
+    font-weight: bold;
+}
+
+.circuit {
+    color: blue;
+}
+
+.date {
+    color: gray;
+}

src/components/CMovements/CMovements.ts

@@ -0,0 +1,89 @@
+import { defineComponent, ref, computed, PropType, toRef, onMounted } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+
+import { CMyImgUser } from '@/components/CMyImgUser'
+import { CCurrencyValue } from '@/components/CCurrencyValue'
+import { tools } from '@store/Modules/tools'
+import { IMovQuery, IMovement } from '@src/model'
+
+import { shared_consts } from '@src/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CMovements',
+  components: { CMyImgUser, CCurrencyValue },
+  props: {
+    numcol: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+  },
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n();
+
+    const datastat = ref(<any>{})
+
+    const mylist = computed(() => {
+      if (globalStore.datastat)
+        return globalStore.datastat.last_transactions
+      else
+        return []
+    })
+
+    async function mounted() {
+
+    }
+
+    function getFromToStr(mov: any) {
+
+      let mystr = ''
+      if (mov) {
+
+        mystr += mov.str
+      }
+      return mystr
+    }
+
+    function navigabyMov(mov: IMovQuery, from: boolean) {
+      let link = ''
+      if (from) {
+        if (mov.tipocontofrom === shared_consts.AccountType.USER) {
+          link = `/my/` + mov.userfrom.username
+        } else if (mov.tipocontofrom === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
+          link = tools.getPathByGroup(mov.groupfrom)
+        } else if (mov.tipocontofrom === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
+          link = '' // mov.contocomfrom.name
+        }
+      } else {
+        if (mov.tipocontoto === shared_consts.AccountType.USER) {
+          link = `/my/` + mov.userto.username
+        } else if (mov.tipocontoto === shared_consts.AccountType.COLLECTIVE_ACCOUNT) {
+          link = tools.getPathByGroup(mov.groupto)
+        } else if (mov.tipocontoto === shared_consts.AccountType.COMMUNITY_ACCOUNT) {
+          link = ''
+        }
+      }
+      $router.push(link)
+    }
+
+    onMounted(() => {
+      mounted()
+    })
+
+    return {
+      userStore,
+      tools,
+      mylist,
+      getFromToStr,
+      t,
+      navigabyMov,
+    }
+  }
+})

src/components/CMovements/CMovements.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-list bordered>
+    <q-item
+      v-for="mov in mylist"
+      :key="mov._id"
+      class="q-mb-sm"
+      clickable
+      v-ripple
+    >
+      <q-item-section avatar @click="navigabyMov(mov, true)">
+        <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label 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-item-label
+          caption
+          lines="1"
+          v-if="mov.circuitfrom"
+          class="circuit"
+          >{{ mov.circuitfrom.name }}</q-item-label
+        >
+        <q-item-label
+          caption
+          lines="1"
+          v-if="mov.transactionDate"
+          class="date"
+          >{{ tools.getstrDateTime(mov.transactionDate) }}</q-item-label
+        >
+        <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>
+  </q-list>
+</template>
+
+<script lang="ts" src="./CMovements.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMovements.scss';
+</style>

src/components/CMovements/index.ts

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