Rebuild frontend for account creation / editing.

2025-02-25 18:45:27 -06:00 · 2021-08-09 08:01:27 +02:00
parent 6f7900234d
commit 54cf46ff32
76 changed files with 415 additions and 93 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",
+        "@johmun/vue-tags-input": "^2.1.0",
        "admin-lte": "^3.1.0",
        "axios-cache-adapter": "^2.7.3",
        "bootstrap": "^4.6.0",
@@ -39,6 +40,7 @@
        "localforage-memoryStorageDriver": "^0.9.2",
        "overlayscrollbars": "^1.13.1",
        "sortablejs": "^1.14.0",
+        "uiv": "^1.3.1",
        "v-calendar": "^2.3.2",
        "vue-typeahead-bootstrap": "^2.8.0",
        "vue2-leaflet": "^2.7.1"
--- a/frontend/src/components/accounts/Create.vue
+++ b/frontend/src/components/accounts/Create.vue
@@ -257,7 +257,7 @@ export default {
  },
  methods: {
    storeField: function (payload) {
-      console.log(payload);
+      // console.log(payload);
      if ('location' === payload.field) {
        if (true === payload.value.hasMarker) {
          this.location = payload.value;
--- a/frontend/src/components/accounts/Edit.vue
+++ b/frontend/src/components/accounts/Edit.vue
@@ -76,9 +76,11 @@
              <GenericTextInput :disabled="submitting" v-model="account.account_number" field-name="account_number" :errors="errors.account_number"
                                :title="$t('form.account_number')" v-on:set-field="storeField($event)"/>

-              <GenericTextInput :disabled="submitting" v-if="'asset' === account.type" field-type="amount" v-model="account.virtual_balance" field-name="virtual_balance"
+              <GenericTextInput :disabled="submitting" v-if="'asset' === account.type" field-type="amount" v-model="account.virtual_balance"
+                                field-name="virtual_balance"
                                :errors="errors.virtual_balance" :title="$t('form.virtual_balance')" v-on:set-field="storeField($event)"/>
-              <GenericTextInput :disabled="submitting" v-if="'asset' === account.type" field-type="amount" v-model="account.opening_balance" field-name="opening_balance"
+              <GenericTextInput :disabled="submitting" v-if="'asset' === account.type" field-type="amount" v-model="account.opening_balance"
+                                field-name="opening_balance"
                                :errors="errors.opening_balance" :title="$t('form.opening_balance')" v-on:set-field="storeField($event)"/>
              <GenericTextInput :disabled="submitting" v-if="'asset' === account.type" field-type="date" v-model="account.opening_balance_date"
                                field-name="opening_balance_date" :errors="errors.opening_balance_date" :title="$t('form.opening_balance_date')"
@@ -115,7 +117,10 @@
          <div class="card-body">
            <div class="row">
              <div class="col-lg-6 offset-lg-6">
-                Button
+                <button :disabled=submitting type="button" @click="submitForm" class="btn btn-success btn-block">{{
+                    $t('firefly.update_' + account.type + '_account')
+                  }}
+                </button>
                <div class="form-check">
                  <input id="stayHere" v-model="stayHere" class="form-check-input" type="checkbox">
                  <label class="form-check-label" for="stayHere">
@@ -146,7 +151,6 @@ import GenericTextarea from "../form/GenericTextarea";
 import GenericCheckbox from "../form/GenericCheckbox";
 import GenericAttachments from "../form/GenericAttachments";
 import GenericLocation from "../form/GenericLocation";
-import format from "date-fns/format";

 export default {
  name: "Edit",
@@ -154,17 +158,29 @@ export default {
    // console.log('Created');
    let parts = window.location.pathname.split('/');
    this.accountId = parseInt(parts[parts.length - 1]);
-    this.uploadObjectId= parseInt(parts[parts.length - 1]);
+    this.uploadObjectId = parseInt(parts[parts.length - 1]);
    this.getAccount();
  },
  components: {
-    Alert, GenericTextInput, GenericCurrency, AssetAccountRole, LiabilityDirection, LiabilityType, Interest, InterestPeriod, GenericTextarea, GenericCheckbox, GenericAttachments, GenericLocation
+    Alert,
+    GenericTextInput,
+    GenericCurrency,
+    AssetAccountRole,
+    LiabilityDirection,
+    LiabilityType,
+    Interest,
+    InterestPeriod,
+    GenericTextarea,
+    GenericCheckbox,
+    GenericAttachments,
+    GenericLocation
  },
  data() {
    return {
      successMessage: '',
      errorMessage: '',
      stayHere: false,
+      inError: false,
      accountId: 0,
      submitting: false,

@@ -185,7 +201,28 @@ export default {
        liability_type: [],
        location: []
      },
-      defaultErrors: {}
+      defaultErrors: {
+        name: [],
+        currency_id: [],
+        account_role: [],
+        liability_type: [],
+        liability_direction: [],
+        liability_amount: [],
+        liability_date: [],
+        interest: [],
+        interest_period: [],
+        iban: [],
+        bic: [],
+        account_number: [],
+        virtual_balance: [],
+        opening_balance: [],
+        opening_balance_date: [],
+        include_net_worth: [],
+        active: [],
+        notes: [],
+        location: [],
+        attachments: [],
+      }
    }
  },
  methods: {
@@ -196,15 +233,82 @@ export default {
      this.hasAttachments = false;
    },
    uploadedAttachments: function (e) {
-      this.finishSubmission();
+      this.finaliseSubmission();
    },
-    submitForm: function () {
+    submitForm: function (e) {
      e.preventDefault();
      this.submitting = true;
-      //let submission = this.getSubmission();
+      let submission = this.getSubmission();
+      if (0 === Object.keys(submission).length) {
+        // console.log('Nothing to submit. Just finish up.');
+        this.finaliseSubmission();
+        return;
+      }
+      // console.log('Will submit:');
+      // console.log(submission);
+      const url = './api/v1/accounts/' + this.accountId;
+      axios.put(url, submission)
+          .then(this.processSubmission)
+          .catch(err => {
+            this.handleSubmissionError(err.response.data)
+          });
    },
-    finishSubmission: function() {
-
+    processSubmission: function() {
+      if (this.hasAttachments) {
+        // upload attachments. Do a callback to a finish up method.
+        this.uploadTrigger = true;
+        return;
+      }
+      this.finaliseSubmission();
+    },
+    finaliseSubmission: function () {
+      // console.log('finaliseSubmission');
+      // stay here, display message
+      if (true === this.stayHere && false === this.inError) {
+        this.errorMessage = '';
+        this.successMessage = this.$t('firefly.updated_account_js', {ID: this.accountId, title: this.account.name});
+        this.submitting = false;
+      }
+      // return to previous (bad hack), display message:
+      if (false === this.stayHere && false === this.inError) {
+        //console.log('no error + changes + redirect');
+        window.location.href = (window.previousURL ?? '/') + '?account_id=' + this.accountId + '&message=updated';
+        this.submitting = false;
+      }
+      // error or warning? here.
+      // console.log('end of finaliseSubmission');
+    },
+    handleSubmissionError: function (errors) {
+      console.log('Bad');
+      console.log(errors);
+      this.inError = true;
+      this.submitting = false;
+      this.errors = lodashClonedeep(this.defaultErrors);
+      for (let i in errors.errors) {
+        if (errors.errors.hasOwnProperty(i)) {
+          this.errors[i] = errors.errors[i];
+        }
+      }
+    },
+    getSubmission: function () {
+      let submission = {};
+      // console.log('getSubmission');
+      // console.log(this.account);
+      for (let i in this.account) {
+        // console.log(i);
+        if (this.account.hasOwnProperty(i) && this.originalAccount.hasOwnProperty(i) && JSON.stringify(this.account[i]) !== JSON.stringify(this.originalAccount[i])) {
+          // console.log('Field "' + i + '" has changed.');
+          // console.log('Original:')
+          // console.log(this.account[i]);
+          // console.log('Backup  : ');
+          // console.log(this.originalAccount[i]);
+          submission[i] = this.account[i];
+        }
+        // else {
+        //   console.log('Field "' + i + '" has not changed.');
+        // }
+      }
+      return submission;
    },
    /**
     * Grab account from URL and submit GET.
@@ -224,10 +328,10 @@ export default {
      console.log(payload);
      if ('location' === payload.field) {
        if (true === payload.value.hasMarker) {
-          this.location = payload.value;
+          this.account.location = payload.value;
          return;
        }
-        this.location = {};
+        this.account.location = {};
        return;
      }
      this.account[payload.field] = payload.value;
@@ -237,8 +341,8 @@ export default {
     * @param response
     */
    parseAccount: function (response) {
-      console.log('Will now parse');
-      console.log(response);
+      // console.log('Will now parse');
+      // console.log(response);
      let attributes = response.data.attributes;
      let account = {};

@@ -265,11 +369,15 @@ export default {
      account.opening_balance_date = attributes.opening_balance_date;
      account.type = attributes.type;
      account.virtual_balance = attributes.virtual_balance;
-      account.location = {
-        latitude: attributes.latitude,
-        longitude: attributes.longitude,
-        zoom_level: attributes.zoom_level
-      };
+      account.location = {};
+      if (null !== attributes.latitude && null !== attributes.longitude && null !== attributes.zoom_level) {
+        account.location = {
+          latitude: attributes.latitude,
+          longitude: attributes.longitude,
+          zoom_level: attributes.zoom_level
+        };
+      }
+

      this.account = account;
      this.originalAccount = lodashClonedeep(this.account);
--- a/frontend/src/components/bills/Create.vue
+++ b/frontend/src/components/bills/Create.vue
@@ -189,7 +189,7 @@ export default {
  },
  methods: {
    storeField: function (payload) {
-      console.log(payload);
+      // console.log(payload);
      if ('location' === payload.field) {
        if (true === payload.value.hasMarker) {
          this.location = payload.value;
@@ -210,8 +210,8 @@ export default {
      e.preventDefault();
      this.submitting = true;
      let submission = this.getSubmission();
-      console.log('Will submit:');
-      console.log(submission);
+      // console.log('Will submit:');
+      // console.log(submission);
      let url = './api/v1/bills';

      axios.post(url, submission)
--- a/frontend/src/components/form/GenericAttachments.vue
+++ b/frontend/src/components/form/GenericAttachments.vue
@@ -97,22 +97,22 @@ export default {
        // });

        // new code
-        console.log('start of new');
+        // console.log('start of new');
        let files = this.$refs.att.files;
        this.uploads = files.length;
        // loop all files and create attachments.
        for (let i in files) {
          if (files.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
-            console.log('Now at file ' + (parseInt(i) + 1) + ' / ' + files.length);
+            // console.log('Now at file ' + (parseInt(i) + 1) + ' / ' + files.length);
            // read file into file reader:
            let current = files[i];
            let fileReader = new FileReader();
            let theParent = this; // dont ask me why i need to do this.
            fileReader.onloadend = evt => {
              if (evt.target.readyState === FileReader.DONE) {
-                console.log('I am done reading file ' + (parseInt(i) + 1));
+                // console.log('I am done reading file ' + (parseInt(i) + 1));
                this.createAttachment(current.name).then(response => {
-                  console.log('Created attachment. Now upload (1)');
+                  // console.log('Created attachment. Now upload (1)');
                  return theParent.uploadAttachment(response.data.data.id, new Blob([evt.target.result]));
                }).then(theParent.countAttachment);
              }
@@ -121,7 +121,7 @@ export default {
          }
        }
        if (0 === files.length) {
-          console.log('No files to upload. Emit event!');
+          // console.log('No files to upload. Emit event!');
          this.$emit('uploaded-attachments', this.transaction_journal_id);
        }
        // Promise.all(promises).then(response => {
--- a/frontend/src/components/form/GenericTextInput.vue
+++ b/frontend/src/components/form/GenericTextInput.vue
@@ -29,12 +29,13 @@
          :class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
          :placeholder="title"
          :name="fieldName"
+          ref="textInput"
          :type="fieldType"
          :disabled=disabled
          :step="fieldStep"
      />
      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
+        <button class="btn btn-outline-secondary" v-on:click="clearText" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
      </div>
    </div>
    <span v-if="errors.length > 0">
@@ -83,6 +84,11 @@ export default {
      localValue: this.value
    }
  },
+  methods: {
+    clearText: function () {
+      this.localValue = '';
+    },
+  },
  watch: {
    localValue: function (value) {
      this.$emit('set-field', {field: this.fieldName, value: value});
--- a/frontend/src/components/transactions/Index.vue
+++ b/frontend/src/components/transactions/Index.vue
@@ -321,8 +321,8 @@ export default {
      configureAxios().then(async (api) => {
        let startStr = format(this.start, 'y-MM-dd');
        let endStr = format(this.end, 'y-MM-dd');
-        console.log(this.urlEnd);
-        console.log(this.urlStart);
+        // console.log(this.urlEnd);
+        // console.log(this.urlStart);
        if(null !== this.urlEnd && null !== this.urlStart) {
          startStr = format(this.urlStart, 'y-MM-dd');
          endStr = format(this.urlEnd, 'y-MM-dd');
--- a/frontend/src/locales/bg.json
+++ b/frontend/src/locales/bg.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u0442\u0440\u0438\u043c\u0435\u0441\u0435\u0447\u043d\u043e",
        "repeat_freq_monthly": "\u043c\u0435\u0441\u0435\u0447\u043d\u043e",
        "repeat_freq_weekly": "\u0435\u0436\u0435\u0441\u0435\u0434\u043c\u0438\u0447\u043d\u043e",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0430\u0439 \u0437\u0430\u0434\u044a\u043b\u0436\u0435\u043d\u0438\u0435",
+        "update_expense_account": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0430\u0439 \u0441\u043c\u0435\u0442\u043a\u0430 \u0437\u0430 \u0440\u0430\u0437\u0445\u043e\u0434\u0438",
+        "update_revenue_account": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0430\u0439 \u0441\u043c\u0435\u0442\u043a\u0430 \u0437\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0430\u0439 \u0441\u043c\u0435\u0442\u043a\u0430 \u0437\u0430 \u0430\u043a\u0442\u0438\u0432\u0438",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u041a\u0430\u0441\u0438\u0447\u043a\u0430",
--- a/frontend/src/locales/cs.json
+++ b/frontend/src/locales/cs.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u010dtvrtletn\u011b",
        "repeat_freq_monthly": "m\u011bs\u00ed\u010dn\u011b",
        "repeat_freq_weekly": "t\u00fddn\u011b",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Aktualizovat z\u00e1vazek",
+        "update_expense_account": "Aktualizovat v\u00fddajov\u00fd \u00fa\u010det",
+        "update_revenue_account": "Aktualizovat p\u0159\u00edjmov\u00fd \u00fa\u010det",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Aktualizovat v\u00fddajov\u00fd \u00fa\u010det",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Pokladni\u010dka",
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "viertelj\u00e4hrlich",
        "repeat_freq_monthly": "monatlich",
        "repeat_freq_weekly": "w\u00f6chentlich",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Vollst\u00e4ndige Zahlung jeden Monat",
+        "update_liabilities_account": "Verbindlichkeit aktualisieren",
+        "update_expense_account": "Ausgabenkonto aktualisieren",
+        "update_revenue_account": "Einnahmenkonto aktualisieren",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Bestandskonto aktualisieren",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Sparschwein",
--- a/frontend/src/locales/el.json
+++ b/frontend/src/locales/el.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u03c4\u03c1\u03b9\u03bc\u03b7\u03bd\u03b9\u03b1\u03af\u03c9\u03c2",
        "repeat_freq_monthly": "\u03bc\u03b7\u03bd\u03b9\u03b1\u03af\u03c9\u03c2",
        "repeat_freq_weekly": "\u03b5\u03b2\u03b4\u03bf\u03bc\u03b1\u03b4\u03b9\u03b1\u03af\u03c9\u03c2",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "\u0395\u03bd\u03b7\u03bc\u03ad\u03c1\u03c9\u03c3\u03b7 \u03c5\u03c0\u03bf\u03c7\u03c1\u03ad\u03c9\u03c3\u03b7\u03c2",
+        "update_expense_account": "\u0395\u03bd\u03b7\u03bc\u03ad\u03c1\u03c9\u03c3\u03b7 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u03b4\u03b1\u03c0\u03b1\u03bd\u03ce\u03bd",
+        "update_revenue_account": "\u0395\u03bd\u03b7\u03bc\u03ad\u03c1\u03c9\u03c3\u03b7 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u03b5\u03c3\u03cc\u03b4\u03c9\u03bd",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "\u0395\u03bd\u03b7\u03bc\u03ad\u03c1\u03c9\u03c3\u03b7 \u03bb\u03bf\u03b3\u03b1\u03c1\u03b9\u03b1\u03c3\u03bc\u03bf\u03cd \u03ba\u03b5\u03c6\u03b1\u03bb\u03b1\u03af\u03bf\u03c5",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u039a\u03bf\u03c5\u03bc\u03c0\u03b1\u03c1\u03ac\u03c2",
--- a/frontend/src/locales/en-gb.json
+++ b/frontend/src/locales/en-gb.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "quarterly",
        "repeat_freq_monthly": "monthly",
        "repeat_freq_weekly": "weekly",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Update liability",
+        "update_expense_account": "Update expense account",
+        "update_revenue_account": "Update revenue account",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Update asset account",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Piggy bank",
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "quarterly",
        "repeat_freq_monthly": "monthly",
        "repeat_freq_weekly": "weekly",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Update liability",
+        "update_expense_account": "Update expense account",
+        "update_revenue_account": "Update revenue account",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Update asset account",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Piggy bank",
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestralmente",
        "repeat_freq_monthly": "mensualmente",
        "repeat_freq_weekly": "semanalmente",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Actualizar pasivo",
+        "update_expense_account": "Actualizar cuenta de gastos",
+        "update_revenue_account": "Actualizar cuenta de ingresos",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Actualizar cuenta de activos",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Alcancilla",
--- a/frontend/src/locales/fi.json
+++ b/frontend/src/locales/fi.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "nelj\u00e4nnesvuosittain",
        "repeat_freq_monthly": "kuukausittain",
        "repeat_freq_weekly": "viikoittain",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "P\u00e4ivit\u00e4 vastuu",
+        "update_expense_account": "P\u00e4ivit\u00e4 kulutustili",
+        "update_revenue_account": "P\u00e4ivit\u00e4 tuottotili",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "P\u00e4ivit\u00e4 omaisuustili",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "S\u00e4\u00e4st\u00f6possu",
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestriel",
        "repeat_freq_monthly": "mensuel",
        "repeat_freq_weekly": "hebdomadaire",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Mettre \u00e0 jour le passif",
+        "update_expense_account": "Mettre \u00e0 jour le compte de d\u00e9penses",
+        "update_revenue_account": "Mettre \u00e0 jour le compte de recettes",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Mettre \u00e0 jour le compte d\u2019actif",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Tirelire",
--- a/frontend/src/locales/hu.json
+++ b/frontend/src/locales/hu.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "negyed\u00e9ves",
        "repeat_freq_monthly": "havi",
        "repeat_freq_weekly": "heti",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "K\u00f6telezetts\u00e9g friss\u00edt\u00e9se",
+        "update_expense_account": "K\u00f6lts\u00e9gsz\u00e1mla friss\u00edt\u00e9se",
+        "update_revenue_account": "J\u00f6vedelemsz\u00e1mla friss\u00edt\u00e9se",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Eszk\u00f6zsz\u00e1mla friss\u00edt\u00e9se",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Malacpersely",
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestralmente",
        "repeat_freq_monthly": "mensilmente",
        "repeat_freq_weekly": "settimanalmente",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Pagamento intero ogni mese",
+        "update_liabilities_account": "Aggiorna passivit\u00e0",
+        "update_expense_account": "Aggiorna conto uscite",
+        "update_revenue_account": "Aggiorna conto entrate",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Aggiorna conto attivit\u00e0",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Salvadanaio",
--- a/frontend/src/locales/nb.json
+++ b/frontend/src/locales/nb.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "kvartalsvis",
        "repeat_freq_monthly": "m\u00e5nedlig",
        "repeat_freq_weekly": "ukentlig",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Oppdater gjeld",
+        "update_expense_account": "Oppdater utgiftskonto",
+        "update_revenue_account": "Oppdater inntektskonto",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Oppdater aktivakonto",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Sparegris",
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "elk kwartaal",
        "repeat_freq_monthly": "maandelijks",
        "repeat_freq_weekly": "wekelijks",
-        "credit_card_type_monthlyFull": "Volledige betaling elke maand"
+        "credit_card_type_monthlyFull": "Volledige betaling elke maand",
+        "update_liabilities_account": "Update passiva",
+        "update_expense_account": "Wijzig crediteur",
+        "update_revenue_account": "Wijzig debiteur",
+        "update_undefined_account": "Account bijwerken",
+        "update_asset_account": "Wijzig betaalrekening",
+        "updated_account_js": "Account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\" bijgewerkt."
    },
    "list": {
        "piggy_bank": "Spaarpotje",
--- a/frontend/src/locales/pl.json
+++ b/frontend/src/locales/pl.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "kwartalnie",
        "repeat_freq_monthly": "miesi\u0119cznie",
        "repeat_freq_weekly": "tygodniowo",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Pe\u0142na p\u0142atno\u015b\u0107 co miesi\u0105c",
+        "update_liabilities_account": "Modyfikuj zobowi\u0105zanie",
+        "update_expense_account": "Aktualizuj konto wydatk\u00f3w",
+        "update_revenue_account": "Aktualizuj konto przychod\u00f3w",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Aktualizuj konto aktyw\u00f3w",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Skarbonka",
--- a/frontend/src/locales/pt-br.json
+++ b/frontend/src/locales/pt-br.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestral",
        "repeat_freq_monthly": "mensal",
        "repeat_freq_weekly": "semanal",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Pagamento completo todo m\u00eas",
+        "update_liabilities_account": "Atualizar passivo",
+        "update_expense_account": "Atualizar conta de despesas",
+        "update_revenue_account": "Atualizar conta de receita",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Atualizar de conta de ativo",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Cofrinho",
--- a/frontend/src/locales/pt.json
+++ b/frontend/src/locales/pt.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestral",
        "repeat_freq_monthly": "mensalmente",
        "repeat_freq_weekly": "semanalmente",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Actualizar passivo",
+        "update_expense_account": "Alterar conta de despesas",
+        "update_revenue_account": "Alterar conta de receitas",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Actualizar conta de activos",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Mealheiro",
--- a/frontend/src/locales/ro.json
+++ b/frontend/src/locales/ro.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "trimestrial",
        "repeat_freq_monthly": "lunar",
        "repeat_freq_weekly": "s\u0103pt\u0103m\u00e2nal",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Actualiza\u021bi provizionul",
+        "update_expense_account": "Actualiza\u021bi cont de cheltuieli",
+        "update_revenue_account": "Actualiza\u021bi cont de venituri",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Actualiza\u021bi contul de active",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Pu\u0219culi\u021b\u0103",
--- a/frontend/src/locales/ru.json
+++ b/frontend/src/locales/ru.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u0440\u0430\u0437 \u0432 \u043a\u0432\u0430\u0440\u0442\u0430\u043b",
        "repeat_freq_monthly": "\u0435\u0436\u0435\u043c\u0435\u0441\u044f\u0447\u043d\u043e",
        "repeat_freq_weekly": "\u0435\u0436\u0435\u043d\u0435\u0434\u0435\u043b\u044c\u043d\u043e",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u043e\u043b\u0433\u043e\u0432\u043e\u0439 \u0441\u0447\u0451\u0442",
+        "update_expense_account": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0447\u0451\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u0430",
+        "update_revenue_account": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0447\u0451\u0442 \u0434\u043e\u0445\u043e\u0434\u0430",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0447\u0451\u0442",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u041a\u043e\u043f\u0438\u043b\u043a\u0430",
--- a/frontend/src/locales/sk.json
+++ b/frontend/src/locales/sk.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u0161tvr\u0165ro\u010dne",
        "repeat_freq_monthly": "mesa\u010dne",
        "repeat_freq_weekly": "t\u00fd\u017edenne",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "Upravi\u0165 z\u00e1v\u00e4zok",
+        "update_expense_account": "Upravi\u0165 v\u00fddavkov\u00fd \u00fa\u010det",
+        "update_revenue_account": "Upravi\u0165 pr\u00edjmov\u00fd \u00fa\u010det",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Upravi\u0165 v\u00fddajov\u00fd \u00fa\u010det",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Pokladni\u010dka",
--- a/frontend/src/locales/sv.json
+++ b/frontend/src/locales/sv.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "kvartal",
        "repeat_freq_monthly": "m\u00e5nadsvis",
        "repeat_freq_weekly": "veckovis",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full betalning varje m\u00e5nad",
+        "update_liabilities_account": "Uppdatera skuld",
+        "update_expense_account": "Uppdatera utgiftskonto",
+        "update_revenue_account": "Uppdatera int\u00e4ktskonto",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "Uppdatera tillg\u00e5ngskonto",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "Spargris",
--- a/frontend/src/locales/vi.json
+++ b/frontend/src/locales/vi.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "h\u00e0ng qu\u00fd",
        "repeat_freq_monthly": "h\u00e0ng th\u00e1ng",
        "repeat_freq_weekly": "h\u00e0ng tu\u1ea7n",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "C\u1eadp nh\u1eadt n\u1ee3",
+        "update_expense_account": "C\u1eadp nh\u1eadt t\u00e0i kho\u1ea3n chi ph\u00ed",
+        "update_revenue_account": "C\u1eadp nh\u1eadt t\u00e0i kho\u1ea3n doanh thu",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "C\u1eadp nh\u1eadt t\u00e0i kho\u1ea3n",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u1ed0ng heo con",
--- a/frontend/src/locales/zh-cn.json
+++ b/frontend/src/locales/zh-cn.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u6bcf\u5b63",
        "repeat_freq_monthly": "\u6bcf\u6708",
        "repeat_freq_weekly": "\u6bcf\u5468",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "\u66f4\u65b0\u503a\u52a1\u8d26\u6237",
+        "update_expense_account": "\u66f4\u65b0\u652f\u51fa\u8d26\u6237",
+        "update_revenue_account": "\u66f4\u65b0\u6536\u5165\u8d26\u6237",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "\u66f4\u65b0\u8d44\u4ea7\u8d26\u6237",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u5b58\u94b1\u7f50",
--- a/frontend/src/locales/zh-tw.json
+++ b/frontend/src/locales/zh-tw.json
@@ -169,7 +169,13 @@
        "repeat_freq_quarterly": "\u6bcf\u5b63",
        "repeat_freq_monthly": "\u6bcf\u6708",
        "repeat_freq_weekly": "\u6bcf\u9031",
-        "credit_card_type_monthlyFull": "Full payment every month"
+        "credit_card_type_monthlyFull": "Full payment every month",
+        "update_liabilities_account": "\u66f4\u65b0\u50b5\u52d9",
+        "update_expense_account": "\u66f4\u65b0\u652f\u51fa\u5e33\u6236",
+        "update_revenue_account": "\u66f4\u65b0\u6536\u5165\u5e33\u6236",
+        "update_undefined_account": "Update account",
+        "update_asset_account": "\u66f4\u65b0\u8cc7\u7522\u5e33\u6236",
+        "updated_account_js": "Updated account \"<a href=\"accounts\/show\/{ID}\">{title}<\/a>\"."
    },
    "list": {
        "piggy_bank": "\u5c0f\u8c6c\u64b2\u6eff",
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -252,9 +252,9 @@
    js-tokens "^4.0.0"

 "@babel/parser@^7.1.0", "@babel/parser@^7.14.5", "@babel/parser@^7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.0.tgz#b6d6e29058ca369127b0eeca2a1c4b5794f1b6b9"
-  integrity sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==
+  version "7.15.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.2.tgz#08d4ffcf90d211bf77e7cc7154c6f02d468d2b1d"
+  integrity sha512-bMJXql1Ss8lFnvr11TZDH4ArtwlAS5NG9qBmdiFW2UHHm6MVoR+GDc5XE2b9K938cyjc9O6/+vjjcffLDtfuDg==

 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.14.5":
  version "7.14.5"
@@ -890,6 +890,13 @@
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==

+"@johmun/vue-tags-input@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@johmun/vue-tags-input/-/vue-tags-input-2.1.0.tgz#d265c00ecea092ecfcea21945f31c22a619e4862"
+  integrity sha512-Fdwfss/TqCqMJbGAkmlzKbcG/ia1MstYjhqPBj+zG7h/166tIcE1TIftUxhT9LZ+RWjRSG0EFA1UyaHQSr3k3Q==
+  dependencies:
+    vue "^2.6.10"
+
 "@lgaitan/pace-progress@^1.0.7":
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/@lgaitan/pace-progress/-/pace-progress-1.0.7.tgz#c96fbbd9fd4cf528feed34ea0c8f9d8b3e98f0dd"
@@ -1808,7 +1815,7 @@ browserify-zlib@^0.2.0:
  dependencies:
    pako "~1.0.5"

-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.0, browserslist@^4.16.6:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.0, browserslist@^4.16.6, browserslist@^4.16.7:
  version "4.16.7"
  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.7.tgz#108b0d1ef33c4af1b587c54f390e7041178e4335"
  integrity sha512-7I4qVwqZltJ7j37wObBe3SoTz+nS8APaNcrBOlgoirb6/HbEU2XxW/LpUDTCngM6iauwFqmRTuOMfyKnFGY5JA==
@@ -2217,11 +2224,11 @@ cookie@0.4.0:
  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==

 core-js-compat@^3.14.0, core-js-compat@^3.16.0:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.0.tgz#fced4a0a534e7e02f7e084bff66c701f8281805f"
-  integrity sha512-5D9sPHCdewoUK7pSUPfTF7ZhLh8k9/CoJXWUEo+F1dZT5Z1DVgcuRqUKhjeKW+YLb8f21rTFgWwQJiNw1hoZ5Q==
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.1.tgz#c44b7caa2dcb94b673a98f27eee1c8312f55bc2d"
+  integrity sha512-NHXQXvRbd4nxp9TEmooTJLUf94ySUG6+DSsscBpTftN1lQLQ4LjnWvc7AoIo4UjDsFF3hB8Uh5LLCRRdaiT5MQ==
  dependencies:
-    browserslist "^4.16.6"
+    browserslist "^4.16.7"
    semver "7.0.0"

 core-js@^2.4.0:
@@ -2230,9 +2237,9 @@ core-js@^2.4.0:
  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==

 core-js@^3.15.2:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.0.tgz#1d46fb33720bc1fa7f90d20431f36a5540858986"
-  integrity sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
+  integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==

 core-util-is@~1.0.0:
  version "1.0.2"
@@ -6339,6 +6346,14 @@ typedarray@^0.0.6:
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

+uiv@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/uiv/-/uiv-1.3.1.tgz#27affa5863a2f19b6c5131b9cc7734ced26b186b"
+  integrity sha512-ME5XTO6K6qLrprkOxS68s/M+MtosyaooxcJM5mFjX+XlBSNkNGHNXJmw1WUf2kDznGZhrXx9GIU0C0DVybqCGg==
+  dependencies:
+    portal-vue "^2.1.7"
+    vue-functional-data-merge "^3.0.0"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -6493,7 +6508,7 @@ vm-browserify@^1.0.1:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

-vue-functional-data-merge@^3.1.0:
+vue-functional-data-merge@^3.0.0, vue-functional-data-merge@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
  integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
@@ -6554,7 +6569,7 @@ vue2-leaflet@^2.7.1:
  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==

-vue@^2.5.17:
+vue@^2.5.17, vue@^2.6.10:
  version "2.6.14"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==