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

ingredient checkboxes and table style

Browse Source
This commit is contained in:
vabene1111
2024-12-31 16:44:10 +01:00
parent 846a4796e2
commit 55ee75fed1
4 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,25 @@
<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-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0">
<template v-slot:item.checked="{ item }">
<v-checkbox-btn v-model="item.checked" color="success"></v-checkbox-btn>
</template>
<template v-slot:item.note="{ item }">
<v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">
<v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>
</v-icon>
</template>
</v-data-table>
</v-table>
</template>
<script lang="ts" setup>
@@ -14,6 +27,7 @@ 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";
const ingredients = defineModel<Ingredient[]>({required: true})
@@ -28,6 +42,15 @@ 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(() => {