cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/recipe-edit-vue' into develop

Browse Source 
# Conflicts:
#	vue/vue.config.js
#	vue/webpack-stats.json
This commit is contained in:
vabene1111 2021-09-13 21:14:45 +02:00
commit 6350d0e9c5
9 changed files with 954 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
cookbook/templates/edit_internal_recipe_v2.html Normal file
View File

@ -0,0 +1,38 @@
{% extends "base.html" %}
{% load render_bundle from webpack_loader %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% block title %}{% trans 'Edit Recipe' %}{% endblock %}
{% block extra_head %}
{% endblock %}
{% block content %}
<div id="app">
<edit-internal-recipe></edit-internal-recipe>
</div>
{% endblock %}
{% block script %}
{% if debug %}
<script src="{% url 'js_reverse' %}"></script>
{% else %}
<script src="{% static 'django_js_reverse/reverse.js' %}"></script>
{% endif %}
<script type="application/javascript">
window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
window.RECIPE_ID = {{ recipe.pk }}
</script>
{% render_bundle 'edit_internal_recipe' %}
{% endblock %}

11
cookbook/views/api.py
View File

@ -548,9 +548,7 @@ class RecipeViewSet(viewsets.ModelViewSet):
if obj.get_space() != request.space:
raise PermissionDenied(detail='You do not have the required permission to perform this action', code=403)
serializer = self.serializer_class(
obj, data=request.data, partial=True
)
serializer = self.serializer_class(obj, data=request.data, partial=True)
if self.request.space.demo:
raise PermissionDenied(detail='Not available in demo', code=None)
@ -558,8 +556,11 @@ class RecipeViewSet(viewsets.ModelViewSet):
if serializer.is_valid():
serializer.save()
img, filetype = handle_image(request, obj.image)
obj.image = File(img, name=f'{uuid.uuid4()}_{obj.pk}{filetype}')
if serializer.validated_data == {}:
obj.image = None
else:
img, filetype = handle_image(request, obj.image)
obj.image = File(img, name=f'{uuid.uuid4()}_{obj.pk}{filetype}')
obj.save()
return Response(serializer.data)

2
cookbook/views/edit.py
View File

@ -57,7 +57,7 @@ def internal_recipe_update(request, pk):
recipe_instance = get_object_or_404(Recipe, pk=pk, space=request.space)
return render(
request, 'forms/edit_internal_recipe.html', {'recipe': recipe_instance}
request, 'edit_internal_recipe_v2.html', {'recipe': recipe_instance}
)

2
vue/package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"@babel/eslint-parser": "^7.13.14",
"@kangc/v-md-editor": "^1.7.7",
"@kevinfaguiar/vue-twemoji-picker": "^5.7.4",
"@riophae/vue-treeselect": "^0.4.0",
"axios": "^0.21.1",
@ -16,6 +17,7 @@
"core-js": "^3.14.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"prismjs": "^1.24.1",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-clickaway": "^2.2.2",

826
vue/src/apps/RecipeEditView/RecipeEditView.vue Normal file
View File

