From a0aca0fb443cb829685cbb4dab537ec8bb001d77 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Thu, 20 Oct 2022 18:24:18 +0400
Subject: [PATCH] geodata: MapView (WIP)

---
 packages/nc-gui/components/smartsheet/Map.vue | 672 ++----------------
 1 file changed, 41 insertions(+), 631 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Map.vue b/packages/nc-gui/components/smartsheet/Map.vue
index 4a805a9441..405cc6d81e 100644
--- a/packages/nc-gui/components/smartsheet/Map.vue
+++ b/packages/nc-gui/components/smartsheet/Map.vue
@@ -1,656 +1,66 @@
 <script lang="ts" setup>
-import Draggable from 'vuedraggable'
-import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk'
-import {
-  ActiveViewInj,
-  FieldsInj,
-  IsFormInj,
-  IsGalleryInj,
-  IsGridInj,
-  IsKanbanInj,
-  IsLockedInj,
-  IsPublicInj,
-  MetaInj,
-  OpenNewRecordFormHookInj,
-  ReadonlyInj,
-  inject,
-  onBeforeMount,
-  onBeforeUnmount,
-  provide,
-  useKanbanViewStoreOrThrow,
-} from '#imports'
-import type { Row as RowType } from '~/lib'
-
-interface Attachment {
-  url: string
-}
-
-const meta = inject(MetaInj, ref())
-
-const view = inject(ActiveViewInj, ref())
-
-const reloadViewDataHook = inject(ReloadViewDataHookInj)
-
-const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
-
-const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
-
-const isLocked = inject(IsLockedInj, ref(false))
-
-const isPublic = inject(IsPublicInj, ref(false))
-
-const expandedFormDlg = ref(false)
-
-const expandedFormRow = ref<RowType>()
-
-const expandedFormRowState = ref<Record<string, any>>()
-
-const deleteStackVModel = ref(false)
-
-const stackToBeDeleted = ref('')
-
-const stackIdxToBeDeleted = ref(0)
-
-const route = useRoute()
-
-const router = useRouter()
-
-const {
-  loadKanbanData,
-  loadMoreKanbanData,
-  loadKanbanMeta,
-  kanbanMetaData,
-  formattedData,
-  updateOrSaveRow,
-  updateKanbanMeta,
-  addEmptyRow,
-  groupingFieldColOptions,
-  updateKanbanStackMeta,
-  groupingField,
-  countByStack,
-  deleteStack,
-  shouldScrollToRight,
-  deleteRow,
-} = useKanbanViewStoreOrThrow()
+import 'leaflet/dist/leaflet.css'
+import * as L from 'leaflet'
+import { IsFormInj, IsGalleryInj, IsGridInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
-const { appInfo } = $(useGlobal())
-
 provide(IsFormInj, ref(false))
-
-provide(IsGalleryInj, ref(false))
-
+provide(IsGalleryInj, ref(true))
 provide(IsGridInj, ref(false))
-
-provide(IsKanbanInj, ref(true))
-
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
-const hasEditPermission = $computed(() => isUIAllowed('xcDatatableEditable'))
+const markerRef = ref()
+const myMapRef = ref()
+const latitude = ref()
+const longitude = ref()
+const markersRef = ref()
 
-const fields = inject(FieldsInj, ref([]))
+function addMarker() {
+  const markerNew = markerRef.value([parseFloat(latitude.value), parseFloat(longitude.value)])
+  console.log(markersRef.value)
+  markersRef.value.addLayer(markerNew)
 
-const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== kanbanMetaData.value?.fk_cover_image_col_id))
-
-const coverImageColumn: any = $(
-  computed(() =>
-    meta.value?.columnsById
-      ? meta.value.columnsById[kanbanMetaData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
-      : {},
-  ),
-)
-
-const kanbanContainerRef = ref()
-
-const selectedStackTitle = ref('')
-
-const isRowEmpty = (record: any, col: any) => {
-  const val = record.row[col.title]
-  if (!val) return true
-
-  return Array.isArray(val) && val.length === 0
-}
-
-reloadViewDataHook?.on(async () => {
-  await loadKanbanMeta()
-  await loadKanbanData()
-})
-
-const attachments = (record: any): Attachment[] => {
-  try {
-    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
-  } catch (e) {
-    return []
-  }
+  myMapRef.value.addLayer(markersRef.value)
 }
 
-const reloadAttachments = ref(false)
+onMounted(async () => {
+  const { map, tileLayer, marker } = await import('leaflet')
+  await import('leaflet.markercluster')
 
-reloadViewMetaHook?.on(async () => {
-  await loadKanbanMeta()
+  const myMap = map('map').setView([51.505, -0.09], 13)
+  markerRef.value = marker
+  myMapRef.value = myMap
+  console.log('markerClusterGroup', L.markerClusterGroup)
+  markersRef.value = L.markerClusterGroup()
 
-  reloadAttachments.value = true
-
-  nextTick(() => {
-    reloadAttachments.value = false
-  })
-})
-
-const expandForm = (row: RowType, state?: Record<string, any>) => {
-  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
-
-  if (rowId) {
-    router.push({
-      query: {
-        ...route.query,
-        rowId,
-      },
-    })
-  } else {
-    expandedFormRow.value = row
-    expandedFormRowState.value = state
-    expandedFormDlg.value = true
-  }
-}
-
-const _contextMenu = ref(false)
-
-const contextMenu = computed({
-  get: () => _contextMenu.value,
-  set: (val) => {
-    if (hasEditPermission) {
-      _contextMenu.value = val
-    }
-  },
-})
-
-const contextMenuTarget = ref<RowType | null>(null)
-
-const showContextMenu = (e: MouseEvent, target?: RowType) => {
-  e.preventDefault()
-  if (target) {
-    contextMenuTarget.value = target
-  }
-}
-
-const expandedFormOnRowIdDlg = computed({
-  get() {
-    return !!route.query.rowId
-  },
-  set(val) {
-    if (!val)
-      router.push({
-        query: {
-          ...route.query,
-          rowId: undefined,
-        },
-      })
-  },
-})
-
-const expandFormClick = async (e: MouseEvent, row: RowType) => {
-  if (e.target as HTMLElement) {
-    expandForm(row)
-  }
-}
-
-/** Block dragging the stack to first index (reserved for uncategorized) **/
-function onMoveCallback(event: { draggedContext: { futureIndex: number } }) {
-  if (event.draggedContext.futureIndex === 0) {
-    return false
-  }
-}
-
-async function onMoveStack(event: any) {
-  if (event.moved) {
-    const { oldIndex, newIndex } = event.moved
-    const { fk_grp_col_id, meta: stack_meta } = kanbanMetaData.value
-    groupingFieldColOptions.value[oldIndex].order = newIndex
-    groupingFieldColOptions.value[newIndex].order = oldIndex
-    const stackMetaObj = JSON.parse(stack_meta as string) || {}
-    stackMetaObj[fk_grp_col_id as string] = groupingFieldColOptions.value
-    await updateKanbanMeta({
-      meta: stackMetaObj,
-    })
-  }
-}
-
-async function onMove(event: any, stackKey: string) {
-  if (event.added) {
-    const ele = event.added.element
-    ele.row[groupingField.value] = stackKey
-    countByStack.value.set(stackKey, countByStack.value.get(stackKey)! + 1)
-    await updateOrSaveRow(ele)
-  } else if (event.removed) {
-    countByStack.value.set(stackKey, countByStack.value.get(stackKey)! - 1)
-  }
-}
-
-const kanbanListScrollHandler = async (e: any) => {
-  if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
-    const stackTitle = e.target.getAttribute('data-stack-title')
-    const pageSize = appInfo.defaultLimit || 25
-    const page = Math.ceil(formattedData.value.get(stackTitle)!.length / pageSize)
-    await loadMoreKanbanData(stackTitle, { offset: page * pageSize })
-  }
-}
-
-const kanbanListRef = (kanbanListElement: HTMLElement) => {
-  if (kanbanListElement) {
-    kanbanListElement.removeEventListener('scroll', kanbanListScrollHandler)
-    kanbanListElement.addEventListener('scroll', kanbanListScrollHandler)
-  }
-}
-
-const handleDeleteStackClick = (stackTitle: string, stackIdx: number) => {
-  deleteStackVModel.value = true
-  stackToBeDeleted.value = stackTitle
-  stackIdxToBeDeleted.value = stackIdx
-}
-
-const handleDeleteStackConfirmClick = async () => {
-  await deleteStack(stackToBeDeleted.value, stackIdxToBeDeleted.value)
-  deleteStackVModel.value = false
-}
-
-const handleCollapseStack = async (stackIdx: number) => {
-  groupingFieldColOptions.value[stackIdx].collapsed = !groupingFieldColOptions.value[stackIdx].collapsed
-  if (!isPublic.value) {
-    await updateKanbanStackMeta()
-  }
-}
-
-const openNewRecordFormHookHandler = async () => {
-  const newRow = await addEmptyRow()
-  // preset the grouping field value
-  newRow.row = {
-    [groupingField.value]: selectedStackTitle.value,
-  }
-  // increase total count by 1
-  countByStack.value.set(null, countByStack.value.get(null)! + 1)
-  // open the expanded form
-  expandForm(newRow)
-}
-
-openNewRecordFormHook?.on(openNewRecordFormHookHandler)
-
-onBeforeMount(async () => {
-  await loadKanbanMeta()
-  await loadKanbanData()
-})
-
-// remove openNewRecordFormHookHandler before unmounting
-// so that it won't be triggered multiple times
-onBeforeUnmount(() => openNewRecordFormHook.off(openNewRecordFormHookHandler))
-
-// reset context menu target on hide
-watch(contextMenu, () => {
-  if (!contextMenu.value) {
-    contextMenuTarget.value = null
-  }
-})
-
-watch(view, async (nextView) => {
-  if (nextView?.type === ViewTypes.KANBAN) {
-    // load kanban meta
-    await loadKanbanMeta()
-    // load kanban data
-    await loadKanbanData()
-    // horizontally scroll to the end of the kanban container
-    // when a new option is added within kanban view
-    if (shouldScrollToRight.value) {
-      kanbanContainerRef.value.scrollTo({
-        left: kanbanContainerRef.value.scrollWidth,
-        behavior: 'smooth',
-      })
-      // reset shouldScrollToRight
-      shouldScrollToRight.value = false
-    }
-  }
+  tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(myMap)
 })
 </script>
 
 <template>
-  <div class="flex h-full bg-white px-2">
-    <div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
-      <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']" overlay-class-name="nc-dropdown-kanban-context-menu">
-        <!-- Draggable Stack -->
-        <Draggable
-          v-model="groupingFieldColOptions"
-          class="flex gap-4"
-          item-key="id"
-          group="kanban-stack"
-          draggable=".nc-kanban-stack"
-          filter=".not-draggable"
-          :move="onMoveCallback"
-          @start="(e) => e.target.classList.add('grabbing')"
-          @end="(e) => e.target.classList.remove('grabbing')"
-          @change="onMoveStack($event)"
-        >
-          <template #item="{ element: stack, index: stackIdx }">
-            <div class="nc-kanban-stack" :class="{ 'w-[50px]': stack.collapsed }">
-              <!-- Non Collapsed Stacks -->
-              <a-card
-                v-if="!stack.collapsed"
-                :key="stack.id"
-                class="mx-4 !bg-[#f0f2f5] flex flex-col w-[280px] h-full rounded-[12px]"
-                :class="{
-                  'not-draggable': stack.title === null || isLocked || isPublic || !hasEditPermission,
-                  '!cursor-default': isLocked || !hasEditPermission,
-                }"
-                :head-style="{ paddingBottom: '0px' }"
-                :body-style="{ padding: '0px', height: '100%' }"
-              >
-                <!-- Header Color Bar -->
-                <div :style="`background-color: ${stack.color}`" class="nc-kanban-stack-head-color h-[10px]"></div>
-
-                <!-- Skeleton -->
-                <a-skeleton v-if="!formattedData.get(stack.title) || !countByStack" class="p-4" />
-
-                <!-- Stack -->
-                <a-layout v-else class="!bg-[#f0f2f5]">
-                  <a-layout-header>
-                    <div class="nc-kanban-stack-head font-bold flex items-center px-[15px]">
-                      <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-kanban-stack-context-menu">
-                        <div
-                          class="flex items-center w-full"
-                          :class="{ 'capitalize': stack.title === null, 'cursor-pointer': !isLocked }"
-                        >
-                          <LazyGeneralTruncateText>{{ stack.title ?? 'uncategorized' }}</LazyGeneralTruncateText>
-                          <span v-if="!isLocked" class="w-full flex w-[15px]">
-                            <mdi-menu-down class="text-grey text-lg ml-auto" />
-                          </span>
-                        </div>
-                        <template v-if="!isLocked" #overlay>
-                          <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded">
-                            <a-menu-item
-                              v-if="hasEditPermission && !isPublic && !isLocked"
-                              v-e="['c:kanban:add-new-record']"
-                              @click="
-                                () => {
-                                  selectedStackTitle = stack.title
-                                  openNewRecordFormHook.trigger(stack.title)
-                                }
-                              "
-                            >
-                              <div class="py-2 flex gap-2 items-center">
-                                <mdi-plus class="text-gray-500" />
-                                {{ $t('activity.addNewRecord') }}
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item v-e="['c:kanban:collapse-stack']" @click="handleCollapseStack(stackIdx)">
-                              <div class="py-2 flex gap-2 items-center">
-                                <mdi-arrow-collapse class="text-gray-500" />
-                                {{ $t('activity.kanban.collapseStack') }}
-                              </div>
-                            </a-menu-item>
-                            <a-menu-item
-                              v-if="stack.title !== null && !isPublic && hasEditPermission"
-                              v-e="['c:kanban:delete-stack']"
-                              @click="handleDeleteStackClick(stack.title, stackIdx)"
-                            >
-                              <div class="py-2 flex gap-2 items-center">
-                                <mdi-delete class="text-gray-500" />
-                                {{ $t('activity.kanban.deleteStack') }}
-                              </div>
-                            </a-menu-item>
-                          </a-menu>
-                        </template>
-                      </a-dropdown>
-                    </div>
-                  </a-layout-header>
-
-                  <a-layout-content class="overflow-y-hidden">
-                    <div :ref="kanbanListRef" class="nc-kanban-list h-full overflow-y-auto" :data-stack-title="stack.title">
-                      <!-- Draggable Record Card -->
-                      <Draggable
-                        :list="formattedData.get(stack.title)"
-                        item-key="row.Id"
-                        draggable=".nc-kanban-item"
-                        group="kanban-card"
-                        class="h-full"
-                        filter=".not-draggable"
-                        @start="(e) => e.target.classList.add('grabbing')"
-                        @end="(e) => e.target.classList.remove('grabbing')"
-                        @change="onMove($event, stack.title)"
-                      >
-                        <template #item="{ element: record }">
-                          <div class="nc-kanban-item py-2 px-[15px]">
-                            <LazySmartsheetRow :row="record">
-                              <a-card
-                                hoverable
-                                :data-stack="stack.title"
-                                class="!rounded-lg h-full overflow-hidden break-all max-w-[450px] shadow-lg"
-                                :class="{
-                                  'not-draggable': isLocked || !hasEditPermission || isPublic,
-                                  '!cursor-default': isLocked || !hasEditPermission || isPublic,
-                                }"
-                                :body-style="{ padding: '10px' }"
-                                @click="expandFormClick($event, record)"
-                                @contextmenu="showContextMenu($event, record)"
-                              >
-                                <template v-if="kanbanMetaData?.fk_cover_image_col_id" #cover>
-                                  <a-carousel
-                                    v-if="!reloadAttachments && attachments(record).length"
-                                    autoplay
-                                    class="gallery-carousel"
-                                    arrows
-                                  >
-                                    <template #customPaging>
-                                      <a>
-                                        <div class="pt-[12px]">
-                                          <div></div>
-                                        </div>
-                                      </a>
-                                    </template>
-
-                                    <template #prevArrow>
-                                      <div style="z-index: 1"></div>
-                                    </template>
-
-                                    <template #nextArrow>
-                                      <div style="z-index: 1"></div>
-                                    </template>
-
-                                    <LazyNuxtImg
-                                      v-for="(attachment, index) in attachments(record)"
-                                      :key="`carousel-${record.row.id}-${index}`"
-                                      quality="90"
-                                      placeholder
-                                      class="h-52 object-cover"
-                                      :src="attachment.url"
-                                    />
-                                  </a-carousel>
-
-                                  <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
-                                </template>
-                                <div
-                                  v-for="col in fieldsWithoutCover"
-                                  :key="`record-${record.row.id}-${col.id}`"
-                                  class="flex flex-col rounded-lg w-full"
-                                >
-                                  <!-- Smartsheet Header (Virtual) Cell -->
-                                  <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
-                                    <div class="w-full text-gray-400">
-                                      <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
-                                      <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
-                                    </div>
-                                  </div>
-
-                                  <!--  Smartsheet (Virtual) Cell -->
-                                  <div
-                                    v-if="!isRowEmpty(record, col)"
-                                    class="flex flex-row w-full items-center justify-start pl-[6px]"
-                                    :class="{ '!ml-[-12px]': col.uidt === UITypes.SingleSelect }"
-                                  >
-                                    <LazySmartsheetVirtualCell
-                                      v-if="isVirtualCol(col)"
-                                      v-model="record.row[col.title]"
-                                      class="text-sm pt-1"
-                                      :column="col"
-                                      :row="record"
-                                    />
-                                    <LazySmartsheetCell
-                                      v-else
-                                      v-model="record.row[col.title]"
-                                      class="text-sm pt-1"
-                                      :column="col"
-                                      :edit-enabled="false"
-                                      :read-only="true"
-                                    />
-                                  </div>
-                                </div>
-                              </a-card>
-                            </LazySmartsheetRow>
-                          </div>
-                        </template>
-                      </Draggable>
-                    </div>
-                  </a-layout-content>
-
-                  <a-layout-footer>
-                    <div v-if="formattedData.get(stack.title) && countByStack.get(stack.title) >= 0" class="mt-5 text-center">
-                      <!-- Stack Title -->
-                      <mdi-plus
-                        v-if="!isPublic && !isLocked"
-                        class="text-pint-500 text-lg text-primary cursor-pointer"
-                        @click="
-                          () => {
-                            selectedStackTitle = stack.title
-                            openNewRecordFormHook.trigger(stack.title)
-                          }
-                        "
-                      />
-                      <!-- Record Count -->
-                      <div class="nc-kanban-data-count">
-                        {{ formattedData.get(stack.title).length }} / {{ countByStack.get(stack.title) }}
-                        {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
-                      </div>
-                    </div>
-                  </a-layout-footer>
-                </a-layout>
-              </a-card>
-
-              <!-- Collapsed Stacks -->
-              <a-card
-                v-else
-                :key="`${stack.id}-collapsed`"
-                :style="`background-color: ${stack.color} !important`"
-                class="nc-kanban-collapsed-stack mx-4 flex items-center w-[300px] h-[50px] rounded-[12px] cursor-pointer h-full !pr-[10px]"
-                :class="{
-                  'not-draggable': stack.title === null || isLocked || isPublic || !hasEditPermission,
-                }"
-                :body-style="{ padding: '0px', height: '100%', width: '100%', background: '#f0f2f5 !important' }"
-              >
-                <div class="items-center justify-between" @click="handleCollapseStack(stackIdx)">
-                  <!-- Skeleton -->
-                  <a-skeleton
-                    v-if="!formattedData.get(stack.title) || !countByStack"
-                    class="!w-[150px] pl-5"
-                    :paragraph="false"
-                  />
-
-                  <div v-else class="nc-kanban-data-count mt-[12px] mx-[10px]">
-                    <!--  Stack title -->
-                    <div
-                      class="float-right flex gap-2 items-center cursor-pointer font-bold"
-                      :class="{ capitalize: stack.title === null }"
-                    >
-                      <LazyGeneralTruncateText>{{ stack.title ?? 'uncategorized' }}</LazyGeneralTruncateText>
-                      <mdi-menu-down class="text-grey text-lg" />
-                    </div>
-                    <!-- Record Count -->
-                    {{ formattedData.get(stack.title).length }} / {{ countByStack.get(stack.title) }}
-                    {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
-                  </div>
-                </div>
-              </a-card>
-            </div>
-          </template>
-        </Draggable>
-        <!-- Drop down Menu -->
-        <template v-if="!isLocked && !isPublic && hasEditPermission" #overlay>
-          <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
-            <a-menu-item v-if="contextMenuTarget" @click="expandForm(contextMenuTarget)">
-              <div v-e="['a:kanban:expand-record']" class="nc-project-menu-item nc-kanban-context-menu-item">
-                <MdiArrowExpand class="flex" />
-                <!-- Expand Record -->
-                {{ $t('activity.expandRecord') }}
-              </div>
-            </a-menu-item>
-            <a-divider class="!m-0 !p-0" />
-            <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget)">
-              <div v-e="['a:kanban:delete-record']" class="nc-project-menu-item nc-kanban-context-menu-item">
-                <MdiDeleteOutline class="flex" />
-                <!-- Delete Record -->
-                {{ $t('activity.deleteRecord') }}
-              </div>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
+  <div class="flex flex-col h-full w-full nounderline">
+    <div class="flex m-4 gap-4">
+      <label :for="latitude">latitude</label>
+      <input v-model="latitude" />
+      <label :for="longitude">longitude</label>
+      <input v-model="longitude" />
+      <button class="bg-blue" @click="addMarker">Submit</button>
     </div>
