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

# Conflicts:
#	vue/vue.config.js
#	vue/webpack-stats.json

cookbook/templates/edit_internal_recipe_v2.html

@@ -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 %}

cookbook/views/api.py

@@ -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(
+        serializer = self.serializer_class(obj, data=request.data, partial=True)
-            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)
+            if serializer.validated_data == {}:
-            obj.image = File(img, name=f'{uuid.uuid4()}_{obj.pk}{filetype}')
+                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)

cookbook/views/edit.py

@@ -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}
     )
 
 

vue/package.json

@@ -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",

vue/src/apps/RecipeEditView/RecipeEditView.vue

@@ -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>

vue/src/apps/RecipeEditView/main.js

@@ -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')

vue/src/locales/en.json

@@ -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"
 }

vue/vue.config.js

@@ -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": ["*"]})
 
     }
-};
+};

vue/webpack-stats.json

@@ -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": {
+    "js/edit_internal_recipe.js": {
-      "name": "css/cookbook_view.css",
+      "name": "js/edit_internal_recipe.js",
-      "path": "css\\cookbook_view.css"
+      "path": "js\\edit_internal_recipe.js",
-    },
+      "publicPath": "http://localhost:8080/js/edit_internal_recipe.js"
-    "js/cookbook_view.js": {
-      "name": "js/cookbook_view.js",
-      "path": "js\\cookbook_view.js"
     },
     "js/import_response_view.js": {
       "name": "js/import_response_view.js",
-      "path": "js\\import_response_view.js"
+      "path": "js\\import_response_view.js",
-    },
+      "publicPath": "http://localhost:8080/js/import_response_view.js"
-    "css/model_list_view.css": {
-      "name": "css/model_list_view.css",
-      "path": "css\\model_list_view.css"
     },
     "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": {
+    "edit_internal_recipe.html": {
-      "name": "cookbook_view.html",
+      "name": "edit_internal_recipe.html",
-      "path": "cookbook_view.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": [
+    "edit_internal_recipe": [
-      "css/chunk-vendors.css",
       "js/chunk-vendors.js",
-      "css/cookbook_view.css",
+      "js/edit_internal_recipe.js"
-      "js/cookbook_view.js"
     ]
-  }
+  },
+  "publicPath": "http://localhost:8080/"
 }