From 74b1e6236b73cc1997242402b7d757b8f1cfb566 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 1 Jul 2021 17:44:46 -0800
Subject: [PATCH] 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>
---
 .../components/Recipe/Parts/Instructions.vue  | 158 +++++++++++-------
 1 file changed, 93 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/Recipe/Parts/Instructions.vue b/frontend/src/components/Recipe/Parts/Instructions.vue
index 35f5dd66d291..8bd05a4f91b0 100644
--- a/frontend/src/components/Recipe/Parts/Instructions.vue
+++ b/frontend/src/components/Recipe/Parts/Instructions.vue
@@ -2,74 +2,98 @@
   <div>
     <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
     <div>
-      <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">
-            <v-app-bar-title v-text="step.title"> </v-app-bar-title>
-          </v-toolbar-title>
-          <v-text-field
-            v-if="edit"
-            class="headline pa-0 mt-5"
-            v-model="step.title"
-            dense
-            solo
-            flat
-            :placeholder="$t('recipe.section-title')"
-            background-color="primary"
-          >
-          </v-text-field>
-        </v-app-bar>
-        <v-hover v-slot="{ hover }">
-          <v-card
-            class="ma-1"
-            :class="[{ 'on-hover': hover }, isDisabled(index)]"
-            :elevation="hover ? 12 : 2"
-            :ripple="!edit"
-            @click="toggleDisabled(index)"
-          >
-            <v-card-title>
-              <v-btn
-                v-if="edit"
-                fab
-                x-small
-                color="white"
-                class="mr-2"
-                elevation="0"
-                @click="removeByIndex(value, index)"
-              >
-                <v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
-              </v-btn>
-              {{ $t("recipe.step-index", { step: index + 1 }) }}
-              <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
-                {{ !showTitleEditor[index] ? $t('recipe.insert-section') : $t('recipe.remove-section') }}
-              </v-btn>
-            </v-card-title>
-            <v-card-text v-if="edit">
-              <v-textarea
-                auto-grow
-                dense
-                v-model="value[index]['text']"
-                :key="generateKey('instructions', index)"
-                rows="4"
-              >
-              </v-textarea>
-            </v-card-text>
-            <v-card-text v-else>
-              <vue-markdown :source="step.text"> </vue-markdown>
-            </v-card-text>
-          </v-card>
-        </v-hover>
-      </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">
+              <v-app-bar-title v-text="step.title"> </v-app-bar-title>
+            </v-toolbar-title>
+            <v-text-field
+              v-if="edit"
+              class="headline pa-0 mt-5"
+              v-model="step.title"
+              dense
+              solo
+              flat
+              :placeholder="$t('recipe.section-title')"
+              background-color="primary"
+            >
+            </v-text-field>
+          </v-app-bar>
+          <v-hover v-slot="{ hover }">
+            <v-card
+              class="ma-1"
+              :class="[{ 'on-hover': hover }, isChecked(index)]"
+              :elevation="hover ? 12 : 2"
+              :ripple="!edit"
+              @click="toggleDisabled(index)"
+            >
+              <v-card-title :class="{ 'pb-0': !isChecked(index) }">
+                <v-btn
+                  v-if="edit"
+                  fab
+                  x-small
+                  color="white"
+                  class="mr-2"
+                  elevation="0"
+                  @click="removeByIndex(value, index)"
+                >
+                  <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") }}
+                </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
+                  auto-grow
+                  dense
+                  v-model="value[index]['text']"
+                  :key="generateKey('instructions', index)"
+                  rows="4"
+                >
+                </v-textarea>
+              </v-card-text>
+              <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: {
@@ -94,12 +118,13 @@ export default {
 
   watch: {
     value: {
-      handler() { 
-        this.disabledSteps = [];  
-      }
-    }
+      handler() {
+        this.disabledSteps = [];
+        this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
+      },
+    },
   },
-  
+
   methods: {
     generateKey(item, index) {
       return utils.generateUniqueKey(item, index);
@@ -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>
+