From 034f4e6671e04f69b47834c9e28df720e0a05ae6 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Mon, 9 Jan 2023 11:42:26 +0100
Subject: [PATCH] Revert "geodata: address PR feedback (WIP)"

This reverts commit cdc233c5b847d2a980b0901e89803b28b1ea6ff5.
---
 .../smartsheet/toolbar/MappedBy.vue           | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
index c2f7de4ada..1d3b206bea 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
@@ -29,6 +29,8 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
 
 const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
 
+const stackedByDropdown = ref(false)
+
 watch(
   () => activeView.value?.id,
   async (newVal, oldVal) => {
@@ -64,12 +66,24 @@ const geoDataFieldOptions = computed<SelectProps['options']>(() => {
     })
 })
 
+const handleChange = () => {
+  stackedByDropdown.value = false
+}
 </script>
 
 <template>
-  <a-dropdown v-if="!IsPublic" :trigger="['click']">
-    <div>
-      <a-button class="nc-toolbar-btn" :disabled="isLocked">
+  <a-dropdown
+    v-if="!IsPublic"
+    v-model:visible="stackedByDropdown"
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
+  >
+    <div class="nc-kanban-btn">
+      <a-button
+        v-e="['c:kanban:change-grouping-field']"
+        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
+        :disabled="isLocked"
+      >
         <div class="flex items-center gap-1">
           <mdi-arrow-down-drop-circle-outline />
           <span class="text-capitalize !text-sm font-weight-normal">
@@ -82,6 +96,7 @@ const geoDataFieldOptions = computed<SelectProps['options']>(() => {
     </div>
     <template #overlay>
       <div
+        v-if="stackedByDropdown"
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >
@@ -93,9 +108,10 @@ const geoDataFieldOptions = computed<SelectProps['options']>(() => {
           <div class="grouping-field">
             <a-select
               v-model:value="geoDataMappingFieldColumnId"
-              class="w-full"
+              class="w-full nc-kanban-grouping-field-select"
               :options="geoDataFieldOptions"
               placeholder="Select a Mapping Field"
+              @change="handleChange"
               @click.stop
             />
           </div>