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

    <div v-if="outstandingItemGroups.length === 0">
        <p>
            No items to purchase
        </p>
    </div>

    <div class="purchased-slider">
        <span v-if="purchasedItemGroups.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>Purchased Meals</h4>
            <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="purchasedMeals" />

            <h4>
                Purchased Items
            </h4>
            <ul class="full-shopping-list">
                <li v-for="item in purchasedItemGroups" :key="item.id">
                    <shopping-list-item :shopping-list-item-group="item" />
                </li>
            </ul>
        </div>
    </div>

    <div class="spacer" v-if="selected.length">
        &nbsp;
    </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 ?? selected[0].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;
}

.spacer {
    height: 12em;
}

</style>

<script>

import alert from '@/alert.js'

import data from '@/data.js'
import { itemsToGroups, groupsToItems } from './shopping.js'

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

async function saveShoppingList(outstandingItemGroups) {
    const items = groupsToItems(outstandingItemGroups);
    if (items.length === 0) {
        alert.show({ type: 'error', message: 'No items selected.' });
        return;
    }

    return await data.purchaseShoppingList(items);
}

const groupsMatch = (a, b) => {
    if (a.product != b.product) return false;
    if (a.name && a.name === b.name) return true;
    return a.product.id === b.product.id;
}

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, shoppingList: null, selected: [], showPurchased: false }
    },
    async beforeMount() {
        this.loadData();
    },
    computed: {
        outstandingItemGroups() {
            return itemsToGroups(this.shoppingList?.outstanding_items ?? []);
        },
        purchasedItemGroups() {
            return itemsToGroups(this.shoppingList?.purchased_items ?? []);
        },
        purchasedMeals() {
            return Object.values(this.shoppingList?.meals_lookup ?? {}).filter(m => m.purchase_date).sort((a, b) => a.suggested_date - b.suggested_date);
        },
        availableMeals() {
            const meals = { ...this.shoppingList?.meals_lookup ?? {} };
            this.upcomingMeals?.forEach(m => {
                if (!meals[m.id]) {
                    meals[m.id] = m;
                }
            });

            return Object.values(meals).filter(m => !m.purchase_date).sort((a, b) => a.suggested_date - b.suggested_date);
        },
        includedMeals() {
            return this.shoppingList?.requested_meals.map(m => m.meal) ?? [];
        }
    },
    methods: {
        async loadData() {
            this.upcomingMeals = await data.getUpcomingMeals(this.from, this.to);
            this.shoppingList = await data.getCurrentShoppingList();
        },
        async mealSelected(meal) {
            await data.requestMeal(meal.id);
            await this.loadData();
        },
        async mealUnselected(meal) {
            await data.unrequestMeal(meal.id);
            await this.loadData();
        },
        async markFound() {
            await saveShoppingList(this.selected);
            
            this.selected = [];
            await this.loadData();
        },
        async markPurchased() {
            const shoppingList = await saveShoppingList(this.selected);

            if (!shoppingList || !shoppingList.id) {
                alert.show({ type: 'error', message: 'Failed to purchase.' });
                return;
            }

            this.selected = [];
            this.$router.push(`/shopping/${shoppingList.id}`);
        },
        toggleSelect(item) {
            const index = this.selected.findIndex(i => groupsMatch(i, item));
            if (index === -1)
                this.selected.push(item);
            else
                this.selected.splice(index, 1);
        },
        isSelected(item) {
            return this.selected.some(i => groupsMatch(i, item));
        }
    }
}

</script>