Browse Source

chore(gui-v2): cleanup typecheck issues

pull/3158/head
braks 2 years ago
parent
commit
83eca162ef
  1. 15
      packages/nc-gui-v2/components/cell/Url.vue
  2. 13
      packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
  3. 2
      packages/nc-gui-v2/components/smartsheet/Cell.vue
  4. 37
      packages/nc-gui-v2/components/smartsheet/Form.vue
  5. 8
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  6. 30
      packages/nc-gui-v2/components/template/Editor.vue
  7. 23
      packages/nc-gui-v2/composables/useViewData.ts
  8. 2
      packages/nc-gui-v2/utils/columnUtils.ts

15
packages/nc-gui-v2/components/cell/Url.vue

@ -1,10 +1,9 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import { ColumnInj, computed, inject, isValidURL } from '#imports'
import { EditModeInj } from '~/context'
import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
interface Props {
modelValue: string | null | undefined
modelValue?: string | null
}
const { modelValue: value } = defineProps<Props>()
@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)
const editEnabled = inject(EditModeInj)!
const vModel = computed({
get: () => value,
@ -26,10 +25,12 @@ const vModel = computed({
const isValid = computed(() => value && isValidURL(value))
const url = computed<string | null>(() => {
if (!value || !isValidURL(value)) return null
const url = computed(() => {
if (!value || !isValidURL(value)) return ''
/** add url scheme if missing */
if (/^https?:\/\//.test(value)) return value
return `https://${value}`
})
@ -38,7 +39,9 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
<template>
<input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
<nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
<span v-else>{{ value }}</span>
</template>

13
packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { UITypes, isSystemColumn } from 'nocodb-sdk'
import { MetaInj } from '#imports'
@ -39,16 +39,13 @@ const refTables = $computed(() => {
}
return meta.columns
?.filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
.map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
.map((c: ColumnType) => ({
col: c.colOptions,
column: c,
...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
}))
.filter(
(table: TableType & { col: LinkToAnotherRecordType; column: ColumnType }) =>
table.col.fk_related_model_id === table.id && !table.mm,
)
.filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
})
const columns = $computed(() => {
@ -57,7 +54,7 @@ const columns = $computed(() => {
return []
}
return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
})
</script>

2
packages/nc-gui-v2/components/smartsheet/Cell.vue

@ -10,7 +10,7 @@ interface Props {
column: ColumnType
modelValue: any
editEnabled: boolean
rowIndex: number
rowIndex?: number
active?: boolean
}

37
packages/nc-gui-v2/components/smartsheet/Form.vue

@ -18,6 +18,7 @@ import {
useGlobal,
useNuxtApp,
useUIPermission,
useViewColumns,
useViewData,
watch,
} from '#imports'
@ -35,7 +36,7 @@ const { $api, $e } = useNuxtApp()
const { isUIAllowed } = useUIPermission()
const formState = reactive({})
const formState: Record<any, any> = reactive({})
const secondsRemain = ref(0)
@ -54,13 +55,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
const columns = computed(() => meta?.value?.columns || [])
const localColumns = ref<Record<string, any>>([])
const localColumns = ref<Record<string, any>[]>([])
const hiddenColumns = ref<Record<string, any>>([])
const hiddenColumns = ref<Record<string, any>[]>([])
const draggableRef = ref()
const systemFieldsIds = ref<Record<string, any>>([])
const systemFieldsIds = ref<Record<string, any>[]>([])
const showColumnDropdown = ref(false)
@ -279,7 +280,7 @@ async function submitCallback() {
const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
if (col.id) {
try {
$api.dbView.formColumnUpdate(col.id, col)
await $api.dbView.formColumnUpdate(col.id, col)
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
@ -428,7 +429,14 @@ onMounted(async () => {
<div class="h-[200px] !bg-[#dbdad7]">
<!-- for future implementation of cover image -->
</div>
<a-card class="h-full ma-0 rounded-b-0 pa-4" body-style="max-width: 700px; margin: 0 auto; margin-top: -200px;">
<a-card
class="h-full ma-0 rounded-b-0 pa-4"
:body-style="{
maxWidth: '700px',
margin: '0 auto',
marginTop: '-200px',
}"
>
<a-form ref="formRef" :model="formState">
<a-card class="rounded ma-2 py-10 px-5">
<!-- Header -->
@ -444,7 +452,9 @@ onMounted(async () => {
@keydown.enter="updateView"
/>
</a-form-item>
<div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
<!-- Sub Header -->
<a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
<a-input
@ -459,7 +469,9 @@ onMounted(async () => {
@click="updateView"
/>
</a-form-item>
<div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
<Draggable
ref="draggableRef"
:list="localColumns"
@ -495,6 +507,7 @@ onMounted(async () => {
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
</div>
</div>
<a-form-item
v-if="isVirtualCol(element)"
class="ma-0 gap-0 pa-0"
@ -503,6 +516,7 @@ onMounted(async () => {
>
<SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
</a-form-item>
<a-form-item
v-else
class="ma-0 gap-0 pa-0"
@ -511,6 +525,7 @@ onMounted(async () => {
>
<SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
</a-form-item>
<div v-if="activeRow === element.title">
<a-form-item class="my-0 w-1/2">
<a-input
@ -522,6 +537,7 @@ onMounted(async () => {
>
</a-input>
</a-form-item>
<a-form-item class="mt-2 mb-0 w-1/2">
<a-input
v-model:value="element.description"
@ -531,14 +547,18 @@ onMounted(async () => {
@change="updateColMeta(element)"
/>
</a-form-item>
<div class="items-center flex">
<span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
<a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
</div>
</div>
<span class="text-gray-500">{{ element.description }}</span>
</div>
</template>
<template #footer>
<div
v-if="!localColumns.length"
@ -563,9 +583,11 @@ onMounted(async () => {
<div class="text-gray-500 mt-4 mb-2">
{{ $t('msg.info.afterFormSubmitted') }}
</div>
<!-- Show this message -->
<label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
<a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
<a-textarea v-model:value="formViewData.success_msg" :rows="3" hide-details @change="updateView" />
<!-- Other options -->
<div class="mt-4">
@ -590,6 +612,7 @@ onMounted(async () => {
/>
<span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
</div>
<div class="my-4">
<a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
<!-- Email me at <email> -->

8
packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@ -42,23 +42,31 @@ const iconColor = '#1890ff'
<template v-if="meta">
{{ meta.title }}
</template>
<!-- todo: table doesn't exist?
<template v-else>
{{ table }}
</template>
-->
<template v-if="primaryValue">: {{ primaryValue }}</template>
</h5>
<div class="flex-grow" />
<mdi-reload class="cursor-pointer select-none" />
<component
:is="drawerToggleIcon"
v-if="isUIAllowed('rowComments')"
class="cursor-pointer select-none"
@click="commentsDrawer = !commentsDrawer"
/>
<a-button class="!text" @click="emit('cancel')">
<!-- Cancel -->
{{ $t('general.cancel') }}
</a-button>
<a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
<!-- Save Row -->
{{ $t('activity.saveRow') }}

30
packages/nc-gui-v2/components/template/Editor.vue

@ -16,6 +16,7 @@ import {
ref,
useProject,
useTabs,
useTemplateRefsList,
} from '#imports'
import { TabType } from '~/composables'
@ -53,7 +54,7 @@ const expansionPanel = ref<number[]>([])
const editableTn = ref<boolean[]>([])
const inputRefs = ref<HTMLInputElement[]>([])
const inputRefs = useTemplateRefsList<HTMLInputElement>()
const isImporting = ref(false)
@ -493,9 +494,11 @@ onMounted(() => {
<template #header>
<span class="font-weight-bold text-lg flex items-center gap-2">
<mdi-table class="text-primary" />
{{ table.ref_table_name }}
</span>
</template>
<a-table
v-if="srcDestMapping"
class="template-form"
@ -509,10 +512,12 @@ onMounted(() => {
{{ column.name }}
</span>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'source_column'">
<span>{{ record.srcCn }}</span>
</template>
<template v-else-if="column.key === 'destination_column'">
<a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
<a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
@ -538,13 +543,14 @@ onMounted(() => {
{{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
available for import
</p>
<a-collapse
v-if="data.tables && data.tables.length"
v-model:activeKey="expansionPanel"
class="template-collapse"
accordion
>
<a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
<a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
<template #header>
<a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
<a-input
@ -552,16 +558,18 @@ onMounted(() => {
class="max-w-xs"
size="large"
hide-details
@click="(e) => e.stopPropagation()"
@click="$event.stopPropagation()"
@blur="setEditableTn(tableIdx, false)"
@keydown.enter="setEditableTn(tableIdx, false)"
/>
</a-form-item>
<span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
<mdi-table class="text-primary" />
{{ table.table_name }}
</span>
</template>
<template #extra>
<a-tooltip bottom>
<template #title>
@ -573,7 +581,7 @@ onMounted(() => {
</template>
<a-table
v-if="table.columns.length"
v-if="table.columns && table.columns.length"
class="template-form"
row-class-name="template-form-row"
:data-source="table.columns"
@ -586,11 +594,13 @@ onMounted(() => {
{{ $t('labels.columnName') }}
</span>
</template>
<template v-else-if="column.key === 'uidt'">
<span>
{{ $t('labels.columnType') }}
</span>
</template>
<template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
<span>
<!-- TODO: i18n -->
@ -598,19 +608,14 @@ onMounted(() => {
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'column_name'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-input
:ref="
(el) => {
inputRefs[record.key] = el
}
"
v-model:value="record.column_name"
/>
<a-input :ref="inputRefs.set" v-model:value="record.column_name" />
</a-form-item>
</template>
<template v-else-if="column.key === 'uidt'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-select
@ -635,6 +640,7 @@ onMounted(() => {
<!-- TODO: i18n -->
<span>Primary Value</span>
</template>
<div class="flex items-center float-right mr-4">
<mdi-key-star class="text-lg" />
</div>

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

@ -1,9 +1,7 @@
import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
import type { ComputedRef, Ref } from 'vue'
import { message } from 'ant-design-vue'
import { ref, useNuxtApp, useProject } from '#imports'
import { NOCO } from '~/lib'
import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
const formatData = (list: Record<string, any>[]) =>
list.map((row) => ({
@ -34,9 +32,10 @@ export function useViewData(
const formattedData = ref<Row[]>([])
const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
const galleryData = ref<GalleryType | undefined>(undefined)
const formColumnData = ref<FormType | undefined>(undefined)
const formViewData = ref<FormType | undefined>(undefined)
const galleryData = ref<GalleryType>()
const formColumnData = ref<FormType>()
// todo: missing properties on FormType (success_msg, show_blank_form,
const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
const { project } = useProject()
const { $api } = useNuxtApp()
@ -101,7 +100,7 @@ export function useViewData(
formattedData.value = formatData(response.list)
paginationData.value = response.pageInfo
loadAggCommentsCount()
await loadAggCommentsCount()
}
const loadGalleryData = async () => {
@ -132,7 +131,8 @@ export function useViewData(
rowMeta: {},
oldRow: { ...insertedData },
})
syncCount()
await syncCount()
} catch (error: any) {
message.error(await extractSdkResponseErrorMsg(error))
}
@ -240,8 +240,10 @@ export function useViewData(
return
}
}
formattedData.value.splice(rowIndex, 1)
syncCount()
await syncCount()
} catch (e: any) {
message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
}
@ -271,7 +273,8 @@ export function useViewData(
return message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
}
}
syncCount()
await syncCount()
}
const loadFormView = async () => {

2
packages/nc-gui-v2/utils/columnUtils.ts

@ -147,7 +147,7 @@ const uiTypes = [
},
]
const getUIDTIcon = (uidt: UITypes) => {
const getUIDTIcon = (uidt: UITypes | string) => {
return (
[
...uiTypes,

Loading…
Cancel
Save