mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
Merge pull request #3162 from Kuchenpirat/feat--dragable-items-in-ingredient-parser
feat: dragable items in ingredient parser
This commit is contained in:
commit
e1a87b32d9
@ -48,46 +48,54 @@
|
|||||||
</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>
|
ghost-class="ghost"
|
||||||
</template>
|
>
|
||||||
<template #actions>
|
<v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
|
||||||
<v-icon left :color="isError(ing) ? 'error' : 'success'">
|
<v-expansion-panel-header class="my-0 py-0" disable-icon-rotate>
|
||||||
{{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
|
<template #default="{ open }">
|
||||||
</v-icon>
|
<v-fade-transition>
|
||||||
<div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
|
<span v-if="!open" key="0"> {{ ing.input }} </span>
|
||||||
{{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
|
</v-fade-transition>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
<template #actions>
|
||||||
</v-expansion-panel-header>
|
<v-icon left :color="isError(ing) ? 'error' : 'success'">
|
||||||
<v-expansion-panel-content class="pb-0 mb-0">
|
{{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
|
||||||
<RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" />
|
</v-icon>
|
||||||
{{ ing.input }}
|
<div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
|
||||||
<v-card-actions>
|
{{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
|
||||||
<v-spacer />
|
</div>
|
||||||
<BaseButton
|
</template>
|
||||||
v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
|
</v-expansion-panel-header>
|
||||||
color="warning"
|
<v-expansion-panel-content class="pb-0 mb-0">
|
||||||
small
|
<RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" />
|
||||||
@click="createUnit(ing.ingredient.unit, index)"
|
{{ ing.input }}
|
||||||
>
|
<v-card-actions>
|
||||||
{{ errors[index].unitErrorMessage }}
|
<v-spacer />
|
||||||
</BaseButton>
|
<BaseButton
|
||||||
<BaseButton
|
v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
|
||||||
v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
|
color="warning"
|
||||||
color="warning"
|
small
|
||||||
small
|
@click="createUnit(ing.ingredient.unit, index)"
|
||||||
@click="createFood(ing.ingredient.food, index)"
|
>
|
||||||
>
|
{{ errors[index].unitErrorMessage }}
|
||||||
{{ errors[index].foodErrorMessage }}
|
</BaseButton>
|
||||||
</BaseButton>
|
<BaseButton
|
||||||
</v-card-actions>
|
v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
|
||||||
</v-expansion-panel-content>
|
color="warning"
|
||||||
</v-expansion-panel>
|
small
|
||||||
|
@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 +104,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 +131,7 @@ interface Error {
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
RecipeIngredientEditor,
|
RecipeIngredientEditor,
|
||||||
|
draggable
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const { $auth } = useContext();
|
const { $auth } = useContext();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user