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')">
                        {{ $store.state.groupInventory ? 'Group by category' : 'List all'}}
                    </div>

                    <div class="pixel-border-static" v-on:click="$store.commit('sortInventory')">
                        {{ $store.state.inventorySortDesc ? 'A-Z' : 'Z-A' }}
                    </div>

                    <div class="pixel-border-static" v-on:click="$store.commit('sortInventoryByQuantity')">
                        QNTY
                    </div>
                </div>
            </div>
            <template v-if="$store.state.groupInventory">
                <template v-for="category in categories" v-bind:key="category.name">
                    <template v-if="category.items.length > 0">
                        <div class="col-12 inventory-header">
                            <h5>{{ category.name }}</h5>
                        </div>

                        <div class="col-6"
                             v-for="item in category.items"
                             v-bind:key="item"
                             data-bs-dismiss="modal">
                            <div :class="'inventory-item ' + getFrameClass(item.type)" v-on:click="showItemInfo(item)">
                                <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>
            <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)" v-on:click="showItemInfo(item)">
                        <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 class="modal fade" id="itemInfoModal" tabindex="-1" aria-labelledby="itemInfoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content steel-border" v-if="selectedItem">
                    <div class="modal-header">
                        <div class="float-start">
                            <img :src="selectedItem.icon" :alt="selectedItem.name" class="item-icon">
                            {{ selectedItem.name }}
                        </div>
                    </div>
                    <div class="modal-body" v-if="selectedItem">
                        <div class="row">
                            <div class="col-12" v-if="selectedItem.description" v-html="selectedItem.description">

                            </div>
                            <div class="col-12" v-if="selectedItem.cropData">
                                <div class="float-end">
                                    <img :src="selectedSeedFieldProductIcon" alt="">
                                </div>
                                <small class="text-muted">Seed info</small><br/>
                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested.<br/>
                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow.
                                <hr>
                            </div>
                            <div class="col-12" v-if="selectedItem.cropData">
                                <div class="float-end">
                                    <img :src="selectedSeedFieldProductIcon" alt="">
                                </div>
                                <small class="text-muted">Seed info</small><br/>
                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested.<br/>
                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="float-end">
                            <div class="btn-pixel" data-bs-dismiss="modal">
                                Close
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {ItemTypeFrameClasses, ItemTypes} from "@/data/ItemTypes";
import {openModal} from "@/helpers";
import ItemService from "@/services/ItemService";

export default {
    name: "InventoryView",
    data() {
        return {
            selectedItem: null,
        }
    },
    computed: {
        categories() {
            return [
                {
                    name: 'Seeds',
                    type: ItemTypes.Seeds,
                    items: this.$store.getters.getSeedsInInventory
                },
                {
                    name: 'Field products',
                    type: ItemTypes.FieldProducts,
                    items: this.$store.getters.getFieldProductsInInventory
                },
                {
                    name: 'Animal products',
                    type: ItemTypes.AnimalProducts,
                    items: this.$store.getters.getAnimalProductsInInventory
                }
            ]
        },
        selectedSeedFieldProductIcon() {
            let product = ItemService.getItemByID(this.selectedItem.cropData.product_id);
            return product.icon;
        }
    },
    methods: {
        getFrameClass(type) {
            return ItemTypeFrameClasses[type];
        },
        showItemInfo(item) {
            this.selectedItem = item;
            openModal('itemInfoModal');
            console.log(item);
        }
    }
}
</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;
}

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