Merge pull request #6092 from nocodb/develop

build-local-docker-image.sh

@@ -1,19 +1,31 @@
 #!/bin/bash
-# script to build local docker image. 
+# script to build local docker image.
 # highlevel steps involved
-# 1. build nocodb-sdk
-# 2. build nc-gui
-#   2a. static build of nc-gui
-#   2b. copy nc-gui build to nocodb dir
-# 3. build nocodb 
+# 1. Stop and remove existing container and image
+# 2. Build nocodb-sdk
+# 3. Build nc-gui
+#   3a. static build of nc-gui
+#   3b. copy nc-gui build to nocodb dir
+# 4. Build nocodb
 
 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 LOG_FILE=${SCRIPT_DIR}/build-local-docker-image.log
 ERROR=""
 
+function stop_and_remove_container() {
+    # Stop and remove the existing container
+    docker stop nocodb-local >/dev/null 2>&1
+    docker rm nocodb-local >/dev/null 2>&1
+}
+
+function remove_image() {
+    # Remove the existing image
+    docker rmi nocodb-local >/dev/null 2>&1
+}
+
 function build_sdk(){
-    #build nocodb-sdk    
-    cd ${SCRIPT_DIR}/packages/nocodb-sdk 
+    # build nocodb-sdk
+    cd ${SCRIPT_DIR}/packages/nocodb-sdk
     npm ci || ERROR="sdk build failed"
     npm run build || ERROR="sdk build failed"
 }
@@ -22,55 +34,59 @@ function build_gui(){
     # build nc-gui
     export NODE_OPTIONS="--max_old_space_size=16384"
     # generate static build of nc-gui
-    cd ${SCRIPT_DIR}/packages/nc-gui 
+    cd ${SCRIPT_DIR}/packages/nc-gui
     npm ci || ERROR="gui build failed"
     npm run generate || ERROR="gui build failed"
 }
 
 function copy_gui_artifacts(){
-     # copy nc-gui build to nocodb dir          
+     # copy nc-gui build to nocodb dir
     rsync -rvzh --delete ./dist/ ${SCRIPT_DIR}/packages/nocodb/docker/nc-gui/ || ERROR="copy_gui_artifacts failed"
 }
 
 function package_nocodb(){
     #build nocodb
-    # build nocodb ( pack nocodb-sdk and nc-gui )    
-    cd ${SCRIPT_DIR}/packages/nocodb  
+    # build nocodb ( pack nocodb-sdk and nc-gui )
+    cd ${SCRIPT_DIR}/packages/nocodb
     npm install || ERROR="package_nocodb failed"
     EE=true ./node_modules/.bin/webpack --config webpack.local.config.js || ERROR="package_nocodb failed"
 }
 
 function build_image(){
-    # build docker 
+    # build docker
     docker build . -f Dockerfile.local -t nocodb-local || ERROR="build_image failed"
 }
 
 function log_message(){
-    if [[ ${ERROR} != "" ]]; 
+    if [[ ${ERROR} != "" ]];
     then
         >&2 echo "build failed, Please check build-local-docker-image.log for more details"
-        >&2 echo "ERROR: ${ERROR}"      
-        exit 1  
-    else 
+        >&2 echo "ERROR: ${ERROR}"
+        exit 1
+    else
         echo 'docker image with tag "nocodb-local" built sussessfully. Use below sample command to run the container'
         echo 'docker run -d -p 3333:8080 --name nocodb-local nocodb-local '
     fi
 }
 
-echo "Info: Building nocodb-sdk" | tee ${LOG_FILE}
+echo "Info: Stopping and removing existing container and image" | tee ${LOG_FILE}
+stop_and_remove_container
+remove_image
+
+echo "Info: Building nocodb-sdk" | tee -a ${LOG_FILE}
 build_sdk 1>> ${LOG_FILE} 2>> ${LOG_FILE}
 
 echo "Info: Building nc-gui" | tee -a ${LOG_FILE}
 build_gui  1>> ${LOG_FILE} 2>> ${LOG_FILE}
 
