Browse Source

chore(gui-v2): cleanup typecheck issues

pull/3158/head
braks 2 years ago
parent
commit
0e699f89c0
  1. 31
      packages/nc-gui-v2/components/cell/MultiSelect.vue
  2. 14
      packages/nc-gui-v2/components/cell/SingleSelect.vue
  3. 20
      packages/nc-gui-v2/components/general/ColorPicker.vue
  4. 12
      packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
  5. 13
      packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
  6. 9
      packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
  7. 16
      packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
  8. 3
      packages/nc-gui-v2/composables/useViewData.ts
  9. 3
      packages/nc-gui-v2/httpsnippet-shims.d.ts
  10. 1
      packages/nc-gui-v2/vue-color-shims.d.ts

31
packages/nc-gui-v2/components/cell/MultiSelect.vue

@ -1,7 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Select as AntSelect } from 'ant-design-vue' import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionType } from 'nocodb-sdk' import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
import { EditModeInj } from '~/context' import { EditModeInj } from '~/context'
import MdiCloseCircle from '~icons/mdi/close-circle' import MdiCloseCircle from '~icons/mdi/close-circle'
@ -32,9 +31,9 @@ const isOpen = ref(false)
const options = computed(() => { const options = computed(() => {
if (column?.value.colOptions) { if (column?.value.colOptions) {
const opts = column.value.colOptions const opts = column.value.colOptions
? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
: [] : []
for (const op of opts.filter((el: SelectOptionType) => el.order === null)) { for (const op of opts.filter((el: any) => el.order === null)) {
op.title = op.title.replace(/^'/, '').replace(/'$/, '') op.title = op.title.replace(/^'/, '').replace(/'$/, '')
} }
return opts return opts
@ -43,7 +42,7 @@ const options = computed(() => {
}) })
const vModel = computed({ const vModel = computed({
get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title), get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')), set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
}) })
@ -52,8 +51,8 @@ const selectedTitles = computed(() =>
? typeof modelValue === 'string' ? typeof modelValue === 'string'
? isMysql ? isMysql
? modelValue.split(',').sort((a, b) => { ? modelValue.split(',').sort((a, b) => {
const opa = options.value.find((el: SelectOptionType) => el.title === a) const opa = options.value.find((el: any) => el.title === a)
const opb = options.value.find((el: SelectOptionType) => el.title === b) const opb = options.value.find((el: any) => el.title === b)
if (opa && opb) { if (opa && opb) {
return opa.order - opb.order return opa.order - opb.order
} }
@ -83,25 +82,21 @@ const handleClose = (e: MouseEvent) => {
} }
onMounted(() => { onMounted(() => {
selectedIds.value = selectedTitles.value.map((el) => { selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
return options.value.find((op: SelectOptionType) => op.title === el).id
})
}) })
useEventListener(document, 'click', handleClose) useEventListener(document, 'click', handleClose)
watch( watch(
() => modelValue, () => modelValue,
(_n, _o) => { () => {
selectedIds.value = selectedTitles.value.map((el) => { selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
return options.value.find((op: SelectOptionType) => op.title === el).id
})
}, },
) )
watch(isOpen, (n, _o) => { watch(isOpen, (n, _o) => {
if (n === false) { if (!n) {
aselect.value.blur() aselect.value?.blur()
} }
}) })
</script> </script>
@ -128,10 +123,10 @@ watch(isOpen, (n, _o) => {
</a-select-option> </a-select-option>
<template #tagRender="{ value: val, onClose }"> <template #tagRender="{ value: val, onClose }">
<a-tag <a-tag
v-if="options.find((el: SelectOptionType) => el.title === val)" v-if="options.find((el) => el.title === val)"
class="rounded-tag" class="rounded-tag"
:style="{ display: 'flex', alignItems: 'center' }" :style="{ display: 'flex', alignItems: 'center' }"
:color="options.find((el: SelectOptionType) => el.title === val).color" :color="options.find((el) => el.title === val).color"
:closable="active && (vModel.length > 1 || !column?.rqd)" :closable="active && (vModel.length > 1 || !column?.rqd)"
:close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })" :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
@close="onClose" @close="onClose"

14
packages/nc-gui-v2/components/cell/SingleSelect.vue

@ -1,7 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Select as AntSelect } from 'ant-design-vue' import type { Select as AntSelect } from 'ant-design-vue'
import type { SelectOptionType } from 'nocodb-sdk' import { ActiveCellInj, ColumnInj, computed, inject, ref, useEventListener, watch } from '#imports'
import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
import { EditModeInj } from '~/context' import { EditModeInj } from '~/context'
interface Props { interface Props {
@ -14,8 +13,6 @@ const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj) const column = inject(ColumnInj)
// const isForm = inject<boolean>('isForm', false)
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
@ -32,9 +29,10 @@ const vModel = computed({
const options = computed(() => { const options = computed(() => {
if (column?.value.colOptions) { if (column?.value.colOptions) {
const opts = column.value.colOptions const opts = column.value.colOptions
? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] ? // todo: fix colOptions type, options does not exist as a property
(column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
: [] : []
for (const op of opts.filter((el: SelectOptionType) => el.order === null)) { for (const op of opts.filter((el: any) => el.order === null)) {
op.title = op.title.replace(/^'/, '').replace(/'$/, '') op.title = op.title.replace(/^'/, '').replace(/'$/, '')
} }
return opts return opts
@ -61,8 +59,8 @@ const handleClose = (e: MouseEvent) => {
useEventListener(document, 'click', handleClose) useEventListener(document, 'click', handleClose)
watch(isOpen, (n, _o) => { watch(isOpen, (n, _o) => {
if (n === false) { if (!n) {
aselect.value.blur() aselect.value?.blur()
} }
}) })
</script> </script>

20
packages/nc-gui-v2/components/general/ColorPicker.vue

@ -1,21 +1,22 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Chrome } from '@ckpack/vue-color' import { Chrome } from '@ckpack/vue-color'
import { enumColor } from '@/utils' import { enumColor } from '@/utils'
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
pickButton?: Boolean pickButton?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
modelValue: () => enumColor.light[0], modelValue: () => enumColor.light[0],
colors: () => enumColor.light.concat(enumColor.dark), colors: () => enumColor.light.concat(enumColor.dark),
rowSize: () => 10, rowSize: 10,
advanced: () => true, advanced: true,
pickButton: () => false, pickButton: false,
}) })
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -29,17 +30,12 @@ const vModel = computed({
const picked = ref(props.modelValue || enumColor.light[0]) const picked = ref(props.modelValue || enumColor.light[0])
const selectColor = (color: any) => { const selectColor = (color: Record<string, any>) => {
picked.value = color.hex ? color.hex : color picked.value = color.hex ? color.hex : color
vModel.value = color.hex ? color.hex : color vModel.value = color.hex ? color.hex : color
} }
const compare = (colorA: String, colorB: String) => { const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) {
return colorA.toLowerCase() === colorB.toLowerCase()
}
return false
}
watch(picked, (n, _o) => { watch(picked, (n, _o) => {
if (!props.pickButton) { if (!props.pickButton) {

12
packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@ -15,16 +15,14 @@ const columns = computed(() =>
label: c.title, label: c.title,
})), })),
) )
function onPressEnter() {
reloadData.trigger()
}
</script> </script>
<template> <template>
<a-input <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
v-model:value="search.query"
size="small"
class="max-w-[200px]"
placeholder="Filter query"
@press-enter="reloadData.trigger(null)"
>
<template #addonBefore> <template #addonBefore>
<div class="flex align-center relative" @click="isDropdownOpen = true"> <div class="flex align-center relative" @click="isDropdownOpen = true">
<MdiMagnify class="text-grey" /> <MdiMagnify class="text-grey" />

13
packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue

@ -3,6 +3,7 @@ import HTTPSnippet from 'httpsnippet'
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { ActiveViewInj, MetaInj } from '~/context' import { ActiveViewInj, MetaInj } from '~/context'
import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
const props = defineProps<Props>() const props = defineProps<Props>()
@ -13,11 +14,17 @@ interface Props {
} }
const { project } = $(useProject()) const { project } = $(useProject())
const { appInfo, token } = $(useGlobal()) const { appInfo, token } = $(useGlobal())
const meta = $(inject(MetaInj))
const view = $(inject(ActiveViewInj)) const meta = $(inject(MetaInj)!)
const view = $(inject(ActiveViewInj)!)
const { xWhere } = useSmartsheetStoreOrThrow() const { xWhere } = useSmartsheetStoreOrThrow()
const { queryParams } = $(useViewData(meta, view as any, xWhere))
const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
const { copy } = useClipboard() const { copy } = useClipboard()
let vModel = $(useVModel(props, 'modelValue', emits)) let vModel = $(useVModel(props, 'modelValue', emits))

9
packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useLTARStoreOrThrow } from '#imports' import { inject, ref, useLTARStoreOrThrow } from '#imports'
import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context' import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
interface Props { interface Props {
@ -11,13 +11,13 @@ const { value, item } = defineProps<Props>()
const emit = defineEmits(['unlink']) const emit = defineEmits(['unlink'])
const { relatedTableMeta } = useLTARStoreOrThrow() const { relatedTableMeta } = useLTARStoreOrThrow()!
const editEnabled = inject(EditModeInj) const editEnabled = inject(EditModeInj)!
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
const isForm = inject(IsFormInj) const isForm = inject(IsFormInj)!
const expandedFormDlg = ref(false) const expandedFormDlg = ref(false)
</script> </script>
@ -29,6 +29,7 @@ const expandedFormDlg = ref(false)
@click="expandedFormDlg = true" @click="expandedFormDlg = true"
> >
<span class="name">{{ value }}</span> <span class="name">{{ value }}</span>
<div v-show="active || isForm" v-if="editEnabled" class="flex align-center"> <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
<MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" /> <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
</div> </div>

16
packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

@ -2,9 +2,8 @@ import { message } from 'ant-design-vue'
import { UITypes } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk' import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { useNuxtApp } from '#app' import type { Row } from './useViewData'
import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports' import { useInjectionState, useMetas, useNuxtApp, useProject, useVirtualCell } from '#imports'
import type { Row } from '~/composables/useViewData'
import { NOCO } from '~/lib' import { NOCO } from '~/lib'
import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils' import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
@ -47,7 +46,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
project.value.title as string, project.value.title as string,
meta.value.title as string, meta.value.title as string,
rowId, rowId,
type, type as 'mm' | 'hm',
column.title as string, column.title as string,
relatedRowId, relatedRowId,
) )
@ -69,14 +68,19 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
if (isHm || isMm) { if (isHm || isMm) {
const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[] const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
for (const relatedRow of relatedRows) { for (const relatedRow of relatedRows) {
await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type) await linkRecord(
id,
extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
column,
colOptions.type as RelationTypes,
)
} }
} else if (isBt && state?.value?.[column.title!]) { } else if (isBt && state?.value?.[column.title!]) {
await linkRecord( await linkRecord(
id, id,
extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]), extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
column, column,
colOptions.type, colOptions.type as RelationTypes,
) )
} }
} }

3
packages/nc-gui-v2/composables/useViewData.ts

@ -1,8 +1,7 @@
import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk' import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useNuxtApp } from '#app' import { ref, useNuxtApp, useProject } from '#imports'
import { useProject } from '#imports'
import { NOCO } from '~/lib' import { NOCO } from '~/lib'
import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils' import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'

3
packages/nc-gui-v2/httpsnippet-shims.d.ts vendored

@ -0,0 +1,3 @@
declare module 'httpsnippet' {
export default new ((): any => {})()
}

1
packages/nc-gui-v2/vue-color-shims.d.ts vendored

@ -1,4 +1,5 @@
declare module '@ckpack/vue-color' { declare module '@ckpack/vue-color' {
import type { Component } from '@vue/runtime-core' import type { Component } from '@vue/runtime-core'
const Sketch: Component const Sketch: Component
const Chrome: Component
} }

Loading…
Cancel
Save