Advertisement

#30 Adding Account Deposits And Securities To The Vuex Store

In this article we will start the process of making our accounts more useful in that we will expand the amount of information that is associated with them in our vuex store. Up until this point an account has solely consisted of a name but once we are done with this article each account will also be associated with any deposits made and the number and identifier for securities that have been purchased.

Parts

Code Snippets

store-constants.ts (1:34)

...
export const STATE_ACCOUNTS_DEPOSITS = "STATE_ACCOUNTS_DEPOSITS";
export const STATE_ACCOUNTS_SECURITIES = "STATE_ACCOUNTS_SECURITIES";
...
src ⟩ store ⟩ store-constants.ts

account-deposit-model.ts (2:01)

import { AccountModel } from "@/store/account-model";

export interface IAccountDepositModelConfig {
    accountId: number;
    amount: number;
    date: Date;
    id: number;
}

export class AccountDepositModel {
    private _account?: AccountModel;
    private _accountId: number;
    private _amount: number;
    private _date: Date;
    private _id: number;

    public get account() {
        if (typeof this._account === "undefined") {
            throw new Error("The account has not been defined.");
        }
        return this._account;
    }
    public set account(account: AccountModel) {
        this._account = account;
    }
    public get accountId() {
        return this._accountId;
    }
    public set accountId(id: number) {
        this._accountId = id;
    }
    public get amount() {
        return this._amount;
    }
    public set amount(amount: number) {
        this._amount = amount;
    }
    public get date() {
        return this._date;
    }
    public set date(date: Date) {
        this._date = date;
    }
    public get id() {
        return this._id;
    }
    public set id(id: number) {
        this._id = id;
    }

    constructor(config: IAccountDepositModelConfig) {
        this._accountId = config.accountId;
        this._amount = config.amount;
        this._date = config.date;
        this._id = config.id;
    }
}
src ⟩ store ⟩ account-deposit-model.ts
Advertisement

account-security-model.ts (5:48)

import { AccountModel } from "@/store/account-model";
import { SecurityModel } from "@/store/security-model";

export interface IAccountSecurityModelConfig {
    accountId: number;
    id: number;
    security?: SecurityModel;
    securityId: number;
    shares: number;
}

export class AccountSecurityModel {
    private _id: number;
    private _account?: AccountModel;
    private _accountId: number;
    private _security?: SecurityModel;
    private _securityId: number;
    private _shares: number;

    public get account() {
        if (typeof this._account === "undefined") {
            throw new Error("The account has not been defined.");
        }
        return this._account;
    }
    public set account(account: AccountModel) {
        this._account = account;
    }
    public get accountId() {
        return this._accountId;
    }
    public set accountId(accountId: number) {
        this._accountId = accountId;
    }
    public get id() {
        return this._id;
    }
    public set id(id: number) {
        this._id = id;
    }
    public get security() {
        if (typeof this._security === "undefined") {
            throw new Error("The security has not been defined.");
        }
        return this._security;
    }
    public set security(security: SecurityModel) {
        this._security = security;
    }
    public get securityId() {
        return this._securityId;
    }
    public get shares() {
        return this._shares;
    }
    public set shares(value: number) {
        this._shares = value;
    }
    public get value() {
        return this.shares * this.security.last;
    }

    constructor(config: IAccountSecurityModelConfig) {
        this._accountId = config.accountId;
        this._id = config.id;
        this._securityId = config.securityId;
        this._shares = config.shares;

        if (typeof config.security !== "undefined") {
            this._security = config.security;
        }
    }
}
src ⟩ store ⟩ account-security-model.ts

account-types.ts (10:05)

import {
    ...,
    STATE_ACCOUNTS_DEPOSITS,
    STATE_ACCOUNTS_SECURITIES,
} from "@/store/store-constants";

...
import { AccountDepositModel } from "@/store/account-deposit-model";
import { AccountSecurityModel } from "@/store/account-security-model";
...
export interface IAccountDepositModelState {
    index: number;
    items: AccountDepositModel[];
}

