#41 Display Plans Using JSX And Create A Plan Details View
Sunday, March 15, 2020
In this article we will use the list view component that we created previously and some JSX to display the names of the portfolio plans that are saved within our vuex store. Once that is done we will proceed to add the capability to view and edit the details of a plan including its name and the percentages of the categories of that plan.
Parts
- Part 45: Adjusting Shares
- Part 44: Plan Percentages
- Part 43: Home Securities
- Part 42: Updating Plans
- Part 41: Plan Details View
- Part 40: Portfolio Getters
- Part 39: Portfolio Plan
- Part 38: Portfolio Category
- Part 37: Account Securities
- Part 36: Account Transfer
- Part 35: View Account Security
- Part 34: Updating Deposit
- Part 33: View Account Deposit
- Part 32: Display Account Details
- Part 31: Account Getters
- Part 30: Deposits And Securities
- Part 29: Add Accounts Details
- Part 28: Refactoring Accounts
- Part 27: Add Security Models
- Part 26: Edit Security Details
- Part 25: View Security Details
- Part 24: Navigating To Details
- Part 23: Getters Validation
- Part 22: Query Parameters
- Part 21: Tab Entries
- Part 20: Tab Header
- Part 19: List View
- Part 18: Vuex Getters
- Part 17: End Domain Model
- Part 16: Start Domain Model
- Part 15: Pop Routes
- Part 14: Push Routes
- Part 13: Removing Accounts
- Part 12: Vuex (Decorators)
- Part 11: Vuex (Accounts)
- Part 10: The App Bar (Settings)
- Part 9: Remove Consumer Rxjs
- Part 8: The App Bar (Back)
- Part 7: Structuring Our App
- Part 6: Animation Between Views
- Part 5: Navigation Fade
- Part 4: Navigation Requests
- Part 3: Fade Animations (cont.)
- Part 2: Fade Animations
- Part 1: Splash Screen
Code Snippets
PlannerDetails.vue (1:54)
<template lang="pug">
div planner details
</template>
types.ts (2:18)
...
export enum Routes {
...
PlannerDetails,
...
}
...
routing-service.ts (2:34)
...
const plannerDetails = new RouteEntry({
component: () => import(/* webpackChunkName: "planner-details" */ "../../views/PlannerDetails.vue"),
name: "planner-details",
parent: planner,
path: "/planner-details",
route: Routes.PlannerDetails,
});
...
export class RoutingService {
...
private readonly _routes = [
...
plannerDetails,
...
];
...
}
Planner.vue (3:37)
<script lang="tsx">
import { ..., Inject, ... } from "vue-property-decorator";
import ListView from "@/components/ListView.vue";
import { IRoute, Routes, RoutingService } from "@/components/routing";
...
@Component({
components: {
ListView,
},
})
export default class Planner extends Vue {
...
@Inject() private readonly routingService!: RoutingService;
private onClick(plan: PortfolioPlanModel) {
this.routingService.navigateTo(Routes.PlannerDetails, {
query: { id: `${plan.id}`},
});
}
private onClickCreate() {
this.routingService.navigateTo(Routes.PlannerDetails, {
query: { id: "0"},
});
}
private renderPlan(plan: PortfolioPlanModel) {
return <label>{plan.name}</label>
}
}
</script>
Planner.vue (7:00)
<template lang="pug">
ListView(
v-bind:items="plans"
v-bind:onClick="onClick"
v-bind:onClickCreate="onClickCreate"
v-bind:renderFn="renderPlan")
</template>
Advertisement
PlannerDetails.vue (8:22)
<script lang="ts">
import { Component, Inject, Vue } from "vue-property-decorator";
import { Routes, RoutingService } from "@/components/routing";
import { ACTION_PUSH_ROUTE, Action, ActionFn, PayloadPushRoute } from "@/store";
interface IQuery {
id: string;
}
@Component
export default class PlannerDetails extends Vue {
@Action(ACTION_PUSH_ROUTE) private readonly pushRoute!: ActionFn<PayloadPushRoute>;
@Inject() private readonly routingService!: RoutingService;
private id = 0;
private load() {
console.log("loading");
}
private mounted() {
if (this.routingService.isPreviousRoute(Routes.Planner) === false) {
this.pushRoute(this.routingService.createRoute(Routes.Planner));
}
this.id = this.routingService.queryParam<IQuery, number>((x) => x.id, parseInt);
console.log(this.id);
if (this.id <= 0) {
return;
}
this.load();
}
}
</script>
PlannerDetails.vue (12:39)
<script lang="ts">
...
import DetailsActionButtons from "@/components/DetailsActionButtons.vue";
...
import {
...
GETTER_PORTFOLIO_PLAN,
Getter,
GetterPortfolioPlan,
...
PortfolioCategoryModel,
} from "@/store";
...
@Component({
components: {
DetailsActionButtons,
},
})
export default class PlannerDetails extends Vue {
...
@Getter(GETTER_PORTFOLIO_PLAN) private readonly getterPlan!: GetterPortfolioPlan;
...
private portfolioCategories: PortfolioCategoryModel[] = [];
...
private name = "";
private load() {
const plan = this.getterPlan(this.id);
this.name = plan.name;
this.portfolioCategories = plan.categories;
}
...
private save() {
console.log(this.portfolioCategories);
}
}
</script>
PlannerDetails.vue (15:18)
<template lang="pug">
form
div.inputs
h1 Plan Details
label Name
input(v-model="name")
ul
li(
v-for="portfolioCategory in portfolioCategories"
v-bind:key="portfolioCategory.id")
label {{portfolioCategory.category.text}}
input(v-model.number="portfolioCategory.percent")
DetailsActionButtons(v-bind:save="save")/
</template>
PlannerDetails.vue (17:26)
<style lang="sass" scoped>
@import "../bourbon/bourbon"
@import "../bitters/functions"
@import "../bitters/variables"
.inputs
@include padding(null 0.25rem)
</style>
Exciton Interactive LLC