+    <client-only placeholder="Loading...">
+      <div id="map"></div>
+    </client-only>
   </div>
-
-  <div class="flex-1" />
-
-  <Suspense>
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormRow && expandedFormDlg"
-      v-model="expandedFormDlg"
-      :row="expandedFormRow"
-      :state="expandedFormRowState"
-      :meta="meta"
-      :view="view"
-    />
-  </Suspense>
-
-  <Suspense>
-    <LazySmartsheetExpandedForm
-      v-if="expandedFormOnRowIdDlg"
-      :key="route.query.rowId"
-      v-model="expandedFormOnRowIdDlg"
-      :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-      :meta="meta"
-      :row-id="route.query.rowId"
-      :view="view"
-    />
-  </Suspense>
-
-  <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-kanban-delete-stack">
-    <template #title>
-      {{ $t('activity.deleteKanbanStack') }}
-    </template>
-    <div>
-      {{ $t('msg.info.deleteKanbanStackConfirmation', { stackToBeDeleted, groupingField }) }}
-    </div>
-    <template #footer>
-      <a-button key="back" v-e="['c:kanban:cancel-delete-stack']" @click="deleteStackVModel = false">
-        {{ $t('general.cancel') }}
-      </a-button>
-      <a-button key="submit" v-e="['c:kanban:confirm-delete-stack']" type="primary" @click="handleDeleteStackConfirmClick">
-        {{ $t('general.delete') }}
-      </a-button>
-    </template>
-  </a-modal>
 </template>
 
-<style lang="scss" scoped>
-// override ant design style
-.a-layout,
-.ant-layout-header,
-.ant-layout-content {
-  @apply !bg-[#f0f2f5];
+<style scoped>
+#map {
+  height: 100vh;
 }
-
-.ant-layout-header {
-  @apply !h-[30px] !leading-[30px] !px-[5px] !my-[10px];
-}
-
-.nc-kanban-collapsed-stack {
-  transform: rotate(-90deg) translateX(-100%);
-  transform-origin: left top 0px;
-  transition: left 0.2s ease-in-out 0s;
+.nounderline {
+  text-decoration: none;
 }
 </style>