From 5c720579b50ab608aeb060e4bf44dbb97b7891de Mon Sep 17 00:00:00 2001
From: Danil Lysak <lysakdanil@gmail.com>
Date: Wed, 19 Jul 2023 20:32:22 +0300
Subject: [PATCH 1/4] feat: Add currency code in record list

---
 src/api/currencies.ts                         |  4 ++-
 src/components/common/currency-code.vue       | 32 +++++++++++++++++++
 .../transactions-list/mono-transaction.vue    |  5 +++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/currency-code.vue

diff --git a/src/api/currencies.ts b/src/api/currencies.ts
index 38c9b7d1..9516d3e3 100644
--- a/src/api/currencies.ts
+++ b/src/api/currencies.ts
@@ -18,7 +18,9 @@ export const deleteCustomRate = (
     baseCode: string;
     quoteCode: string;
   }[],
-) => api.delete('/user/currency/rates', { pairs });
+) => {
+  api.delete('/user/currency/rates', { pairs });
+}
 
 export const loadUserCurrenciesExchangeRates = async () => {
   const result = await api.get('/user/currencies/rates');
diff --git a/src/components/common/currency-code.vue b/src/components/common/currency-code.vue
new file mode 100644
index 00000000..fc8d97ab
--- /dev/null
+++ b/src/components/common/currency-code.vue
@@ -0,0 +1,32 @@
+<template>
+  <span>{{ currencyCode }}</span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { useCurrenciesStore } from '@/stores';
+import { storeToRefs } from 'pinia';
+
+export default defineComponent({
+  name: 'currency-code',
+  props: {
+    currencyId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const currenciesStore = useCurrenciesStore()
+    const { currencies } = storeToRefs(currenciesStore);
+
+    const currencyCode = computed(() => {
+      const currency = currencies.value.find(item => item.currencyId === props.currencyId);
+      return currency.code
+    });
+
+    return {
+      currencyCode,
+    };
+  },
+});
+</script>
diff --git a/src/components/transactions-list/mono-transaction.vue b/src/components/transactions-list/mono-transaction.vue
index 1ccd0cf1..a63ac74b 100644
--- a/src/components/transactions-list/mono-transaction.vue
+++ b/src/components/transactions-list/mono-transaction.vue
@@ -15,6 +15,7 @@
     <div class="transaction__right">
       <div class="transaction__amount">
         {{ formatAmount(tx.amount) }}
+        <currency-code :currencyId="tx.currencyId"/>
         <!-- {{ tx.account.currency.asset }} -->
       </div>
       <div class="transaction__time">
@@ -31,6 +32,7 @@ import { MonobankTrasnactionModel } from 'shared-types';
 import { useCategoriesStore } from '@/stores';
 import { MODAL_TYPES, useModalCenter } from '@/components/modal-center/index';
 import { formatAmount } from '@/js/helpers';
+import currencyCode from '@/components/common/currency-code.vue'
 
 export default defineComponent({
   props: {
@@ -39,6 +41,9 @@ export default defineComponent({
       required: true,
     },
   },
+  components: {
+    currencyCode
+  },
   setup(props) {
     const { getCategoryTypeById } = useCategoriesStore();
     const { addModal } = useModalCenter();

From 8031ab9762a03d211a7769df814e579db08d2279 Mon Sep 17 00:00:00 2001
From: Danil Lysak <lysakdanil@gmail.com>
Date: Wed, 19 Jul 2023 20:39:17 +0300
Subject: [PATCH 2/4] fix: Fix some linter problem

---
 src/api/currencies.ts                                 |  2 +-
 src/components/common/currency-code.vue               |  6 +++---
 src/components/transactions-list/mono-transaction.vue | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/api/currencies.ts b/src/api/currencies.ts
index 9516d3e3..77233e4b 100644
--- a/src/api/currencies.ts
+++ b/src/api/currencies.ts
@@ -20,7 +20,7 @@ export const deleteCustomRate = (
   }[],
 ) => {
   api.delete('/user/currency/rates', { pairs });
-}
+};
 
 export const loadUserCurrenciesExchangeRates = async () => {
   const result = await api.get('/user/currencies/rates');
diff --git a/src/components/common/currency-code.vue b/src/components/common/currency-code.vue
index fc8d97ab..b5168894 100644
--- a/src/components/common/currency-code.vue
+++ b/src/components/common/currency-code.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useCurrenciesStore } from '@/stores';
 import { storeToRefs } from 'pinia';
 
@@ -16,12 +16,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const currenciesStore = useCurrenciesStore()
+    const currenciesStore = useCurrenciesStore();
     const { currencies } = storeToRefs(currenciesStore);
 
     const currencyCode = computed(() => {
       const currency = currencies.value.find(item => item.currencyId === props.currencyId);
-      return currency.code
+      return currency.code;
     });
 
     return {
diff --git a/src/components/transactions-list/mono-transaction.vue b/src/components/transactions-list/mono-transaction.vue
index a63ac74b..de97d5e5 100644
--- a/src/components/transactions-list/mono-transaction.vue
+++ b/src/components/transactions-list/mono-transaction.vue
@@ -15,7 +15,7 @@
     <div class="transaction__right">
       <div class="transaction__amount">
         {{ formatAmount(tx.amount) }}
-        <currency-code :currencyId="tx.currencyId"/>
+        <currency-code :currency-id="tx.currencyId" />
         <!-- {{ tx.account.currency.asset }} -->
       </div>
       <div class="transaction__time">
@@ -32,18 +32,18 @@ import { MonobankTrasnactionModel } from 'shared-types';
 import { useCategoriesStore } from '@/stores';
 import { MODAL_TYPES, useModalCenter } from '@/components/modal-center/index';
 import { formatAmount } from '@/js/helpers';
-import currencyCode from '@/components/common/currency-code.vue'
+import currencyCode from '@/components/common/currency-code.vue';
 
 export default defineComponent({
+  components: {
+    currencyCode,
+  },
   props: {
     tx: {
       type: Object as PropType<MonobankTrasnactionModel>,
       required: true,
     },
   },
-  components: {
-    currencyCode
-  },
   setup(props) {
     const { getCategoryTypeById } = useCategoriesStore();
     const { addModal } = useModalCenter();

From 7aa6c56f2769bc190319f25393249f10ae6615aa Mon Sep 17 00:00:00 2001
From: Danil Lysak <lysakdanil@gmail.com>
Date: Fri, 21 Jul 2023 17:56:13 +0300
Subject: [PATCH 3/4] feat: Show curr code in inputField & del component

---
 src/api/currencies.ts                         |  4 +-
 src/components/common/currency-code.vue       | 32 ----------
 src/components/fields/input-field.vue         | 58 ++++++++++++++-----
 .../modals/system-tx-form/index.vue           | 20 ++++++-
 .../transactions-list/mono-transaction.vue    | 15 ++---
 src/stores/currencies.ts                      |  8 +++
 6 files changed, 79 insertions(+), 58 deletions(-)
 delete mode 100644 src/components/common/currency-code.vue

diff --git a/src/api/currencies.ts b/src/api/currencies.ts
index 77233e4b..38c9b7d1 100644
--- a/src/api/currencies.ts
+++ b/src/api/currencies.ts
@@ -18,9 +18,7 @@ export const deleteCustomRate = (
     baseCode: string;
     quoteCode: string;
   }[],
-) => {
-  api.delete('/user/currency/rates', { pairs });
-};
+) => api.delete('/user/currency/rates', { pairs });
 
 export const loadUserCurrenciesExchangeRates = async () => {
   const result = await api.get('/user/currencies/rates');
diff --git a/src/components/common/currency-code.vue b/src/components/common/currency-code.vue
deleted file mode 100644
index b5168894..00000000
--- a/src/components/common/currency-code.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <span>{{ currencyCode }}</span>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { useCurrenciesStore } from '@/stores';
-import { storeToRefs } from 'pinia';
-
-export default defineComponent({
-  name: 'currency-code',
-  props: {
-    currencyId: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props) {
-    const currenciesStore = useCurrenciesStore();
-    const { currencies } = storeToRefs(currenciesStore);
-
-    const currencyCode = computed(() => {
-      const currency = currencies.value.find(item => item.currencyId === props.currencyId);
-      return currency.code;
-    });
-
-    return {
-      currencyCode,
-    };
-  },
-});
-</script>
diff --git a/src/components/fields/input-field.vue b/src/components/fields/input-field.vue
index 0197ffb6..a6984a4e 100644
--- a/src/components/fields/input-field.vue
+++ b/src/components/fields/input-field.vue
@@ -13,20 +13,30 @@
         </template>
       </template>
 
-      <input
-        v-bind="computedAttrs"
-        :type="type"
-        :value="modelValue"
-        :style="inputFieldStyles"
-        :disabled="disabled"
-        :tabindex="tabindex"
-        :min="minValue"
-        class="input-field__input"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      >
+      <div class="input-field__wrapper">
+        <div class="leading-icon">
+          <span class="iconLeading"></span>
+        </div>
+
+        <input
+          v-bind="computedAttrs"
+          :type="type"
+          :value="modelValue"
+          :style="inputFieldStyles"
+          :disabled="disabled"
+          :tabindex="tabindex"
+          :min="minValue"
+          class="input-field__input"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        >
+
+        <div v-if="currencyCode" class="trailing-icon">
+          <span class="iconTrailing">{{ currencyCode }}</span>
+        </div>
+      </div>
     </FieldLabel>
 
     <template v-if="isSubLabelExist">
@@ -63,6 +73,7 @@ export default defineComponent({
     label: { type: String, default: undefined },
     modelValue: { type: [String, Number], default: undefined },
     type: { type: String, default: undefined },
+    currencyCode: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
     tabindex: { type: String, default: undefined },
     errorMessage: { type: String, default: undefined },
@@ -155,6 +166,9 @@ export default defineComponent({
 
   @include placeholder-custom(rgba(var(--app-on-surface-color-rgb), 0.6));
 }
+.input-field__wrapper {
+  position: relative;
+}
 .input-fields__sublabel {
   position: absolute;
   right: 0;
@@ -168,4 +182,20 @@ export default defineComponent({
     text-decoration: none;
   }
 }
+.leading-icon,
+.trailing-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px 24px;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
 </style>
diff --git a/src/components/modals/system-tx-form/index.vue b/src/components/modals/system-tx-form/index.vue
index da7aa93b..fe0f4789 100644
--- a/src/components/modals/system-tx-form/index.vue
+++ b/src/components/modals/system-tx-form/index.vue
@@ -18,6 +18,7 @@
     <div class="system-tx-form__form">
       <form-row>
         <input-field
+          :currency-code="currencyCodeString"
           v-model="form.amount"
           label="Amount"
           type="number"
@@ -123,6 +124,7 @@ import {
   ref,
   watch,
   computed,
+  onMounted,
 } from 'vue';
 import { storeToRefs } from 'pinia';
 import {
@@ -204,9 +206,9 @@ export default defineComponent({
     const accountsStore = useAccountsStore();
     const categoriesStore = useCategoriesStore();
     const currenciesStore = useCurrenciesStore();
-    const { getCurrency } = useCurrenciesStore();
+    const { getCurrency, currenciesMap } = useCurrenciesStore();
 
-    const { accountsRecord } = storeToRefs(accountsStore);
+    const { accountsRecord, accounts } = storeToRefs(accountsStore);
     const { currencies } = storeToRefs(currenciesStore);
     const { categories, rawCategories } = storeToRefs(categoriesStore);
 
@@ -246,6 +248,13 @@ export default defineComponent({
 
       return form.value.account.currencyId !== form.value.toAccount.currencyId;
     });
+
+    const currencyCodeString = computed(() => {
+      if (form.value.account?.currencyId) {
+        return currenciesMap[form.value.account.currencyId].code
+      }
+    })
+
     const targetCurrency = computed(() => {
       if (form.value.toAccount?.currencyId) {
         return getCurrency(form.value.toAccount.currencyId);
@@ -400,11 +409,18 @@ export default defineComponent({
       if (!disabled) form.value.type = type;
     };
 
+    onMounted(() => {
+      form.value.account = accounts.value[0]
+      console.log(form.value.account.currencyId)
+    })
+
     return {
       FORM_TYPES,
       TRANSACTION_TYPES,
       PAYMENT_TYPES,
       form,
+      currencyCodeString,
+      currenciesMap,
       currencies,
       isCurrenciesDifferent,
       targetCurrency,
diff --git a/src/components/transactions-list/mono-transaction.vue b/src/components/transactions-list/mono-transaction.vue
index de97d5e5..4809ee52 100644
--- a/src/components/transactions-list/mono-transaction.vue
+++ b/src/components/transactions-list/mono-transaction.vue
@@ -15,7 +15,7 @@
     <div class="transaction__right">
       <div class="transaction__amount">
         {{ formatAmount(tx.amount) }}
-        <currency-code :currency-id="tx.currencyId" />
+        {{ currenciesMap[tx.currencyId].code }}
         <!-- {{ tx.account.currency.asset }} -->
       </div>
       <div class="transaction__time">
@@ -27,17 +27,14 @@
 
 <script lang="ts">
 import { format } from 'date-fns';
+import { storeToRefs } from 'pinia';
 import { defineComponent, PropType, computed } from 'vue';
 import { MonobankTrasnactionModel } from 'shared-types';
-import { useCategoriesStore } from '@/stores';
+import { useCategoriesStore, useCurrenciesStore } from '@/stores';
 import { MODAL_TYPES, useModalCenter } from '@/components/modal-center/index';
 import { formatAmount } from '@/js/helpers';
-import currencyCode from '@/components/common/currency-code.vue';
 
 export default defineComponent({
-  components: {
-    currencyCode,
-  },
   props: {
     tx: {
       type: Object as PropType<MonobankTrasnactionModel>,
@@ -46,7 +43,11 @@ export default defineComponent({
   },
   setup(props) {
     const { getCategoryTypeById } = useCategoriesStore();
+    const currenciesStore = useCurrenciesStore();
     const { addModal } = useModalCenter();
+
+    const { currenciesMap } = storeToRefs(currenciesStore);
+
     const category = computed(
       () => getCategoryTypeById(props.tx.categoryId),
     );
@@ -62,7 +63,7 @@ export default defineComponent({
 
     return {
       formatAmount,
-
+      currenciesMap,
       category,
       formateDate,
       editTransaction,
diff --git a/src/stores/currencies.ts b/src/stores/currencies.ts
index 61468ac4..49e6f5da 100644
--- a/src/stores/currencies.ts
+++ b/src/stores/currencies.ts
@@ -23,6 +23,13 @@ export const useCurrenciesStore = defineStore('currencies', () => {
     }, [] as CurrencyRecord[]),
   );
 
+  const currenciesMap = computed(() => {
+    return currencies.value.reduce((acc, curr) => {
+      acc[curr.currencyId] = curr;
+      return acc;
+    }, {});
+  });
+
   const loadCurrencies = async () => {
     currencies.value = await loadUserCurrencies();
 
@@ -58,6 +65,7 @@ export const useCurrenciesStore = defineStore('currencies', () => {
     currencies,
     baseCurrency,
     systemCurrencies,
+    currenciesMap,
     systemCurrenciesAssociatedWithUser,
     isBaseCurrencyExists,
     loadCurrencies,

From 5a287f6712eb8f34106e3b33cb9b1e3fa43f1a4b Mon Sep 17 00:00:00 2001
From: Danil Lysak <lysakdanil@gmail.com>
Date: Sat, 22 Jul 2023 12:47:42 +0300
Subject: [PATCH 4/4] fix: fix lint and some other mistakes

---
 src/components/fields/input-field.vue         | 44 +++++++++++--------
 .../modals/system-tx-form/index.vue           | 21 +++++----
 .../transactions-list/mono-transaction.vue    |  1 -
 src/stores/currencies.ts                      |  8 ++--
 4 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/fields/input-field.vue b/src/components/fields/input-field.vue
index a6984a4e..8a3fa8f8 100644
--- a/src/components/fields/input-field.vue
+++ b/src/components/fields/input-field.vue
@@ -14,9 +14,11 @@
       </template>
 
       <div class="input-field__wrapper">
-        <div class="leading-icon">
-          <span class="iconLeading"></span>
-        </div>
+        <template v-if="isLeadingIconExist">
+          <div class="input-field__leading-icon">
+            <slot name="iconLeading" />
+          </div>
+        </template>
 
         <input
           v-bind="computedAttrs"
@@ -33,9 +35,11 @@
           spellcheck="false"
         >
 
-        <div v-if="currencyCode" class="trailing-icon">
-          <span class="iconTrailing">{{ currencyCode }}</span>
-        </div>
+        <template v-if="isTrailIconExist">
+          <div class="input-field__trailing-icon">
+            <slot name="iconTrailing" />
+          </div>
+        </template>
       </div>
     </FieldLabel>
 
@@ -73,7 +77,6 @@ export default defineComponent({
     label: { type: String, default: undefined },
     modelValue: { type: [String, Number], default: undefined },
     type: { type: String, default: undefined },
-    currencyCode: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
     tabindex: { type: String, default: undefined },
     errorMessage: { type: String, default: undefined },
@@ -132,10 +135,16 @@ export default defineComponent({
 
     const isSubLabelExist = computed(() => !!slots.subLabel);
 
+    const isTrailIconExist = computed(() => !!slots.iconTrailing);
+
+    const isLeadingIconExist = computed(() => !!slots.iconLeading);
+
     return {
       minValue,
       computedAttrs,
       isSubLabelExist,
+      isTrailIconExist,
+      isLeadingIconExist,
     };
   },
 });
@@ -146,6 +155,14 @@ export default defineComponent({
   position: relative;
   width: 100%;
   flex: 1;
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 }
 .input-field--disabled {
   opacity: 0.6;
@@ -182,20 +199,11 @@ export default defineComponent({
     text-decoration: none;
   }
 }
-.leading-icon,
-.trailing-icon {
+.input-field__leading-icon,
+.input-field__trailing-icon {
   position: absolute;
   top: 0;
   right: 0;
   padding: 12px 24px;
 }
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
 </style>
diff --git a/src/components/modals/system-tx-form/index.vue b/src/components/modals/system-tx-form/index.vue
index fe0f4789..f1596036 100644
--- a/src/components/modals/system-tx-form/index.vue
+++ b/src/components/modals/system-tx-form/index.vue
@@ -18,13 +18,16 @@
     <div class="system-tx-form__form">
       <form-row>
         <input-field
-          :currency-code="currencyCodeString"
           v-model="form.amount"
           label="Amount"
           type="number"
           only-positive
           placeholder="Amount"
-        />
+        >
+          <template #iconTrailing>
+            <span>{{ currencyCode }}</span>
+          </template>
+        </input-field>
       </form-row>
 
       <account-field
@@ -249,11 +252,12 @@ export default defineComponent({
       return form.value.account.currencyId !== form.value.toAccount.currencyId;
     });
 
-    const currencyCodeString = computed(() => {
+    const currencyCode = computed(() => {
       if (form.value.account?.currencyId) {
-        return currenciesMap[form.value.account.currencyId].code
+        return currenciesMap[form.value.account.currencyId].code;
       }
-    })
+      return undefined;
+    });
 
     const targetCurrency = computed(() => {
       if (form.value.toAccount?.currencyId) {
@@ -410,16 +414,15 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      form.value.account = accounts.value[0]
-      console.log(form.value.account.currencyId)
-    })
+      form.value.account = accounts.value[0];
+    });
 
     return {
       FORM_TYPES,
       TRANSACTION_TYPES,
       PAYMENT_TYPES,
       form,
-      currencyCodeString,
+      currencyCode,
       currenciesMap,
       currencies,
       isCurrenciesDifferent,
diff --git a/src/components/transactions-list/mono-transaction.vue b/src/components/transactions-list/mono-transaction.vue
index 4809ee52..108c8a4c 100644
--- a/src/components/transactions-list/mono-transaction.vue
+++ b/src/components/transactions-list/mono-transaction.vue
@@ -16,7 +16,6 @@
       <div class="transaction__amount">
         {{ formatAmount(tx.amount) }}
         {{ currenciesMap[tx.currencyId].code }}
-        <!-- {{ tx.account.currency.asset }} -->
       </div>
       <div class="transaction__time">
         {{ formateDate(tx.time) }}
diff --git a/src/stores/currencies.ts b/src/stores/currencies.ts
index 49e6f5da..e3bae412 100644
--- a/src/stores/currencies.ts
+++ b/src/stores/currencies.ts
@@ -23,12 +23,12 @@ export const useCurrenciesStore = defineStore('currencies', () => {
     }, [] as CurrencyRecord[]),
   );
 
-  const currenciesMap = computed(() => {
-    return currencies.value.reduce((acc, curr) => {
+  const currenciesMap = computed(
+    () => currencies.value.reduce((acc, curr) => {
       acc[curr.currencyId] = curr;
       return acc;
-    }, {});
-  });
+    }, {}),
+  );
 
   const loadCurrencies = async () => {
     currencies.value = await loadUserCurrencies();