myprojplanet_vite/src/components/CSendCoins/CSendCoins.vue

<template>
  <div>
    <q-dialog
      v-model="show"
      :maximized="$q.screen.lt.sm"
      @hide="hide"
      @show="qtyRef ? qtyRef.focus() : ''"
    >
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title>
            {{ $t('circuit.sendcoins') }}
          </q-toolbar-title>
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <q-select
            :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
            rounded
            outlined
            v-model="circuitsel"
            :options="bothcircuits"
            label="Circuito"
          >
          </q-select>

          <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 === costanti.AccountType.USER"
              v-model="from_username"
              class="full-width"
              readonly
            >
            </q-input>
            <div
              v-else-if="tipoConto === costanti.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 === costanti.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"
              :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 && 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">
            <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>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            v-if="circuitloaded"
            :disable="
              qtyRef
                ? qtyRef.hasError ||
                  !circuitloaded.transactionsEnabled ||
                  (tipoConto === costanti.AccountType.USER &&
                    to_user &&
                    from_username === to_user.username) ||
                  (tipoConto === costanti.AccountType.COLLECTIVE_ACCOUNT &&
                    !from_groupname) ||
                  (tipoConto === costanti.AccountType.COLLECTIVE_ACCOUNT &&
                    to_group &&
                    from_groupname &&
                    to_group.groupname === from_groupname) ||
                  (tipoConto === costanti.AccountType.COMMUNITY_ACCOUNT &&
                    !from_contocom)
                : false
            "
            :label="
              $t('circuit.sendcoinsto', {
                qty,
                coin: circuitsel,
                dest: to_group
                  ? to_group.groupname
                  : to_user
                  ? to_user.username
                  : to_contocom,
              })
            "
            color="positive"
            @click="sendCoin()"
          ></q-btn>
          <q-btn
            flat
            :label="$t('dialog.cancel')"
            color="primary"
            v-close-popup
          ></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CSendCoins.ts">
</script>

<style lang="scss" scoped>
@import './CSendCoins.scss';
</style>