fix: cleanup oss

packages/nc-gui/components/dashboard/TreeView/Project/List.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Draggable from 'vuedraggable'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import ProjectWrapper from '../ProjectWrapper.vue'
 
@@ -13,27 +12,21 @@ const route = router.currentRoute
 
 const basesStore = useBases()
 
-const { createProject: _createProject, updateProject } = basesStore
+const { createProject: _createProject } = basesStore
 
-const { bases, basesList, activeProjectId, showProjectList, isProjectsLoaded } = storeToRefs(basesStore)
+const { bases, basesList, activeProjectId } = storeToRefs(basesStore)
 
-const { isWorkspaceLoading, activeWorkspaceId } = storeToRefs(useWorkspace())
+const { activeWorkspaceId } = storeToRefs(useWorkspace())
 
 const baseCreateDlg = ref(false)
 
 const searchQuery = ref('')
 
-const searchInputRef = ref()
-
-const isCreateProjectOpen = ref(false)
-
-const filteredProjectList = computed(() => basesList.value.filter((base) => searchCompare(base.title, searchQuery.value)))
-
 const baseStore = useBase()
 
 const { loadTables } = baseStore
 
-const { isSharedBase, base } = storeToRefs(baseStore)
+const { base } = storeToRefs(baseStore)
 
 const tablesStore = useTablesStore()
 
@@ -41,8 +34,6 @@ const { loadProjectTables } = tablesStore
 
 const { activeTable: _activeTable } = storeToRefs(tablesStore)
 
-const { isMobileMode } = useGlobal()
-
 const { setMeta } = useMetas()
 
 const { allRecentViews } = storeToRefs(useViewsStore())
@@ -55,49 +46,6 @@ const openedBase = computed(() => {
   return basesList.value.find((b) => b.id === activeProjectId.value)
 })
 
