Advertisement

#33 Displaying The Properties Of A Deposit

In this article we will pick up where we left off from the last article. In the last article we added a lot of additional information to our account details page. One of the components that we added to the details was a list showing the deposits that have already been made as well as the ability to add a new deposit. For the moment though when you click to view a deposit or create one we just print information to the console. By the time we are done with this article we will have created a new view that we can use to edit an existing deposit as well as add a new one.

Parts

Code Snippets

types.ts (1:02)

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

routing-service.ts (1:23)

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

AccountsDeposit.vue (3:22)

<template lang="pug">
div deposit
</template>
src ⟩ views ⟩ AccountsDeposit.vue

AccountsDetails.vue (3:45)

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

AccountsDeposit.vue (4:58)

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

import { Routes, RoutingService } from "@/components/routing";
import {
    AccountDepositModel,
    Action,
    ActionFn,
    ACTION_PUSH_ROUTE,
    Getter,
    GETTER_ACCOUNT_DEPOSIT,
    GetterAccountDeposit,
    PayloadPushRoute,
} from "@/store";

interface IQuery {
    id: string;
}

@Component
export default class AccountsDeposit extends Vue {
    @Action(ACTION_PUSH_ROUTE) private readonly pushRoute!: ActionFn<PayloadPushRoute>;
    @Getter(GETTER_ACCOUNT_DEPOSIT) private readonly getterDeposit!: GetterAccountDeposit;
    @Inject() private readonly routingService!: RoutingService;

    private accountId = 0;
    private id = 0;

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

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

        const deposit = this.getterDeposit(this.id);

        this.load(deposit);
    }

    private load(deposit: AccountDepositModel) {
        this.accountId = deposit.accountId;

        if (this.routingService.isPreviousRoute(Routes.AccountsDetails) === false) {
            this.pushRoute(
                this.routingService.createRoute(Routes.AccountsDetails, {
                    query: { id: `${this.accountId}` },
                }),
            );
        }
        
        console.log(deposit);
    }
}
</script>
src ⟩ views ⟩ AccountsDeposit.vue

Terminal

npm install --save moment

package.json (11:17)

{
    ...
    "dependencies": {
        ...
        "moment": "^2.24.0",
        ...
    },
    ...
}
root ⟩ package.json

AccountsDeposit.vue (11:27)

<script lang="ts">
...
import moment from "moment";

import DetailsActionButtons from "@/components/DetailsActionButtons.vue";
...
@Component({
    components: {
        DetailsActionButtons,
    },
})
export default class AccountsDeposit extends Vue {
    ...
    private amount = 0;
    private date = moment(Date.now()).format("YYYY-MM-DD");
    ...
    private load(deposit: AccountDepositModel) {
        ...
        this.amount = deposit.amount;
        this.date = moment(deposit.date).format("YYYY-MM-DD");
    }

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

AccountsDeposit.vue (14:00)

<template lang="pug">
form
    div.inputs
        label Amount
        input(
            type="number"
            v-model.number="amount")
        label Date
        input(
            type="date"
            v-model="date")
    DetailsActionButtons(v-bind:save="save")/
</template>
src ⟩ views ⟩ AccountsDeposit.vue

AccountsDeposit.vue (15:57)

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

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