collapse steps on check (#609)

* collapse steps on check

* add grad-and-drop reorder of steps

* fix-title bar

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

frontend/src/components/Recipe/Parts/Instructions.vue

@@ -2,6 +2,14 @@
   <div>
     <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
     <div>
+      <draggable
+        :disabled="!edit"
+        :value="value"
+        @input="updateIndex"
+        @start="drag = true"
+        @end="drag = false"
+        handle=".handle"
+      >
         <div v-for="(step, index) in value" :key="index">
           <v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
             <v-toolbar-title class="headline" v-if="!edit">
@@ -22,12 +30,12 @@
           <v-hover v-slot="{ hover }">
             <v-card
               class="ma-1"
-            :class="[{ 'on-hover': hover }, isDisabled(index)]"
+              :class="[{ 'on-hover': hover }, isChecked(index)]"
               :elevation="hover ? 12 : 2"
               :ripple="!edit"
               @click="toggleDisabled(index)"
             >
-            <v-card-title>
+              <v-card-title :class="{ 'pb-0': !isChecked(index) }">
                 <v-btn
                   v-if="edit"
                   fab
@@ -39,10 +47,19 @@
                 >
                   <v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
+
                 {{ $t("recipe.step-index", { step: index + 1 }) }}
+
+                <v-fade-transition>
+                  <v-icon v-if="isChecked(index)" size="24" class="ml-auto" color="success">
+                    {{ $globals.icons.checkboxMarkedCircle }}
+                  </v-icon>
+                </v-fade-transition>
+
                 <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
-                {{ !showTitleEditor[index] ? $t('recipe.insert-section') : $t('recipe.remove-section') }}
+                  {{ !showTitleEditor[index] ? $t("recipe.insert-section") : $t("recipe.remove-section") }}
                 </v-btn>
+                <v-icon v-if="edit" class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
               </v-card-title>
               <v-card-text v-if="edit">
                 <v-textarea
@@ -54,22 +71,29 @@
                 >
                 </v-textarea>
               </v-card-text>
-            <v-card-text v-else>
+              <v-expand-transition>
+                <div class="m-0 p-0" v-if="!isChecked(index) && !edit">
+                  <v-card-text>
                     <vue-markdown :source="step.text"> </vue-markdown>
                   </v-card-text>
+                </div>
+              </v-expand-transition>
             </v-card>
           </v-hover>
         </div>
+      </draggable>
     </div>
   </div>
 </template>
 
 <script>
+import draggable from "vuedraggable";
 import VueMarkdown from "@adapttive/vue-markdown";
 import { utils } from "@/utils";
 export default {
   components: {
     VueMarkdown,
+    draggable,
   },
   props: {
     value: {
@@ -96,8 +120,9 @@ export default {
     value: {
       handler() {
         this.disabledSteps = [];
-      }
+        this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
-    }
+      },
+    },
   },
 
   methods: {
@@ -121,7 +146,7 @@ export default {
         this.disabledSteps.push(stepIndex);
       }
     },
-    isDisabled(stepIndex) {
+    isChecked(stepIndex) {
       if (this.disabledSteps.includes(stepIndex) && !this.edit) {
         return "disabled-card";
       } else {
@@ -135,8 +160,11 @@ export default {
       }
       this.$set(this.showTitleEditor, index, newVal);
     },
+    updateIndex(data) {
+      this.$emit("input", data);
+    },
   },
 };
 </script>
 
-<style scoped></style>
+