-const stopLoading = ref(false)
-
-const isLoadingSidebar = computed(() => {
-  if (!stopLoading.value) return true
-
-  return !isProjectsLoaded.value
-})
-
-let stopTimerId: any
-watch(
-  () => ncIsEmptyObject(route.value.params),
-  () => {
-    clearTimeout(stopTimerId)
-
-    if (ncIsEmptyObject(route.value.params)) {
-      if (isProjectsLoaded.value && !basesList.value.length) {
-        stopLoading.value = true
-        showProjectList.value = true
-
-        return
-      } else {
-        stopLoading.value = false
-      }
-    } else {
-      stopLoading.value = true
-      return
-    }
-
-    stopTimerId = setTimeout(() => {
-      stopLoading.value = true
-      clearTimeout(stopTimerId)
-
-      // If their is no active project then show base list
-      if (!showProjectList.value && (!activeProjectId.value || !openedBase.value?.id)) {
-        showProjectList.value = true
-      }
-    }, 5000)
-  },
-  {
-    immediate: true,
-  },
-)
-
 const contextMenuTarget = reactive<{ type?: 'base' | 'source' | 'table' | 'main' | 'layout'; value?: any }>({})
 
 const setMenuContext = (type: 'base' | 'source' | 'table' | 'main' | 'layout', value?: any) => {
@@ -354,38 +302,6 @@ const scrollTableNode = () => {
   activeTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 }
 
-const onMove = async (_event: { moved: { newIndex: number; oldIndex: number; element: NcProject } }) => {
-  const {
-    moved: { newIndex = 0, oldIndex = 0, element },
-  } = _event
-
-  if (!element?.id) return
-
-  let nextOrder: number
-
-  // set new order value based on the new order of the items
-  if (basesList.value.length - 1 === newIndex) {
-    // If moving to the end, set nextOrder greater than the maximum order in the list
-    nextOrder = Math.max(...basesList.value.map((item) => item?.order ?? 0)) + 1
-  } else if (newIndex === 0) {
-    // If moving to the beginning, set nextOrder smaller than the minimum order in the list
-    nextOrder = Math.min(...basesList.value.map((item) => item?.order ?? 0)) / 2
-  } else {
-    nextOrder =
-      (parseFloat(String(basesList.value[newIndex - 1]?.order ?? 0)) +
-        parseFloat(String(basesList.value[newIndex + 1]?.order ?? 0))) /
-      2
-  }
-
-  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
-
-  await updateProject(element.id, {
-    order: _nextOrder,
-  })
-
-  $e('a:base:reorder')
-}
-
 watch(
   () => _activeTable.value?.id,
   () => {
@@ -400,181 +316,30 @@ watch(
     immediate: true,
   },
 )
-
-const transitionName = ref<'slide-left' | 'slide-right' | undefined>(undefined)
-
-watch(
-  [showProjectList, activeWorkspaceId],
-  ([newShowProjectList, newWsId], [_oldShowProjectList, oldWsId]) => {
-    if (!isProjectsLoaded.value) {
-      transitionName.value = undefined // No animation
-      return
-    }
-
-    // If workspace changed, skip animation
-    if (newWsId !== oldWsId) {
-      transitionName.value = undefined // No animation
-    } else {
-      transitionName.value = newShowProjectList ? 'slide-left' : 'slide-right'
-    }
-  },
-  {
-    flush: 'pre',
-  },
-)
-
-watch([searchInputRef, showProjectList], () => {
-  if (!searchInputRef.value || !showProjectList.value) return
-
-  nextTick(() => {
-    searchInputRef.value?.input?.focus()
-  })
-})
-
-watch(isProjectsLoaded, () => {
-  if (isProjectsLoaded.value && basesList.value.length) {
-    transitionName.value = showProjectList.value ? 'slide-left' : 'slide-right'
-  } else {
-    transitionName.value = undefined
-  }
-
-  if (isProjectsLoaded.value && !basesList.value.length) {
-    stopLoading.value = true
-    showProjectList.value = true
-  }
-})
 </script>
 
 <template>
-  <div
-    class="nc-treeview-container relative w-full h-full overflow-hidden flex items-stretch"
-    :class="showProjectList ? 'nc-treeview-container-base-list' : 'nc-treeview-container-active-base'"
-  >
-    <DashboardTreeViewProjectListSkeleton v-if="isLoadingSidebar" />
+  <div class="nc-treeview-container relative w-full h-full overflow-hidden flex items-stretch nc-treeview-container-active-base">
+    <!-- Project Home -->
+    <div
+      v-if="activeProjectId && openedBase?.id && !openedBase.isLoading"
+      class="absolute w-full h-full top-0 left-0 z-5 flex flex-col"
+    >
+      <ProjectWrapper :base-role="openedBase?.project_role" :base="openedBase">
+        <DashboardTreeViewProjectHome>
+          <template #footer>
+            <slot name="footer"></slot>
+          </template>
+        </DashboardTreeViewProjectHome>
+      </ProjectWrapper>
+    </div>
+    <DashboardTreeViewProjectListSkeleton v-else />
 
-    <template v-else>
-      <Transition :name="transitionName" appear>
-        <div
-          v-if="showProjectList"
-          key="project-list"
-          class="nc-treeview-base-list absolute w-full h-full top-0 left-0 z-10 bg-nc-bg-gray-extralight"
-        >
-          <div class="w-full">
-            <DashboardSidebarHeaderWrapper></DashboardSidebarHeaderWrapper>
-            <div class="px-2 h-11 flex items-center">
-              <DashboardTreeViewProjectSearchInput ref="searchInputRef" v-model:value="searchQuery" />
-            </div>
-            <div class="nc-project-home-section pt-1 !pb-2">
-              <WorkspaceCreateProjectBtn
-                v-model:is-open="isCreateProjectOpen"
-                modal
-                type="text"
-                class="nc-sidebar-create-base-btn nc-sidebar-item-dark nc-project-home-section-item !text-nc-content-brand !hover:(text-nc-content-brand-disabled bg-none) !xs:hidden w-full"
-                data-testid="nc-sidebar-create-base-btn"
-              >
-              </WorkspaceCreateProjectBtn>
-            </div>
-          </div>
-          <div class="nc-treeview flex-1 relative overflow-auto nc-scrollbar-thin nc-project-home-section">
-            <div v-if="!isSharedBase" class="nc-project-home-section-header">{{ $t('objects.projects') }}</div>
-            <div mode="inline" class="nc-treeview pb-0.5 flex-grow min-h-50 overflow-x-hidden">
-              <div v-if="basesList?.length">
-                <Draggable
-                  v-bind="getDraggableAutoScrollOptions({ scrollSensitivity: 50 })"
-                  :model-value="basesList"
-                  :disabled="isMobileMode || !isUIAllowed('baseReorder') || basesList?.length < 2"
-                  item-key="id"
-                  handle=".base-title-node"
-                  ghost-class="ghost"
-                  :filter="isTouchEvent"
-                  @change="onMove($event)"
-                >
-                  <template #item="{ element: baseItem }">
-                    <div v-if="searchCompare(baseItem.title, searchQuery)" :key="baseItem.id">
-                      <ProjectWrapper :base-role="baseItem.project_role" :base="baseItem">
-                        <DashboardTreeViewProjectNode />
-                      </ProjectWrapper>
-                    </div>
-                  </template>
-                  <template v-if="!isWorkspaceLoading && !filteredProjectList.length" #footer>
-                    <div class="nc-project-home-section-item text-nc-content-gray-muted font-normal">
-                      {{ $t('placeholder.noResultsFoundForYourSearch') }}
-                    </div>
-                  </template>
-                </Draggable>
-              </div>
-              <div v-else class="nc-project-home-section-item text-nc-content-gray-muted font-normal">No Bases</div>
-            </div>
-          </div>
-          <slot name="footer"> </slot>
-        </div>
-      </Transition>
-
-      <!-- Project Home -->
-      <template v-if="!showProjectList">
-        <div
-          v-if="activeProjectId && openedBase?.id && !openedBase.isLoading"
-          class="absolute w-full h-full top-0 left-0 z-5 flex flex-col"
-        >
-          <ProjectWrapper :base-role="openedBase?.project_role" :base="openedBase">
-            <DashboardTreeViewProjectHome>
-              <template #footer>
-                <slot name="footer"></slot>
-              </template>
-            </DashboardTreeViewProjectHome>
-          </ProjectWrapper>
-        </div>
-        <DashboardTreeViewProjectListSkeleton v-else />
-      </template>
-
-      <WorkspaceCreateProjectDlg v-model="baseCreateDlg" />
-    </template>
+    <WorkspaceCreateProjectDlg v-model="baseCreateDlg" />
   </div>
 </template>
 
 <style scoped lang="scss">
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: transform 0.4s ease, opacity 0.4s ease;
-  will-change: transform, opacity;
-}
-
-.slide-left-enter-from {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-.slide-left-enter-to {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-left-leave-from {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-left-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.slide-right-enter-from {
-  transform: translateX(100%);
-  opacity: 0;
-}
-.slide-right-enter-to {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-right-leave-from {
-  transform: translateX(0);
-  opacity: 1;
-}
-.slide-right-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
 .ghost,
 .ghost > * {
   @apply pointer-events-none;