Advertisement

#25 Updating The Securities Details View To Display Model Properties

In this article we will focus on displaying all of the properties of our various securities related models on our security details view in anticipation of allowing the user to edit them. In order to do this we will make use of the majority of our vuex getters, both for getting a model by its id and getting an array containing all of them by type. Once we have used the getters we can then display the appropriate control for editing the properties which range from simple html inputs to select controls.

Parts

Code Snippets

SecuritiesDetails.vue (1:48)

<script lang="ts">
...
export default class SecuritiesDetails extends Vue {
    ...
    private text = "";
    ...
    private get isMarkets() {
        return this.which === SecurityDescriptors.Markets;
    }
    private get isSegments() {
        return this.which === SecurityDescriptors.Segments;
    }
    private get isTerritories() {
        return this.which === SecurityDescriptors.Territories;
    }
    private get isTypes() {
        return this.which === SecurityDescriptors.Types;
    }
    ...
    private load() {
        switch (this.which) {
            case SecurityDescriptors.Categories:
                ...
            case SecurityDescriptors.Markets:
                const market = this.getterMarket(this.id);
                this.text = market.text;
                return;
            case SecurityDescriptors.Securities:
                ...
            case SecurityDescriptors.Segments:
                const segment = this.getterSegment(this.id);
                this.text = segment.text;
                return;
            case SecurityDescriptors.Territories:
                const territory = this.getterTerritory(this.id);
                this.text = territory.text;
                return;
            case SecurityDescriptors.Types:
                const type = this.getterType(this.id);
                this.text = type.text;
                return;
        }
    }
}
</script>
src ⟩ views ⟩ SecuritiesDetails.vue

SecuritiesDetails.vue (4:01)

<template lang="pug">
div.securities-details
    form
        div(v-if="isMarkets")
            h2 Market
            label Text
            input(
                type="text"
                v-model="text")
</template>
src ⟩ views ⟩ SecuritiesDetails.vue

SecuritiesDetails.vue (5:07)

<template lang="pug">
mixin securityDescriptor(title, computed)
    div(v-if=`${computed}`)
        h2 #{title}
        label Text
        input(
            type="text"
            v-model="text")

div.securities-details
    form
        +securityDescriptor("Market", "isMarkets")
        +securityDescriptor("Segment", "isSegments")
        +securityDescriptor("Territory", "isTerritories")
        +securityDescriptor("Type", "isTypes")
</template>
src ⟩ views ⟩ SecuritiesDetails.vue

SecuritiesDetails.vue (7:47)

<script lang="ts">
...
import {
    ...
    GETTER_SECURITY_SEGMENTS,
    GETTER_SECURITY_TERRITORIES,
    ...
    GETTER_SECURITY_TYPES,
    ...
    SecuritySegmentModel,
    SecurityTerritoryModel,
    SecurityTypeModel,
    ...
} from "@/store";
...
export default class SecuritiesDetails extends Vue {
    ...
    @Getter(GETTER_SECURITY_SEGMENTS) private segments!: SecuritySegmentModel[];
    @Getter(GETTER_SECURITY_TERRITORIES) private territories!: SecurityTerritoryModel[];
    @Getter(GETTER_SECURITY_TYPES) private types!: SecurityTypeModel[];
    ...
    private categorySegment: SecuritySegmentModel | null = null;
    private categoryTerritory: SecurityTerritoryModel | null = null;
    private categoryType: SecurityTypeModel | null = null;
    ...
    private get isCategories() {
        return this.which === SecurityDescriptors.Categories;
    }
    ...
    private load() {
        switch (this.which) {
            case SecurityDescriptors.Categories:
                const category = this.getterCategory(this.id);
                this.categorySegment = category.segment;
                this.categoryTerritory = category.territory;
                this.categoryType = category.type;
                return;
            ...
        }
    }
}
</script>
src ⟩ views ⟩ SecuritiesDetails.vue
Advertisement

SecurititesDetails.vue (11:47)

<template lang="pug">
div.securities-details
    form
        div(v-if="isCategories")
            h2 Category
            label Territory
            select(v-model="categoryTerritory")
                option(
                    v-for="territory in territories"
                    v-bind:key="territory.id"
                    v-bind:value="territory") {{territory.text}}
            label Type
            select(v-model="categoryType")
                option(
                    v-for="type in types"
                    v-bind:key="type.id"
                    v-bind:value="type") {{type.text}}
            label Segment
            select(v-model="categorySegment")
                option(
                    v-for="segment in segments"
                    v-bind:key="segment.id"
                    v-bind:value="segment") {{segment.text}}
        ...
</template>
src ⟩ views ⟩ SecurititesDetails.vue

SecuritiesDetails.vue (14:57)

<script lang="ts">
...
import {
    GETTER_SECURITY_CATEGORIES,
    ...
    GETTER_SECURITY_MARKETS,
    ...
    SecurityCategoryModel,
    SecurityMarketModel,
    SecurityRecommendations,
    ...
} from "@/store";
...
export default class SecuritiesDetails extends Vue {
    ...
    @Getter(GETTER_SECURITY_CATEGORIES) private categories!: SecurityCategoryModel[];
    @Getter(GETTER_SECURITY_MARKETS) private markets!: SecurityMarketModel[];
    ...
    private securityCategory: SecurityCategoryModel | null = null;
    private securityLast = 0;
    private securityMarket: SecurityMarketModel | null = null;
    private securityRecommendation = SecurityRecommendations.Buy;
    private securitySymbol = "";
    ...
    private get isSecurities() {
        return this.which === SecurityDescriptors.Securities;
    }
    ...
    private get recommendations() {
        return Object.keys(SecurityRecommendations)
            .filter((x) => isNaN(Number(x)) === false)
            .map((x) => parseInt(x, 10))
            .map((x) => ({ id: x, text: SecurityRecommendations[x] }));
    }
    ...
    private load() {
        switch (this.which) {
            ...
            case SecurityDescriptors.Securities:
                const security = this.getterSecurity(this.id);
                this.securityCategory = security.category;
                this.securityLast = security.last;
                this.securityMarket = security.market;
                this.securityRecommendation = security.recommendation;
                this.securitySymbol = security.symbol;
                return;
            ...
        }
    }
}
</script>
src ⟩ views ⟩ SecuritiesDetails.vue

SeruritiesDetails.vue (22:27)

<template lang="pug">
...
div.securities-details
    form
        div(v-if="isSecurities")
            h2 Security
            label Symbol
            input(
                type="text"
                v-model="securitySymbol")
            label Last
            input(
                type="number"
                step="0.01"
                v-model.number="securityLast")
            label Category
            select(v-model="securityCategory")
                option(
                    v-for="category in categories"
                    v-bind:key="category.id"
                    v-bind:value="category") {{category.text}}
            label Market
            select(v-model="securityMarket")
                option(
                    v-for="market in markets"
                    v-bind:key="market.id"
                    v-bind:value="market") {{market.text}}
            label Recommendation
            select(v-model="securityRecommendation")
                option(
                    v-for="recommendation in recommendations"
                    v-bind:key="recommendation.id"
                    v-bind:value="recommendation.id") {{recommendation.text}}
        ...
</template>
src ⟩ views ⟩ SeruritiesDetails.vue
Exciton Interactive LLC
Advertisement