From df2fa4c444dd4fce396cf807644304ce852edd3f Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Wed, 20 Dec 2023 13:42:43 +0100
Subject: [PATCH] Fix dropdown

---
 client/components/global/Dropdown.vue         | 68 +++++++++----------
 client/components/global/VButton.vue          | 10 +--
 .../global/transitions/Collapsible.vue        | 43 +++++++-----
 .../components/pages/forms/show/ExtraMenu.vue |  8 +--
 client/pages/forms/show/index.vue             |  2 +-
 client/pages/home.vue                         |  2 -
 .../components/pages/forms/show/ExtraMenu.vue |  9 ++-
 7 files changed, 69 insertions(+), 73 deletions(-)

diff --git a/client/components/global/Dropdown.vue b/client/components/global/Dropdown.vue
index 1cd83df82..04f95ba81 100644
--- a/client/components/global/Dropdown.vue
+++ b/client/components/global/Dropdown.vue
@@ -1,54 +1,50 @@
 <template>
-  <div class="relative">
+  <div class="relative" ref="dropdown">
     <slot name="trigger"
           :toggle="toggle"
           :open="open"
           :close="close"
     />
 
-    <collapsible v-model="isOpen" :class="dropdownClass">
+    <collapsible v-model="isOpen" :class="dropdownClass" @click-away="onClickAway">
       <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-        <slot />
+        <slot/>
       </div>
     </collapsible>
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import {ref} from 'vue'
 import Collapsible from './transitions/Collapsible.vue'
 
-export default {
-  name: 'Dropdown',
-  components: { Collapsible },
-  directives: {},
-  props: {
-    dropdownClass: {
-      type: String,
-      default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
-    }
-  },
-  setup () {
-    const isOpen = ref(false)
-
-    const open = () => {
-      isOpen.value = true
-    }
-
-    const close = () => {
-      isOpen.value = false
-    }
-
-    const toggle = () => {
-      isOpen.value = !isOpen.value
-    }
-
-    return {
-      isOpen,
-      open,
-      close,
-      toggle
-    }
+const props = defineProps({
+  dropdownClass: {
+    type: String,
+    default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
+  }
+})
+
+const isOpen = ref(false)
+const dropdown = ref(null)
+
+const open = (event) => {
+  isOpen.value = true
+}
+
+const close = (event) => {
+  console.log('closing')
+  isOpen.value = false
+}
+
+const toggle = (event) => {
+  isOpen.value = !isOpen.value
+}
+
+const onClickAway = (event) => {
+  // Check that event target isn't children of dropdown
+  if (dropdown.value && !dropdown.value.contains(event.target)) {
+    close(event)
   }
 }
 </script>
diff --git a/client/components/global/VButton.vue b/client/components/global/VButton.vue
index 4ee7d8ae6..1c6f4db6b 100644
--- a/client/components/global/VButton.vue
+++ b/client/components/global/VButton.vue
@@ -2,9 +2,7 @@
   <NuxtLink v-if="href" :class="btnClasses" :href="href" :target="target">
     <slot />
   </NuxtLink>
-  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses"
-          @click="onClick($event)"
-  >
+  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses">
     <template v-if="!loading">
       <span class="no-underline mx-auto">
         <slot />
@@ -175,11 +173,5 @@ export default {
       }
     }
   },
-
-  methods: {
-    onClick (event) {
-      this.$emit('click', event)
-    }
-  }
 }
 </script>
diff --git a/client/components/global/transitions/Collapsible.vue b/client/components/global/transitions/Collapsible.vue
index 4089a09ff..52d27f1fe 100644
--- a/client/components/global/transitions/Collapsible.vue
+++ b/client/components/global/transitions/Collapsible.vue
@@ -1,11 +1,9 @@
 <template>
-  <transition @leave="(el,done)=>motions.collapsible.leave(done)">
+  <transition @leave="onLeave">
     <div
       ref="collapsible"
       v-if="modelValue"
-      v-motion="'collapsible'"
-      :variants="variants"
-      v-on-click-outside.bubble="close"
+      v-on-click-outside.bubble="onClickAway"
     >
       <slot/>
     </div>
@@ -17,27 +15,38 @@ import {vOnClickOutside} from '@vueuse/components'
 
 const props = defineProps({
   modelValue: {type: Boolean},
-  closeOnClickAway: {type: Boolean, default: true},
   maxHeight: {type: Number, default: 200},
 })
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['click-away'])
 
