improved ingredient table

TandoorRecipes · Jan 2, 2025 · 2841e08 · 2841e08
1 parent 00ae511
commit 2841e08
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
@@ -1,17 +1,20 @@
 <template>
-<!--    <v-table density="compact" v-if="ingredients.length > 0">-->
+    <!--    <v-table density="compact" v-if="ingredients.length > 0">-->
 
-<!--        <tbody>-->
-<!--        <ingredients-table-row v-for="(ing, i) in ingredients" v-model="ingredients[i]" :key="ing.id" :show-notes="props.showNotes"-->
-<!--                               :ingredient-factor="ingredientFactor"></ingredients-table-row>-->
-<!--        </tbody>-->
+    <!--        <tbody>-->
+    <!--        <ingredients-table-row v-for="(ing, i) in ingredients" v-model="ingredients[i]" :key="ing.id" :show-notes="props.showNotes"-->
+    <!--                               :ingredient-factor="ingredientFactor"></ingredients-table-row>-->
+    <!--        </tbody>-->
 
-<!--    </v-table>-->
+    <!--    </v-table>-->
 
-    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0">
+    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick">
         <template v-slot:item.checked="{ item }">
             <v-checkbox-btn v-model="item.checked" color="success"></v-checkbox-btn>
         </template>
+        <template v-slot:item.amount="{ item }">
+            {{ item.amount * props.ingredientFactor }}
+        </template>
 
         <template v-slot:item.note="{ item }">
             <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">
@@ -23,11 +26,8 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, PropType, ref} from 'vue'
 import {Ingredient} from "@/openapi";
-import IngredientsTableRow from "@/components/display/IngredientsTableRow.vue";
-import draggable from 'vuedraggable'
-import ModelMergeDialog from "@/components/dialogs/ModelMergeDialog.vue";
+import {computed} from "vue";
 
 const ingredients = defineModel<Ingredient[]>({required: true})
 
@@ -42,21 +42,26 @@ const props = defineProps({
     },
 })
 
-const tableHeaders = [
-    {title: '', key: 'checked', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pa-0'}},
-    {title: '', key: 'amount', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pr-1'}},
-    {title: '', key: 'unit.name', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pr-1'}},
-    {title: '', key: 'food.name'},
-    {title: '', key: 'note', align: 'end'},
-]
-
-
-const mutable_ingredients = ref([] as Ingredient[])
-
-onMounted(() => {
-    mutable_ingredients.value = ingredients.value
+const tableHeaders = computed(() => {
+    let headers = [
+        {title: '', key: 'checked', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pa-0'}},
+        {title: '', key: 'amount', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pr-1'}},
+        {title: '', key: 'unit.name', align: 'start', width: '1%', noBreak: true, cellProps: {class: 'pr-1'}},
+        {title: '', key: 'food.name'},
+    ]
+    if (props.showNotes) {
+        headers.push(
+            {title: '', key: 'note', align: 'end',}
+        )
+    }
+
+    return headers
 })
 
+function handleRowClick(event: PointerEvent, data: any) {
+    ingredients.value[data.index].checked = !ingredients.value[data.index].checked
+}
+
 </script>
 
 

diff --git a/vue3/src/components/inputs/GlobalSearchDialog.vue b/vue3/src/components/inputs/GlobalSearchDialog.vue
@@ -101,7 +101,7 @@ const searchResults = computed(() => {
         if (searchResults.length < 3) {
             asyncSearchResults.value.slice(0, 5).forEach(r => {
                 if (searchResults.findIndex(x => x.recipeId == r.id) == -1) {
-                    searchResults.push({name: r.name, image: r.image, recipeId: r.id, icon: 'fa-solid fa-globe'})
+                    searchResults.push({name: r.name, image: r.image, recipeId: r.id})
                 }
             })
         }