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

<template>
    <h3>Full shopping list</h3>
    
    <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 productGroupsToPurchase" :key="item.id" class="selectable" :class="{ 'selected': isSelected(item) }" @click="toggleSelect(item)">
            <shopping-list-item :productGrouping="item" />
        </li>
    </ul>

    <div class="purchased-slider">
        <span v-if="purchasedGroups.length === 0"></span>
        <button v-else-if="showPurchased" @click="showPurchased=false" >⏶ Hide Purchased ⏶</button>
        <button v-else @click="showPurchased=true">⏷ Show Purchased ⏷</button>

        <div v-if="showPurchased">
            <h4>
                Already Purchased
            </h4>
            <ul class="full-shopping-list">
                <li v-for="item in purchasedGroups" :key="item.id">
                    <shopping-list-item :productGrouping="item" />
                </li>
            </ul>
        </div>
    </div>

    <!-- Display 'Stocked', 'Purchased' and 'Cancel' buttons in a vertical stack fixed to the bottom of the screen when any elements are selected -->
    <div class="footer-buttons" v-if="selected.length">
        <p v-if="selected.length === 1">
            Mark '{{ selected[0].product.name }}' as
        </p>
        <p v-else>
            Mark {{ selected.length }} items as
        </p>

        <div class="button-group">
            <button @click="markFound">
                <img src="@/assets/house-check.svg" /><br />
                Found
            </button>
            
            <button @click="markPurchased">
                <img src="@/assets/shopping-cart.svg" /><br />
                Purchased
            </button>
    
            <button @click="selected = []">
                <img src="@/assets/close.svg" /><br />
                Cancel
            </button>
        </div>
    </div>
</template>

<style scoped>

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

.full-shopping-list li {
    list-style-type: none;
    
    outline: 1px solid #ccc;
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.full-shopping-list li.selectable {
    cursor: pointer;
    outline: 1px solid #ccc;
}

.full-shopping-list li.selected {
    background-color: #f0f0f0;
    outline-width: 3px;
}

.footer-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1ex;
    background-color: #f0f0f0;
    border-top: 1px solid #ccc;
}

.footer-buttons p {
    margin: 0;
    text-align: left;
    font-style: italic;
}

.button-group {
    /* Display as vertical fixed to the bottom of the screen */
    display: flex;
}

.button-group button {
    flex: 1;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    background-color: #f0f0f0;
    cursor: pointer;
}

button img {
    width: 2em;
    height: 2em;
}

</style>

<script>

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

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

export default {
    name: 'FullShoppingListPage',
    components: { MealSelectionList, ShoppingListItem },
    props: {
        stockTaking: {
            type: Boolean,
            default: false
        },
    },
    data() {
        const from = new Date();
        from.setTime(0);
        
        const to = new Date();
        to.setDate(to.getDate() + 7);

        return { from, to, availableMeals: [], shoppingList: null, includedMeals: [], productGroupsToPurchase: [], purchasedGroups: [], selected: [], showPurchased: false }
    },
    async beforeMount() {
        const allMeals = await data.getUpcomingMeals(this.from, this.to);
        this.availableMeals = allMeals.filter(m => !m.purchase_date);
        this.shoppingList = await data.getCurrentShoppingList();
    },
    watch: {
        shoppingList: {
            handler: 'updateLists',
            deep: true
        },
    },
    methods: {
        async updateLists() {
            if (!this.shoppingList)
                return;

            this.includedMeals = this.shoppingList.requests.map(r => r.meal).filter(m => m);

            const productGroups = Object.values(toProductsModel(this.shoppingList));
            this.productGroupsToPurchase = productGroups.filter(m => m.requested.length > 0);
            this.purchasedGroups = productGroups.filter(m => m.requested.length === 0);
        },
        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() {
        },
        async markPurchased() {
            const results = this.selected.map(item => item.requested.map(r => ({
                product_id: r.ingredient.product_id,
                product: r.ingredient.product,
                quantity: r.ingredient.quantity,
                unit: r.ingredient.unit,
                list_id: -1,
            }))).flat();

            const requestedSources = this.selected.map(item => item.requested).flat();
            const completedRequests = getCompletedRequests(this.shoppingList, results);
            const servicedRequests = sourcesToRequests(requestedSources);

            const shoppingList = await data.purchaseItems('', servicedRequests, results, completedRequests);
            this.$router.push(`/shopping/${shoppingList.id}`);
        },
        toggleSelect(item) {
            const index = this.selected.findIndex(i => i === item);
            if (index === -1)
                this.selected.push(item);
            else
                this.selected.splice(index, 1);
        },
        isSelected(item) {
            return this.selected.some(i => i === item);
        }
    }
}

</script>