Bank account fields improved to allow multi-line info (if you need to enter more details than only your account no).

src/components/bank-accounts/BankAccountForm.vue

@@ -8,13 +8,13 @@
         <div v-if="bankAccount" class="row">
             <AppInput :value="bankAccount.bank_name"
                       @change="updateProp({ bank_name: $event })"
-                      label="Bank Name"
+                      label="Bank name"
                       field="bank_name"
                       :errors="errors"
                       class="col-sm-10"/>
-            <AppInput :value="bankAccount.account_no"
+            <AppTextarea :value="bankAccount.account_no"
                       @change="updateProp({ account_no: $event })"
-                      label="Account no"
+                      label="Bank account details"
                       field="account_no"
                       :errors="errors"
                       class="col-12"/>
@@ -43,11 +43,13 @@
 import { mapGetters } from 'vuex';
 import NotificationService from '@/services/notification.service';
 import AppInput from '@/components/form/AppInput';
+import AppTextarea from '@/components/form/AppTextarea';
 import Errors from '@/utils/errors';
 
 export default {
   components: {
     AppInput,
+    AppTextarea,
   },
   data() {
     return {

src/components/bank-accounts/BankAccountsList.vue

@@ -5,16 +5,16 @@
       <table class="table table-hover">
         <thead>
         <tr>
-          <th>Account no.</th>
           <th>Bank</th>
+          <th>Bank account details</th>
           <th class="text-right"></th>
         </tr>
         </thead>
         <tbody>
         <tr v-for="account in bankAccounts" :key="account.id"
             @click="onSelect(account)" :class="{pointer: $listeners.select }">
-          <td>{{ account.account_no }}</td>
           <td>{{ account.bank_name }}</td>
+          <td>{{ account.account_no }}</td>
           <td class="text-right">
             <i class="material-icons md-18 p-1 pointer"
                @click.stop="openBankAccountModal(account)">

src/components/form/AppEditable.vue

@@ -7,7 +7,7 @@
           class="editable">
         <span ref="editable"
               class="editable__item"
-              contenteditable
+              :contenteditable="!disabled"
               v-on="listeners"
               :class="{'position-absolute': !tmpVal || (!tmpVal && !isFocused)}"
         ></span>
@@ -31,6 +31,9 @@ export default {
       type: String,
       default: 'Enter item',
     },
+    disabled: {
+      default: false,
+    },
     suffix: {},
     errors: {},
     field: {},

src/components/form/AppTextarea.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="form-group">
+        <label :for="field" v-if="label" :class="labelClasses">{{ label }}</label>
+        <div :class="containerClasses">
+            <textarea :disabled="disabled"
+                      :id="field"
+                      :placeholder="placeholder"
+                      class="form-control"
+                      :rows="rows"
+                      :class="[
+                       errors && errors.has(field) ? 'is-invalid' : '',
+                       size ? 'form-control-' + size : '',
+                       ...inputClasses,
+                       ]"
+                      :autocomplete="autocomplete"
+                      :maxlength="max"
+                      :value="value"
+                      @input="$emit('input', $event.target.value)"
+                      @change="$emit('change', $event.target.value)"
+                      @keydown.self.enter.exact="$emit('submit', $event.target.value)"
+                      :ref="field"
+            >
+            </textarea>
+        </div>
+        <slot></slot>
+        <AppError v-if="errors" :errors="errors" :field="field"/>
+    </div>
+</template>
+
+<script>
+import AppError from '@/components/form/AppError';
+
+export default {
+  components: {
+    AppError,
+  },
+  props: {
+    errors: {},
+    label: {},
+    value: {},
+    field: {},
+    type: {},
+    max: {},
+    rows: {},
+    disabled: {},
+    placeholder: {},
+    size: {},
+    labelClasses: {},
+    inputClasses: {},
+    containerClasses: {},
+    autocomplete: {
+      default: 'on',
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs[this.field].focus();
+    },
+  },
+};
+</script>

src/components/invoices/InvoiceBankDetails.vue

@@ -1,20 +1,22 @@
 <template>
     <div>
-        <strong v-b-modal.bank_details class="editable__item"
-                :class="{'is-invalid': errors && errors.has('bank_account_no')}">
-            {{ invoice.bank_account_no }}
-            <span v-if="!invoice.bank_account_no">Add bank account no</span>
+        <strong>
+            <AppEditable :value="invoice.bank_name"
+                         v-b-modal.bank_account_no
+                         :errors="errors"
+                         :disabled="true"
+                         field="bank_name"
+                         placeholder="Add bank"
+                         class="break-line"/>
         </strong>
-        <AppError :errors="errors" field="bank_account_no"/>
-        <br>
-        <span class="editable__item" v-b-modal.bank_details
-              :class="{'is-invalid': errors && errors.has('bank_name')}">
-            {{ invoice.bank_name }}
-            <span v-if="!invoice.bank_name">Add bank name</span>
-        </span>
-        <AppError :errors="errors" field="bank_name"/>
-
-        <BModal id="bank_details"
+        <AppEditable :value="invoice.bank_account_no"
+                     v-b-modal.bank_account_no
+                     :errors="errors"
+                     :disabled="true"
+                     field="bank_account_no"
+                     placeholder="Add bank details"
+                     class="break-line"/>
+        <BModal id="bank_account_no"
                 centered
                 title="Choose bank account"
                 hide-footer
@@ -27,14 +29,14 @@
 <script>
 import { BModal, VBModal } from 'bootstrap-vue';
 import BankAccountsList from '@/components/bank-accounts/BankAccountsList';
-import AppError from '@/components/form/AppError';
+import AppEditable from '@/components/form/AppEditable';
 
 export default {
   props: ['invoice', 'errors'],
   components: {
+    AppEditable,
     BModal,
     BankAccountsList,
-    AppError,
   },
   directives: {
     'b-modal': VBModal,
@@ -46,7 +48,7 @@ export default {
         bank_name: account.bank_name,
         bank_account_id: account.id,
       });
-      this.$bvModal.hide('bank_details');
+      this.$bvModal.hide('account_no');
     },
   },
 };

