mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-11 17:16:59 -05:00
Code Packages Releases Activity

route lazy loading + route naming improvements

Browse Source
This commit is contained in:
vabene1111
2025-03-16 16:25:55 +01:00
parent e29f318453
commit c4c6eb3ca6
14 changed files with 58 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue3/src/pages/IngredientEditorPage.vue
View File

@@ -95,7 +95,7 @@
<template v-slot:expanded-row="{ columns, item }">
<tr>
<td :colspan="columns.length">
<v-btn variant="outlined" color="secondary" target="_blank" :to="{name: 'view_recipe', params: {id: r.id}}" v-for="r in item.usedInRecipes">
<v-btn variant="outlined" color="secondary" target="_blank" :to="{name: 'RecipeViewPage', params: {id: r.id}}" v-for="r in item.usedInRecipes">
{{ r.name }} (#{{ r.id }})
</v-btn>
</td>

163
vue3/src/pages/RecipeEditPage.vue
View File

@@ -1,163 +0,0 @@
<template>
<v-container>
<v-row>
<v-col>
<v-card>
<v-card-title>{{ recipe.name }}</v-card-title>
<v-card-text>
<v-form>
<v-text-field
label="Name"
v-model="recipe.name"
></v-text-field>
<v-textarea
label="Description"
v-model="recipe.description"
:rules="[v => v.length <= 512 || '> 512']"
counter
clearable
></v-textarea>
<v-combobox
label="Keywords"
v-model="recipe.keywords"
:items="keywords"
item-title="name"
multiple
clearable
chips
></v-combobox>
<v-row>
<v-col>
<v-text-field
v-model.number="recipe.waitingTime"
label="Waiting Time (min)"
></v-text-field>
</v-col>
<v-col>
<v-text-field
v-model.number="recipe.workingTime"
label="Working Time (min)"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-model.number="recipe.servings"
label="Servings"
></v-text-field>
</v-col>
<v-col>
<v-text-field
v-model="recipe.servingsText"
label="Servings Text"
></v-text-field>
</v-col>
</v-row>
</v-form>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row v-for="(step, index) in recipe.steps" class="mt-1">
<v-col>
<step-editor v-model="recipe.steps[index]" :step-index="index"></step-editor>
</v-col>
</v-row>
<v-speed-dial
location="top"
transition="fade-transition"
>
<template v-slot:activator="{ props: activatorProps }">
<v-fab
app
v-bind="activatorProps"
color="primary"
size="large"
icon="$save"
></v-fab>
</template>
<v-btn key="1" icon="$success"></v-btn>
<v-btn key="2" icon="$info"></v-btn>
<v-btn key="3" icon="$warning"></v-btn>
<v-btn key="4" icon="$error"></v-btn>
</v-speed-dial>
</v-container>
<v-btn @click="updateRecipe()">Save</v-btn>
<v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'
import {ApiApi, Keyword, Recipe} from "@/openapi";
import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
import StepEditor from "@/components/inputs/StepEditor.vue";
export default defineComponent({
name: "RecipeEditPage",
components: {StepEditor, StepMarkdownEditor},
props: {
recipe_id: {type: String, required: false},
},
watch: {
recipe_id: function () {
this.refreshRecipe()
}
},
data() {
return {
recipe: {} as Recipe,
keywords: [] as Keyword[],
}
},
mounted() {
this.refreshRecipe()
const api = new ApiApi()
api.apiKeywordList({page: 1, pageSize: 100}).then(r => {
if (r.results) {
this.keywords = r.results
}
})
},
methods: {
refreshRecipe() {
if (this.recipe.id != Number(this.recipe_id)) {
const api = new ApiApi()
api.apiRecipeRetrieve({id: Number(this.recipe_id)}).then(r => {
this.recipe = r
})
}
},
updateRecipe() {
const api = new ApiApi()
api.apiRecipeUpdate({id: Number(this.recipe_id), recipe: this.recipe}).then(r => {
this.recipe = r
})
}
}
})
</script>
<style scoped>
</style>

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

@@ -39,7 +39,7 @@
<v-alert-title>{{ $t('Duplicate') }}</v-alert-title>
{{ $t('DuplicateFoundInfo') }}
<v-list>
<v-list-item :to="{name: 'view_recipe', params: {id: r.id}}" v-for="r in importResponse.duplicates" :key="r.id"> {{ r.name }}
<v-list-item :to="{name: 'RecipeViewPage', params: {id: r.id}}" v-for="r in importResponse.duplicates" :key="r.id"> {{ r.name }}
(#{{ r.id }})
</v-list-item>
</v-list>
@@ -294,7 +294,7 @@ function createRecipeFromImport() {
api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(recipe => {
updateRecipeImage(recipe.id!, null, importResponse.value.recipe?.imageUrl).then(r => {
router.push({name: 'view_recipe', params: {id: recipe.id}})
router.push({name: 'RecipeViewPage', params: {id: recipe.id}})
})
}).catch(err => {
useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)

2
vue3/src/pages/SearchPage.vue
View File

@@ -199,7 +199,7 @@ function reset() {
}
function handleRowClick(event: PointerEvent, data: any) {
router.push({name: 'view_recipe', params: {id: recipes.value[data.index].id}})
router.push({name: 'RecipeViewPage', params: {id: recipes.value[data.index].id}})
}
/**

16
vue3/src/pages/SettingsPage.vue
View File

@@ -3,22 +3,22 @@
<v-row>
<v-col cols="12" md="3" offset-md="1" offset-xl="2" xl="2">
<v-list class="bg-transparent">
<v-list-item :to="{name: 'view_settings_account'}" prepend-icon="fa-solid fa-user">{{ $t('Profile') }}</v-list-item>
<v-list-item :to="{name: 'AccountSettings'}" prepend-icon="fa-solid fa-user">{{ $t('Profile') }}</v-list-item>
<v-divider></v-divider>
<v-list-subheader>{{ $t('Settings') }}</v-list-subheader>
<v-list-item :to="{name: 'view_settings_cosmetic'}" prepend-icon="fa-solid fa-palette">{{ $t('Cosmetic') }}</v-list-item>
<v-list-item :to="{name: 'view_settings_shopping'}" prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
<v-list-item :to="{name: 'view_settings_mealplan'}" prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
<v-list-item :to="{name: 'CosmeticSettings'}" prepend-icon="fa-solid fa-palette">{{ $t('Cosmetic') }}</v-list-item>
<v-list-item :to="{name: 'ShoppingSettings'}" prepend-icon="$shopping">{{ $t('Shopping_list') }}</v-list-item>
<v-list-item :to="{name: 'MealPlanSettings'}" prepend-icon="$mealplan">{{ $t('Meal_Plan') }}</v-list-item>
<v-list-item :href="getDjangoUrl('settings-shopping/')" target="_blank" prepend-icon="$search">{{ $t('Search') }}</v-list-item>
<v-divider></v-divider>
<v-list-subheader>Space</v-list-subheader>
<v-list-item :to="{name: 'view_settings_user_space'}" prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
<v-list-item :to="{name: 'view_settings_space'}" prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
<v-list-item :to="{name: 'view_settings_space_member'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
<v-list-item :to="{name: 'UserSpaceSettings'}" prepend-icon="$spaces">{{ $t('YourSpaces') }}</v-list-item>
<v-list-item :to="{name: 'SpaceSettings'}" prepend-icon="$settings">{{ $t('SpaceSettings') }}</v-list-item>
<v-list-item :to="{name: 'SpaceMemberSettings'}" prepend-icon="fa-solid fa-users">{{ $t('SpaceMembers') }}</v-list-item>
<v-divider></v-divider>
<v-list-subheader>Admin</v-list-subheader>
<v-list-item :to="{name: 'view_settings_api'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
<v-list-item :to="{name: 'ApiSettings'}" prepend-icon="fa-solid fa-code">{{ $t('API') }}</v-list-item>
<v-list-item :href="getDjangoUrl('system')" target="_blank" prepend-icon="fa-solid fa-server">{{ $t('System') }}</v-list-item>
</v-list>

3
vue3/src/pages/StartPage.vue
View File

@@ -23,7 +23,7 @@
<v-row>
<v-col class="text-center">
<v-btn size="x-large" rounded="xl" prepend-icon="$search" variant="tonal" :to="{name: 'view_search', params: {query: ''}}">{{ $t('View_Recipes') }}</v-btn>
<v-btn size="x-large" rounded="xl" prepend-icon="$search" variant="tonal" :to="{name: 'SearchPage', params: {query: ''}}">{{ $t('View_Recipes') }}</v-btn>
</v-col>
</v-row>
@@ -36,6 +36,7 @@ import {onMounted, ref} from "vue"
import {ApiApi} from "@/openapi"
import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindow.vue"
import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue"
import SearchPage from "@/pages/SearchPage.vue";
const totalRecipes = ref(-1)