@ -0,0 +1,826 @@
<template>
<div>
<h3>{{ $t('Edit_Recipe') }}</h3>
<loading-spinner :size="25" v-if="!recipe"></loading-spinner>
<div v-if="recipe !== undefined">
<div class="row">
<div class="col-md-12">
<label for="id_name"> {{ $t('Name') }}</label>
<input class="form-control" id="id_name" v-model="recipe.name">
</div>
</div>
<div class="row pt-2">
<div class="col-12">
<label for="id_description">
{{ $t('Description') }}
</label>
<textarea id="id_description" class="form-control" v-model="recipe.description"
maxlength="512"></textarea>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6" style="max-height: 50vh">
<input id="id_file_upload" ref="file_upload" type="file" hidden @change="uploadImage($event.target.files[0])">
<div class="h-100 w-100 border border-primary rounded"
style="border-width: 2px!important; border-style: dashed!important;"
@drop.prevent="uploadImage($event.dataTransfer.files[0])"
@dragover.prevent
@click="($refs.file_upload).click()">
<i class="far fa-image fa-10x text-primary"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="!recipe.image"></i>
<img :src="recipe.image" id="id_image"
class="img img-fluid img-responsive"
style="object-fit: cover; height: 100%" v-if="recipe.image">
</div>
<button style="bottom:10px;left:30px;position: absolute;" class="btn btn-danger" @click="deleteImage"
v-if="recipe.image">{{ $t('Delete') }}
</button>
</div>
<div class="col-md-6">
<label for="id_name"> {{ $t('Preparation') }} {{ $t('Time') }}</label>
<input class="form-control" id="id_prep_time" v-model="recipe.working_time">
<br/>
<label for="id_name"> {{ $t('Waiting') }} {{ $t('Time') }}</label>
<input class="form-control" id="id_wait_time" v-model="recipe.waiting_time">
<br/>
<label for="id_name"> {{ $t('Servings') }}</label>
<input class="form-control" id="id_servings" v-model="recipe.servings">
<br/>
<label for="id_name"> {{ $t('Servings') }} {{ $t('Text') }}</label>
<input class="form-control" id="id_servings_text" v-model="recipe.servings_text" maxlength="32">
<br/>
<label for="id_name"> {{ $t('Keywords') }}</label>
<multiselect
v-model="recipe.keywords"
:options="keywords"
:close-on-select="false"
:clear-on-select="true"
:hide-selected="true"
:preserve-search="true"
placeholder="Select Keyword"
tag-placeholder="Add Keyword"
:taggable="true"
@tag="addKeyword"
label="label"
track-by="id"
id="id_keywords"
:multiple="true"
:loading="keywords_loading"
@search-change="searchKeywords">
</multiselect>
</div>
</div>
<template v-if="recipe !== undefined">
<div class="row pt-2">
<div class="col-md-12">
<div class="card border-grey">
<div class="card-header" style="display: table">
<div class="row">
<div class="col-md-9 d-table">
<h5 class="d-table-cell align-middle">{{ $t('Nutrition') }}</h5>
</div>
<div class="col-md-3">
<button type="button" @click="addNutrition()"
class="btn btn-sm btn-light shadow-none float-right" v-b-toggle.id_nutrition_collapse
v-if="recipe.nutrition === null"><i class="fas fa-plus-circle"></i>
</button>
<button type="button" @click="removeNutrition()" v-if="recipe.nutrition !== null"
v-b-toggle.id_nutrition_collapse
class="btn btn-sm btn-light shadow-none float-right"><i class="fas fa-minus-circle"></i>
</button>
</div>
</div>
</div>
<b-collapse id="id_nutrition_collapse" class="mt-2">
<div class="card-body " v-if="recipe.nutrition">
<label for="id_name"> {{ $t('Calories') }}</label>
<input class="form-control" id="id_calories" v-model="recipe.nutrition.calories">
<label for="id_name"> {{ $t('Carbohydrates') }}</label>
<input class="form-control" id="id_carbohydrates" v-model="recipe.nutrition.carbohydrates">
<label for="id_name"> {{ $t('Fats') }}</label>
<input class="form-control" id="id_fats" v-model="recipe.nutrition.fats">
<label for="id_name"> {{ $t('Proteins') }}</label>
<input class="form-control" id="id_proteins" v-model="recipe.nutrition.proteins">
</div>
</b-collapse>
</div>
</div>
</div>
</template>
<draggable :list="recipe.steps" group="steps"
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
<div v-for="(step, step_index) in recipe.steps" style="margin-top: 1vh" class="card" v-bind:key="step_index">
<div class="card-body" :id="`id_card_step_${step_index}`">
<div class="row">
<div class="col-11">
<h4 class="handle" :id="'id_step_' + step_index">
<i class="fas fa-paragraph" v-if="step.type === 'TEXT'"></i>
<i class="fas fa-clock" v-if="step.type === 'TIME'"></i>
<template v-if="step.name !== ''">{{ step.name }}</template>
<template v-else>{{ $t('Step') }} {{ step_index + 1 }}</template>
</h4>
</div>
<div class="col-1" style="text-align: right">
<a class="btn shadow-none btn-lg" href="#" role="button"
id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-ellipsis-v text-muted"></i>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuLink">
<button class="dropdown-item" @click="removeStep(step)"><i
class="fa fa-trash fa-fw"></i> {{ $t('Delete') }}
</button>
<button type="button" class="dropdown-item"
v-if="!step.show_as_header"
@click="step.show_as_header = true"><i
class="fas fa-eye fa-fw"></i> {{ $t('Show_as_header') }}
</button>
<button type="button" class="dropdown-item"
v-if="step.show_as_header"
@click="step.show_as_header = false"><i
class="fas fa-eye-slash fa-fw"></i> {{ $t('Hide_as_header') }}
</button>
<button class="dropdown-item" @click="moveStep(step, (step_index - 1))"
v-if="step_index > 0">
<i class="fa fa-arrow-up fa-fw"></i> {{ $t('Move_Up') }}
</button>
<button class="dropdown-item"
@click="moveStep(step, (step_index + 1))"
v-if="step_index !== (recipe.steps.length - 1)">
<i class="fa fa-arrow-down fa-fw"></i> {{ $t('Move_Down') }}
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<label :for="'id_step_' + step.id + 'name'">{{ $t('Step_Name') }}</label>
<input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
</div>
<div class="col-md-4">
<label for="id_type"> {{ $t('Step_Type') }}</label>
<select class="form-control" id="id_type" v-model="step.type">
<option value="TEXT">{{ $t('Text') }}</option>
<option value="TIME">{{ $t('Time') }}</option>
<option value="FILE">{{ $t('File') }}</option>
<option value="RECIPE">{{ $t('Recipe') }}</option>
</select>
</div>
</div>
<div class="row" style="margin-top: 12px">
<div class="col-md-3">
<label :for="'id_step_' + step.id + '_time'">{{ $t('step_time_minutes') }}</label>
<input class="form-control" v-model="step.time"
:id="'id_step_' + step.id + '_time'">
</div>
<div class="col-md-9" v-if="step.type === 'FILE'">
<label :for="'id_step_' + step.id + '_file'">{{ $t('File') }}</label>
<multiselect
ref="file"
v-model="step.file"
:options="files"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="Select File"
select-label="Select"
:id="'id_step_' + step.id + '_file'"
label="name"
track-by="name"
:multiple="false"
:loading="files_loading"
@search-change="searchFiles">
</multiselect>
</div>
<div class="col-md-9" v-if="step.type === 'RECIPE'">
<label :for="'id_step_' + step.id + '_recipe'">{{ $t('Recipe') }}</label>
<multiselect
ref="step_recipe"
v-model="step.step_recipe"
:options="recipes.map(recipe => recipe.id)"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="Select Recipe"
select-label="Select"
:id="'id_step_' + step.id + '_recipe'"
:custom-label="opt => recipes.find(x => x.id === opt).name"
:multiple="false"
:loading="recipes_loading"
@search-change="searchRecipes">
</multiselect>
</div>
</div>
<template v-if="step.type === 'TEXT'">
<div class="row" style="margin-top: 12px">
<div class="col-md-12">
<div class="jumbotron" style="padding: 16px">
<div class="row">
<div class="col-md-12">
<h4>{{ $t('Ingredients') }}</h4>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin-top: 8px">
<draggable :list="step.ingredients" group="ingredients"
:empty-insert-threshold="10" handle=".handle"
@sort="sortIngredients(step)">
<div v-for="(ingredient, index) in step.ingredients"
:key="ingredient.id">
<hr class="d-md-none"/>
<div class="d-flex">
<div class="flex-grow-0 handle align-self-start">
<button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v "></i></button>
</div>
<div class="flex-fill row"
style="margin-left: 4px; margin-right: 4px">
<div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header">
<input class="form-control"
v-model="ingredient.amount"
type="number" step="any"
v-if="!ingredient.no_amount"
:id="`amount_${step_index}_${index}`">
</div>
<div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header">
<multiselect
v-if="!ingredient.no_amount"
ref="unit"
v-model="ingredient.unit"
:options="units"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="Select Unit"
tag-placeholder="Create"
select-label="Select"
:taggable="true"
@tag="addUnitType"
:id="`unit_${step_index}_${index}`"
label="name"
track-by="name"
:multiple="false"
:loading="units_loading"
@search-change="searchUnits">
</multiselect>
</div>
<div class="col-lg-4 col-md-6 small-padding"
v-if="!ingredient.is_header">
<multiselect
ref="food"
v-model="ingredient.food"
:options="foods"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="Select Food"
tag-placeholder="Create"
select-label="Select"
:taggable="true"
@tag="addFoodType"
:id="`ingredient_${step_index}_${index}`"
label="name"
track-by="name"
:multiple="false"
:loading="foods_loading"
@search-change="searchFoods">
</multiselect>
</div>
<div class="small-padding"
v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
<input class="form-control"
v-model="ingredient.note"
v-bind:placeholder="$t('Note')">
</div>
</div>
<div class="flex-grow-0 small-padding">
<a class="btn shadow-none btn-lg" href="#" role="button"
id="dropdownMenuLink2"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-ellipsis-v text-muted"></i>
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuLink2">
<button type="button" class="dropdown-item"
@click="removeIngredient(step, ingredient)">
<i
class="fa fa-trash fa-fw"></i> {{ $t('Delete') }}
</button>
<button type="button" class="dropdown-item"
v-if="!ingredient.is_header "
@click="ingredient.is_header = true"><i
class="fas fa-heading fa-fw"></i> {{ $t('Make_header') }}
</button>
<button type="button" class="dropdown-item"
v-if="ingredient.is_header "
@click="ingredient.is_header = false"><i
class="fas fa-leaf fa-fw"></i> {{ $t('Make_Ingredient') }}
</button>
<button type="button" class="dropdown-item"
v-if="!ingredient.no_amount "
@click="ingredient.no_amount = true"><i
class="fas fa-balance-scale-right fa-fw"></i> {{ $t('Disable_Amount') }}
</button>
<button type="button" class="dropdown-item"
v-if="ingredient.no_amount "
@click="ingredient.no_amount = false"><i
class="fas fa-balance-scale-right fa-fw"></i> {{ $t('Enable_Amount') }}
</button>
<button type="button" class="dropdown-item"
@click="copyTemplateReference(index, ingredient)">
<i class="fas fa-code"></i> {{ $t('Copy_template_reference') }}
</button>
</div>
</div>
</div>
</div>
</draggable>
</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-5"
style="text-align: center; margin-top: 8px;">
<button class="btn btn-success btn-block" @click="addIngredient(step)"><i
class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<div class="row">
<div class="col-md-12">
<label :for="'id_instruction_' + step.id">{{ $t('Instructions') }}</label>
<v-md-editor
v-model="step.instruction"
height="30vh"
left-toolbar="undo redo | h bold italic strikethrough quote | ul ol table hr | link image code"
right-toolbar="preview sync-scroll fullscreen"
:id="'id_instruction_' + step.id"
mode="edit"
></v-md-editor>
<!-- TODO markdown DOCS link and markdown editor -->
</div>
</div>
</div>
</div>
</draggable>
<div class="row pt-2">
<div class="col-md-12 text-center">
<button type="button" @click="addStep()"
class="btn btn-success shadow-none ">{{ $t('Add_Step') }}
</button>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row fixed-bottom p-2 b-2 border-top text-center" style="background:white;"
v-if="recipe !== undefined">
<div class="col-md-3 col-6">
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
class="btn btn-block btn-danger shadow-none">{{ $t('Delete') }}</a>
</div>
<div class="col-md-3 col-6">
<a :href="resolveDjangoUrl('view_recipe', recipe.id)">
<button class="btn btn-block btn-primary shadow-none">{{ $t('View') }}</button>
</a>
</div>
<div class="col-md-3 col-6">
<button type="button" @click="updateRecipe(false)"
class="btn btn-sm btn-block btn-info shadow-none">{{ $t('Save') }}
</button>
</div>
<div class="col-md-3 col-6">
<button type="button" @click="updateRecipe(true)"
class="btn btn-sm btn-block btn-success shadow-none">{{ $t('Save_and_View') }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import draggable from 'vuedraggable'
import {ApiMixin, resolveDjangoUrl, ResolveUrlMixin, StandardToasts} from "@/utils/utils";
import Multiselect from "vue-multiselect";
import {ApiApiFactory} from "@/utils/openapi/api";
import LoadingSpinner from "@/components/LoadingSpinner";
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
import enUS from '@kangc/v-md-editor/lib/lang/en-US';
VueMarkdownEditor.lang.use('en-US', enUS);
Vue.use(VueMarkdownEditor);
Vue.use(BootstrapVue)
export default {
name: 'RecipeSearchView',
mixins: [ResolveUrlMixin, ApiMixin],
components: {Multiselect, LoadingSpinner, draggable},
data() {
return {
recipe_id: window.RECIPE_ID,
recipe: undefined,
recipe_changed: undefined,
keywords: [],
keywords_loading: false,
foods: [],
foods_loading: false,
units: [],
units_loading: false,
files: [],
files_loading: false,
recipes: [],
recipes_loading: false,
message: '',
}
},
computed: {},
mounted() {
this.loadRecipe()
this.searchUnits('')
this.searchFoods('')
this.searchKeywords('')
this.searchFiles('')
this.searchRecipes('')
//TODO find out what this did and fix it
// this._keyListener = function (e) {
// if (e.code === "Space" && e.ctrlKey) {
// e.preventDefault(); // present "Save Page" from getting triggered.
//
// for (el of e.path) {
// if (el.id !== undefined && el.id.includes('id_card_step_')) {
// let step = this.recipe.steps[el.id.replace('id_card_step_', '')]
// this.addIngredient(step)
// }
// }
// }
// };
// document.addEventListener('keydown', this._keyListener.bind(this));
this.$i18n.locale = window.CUSTOM_LOCALE
},
created() {
window.addEventListener('beforeunload', this.warnPageLeave)
},
beforeUnmount() {
document.removeEventListener('keydown', this._keyListener);
},
watch: {
recipe: {
deep: true,
handler() {
this.recipe_changed = this.recipe_changed !== undefined;
}
}
},
methods: {
test: function (event) {
console.log(event)
},
warnPageLeave: function (event) {
if (this.recipe_changed) {
event.returnValue = ''
return ''
}
},
loadRecipe: function () {
let apiFactory = new ApiApiFactory()
apiFactory.retrieveRecipe(this.recipe_id).then(response => {
this.recipe = response.data;
this.loading = false
//TODO workaround function until view is properly refactored, loads name of selected sub recipe so the input can find its label
this.recipe.steps.forEach(s => {
if (s.step_recipe != null) {
this.recipes.push(s.step_recipe_data)
}
})
console.log('after step loop')
}).catch((err) => {
this.loading = false
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
updateRecipe: function (view_after) {
let apiFactory = new ApiApiFactory()
this.sortSteps()
for (let s of this.recipe.steps) {
this.sortIngredients(s)
}
apiFactory.updateRecipe(this.recipe_id, this.recipe,
{}).then((response) => {
console.log(response)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
this.recipe_changed = false
if (view_after) {
location.href = resolveDjangoUrl('view_recipe', this.recipe_id)
}
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
})
},
uploadImage: function (file) {
let apiClient = new ApiApiFactory()
if (file !== undefined) {
apiClient.imageRecipe(this.recipe.id, file).then(request => {
this.recipe.image = request.data.image
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
}).catch(err => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
console.log(err.request, err.response)
})
}
},
deleteImage: function () {
let apiClient = new ApiApiFactory()
apiClient.imageRecipe(this.recipe.id, undefined).then(request => {
this.recipe.image = null
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
}).catch(err => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
console.log(err.request, err.response)
})
},
addStep: function () { //TODO see if default can be generated from options request
this.recipe.steps.push(
{'instruction': '', ingredients: [], type: 'TEXT', show_as_header: true}
)
},
sortSteps: function () {
this.recipe.steps.forEach(function (element, index) {
element.order = index
});
},
sortIngredients: function (step) {
step.ingredients.forEach(function (element, index) {
element.order = index
});
},
addIngredient: function (step) { //TODO see if default can be generated from options request
step.ingredients.push({
'food': null,
'unit': {
'name': '{{request.user.userpreference.default_unit}}'
},
'amount': 0,
'note': '',
'order': 0,
'is_header': false,
'no_amount': false
})
this.sortIngredients(step)
this.$nextTick(() => document.getElementById(`amount_${this.recipe.steps.indexOf(step)}_${step.ingredients.length - 1}`).focus())
},
removeIngredient: function (step, ingredient) {
if (confirm(this.$t('confirm_delete', {object: this.$t('Ingredient')}))) {
step.ingredients = step.ingredients.filter(item => item !== ingredient)
}
},
removeStep: function (step) {
if (confirm(this.$t('confirm_delete', {object: this.$t('Step')}))) {
this.recipe.steps = this.recipe.steps.filter(item => item !== step)
}
},
moveStep: function (step, new_index) {
this.recipe.steps.splice(this.recipe.steps.indexOf(step), 1);
this.recipe.steps.splice((new_index < 0 ? 0 : new_index), 0, step);
this.sortSteps()
},
addFoodType: function (tag, index) {
let [tmp, step, id] = index.split('_')
let new_food = this.recipe.steps[step].ingredients[id]
new_food.food = {'name': tag}
this.foods.push(new_food.food)
this.recipe.steps[step].ingredients[id] = new_food
},
addUnitType: function (tag, index) {
let [tmp, step, id] = index.split('_')
let new_unit = this.recipe.steps[step].ingredients[id]
new_unit.unit = {'name': tag}
this.units.push(new_unit.unit)
this.recipe.steps[step].ingredients[id] = new_unit
},
addKeyword: function (tag) {
let new_keyword = {'label': tag, 'name': tag}
this.recipe.keywords.push(new_keyword)
},
searchKeywords: function (query) {
let apiFactory = new ApiApiFactory()
this.keywords_loading = true
apiFactory.listKeywords(query).then((response) => {
this.keywords = response.data.results;
this.keywords_loading = false
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
searchFiles: function (query) {
let apiFactory = new ApiApiFactory()
this.files_loading = true
apiFactory.listUserFiles({query: {query: query}}).then((response) => {
this.files = response.data
this.files_loading = false
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
searchRecipes: function (query) {
this.recipes_loading = true
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, {query: query}).then(result => {
this.recipes = result.data.results
this.recipes_loading = false
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
searchUnits: function (query) {
let apiFactory = new ApiApiFactory()
this.units_loading = true
apiFactory.listUnits(query).then((response) => {
this.units = response.data.results;
if (this.recipe !== undefined) {
for (let s of this.recipe.steps) {
for (let i of s.ingredients) {
if (i.unit !== null && i.unit.id === undefined) {
this.units.push(i.unit)
}
}
}
}
this.units_loading = false
}).catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
searchFoods: function (query) {
let apiFactory = new ApiApiFactory()
this.foods_loading = true
apiFactory.listFoods(query).then((response) => {
this.foods = response.data.results
if (this.recipe !== undefined) {
for (let s of this.recipe.steps) {
for (let i of s.ingredients) {
if (i.food !== null && i.food.id === undefined) {
this.foods.push(i.food)
}
}
}
}
this.foods_loading = false
}).catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
scrollToStep: function (step_index) {
document.getElementById('id_step_' + step_index).scrollIntoView({behavior: 'smooth'});
},
addNutrition: function () {
this.recipe.nutrition = {}
},
removeNutrition: function () {
this.recipe.nutrition = null
},
copyTemplateReference: function (index, ingredient) {
const el = document.createElement('textarea');
let tag = `\u007B\u007B ingredients[${index}] \u007D\u007D`;
if (ingredient.food !== null) {
tag += `\u007B# ${ingredient.food.name} #\u007D`
}
el.value = tag
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
.small-padding {
padding-left: 2px;
padding-right: 2px;
margin-top: 2px;
}
</style>

10
vue/src/apps/RecipeEditView/main.js Normal file
View File

@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './RecipeEditView'
import i18n from '@/i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')

22
vue/src/locales/en.json
View File

@ -7,6 +7,8 @@
"success_creating_resource": "Successfully created a resource!",
"success_updating_resource": "Successfully updated a resource!",
"success_deleting_resource": "Successfully deleted a resource!",
"step_time_minutes": "Step time in minutes",
"confirm_delete": "Are you sure you want to delete this {object}?",
"import_running": "Import running, please wait!",
"all_fields_optional": "All fields are optional and can be left empty.",
@ -21,6 +23,10 @@
"Step_start_time": "Step start time",
"Sort_by_new": "Sort by new",
"Recipes_per_page": "Recipes per Page",
"Show_as_header": "Show as header",
"Hide_as_header": "Hide as header",
"Copy_template_reference": "Copy template reference",
"Save_and_View": "Save & View",
"Manage_Books": "Manage Books",
"Meal_Plan": "Meal Plan",
@ -37,10 +43,20 @@
"New_Keyword": "New Keyword",
"Delete_Keyword": "Delete Keyword",
"Edit_Keyword": "Edit Keyword",
"Edit_Recipe": "Edit Recipe",
"Move_Keyword": "Move Keyword",
"Merge_Keyword": "Merge Keyword",
"Hide_Keywords": "Hide Keywords",
"Hide_Recipes": "Hide Recipes",
"Move_Up": "Move up",
"Move_Down": "Move down",
"Step_Name": "Step Name",
"Step_Type": "Step Type",
"Make_Header": "Make_Header",
"Make_Ingredient": "Make_Ingredient",
"Enable_Amount": "Enable Amount",
"Disable_Amount": "Disable Amount",
"Add_Step": "Add Step",
"Keywords": "Keywords",
"Books": "Books",
@ -59,6 +75,7 @@
"Link": "Link",
"Add": "Add",
"New": "New",
"Note": "Note",
"Success": "Success",
"Failure": "Failure",
"Ingredients": "Ingredients",
@ -131,5 +148,8 @@
"Create_New_Keyword": "Add New Keyword",
"Create_New_Unit": "Add New Unit",
"and_up": "& Up",
"Unrated": "Unrated"
"Instructions": "Instructions",
"Unrated": "Unrated",
"Time": "Time",
"Text": "Text"
}

8
vue/vue.config.js
View File

@ -29,10 +29,14 @@ const pages = {
entry: './src/apps/ModelListView/main.js',
chunks: ['chunk-vendors']
},
'edit_internal_recipe': {
entry: './src/apps/RecipeEditView/main.js',
chunks: ['chunk-vendors']
},
'cookbook_view': {
entry: './src/apps/CookbookView/main.js',
chunks: ['chunk-vendors']
},
}
}
module.exports = {
@ -112,4 +116,4 @@ module.exports = {
.headers({"Access-Control-Allow-Origin": ["*"]})
}
};
};

95
vue/webpack-stats.json
View File

@ -1,137 +1,130 @@
{
"status": "done",
"assets": {
"../../templates/sw.js": {
"name": "../../templates/sw.js",
"path": "..\\..\\templates\\sw.js"
},
"css/chunk-vendors.css": {
"name": "css/chunk-vendors.css",
"path": "css\\chunk-vendors.css"
},
"js/chunk-vendors.js": {
"name": "js/chunk-vendors.js",
"path": "js\\chunk-vendors.js"
"path": "js\\chunk-vendors.js",
"publicPath": "http://localhost:8080/js/chunk-vendors.js"
},
"css/cookbook_view.css": {
"name": "css/cookbook_view.css",
"path": "css\\cookbook_view.css"
},
"js/cookbook_view.js": {
"name": "js/cookbook_view.js",
"path": "js\\cookbook_view.js"
"js/edit_internal_recipe.js": {
"name": "js/edit_internal_recipe.js",
"path": "js\\edit_internal_recipe.js",
"publicPath": "http://localhost:8080/js/edit_internal_recipe.js"
},
"js/import_response_view.js": {
"name": "js/import_response_view.js",
"path": "js\\import_response_view.js"
},
"css/model_list_view.css": {
"name": "css/model_list_view.css",
"path": "css\\model_list_view.css"
"path": "js\\import_response_view.js",
"publicPath": "http://localhost:8080/js/import_response_view.js"
},
"js/model_list_view.js": {
"name": "js/model_list_view.js",
"path": "js\\model_list_view.js"
"path": "js\\model_list_view.js",
"publicPath": "http://localhost:8080/js/model_list_view.js"
},
"js/offline_view.js": {
"name": "js/offline_view.js",
"path": "js\\offline_view.js"
"path": "js\\offline_view.js",
"publicPath": "http://localhost:8080/js/offline_view.js"
},
"js/recipe_search_view.js": {
"name": "js/recipe_search_view.js",
"path": "js\\recipe_search_view.js"
"path": "js\\recipe_search_view.js",
"publicPath": "http://localhost:8080/js/recipe_search_view.js"
},
"js/recipe_view.js": {
"name": "js/recipe_view.js",
"path": "js\\recipe_view.js"
"path": "js\\recipe_view.js",
"publicPath": "http://localhost:8080/js/recipe_view.js"
},
"js/supermarket_view.js": {
"name": "js/supermarket_view.js",
"path": "js\\supermarket_view.js"
"path": "js\\supermarket_view.js",
"publicPath": "http://localhost:8080/js/supermarket_view.js"
},
"js/user_file_view.js": {
"name": "js/user_file_view.js",
"path": "js\\user_file_view.js"
"path": "js\\user_file_view.js",
"publicPath": "http://localhost:8080/js/user_file_view.js"
},
"recipe_search_view.html": {
"name": "recipe_search_view.html",
"path": "recipe_search_view.html"
"path": "recipe_search_view.html",
"publicPath": "http://localhost:8080/recipe_search_view.html"
},
"recipe_view.html": {
"name": "recipe_view.html",
"path": "recipe_view.html"
"path": "recipe_view.html",
"publicPath": "http://localhost:8080/recipe_view.html"
},
"offline_view.html": {
"name": "offline_view.html",
"path": "offline_view.html"
"path": "offline_view.html",
"publicPath": "http://localhost:8080/offline_view.html"
},
"import_response_view.html": {
"name": "import_response_view.html",
"path": "import_response_view.html"
"path": "import_response_view.html",
"publicPath": "http://localhost:8080/import_response_view.html"
},
"supermarket_view.html": {
"name": "supermarket_view.html",
"path": "supermarket_view.html"
"path": "supermarket_view.html",
"publicPath": "http://localhost:8080/supermarket_view.html"
},
"user_file_view.html": {
"name": "user_file_view.html",
"path": "user_file_view.html"
"path": "user_file_view.html",
"publicPath": "http://localhost:8080/user_file_view.html"
},
"model_list_view.html": {
"name": "model_list_view.html",
"path": "model_list_view.html"
"path": "model_list_view.html",
"publicPath": "http://localhost:8080/model_list_view.html"
},
"cookbook_view.html": {
"name": "cookbook_view.html",
"path": "cookbook_view.html"
"edit_internal_recipe.html": {
"name": "edit_internal_recipe.html",
"path": "edit_internal_recipe.html",
"publicPath": "http://localhost:8080/edit_internal_recipe.html"
},
"manifest.json": {
"name": "manifest.json",
"path": "manifest.json"
"path": "manifest.json",
"publicPath": "http://localhost:8080/manifest.json"
}
},
"chunks": {
"recipe_search_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/recipe_search_view.js"
],
"recipe_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/recipe_view.js"
],
"offline_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/offline_view.js"
],
"import_response_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/import_response_view.js"
],
"supermarket_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/supermarket_view.js"
],
"user_file_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"js/user_file_view.js"
],
"model_list_view": [
"css/chunk-vendors.css",
"js/chunk-vendors.js",
"css/model_list_view.css",
"js/model_list_view.js"
],
"cookbook_view": [
"css/chunk-vendors.css",
"edit_internal_recipe": [
"js/chunk-vendors.js",
"css/cookbook_view.css",
"js/cookbook_view.js"
"js/edit_internal_recipe.js"
]
}
},
"publicPath": "http://localhost:8080/"
}