munch-ease-frontend/src/components/shopping/FullShoppingListPage.vue

<template>
    <h3>Full shopping list</h3>
    
    <input type="checkbox" id="show-found" v-model="stockTaking" />
    <label for="show-found">Show Stocktaking</label>
    
    <h4>Included Meals</h4>
    <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="availableMeals" />

    <ul class="full-shopping-list">
        <li v-for="item in productsToShow" :key="item.id">
            <shopping-list-item :product="item.product" :sources="item.sources" :totals="item.totals" :fully-found="item.fullyFound" :found-date="item.foundDate" />
            <span v-if="stockTaking">
                <button v-if="item.fullyFound" @click="markNotFound(item)">Mark Not Found</button>
                <button v-else @click="markFound(item)">Mark Found</button>
            </span>
        </li>
    </ul>
</template>

<style scoped>

.full-shopping-list li {
    list-style-type: none;

    border: 1px solid #ccc;
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.full-shopping-list {
    padding: 0;
}

</style>

<script>

import data from '@/data.js'
import { toProductsModel, groupingToIngredients } from './shopping.js'

import MealSelectionList from './MealSelectionList.vue'
import ShoppingListItem from './ShoppingListItem.vue'

export default {
    name: 'FullShoppingListPage',
    components: { MealSelectionList, ShoppingListItem },
    props: {
        id: [String, Number]
    },
    data() {
        const from = new Date();
        from.setTime(0);
        
        const to = new Date();
        to.setDate(to.getDate() + 7);

        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], listByProduct: [], stockTaking: false, productsToShow: []}
    },
    async beforeMount() {
        this.availableMeals = await data.getMeals(this.from, this.to);
        this.shoppingList = await data.getCurrentShoppingList();
    },
    watch: {
        shoppingList: {
            handler: 'updateLists',
            deep: true
        },
        stockTaking: 'updateLists'
    },
    methods: {
        async updateLists() {
            if (!this.shoppingList)
                return;

            this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);
            this.listByProduct = toProductsModel(this.shoppingList);
            this.productsToShow = this.stockTaking ? this.listByProduct : this.listByProduct.filter(p => !p.fullyFound);
        },
        async mealSelected(meal) {
            const request = await data.requestMeal(meal.id);
            this.shoppingList.requests.push(request);
        },
        async mealUnselected(meal) {
            await data.unrequestMeal(meal.id);
            this.shoppingList.requests = this.shoppingList.requests.filter(r => r.meal?.id !== meal.id);
        },
        async markFound(productGrouping) {
            const result = await data.markFound(groupingToIngredients(productGrouping));

            // Update shoppingList.result from result.created and result.removed
            this.shoppingList.results = this.shoppingList.results.filter(r => !result.removed.some(removed => removed.id === r.id));
            this.shoppingList.results.push(...result.created);
        },
        async markNotFound(item) {
            const deletedRequests = await data.markNotFound(item.product.id);
            this.shoppingList.results = this.shoppingList.results.filter(r => !deletedRequests.some(deleted => deleted.id === r.id));
        }
    }
}

</script>