From 3dc46bdafb69c04a16cdf47934239e3aabeef5d5 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 5 Dec 2023 17:15:37 +0300
Subject: [PATCH 1/6] fix: filter mimetypes to preview in browser

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../attachments-secure.controller.ts           |  6 +++++-
 .../src/controllers/attachments.controller.ts  | 18 +++++++++++++++---
 .../nocodb/src/services/attachments.service.ts |  8 ++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/nocodb/src/controllers/attachments-secure.controller.ts b/packages/nocodb/src/controllers/attachments-secure.controller.ts
index e19b300077..5d7145307e 100644
--- a/packages/nocodb/src/controllers/attachments-secure.controller.ts
+++ b/packages/nocodb/src/controllers/attachments-secure.controller.ts
@@ -75,7 +75,11 @@ export class AttachmentsSecureController {
         path: path.join('nc', 'uploads', fpath),
       });
 
-      res.sendFile(file.path);
+      if (this.attachmentsService.previewAvailable(file.type)) {
+        res.sendFile(file.path);
+      } else {
+        res.download(file.path);
+      }
     } catch (e) {
       res.status(404).send('Not found');
     }
diff --git a/packages/nocodb/src/controllers/attachments.controller.ts b/packages/nocodb/src/controllers/attachments.controller.ts
index 00a471e1e5..353e840eb7 100644
--- a/packages/nocodb/src/controllers/attachments.controller.ts
+++ b/packages/nocodb/src/controllers/attachments.controller.ts
@@ -68,7 +68,11 @@ export class AttachmentsController {
         path: path.join('nc', 'uploads', filename),
       });
 
-      res.sendFile(file.path);
+      if (this.attachmentsService.previewAvailable(file.type)) {
+        res.sendFile(file.path);
+      } else {
+        res.download(file.path);
+      }
     } catch (e) {
       res.status(404).send('Not found');
     }
@@ -94,7 +98,11 @@ export class AttachmentsController {
         ),
       });
 
-      res.sendFile(file.path);
+      if (this.attachmentsService.previewAvailable(file.type)) {
+        res.sendFile(file.path);
+      } else {
+        res.download(file.path);
+      }
     } catch (e) {
       res.status(404).send('Not found');
     }
@@ -109,7 +117,11 @@ export class AttachmentsController {
         path: path.join('nc', 'uploads', fpath),
       });
 
-      res.sendFile(file.path);
+      if (this.attachmentsService.previewAvailable(file.type)) {
+        res.sendFile(file.path);
+      } else {
+        res.download(file.path);
+      }
     } catch (e) {
       res.status(404).send('Not found');
     }
diff --git a/packages/nocodb/src/services/attachments.service.ts b/packages/nocodb/src/services/attachments.service.ts
index ead5f4c4bb..ff6ba485ea 100644
--- a/packages/nocodb/src/services/attachments.service.ts
+++ b/packages/nocodb/src/services/attachments.service.ts
@@ -161,6 +161,14 @@ export class AttachmentsService {
     return { path: filePath, type };
   }
 
