From 0c6827d5a94b98b607b69ab67ba0d008a5a1f789 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 21 Apr 2021 14:49:29 -0800
Subject: [PATCH] refactor/code-cleanup

---
 .../Admin/General/HomePageSettings.vue        |  4 +-
 .../components/Recipe/RecipeEditor/index.vue  | 86 ++++++-------------
 frontend/src/mixins/validators.js             | 12 ++-
 3 files changed, 39 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/Admin/General/HomePageSettings.vue b/frontend/src/components/Admin/General/HomePageSettings.vue
index dba8ef290..7c7f38fac 100644
--- a/frontend/src/components/Admin/General/HomePageSettings.vue
+++ b/frontend/src/components/Admin/General/HomePageSettings.vue
@@ -119,10 +119,10 @@
     <v-card-text>
       <h2 class="mt-1 mb-4">{{ $t("settings.locale-settings") }}</h2>
       <v-row>
-        <v-col cols="3">
+        <v-col cols="12" md="3" sm="12">
           <LanguageSelector @select-lang="writeLang" :site-settings="true" />
         </v-col>
-        <v-col sm="3">
+        <v-col cols="12" md="3" sm="12">
           <v-select
             dense
             prepend-icon="mdi-calendar-week-begin"
diff --git a/frontend/src/components/Recipe/RecipeEditor/index.vue b/frontend/src/components/Recipe/RecipeEditor/index.vue
index f4a8a3c1a..0f9c20f7b 100644
--- a/frontend/src/components/Recipe/RecipeEditor/index.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@@ -33,7 +33,7 @@
         class="my-3"
         :label="$t('recipe.recipe-name')"
         v-model="value.name"
-        :rules="[rules.required]"
+        :rules="[existsRule]"
       >
       </v-text-field>
       <v-textarea
@@ -94,7 +94,7 @@
                       class="mr-n1"
                       slot="prepend"
                       color="error"
-                      @click="removeIngredient(index)"
+                      @click="removeByIndex(value.recipeIngredient, index)"
                     >
                       mdi-delete
                     </v-icon>
@@ -107,7 +107,7 @@
           <v-btn color="secondary" fab dark small @click="addIngredient">
             <v-icon>mdi-plus</v-icon>
           </v-btn>
-          <BulkAdd @bulk-data="appendIngredients" />
+          <BulkAdd @bulk-data="addIngredient" />
 
           <h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
           <CategoryTagSelector
@@ -140,7 +140,7 @@
                   color="white"
                   class="mr-2"
                   elevation="0"
-                  @click="removeNote(index)"
+                  @click="removeByIndex(value.notes, index)"
                 >
                   <v-icon color="error">mdi-delete</v-icon>
                 </v-btn>
@@ -183,7 +183,7 @@
                     color="white"
                     class="mr-2"
                     elevation="0"
-                    @click="removeStep(index)"
+                    @click="removeByIndex(value.recipeInstructions, index)"
                   >
                     <v-icon size="24" color="error">mdi-delete</v-icon>
                   </v-btn>
@@ -218,6 +218,7 @@
 </template>
 
 <script>
+const UPLOAD_EVENT = "upload";
 import draggable from "vuedraggable";
 import utils from "@/utils";
 import BulkAdd from "./BulkAdd";
@@ -225,6 +226,7 @@ import ExtrasEditor from "./ExtrasEditor";
 import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
 import NutritionEditor from "./NutritionEditor";
 import ImageUploadBtn from "./ImageUploadBtn.vue";