-echo "Info: copy nc-gui build to nocodb dir" | tee -a ${LOG_FILE}
+echo "Info: Copy nc-gui build to nocodb dir" | tee -a ${LOG_FILE}
 copy_gui_artifacts 1>> ${LOG_FILE} 2>> ${LOG_FILE}
 
-echo "Info: build nocodb, package nocodb-sdk and nc-gui" | tee -a ${LOG_FILE}
+echo "Info: Build nocodb, package nocodb-sdk and nc-gui" | tee -a ${LOG_FILE}
 package_nocodb 1>> ${LOG_FILE} 2>> ${LOG_FILE}
 
 if [[ ${ERROR} == "" ]]; then
-    echo "Info: building docker image" | tee -a ${LOG_FILE}
+    echo "Info: Building docker image" | tee -a ${LOG_FILE}
     build_image 1>> ${LOG_FILE} 2>> ${LOG_FILE}
 fi
 

packages/nc-gui/components/account/Token.vue

@@ -101,7 +101,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
     <div class="max-w-[900px] mx-auto p-4" data-testid="nc-token-list">
-      <div class="text-xl my-4 text-left font-weight-bold">Token Management</div>
+      <div class="text-xl my-4 text-left font-weight-bold">{{ $t('title.tokenManagement') }}</div>
       <div class="py-2 flex gap-4 items-center">
         <div class="flex-grow"></div>
         <component :is="iconMap.reload" class="cursor-pointer" @click="loadTokens" />
@@ -114,7 +114,7 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         >
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />
-            Add new token
+            {{ $t('title.addNewToken') }}
           </div>
         </a-button>
       </div>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -112,7 +112,7 @@ const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
 const gridWrapper = ref<HTMLElement>()
 const tableHeadEl = ref<HTMLElement>()
-const tableBodyEl = ref<HTMLElement>()
+const tableBodyEl = ref<HTMLTableSectionElement>()
 const fillHandle = ref<HTMLElement>()
 
 const gridRect = useElementBounding(gridWrapper)