src/services/invoice.service.js

@@ -75,26 +75,26 @@ class InvoiceService {
       currency: 'Currency',
       vat_rate: 'Vat rate',
       late_fee: 'Late fee',
-      issued_at: 'Issued At',
-      due_at: 'Due At',
+      issued_at: 'Issued at',
+      due_at: 'Due at',
       number: 'Number',
-      client_id: 'Client Id',
-      client_name: 'Client Name',
-      client_address: 'Client Address',
-      client_postal_code: 'Client Postal Code',
-      client_city: 'Client City',
-      client_email: 'Client Email',
+      client_id: 'Client',
+      client_name: 'Client name',
+      client_address: 'Address',
+      client_postal_code: 'Postal code',
+      client_city: 'City',
+      client_email: 'Client\'s email',
       client_country: 'Country',
       from_name: 'Name',
       from_address: 'Address',
-      from_postal_code: 'Postal Code',
-      from_country: 'Country/State',
+      from_postal_code: 'Postal code',
+      from_country: 'Country',
       from_city: 'City',
       from_website: 'Website',
-      from_email: 'Your Email',
-      from_phone: 'From Phone',
-      bank_name: 'Bank Name',
-      bank_account_no: 'Bank Account No.',
+      from_email: 'Your email',
+      from_phone: 'Your phone',
+      bank_name: 'Bank name',
+      bank_account_no: 'Bank account details',
       rows: {
         item: 'Item',
         quantity: 'Quantity',

src/store/models/bank-account.js

@@ -8,8 +8,8 @@ export default class BankAccount extends Model {
   static fields() {
     return {
       id: this.attr(() => uuidv4()),
-      account_no: this.attr(''),
       bank_name: this.attr(''),
+      account_no: this.attr(''),
       updated_at: this.attr(''),
       created_at: this.attr(''),
     };