farm-fresh/src/components/InventoryView.vue

<template>
    <div class="container container-fluid" id="main-container">
        <div class="row">
            <div class="col-12">
                <div class="float-end" id="sort-buttons">
                    <div class="pixel-border-static" v-on:click="$store.commit('toggleGrouping')">
                        Group by category
                    </div>

                    <div class="pixel-border-static" v-on:click="$store.commit('sortInventory')">
                        Sort {{ $store.state.inventorySortDesc ? 'Z-A' : 'A-Z' }}
                    </div>
                </div>
            </div>
            <template v-if="$store.state.groupInventory">
                <template v-if="$store.getters.getSeedsInInventory.length > 0">
                    <div class="col-12 inventory-header">
                        <h5>Seeds</h5>
                    </div>
                    <div class="col-6"
                         v-for="item in $store.getters.getSeedsInInventory"
                         v-bind:key="item"
                         data-bs-dismiss="modal">
                        <div :class="'inventory-item ' + getFrameClass(item.type)">
                            <div class="float-end">
                                <img :src="item.icon" :alt="item.name" class="item-icon">
                            </div>
                            {{ item.name }}<br/>
                            x{{ item.quantity }}
                        </div>
                    </div>
                </template>
                <template v-if="$store.getters.getFieldProductsInInventory.length > 0">
                    <div class="col-12 inventory-header">
                        <h5>Field products</h5>
                    </div>
                    <div class="col-6"
                         v-for="item in $store.getters.getFieldProductsInInventory"
                         v-bind:key="item"
                         data-bs-dismiss="modal">
                        <div :class="'inventory-item ' + getFrameClass(item.type)">
                            <div class="float-end">
                                <img :src="item.icon" :alt="item.name" class="item-icon">
                            </div>
                            {{ item.name }}<br/>
                            x{{ item.quantity }}
                        </div>
                    </div>
                </template>
                <template v-if="$store.getters.getAnimalProductsInInventory.length > 0">
                    <div class="col-12 inventory-header">
                        <h5>Animal products</h5>
                    </div>
                    <div class="col-6"
                         v-for="item in $store.getters.getAnimalProductsInInventory"
                         v-bind:key="item"
                         data-bs-dismiss="modal">
                        <div :class="'inventory-item ' + getFrameClass(item.type)">
                            <div class="float-end">
                                <img :src="item.icon" :alt="item.name" class="item-icon">
                            </div>
                            {{ item.name }}<br/>
                            x{{ item.quantity }}
                        </div>
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="col-6"
                     v-for="item in $store.getters.getInventoryWithItemData"
                     v-bind:key="item"
                     data-bs-dismiss="modal">
                    <div :class="'inventory-item ' + getFrameClass(item.type)">
                        <div class="float-end">
                            <img :src="item.icon" :alt="item.name" class="item-icon">
                        </div>
                        {{ item.name }}<br/>
                        x{{ item.quantity }}
                    </div>
                </div>
            </template>
            <div v-if="$store.state.inventory.length === 0">
                Your inventory is empty.
            </div>
        </div>
    </div>
</template>

<script>
import {ItemTypeFrameClasses} from "@/data/ItemTypes";

export default {
    name: "InventoryView",
    methods: {
        getFrameClass(type) {
            return ItemTypeFrameClasses[type];
        }
    }
}
</script>

<style scoped>
#main-container {
    margin-top: 5em;
    margin-bottom: 5em;
}

.item-icon {
    height: 2.5em;
}

.inventory-item {
    font-size: 0.8em;
    margin-bottom: 1em;
    background-color: white;
    border-radius: 20px;
}

#sort-buttons {
    color: white;
    margin-bottom: 1em;
}

#sort-buttons img {
    margin-left: 0.3em;
}

.inventory-header {
    color: white;
}

.pixel-border-static {
    margin-left: 0.3em;
    display: inline-block;
    background-color: white;
    border-radius: 20px;
    color: black;
}
</style>