- Invio RIS migliorata grafica e aggiunto tastierino numerico.

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;  
+}

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,
     }
   },
 })

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>