mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

improved ingredient table

Browse Source
This commit is contained in:
vabene1111
2025-01-02 09:34:12 +01:00
parent 00ae511076
commit 2841e086df
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
vue3/src/components/display/IngredientsTable.vue
View File

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

2
vue3/src/components/inputs/GlobalSearchDialog.vue
View File

@@ -101,7 +101,7 @@ const searchResults = computed(() => {
if (searchResults.length < 3) { if (searchResults.length < 3) {
asyncSearchResults.value.slice(0, 5).forEach(r => { asyncSearchResults.value.slice(0, 5).forEach(r => {
if (searchResults.findIndex(x => x.recipeId == r.id) == -1) { 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})
} }
}) })
} }