- Fare LISTA MOVIMENTI più comprensibile

- Grafica Circuiti

src/components/CSingleMovement/CSingleMovement.scss

@@ -0,0 +1,53 @@
+.userfrom {
+    color: red;
+}
+
+.userto {
+    color: green;
+}
+
+.circuit {
+    color: blue;
+}
+
+.date {
+    color: gray;
+}
+
+.rigamov {
+    background-color: lightgray;
+}
+
+.causale {
+    margin-bottom: 8px;
+}
+
+.userto,
+.userfrom {
+    white-space: pre-wrap;
+    /* Impedisce il wrapping del testo */
+}
+
+.q-item-section.d-flex {
+    display: flex;
+    align-items: center;
+    /* Allinea gli elementi al centro verticalmente */
+}
+
+.q-item__section--main ~ .q-item__section--side{
+    padding-left: 2px !important;
+}
+
+.q-item__section--side{
+    padding-right: 4px !important;
+}
+
+.schede-mov{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    border: solid 1px blue;
+    border-radius: 20px;
+}

src/components/CSingleMovement/CSingleMovement.ts

@@ -0,0 +1,92 @@
+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: 'CSingleMovement',
+  components: { CMyImgUser, CCurrencyValue },
+  props: {
+    mov: {
+      type: Object as PropType<IMovement>,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+    visu: {
+      type: Number,
+      required: false,
+      default: 0,
+    }
+  },
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n();
+
+    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)
+    }
+
+    function getUsername(user: any) {
+      if (user && user.username) {
+        return user.username
+      }
+
+      return user
+    }
+
+    onMounted(() => {
+      
+    })
+
+    return {
+      userStore,
+      tools,
+      getFromToStr,
+      t,
+      navigabyMov,
+      getUsername,
+    }
+  }
+})

src/components/CSingleMovement/CSingleMovement.vue

@@ -0,0 +1,73 @@
+<template>
+  <q-item
+    v-if="mov"
+    :class="[
+      'm-mb-sm',
+      'schede-mov',
+      {
+        'background-even': index % 2 === 0,
+        'background-odd': index % 2 !== 0,
+      },
+    ]"
+    clickable
+    v-ripple
+  >
+    <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
+      <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
+    </q-item-section>
+    <q-item-section v-else side @click="navigabyMov(mov, false)">
+      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
+      <CCurrencyValue
+        :symbol="mov.circuitfrom.symbol"
+        color="red"
+        v-model="mov.amount"
+        :small="true"
+        label=""
+      >
+      </CCurrencyValue>
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label class="causale" v-if="mov.causal">{{
+        mov.causal
+      }}</q-item-label>
+      <q-item-label v-if="visu !== 1" lines="3">
+        {{ t('movement.from') }}
+        <span class="userfrom">{{
+          tools.getUsernameOrGroupOrContoComByMov(mov, true)
+        }}</span>
+      </q-item-label>
+      <q-item-label v-if="visu !== 2" lines="3">
+        {{ t('movement.to') }}
+        <span class="userto">{{
+          tools.getUsernameOrGroupOrContoComByMov(mov, false)
+        }}</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-section>
+
+    <q-item-section v-if="visu === 0" side @click="navigabyMov(mov, false)">
+      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
+      <CCurrencyValue
+        :symbol="mov.circuitfrom.symbol"
+        color="red"
+        v-model="mov.amount"
+        :small="true"
+        label=""
+      >
+      </CCurrencyValue>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script lang="ts" src="./CSingleMovement.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CSingleMovement.scss';
+</style>

src/components/CSingleMovement/index.ts

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