newfreeplanet_OLD/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>

          <CSaldo
            v-if="circuitloaded"
            :symbol="circuitloaded.symbol"
            :color="circuitloaded.color"
            :saldo="accountloaded ? accountloaded.saldo : 0"
            :qtarem="
              accountloaded
                ? circuitStore.getRemainingCoinsToSend(accountloaded)
                : 0
            "
          >
          </CSaldo>

          <div>
            <q-btn-toggle
              v-model="tipoConto"
              class="my-custom-toggle"
              no-caps
              rounded
              unelevated
              toggle-color="primary"
              color="white"
              text-color="primary"
              :options="[
                { label: 'Utente', value: costanti.AccountType.USER },
                {
                  label: 'Conto Comunitario',
                  value: costanti.AccountType.COMMUNITY_ACCOUNT,
                },
              ]"
            />
          </div>

          <q-input
            v-if="tipoConto === costanti.AccountType.USER"
            v-model="from_username"
            label="Mittente"
            class="full-width"
            readonly
          >
          </q-input>
          <div v-else>
            <q-select
              v-model="from_groupname"
              :options="arrGroupsList"
              label="Gruppo"
              rounded
              emit-value
              map-options
            >
              <!-- Mostra i gruppi su cui sei Admin -->
            </q-select>
          </div>

          <!-- Destination -->
          <CMyUserOnlyView
            v-if="to_user"
            :mycontact="to_user"
            :visu="costanti.FIND_PEOPLE"
            @setCmd="tools.setCmd"
            labelextra="Destinatario"
          >
          </CMyUserOnlyView>

          <CMyGroupOnlyView v-if="to_group" :mygrp="to_group" :visu="costanti.USER_GROUPS"
            :circuitname="circuitloaded.name"
            labelextra="Destinatario">
          </CMyGroupOnlyView>

          <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="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
                : false
            "
            :label="
              $t('circuit.sendcoinsto', {
                qty,
                coin: circuitsel,
                dest: to_group ? to_group.groupname : to_user.username,
              })
            "
            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>