#36 Encapsulating The Transferring Of Elements Between Accounts

Sunday, February 9, 2020

In this article we will encapsulate the ability to transfer elements from one account to another that we have previous created in order to transfer deposits. This encapsulation will give us the ability to transfer other elements in a DRY way which we will immediately make use of for the account securities.

Christopher R. Jamell

Watch In YouTube

Parts

Code Snippets

AccountTransfer.vue (2:04)

<template lang="pug">
div Account Transfer
</template>

src ⟩ components ⟩ AccountTransfer.vue

AccountsDeposit.vue (2:30)

<script lang="ts">
...
import AccountTransfer from "@/components/AccountTransfer.vue";
...
@Component({
    components: {
        AccountTransfer,
        ...
    },
})
export default class AccountsDeposit extends Vue {
    ...
}
</script>

src ⟩ views ⟩ AccountsDeposit.vue

AccountsDeposit.vue (3:00)

<template lang="pug">
form
    div.inputs
        h1 Deposit
        AccountTransfer/
        ...
    ...
</template>

src ⟩ views ⟩ AccountsDeposit.vue

AccountTransfer.vue (12:40)

<template lang="pug">
div
    label
        span Account 
        small
            a(
                href=""
                v-on:click.prevent="toggleTransfer")
                    span(v-if="!transfer") Transfer
                    span(v-if="transfer") Cancel
    div.transfer-inputs
        div.transfer-from
            label(v-if="transfer") From
            div.input {{accountName}}
        div.transfer-to(v-if="transfer")
            label To
            select(
                v-model="accountId"
                v-on:change="change")
                option(
                    v-for="account in accounts"
                    v-bind:key="account.id"
                    v-bind:value="account.id") {{account.name}}
</template>

src ⟩ components ⟩ AccountTransfer.vue

AccountTransfer.vue (4:46)

<script lang="ts">
import { Component, Emit, Prop, Vue } from "vue-property-decorator";

import { AccountModel, Getter, GetterAccount, GETTER_ACCOUNT, GETTER_ACCOUNTS } from "@/store";

@Component
export default class AccountTransfer extends Vue {
    @Getter(GETTER_ACCOUNT) private readonly getterAccount!: GetterAccount;
    @Getter(GETTER_ACCOUNTS) private readonly accounts!: AccountModel[];
    @Prop() private readonly id!: number;

    private created() {
        this.accountId = this.id;
        const account = this.getterAccount(this.accountId);
        this.accountName = account.name;
    }

    private accountId = 0;
    private accountName = "";
    private transfer = false;

    @Emit()
    private change(e: Event) {
        e.preventDefault();
        return this.accountId;
    }

    private toggleTransfer() {
        this.transfer = !this.transfer;
    }
}
</script>

src ⟩ components ⟩ AccountTransfer.vue

AccountsDeposit.vue (9:26)

<template lang="pug">
form
    div.inputs
        h1 Deposit
        AccountTransfer(
            v-bind:id="accountId"
            v-on:change="accountChange")/
        ...
    ...
</template>

src ⟩ views ⟩ AccountsDeposit.vue

AccountsDeposit.vue (9:50)

<script lang="ts">
...
import {
    ...
    AccountModel, // <-- Remove
    ...
    GETTER_ACCOUNT, // <-- Remove
    GETTER_ACCOUNTS, // <-- Remove
    ...
    GetterAccount, // <-- Remove
    ...
} from "@/store";
...
export default class AccountsDeposit extends Vue {
    ...
    @Getter(GETTER_ACCOUNT) private readonly getterAccount!: GetterAccount; // <-- Remove
    ...
    @Getter(GETTER_ACCOUNTS) private readonly accounts!: AccountModel[]; // <-- Remove
    ...
    private accountName = ""; // <-- Remove
    ...
    private transfer = false; // <-- Remove
    ...
    private accountChange(id: number) {
        this.accountId = id;
    }

    private created() {
        ...
        const account = this.getterAccount(this.accountId); // <-- Remove
        this.accountName = account.name; // <-- Remove
        ...
    }
    ...
    private toggleTransfer() { // <-- Remove
        this.transfer = !this.transfer;
    }
}
</script>

src ⟩ views ⟩ AccountsDeposit.vue

AccountsSecurity.vue (12:33)

<script lang="ts">
...
import AccountTransfer from "@/components/AccountTransfer.vue";
...
import {
    ...
    GETTER_ACCOUNT, // <-- Remove
    ...
    GetterAccount, // <-- Remove
    ...
} from "@/store";
...
@Component({
    components: {
        AccountTransfer,
        ...
    },
})
export default class AccountsSecurity extends Vue {
    ...
    @Getter(GETTER_ACCOUNT) private readonly getterAccount!: GetterAccount; // <-- Remove
    ...
    private accountName = ""; // <-- Remove
    ...
    private accountChange(id: number) {
        this.accountId = id;
    }

    private created() {
        ...
        const account = this.getterAccount(this.accountId); // <-- Remove
        this.accountName = account.name; // <-- Remove
        ...
    }
    ...
    private save() {
        console.log("save");
        console.log(this.accountId);
    }
}
</script>

src ⟩ views ⟩ AccountsSecurity.vue

AccountsSecurity.vue (14:02)

<template lang="pug">
form
    div.inputs
        h1 Security
        AccountTransfer(
            v-bind:id="accountId"
            v-on:change="accountChange")/
        ...
    ...
</template>

src ⟩ views ⟩ AccountsSecurity.vue

Exciton Interactive LLC