- Invio RIS migliorata grafica e aggiunto tastierino numerico.

2024-09-30 22:08:39 +02:00
parent 83a5b8b18b
commit 3a4faf0122
22 changed files with 634 additions and 315 deletions
--- a/src/components/CCheckCircuitsEnabled/CCheckCircuitsEnabled.vue
+++ b/src/components/CCheckCircuitsEnabled/CCheckCircuitsEnabled.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="q-ma-xs q-pa-xs row">
-    <div v-if="non_hai_circuito_nazionale" class="q-py-sm">
+  <div class="row">
+    <div
+      class="q-py-sm"
+      v-if="non_hai_circuito_nazionale"
+    >
      <q-banner rounded class="bg-red text-white" style="text-align: center">
        {{ $t('circuit.non_hai_circuito_nazionale') }}
        <br />
@@ -29,7 +32,11 @@
        <q-btn
          glossy
          size="md"
-          :label="$t('circuit.invia_msg_dest', {name: to_user ? to_user.username : ''})"
+          :label="
+            $t('circuit.invia_msg_dest', {
+              name: to_user ? to_user.username : '',
+            })
+          "
          icon="fas fa-paper-plane"
          color="blue"
          text-color="white"
--- a/src/components/CContactUser/CContactUser.ts
+++ b/src/components/CContactUser/CContactUser.ts
@@ -21,9 +21,9 @@ export default defineComponent({
      required: true,
    },
    sendRIS: {
-      type: Number,
+      type: String,
      required: false,
-      default: 0,
+      default: '',
    }
  },
  components: { CLabel, CSendCoins },
