Refactor ingredient-parser component to include draggable functionality

frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue

@@ -48,6 +48,12 @@
       </div>
 
       <v-expansion-panels v-model="panels" multiple>
+        <draggable
+          v-if="parsedIng.length > 0"
+          v-model="parsedIng"
+          handle=".handle"
+          :style="{ width: '100%' }"
+        >
           <v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
             <v-expansion-panel-header class="my-0 py-0" disable-icon-rotate>
               <template #default="{ open }">
@@ -88,6 +94,7 @@
               </v-card-actions>
             </v-expansion-panel-content>
           </v-expansion-panel>
+        </draggable>
       </v-expansion-panels>
     </v-container>
   </v-container>
@@ -96,6 +103,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
+import draggable from "vuedraggable";
 import {
   CreateIngredientFood,
   CreateIngredientUnit,
@@ -122,6 +130,7 @@ interface Error {
 export default defineComponent({
   components: {
     RecipeIngredientEditor,
+    draggable
   },
   setup() {
     const { $auth } = useContext();