github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

chore(gui-v2): cleanup typecheck issues

pull/3158/head
braks 2 years ago
parent
4373c38311
commit
e31ad66aaf
4 changed files with 55 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      packages/nc-gui-v2/components/cell/DatePicker.vue
  2. 15
      packages/nc-gui-v2/components/cell/YearPicker.vue
  3. 14
      packages/nc-gui-v2/components/general/ColorPicker.vue
  4. 60
      packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

15
packages/nc-gui-v2/components/cell/DatePicker.vue
Unescape View File

@ -1,19 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { ColumnInj } from '#imports' import { ColumnInj, EditModeInj, computed, inject, ref, watch } from '#imports'
import { EditModeInj } from '~/context'
interface Props { interface Props {
modelValue: string | null | undefined modelValue?: string | null
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const columnMeta = inject(ColumnInj, null) const columnMeta = inject(ColumnInj, null)!
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)!
let isDateInvalid = $ref(false) let isDateInvalid = $ref(false)
@ -43,7 +42,7 @@ const localState = $computed({
} }
}, },
}) })
const open = ref(false) const open = ref<boolean>(false)
const randomClass = `picker_${Math.floor(Math.random() * 99999)}` const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
watch( watch(
@ -55,6 +54,8 @@ watch(
}, },
{ flush: 'post' }, { flush: 'post' },
) )
const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled.value ? 'Select date' : ''))
</script> </script>
<template> <template>
@ -63,7 +64,7 @@ watch(
:bordered="false" :bordered="false"
class="!w-full px-1" class="!w-full px-1"
:format="dateFormat" :format="dateFormat"
:placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''" :placeholder="placeholder"
:allow-clear="!editEnabled" :allow-clear="!editEnabled"
:input-read-only="true" :input-read-only="true"
:dropdown-class-name="randomClass" :dropdown-class-name="randomClass"

15
packages/nc-gui-v2/components/cell/YearPicker.vue
Unescape View File

@ -1,17 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { onClickOutside } from '@vueuse/core'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { EditModeInj } from '~/context' import { EditModeInj, computed, inject, onClickOutside, ref, watch } from '#imports'
interface Props { interface Props {
modelValue: number | string | null | undefined modelValue?: number | string | null
} }
const { modelValue } = defineProps<Props>() const { modelValue } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)!
let isYearInvalid = $ref(false) let isYearInvalid = $ref(false)
@ -41,7 +40,7 @@ const localState = $computed({
}, },
}) })
const open = ref(false) const open = ref<boolean>(false)
const randomClass = `picker_${Math.floor(Math.random() * 99999)}` const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
watch( watch(
@ -53,6 +52,8 @@ watch(
}, },
{ flush: 'post' }, { flush: 'post' },
) )
const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled.value ? 'Select year' : ''))
</script> </script>
<template> <template>
@ -61,7 +62,7 @@ watch(
picker="year" picker="year"
:bordered="false" :bordered="false"
class="!w-full px-1" class="!w-full px-1"
:placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''" :placeholder="placeholder"
:allow-clear="!editEnabled" :allow-clear="!editEnabled"
:input-read-only="true" :input-read-only="true"
:open="editEnabled ? false : open" :open="editEnabled ? false : open"
@ -72,5 +73,3 @@ watch(
<template #suffixIcon></template> <template #suffixIcon></template>
</a-date-picker> </a-date-picker>
</template> </template>
<style scoped></style>

14
packages/nc-gui-v2/components/general/ColorPicker.vue
Unescape View File

@ -4,7 +4,7 @@ import { enumColor } from '@/utils'
import { computed, ref, watch } from '#imports' import { computed, ref, watch } from '#imports'
interface Props { interface Props {
modelValue: string | any modelValue?: string | any
colors?: string[] colors?: string[]
rowSize?: number rowSize?: number
advanced?: boolean advanced?: boolean
@ -28,18 +28,18 @@ const vModel = computed({
}, },
}) })
const picked = ref(props.modelValue || enumColor.light[0]) const picked = ref<string | Record<string, any>>(props.modelValue || enumColor.light[0])
const selectColor = (color: Record<string, any>) => { const selectColor = (color: string | Record<string, any>) => {
picked.value = color.hex ? color.hex : color picked.value = typeof color === 'string' ? color : color.hex ? color.hex : color
vModel.value = color.hex ? color.hex : color vModel.value = typeof color === 'string' ? color : color.hex ? color.hex : color
} }
const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase() const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
watch(picked, (n, _o) => { watch(picked, (n, _o) => {
if (!props.pickButton) { if (!props.pickButton) {
vModel.value = n.hex ? n.hex : n vModel.value = typeof n === 'string' ? n : n.hex ? n.hex : n
} }
}) })
</script> </script>
@ -48,7 +48,7 @@ watch(picked, (n, _o) => {
<div class="color-picker"> <div class="color-picker">
<div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row"> <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
<button <button
v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)" v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
:key="`color-${colId}-${i}`" :key="`color-${colId}-${i}`"
class="color-selector" class="color-selector"
:class="compare(picked, color) ? 'selected' : ''" :class="compare(picked, color) ? 'selected' : ''"

60
packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
Unescape View File

@ -1,18 +1,24 @@
<script lang="ts" setup> <script lang="ts" setup>
import * as XLSX from 'xlsx' import * as XLSX from 'xlsx'
import { ExportTypes } from 'nocodb-sdk' // todo: export types is missing EXCEL
// import { ExportTypes } from 'nocodb-sdk'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useNuxtApp } from '#app' import {
import { useProject } from '#imports' ActiveViewInj,
import { ActiveViewInj, MetaInj } from '~/context' MetaInj,
import { extractSdkResponseErrorMsg } from '~/utils' extractSdkResponseErrorMsg,
import MdiFlashIcon from '~icons/mdi/flash-outline' inject,
import MdiMenuDownIcon from '~icons/mdi/menu-down' ref,
import MdiDownloadIcon from '~icons/mdi/download-outline' useNuxtApp,
import MdiUploadIcon from '~icons/mdi/upload-outline' useProject,
import MdiHookIcon from '~icons/mdi/hook' useUIPermission,
import MdiViewListIcon from '~icons/mdi/view-list-outline' } from '#imports'
enum ExportTypes {
EXCEL = 'excel',
CSV = 'csv',
}
const sharedViewListDlg = ref(false) const sharedViewListDlg = ref(false)
@ -22,14 +28,6 @@ const isView = false
// TODO: pending for shared view // TODO: pending for shared view
// interface Props {
// publicViewId?: string
// queryParams?: Record<string, any>
// reqPayload?: Record<string, any>
// }
// const { publicViewId, queryParams, reqPayload } = defineProps<Props>()
const { project } = useProject() const { project } = useProject()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -44,7 +42,7 @@ const quickImportDialog = ref(false)
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => { const exportFile = async (exportType: ExportTypes) => {
let offset = 0 let offset = 0
let c = 1 let c = 1
const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob' const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
@ -114,52 +112,59 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
<a-dropdown> <a-dropdown>
<a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn"> <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
<div class="flex gap-1 align-center"> <div class="flex gap-1 align-center">
<MdiFlashIcon /> <MdiFlashOutline />
<!-- More --> <!-- More -->
<span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span> <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
<MdiMenuDownIcon class="text-grey" />
<MdiMenuDown class="text-grey" />
</div> </div>
</a-button> </a-button>
<template #overlay> <template #overlay>
<div class="bg-white shadow-lg !border"> <div class="bg-white shadow-lg !border">
<div> <div>
<div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)"> <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
<MdiDownloadIcon /> <MdiDownloadOutline />
<!-- Download as CSV --> <!-- Download as CSV -->
{{ $t('activity.downloadCSV') }} {{ $t('activity.downloadCSV') }}
</div> </div>
<div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)"> <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
<MdiDownloadIcon /> <MdiDownloadOutline />
<!-- Download as XLSX --> <!-- Download as XLSX -->
{{ $t('activity.downloadExcel') }} {{ $t('activity.downloadExcel') }}
</div> </div>
<div <div
v-if="isUIAllowed('csvImport') && !isView" v-if="isUIAllowed('csvImport') && !isView"
v-t="['a:actions:upload-csv']" v-t="['a:actions:upload-csv']"
class="nc-menu-item" class="nc-menu-item"
@click="quickImportDialog = true" @click="quickImportDialog = true"
> >
<MdiUploadIcon /> <MdiUploadOutline />
<!-- Upload CSV --> <!-- Upload CSV -->
{{ $t('activity.uploadCSV') }} {{ $t('activity.uploadCSV') }}
</div> </div>
<div <div
v-if="isUIAllowed('SharedViewList') && !isView" v-if="isUIAllowed('SharedViewList') && !isView"
v-t="['a:actions:shared-view-list']" v-t="['a:actions:shared-view-list']"
class="nc-menu-item" class="nc-menu-item"
@click="sharedViewListDlg = true" @click="sharedViewListDlg = true"
> >
<MdiViewListIcon /> <MdiViewListOutline />
<!-- Shared View List --> <!-- Shared View List -->
{{ $t('activity.listSharedView') }} {{ $t('activity.listSharedView') }}
</div> </div>
<div <div
v-if="isUIAllowed('webhook') && !isView" v-if="isUIAllowed('webhook') && !isView"
v-t="['c:actions:webhook']" v-t="['c:actions:webhook']"
class="nc-menu-item" class="nc-menu-item"
@click="showWebhookDrawer = true" @click="showWebhookDrawer = true"
> >
<MdiHookIcon /> <MdiHook />
{{ $t('objects.webhooks') }} {{ $t('objects.webhooks') }}
</div> </div>
</div> </div>
@ -168,6 +173,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
</a-dropdown> </a-dropdown>
<DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" /> <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
<WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" /> <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
<a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null"> <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">

Write Preview
Loading…
Cancel
Save