-const motions = useMotions()
-const variants = ref({
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: {duration: 150, ease: 'easeOut'}
-  },
+const motion = ref(null)
+const collapsible = ref(null)
+const variants = {
   initial: {
     opacity: 0,
     y: -10,
     transition: {duration: 75, ease: 'easeIn'}
   },
-})
-const close = () => {
-  if (props.closeOnClickAway) {
-    emits('update:modelValue', false)
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {duration: 150, ease: 'easeOut'}
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      motion.value = useMotion(collapsible.value, variants)
+    })
   }
+})
+
+const onLeave = (el, done) => {
+  motion.value.leave(done)
+}
+
+const onClickAway = (event) => {
+  emits('click-away', event)
 }
 </script>
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index 4bb23eb21..016525e09 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -3,9 +3,9 @@
     <div v-if="loadingDuplicate || loadingDelete" class="pr-4 pt-2">
       <Loader class="h-6 w-6 mx-auto" />
     </div>
-    <dropdown v-else class="inline" dusk="nav-dropdown">
+    <dropdown v-else class="inline">
       <template #trigger="{toggle}">
-        <v-button color="white" class="mr-2" @click.stop="toggle">
+        <v-button color="white" class="mr-2" @click="toggle">
           <svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
                xmlns="http://www.w3.org/2000/svg"
           >
@@ -42,7 +42,7 @@
         View form
       </a>
       <router-link v-if="isMainPage" v-track.edit_form_click="{form_id:form.id, form_slug:form.slug}"
-                   :to="{name:'forms.edit', params: {slug: form.slug}}"
+                   :to="{name:'forms-edit', params: {slug: form.slug}}"
                    class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
       >
         <svg class="w-4 h-4 mr-2" width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -141,8 +141,6 @@
 <script>
 import { computed } from 'vue'
 import axios from 'axios'
-import { useAuthStore } from '../../../../stores/auth'
-import { useFormsStore } from '../../../../stores/forms'
 import Dropdown from '~/components/global/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
 
diff --git a/client/pages/forms/show/index.vue b/client/pages/forms/show/index.vue
index c4d0469af..cf0b1370c 100644
--- a/client/pages/forms/show/index.vue
+++ b/client/pages/forms/show/index.vue
@@ -263,7 +263,7 @@ export default {
       this.$router.push({ name: 'home' })
     },
     openEdit () {
-      this.$router.push({ name: 'forms.edit', params: { slug: this.form.slug } })
+      this.$router.push({ name: 'forms-edit', params: { slug: this.form.slug } })
     }
   }
 }
diff --git a/client/pages/home.vue b/client/pages/home.vue
index 271a3f1c0..b2e5eaffc 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -170,8 +170,6 @@ const isFilteringForms = computed(() => {
 const allTags = computed(() => {
   let tags = []
   forms.value.forEach((form) => {
-    console.log(form.tags)
-    // TODO: check this works
     if (form.tags && form.tags.length) {
       tags = tags.concat(form.tags.split(','))
     }
diff --git a/resources/js/components/pages/forms/show/ExtraMenu.vue b/resources/js/components/pages/forms/show/ExtraMenu.vue
index 23a5e3200..28ac3fb99 100644
--- a/resources/js/components/pages/forms/show/ExtraMenu.vue
+++ b/resources/js/components/pages/forms/show/ExtraMenu.vue
@@ -4,8 +4,8 @@
       <loader class="h-6 w-6 mx-auto" />
     </div>
     <dropdown v-else class="inline" dusk="nav-dropdown">
-      <template #trigger="{toggle}">
-        <v-button color="white" class="mr-2" @click.stop="toggle">
+      <template #trigger="actions">
+        <v-button color="white" class="mr-2" @click.native="onClick(actions)">
           <svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none"
                xmlns="http://www.w3.org/2000/svg"
           >
@@ -147,8 +147,8 @@
 </template>
 
 <script>
-import { computed } from 'vue'
 import axios from 'axios'
+import { computed } from 'vue'
 import { useAuthStore } from '../../../../stores/auth'
 import { useFormsStore } from '../../../../stores/forms'
 import Dropdown from '../../../common/Dropdown.vue'
@@ -184,6 +184,9 @@ export default {
   },
 
   methods: {
+    onClick (actions) {
+      console.log('click', actions)
+    },
     copyLink () {
       const el = document.createElement('textarea')
       el.value = this.form.share_url