#39 Adding A Portfolio Plan And Creating The Portfolio Vuex State

Sunday, March 1, 2020

Following up on our previous article were we created the portfolio category class we now need to create the portfolio plan class. This new class will be responsible for containing the grouping of categories that represent what a portfolio plan is. Once both classes are in place we can then create an initial portfolio state and add it to our overall vuex state.

Christopher R. Jamell

Watch In YouTube

Parts

Code Snippets

portfolio-plan-model.ts (1:14)

import { PortfolioCategoryModel } from "@/store/portfolio-category-model";

export interface IPortfolioPlanConfig {
    categories: PortfolioCategoryModel[];
    id: number;
    name: string;
}

export class PortfolioPlanModel {
    private _categories: PortfolioCategoryModel[];
    private _id: number;
    private _name: string;

    public get categories() {
        return this._categories;
    }
    public set categories(categories: PortfolioCategoryModel[]) {
        this._categories = categories;
    }
    public get id() {
        return this._id;
    }
    public set id(id: number) {
        this._id = id;
    }
    public get name() {
        return this._name;
    }
    public set name(name: string) {
        this._name = name;
    }

    constructor(config: IPortfolioPlanConfig) {
        this._categories = config.categories;
        this._id = config.id;
        this._name = config.name;
    }
}

src ⟩ store ⟩ portfolio-plan-model.ts

portfolio-category-model.ts (4:47)

import { PortfolioPlanModel } from "@/store/portfolio-plan-model";
...
export class PortfolioCategoryModel {
    ...
    private _portfolio: PortfolioPlanModel | null = null;
    ...
    public get portfolio() {
        return this._portfolio;
    }
    ...
    public setPortfolio(portfolio: PortfolioPlanModel) {
        this._portfolio = portfolio;
    }
}

src ⟩ store ⟩ portfolio-category-model.ts

store-constants.ts (6:30)

...
export const STATE_PORTFOLIO_CATEGORIES = "STATE_PORTFOLIO_CATEGORIES";
export const STATE_PORTFOLIO_PLANS = "STATE_PORTFOLIO_PLANS";
...

src ⟩ store ⟩ store-constants.ts

portfolio-types.ts (7:24)

import { STATE_PORTFOLIO_CATEGORIES, STATE_PORTFOLIO_PLANS } from "@/store/store-constants";

import { PortfolioCategoryModel } from "@/store/portfolio-category-model";
import { PortfolioPlanModel } from "@/store/portfolio-plan-model";

export interface IPortfolioCategoryModelState {
    index: number;
    items: PortfolioCategoryModel[];
}

export interface IPortfolioPlanModelState {
    index: number;
    items: PortfolioPlanModel[];
}

export interface IPortfolioState {
    [STATE_PORTFOLIO_CATEGORIES]: IPortfolioCategoryModelState;
    [STATE_PORTFOLIO_PLANS]: IPortfolioPlanModelState;
}

src ⟩ store ⟩ portfolio-types.ts

portfolio-initial-state.ts (9:54)

import { PortfolioCategoryModel } from "@/store/portfolio-category-model";
import { PortfolioPlanModel } from "@/store/portfolio-plan-model";
import { IPortfolioPlanModelState, IPortfolioCategoryModelState } from "@/store/portfolio-types";

import { initialState as securityCategoryInitialState } from "@/store/security-category-initial-state";

const categories: PortfolioCategoryModel[] = [];
const plans: PortfolioPlanModel[] = [];

if (process.env.NODE_ENV === "development") {
    const growth = new PortfolioPlanModel({ categories, id: 1, name: "Growth" });
    plans.push(growth);

    const delc = securityCategoryInitialState.items.find((x) => x.id === 1)!;
    const demc = securityCategoryInitialState.items.find((x) => x.id === 2)!;
    const desc = securityCategoryInitialState.items.find((x) => x.id === 3)!;
    const iedm = securityCategoryInitialState.items.find((x) => x.id === 4)!;
    const ieem = securityCategoryInitialState.items.find((x) => x.id === 5)!;
    const dfdm = securityCategoryInitialState.items.find((x) => x.id === 6)!;
    const ifdm = securityCategoryInitialState.items.find((x) => x.id === 7)!;
    const dsdm = securityCategoryInitialState.items.find((x) => x.id === 8)!;

    const catDelc = new PortfolioCategoryModel({ categoryId: delc.id, id: 1, percent: 38, portfolioId: growth.id });
    const catDemc = new PortfolioCategoryModel({ categoryId: demc.id, id: 2, percent: 12, portfolioId: growth.id });
    const catDesc = new PortfolioCategoryModel({ categoryId: desc.id, id: 3, percent: 6, portfolioId: growth.id });
    const catIedm = new PortfolioCategoryModel({ categoryId: iedm.id, id: 4, percent: 18, portfolioId: growth.id });
    const catIeem = new PortfolioCategoryModel({ categoryId: ieem.id, id: 5, percent: 7, portfolioId: growth.id });
    const catDfdm = new PortfolioCategoryModel({ categoryId: dfdm.id, id: 6, percent: 13, portfolioId: growth.id });
    const catIfdm = new PortfolioCategoryModel({ categoryId: ifdm.id, id: 7, percent: 3, portfolioId: growth.id });
    const catDsdm = new PortfolioCategoryModel({ categoryId: dsdm.id, id: 8, percent: 3, portfolioId: growth.id });

    categories.push(catDelc);
    categories.push(catDemc);
    categories.push(catDesc);
    categories.push(catIedm);
    categories.push(catIeem);
    categories.push(catDfdm);
    categories.push(catIfdm);
    categories.push(catDsdm);
}

export const categoryState: IPortfolioCategoryModelState = {
    index: 9,
    items: categories,
};

export const planState: IPortfolioPlanModelState = {
    index: 2,
    items: plans,
};

src ⟩ store ⟩ portfolio-initial-state.ts

store-types.ts (16:53)

...
import { IPortfolioState } from "@/store/portfolio-types";
...
export interface IStoreState extends IAccountState, IPortfolioState, ISecurityState {
    ...
}
...

src ⟩ store ⟩ store-types.ts

portfolio-module.ts

import { STATE_PORTFOLIO_CATEGORIES, STATE_PORTFOLIO_PLANS } from "@/store/store-constants";

import { categoryState, planState } from "@/store/portfolio-initial-state";
import { IPortfolioState } from "@/store/portfolio-types";

export const portfolioState: IPortfolioState = {
    [STATE_PORTFOLIO_CATEGORIES]: categoryState,
    [STATE_PORTFOLIO_PLANS]: planState,
};

src ⟩ store ⟩ portfolio-module.ts

store.ts (17:37)

...
import { portfolioState } from "@/store/portfolio-module";
...
const state: IStoreState = {
    ...
    ...portfolioState,
    ...
};
...

src ⟩ store ⟩ store.ts

Exciton Interactive LLC