+  previewAvailable(mimetype: string) {
+    const available = ['image', 'pdf', 'text/plain'];
+    if (available.some((type) => mimetype.includes(type))) {
+      return true;
+    }
+    return false;
+  }
+
   sanitizeUrlPath(paths) {
     return paths.map((url) => url.replace(/[/.?#]+/g, '_'));
   }

From c70ae51e98098ea14a83ae264fd347dae3e2d7ed Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 1 Dec 2023 17:10:01 +0300
Subject: [PATCH 2/6] feat: display as progress

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components.d.ts               |  1 +
 packages/nc-gui/components/cell/Percent.vue   | 12 +++++
 .../smartsheet/column/EditOrAdd.vue           |  1 +
 .../smartsheet/column/PercentOptions.vue      | 51 ++++++++-----------
 .../column/PercentOptionsLegacy.vue           | 47 +++++++++++++++++
 5 files changed, 81 insertions(+), 31 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 70144a9a06..5ae4fa0235 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -49,6 +49,7 @@ declare module '@vue/runtime-core' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
     APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 29c2efe3f9..cdf9993658 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -12,6 +12,8 @@ const emits = defineEmits(['update:modelValue'])
 
 const { showNull } = useGlobal()
 
+const column = inject(ColumnInj)!
+
 const editEnabled = inject(EditModeInj)
 
 const isEditColumn = inject(EditColumnInj, ref(false))
@@ -32,6 +34,13 @@ const vModel = computed({
 const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
+
+const percentMeta = computed(() => {
+  return {
+    is_progress: false,
+    ...parseProp(column.value?.meta),
+  }
+})
 </script>
 
 <template>
@@ -53,5 +62,8 @@ const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value
     @mousedown.stop
   />
   <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+  <div v-else-if="percentMeta.is_progress === true && vModel !== null" class="px-3">
+    <a-progress :percent="Number(vModel)" size="small" />
+  </div>
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 67cf1abd6c..7f29e09e79 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -312,6 +312,7 @@ if (props.fromTableExplorer) {
             v-model:value="formState"
           />
           <LazySmartsheetColumnLinkOptions v-if="isEdit && formState.uidt === UITypes.Links" v-model:value="formState" />
+          <LazySmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" v-model:value="formState" />
           <LazySmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
           <SmartsheetColumnSelectOptions
             v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect"
diff --git a/packages/nc-gui/components/smartsheet/column/PercentOptions.vue b/packages/nc-gui/components/smartsheet/column/PercentOptions.vue
index f296ba5bba..ef0108e3a7 100644
--- a/packages/nc-gui/components/smartsheet/column/PercentOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/PercentOptions.vue
@@ -1,47 +1,36 @@
-<!-- File not in use for now -->
-
 <script setup lang="ts">
-import { precisions, useVModel } from '#imports'
+import { useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
+  isEdit: boolean
 }>()
 
 const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-if (!vModel.value.meta) vModel.value.meta = {}
-if (!vModel.value.meta?.negative) vModel.value.meta.negative = false
-if (!vModel.value.meta?.default) vModel.value.meta.default = null
-if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].id
+const validators = {}
+
+const { setAdditionalValidations } = useColumnCreateStoreOrThrow()
+
+setAdditionalValidations({
+  ...validators,
+})
+
+// set default value
+vModel.value.meta = {
+  is_progress: false,
+  ...vModel.value.meta,
+}
 </script>
 
 <template>
-  <div class="flex flex-col mt-2 gap-2">
-    <div class="flex flex-row space-x-2">
-      <a-form-item class="flex w-1/2" :label="$t('placeholder.precision')">
-        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
-          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
-            <div class="flex flex-row items-center">
-              <div class="text-xs">
-                {{ precision.title }}
-              </div>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item :label="$t('labels.defaultNumberPercent')">
-        <a-input v-model:value="vModel.meta.default" :name="$t('labels.default')" type="number" />
-      </a-form-item>
-    </div>
-    <div class="flex flex-row mt-2">
-      <a-form-item>
-        <div class="flex flex-row space-x-2 items-center">
-          <a-switch v-model:checked="vModel.meta.negative" :name="$t('labels.negative')" />
-          <div class="text-xs">{{ $t('placeholder.allowNegativeNumbers') }}</div>
-        </div>
-      </a-form-item>
+  <div class="flex flex-col">
+    <div>
+      <a-checkbox v-if="vModel.meta" v-model:checked="vModel.meta.is_progress" class="ml-1 mb-1">
+        <span class="text-[10px] text-gray-600">Display as progress</span>
+      </a-checkbox>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue b/packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue
new file mode 100644
index 0000000000..f296ba5bba
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue
@@ -0,0 +1,47 @@
+<!-- File not in use for now -->
+
+<script setup lang="ts">
+import { precisions, useVModel } from '#imports'
+
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const vModel = useVModel(props, 'value', emit)
+
+if (!vModel.value.meta) vModel.value.meta = {}
+if (!vModel.value.meta?.negative) vModel.value.meta.negative = false
+if (!vModel.value.meta?.default) vModel.value.meta.default = null
+if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].id
+</script>
+
+<template>
+  <div class="flex flex-col mt-2 gap-2">
+    <div class="flex flex-row space-x-2">
+      <a-form-item class="flex w-1/2" :label="$t('placeholder.precision')">
+        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
+          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
+            <div class="flex flex-row items-center">
+              <div class="text-xs">
+                {{ precision.title }}
+              </div>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item :label="$t('labels.defaultNumberPercent')">
+        <a-input v-model:value="vModel.meta.default" :name="$t('labels.default')" type="number" />
+      </a-form-item>
+    </div>
+    <div class="flex flex-row mt-2">
+      <a-form-item>
+        <div class="flex flex-row space-x-2 items-center">
+          <a-switch v-model:checked="vModel.meta.negative" :name="$t('labels.negative')" />
+          <div class="text-xs">{{ $t('placeholder.allowNegativeNumbers') }}</div>
+        </div>
+      </a-form-item>
+    </div>
+  </div>
+</template>

From a7dc9bd1067a6fb97de2cd51336f417fafa43fd7 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 2 Dec 2023 12:12:08 +0300
Subject: [PATCH 3/6] fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/Percent.vue | 79 +++++++++++++++------
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index cdf9993658..0492fb5e32 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -35,35 +35,72 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 
 const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLInputElement)?.focus()
 
+const cellFocused = ref(false)
+
+const expandedEditEnabled = ref(false)
+
 const percentMeta = computed(() => {
   return {
     is_progress: false,
     ...parseProp(column.value?.meta),
   }
 })
+
+const onBlur = () => {
+  if (editEnabled) {
+    editEnabled.value = false
+  }
+  cellFocused.value = false
+  expandedEditEnabled.value = false
+}
+
+const onFocus = () => {
+  cellFocused.value = true
+}
+
+const onMouseover = () => {
+  expandedEditEnabled.value = true
+}
+
+const onMouseleave = () => {
+  if (!cellFocused.value) {
+    expandedEditEnabled.value = false
+  }
+}
 </script>
 
 <template>
-  <input
-    v-if="editEnabled"
-    :ref="focus"
-    v-model="vModel"
-    class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
-    :class="{ '!px-2': editEnabled }"
-    type="number"
-    :placeholder="isEditColumn ? $t('labels.optional') : ''"
-    @blur="editEnabled = false"
-    @keydown.down.stop
-    @keydown.left.stop
-    @keydown.right.stop
-    @keydown.up.stop
-    @keydown.delete.stop
-    @selectstart.capture.stop
-    @mousedown.stop
-  />
-  <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
-  <div v-else-if="percentMeta.is_progress === true && vModel !== null" class="px-3">
-    <a-progress :percent="Number(vModel)" size="small" />
+  <div class="w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <input
+      v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
+      :ref="focus"
+      v-model="vModel"
+      class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base p-1"
+      :class="{ '!px-2': editEnabled }"
+      type="number"
+      :placeholder="isEditColumn ? $t('labels.optional') : ''"
+      @blur="onBlur"
+      @focus="onFocus"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
+      @keydown.delete.stop
+      @selectstart.capture.stop
+      @mousedown.stop
+    />
+    <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+    <div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
+      <a-progress
+        :percent="Number(parseFloat(vModel.toString()).toFixed(2))"
+        size="small"
+        status="normal"
+        stroke-color="#3366FF"
+        trail-color="#E5E5E5"
+        :show-info="false"
+      />
+    </div>
+    <!-- nbsp to keep height even if vModel is zero length -->
+    <span v-else>{{ vModel }}&nbsp;</span>
   </div>
-  <span v-else>{{ vModel }}</span>
 </template>

From 5a3f7f1138456656e8c5719225cef20258a7fec2 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 5 Dec 2023 18:49:30 +0300
Subject: [PATCH 4/6] fix: add test selector to wrapper

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/Percent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 0492fb5e32..516ddfe294 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -70,7 +70,7 @@ const onMouseleave = () => {
 </script>
 
 <template>
-  <div class="w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
+  <div class="nc-filter-value-select w-full" @mouseover="onMouseover" @mouseleave="onMouseleave">
     <input
       v-if="(!isExpandedFormOpen && editEnabled) || (isExpandedFormOpen && expandedEditEnabled)"
       :ref="focus"

From c2e9ab4bee9ca846a50e9603d1511a26d1b452c8 Mon Sep 17 00:00:00 2001
From: navi <oof1lab@gmail.com>
Date: Wed, 6 Dec 2023 07:38:41 +0530
Subject: [PATCH 5/6] New translations en.json (Japanese)

---
 packages/nc-gui/lang/ja.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/lang/ja.json b/packages/nc-gui/lang/ja.json
index 75597557f4..0d74ad76f9 100644
--- a/packages/nc-gui/lang/ja.json
+++ b/packages/nc-gui/lang/ja.json
@@ -1,10 +1,10 @@
 {
   "dashboards": {
-    "create_new_dashboard_project": "Create New Interface",
-    "connect_data_sources": "Connect data sources",
-    "alert": "Alert",
-    "alert-message": "No databases have been connected. Connect database bases to build interfaces. Skip this step and add databases from the base home page later.",
-    "select_database_projects_that_you_want_to_link_to_this_dashboard_projects": "Select Database Bases that you want to link to this Interface.",
+    "create_new_dashboard_project": "インターフェースを作成",
+    "connect_data_sources": "データソースに接続",
+    "alert": "アラート",
+    "alert-message": "データベースが接続されていません。DBベースを接続してインターフェースを構成してください。スキップして後でベースのホームページを追加することもできます。",
+    "select_database_projects_that_you_want_to_link_to_this_dashboard_projects": "このインターフェースに接続するDBベースを選択します。",
     "create_interface": "Create interface",
     "project_name": "Base Name",
     "connect": "Connect",

From adb419830c77332945f1cfa5a03f3a15685b1b87 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 6 Dec 2023 10:32:09 +0530
Subject: [PATCH 6/6] fix: extract base id using `ncProjectId` since the
 property name is not yet updated

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../src/strategies/authtoken.strategy/authtoken.strategy.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nocodb/src/strategies/authtoken.strategy/authtoken.strategy.ts b/packages/nocodb/src/strategies/authtoken.strategy/authtoken.strategy.ts
index f666ac1b10..83c4fd48cc 100644
--- a/packages/nocodb/src/strategies/authtoken.strategy/authtoken.strategy.ts
+++ b/packages/nocodb/src/strategies/authtoken.strategy/authtoken.strategy.ts
@@ -31,7 +31,7 @@ export class AuthTokenStrategy extends PassportStrategy(Strategy, 'authtoken') {
         const dbUser: Record<string, any> = await User.getWithRoles(
           apiToken.fk_user_id,
           {
-            baseId: req['ncBaseId'],
+            baseId: req['ncProjectId'],
             ...(req['ncWorkspaceId']
               ? { workspaceId: req['ncWorkspaceId'] }
               : {}),