Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ingredient-parser component to include draggable functionality

Browse Source
This commit is contained in:
Kuchenpirat 2024-02-12 09:59:19 +00:00
parent 1450d6fc4c
commit 0e0dfbf014
1 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
View File

@ -48,46 +48,53 @@
</div> </div>
<v-expansion-panels v-model="panels" multiple> <v-expansion-panels v-model="panels" multiple>
<v-expansion-panel v-for="(ing, index) in parsedIng" :key="index"> <draggable
<v-expansion-panel-header class="my-0 py-0" disable-icon-rotate> v-if="parsedIng.length > 0"
<template #default="{ open }"> v-model="parsedIng"
<v-fade-transition> handle=".handle"
<span v-if="!open" key="0"> {{ ing.input }} </span> :style="{ width: '100%' }"
</v-fade-transition> >
</template> <v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
<template #actions> <v-expansion-panel-header class="my-0 py-0" disable-icon-rotate>
<v-icon left :color="isError(ing) ? 'error' : 'success'"> <template #default="{ open }">
{{ isError(ing) ? $globals.icons.alert : $globals.icons.check }} <v-fade-transition>
</v-icon> <span v-if="!open" key="0"> {{ ing.input }} </span>
<div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'"> </v-fade-transition>
{{ ing.confidence ? asPercentage(ing.confidence.average) : "" }} </template>
</div> <template #actions>
</template> <v-icon left :color="isError(ing) ? 'error' : 'success'">
</v-expansion-panel-header> {{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
<v-expansion-panel-content class="pb-0 mb-0"> </v-icon>
<RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" /> <div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
{{ ing.input }} {{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
<v-card-actions> </div>
<v-spacer /> </template>
<BaseButton </v-expansion-panel-header>
v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''" <v-expansion-panel-content class="pb-0 mb-0">
color="warning" <RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" />
small {{ ing.input }}
@click="createUnit(ing.ingredient.unit, index)" <v-card-actions>
> <v-spacer />
{{ errors[index].unitErrorMessage }} <BaseButton
</BaseButton> v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
<BaseButton color="warning"
v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''" small
color="warning" @click="createUnit(ing.ingredient.unit, index)"
small >
@click="createFood(ing.ingredient.food, index)" {{ errors[index].unitErrorMessage }}
> </BaseButton>
{{ errors[index].foodErrorMessage }} <BaseButton
</BaseButton> v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
</v-card-actions> color="warning"
</v-expansion-panel-content> small
</v-expansion-panel> @click="createFood(ing.ingredient.food, index)"
>
{{ errors[index].foodErrorMessage }}
</BaseButton>
</v-card-actions>
</v-expansion-panel-content>
</v-expansion-panel>
</draggable>
</v-expansion-panels> </v-expansion-panels>
</v-container> </v-container>
</v-container> </v-container>
@ -96,6 +103,7 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api"; import { computed, defineComponent, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
import { invoke, until } from "@vueuse/core"; import { invoke, until } from "@vueuse/core";
import draggable from "vuedraggable";
import { import {
CreateIngredientFood, CreateIngredientFood,
CreateIngredientUnit, CreateIngredientUnit,
@ -122,6 +130,7 @@ interface Error {
export default defineComponent({ export default defineComponent({
components: { components: {
RecipeIngredientEditor, RecipeIngredientEditor,
draggable
}, },
setup() { setup() {
const { $auth } = useContext(); const { $auth } = useContext();