gradido/frontend/src/components/GddSend/TransactionForm.vue

<template>
  <b-row class="transaction-form">
    <b-col xl="12" md="12" class="p-0">
      <b-card class="p-0 m-0 gradido-custom-background">
        <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
          <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
            <b-row>
              <b-col>
                <b-form-radio v-model="selected" name="radios" :value="sendTypes.send" size="lg">
                  {{ $t('send_gdd') }}
                </b-form-radio>
              </b-col>
              <b-col>
                <b-form-radio v-model="selected" name="radios" :value="sendTypes.link" size="lg">
                  {{ $t('send_per_link') }}
                </b-form-radio>
              </b-col>
            </b-row>
            <div class="mt-4" v-show="selected === sendTypes.link">
              <h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
              <div>
                {{ $t('gdd_per_link.choose-amount') }}
              </div>
            </div>

            <div>
              <validation-provider
                v-show="selected === sendTypes.send"
                name="Email"
                :rules="{
                  required: selected === sendTypes.send ? true : false,
                  email: true,
                  is_not: $store.state.email,
                }"
                v-slot="{ errors }"
              >
                <label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
                <b-input-group
                  id="input-group-1"
                  class="border border-default"
                  description="We'll never share your email with anyone else."
                  size="lg"
                >
                  <b-input-group-prepend class="d-none d-md-block">
                    <b-icon icon="envelope" class="display-4 m-3"></b-icon>
                  </b-input-group-prepend>
                  <b-form-input
                    id="input-1"
                    v-model="form.email"
                    v-focus="emailFocused"
                    @focus="emailFocused = true"
                    @blur="normalizeEmail()"
                    type="email"
                    placeholder="E-Mail"
                    class="pl-3 gradido-font-large"
                    :disabled="isBalanceDisabled"
                  ></b-form-input>
                </b-input-group>
                <b-col v-if="errors">
                  <span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
                </b-col>
              </validation-provider>
            </div>

            <br />

            <div>
              <validation-provider
                :name="$t('form.amount')"
                :rules="{
                  required: true,
                  gddSendAmount: [0.01, balance],
                }"
                v-slot="{ errors, valid }"
              >
                <label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
                <b-input-group id="input-group-2" class="border border-default" size="lg">
                  <b-input-group-prepend class="p-2 d-none d-md-block">
                    <div class="m-1 mt-2">{{ $t('GDD') }}</div>
                  </b-input-group-prepend>

                  <b-form-input
                    id="input-2"
                    v-model="form.amount"
                    type="text"
                    v-focus="amountFocused"
                    @focus="amountFocused = true"
                    @blur="normalizeAmount(valid)"
                    :placeholder="$n(0.01)"
                    class="pl-3 gradido-font-large"
                    :disabled="isBalanceDisabled"
                  ></b-form-input>
                </b-input-group>
                <b-col v-if="errors">
                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                </b-col>
              </validation-provider>
            </div>

            <div class="mt-4">
              <validation-provider
                :rules="{
                  required: true,
                  min: 5,
                  max: 150,
                }"
                :name="$t('form.message')"
                v-slot="{ errors }"
              >
                <label class="input-3" for="input-3">{{ $t('form.message') }}</label>
                <b-input-group id="input-group-3" class="border border-default">
                  <b-input-group-prepend class="d-none d-md-block">
                    <b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
                  </b-input-group-prepend>
                  <b-form-textarea
                    id="input-3"
                    rows="3"
                    v-model="form.memo"
                    class="pl-3 gradido-font-large"
                    :disabled="isBalanceDisabled"
                  ></b-form-textarea>
                </b-input-group>
                <b-col v-if="errors">
                  <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
                </b-col>
              </validation-provider>
            </div>
            <br />
            <div v-if="!!isBalanceDisabled" class="text-danger">
              {{ $t('form.no_gdd_available') }}
            </div>
            <b-row v-else class="test-buttons">
              <b-col>
                <b-button type="reset" variant="secondary" @click="onReset">
                  {{ $t('form.reset') }}
                </b-button>
              </b-col>
              <b-col class="text-right">
                <b-button type="submit" variant="success">
                  {{ selected === sendTypes.send ? $t('form.send_now') : $t('form.generate_now') }}
                </b-button>
              </b-col>
            </b-row>

            <br />
          </b-form>
        </validation-observer>
      </b-card>
    </b-col>
  </b-row>
</template>
<script>
import { BIcon } from 'bootstrap-vue'
import { SEND_TYPES } from '@/pages/Send.vue'

export default {
  name: 'TransactionForm',
  components: {
    BIcon,
  },
  props: {
    balance: { type: Number, default: 0 },
    email: { type: String, default: '' },
    amount: { type: Number, default: 0 },
    memo: { type: String, default: '' },
  },
  inject: ['getTunneledEmail'],
  data() {
    return {
      amountFocused: false,
      emailFocused: false,
      form: {
        email: this.email,
        amount: this.amount ? String(this.amount) : '',
        memo: this.memo,
        amountValue: 0.0,
      },
      selected: SEND_TYPES.send,
    }
  },
  methods: {
    onSubmit() {
      this.normalizeAmount(true)
      this.$emit('set-transaction', {
        selected: this.selected,
        email: this.form.email,
        amount: this.form.amountValue,
        memo: this.form.memo,
      })
    },
    onReset(event) {
      event.preventDefault()
      this.form.email = ''
      this.form.amount = ''
      this.form.memo = ''
    },
    normalizeAmount(isValid) {
      this.amountFocused = false
      if (!isValid) return
      this.form.amountValue = Number(this.form.amount.replace(',', '.'))
      this.form.amount = this.$n(this.form.amountValue, 'ungroupedDecimal')
    },
    normalizeEmail() {
      this.emailFocused = false
      this.form.email = this.form.email.trim()
    },
  },
  computed: {
    isBalanceDisabled() {
      return this.balance <= 0 ? 'disabled' : false
    },
    sendTypes() {
      return SEND_TYPES
    },
    recipientEmail() {
      return this.getTunneledEmail()
    },
  },
  created() {
    this.form.email = this.recipientEmail ? this.recipientEmail : ''
  },
}
</script>
<style>
span.errors {
  color: red;
}
#input-1:focus,
#input-2:focus,
#input-3:focus {
  font-weight: bold;
}
</style>