Accumulation support

components/accounts/entry.vue

@@ -14,7 +14,7 @@
             {{account.name}}
           </p>
 
-          <div  class="flex gap-1">
+          <div class="flex gap-1" v-if="!hideButtons">
             <hide-button class="btn btn-xs btn-ghost m-0 p-0.5" :hide-status="account.hidden" @hide="hide" @unHide="unHide"/>
             <edit-button v-if="!account.hidden" class="btn btn-xs btn-ghost m-0 p-0.5" @event="emit('edit-modal')"/>
           </div>
@@ -36,16 +36,23 @@
 import HideButton from "~/components/buttons/hideButton.vue";
 import EditButton from "~/components/buttons/editButton.vue";
 import DeleteButton from "~/components/buttons/deleteButton.vue";
+import WalletButton from "~/components/buttons/walletButton.vue";
 
-const emit = defineEmits(['edit-modal']);
+const emit = defineEmits(['edit-modal', 'accumulation-modal']);
 
 const props = defineProps({
-  account: {}
+  account: {
+    required: true
+  },
+  hideButtons: {
+    default: false,
+    required: false
+  }
 })
 
 const { t, locale } = useI18n();
 const { $currenciesApi, $accountsApi, $toastsManager } = useNuxtApp();
-const currency = (await $currenciesApi.getCurrencies()).value.find(c => c.currencyId === props.account.currencyId)
+const currency = $currenciesApi.getCurrencies().value.find(c => c.currencyId === props.account.currencyId)
 
 const formatAmount = (delta) => {
   const formatter = Intl.NumberFormat(locale.value, {

components/accounts/tagGroup.vue

@@ -22,9 +22,17 @@
     <div v-if="!hideStatus" class="bg-base-300 rounded-b-2xl p-2">
       <div v-if="accounts.length > 0" class="flex flex-col gap-2">
         <transition-group name="accounts">
-          <entry v-for="account in showedAccounts" :account="account" @edit-modal="openEditAccountModal(account)" :key="account.accountId"/>
-
-          <entry v-for="account in hiddenAccounts" :account="account" @edit-modal="openEditAccountModal(account)" :key="account.accountId"/>
+          <entry v-for="account in showedAccounts"
+                 :account="account"
+                 @edit-modal="openEditAccountModal(account)"
+                 :key="account.accountId"
+          />
+
+          <entry v-for="account in hiddenAccounts"
+                 :account="account"
+                 @edit-modal="openEditAccountModal(account)"
+                 :key="account.accountId"
+          />
         </transition-group>
       </div>
       <div v-else class="card min-w-max templateBorder">
@@ -49,7 +57,8 @@
     </confirmation>
 
     <modal-account-tag-edit @close="tagEditModal = false" :opened="tagEditModal" :tag="tag"/>
-    <modal-account-edit :account="accountToEdit" :opened="accountEditModal" @close="accountEditModal = false"></modal-account-edit>
+    <modal-account-edit :account="accountToEdit" :opened="accountEditModal" @close="accountEditModal = false" @open-accumulation="openAccumulationModal(accountToEdit)" ></modal-account-edit>
+    <modal-accumulation-set @close="accumulationSetModal = false" :opened="accumulationSetModal" :account="accountToAccumulation" ></modal-accumulation-set>
   </div>
 </template>
 
@@ -87,11 +96,11 @@ const hiddenAccounts = computed(() => props.accounts.filter((a) => a.hidden));
 const createAccountModal = ref(false);
 const tagDeleteModal = ref(false);
 const tagEditModal = ref(false);
+const accumulationSetModal = ref(false);
 
 const accountEditModal = ref(false);
-
 const accountToEdit = ref(null);
-
+const accountToAccumulation = ref(null);
 const setHide = () => {
   emit('hide');
 }
@@ -109,6 +118,11 @@ const openEditAccountModal = (account) => {
   accountEditModal.value = true;
 }
 
+const openAccumulationModal = (account) => {
+  accountToAccumulation.value = account;
+  accumulationSetModal.value = true;
+}
+
 const confirmDelete = () => {
   tagDeleteModal.value = false;
 

components/buttons/walletButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <div @click="emit('event')">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 9m18 0V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v3" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['event']);
+
+</script>
+
+<style scoped>
+
+</style>

components/modal/account/edit.vue

@@ -24,7 +24,7 @@
                 v-model="tag"
                 @change="syncTag">
           <option disabled value="-1">{{ $t('modals.editAccount.placeholders.tagSelect') }}</option>
-          <option v-for="tag in allTags" :value="tag.tagId">{{ tag.name + (tag.description !== undefined ? ` (${tag.description})` : "") }}</option>
+          <option v-for="tag in allTags" :value="tag.tagId">{{ tag.name + (tag.description ? ` (${tag.description})` : "") }}</option>
         </select>
       </div>
 
@@ -36,7 +36,9 @@
                 :maxlength="configs.maxDescriptionLength">
       </textarea>
 
-      <div class="modal-action">
+      <div class="modal-action justify-between items-center">
+        <button @click="emit('openAccumulation')" class="btn btn-sm">{{ $t('modals.editAccount.accumulation') }}</button>
+
         <button @click="close" class="btn btn-sm">{{ $t('modals.buttons.close') }}</button>
       </div>
     </div>
@@ -75,6 +77,7 @@
 
 import Default from "~/components/modal/transaction/create/default.vue";
 import Internal from "~/components/modal/transaction/create/internal.vue";
+import WalletButton from "~/components/buttons/walletButton.vue";
 
 const props = defineProps({
   opened: {
@@ -87,7 +90,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'openAccumulation'])
 const tab = ref(0);
 
 const { t } = useI18n();

components/modal/accumulation/set.vue

@@ -0,0 +1,138 @@
+<template>
+  <modal-base :title="$t('modals.setAccumulation.title')" :opened="opened" :name="'accumulation-set-modal'">
+    <div class="w-full flex flex-col gap-2">
+      <div class="flex justify-center">
+         <accounts-entry class="templateBorder w-1/2" v-if="account" :account="account" :hide-buttons="true"/>
+      </div>
+
+      <div class="flex gap-2">
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">{{ $t('modals.setAccumulation.placeholders.targetAccount') }}</span>
+          </label>
+
+          <select-account v-model="targetAccountId" :exclude-account="sourceAccountId" :currency-filter="currencyFilter"/>
+        </div>
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">{{ $t('modals.setAccumulation.placeholders.tag') }}</span>
+          </label>
+
+          <select-transaction-tag v-model="tagId" :can-be-without-parent="false" :tags-tree="tagsTree"/>
+        </div>
+      </div>
+
+      <step-entry v-for="(step, index) in steps" :model-value="step" @update:model-value="args => steps[index] = args"/>
+
+      <div class="w-full" v-if="configs.maxStepsPerAccount > steps.length">
+        <plus-button class="btn w-full" @event="steps.push({from: null, to: null, step: null})" />
+      </div>
+    </div>
+
+    <div class="modal-action justify-between">
+      <delete-button @click="deleteAccumulation" class="btn btn-sm btn-error" :class="{'btn-warning' : !allValid}">{{ $t('modals.buttons.delete') }}</delete-button>
+
+      <div class="flex gap-2">
+        <button @click="close" class="btn btn-sm btn-ghost">{{ $t('modals.buttons.cancel') }}</button>
+        <button @click="set" class="btn btn-sm btn-success" :class="{'btn-warning' : !allValid}">{{ $t('modals.buttons.set') }}</button>
+      </div>
+    </div>
+  </modal-base>
+</template>
+
+<script setup>
+import StepEntry from "~/components/modal/accumulation/stepEntry.vue";
+import PlusButton from "~/components/buttons/plusButton.vue";
+import DeleteButton from "~/components/buttons/deleteButton.vue";
+
+const props = defineProps({
+  opened: {
+    type: Boolean,
+    required: true
+  },
+
+  account: {
+    required: true
+  }
+})
+
+const { t } = useI18n();
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+  emit('close')
+}
+
+const {$serverConfigs, $accumulationsApi, $transactionsTagsApi, $toastsManager} = useNuxtApp();
+const configs = $serverConfigs.configs.accumulation;
+
+const accumulationMap = $accumulationsApi.getAccumulationMap();
+const tagsTree = $transactionsTagsApi.getTagsTree();
+
+const highlightErrors = ref(false);
+const allValid = computed(() => sourceAccountId.value && targetAccountId.value && tagId.value && steps.value.length > 0 && !steps.value.find(v => !v.step))
+
+const account = ref();
+const steps = ref([]);
+const sourceAccountId = ref();
+const targetAccountId = ref();
+const tagId = ref();
+const currencyFilter = ref();
+
+watch(() => props.opened, (value) => {
+  if (!value)
+    return;
+
+  const v = accumulationMap.value.get(props.account.accountId) || {};
+
+  sourceAccountId.value = props.account.accountId;
+  targetAccountId.value = v.targetAccountId;
+  tagId.value = v.tagId;
+  steps.value = v.steps || [{from: null, to: null, steps: null}];
+  account.value = props.account;
+  currencyFilter.value = props.account.currencyId;
+})
+
+const set = () => {
+  if (!allValid.value) {
+    highlightErrors.value = true;
+
+    return;
+  }
+
+  const result = {
+    sourceAccountId: sourceAccountId.value,
+    targetAccountId: targetAccountId.value,
+    tagId: tagId.value,
+    steps: steps.value
+  }
+
+  highlightErrors.value = false;
+  close();
+
+  $accumulationsApi.setAccumulation(result).then((s) => {
+    if (s)
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.success"), 2500, "success")
+    else
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.error"), 3000,"error")
+  });
+}
+
+const deleteAccumulation = () => {
+  close();
+
+  $accumulationsApi.removeAccumulation(sourceAccountId.value).then((s) => {
+    if (s)
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.deleted"), 2500, "success")
+    else
+      $toastsManager.pushToast(t("modals.setAccumulation.messages.error"), 3000,"error")
+  });
+}
+
+</script>
+
+<style scoped>
+
+</style>

components/modal/accumulation/stepEntry.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="join flex">
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.from')" v-model.lazy="from" @change="update"/>
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.to')" v-model.lazy="to" @change="update"/>
+    <input class="input input-bordered join-item w-full" :placeholder="t('modals.setAccumulation.placeholders.stepEntry.step')" v-model.lazy="step" @change="update"/>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+
+  }
+})
+
+const { t } = useI18n();
+
+const from = ref(null);
+const to = ref(null);
+const step = ref(10);
+
+const emit = defineEmits(['update:modelValue', 'updated'])
+
+const update = () => {
+  if (from.value === props.modelValue.from && to.value === props.modelValue.to && step.value === props.modelValue.step)
+    return;
+
+  emit("update:modelValue", {
+    from: from.value,
+    to: to.value,
+    step: step.value
+  });
+
+  emit("updated");
+}
+
+watch(() => props.modelValue, () => {
+  from.value = props.modelValue.from;
+  to.value = props.modelValue.to;
+  step.value = props.modelValue.step;
+});
+
+from.value = props.modelValue.from;
+to.value = props.modelValue.to;
+step.value = props.modelValue.step;
+
+</script>
+
+<style scoped>
+
+</style>

components/modal/transaction/edit/edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <default :opened="typeOpened === 0" :transaction="transaction"  @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
+    <default :opened="typeOpened === 0 || typeOpened === 2 || typeOpened === 3" :transaction="transaction"  @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
     <internal :opened="typeOpened === 1" :transaction="transaction" @reload-transactions="emit('reloadTransactions')" @close="emit('close')"/>
   </div>
 </template>

components/modal/transaction/edit/internal.vue

@@ -123,7 +123,7 @@ const tagsTree = $transactionsTagsApi.getTagsTree();
 const tagsMap = $transactionsTagsApi.getTagsTreeMap();
 
 const excludeAccount = computed(() => {
-  if (!props.transaction)
+  if (!props.transaction || !props.opened)
     return null;
 
   return tab.value === 1 ? props.transaction.accountId : (props.transaction.metadata ? props.transaction.metadata.linkedTransaction.accountId : -1);
@@ -147,7 +147,7 @@ watch(() => props.opened, (newV, oldV) => {
 })
 
 const transactionToEdit = computed(() => {
-  if (!props.transaction)
+  if (!props.transaction || !props.opened)
     return null;
 
   return tab.value === 0 ? props.transaction : (props.transaction.metadata ? props.transaction.metadata.linkedTransaction : null);

components/select/account.vue

@@ -20,20 +20,24 @@ const props = defineProps({
 
   excludeAccount: {
     type: Number
+  },
+
+  currencyFilter: {
+    type: Number
   }
 })
 
 const emit = defineEmits(['update:modelValue', 'selected'])
 const { t } = useI18n();
 const {$accountsApi, $accountsTagsApi} = useNuxtApp();
 
-const tags = await $accountsTagsApi.getTags();
-const accounts = await $accountsApi.getAccounts();
+const tags = $accountsTagsApi.getTags();
+const accounts = $accountsApi.getAccounts();
 
 const value = ref(props.modelValue || null);
 
 const getTagAccounts = (t) => {
-  return useArrayFilter(accounts, a => a.tagId === t.tagId).value
+  return useArrayFilter(accounts, a => a.tagId === t.tagId && (!props.currencyFilter || a.currencyId === props.currencyFilter)).value
 }
 
 const options = computed(() => {