+import { validators } from "@/mixins/validators";
 export default {
   components: {
     BulkAdd,
@@ -237,26 +239,20 @@ export default {
   props: {
     value: Object,
   },
+  mixins: [validators],
   data() {
     return {
       drag: false,
       fileObject: null,
-      rules: {
-        required: v => !!v || this.$i18n.t("recipe.key-name-required"),
-        whiteSpace: v =>
-          !v ||
-          v.split(" ").length <= 1 ||
-          this.$i18n.t("recipe.no-white-space-allowed"),
-      },
     };
   },
   methods: {
     uploadImage(fileObject) {
-      this.$emit("upload", fileObject);
+      this.$emit(UPLOAD_EVENT, fileObject);
     },
     toggleDisabled(stepIndex) {
       if (this.disabledSteps.includes(stepIndex)) {
-        let index = this.disabledSteps.indexOf(stepIndex);
+        const index = this.disabledSteps.indexOf(stepIndex);
         if (index !== -1) {
           this.disabledSteps.splice(index, 1);
         }
@@ -265,66 +261,40 @@ export default {
       }
     },
     isDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        return "disabled-card";
-      } else {
-        return;
-      }
+      return this.disabledSteps.includes(stepIndex) ? "disabled-card" : null;
     },
     generateKey(item, index) {
       return utils.generateUniqueKey(item, index);
     },
-
-    appendIngredients(ingredients) {
-      this.value.recipeIngredient.push(...ingredients);
-    },
-    addIngredient() {
-      let list = this.value.recipeIngredient;
-      list.push("");
-    },
-
-    removeIngredient(index) {
-      this.value.recipeIngredient.splice(index, 1);
+    addIngredient(ingredients = null) {
+      if (ingredients) {
+        this.value.recipeIngredient.push(...ingredients);
+      } else {
+        this.value.recipeIngredient.push("");
+      }
     },
 
     appendSteps(steps) {
-      let processSteps = [];
-      steps.forEach(element => {
-        processSteps.push({ text: element });
-      });
-
-      this.value.recipeInstructions.push(...processSteps);
+      this.value.recipeInstructions.push(
+        ...steps.map(x => ({
+          text: x,
+        }))
+      );
     },
     addStep() {
-      let list = this.value.recipeInstructions;
-      list.push({ text: "" });
+      this.value.recipeInstructions.push({ text: "" });
     },
-    removeStep(index) {
-      this.value.recipeInstructions.splice(index, 1);
-    },
-
     addNote() {
-      let list = this.value.notes;
-      list.push({ text: "" });
-    },
-    removeNote(index) {
-      this.value.notes.splice(index, 1);
-    },
-    removeCategory(index) {
-      this.value.recipeCategory.splice(index, 1);
-    },
-    removeTags(index) {
-      this.value.tags.splice(index, 1);
+      this.value.notes.push({ text: "" });
     },
     saveExtras(extras) {
       this.value.extras = extras;
     },
+    removeByIndex(list, index) {
+      list.splice(index, 1);
+    },
     validateRecipe() {
-      if (this.$refs.form.validate()) {
-        return true;
-      } else {
-        return false;
-      }
+      return this.$refs.form.validate();
     },
   },
 };
diff --git a/frontend/src/mixins/validators.js b/frontend/src/mixins/validators.js
index 4ba7e6eab..243af34d1 100644
--- a/frontend/src/mixins/validators.js
+++ b/frontend/src/mixins/validators.js
@@ -4,12 +4,18 @@ export const validators = {
       emailRule: v =>
         !v ||
         /^[^@\s]+@[^@\s.]+.[^@.\s]+$/.test(v) ||
-       this.$t('user.e-mail-must-be-valid'),
+        this.$t("user.e-mail-must-be-valid"),
 
-      existsRule: value => !!value || this.$t('general.field-required'),
+      existsRule: value => !!value || this.$t("general.field-required"),
 
       minRule: v =>
-        v.length >= 8 || this.$t('user.use-8-characters-or-more-for-your-password'),
+        v.length >= 8 ||
+        this.$t("user.use-8-characters-or-more-for-your-password"),
+
+      whiteSpace: v =>
+        !v ||
+        v.split(" ").length <= 1 ||
+        this.$t("recipe.no-white-space-allowed"),
     };
   },
 };