From 720c34ca6bd882ba97c83f24cfaf0d2c77840c40 Mon Sep 17 00:00:00 2001 From: mertmit Date: Sat, 13 Aug 2022 20:28:15 +0300 Subject: [PATCH] fix(gui-v2): useColumn use refs instead of static values Signed-off-by: mertmit --- .../components/smartsheet-header/CellIcon.vue | 38 ++++---- packages/nc-gui-v2/composables/useColumn.ts | 94 ++++++++++--------- 2 files changed, 69 insertions(+), 63 deletions(-) diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue index a65e979ca4..d4ba8164bd 100644 --- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue +++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue @@ -36,47 +36,47 @@ const additionalColMeta = useColumn(column as Ref) const icon = computed(() => { if (column?.value?.pk) { return KeyIcon - } else if (additionalColMeta.isJSON) { + } else if (additionalColMeta.isJSON.value) { return JSONIcon - } else if (additionalColMeta.isDate) { + } else if (additionalColMeta.isDate.value) { return CalendarIcon - } else if (additionalColMeta.isDateTime) { + } else if (additionalColMeta.isDateTime.value) { return DatetimeIcon - } else if (additionalColMeta.isSet) { + } else if (additionalColMeta.isSet.value) { return MultiSelectIcon - } else if (additionalColMeta.isSingleSelect) { + } else if (additionalColMeta.isSingleSelect.value) { return SingleSelectIcon - } else if (additionalColMeta.isBoolean) { + } else if (additionalColMeta.isBoolean.value) { return BooleanIcon - } else if (additionalColMeta.isTextArea) { + } else if (additionalColMeta.isTextArea.value) { return TextAreaIcon - } else if (additionalColMeta.isEmail) { + } else if (additionalColMeta.isEmail.value) { return EmailIcon - } else if (additionalColMeta.isYear) { + } else if (additionalColMeta.isYear.value) { return CalendarIcon - } else if (additionalColMeta.isTime) { + } else if (additionalColMeta.isTime.value) { return ClockIcon - } else if (additionalColMeta.isRating) { + } else if (additionalColMeta.isRating.value) { return RatingIcon - } else if (additionalColMeta.isAttachment) { + } else if (additionalColMeta.isAttachment.value) { return AttachmentIcon - } else if (additionalColMeta.isDecimal) { + } else if (additionalColMeta.isDecimal.value) { return DecimalIcon - } else if (additionalColMeta.isPhoneNumber) { + } else if (additionalColMeta.isPhoneNumber.value) { return FilePhoneIcon } // else if(additionalColMeta.isForeignKey) { // return FKIcon // } - else if (additionalColMeta.isURL) { + else if (additionalColMeta.isURL.value) { return WebIcon - } else if (additionalColMeta.isCurrency) { + } else if (additionalColMeta.isCurrency.value) { return CurrencyIcon - } else if (additionalColMeta.isPercent) { + } else if (additionalColMeta.isPercent.value) { return PercentIcon - } else if (additionalColMeta.isInt || additionalColMeta.isFloat) { + } else if (additionalColMeta.isInt.value || additionalColMeta.isFloat.value) { return NumericIcon - } else if (additionalColMeta.isString) { + } else if (additionalColMeta.isString.value) { return StringIcon } else { return GenericIcon diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts index 51ac14531e..47baba15ec 100644 --- a/packages/nc-gui-v2/composables/useColumn.ts +++ b/packages/nc-gui-v2/composables/useColumn.ts @@ -1,55 +1,61 @@ import type { ColumnType } from 'nocodb-sdk' import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk' -import type { Ref } from 'vue' +import type { ComputedRef, Ref } from 'vue' import { useProject } from '#imports' export function useColumn(column: Ref) { const { project } = useProject() - const uiDatatype: UITypes = column?.value?.uidt as UITypes - const abstractType = isVirtualCol(column?.value) - ? null - : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value) + const uiDatatype: ComputedRef = computed(() => column?.value?.uidt as UITypes) + const abstractType = computed(() => + isVirtualCol(column?.value) + ? null + : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value), + ) - const dataTypeLow = column?.value?.dt?.toLowerCase() - const isBoolean = abstractType === 'boolean' - const isString = abstractType === 'string' - const isTextArea = uiDatatype === UITypes.LongText - const isInt = abstractType === 'integer' - const isFloat = abstractType === 'float' - const isDate = abstractType === 'date' || uiDatatype === 'Date' - const isYear = abstractType === 'year' || uiDatatype === 'Year' - const isTime = abstractType === 'time' || uiDatatype === 'Time' - const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime' - const isJSON = uiDatatype === 'JSON' - const isEnum = uiDatatype === 'SingleSelect' - const isSingleSelect = uiDatatype === 'SingleSelect' - const isSet = uiDatatype === 'MultiSelect' - const isMultiSelect = uiDatatype === 'MultiSelect' - const isURL = uiDatatype === 'URL' - const isEmail = uiDatatype === UITypes.Email - const isAttachment = uiDatatype === 'Attachment' - const isRating = uiDatatype === UITypes.Rating - const isCurrency = uiDatatype === 'Currency' - const isPhoneNumber = uiDatatype === UITypes.PhoneNumber - const isDecimal = uiDatatype === UITypes.Decimal - const isDuration = uiDatatype === UITypes.Duration - const isPercent = uiDatatype === UITypes.Percent - const isAutoSaved = [ - UITypes.SingleLineText, - UITypes.LongText, - UITypes.PhoneNumber, - UITypes.Email, - UITypes.URL, - UITypes.Number, - UITypes.Decimal, - UITypes.Percent, - UITypes.Count, - UITypes.AutoNumber, - UITypes.SpecificDBType, - UITypes.Geometry, - ].includes(uiDatatype) - const isManualSaved = [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype) + const dataTypeLow = computed(() => column?.value?.dt?.toLowerCase()) + const isBoolean = computed(() => abstractType.value === 'boolean') + const isString = computed(() => abstractType.value === 'string') + const isTextArea = computed(() => uiDatatype.value === UITypes.LongText) + const isInt = computed(() => abstractType.value === 'integer') + const isFloat = computed(() => abstractType.value === 'float') + const isDate = computed(() => abstractType.value === 'date' || uiDatatype.value === 'Date') + const isYear = computed(() => abstractType.value === 'year' || uiDatatype.value === 'Year') + const isTime = computed(() => abstractType.value === 'time' || uiDatatype.value === 'Time') + const isDateTime = computed(() => abstractType.value === 'datetime' || uiDatatype.value === 'DateTime') + const isJSON = computed(() => uiDatatype.value === 'JSON') + const isEnum = computed(() => uiDatatype.value === 'SingleSelect') + const isSingleSelect = computed(() => uiDatatype.value === 'SingleSelect') + const isSet = computed(() => uiDatatype.value === 'MultiSelect') + const isMultiSelect = computed(() => uiDatatype.value === 'MultiSelect') + const isURL = computed(() => uiDatatype.value === 'URL') + const isEmail = computed(() => uiDatatype.value === UITypes.Email) + const isAttachment = computed(() => uiDatatype.value === 'Attachment') + const isRating = computed(() => uiDatatype.value === UITypes.Rating) + const isCurrency = computed(() => uiDatatype.value === 'Currency') + const isPhoneNumber = computed(() => uiDatatype.value === UITypes.PhoneNumber) + const isDecimal = computed(() => uiDatatype.value === UITypes.Decimal) + const isDuration = computed(() => uiDatatype.value === UITypes.Duration) + const isPercent = computed(() => uiDatatype.value === UITypes.Percent) + const isAutoSaved = computed(() => + [ + UITypes.SingleLineText, + UITypes.LongText, + UITypes.PhoneNumber, + UITypes.Email, + UITypes.URL, + UITypes.Number, + UITypes.Decimal, + UITypes.Percent, + UITypes.Count, + UITypes.AutoNumber, + UITypes.SpecificDBType, + UITypes.Geometry, + ].includes(uiDatatype.value), + ) + const isManualSaved = computed(() => + [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value), + ) return { abstractType,