Advertisement

#38 Adding A Portfolio Category

In order for our application to be able to provide the ability for us to rebalance the holds of our various accounts we need to be able to specify the target amount for each of the categories of our securities. In order to add this ability the first thing we are going to do is introduce the concept of a portfolio by creating portfolio categories.

Parts

Code Snippets

Planner.vue (1:09)

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

font-awesome.ts (1:27)

...
import {
    ...
    faChartPie,
    ...
} from "@fortawesome/free-solid-svg-icons";
...
library.add(faChartPie);
...
src ⟩ features ⟩ font-awesome.ts

types.ts (2:02)

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

routing-service.ts (2:18)

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

TheMainNav.vue (3:39)

<script lang="ts">
...
export default class TheMainNav extends Vue {
    ...
    private readonly planner = Routes.Planner;
    ...
}
</script>
src ⟩ components ⟩ main-nav ⟩ TheMainNav.vue
Advertisement

TheMainNav.vue (4:10)

<template lang="pug">
nav.main-nav
    ...
    MainNavButton(
        v-bind:icon="'chart-pie'"
        v-bind:label="'Planner'"
        v-bind:route="planner")
</template>
src ⟩ components ⟩ main-nav ⟩ TheMainNav.vue

MainNavButton.vue (4:47)

<style lang="sass" scoped>
...
.main-nav-button
    ...
    flex: 1
    ...
...
</style>
src ⟩ components ⟩ main-nav ⟩ MainNavButton.vue

portfolio-category-model.ts (5:52)

import { SecurityCategoryModel } from "@/store/security-category-model";

export interface IPortfolioCategoryModelConfig {
    categoryId: number;
    id: number;
    percent: number;
    portfolioId: number;
}

export class PortfolioCategoryModel {
    private _category: SecurityCategoryModel | null = null;
    private _categoryId: number;
    private _id: number;
    private _percent: number;
    private _portfolioId: number;

    public get category() {
        return this._category;
    }
    public get categoryId() {
        return this._categoryId;
    }
    public set categoryId(categoryId: number) {
        this._categoryId = categoryId;
    }
    public get id() {
        return this._id;
    }
    public set id(id: number) {
        this._id = id;
    }
    public get percent() {
        return this._percent;
    }
    public set percent(last: number) {
        this._percent = last;
    }
    public get portfolioId() {
        return this._portfolioId;
    }
    public set portfolioId(portfolioId: number) {
        this._portfolioId = portfolioId;
    }

    constructor(config: IPortfolioCategoryModelConfig) {
        this._categoryId = config.categoryId;
        this._id = config.id;
        this._percent = config.percent;
        this._portfolioId = config.portfolioId;
    }

    public setCategory(category: SecurityCategoryModel) {
        this._category = category;
    }
}
src ⟩ store ⟩ portfolio-category-model.ts
Exciton Interactive LLC
Advertisement