Merge branch 'develop' of https://github.com/nocodb/nocodb into fix/tooltip-showOnTruncate

9 months ago · 37a706c67c
10 changed files with 171 additions and 60 deletions
--- 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']
--- 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,26 +34,73 @@ const vModel = computed({
 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>
-  <span v-else>{{ vModel }}</span>
+  <div class="nc-filter-value-select 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>
 </template>
--- 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"
--- 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>
--- a/packages/nc-gui/components/smartsheet/column/PercentOptionsLegacy.vue
+++ 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>
--- 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",
--- 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');
    }
--- 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');
    }
--- 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, '_'));
  }
--- 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'] }
              : {}),