Advertisement

#35 Displaying The Properties Of An Account Security

In this article we will start by correcting a mistake that we made in a previous article. As it stands right now if we attempt to add a deposit to an account the system does not know by default which account we are adding it to and that is due to how we are currently determing the account number in the account deposit view. Once we have corrected that we will move on to being able to display the properties of an account security in preparation for being able to create and edit them.

Parts

Code Snippets

AccountsDetails.vue (2:30)

<script lang="tsx">
...
export default class AccountsDetails extends Vue {
    ...
    private handleClickAccountDeposit(deposit: AccountDepositModel) {
        this.routingService.navigateTo(Routes.AccountsDeposit, {
            query: { accountId: `${this.id}`,  id: `${deposit.id}` },
        });
    }
    ...
    private handleClickCreateAccountDeposit() {
        this.routingService.navigateTo(Routes.AccountsDeposit, {
            query: { accountId: `${this.id}`,  id: "0" },
        });
    }
    ...
}
</script>
src ⟩ views ⟩ AccountsDetails.vue

AccountsDeposit.vue (3:19)

<script lang="ts">
...
import {
    ...
    GETTER_ACCOUNT,
    ...
    GetterAccount,
    ...
} from "@/store";

interface IQuery {
    accountId: string;
    ...
}
...
export default class AccountsDeposit extends Vue {
    ...
    @Getter(GETTER_ACCOUNT) private readonly getterAccount!: GetterAccount; 
    ...
    private created() {
        ...
        this.accountId = this.routingService.queryParam<IQuery, number>((x) => x.accountId, parseInt);
        const account = this.getterAccount(this.accountId);
        this.accountName = account.name;

        if (this.routingService.isPreviousRoute(Routes.AccountsDetails) === false) {
            this.pushRoute(
                this.routingService.createRoute(Routes.AccountsDetails, {
                    query: { id: `${this.accountId}` },
                }),
            );
        }
        
        if (this.id <= 0) {
            return;
        }

        this.load();
    }
    
    private load() {
        const deposit = this.getterDeposit(this.id);
        this.amount = deposit.amount;
        this.date = moment(deposit.date).format("YYYY-MM-DD");
    }
    ...
}
</script>
src ⟩ views ⟩ AccountsDeposit.vue

types.ts (6:54)

...
export enum Routes {
    ...
    AccountsSecurity,
    ...
}
...
src ⟩ components ⟩ routing ⟩ types.ts

routing-service.ts (7:13)

...
const accountsSecurity = new RouteEntry({
    component: () => import(/* webpackChunkName: "accounts-security" */ "../../views/AccountsSecurity.vue"),
    name: "accounts-security",
    parent: accountsDetails,
    path: "/accounts-security",
    route: Routes.AccountsSecurity,
});
...
export class RoutingService {
    ...
    private readonly _routes = [
        ...
        accountsSecurity,
        ...
    ];
    ...
}
src ⟩ components ⟩ routing ⟩ routing-service.ts
Advertisement

AccountsSecurity.vue (8:17)

<template lang="pug">
div security
</template>
src ⟩ views ⟩ AccountsSecurity.vue

AccountsDetails.vue (8:48)

<script lang="tsx">
...
export default class AccountsDetails extends Vue {
    ...
    private handleClickAccountSecurity(accountSecurity: AccountSecurityModel) {
        this.routingService.navigateTo(Routes.AccountsSecurity, {
            query: { accountId: `${this.id}`,  id: `${accountSecurity.id}` },
        });
    }
    ...
    private handleClickCreateAccountSecurity() {
        this.routingService.navigateTo(Routes.AccountsSecurity, {
            query: { accountId: `${this.id}`,  id: "0" },
        });
    }
    ...
}
</script>
src ⟩ views ⟩ AccountsDetails.vue

AccountsSecurity.vue (9:46)

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

import DetailsActionButtons from "@/components/DetailsActionButtons.vue";
import { RoutingService, Routes } from "@/components/routing";
import {
    Action,
    ActionFn,
    ACTION_PUSH_ROUTE,
    Getter,
    GETTER_ACCOUNT,
    GETTER_ACCOUNT_SECURITY,
    GETTER_SECURITIES,
    GetterAccount,
    GetterAccountSecurity,
    PayloadPushRoute,
    SecurityModel
} from "@/store";

interface IQuery {
    accountId: string;
    id: string;
}

@Component({
    components: {
        DetailsActionButtons,
    },
})
export default class AccountsSecurity extends Vue {
    @Action(ACTION_PUSH_ROUTE) private readonly pushRoute!: ActionFn<PayloadPushRoute>;
    @Getter(GETTER_ACCOUNT) private readonly getterAccount!: GetterAccount;
    @Getter(GETTER_ACCOUNT_SECURITY) private getterAccountSecurity!: GetterAccountSecurity;
    @Getter(GETTER_SECURITIES) private readonly securities!: SecurityModel[];
    @Inject() private readonly routingService!: RoutingService;

    private accountId = 0;
    private accountName = "";
    private id = 0;
    private securityId = 0;
    private shares = 0;

    private created() {
        this.id = this.routingService.queryParam<IQuery, number>((x) => x.id, parseInt);

        this.accountId = this.routingService.queryParam<IQuery, number>((x) => x.accountId, parseInt);
        const account = this.getterAccount(this.accountId);
        this.accountName = account.name;

        if (this.routingService.isPreviousRoute(Routes.AccountsDetails) === false) {
            this.pushRoute(
                this.routingService.createRoute(Routes.AccountsDetails, {
                    query: { id: `${this.accountId}` },
                }),
            );
        }

        if (this.id <= 0) {
            return;
        }

        this.load();
    }

    private load() {
        const accountSecurity = this.getterAccountSecurity(this.id);
        this.securityId = accountSecurity.securityId;
        this.shares = accountSecurity.shares;
    }

    private save() {
        console.log("save");
    }
}
</script>
src ⟩ views ⟩ AccountsSecurity.vue

AccountsSecurity.vue (18:31)

<template lang="pug">
form
    div.inputs
        label Security
        select(v-model="securityId")
            option(
                v-for="security in securities"
                v-bind:key="security.id"
                v-bind:value="security.id") {{security.symbol}}
        label Shares
        input(
            type="number"
            v-model.number="shares")
    DetailsActionButtons(v-bind:save="save")/
</template>
src ⟩ views ⟩ AccountsSecurity.vue

AccountsSecurity.vue (20:48)

<style lang="sass" scoped>
@import "../bourbon/bourbon"
@import "../bitters/functions"
@import "../bitters/variables"

.inputs
    @include padding(null 0.25rem)
</style>
src ⟩ views ⟩ AccountsSecurity.vue
Exciton Interactive LLC
Advertisement