ingredient checkboxes and table style

vue3/src/components/display/IngredientsTable.vue

@@ -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(() => {

vue3/src/components/display/IngredientsTableRow.vue

@@ -4,10 +4,12 @@
             <td colspan="4"><b>{{ ingredient.note }}</b></td>
         </template>
         <template v-else>
-            <td><v-checkbox-btn v-model="ingredient.checked" color="success"></v-checkbox-btn></td>
-            <td>{{ ingredient.amount * props.ingredientFactor }}</td>
-            <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
-            <td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
+            <td>
+                <v-checkbox-btn v-model="ingredient.checked" color="success"></v-checkbox-btn>
+            </td>
+            <td @click="ingredient.checked = !ingredient.checked">{{ ingredient.amount * props.ingredientFactor }}</td>
+            <td @click="ingredient.checked = !ingredient.checked"><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
+            <td @click="ingredient.checked = !ingredient.checked"><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
             <td v-if="props.showNotes">
                 <v-icon class="far fa-comment float-right" v-if="ingredient.note != '' && ingredient.note != undefined" @click="showTooltip = !showTooltip">
                     <v-tooltip v-model="showTooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>

vue3/src/components/display/RecipeView.vue

@@ -9,7 +9,6 @@
     </template>
 
     <template v-if="recipe.name != undefined">
-
         <v-card class="mt-md-4 rounded-0">
             <recipe-image
                 max-height="25vh"

vue3/src/components/display/StepsOverview.vue

@@ -5,7 +5,7 @@
             <v-expansion-panel-text>
                 <v-container>
                     <v-row v-for="(s, i) in props.steps">
-                        <v-col class="pa-1">
+                        <v-col class="pa-1" cols="12" md="6">
                             <b v-if="s.showAsHeader">{{ i + 1 }}. {{ s.name }} </b>
                             <ingredients-table v-model="s.ingredients" :ingredient-factor="props.ingredientFactor"></ingredients-table>
                         </v-col>