#45 Adjusting Shares Using Modifier Keys

Saturday, April 11, 2020

In our quest to increase the usability of our app we will follow up of the adding of some color to our home page by also increasing the font weight of the category row that corresponds to the security that the user is hovering over. With that done we will add a couple of buttons so that we can adjust the number of shares of a particular security. As a result of the way we have wired everything up when the number of shares is adjusted the new percentage of that category is recaculated along with the difference. To make it easier to adjust the shares we will also make use of the modifier keys 'Shift', 'Control', and 'Alt'.

Christopher R. Jamell

Watch In YouTube

Parts

Code Snippets

Home.vue (1:56)

<script lang="ts">
...
type AccountSecurityKeyArray = [string, AccountSecurityModel[]];
...
export default class Home extends Vue {
    ...
    private activeKey = "";
    ...
     private mouseOverAccountSecurities(array: AccountSecurityKeyArray) {
        if (this.activeKey === array[0]) {
            return;
        }
        this.activeKey = array[0];
    }

    private mouseLeaveAccountSecurities() {
        this.activeKey = "";
    }
    ...
}
</script>

src ⟩ views ⟩ Home.vue

Home.vue (4:10)

<template lang="pug">
div.home
    div
        ...
        div(v-if="selectedPlan")
            ul
                ...
                li.row(
                    ...
                    v-bind:key="portfolioCategory.id"
                    v-bind:class="{ 'active': portfolioCategory.category.abbreviation === activeKey }")
                    ...
    ul.account-securities
        ...
        li(
            ...
            v-on:mouseover="mouseOverAccountSecurities(acctSecurityArray)"
            v-on:mouseleave="mouseLeaveAccountSecurities")

            ul
                li(
                    ...)
                    ...
</template>

src ⟩ views ⟩ Home.vue

Home.vue (6:11)

<style lang="sass" scoped>
...
.active
    font-weight: 600
</style>

src ⟩ views ⟩ Home.vue

Home.vue (7:03)

<script lang="ts">
...
export default class Home extends Vue {
    ...
    private decrease(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        console.log("decrease");
    }

    private increase(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        console.log("increase");
    }
    ...
}
</script>

src ⟩ views ⟩ Home.vue

Home.vue (8:06)

<template lang="pug">
div.home
    ...
    ul.account-securities
        li.row
            label Symbol
            label Account
            label Shares
            label Last
            label
        li(...)
            ul
                li(...)
                    div.row
                        ...
                        div.row.btns
                            button.btn(v-on:click.prevent="(e) => decrease(e, acctSecurity)") -
                            button.btn(v-on:click.prevent="(e) => increase(e, acctSecurity)") +
</template>

src ⟩ views ⟩ Home.vue

Home.vue (9:51)

<style lang="sass" scoped>
...
.btns
    margin-bottom: 0.125rem

.btn
    padding: 0.75rem
    min-width: 2.5rem

    &:first-child
        margin-right: 0.125rem
</style>

src ⟩ views ⟩ Home.vue

Home.vue

<script lang="ts">
...
export default class Home extends Vue {
    ...
    private decrease(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        accountSecurity.shares -= 1;
    }

    private increase(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        accountSecurity.shares += 1;
    }
    ...
}
</script>

src ⟩ views ⟩ Home.vue

Home.vue (11:44)

<script lang="ts">
...
export default class Home extends Vue {
    ...
    private decrease(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        if (e.getModifierState("Shift")) {
            accountSecurity.shares -= 5;
        } else if (e.getModifierState("Control")) {
            accountSecurity.shares -= 10;
        } else if (e.getModifierState("Alt")) {
            accountSecurity.shares -= 20;
        } else {
            accountSecurity.shares -= 1;
        }
    }

    private increase(e: MouseEvent, accountSecurity: AccountSecurityModel) {
        e.preventDefault();
        if (e.getModifierState("Shift")) {
            accountSecurity.shares += 5;
        } else if (e.getModifierState("Control")) {
            accountSecurity.shares += 10;
        } else if (e.getModifierState("Alt")) {
            accountSecurity.shares += 20;
        } else {
            accountSecurity.shares += 1;
        }
    }
    ...
}
</script>

src ⟩ views ⟩ Home.vue

Exciton Interactive LLC