@@ -917,8 +917,6 @@ function addEmptyRow(row?: number) {
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
-const cellRefs = ref<{ el: HTMLElement }[]>([])
-
 const showFillHandle = computed(
   () =>
     !readOnly.value &&
@@ -929,17 +927,15 @@ const showFillHandle = computed(
 )
 
 const refreshFillHandle = () => {
-  const cellRef = cellRefs.value.find(
-    (cell) =>
-      cell.el.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
-      cell.el.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
-  )
-  if (cellRef) {
-    const cellRect = useElementBounding(cellRef.el)
-    if (!cellRect || !gridWrapper.value) return
-    fillHandleTop.value = cellRect.top.value + cellRect.height.value - gridRect.top.value + gridWrapper.value.scrollTop
-    fillHandleLeft.value = cellRect.left.value + cellRect.width.value - gridRect.left.value + gridWrapper.value.scrollLeft
-  }
+  nextTick(() => {
+    const cellRef = document.querySelector('.last-cell')
+    if (cellRef) {
+      const cellRect = cellRef.getBoundingClientRect()
+      if (!cellRect || !gridWrapper.value) return
+      fillHandleTop.value = cellRect.top + cellRect.height - gridRect.top.value + gridWrapper.value.scrollTop
+      fillHandleLeft.value = cellRect.left + cellRect.width - gridRect.left.value + gridWrapper.value.scrollLeft
+    }
+  })
 }
 
 const addRowExpandOnClose = (row: Row) => {
@@ -1132,7 +1128,6 @@ useEventListener(document, 'mouseup', () => {
                     <SmartsheetTableDataCell
                       v-for="(columnObj, colIndex) of fields"
                       :key="columnObj.id"
-                      ref="cellRefs"
                       class="cell relative nc-grid-cell"
                       :class="{
                         'cursor-pointer': hasEditPermission,
@@ -1141,6 +1136,9 @@ useEventListener(document, 'mouseup', () => {
                           hasEditPermission &&
                           ((activeCell.row === rowIndex && activeCell.col === colIndex) ||
                             (selectedRange._start?.row === rowIndex && selectedRange._start?.col === colIndex)),
+                        'last-cell':
+                          rowIndex === (isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
+                          colIndex === (isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
                         'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                         'align-middle': !rowHeight || rowHeight === 1,
                         'align-top': rowHeight && rowHeight !== 1,

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -21,6 +21,7 @@ import {
   onBeforeUnmount,
   provide,
   useAttachment,
+  useDebounceFn,
   useKanbanViewStoreOrThrow,
   useUndoRedo,
 } from '#imports'
@@ -30,6 +31,8 @@ interface Attachment {
   url: string
 }
 
+const INFINITY_SCROLL_THRESHOLD = 100
+
 const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
@@ -275,14 +278,14 @@ async function onMove(event: any, stackKey: string) {
   }
 }
 
-const kanbanListScrollHandler = async (e: any) => {
-  if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
+const kanbanListScrollHandler = useDebounceFn(async (e: any) => {
+  if (e.target.scrollTop + e.target.clientHeight + INFINITY_SCROLL_THRESHOLD >= 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) {

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
+import { ChangePageInj, PaginationDataInj, computed, iconMap, inject, isRtlLang, useI18n } from '#imports'
+import type { Language } from '~/lib'
 
 const props = defineProps<{
   alignCountOnRight?: boolean
 }>()
 
+const { locale } = useI18n()
+
 const paginatedData = inject(PaginationDataInj)!
 
 const changePage = inject(ChangePageInj)!
@@ -19,6 +22,8 @@ const page = computed({
     changePage?.(p)
   },
 })
+
+const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Language))
 </script>
 
 <template>
@@ -39,6 +44,7 @@ const page = computed({
       v-model:page-size="size"
       size="small"
       class="!text-xs !m-1 nc-pagination"
+      :class="{ 'rtl-pagination': isRTLLanguage }"
       :total="count"
       show-less-items
       :show-size-changer="false"
@@ -77,4 +83,9 @@ const page = computed({
 :deep(.ant-pagination-item-link) {
   @apply text-gray-500 flex items-center justify-center;
 }
+
+:deep(.rtl-pagination .ant-pagination-prev .ant-pagination-item-link),
+:deep(.rtl-pagination .ant-pagination-next .ant-pagination-item-link) {
+  @apply transform rotate-180;
+}
 </style>

packages/nc-gui/lang/en.json

@@ -211,7 +211,14 @@
     "codeSnippet": "Code Snippet",
     "keyboardShortcut": "Keyboard Shortcuts",
     "generateRandomName": "Generate Random Name",
-    "findRowByScanningCode": "Find row by scanning a QR or Barcode"
+    "findRowByScanningCode": "Find row by scanning a QR or Barcode",
+    "tokenManagement": "Token Management",
+    "addNewToken": "Add new token",
+    "accountSettings": "Account Settings",
+    "resetPasswordMenu": "Reset Password",
+    "tokens": "Tokens",
+    "userManagement": "User Management",
+    "licence": "Licence"
   },
   "labels": {
     "createdBy": "Created By",

packages/nc-gui/package.json

@@ -54,7 +54,7 @@
     "leaflet.markercluster": "^1.5.3",
     "locale-codes": "^1.3.1",
     "monaco-editor": "^0.33.0",
-    "nocodb-sdk": "0.109.4",
+    "nocodb-sdk": "file:../nocodb-sdk",
     "papaparse": "^5.3.2",
     "pinia": "^2.0.33",
     "qrcode": "^1.5.1",