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

fixed list groups

Browse Source
This commit is contained in:
vabene1111
2025-01-18 13:28:14 +01:00
parent 35dce661bf
commit d294341926
5 changed files with 118 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
vue3/src/components/dialogs/RecipeShareDialog.vue
View File

@@ -11,8 +11,8 @@
</v-card-text>
<v-card-actions>
<v-btn class="float-right" @click="dialog = false">{{$t('Close')}}</v-btn>
<v-btn class="float-right" color="success" prepend-icon="fa-solid fa-share-nodes" @click="shareIntend()">{{$t('Share')}}</v-btn>
<v-btn class="float-right" @click="dialog = false">{{ $t('Close') }}</v-btn>
<v-btn class="float-right" color="success" prepend-icon="fa-solid fa-share-nodes" @click="shareIntend()">{{ $t('Share') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -21,14 +21,14 @@
<script setup lang="ts">
import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
import {onMounted, PropType, ref} from "vue";
import {onMounted, PropType, ref, watch} from "vue";
import {ApiApi, Recipe, RecipeFlat, RecipeOverview, ShareLink} from "@/openapi";
import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
import BtnCopy from "@/components/buttons/BtnCopy.vue";
import {useI18n} from "vue-i18n";
const props = defineProps({
recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
recipe: {type: Object as PropType<Recipe | RecipeFlat | RecipeOverview>, required: true}
})
const {t} = useI18n()
@@ -37,14 +37,17 @@ const dialog = ref(false)
const loading = ref(false)
const shareLink = ref({} as ShareLink)
onMounted(() => {
generateShareLink()
// watch change to dialog open and generate share link when dialog is opened
watch(dialog, (newValue, oldValue) => {
if (!oldValue && newValue) {
generateShareLink()
}
})
/**
* request api to generate share link
*/
function generateShareLink(){
function generateShareLink() {
let api = new ApiApi()
loading.value = true

69
vue3/src/components/inputs/StepEditor.vue
View File

@@ -5,7 +5,7 @@
<v-card variant="outlined">
<template #title>
<v-card-title>
<v-chip color="primary">{{$t('Step')}} {{ props.stepIndex + 1 }}</v-chip>
<v-chip color="primary">{{ $t('Step') }} {{ props.stepIndex + 1 }}</v-chip>
{{ step.name }}
</v-card-title>
</template>
@@ -50,42 +50,44 @@
<v-row dense>
<v-col cols="12">
<v-label>{{ $t('Ingredients') }}</v-label>
<div v-if="!mobile">
<vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" empty-insert-threshold="25" group="ingredients">
<v-row v-for="(ingredient, index) in step.ingredients" dense>
<v-col cols="2">
<v-text-field :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact"
hide-details>
<vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" v-if="!mobile">
<v-row v-for="(ingredient, index) in step.ingredients" dense>
<v-col cols="2">
<v-text-field :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact" hide-details>
<template #prepend>
<v-icon icon="$dragHandle" class="drag-handle cursor-grab"></v-icon>
</template>
</v-text-field>
</v-col>
<v-col cols="3">
<model-select model="Unit" v-model="ingredient.unit" density="compact" allow-create hide-details></model-select>
</v-col>
<v-col cols="3">
<model-select model="Food" v-model="ingredient.food" density="compact" allow-create hide-details></model-select>
</v-col>
<v-col cols="3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
<v-text-field :label="$t('Note')" v-model="ingredient.note" density="compact" hide-details></v-text-field>
</v-col>
<v-col cols="1">
<v-btn variant="plain" icon>
<v-icon icon="$settings"></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item @click="step.ingredients.splice(index, 1)" prepend-icon="$delete">{{ $t('Delete') }}</v-list-item>
</v-list>
</v-menu>
</v-btn>
<template #prepend>
<v-icon icon="$dragHandle" class="drag-handle cursor-grab"></v-icon>
</template>
</v-text-field>
</v-col>
<v-col cols="3">
<model-select model="Unit" v-model="ingredient.unit" density="compact" allow-create hide-details></model-select>
</v-col>
<v-col cols="3">
<model-select model="Food" v-model="ingredient.food" density="compact" allow-create hide-details></model-select>
</v-col>
<v-col cols="3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
<v-text-field :label="$t('Note')" v-model="ingredient.note" density="compact" hide-details></v-text-field>
</v-col>
<v-col cols="1">
<v-btn variant="plain" icon>
<v-icon icon="$settings"></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item @click="step.ingredients.splice(index, 1)" prepend-icon="$delete">{{ $t('Delete') }}</v-list-item>
</v-list>
</v-menu>
</v-btn>
</v-col>
</v-row>
</vue-draggable>
</v-col>
</v-row>
</vue-draggable>
</div>
<v-list v-if="mobile">
<vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients">
<vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" group="ingredients">
<v-list-item v-for="(ingredient, index) in step.ingredients" border @click="editingIngredientIndex = index; dialogIngredientEditor = true">
<ingredient-string :ingredient="ingredient"></ingredient-string>
<template #append>
@@ -203,6 +205,7 @@ const props = defineProps({
})
const {mobile} = useDisplay()
const test = ref([])
const showName = ref(false)
const showTime = ref(false)

4
vue3/src/pages/RecipeImportPage.vue
View File

@@ -19,7 +19,7 @@
<v-stepper-window>
<v-stepper-window-item value="1">
<v-card :loading="loading">
<v-card :loading="loading" >
<v-card-text>
<v-text-field :label="$t('Website') + ' (https://...)'" v-model="importUrl">
<template #append>
@@ -115,7 +115,7 @@
</v-col>
<v-col cols="12" md="6">
<v-list>
<vue-draggable v-model="s.ingredients" group="ingredients" drag-class="drag-handle">
<vue-draggable v-model="s.ingredients" group="ingredients" handle=".drag-handle" empty-insert-threshold="25">
<v-list-item v-for="i in s.ingredients" border>
<v-icon size="small" class="drag-handle cursor-grab" icon="$dragHandle"></v-icon>
{{ i.amount }} <span v-if="i.unit">{{ i.unit.name }}</span> <span v-if="i.food">{{ i.food.name }}</span>

64
vue3/src/pages/TestPage.vue
View File

@@ -12,6 +12,34 @@
<model-edit-dialog model="MealPlan" v-model="dialog" :item="defaultItem" :activator="activator"></model-edit-dialog>
</v-btn>
<v-divider></v-divider>
<v-row>
<v-col>
<vue-draggable v-model="items1" group="test" handle=".drag-handle">
<v-card v-for="i in items1" class="mt-1">
<v-card-text>
<v-icon icon="$dragHandle" class="drag-handle"></v-icon>
{{ i.name }}
</v-card-text>
</v-card>
</vue-draggable>
</v-col>
<v-col>
<vue-draggable v-model="items2" group="test" handle=".drag-handle" empty-insert-threshold="25">
<v-card v-for="i in items2" class="mt-1">
<v-card-text>
<v-icon icon="$dragHandle" class="drag-handle"></v-icon>
{{ i.name }}
</v-card-text>
</v-card>
</vue-draggable>
</v-col>
</v-row>
<v-row class="mt-5">
<v-col>
<v-text-field density="compact"></v-text-field>
@@ -56,6 +84,7 @@ import {ref, useTemplateRef} from "vue";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import {DateTime} from "luxon";
import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {VueDraggable} from "vue-draggable-plus";
const image = ref(File)
const response = ref('')
@@ -67,6 +96,41 @@ const defaultItem = ref({
fromDate: DateTime.now().plus({day: 2}).toJSDate()
} as MealPlan)
const items2 = ref([])
const items1 = ref([
{
"name": "Jean",
"id": "2"
},
{
"name": "Johanna-2",
"id": "3-2"
},
{
"name": "Joao-2",
"id": "1-2"
},
{
"name": "Juan",
"id": "4"
},
{
"name": "Joao",
"id": "1"
},
{
"name": "Jean-2",
"id": "2-2"
},
{
"name": "Johanna",
"id": "3"
},
{
"name": "Juan-2",
"id": "4-2"
}
])
function imageToRecipe() {
const api = new ApiApi()