Add Movement !

src/components/CSendCoins/CSendCoins.scss

@@ -0,0 +1,66 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}

src/components/CSendCoins/CSendCoins.ts

@@ -0,0 +1,101 @@
+import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'
+
+import { ICircuit, IOperators, ISendCoin, ISpecialField, IUserFields } from '../../model'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useCircuitStore } from '@store/CircuitStore'
+import { useQuasar } from 'quasar'
+
+export default defineComponent({
+  name: 'CSendCoins',
+  emits: ['close'],
+  props: {
+    showprop: {
+      type: Boolean,
+      default: false,
+    },
+    to_user: {
+      type: Object as PropType<IUserFields>,
+      required: true,
+    },
+  },
+
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const show = ref(false)
+    const userStore = useUserStore()
+    const circuitStore = useCircuitStore()
+
+
+    const from_username = ref(userStore.my.username)
+    const circuitsel = ref('')
+    const qty = ref(1)
+    const causal = ref('')
+    const bothcircuits = ref(<any>[])
+
+    const circuitloaded = ref(<ICircuit|undefined>undefined)
+
+
+    watch(() => circuitsel.value, (newval, oldval) => {
+      circuitloaded.value = circuitStore.listcircuits.find((rec: ICircuit) => rec.name === newval)
+    })
+
+    watch(() => props.showprop, (newval, oldval) => {
+      console.log('props.showprop', props.showprop, newval)
+      show.value = newval
+    })
+
+    function mounted() {
+
+
+      // ....
+
+      bothcircuits.value = userStore.IsMyCircuitByUser(props.to_user)
+
+      if (bothcircuits.value.length === 1) {
+        circuitsel.value = bothcircuits.value[0]
+      }
+
+      circuitloaded.value = circuitStore.listcircuits.find((rec: ICircuit) => rec.name === circuitsel.value)
+
+      show.value = true
+    }
+
+    function hide() {
+      emit('close', true)
+    }
+
+    function sendCoin() {
+      console.log('sendcoin', qty.value, props.to_user.username)
+
+      if (props.to_user.username && qty.value && circuitloaded.value) {
+        const myrecsendcoin: ISendCoin = {
+          qty: qty.value,
+          dest: props.to_user.username,
+          circuitname: circuitsel.value,
+          causal: causal.value,
+          symbol: circuitloaded.value.symbol,
+        }
+        console.log('myrecsendcoin', myrecsendcoin)
+        if (circuitloaded.value) {
+          tools.sendCoinsByCircuit($q, circuitloaded.value, myrecsendcoin)
+        }
+      }
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      show,
+      bothcircuits,
+      from_username,
+      circuitsel,
+      circuitloaded,
+      qty,
+      hide,
+      sendCoin,
+      causal,
+    }
+  },
+})

src/components/CSendCoins/CSendCoins.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <q-dialog v-model="show" :maximized="$q.screen.lt.sm" @hide="hide">
+      <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 rounded outlined v-model="circuitsel" :options="bothcircuits" label="Circuito">
+          </q-select>
+
+          <q-input v-model="from_username" label="Mittente" class="full-width" disable>
+          </q-input>
+          <q-input v-model="to_user.username" label="Destinatario" class="full-width" disable>
+          </q-input>
+          <q-input v-model="causal" label="Causale" class="full-width">
+          </q-input>
+
+          <q-input outlined v-model="qty" type="number"
+
+                   label="Quantità"
+                   :prefix="circuitloaded.symbol">
+            <template v-slot:append>
+              <q-avatar>
+                <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
+              </q-avatar>
+            </template>
+          </q-input>
+
+        </q-card-section>
+        <q-card-actions align="center">
+          <q-btn
+            :label="$t('circuit.sendcoinsto', {qty, coin: circuitsel, dest: to_user.username })" color="primary"
+            @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>

src/components/CSendCoins/index.ts

@@ -0,0 +1 @@
+export {default as CSendCoins} from './CSendCoins.vue'