Merge pull request #41 from umgefahren/ingredients-select-page

Ingredients select page

components/ingredientSelectItem.vue

@@ -5,7 +5,7 @@
         :class="{ 'bg-secondary': selected }"
     >
         <div class="place-content-center items-center card-body">
-            <h2 class="text-center text-xl card-title">{{ name }}</h2>
+            <h2 class="text-center text-xl md:text-3xl card-title">{{ name }}</h2>
             <nuxt-link @click.stop class="bg-black bg-opacity-40 mt-4 p-2 rounded-lg" :to="'/ingredient/' + slug">
                 <font-awesome-icon class="text-2xl" icon="fa-share-from-square" />
             </nuxt-link>
@@ -14,19 +14,13 @@
 </template>
 
 <script setup>
-const { name, slug } = defineProps(['name', 'slug'])
+    import { useStore } from '~/stores/state'
 
-function loadState() {
-    return localStorage.getItem(`ing-${slug}-select`) === 'true'
-}
-function saveState(v) {
-    localStorage.setItem(`ing-${slug}-select`, v)
-}
+    const { slug, name, selected } = defineProps(['slug', 'name', 'selected'])
 
-let selected = ref(loadState())
+    const store = useStore()
 
-function toggle() {
-    selected.value = !selected.value
-    saveState(selected.value)
-}
+    function toggle() {
+        store.toggleIngredientSelected(slug)
+    }
 </script>

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', 'nuxt-meilisearch'],
+  modules: ['@nuxtjs/tailwindcss', 'nuxt-meilisearch', '@pinia/nuxt'],
   typescript: {
     shim: false
   },

package.json

@@ -16,11 +16,14 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
+    "@pinia/nuxt": "^0.4.3",
     "@prisma/client": "^4.4.0",
+    "@vueuse/core": "^9.3.0",
     "daisyui": "^2.31.0",
     "meilisearch": "^0.28.0",
     "node": "^18.10.0",
-    "random": "^3.0.6",
-    "nuxt-meilisearch": "^0.1.3"
+    "nuxt-meilisearch": "^0.1.3",
+    "pinia": "^2.0.23",
+    "random": "^3.0.6"
   }
 }

pages/ingredients.vue

@@ -20,12 +20,31 @@
                 <ais-hits>
                     <template v-slot="{ items }">
                         <div class="flex flex-wrap justify-evenly">
-                            <IngredientSelectItem
-                                v-for="{ name, slug } in items"
-                                v-bind:key="name"
-                                :name="name"
-                                :slug="slug"
-                            />
+                            <template
+                                v-for="{ slug, name } in items"
+                                v-bind:key="slug"
+                            >
+                                <IngredientSelectItem
+                                    v-if="selected.includes(slug)"
+                                    :slug="slug"
+                                    :name="name"
+                                    :selected="true"
+                                />
+                            </template>
+                        </div>
+                        <div class="divider"></div>
+                        <div class="flex flex-wrap justify-evenly">
+                            <template
+                                v-for="{ slug, name } in items"
+                                v-bind:key="slug"
+                            >
+                                <IngredientSelectItem
+                                    v-if="!selected.includes(slug)"
+                                    :slug="slug"
+                                    :name="name"
+                                    :selected="false"
+                                />
+                            </template>
                         </div>
                     </template>
                 </ais-hits>
@@ -39,8 +58,13 @@ import {
     AisInstantSearch,
     AisHits,
     AisSearchBox,
-    AisConfigure
+    AisConfigure,
 } from 'vue-instantsearch/vue3/es'
+import { useStore } from '~/stores/state'
+
+const store = useStore()
 
 const client = useMeilisearchClient()
+
+const selected = computed(() => store.selectedIngredients)
 </script>

stores/state.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { useStorage } from '@vueuse/core'
+
+export const useStore = defineStore('state', () => {
+    const selected_ingredients = useStorage('selected_ingredients', [])
+
+    const isIngredientSelected = computed(() => slug => selected_ingredients.value.includes(slug))
+    const selectedIngredients = computed(() => selected_ingredients.value)
+
+    function selectIngredient(slug) {
+        if (!selected_ingredients.value.includes(slug)) selected_ingredients.value.push(slug)
+    }
+
+    function deselectIngredient(slug) {
+        selected_ingredients.value = selected_ingredients.value.filter(x => x != slug)
+    }
+
+    function toggleIngredientSelected(slug) {
+        if (selectedIngredients.value.includes(slug)) deselectIngredient(slug)
+        else selectIngredient(slug)
+    }
+
+    return { isIngredientSelected, selectedIngredients, selectIngredient, deselectIngredient, toggleIngredientSelected }
+})