@@ -32,10 +32,11 @@ export default defineComponent({
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

-    const showsendCoinTo = ref(false)
+    const showsendCoinTo = ref(true)
    const showingtooltip = ref(false)

    const site = computed(() => globalStore.site)
+    const loading = ref(false)

    function myusername() {
      return userStore.my.username
@@ -70,6 +71,7 @@ export default defineComponent({
      if (!userStore.my.profile.resid_province) {
        // showProvinceToSelect.value = true
      } else {
+        loading.value = true
        showsendCoinTo.value = true
      }

@@ -87,6 +89,7 @@ export default defineComponent({
      showingtooltip,
      clickOpenSendCoin,
      site,
+      loading,
    }
  },
 })
--- a/src/components/CContactUser/CContactUser.vue
+++ b/src/components/CContactUser/CContactUser.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="row justify-evenly items-center q-pa-sm q-ma-sm">
-    <div >
+    <q-inner-loading id="spinner" :showing="loading">
+      <q-spinner-tail color="primary" size="4em"> </q-spinner-tail>
+    </q-inner-loading>
+    <div>
      <q-btn
        v-if="
          tools.isUserOk() &&
@@ -18,10 +21,7 @@
      >
      </q-btn>
    </div>
-    <div
-      v-if="showBtnActivities"
-      
-    >
+    <div v-if="showBtnActivities">
      <q-btn
        v-if="site.confpages && site.confpages.showCompetenze"
        icon="fas fa-house-user"
@@ -77,6 +77,7 @@
      :to_user="myuser"
      :sendRIS="sendRIS"
      @close="showsendCoinTo = false"
+      @showed="loading = false"
    >
    </CSendCoins>
  </div>
--- a/src/components/CMovements/CMovements.scss
+++ b/src/components/CMovements/CMovements.scss
@@ -1,10 +1,10 @@
 .myfrom {
-    color: green;
+    color: red;
    font-weight: bold;
 }

 .myto {
-    color: red;
+    color: green;
    font-weight: bold;
 }

--- a/src/components/CMyProfileTutorial/CMyProfileTutorial.scss
+++ b/src/components/CMyProfileTutorial/CMyProfileTutorial.scss
@@ -2,12 +2,3 @@
  display: flex;
  flex: 1;
 }
-
-.q-stepper__tab {
-  padding: 3px 3px !important;
-}
-
-.q-stepper__step-inner{
-  padding-left: 24px !important;
-  padding-right: 2px !important;
-}
--- a/src/components/CMyProfileTutorial/CMyProfileTutorial.vue
+++ b/src/components/CMyProfileTutorial/CMyProfileTutorial.vue
@@ -358,6 +358,6 @@
 <script lang="ts" src="./CMyProfileTutorial.ts">
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import './CMyProfileTutorial.scss';
 </style>
--- a/src/components/CMyRecCard/CMyRecCard.scss
+++ b/src/components/CMyRecCard/CMyRecCard.scss
@@ -17,12 +17,23 @@
 }


-.cardrec{
+
+.cardrec {
+  /* Aggiungi un bordo sottile */
+  border: 1px solid #ddd;
+  /* Applica un'ombreggiatura per dare l'effetto di elevazione */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* Arrotonda leggermente gli angoli */
+  border-radius: 8px;
+  /* Aggiungi un po' di spazio interno intorno ai contenuti */
+  padding: 16px;
+  /* Colore di sfondo bianco per separare dal resto del contenuto */
+  background-color: #eff;
+
  @media (min-width: 500px) {
    margin: 1px;
    padding: 4px;
  }
-
 }

 .text_title{
@@ -31,3 +42,8 @@
    color: white;
  }
 }
+
+.event_date{
+  font-style: italic;
+  font-size: 0.85rem;
+}
--- a/src/components/CMyRecCard/CMyRecCard.vue
+++ b/src/components/CMyRecCard/CMyRecCard.vue
@@ -21,9 +21,12 @@
            <span class="ev_day">{{
              tools.getstrDay(myrec.dateTimeStart)
            }}</span>
+            <span class="ev_month">{{
+              tools.getstrMonth3Letters(myrec.dateTimeStart)
+            }}</span>
          </div>
        </div>
-        <div class="col-10">
+        <div class="col-10">          
          <q-img
            :src="
              tools.getFullFileName(myrec.photos, table, myrec.username, '')
@@ -34,8 +37,8 @@
            fit="contain"
            @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
          />
-          <div>
-            {{ tools.getstrDateTimeEvent($t, myrec, false) }}
+          <div class="event_date">
+            <span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
          </div>
        </div>
      </div>
--- a/src/components/CMyUser/CMyUser.vue
+++ b/src/components/CMyUser/CMyUser.vue
@@ -422,7 +422,7 @@
                  clickable
                  v-close-popup
                  dense
-                  @click="naviga(`/my/` + contact.username + '?sendris=0')"
+                  @click="naviga(`/my/` + contact.username)"
                >
                  <q-item-section avatar>
                    <q-icon color="positive" name="fas fa-coins" />
@@ -811,7 +811,7 @@
                  clickable
                  v-close-popup
                  dense
-                  @click="naviga(`/my/` + contact.username + '?sendris=0')"
+                  @click="naviga(`/my/` + contact.username)"
                >
                  <q-item-section avatar>
                    <q-icon color="positive" name="fas fa-coins" />
--- a/src/components/CNumericKeyboard/CNumericKeyboard.scss
+++ b/src/components/CNumericKeyboard/CNumericKeyboard.scss
@@ -0,0 +1,31 @@
+.numeric-keyboard {
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.display {
+  background-color: #f0f0f0;
+  padding: 10px;
+  text-align: right;
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+button {
+  padding: 15px;
+  font-size: 20px;
+  border: none;
+  background-color: #e0e0e0;
+  cursor: pointer;
+}
+
+button:active {
+  background-color: #d0d0d0;
+}
--- a/src/components/CNumericKeyboard/CNumericKeyboard.ts
+++ b/src/components/CNumericKeyboard/CNumericKeyboard.ts
@@ -0,0 +1,81 @@
+import { defineComponent, onMounted, PropType, ref, watch, computed } from 'vue'
+import { tools } from '@src/store/Modules/tools'
+
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { costanti } from '@costanti'
+
+export default defineComponent({
+  name: 'CNumericKeyboard',
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
+  },
+  components: {  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    
+    const inputValue = ref(props.modelValue);
+
+    watch(() => props.modelValue, (newVal) => {
+      inputValue.value = newVal;
+    });
+
+    const displayValue = computed(() => {
+      return inputValue.value === '' ? '0' : inputValue.value;
+    });
+    
+    const handleInput = (value: string | number) => {
+      if (value === '⌫') {
+        inputValue.value = inputValue.value.slice(0, -1);
+      } else if (value === '.' && !inputValue.value.includes('.')) {
+        inputValue.value += value.toString();
+      } else if (typeof value === 'number') {
+        inputValue.value += value.toString();
+      }
+    
+      // Verifica se inputValue contiene più di due cifre decimali
+      const decimalPattern = /^\d+(\.\d{0,2})?$/; // Regex per validare il numero
+      const newValue = inputValue.value;
+    
+      // Se non rispetta il formato, tronca il numero a 2 cifre decimali
+      if (!decimalPattern.test(newValue)) {
+        // Se troviamo un punto decimale, manteniamo solo le prime 2 cifre
+        const parts = newValue.split('.'); // Dividi il numero in parte intera e decimale
+        if (parts.length > 1) {
+          // Ricomponi il numero con al massimo 2 cifre decimali
+          inputValue.value = `${parts[0]}.${parts[1].substring(0, 2)}`;
+        } else {
+          // Nessuna parte decimale, quindi usa solo la parte intera
+          inputValue.value = parts[0];
+        }
+      }
+    
+      emit('update:modelValue', inputValue.value);
+    };
+    
+    function created() {
+      // created
+    }
+
+    onMounted(created)
+
+    return {
+      t,
+
+      costanti,
+      tools,
+      displayValue,
+      handleInput,
+    }
+  },
+})
--- a/src/components/CNumericKeyboard/CNumericKeyboard.vue
+++ b/src/components/CNumericKeyboard/CNumericKeyboard.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="numeric-keyboard">
+    <div v-if="showInput" class="display">{{ displayValue }}</div>
+    <div class="keypad">
+      <button v-for="num in [1,2,3,4,5,6,7,8,9,'.',0,'⌫']" :key="num" @click="handleInput(num)">
+        {{ num }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CNumericKeyboard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CNumericKeyboard.scss';
+</style>
--- a/src/components/CNumericKeyboard/index.ts
+++ b/src/components/CNumericKeyboard/index.ts
@@ -0,0 +1 @@
+export {default as CNumericKeyboard} from './CNumericKeyboard.vue'
--- a/src/components/CSendCoins/CSendCoins.scss
+++ b/src/components/CSendCoins/CSendCoins.scss
@@ -64,3 +64,19 @@ $grayshadow: #555;
    border-radius: 300px !important;
  }
 }
+
+.from_username{
+  align-content: center;
+  
+}
+.myprice{
+  padding-bottom: 24px !important;
+}
+
+
+.sendris{
+  font-weight: bold;
+  border-radius: 50px;
+  border: blue solid 1px;
+  padding: 16px;  
+}
--- a/src/components/CSendCoins/CSendCoins.ts
+++ b/src/components/CSendCoins/CSendCoins.ts
@@ -7,15 +7,17 @@ import { useUserStore } from '@store/UserStore'
 import { useCircuitStore } from '@store/CircuitStore'
 import { useQuasar } from 'quasar'
 import { useI18n } from '@/boot/i18n'
+import { CNumericKeyboard } from '@/components/CNumericKeyboard'
 import { CMyUserOnlyView } from '@/components/CMyUserOnlyView'
 import { CMyGroupOnlyView } from '@/components/CMyGroupOnlyView'
 import { CCheckCircuitsEnabled } from '@/components/CCheckCircuitsEnabled'
 import { costanti } from '@costanti'
 import { useRouter } from 'vue-router'
+import { shared_consts } from '@src/common/shared_vuejs'

 export default defineComponent({
  name: 'CSendCoins',
-  emits: ['close'],
+  emits: ['close', 'showed'],
  props: {
    showprop: {
      type: Boolean,
@@ -28,7 +30,7 @@ export default defineComponent({
    qtydefault: {
      type: String,
      required: false,
-      default: '1'
+      default: ''
    },
    to_user: {
      type: Object as PropType<IUserFields>,
@@ -51,12 +53,12 @@ export default defineComponent({
      default: null,
    },
    sendRIS: {
-      type: Number,
+      type: String,
      required: false,
-      default: 1,
+      default: '',
    },
  },
-  components: { CSaldo, CMyUserOnlyView, CMyGroupOnlyView, CCheckCircuitsEnabled },
+  components: { CSaldo, CMyUserOnlyView, CMyGroupOnlyView, CCheckCircuitsEnabled, CNumericKeyboard },

  setup(props, { emit }) {
    const $q = useQuasar()
@@ -80,6 +82,8 @@ export default defineComponent({
    const groupSel = ref(<IMyGroup | null | undefined>null)

    const datasaved = ref(<any>null)
+    const step = ref(0)
+    const sendCoinDialog = ref(null)

    const circuittoload = ref(<ICircuit | undefined>undefined)
    const circuitloaded = ref(<ICircuit>{})
@@ -89,12 +93,7 @@ export default defineComponent({
    const remainingCoins = ref(0)
    const maxsendable = ref(0)
    const numstep = ref(0)
-    const arrTypesAccounts = ref(<any>[
-      {
-        label: t('circuit.user'),
-        value: shared_consts.AccountType.USER,
-      },
-    ])
+    const arrTypesAccounts = ref(<any>[])
    const tipoConto = ref(shared_consts.AccountType.USER)

    const priceLabel = computed(() => circuitloaded.value ? `${qty.value} ` + circuitloaded.value.symbol : '')
@@ -119,6 +118,8 @@ export default defineComponent({
          from_groupname.value = arrGroupsList.value[0].value
      }

+      tools.setCookie(tools.COOK_TIPOCONTO, tipoConto.value.toString())
+
      aggiorna()
    })

@@ -156,7 +157,7 @@ export default defineComponent({
        try {
          arrTypesAccounts.value = [
            {
-              label: t('circuit.user'),
+              label: t('circuit.personale') + ' ' + from_username.value,
              value: shared_consts.AccountType.USER,
            },
          ]
@@ -250,13 +251,17 @@ export default defineComponent({

    async function mounted() {

+      loading.value = true
+
      arrTypesAccounts.value = [
        {
-          label: t('circuit.user'),
+          label: t('circuit.personale') + ' ' + from_username.value,
          value: shared_consts.AccountType.USER,
        },
      ]

+      tipoConto.value = tools.getCookie(tools.COOK_TIPOCONTO, shared_consts.AccountType.USER, true)
+
      // ....
      if (props.to_user) {
        console.log('user', props.to_user)
@@ -273,7 +278,8 @@ export default defineComponent({
          circuitsel.value = bothcircuits.value[0]
        }

-        qty.value = props.qtydefault
+        if (props.qtydefault)
+          qty.value = props.qtydefault

        if (props.sendRIS) {
          qty.value = props.sendRIS
@@ -282,6 +288,7 @@ export default defineComponent({
        await aggiorna()

        showpage.value = true
+        loading.value = false
      }

      if (props.to_group) {
@@ -314,6 +321,9 @@ export default defineComponent({

        showpage.value = true
      }
+
+      loading.value = false
+      emit('showed', true)
    }

    function hide() {
@@ -358,6 +368,99 @@ export default defineComponent({
      }
    }

+    function ifNextCheck(actualstep: number) {
+
+      let fase1ok = false
+
+      if (circuitloaded.value && !!circuitloaded.value._id) {
+        fase1ok = !(
+          !circuitloaded.value.transactionsEnabled ||
+          (tipoConto.value === shared_consts.AccountType.USER &&
+            props.to_user &&
+            from_username.value === props.to_user.username) ||
+          (tipoConto.value ===
+            shared_consts.AccountType.COLLECTIVE_ACCOUNT &&
+            !from_groupname.value) ||
+          (tipoConto.value ===
+            shared_consts.AccountType.COLLECTIVE_ACCOUNT &&
+            props.to_group &&
+            from_groupname.value &&
+            props.to_group.groupname === from_groupname.value) ||
+          (tipoConto.value ===
+            shared_consts.AccountType.COMMUNITY_ACCOUNT &&
+            !from_contocom.value)
+        )
+      }
+
+      if (actualstep === 0) {
+        return fase1ok
+      } else if (actualstep === 1) {
+        return fase1ok && checkRisValid()
+      } else if (actualstep === 2) {
+        return fase1ok && checkRisValid()
+      }
+
+    }
+
+    function checkRisValid() {
+      return qty.value ? qty.value && getQty() > 0.01 && accountloaded.value
+        && getQty() <= circuitStore.getRemainingCoinsToSend(accountloaded.value) : false
+    }
+
+    function getQty(): number {
+      let myqty: number | null = null
+
+      try {
+        if (qty.value) {
+          myqty = parseFloat(String(qty.value))
+        }
+      } catch (e) {
+        return 0
+      }
+
+      return myqty ? myqty : 0
+    }
+
+    function getTitle(step: number) {
+
+      if (step === 0) {
+        return 'Circuito'
+      } else if (step === 1) {
+        return 'Quantità'
+      } else if (step === 2) {
+        return 'Causale'
+      }
+    }
+    function getIcon(step: number) {
+
+      if (step === 0) {
+        return 'circuit'
+      } else if (step === 1) {
+        return 'attach_money'
+      } else if (step === 2) {
+        return 'description'
+      }
+    }
+
+    function clickAvanti(actualstep: number) {
+      if (actualstep === 0) {
+        step.value = 1
+      } else if (actualstep === 1) {
+        step.value = 2
+      } else if (actualstep === 2) {
+        sendCoin()
+      }
+    }
+    function clickIndietro(actualstep: number) {
+      if (actualstep === 1) {
+        step.value = 0
+      } else if (actualstep === 2) {
+        step.value = 1
+      } else if (actualstep === 0) {
+        hide()
+      }
+    }
+

    onMounted(mounted)

@@ -392,6 +495,14 @@ export default defineComponent({
      arrTypesAccounts,
      loading,
      showProvinceToSelect,
+      shared_consts,
+      step,
+      ifNextCheck,
+      clickIndietro,
+      clickAvanti,
+      getTitle,
+      getIcon,
+      sendCoinDialog,
    }
  },
 })
--- a/src/components/CSendCoins/CSendCoins.vue
+++ b/src/components/CSendCoins/CSendCoins.vue
@@ -1,287 +1,288 @@
 <template>
  <q-dialog
    v-model="showpage"
+    ref="sendCoinDialog"
    :maximized="$q.screen.lt.sm"
    @hide="hide"
    @show="qtyRef ? qtyRef.focus() : ''"
  >
-    <q-card class="dialog_card">
+    <q-card
+      class="dialog_card"
+      style="display: flex; flex-direction: column; height: 100%"
+    >
      <q-bar class="bg-primary text-white">
        {{ $t('circuit.sendcoins') }}
        <q-space />
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-      </q-bar>
-      <q-card-section class="q-px-xs inset-shadow">
-        <CCheckCircuitsEnabled :to_user="to_user" :to_group="to_group">
-        </CCheckCircuitsEnabled>
+      </q-bar>      

-        <q-select
-          v-if="!circuitname"
-          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
-          rounded
-          dense
-          outlined
-          v-model="circuitsel"
-          :options="bothcircuits"
-          label="Circuito"
-        >
-        </q-select>
-        <div v-else>{{ circuitname }}</div>
-
-        <q-banner
-          v-if="showProvinceToSelect"
-          rounded
-          class="bg-red text-white"
-          style="text-align: center"
-        >
-          <em style="font-weight: bold">{{
-            $t('circuit.insertprovince_text')
-          }}</em
-          ><br />
-        </q-banner>
-
-        <q-banner
-          rounded
-          dense
-          class="shadow-5 q-my-sm"
-          color="primary q-title"
-          style="text-align: center"
-        >
-          <div class="mybanner_left bg-blue text-white q-mb-sm">
-            {{ $t('circuit.sender') }}:
-          </div>
-          <div>
-            <q-btn-toggle
-              v-if="arrTypesAccounts.length > 0"
-              v-model="tipoConto"
-              class="my-custom-toggle"
-              no-caps
-              rounded
-              unelevated
-              toggle-color="primary"
-              color="white"
-              text-color="primary"
-              :options="arrTypesAccounts"
-            />
-          </div>
-          <q-input
-            v-if="tipoConto === shared_consts.AccountType.USER"
-            v-model="from_username"
-            class="full-width"
-            readonly
-          >
-          </q-input>
-          <div
-            v-else-if="
-              tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT
-            "
+      <q-card-section>
+        <q-stepper v-model="step" ref="stepper" color="primary" animated class="mystepper">
+          <q-step
+            :name="0"
+            :title="getTitle(0)"
+            :icon="getIcon(0)"
+            :done="ifNextCheck(0)"
          >
+            <CCheckCircuitsEnabled :to_user="to_user" :to_group="to_group">
+            </CCheckCircuitsEnabled>
+
            <q-select
-              v-model="from_groupname"
-              :options="arrGroupsList"
-              :label="$t('circuit.choosecontocom')"
+              v-if="!circuitname"
+              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              rounded
-              emit-value
-              map-options
+              dense
+              outlined
+              v-model="circuitsel"
+              :options="bothcircuits"
+              label="Circuito"
            >
-              <!-- Mostra i gruppi su cui sei Admin -->
            </q-select>
-          </div>
-          <div
-            v-else-if="
-              tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT
-            "
+            <div v-else>{{ circuitname }}</div>
+
+            <q-banner
+              v-if="showProvinceToSelect"
+              rounded
+              class="bg-red text-white"
+              style="text-align: center"
+            >
+              <em style="font-weight: bold">{{
+                $t('circuit.insertprovince_text')
+              }}</em
+              ><br />
+            </q-banner>
+
+            <q-banner
+              rounded
+              dense
+              class="shadow-5 q-my-sm"
+              color="primary q-title"
+              style="text-align: center"
+            >
+              <div class="mybanner_left q-mb-sm">
+                <q-select
+                  v-if="arrTypesAccounts.length > 0"
+                  v-model="tipoConto"
+                  class="my-custom-select"
+                  outlined
+                  bg-color="light-blue-2"
+                  emit-value
+                  map-options
+                  :options="arrTypesAccounts"
+                  :label="$t('circuit.sender')"
+                ></q-select>
+              </div>
+              <div
+                v-if="
+                  tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT
+                "
+              >
+                <q-select
+                  v-model="from_groupname"
+                  :options="arrGroupsList"
+                  :label="$t('circuit.choosecontocom')"
+                  rounded
+                  emit-value
+                  map-options
+                >
+                  <!-- Mostra i gruppi su cui sei Admin -->
+                </q-select>
+              </div>
+              <div
+                v-else-if="
+                  tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT
+                "
+              >
+                <q-input
+                  v-model="from_contocom"
+                  :label="$t('circuit.contocom')"
+                  readonly
+                  class="q-my-sm"
+                >
+                </q-input>
+              </div>
+
+              <CSaldo
+                v-if="circuitloaded && circuitloaded.symbol"
+                :symbol="circuitloaded.symbol"
+                :color="circuitloaded.color"
+                :saldo="accountloaded ? accountloaded.saldo : 0"
+                :qtarem="
+                  accountloaded
+                    ? circuitStore.getRemainingCoinsToSend(accountloaded)
+                    : 0
+                "
+              >
+              </CSaldo>
+            </q-banner>
+
+            <q-banner
+              rounded
+              dense
+              class="shadow-5 q-my-sm"
+              color="primary q-title"
+            >
+              <div class="mybanner_left bg-green text-white q-mb-sm">
+                {{ $t('circuit.dest') }}
+              </div>
+
+              <!-- Destination -->
+              <CMyUserOnlyView
+                v-if="to_user"
+                :mycontact="to_user"
+                :visu="costanti.FIND_PEOPLE"
+                @setCmd="tools.setCmd"
+              >
+              </CMyUserOnlyView>
+              <CMyGroupOnlyView
+                v-if="to_group"
+                :mygrp="to_group"
+                :visu="costanti.USER_GROUPS"
+                :circuitname="circuitloaded.name"
+              >
+              </CMyGroupOnlyView>
+              <CMyGroupOnlyView
+                v-if="circuitloaded && !!circuitloaded._id && to_contocom"
+                :mygrp="{ groupname: to_contocom }"
+                :visu="costanti.USER_GROUPS"
+                :circuitname="circuitloaded.name"
+              >
+              </CMyGroupOnlyView>
+            </q-banner>
+
+            <q-inner-loading id="spinner" :showing="loading">
+              <q-spinner-tail size="6em" color="primary" />
+            </q-inner-loading>
+          </q-step>
+          <q-step
+            :name="1"
+            :title="getTitle(1)"
+            :icon="getIcon(1)"
+            :done="ifNextCheck(1)"            
          >
+            
+            <div v-if="circuitloaded && !!circuitloaded._id">
+              <q-banner
+                v-if="!circuitloaded.transactionsEnabled"
+                rounded
+                class="bg-red text-white"
+                style="text-align: center"
+              >
+                <em style="font-weight: bold">{{
+                  $t('circuit.transactionsEnabled_text')
+                }}</em
+                ><br />
+              </q-banner>
+
+              <q-input
+                ref="qtyRef"
+                class="q-py-sm text-h5"
+                outlined
+                v-model="qty"
+                :type="$q.platform.is.mobile ? 'string' : 'number'"
+                :rules="[
+                  (val) =>
+                    val <=
+                      circuitStore.getRemainingCoinsToSend(accountloaded) ||
+                    t('circuit.qta_remaining_to_send', {
+                      maxqta:
+                        circuitStore.getRemainingCoinsToSend(accountloaded),
+                      symbol: circuitloaded.symbol,
+                    }),
+                  (val) => val > 0 || t('circuit.qta_not_valid'),
+                ]"
+                :label="
+                  t('movement.amount_to_send', {
+                    qtamax: circuitStore.getRemainingCoinsToSend(accountloaded)
+                      ? circuitStore
+                          .getRemainingCoinsToSend(accountloaded)
+                          .toFixed(2)
+                      : 0 + ` ` + circuitloaded.symbol,
+                  })
+                "
+                input-class="text-right"
+                input-style="padding-bottom: 24px !important;"
+                v-on:keyup.enter="$event.target.nextElementSibling.focus()"
+              >
+                <!--val => val > circuitStore.getMaxCoinsToSend(accountloaded) || t('circuit.qta_max_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]" -->
+                <template v-slot:append>
+                  <div class="text-h5">
+                    <em
+                      class="q-px-sm text-white rounded-borders"
+                      :style="
+                        `background-color: ` +
+                        (circuitloaded.color ? circuitloaded.color : '#ff5500')
+                      "
+                      >{{ circuitloaded.symbol }}</em
+                    >
+                  </div>
+                </template>
+              </q-input>
+              <div v-if="$q.platform.is.mobile" class="q-mt-md">
+                <CNumericKeyboard v-model="qty" :showInput="false" />
+              </div>
+            </div>
+          </q-step>
+          <q-step
+            :name="2"
+            :title="getTitle(2)"
+            :icon="getIcon(2)"
+            :done="ifNextCheck(2)"
+          >
+            <q-field class="text-center text-bold">
+              {{ $t('circuit.descr_casuale') }}
+            </q-field>
            <q-input
-              v-model="from_contocom"
-              :label="$t('circuit.contocom')"
-              readonly
-              class="q-my-sm"
+              ref="causalRef"
+              v-model="causal"
+              type="textarea"
+              filled
+              :label="$t('circuit.note')"
+              class="q-my-sm full-width"
            >
            </q-input>
-          </div>

-          <CSaldo
-            v-if="circuitloaded && circuitloaded.symbol"
-            :symbol="circuitloaded.symbol"
-            :color="circuitloaded.color"
-            :saldo="accountloaded ? accountloaded.saldo : 0"
-            :qtarem="
-              accountloaded
-                ? circuitStore.getRemainingCoinsToSend(accountloaded)
-                : 0
-            "
-          >
-          </CSaldo>
-        </q-banner>
-
-        <q-banner
-          rounded
-          dense
-          class="shadow-5 q-my-sm"
-          color="primary q-title"
-        >
-          <div class="mybanner_left bg-green text-white q-mb-sm">
-            {{ $t('circuit.dest') }}
-          </div>
-
-          <!-- Destination -->
-          <CMyUserOnlyView
-            v-if="to_user"
-            :mycontact="to_user"
-            :visu="costanti.FIND_PEOPLE"
-            @setCmd="tools.setCmd"
-          >
-          </CMyUserOnlyView>
-          <CMyGroupOnlyView
-            v-if="to_group"
-            :mygrp="to_group"
-            :visu="costanti.USER_GROUPS"
-            :circuitname="circuitloaded.name"
-          >
-          </CMyGroupOnlyView>
-          <CMyGroupOnlyView
-            v-if="circuitloaded && !!circuitloaded._id && to_contocom"
-            :mygrp="{ groupname: to_contocom }"
-            :visu="costanti.USER_GROUPS"
-            :circuitname="circuitloaded.name"
-          >
-          </CMyGroupOnlyView>
-        </q-banner>
-
-        <q-inner-loading id="spinner" :showing="loading">
-          <q-spinner-tail size="6em" color="primary" />
-        </q-inner-loading>
-
-        <div v-if="circuitloaded && !!circuitloaded._id">
-          <q-banner
-            v-if="!circuitloaded.transactionsEnabled"
-            rounded
-            class="bg-red text-white"
-            style="text-align: center"
-          >
-            <em style="font-weight: bold">{{
-              $t('circuit.transactionsEnabled_text')
-            }}</em
-            ><br />
-          </q-banner>
-
-          <q-input
-            ref="qtyRef"
-            class="q-py-sm text-h5"
-            outlined
-            v-model="qty"
-            type="number"
-            :rules="[
-              (val) =>
-                val <= circuitStore.getRemainingCoinsToSend(accountloaded) ||
-                t('circuit.qta_remaining_to_send', {
-                  maxqta: circuitStore.getRemainingCoinsToSend(accountloaded),
-                  symbol: circuitloaded.symbol,
-                }),
-              (val) => val > 0 || t('circuit.qta_not_valid'),
-            ]"
-            :label="
-              t('movement.amount_to_send', {
-                qtamax: circuitStore.getRemainingCoinsToSend(accountloaded)
-                  ? circuitStore
-                      .getRemainingCoinsToSend(accountloaded)
-                      .toFixed(2)
-                  : 0 + ` ` + circuitloaded.symbol,
-              })
-            "
-            input-class="text-right"
-            v-on:keyup.enter="$event.target.nextElementSibling.focus()"
-          >
-            <!--val => val > circuitStore.getMaxCoinsToSend(accountloaded) || t('circuit.qta_max_to_send', { maxqta: tools.getRemainingCoinsToSend(accountloaded), symbol: circuitloaded.symbol })]" -->
-            <template v-slot:append>
-              <div class="text-h5">
-                <em
-                  class="q-px-sm text-white rounded-borders"
-                  :style="
-                    `background-color: ` +
-                    (circuitloaded.color ? circuitloaded.color : '#ff5500')
-                  "
-                  >{{ circuitloaded.symbol }}</em
-                >
-              </div>
-            </template>
-          </q-input>
-
-          <!--<q-slider
-              class="q-ma-xs"
-              v-if="
-                qty !== '' &&
-                circuitStore.getRemainingCoinsToSend(accountloaded) > 0
-              "
-              v-model="qty"
-              color="green"
-              markers
-              track-size="10px"
-              :step="numstep / 2"
-              :marker-labels="arrayMarkerLabel"
-              label-always
-              :label-value="priceLabel"
-              switch-label-side
-              switch-marker-labels-side
-              :inner-max="remainingCoins"
-              :min="0"
-              :max="Number(maxsendable ? maxsendable : 0)"
-            />
-          -->
-        </div>
-
-        <q-input
-          ref="causalRef"
-          v-model="causal"
-          :label="$t('circuit.note')"
-          class="q-my-sm full-width"
-        >
-        </q-input>
+            <div class="sendris">{{$t('circuit.sendcoinsto', {
+                  qty,
+                  coin: circuitloaded.symbol,
+                  dest: to_group
+                    ? to_group.groupname
+                    : to_user
+                    ? tools.getNomeUtenteByRecUser(to_user)
+                    : to_contocom,
+                })}} sul {{circuitsel }}
+            </div>
+          </q-step>
+        </q-stepper>
      </q-card-section>
-
-      <q-card-actions align="center">
+      <q-card-actions align="center" style="row justify-between">
        <q-btn
-          v-if="
-            circuitloaded &&
-            !!circuitloaded._id &&
-            (qtyRef
-              ? !(
-                  qtyRef.hasError ||
-                  !circuitloaded.transactionsEnabled ||
-                  (tipoConto === shared_consts.AccountType.USER &&
-                    to_user &&
-                    from_username === to_user.username) ||
-                  (tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUNT &&
-                    !from_groupname) ||
-                  (tipoConto === shared_consts.AccountType.COLLECTIVE_ACCOUT &&
-                    to_group &&
-                    from_groupname &&
-                    to_group.groupname === from_groupname) ||
-                  (tipoConto === shared_consts.AccountType.COMMUNITY_ACCOUNT &&
-                    !from_contocom)
-                )
-              : true)
-          "
-          :label="
-            $t('circuit.sendcoinsto', {
-              qty,
-              coin: circuitloaded.symbol,
-              dest: to_group
-                ? to_group.groupname
-                : to_user
-                ? tools.getNomeUtenteByRecUser(to_user)
-                : to_contocom,
-            })
-          "
-          color="positive"
-          @click="sendCoin()"
+          class="col"
+          flat
+          :label="$t('dialog.indietro')"
+          color="primary"
+          icon="navigate_before"
+          @click="clickIndietro(step)"
        ></q-btn>
        <q-btn
-          flat
-          :label="$t('dialog.cancel')"
-          color="primary"
-          v-close-popup
+          class="col"
+          :disable="!ifNextCheck(step)"
+          :label="
+            step === 0 || step === 1
+              ? $t('dialog.avanti')
+              : $t('circuit.sendcoins', {
+                  qty,
+                  coin: circuitloaded.symbol,
+                  dest: to_group
+                    ? to_group.groupname
+                    : to_user
+                    ? tools.getNomeUtenteByRecUser(to_user)
+                    : to_contocom,
+                })
+          "
+          color="positive"
+          :icon="(step === 2) ? 'img: images/1ris_rosso_100.png' : 'navigate_next'"
+          @click="clickAvanti(step)"
        ></q-btn>
      </q-card-actions>
    </q-card>
--- a/src/components/CSignUp/CSignUp.vue
+++ b/src/components/CSignUp/CSignUp.vue
@@ -83,7 +83,7 @@
                v$.aportador_solidario.$error
              "
              ref="inputAportador"
-              bg-color="lightblue"
+              bg-color="light-blue-4"
              :readonly="!!ap_iniziale"
              v-model="signup.aportador_solidario"
              rounded
@@ -357,7 +357,7 @@
                      signup.aportador_solidario !== tools.APORTADOR_NONE
                    "
                    ref="inputAportador"
-                    bg-color="lightblue"
+                    bg-color="light-blue-4"
                    :readonly="!!ap_iniziale"
                    v-model="signup.aportador_solidario"
                    rounded
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -180,8 +180,9 @@ $heightBtn: 100%;
 }

 .mybanner_left {
+  padding: 4px;
  font-weight: bold;
-  font-size: 1.1rem;
+  font-size: 1rem;
  text-align: left;
 }

@@ -1911,6 +1912,12 @@ h3 {
  text-align: center;
 }

+.ev_month {
+  color: black;
+  font-size: 1rem;
+  text-align: center;
+}
+
 .col-105 {
  height: auto;
  width: 90%;
@@ -2279,4 +2286,19 @@ $coloreprincipale: lightblue;
 .background-odd {
  background-color: white;
  /* O altro colore preferito */
-}
+}
+
+.q-stepper__tab {
+  padding: 3px 3px !important;
+}
+
+.q-stepper__step-inner{
+  padding-left: 24px !important;
+  padding-right: 4px !important;
+
+  @media (max-width: 600px) {
+    padding-left: 16px !important;
+    padding-right: 2px !important;
+  }
+
+}
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -68,6 +68,7 @@ export const tools = {
  FILTER_MYREC: 1,
  FILTER_MYFOLLOW: 2,

+  COOK_TIPOCONTO: 'TC_',
  COOK_SEARCH: 'SEARCH_',
  COOK_SELCART: 'SELCART_',
  COOK_SELGAS: 'SELGAS',
@@ -3105,6 +3106,12 @@ export const tools = {
    return ''
  },

+  getstrMonth3Letters(mytimestamp: Date | number | string | undefined) {
+    // console.log('getstrDate', mytimestamp)
+    if (mytimestamp) return date.formatDate(mytimestamp, 'MMM')
+    return ''
+  },
+
  getstrDay(mytimestamp: Date | number | string | undefined) {
    if (mytimestamp) return date.formatDate(mytimestamp, 'D')
    return ''
@@ -3207,7 +3214,7 @@ export const tools = {
    }
  },

-  getstrDateTimeEvent($t: any, myevent: IEvents, withhtml: boolean) {
+  getstrDateTimeEvent($t: any, myevent: IEvents, withhtml: boolean, acapo: boolean = false) {
    let mystr = ''
    // is same day?
    if (this.getstrDate(myevent.dateTimeStart) === this.getstrDate(myevent.dateTimeEnd)) {
@@ -3217,18 +3224,26 @@ export const tools = {
                    ${$t('cal.endtime')} ${this.getstrTime(myevent.dateTimeEnd)}`
      } else {
        mystr = `${this.getstrDateLong(myevent.dateTimeStart)}
-                 ${$t('cal.starttime')} ${this.getstrTime(myevent.dateTimeStart)}
-                 ${$t('cal.endtime')} ${this.getstrTime(myevent.dateTimeEnd)}`
+                 ${$t('cal.starttime')} ${this.getstrTime(myevent.dateTimeStart)}`
+
+        if (acapo)
+          mystr += ``
+
+        mystr += `${$t('cal.endtime')} ${this.getstrTime(myevent.dateTimeEnd)}`
      }
    } else {
      if (withhtml) {
        mystr = `<span class="cal__where-content">${this.getstrDateLong(myevent.dateTimeStart)}</span>
-                 <span class="cal__hours-content">${$t('cal.starttime')} ${this.getstrTime(myevent.dateTimeStart)} </span>
-                  ${$t('cal.enddate')} ${this.getstrDateLong(myevent.dateTimeEnd)}
+                 <span class="cal__hours-content">${$t('cal.dalle')} ${this.getstrTime(myevent.dateTimeStart)} </span>`
+
+        if (acapo)
+          mystr += `<br>`
+
+        mystr += `${$t('cal.enddate')} ${this.getstrDateLong(myevent.dateTimeEnd)}
                  <span class="cal__hours-content">${$t('cal.endtime')} ${this.getstrTime(myevent.dateTimeEnd)} </span>`
      } else {
        mystr = `${this.getstrDateLong(myevent.dateTimeStart)}
-                 ${$t('cal.starttime')} ${this.getstrTime(myevent.dateTimeStart)}
+                 ${$t('cal.dalle')} ${this.getstrTime(myevent.dateTimeStart)}
                 ${this.getstrDateLong(myevent.dateTimeEnd)}: ${$t('cal.endtime')} ${this.getstrTime(myevent.dateTimeEnd)}`
      }
    }
--- a/src/store/UserStore.ts
+++ b/src/store/UserStore.ts
@@ -576,7 +576,7 @@ export const useUserStore = defineStore('UserStore', {
      } else {
      } */

-      console.log('arrout', arrfinale)
+      // console.log('arrout', arrfinale)

      return arrfinale
    },
--- a/src/views/user/myprofile/myprofile.ts
+++ b/src/views/user/myprofile/myprofile.ts
@@ -58,7 +58,7 @@ export default defineComponent({
    const idnotif = computed(() => $route.query.idnotif ? $route.query.idnotif.toString() : '')
    const isDebugOn = computed(() => tools.isDebugOn())

-    const sendRIS = computed(() => !!$route.query.sendris ? $route.query.sendris : 0)
+    const sendRIS = computed(() => !!$route.query.sendris ? $route.query.sendris : '')

    const $router = useRouter()
    const filtroutente = ref(<any[]>[])
				`@@ -0,0 +1 @@`
				`export {default as CNumericKeyboard} from './CNumericKeyboard.vue'`