fix(frontend): 🐛 fix section titles carrying over on deleted items (#765)

* fix(frontend): 🐛 fix section titles carrying over on deleted items

Added a UUID generator to generate unique id's and prevent list changes from causing proper virtual dom re-renders.

* lazy load json editor

* fix ingredient rendering error

* move text to input

* update settings styling

* improve mobile view

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue

@@ -8,50 +8,71 @@
       </template>
 
       <v-card>
-        <v-card-title class="headline"> {{ $t("new-recipe.bulk-add") }} </v-card-title>
+        <v-app-bar dark color="primary" class="mt-n1 mb-3">
+          <v-icon large left>
+            {{ $globals.icons.createAlt }}
+          </v-icon>
+          <v-toolbar-title class="headline"> {{ $t("new-recipe.bulk-add") }}</v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-app-bar>
 
         <v-card-text>
-          <p>
-            {{ $t("new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list") }}
-          </p>
-          <v-textarea v-model="inputText"> </v-textarea>
+          <v-textarea
+            v-model="inputText"
+            outlined
+            rows="10"
+            :placeholder="$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')"
+          >
+          </v-textarea>
+          <v-btn outlined color="info" small @click="trimAllLines"> Trim Whitespace </v-btn>
         </v-card-text>
 
         <v-divider></v-divider>
 
         <v-card-actions>
+          <BaseButton cancel @click="dialog = false"> </BaseButton>
           <v-spacer></v-spacer>
-          <v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
+          <BaseButton save color="success" @click="save"> </BaseButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { reactive, toRefs } from "@nuxtjs/composition-api";
 export default {
-  data() {
-    return {
+  setup(_, context) {
+    const state = reactive({
       dialog: false,
       inputText: "",
-    };
-  },
-  methods: {
-    splitText() {
-      const split = this.inputText.split("\n");
+    });
 
-      split.forEach((element, index) => {
-        if ((element === "\n") | (element === false)) {
-          split.splice(index, 1);
-        }
+    function splitText() {
+      return state.inputText.split("\n").filter((line) => !(line === "\n" || !line));
+    }
+
+    function trimAllLines() {
+      const splitLintes = splitText();
+
+      splitLintes.forEach((element: string, index: number) => {
+        splitLintes[index] = element.trim();
       });
 
-      return split;
-    },
-    save() {
-      this.$emit("bulk-data", this.splitText());
-      this.dialog = false;
-    },
+      state.inputText = splitLintes.join("\n");
+    }
+
+    function save() {
+      context.emit("bulk-data", splitText());
+      state.dialog = false;
+    }
+
+    return {
+      splitText,
+      trimAllLines,
+      save,
+      ...toRefs(state),
+    };
   },
 };
 </script>