export interface IAccountSecurityModelState {
    index: number;
    items: AccountSecurityModel[];
}

export interface IAccountState {
    ...
    [STATE_ACCOUNTS_DEPOSITS]: IAccountDepositModelState;
    [STATE_ACCOUNTS_SECURITIES]: IAccountSecurityModelState;
}
src ⟩ store ⟩ account-types.ts

account-deposit-initial-state.ts (12:00)

import { IAccountDepositModelConfig, AccountDepositModel } from "@/store/account-deposit-model";
import { initialState as accountState } from "@/store/account-initial-state";
import { IAccountDepositModelState } from "@/store/account-types";

const deposits: AccountDepositModel[] = [];

function createDeposit(id: number, config: Omit<IAccountDepositModelConfig, "id">) {
    const deposit = new AccountDepositModel({ id, ...config });
    deposits.push(deposit);
    return (id += 1);
}

let index = 1;
if (process.env.NODE_ENV === "development") {
    index = createDeposit(index, { accountId: accountState.items[0].id, amount: 2300, date: new Date(2019, 0, 4) });
    index = createDeposit(index, { accountId: accountState.items[0].id, amount: 375, date: new Date(2018, 3, 19) });
    index = createDeposit(index, { accountId: accountState.items[0].id, amount: 5000, date: new Date(2017, 5, 14) });
    index = createDeposit(index, { accountId: accountState.items[0].id, amount: 10000, date: new Date(2015, 8, 27) });
}

export const initialState: IAccountDepositModelState = {
    index,
    items: deposits,
};
src ⟩ store ⟩ account-deposit-initial-state.ts

account-security-initial-state.ts (15:43)

import { IAccountSecurityModelConfig, AccountSecurityModel } from "@/store/account-security-model";
import { IAccountSecurityModelState } from "@/store/account-types";
import { SecurityModel } from "@/store/security-model";

import { initialState as accountState } from "@/store/account-initial-state";
import { initialState as securitiesState } from "@/store/security-model-initial-state";

import { sort } from "@/store/functions";

const accountSecurities: AccountSecurityModel[] = [];

function createAccountSecurity(id: number, security: SecurityModel, config: Omit<IAccountSecurityModelConfig, "id">) {
    const existing = accountSecurities.find(
        (x) => x.accountId === config.accountId && x.securityId === config.securityId,
    );
    if (typeof existing === "undefined") {
        const accountSecurity = new AccountSecurityModel({ id, ...config });
        accountSecurity.security = security;
        accountSecurities.push(accountSecurity);
        return (id += 1);
    } else {
        existing.shares += config.shares;
        return id;
    }
}

let index = 1;
if (process.env.NODE_ENV === "development") {
    accountState.items.forEach((x) => {
        for (let i = 0; i < 10; i++) {
            const shares = Math.floor(Math.random() * 100 + 1);
            const securityIndex = Math.floor(Math.random() * (securitiesState.items.length - 2) + 1);
            const security = securitiesState.items[securityIndex];
            index = createAccountSecurity(index, security, { accountId: x.id, securityId: security.id, shares });
        }
    });
}

export const initialState: IAccountSecurityModelState = {
    index,
    items: sort(accountSecurities, (x) => x.security.symbol),
};
src ⟩ store ⟩ account-security-initial-state.ts

account-module.ts (24:57)

...
import {
    ...,
    STATE_ACCOUNTS_DEPOSITS,
    STATE_ACCOUNTS_SECURITIES,
} from "@/store/store-constants";
...
import { initialState as depositState } from "@/store/account-deposit-initial-state";
import { initialState as securityState } from "@/store/account-security-initial-state";
...
export const accountsState = {
    ...,
    [STATE_ACCOUNTS_DEPOSITS]: depositState,
    [STATE_ACCOUNTS_SECURITIES]: securityState,
};
src ⟩ store ⟩ account-module.ts
Exciton Interactive LLC
Advertisement