feat(exchange): implement exchange functionality with validation and user selection

Author: tacxou

apps/web/src/pages/bank.vue

@@ -2,7 +2,7 @@
   q-card(flat :style="{ flex: 1 }")
     q-tabs(v-model='tab' inline-label)
       q-tab(name='upload', label='Déposer')
-      //- q-tab(name='exchange', label='Echanger')
+      q-tab(name='exchange', label='Echanger')
     q-card-section
       nuxt-page
 </template>

apps/web/src/pages/bank/exchange.vue

@@ -2,15 +2,164 @@
   q-card(flat :style="{ flex: 1 }")
     .fit.flex
       .flex.justify-center.items-center.column.q-ma-md(:style='{flex: 1}')
-        q-select.full-width(filled)
+        q-select.full-width(filled v-model='from' label='Expéditeur' :options='fromList' option-label='name' option-value='name'
+        hint)
       .flex.justify-center.items-center.column.q-ma-md(:style='{flex: 1}')
         q-input.full-width(
           filled
+          v-model='amount'
+          label='Montant'
+          type='number'
+          :rules='[(val) => val > 0 || "Le montant doit être supérieur à 0", (val) => val <= getCurrency || "Le montant doit être inférieur ou égal à votre solde"]'
+          :min='0'
+          :max='getCurrency'
+        hint
         )
           template(#append)
             q-icon(name='mdi-cash')
       .flex.justify-center.items-center.column.q-ma-md(:style='{flex: 1}')
-        q-select.full-width(filled)
+        q-select.full-width(
+          v-model='to'
+          filled :options='options' label='Destinataire' option-label='name' option-value='name'
+        use-input
+        fill-input
+        emit-value
+        hide-selected
+        clearable
+        @filter="filterFn"
+        @filter-abort="abortFilterFn"
+        input-debounce="0"
+        hint
+          )
+          template(#append)
+            q-icon(name='mdi-account')
+    .fit.flex
+      .flex.justify-center.items-center.column.q-ma-md(:style='{flex: 1}')
+        q-btn.text-black(
+          :disable='amount <= 0 || to === ""'
+          label='Echanger'
+          color='primary'
+          @click='exchange'
+        )
 </template>
 
-<script lang="ts"></script>
+<script lang="ts">
+import { cp } from 'node:fs'
+
+export default {
+  data() {
+    return {
+      amount: 0,
+      to: '',
+    }
+  },
+  async setup() {
+    const options = ref([])
+    const getUsername = computed(() => {
+      const $auth = useAuth()
+
+      return $auth.user?.name
+    })
+
+    const from = ref(getUsername.value)
+
+    const {
+      data: users,
+      refresh,
+      error,
+    } = await useHttp<any>('/core/users/', {
+      transform: (result) => {
+        return (
+          result?.data.filter((user: any) => {
+            return user.name !== getUsername.value
+          }) || []
+        )
+      },
+    })
+
+    options.value = users.value
+
+    return {
+      from,
+      getUsername,
+      users,
+      options,
+    }
+  },
+  computed: {
+    fromList() {
+      const list = ref<any[]>([])
+
+      list.value.push({
+        name: this.getUsername + ' (vous)',
+        value: this.getUsername,
+      })
+
+      list.value.push({
+        name: 'Mairie',
+        value: 'Mairie',
+      })
+
+      return list.value
+    },
+    getCurrency() {
+      const $auth = useAuth()
+
+      return $auth.user?.currency
+    },
+  },
+  methods: {
+    filterFn(val: string, update: any) {
+      if (val === '') {
+        update(() => {
+          this.options = this.users
+        })
+        return
+      }
+
+      const needle = val.toLowerCase()
+      const filtered = this.users.filter((user: any) => {
+        return user.name?.toLowerCase().indexOf(needle) > -1
+      })
+
+      update(() => {
+        this.options = filtered
+      })
+    },
+    abortFilterFn() {
+      this.options = this.users
+    },
+    exchange() {
+      this.$q
+        .dialog({
+          title: 'Echange',
+          message: 'Etes-vous sûr de vouloir échanger ' + this.amount + ' € avec ' + this.to + ' ?',
+          persistent: true,
+          ok: { label: 'Oui', color: 'primary' },
+          cancel: { label: 'Annuler', color: 'negative' },
+        })
+        .onOk(() => {
+          this.$http
+            .post('/core/bank/exchange/', {
+              from: this.from,
+              to: this.to,
+              amount: this.amount,
+            })
+            .then(() => {
+              this.$q.notify({
+                type: 'positive',
+                message: 'Echange effectué avec succès',
+              })
+              this.$router.push('/bank')
+            })
+            .catch((err) => {
+              this.$q.notify({
+                type: 'negative',
+                message: err.message,
+              })
+            })
+        })
+    },
+  },
+}
+</script>