mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
committed by
GitHub
22 changed files with 436 additions and 378 deletions
@ -0,0 +1,132 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import type { PropType } from '@vue/runtime-core' |
||||
import { |
||||
ColumnInj, |
||||
computed, |
||||
defineComponent, |
||||
h, |
||||
inject, |
||||
isAttachment, |
||||
isBoolean, |
||||
isCurrency, |
||||
isDate, |
||||
isDateTime, |
||||
isDecimal, |
||||
isDuration, |
||||
isEmail, |
||||
isFloat, |
||||
isInt, |
||||
isJSON, |
||||
isPercent, |
||||
isPhoneNumber, |
||||
isPrimary, |
||||
isRating, |
||||
isSet, |
||||
isSingleSelect, |
||||
isSpecificDBType, |
||||
isString, |
||||
isTextArea, |
||||
isTime, |
||||
isURL, |
||||
isYear, |
||||
toRef, |
||||
useProject, |
||||
} from '#imports' |
||||
import FilePhoneIcon from '~icons/mdi/file-phone' |
||||
import KeyIcon from '~icons/mdi/key-variant' |
||||
import JSONIcon from '~icons/mdi/code-json' |
||||
import ClockIcon from '~icons/mdi/clock-time-five' |
||||
import WebIcon from '~icons/mdi/web' |
||||
import TextAreaIcon from '~icons/mdi/card-text-outline' |
||||
import StringIcon from '~icons/mdi/alpha-a-box-outline' |
||||
import BooleanIcon from '~icons/mdi/check-box-outline' |
||||
import CalendarIcon from '~icons/mdi/calendar' |
||||
import SingleSelectIcon from '~icons/mdi/arrow-down-drop-circle' |
||||
import MultiSelectIcon from '~icons/mdi/format-list-bulleted-square' |
||||
import DatetimeIcon from '~icons/mdi/calendar-clock' |
||||
import RatingIcon from '~icons/mdi/star' |
||||
import GenericIcon from '~icons/mdi/square-rounded' |
||||
import NumericIcon from '~icons/mdi/numeric' |
||||
import AttachmentIcon from '~icons/mdi/image-multiple-outline' |
||||
import EmailIcon from '~icons/mdi/email' |
||||
import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline' |
||||
import PercentIcon from '~icons/mdi/percent-outline' |
||||
import DecimalIcon from '~icons/mdi/decimal' |
||||
import SpecificDBTypeIcon from '~icons/mdi/database-settings' |
||||
import DurationIcon from '~icons/mdi/timer-outline' |
||||
|
||||
const renderIcon = (column: ColumnType, abstractType: any) => { |
||||
if (isPrimary(column)) { |
||||
return KeyIcon |
||||
} else if (isJSON(column)) { |
||||
return JSONIcon |
||||
} else if (isDate(column, abstractType)) { |
||||
return CalendarIcon |
||||
} else if (isDateTime(column, abstractType)) { |
||||
return DatetimeIcon |
||||
} else if (isSet(column)) { |
||||
return MultiSelectIcon |
||||
} else if (isSingleSelect(column)) { |
||||
return SingleSelectIcon |
||||
} else if (isBoolean(column)) { |
||||
return BooleanIcon |
||||
} else if (isTextArea(column)) { |
||||
return TextAreaIcon |
||||
} else if (isEmail(column)) { |
||||
return EmailIcon |
||||
} else if (isYear(column, abstractType)) { |
||||
return CalendarIcon |
||||
} else if (isTime(column, abstractType)) { |
||||
return ClockIcon |
||||
} else if (isRating(column)) { |
||||
return RatingIcon |
||||
} else if (isAttachment(column)) { |
||||
return AttachmentIcon |
||||
} else if (isDecimal(column)) { |
||||
return DecimalIcon |
||||
} else if (isPhoneNumber(column)) { |
||||
return FilePhoneIcon |
||||
} else if (isURL(column)) { |
||||
return WebIcon |
||||
} else if (isCurrency(column)) { |
||||
return CurrencyIcon |
||||
} else if (isDuration(column)) { |
||||
return DurationIcon |
||||
} else if (isPercent(column)) { |
||||
return PercentIcon |
||||
} else if (isInt(column, abstractType) || isFloat(column, abstractType)) { |
||||
return NumericIcon |
||||
} else if (isString(column, abstractType)) { |
||||
return StringIcon |
||||
} else if (isSpecificDBType(column)) { |
||||
return SpecificDBTypeIcon |
||||
} else { |
||||
return GenericIcon |
||||
} |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'CellIcon', |
||||
|
||||
props: { |
||||
columnMeta: { |
||||
type: Object as PropType<ColumnType>, |
||||
required: false, |
||||
}, |
||||
}, |
||||
setup(props) { |
||||
const columnMeta = toRef(props, 'columnMeta') |
||||
|
||||
const column = inject(ColumnInj, columnMeta) |
||||
|
||||
const { sqlUi } = useProject() |
||||
|
||||
const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value)) |
||||
|
||||
return () => { |
||||
if (!column.value) return null |
||||
|
||||
return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-xs' }) |
||||
} |
||||
}, |
||||
}) |
||||
@ -1,89 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import type { Ref } from 'vue' |
||||
import { ColumnInj, computed, inject, toRef, useColumn } from '#imports' |
||||
import FilePhoneIcon from '~icons/mdi/file-phone' |
||||
import KeyIcon from '~icons/mdi/key-variant' |
||||
import JSONIcon from '~icons/mdi/code-json' |
||||
import ClockIcon from '~icons/mdi/clock-time-five' |
||||
import WebIcon from '~icons/mdi/web' |
||||
import TextAreaIcon from '~icons/mdi/card-text-outline' |
||||
import StringIcon from '~icons/mdi/alpha-a-box-outline' |
||||
import BooleanIcon from '~icons/mdi/check-box-outline' |
||||
import CalendarIcon from '~icons/mdi/calendar' |
||||
import SingleSelectIcon from '~icons/mdi/arrow-down-drop-circle' |
||||
import MultiSelectIcon from '~icons/mdi/format-list-bulleted-square' |
||||
import DatetimeIcon from '~icons/mdi/calendar-clock' |
||||
import RatingIcon from '~icons/mdi/star' |
||||
import GenericIcon from '~icons/mdi/square-rounded' |
||||
import NumericIcon from '~icons/mdi/numeric' |
||||
import AttachmentIcon from '~icons/mdi/image-multiple-outline' |
||||
import EmailIcon from '~icons/mdi/email' |
||||
import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline' |
||||
import PercentIcon from '~icons/mdi/percent-outline' |
||||
import DecimalIcon from '~icons/mdi/decimal' |
||||
import SpecificDBTypeIcon from '~icons/mdi/database-settings' |
||||
import DurationIcon from '~icons/mdi/timer-outline' |
||||
|
||||
const props = defineProps<{ columnMeta?: ColumnType }>() |
||||
|
||||
const columnMeta = toRef(props, 'columnMeta') |
||||
|
||||
const column = inject(ColumnInj, columnMeta) |
||||
|
||||
const additionalColMeta = useColumn(column as Ref<ColumnType>) |
||||
|
||||
const icon = computed(() => { |
||||
if (column?.value?.pk) { |
||||
return KeyIcon |
||||
} else if (additionalColMeta.isJSON.value) { |
||||
return JSONIcon |
||||
} else if (additionalColMeta.isDate.value) { |
||||
return CalendarIcon |
||||
} else if (additionalColMeta.isDateTime.value) { |
||||
return DatetimeIcon |
||||
} else if (additionalColMeta.isSet.value) { |
||||
return MultiSelectIcon |
||||
} else if (additionalColMeta.isSingleSelect.value) { |
||||
return SingleSelectIcon |
||||
} else if (additionalColMeta.isBoolean.value) { |
||||
return BooleanIcon |
||||
} else if (additionalColMeta.isTextArea.value) { |
||||
return TextAreaIcon |
||||
} else if (additionalColMeta.isEmail.value) { |
||||
return EmailIcon |
||||
} else if (additionalColMeta.isYear.value) { |
||||
return CalendarIcon |
||||
} else if (additionalColMeta.isTime.value) { |
||||
return ClockIcon |
||||
} else if (additionalColMeta.isRating.value) { |
||||
return RatingIcon |
||||
} else if (additionalColMeta.isAttachment.value) { |
||||
return AttachmentIcon |
||||
} else if (additionalColMeta.isDecimal.value) { |
||||
return DecimalIcon |
||||
} else if (additionalColMeta.isPhoneNumber.value) { |
||||
return FilePhoneIcon |
||||
} else if (additionalColMeta.isURL.value) { |
||||
return WebIcon |
||||
} else if (additionalColMeta.isCurrency.value) { |
||||
return CurrencyIcon |
||||
} else if (additionalColMeta.isDuration.value) { |
||||
return DurationIcon |
||||
} else if (additionalColMeta.isPercent.value) { |
||||
return PercentIcon |
||||
} else if (additionalColMeta.isInt.value || additionalColMeta.isFloat.value) { |
||||
return NumericIcon |
||||
} else if (additionalColMeta.isString.value) { |
||||
return StringIcon |
||||
} else if (additionalColMeta.isSpecificDBType.value) { |
||||
return SpecificDBTypeIcon |
||||
} else { |
||||
return GenericIcon |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<component :is="icon" class="text-grey mx-1 !text-xs" /> |
||||
</template> |
||||
@ -1,98 +0,0 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk' |
||||
import type { ComputedRef, Ref } from 'vue' |
||||
import { computed, useProject } from '#imports' |
||||
|
||||
export function useColumn(column: Ref<ColumnType | undefined>) { |
||||
const { project } = useProject() |
||||
|
||||
const uiDatatype: ComputedRef<UITypes> = computed(() => column.value?.uidt as UITypes) |
||||
|
||||
const abstractType = computed(() => { |
||||
// kludge: CY test hack; column.value is being received NULL during attach cell delete operation
|
||||
return (column.value && isVirtualCol(column.value)) || !column.value |
||||
? null |
||||
: SqlUiFactory.create( |
||||
project.value?.bases?.[0]?.type ? { client: project.value.bases[0].type } : { client: 'mysql2' }, |
||||
).getAbstractType(column.value) |
||||
}) |
||||
|
||||
const dataTypeLow = computed(() => column.value?.dt?.toLowerCase()) |
||||
const isBoolean = computed(() => abstractType.value === 'boolean') |
||||
const isString = computed(() => uiDatatype.value === UITypes.SingleLineText || abstractType.value === 'string') |
||||
const isTextArea = computed(() => uiDatatype.value === UITypes.LongText) |
||||
const isInt = computed(() => abstractType.value === 'integer') |
||||
const isFloat = computed(() => abstractType.value === 'float' || abstractType.value === UITypes.Number) |
||||
const isDate = computed(() => abstractType.value === 'date' || uiDatatype.value === UITypes.Date) |
||||
const isYear = computed(() => abstractType.value === 'year' || uiDatatype.value === UITypes.Year) |
||||
const isTime = computed(() => abstractType.value === 'time' || uiDatatype.value === UITypes.Time) |
||||
const isDateTime = computed(() => abstractType.value === 'datetime' || uiDatatype.value === UITypes.DateTime) |
||||
const isJSON = computed(() => uiDatatype.value === UITypes.JSON) |
||||
const isEnum = computed(() => uiDatatype.value === UITypes.SingleSelect) |
||||
const isSingleSelect = computed(() => uiDatatype.value === UITypes.SingleSelect) |
||||
const isSet = computed(() => uiDatatype.value === UITypes.MultiSelect) |
||||
const isMultiSelect = computed(() => uiDatatype.value === UITypes.MultiSelect) |
||||
const isURL = computed(() => uiDatatype.value === UITypes.URL) |
||||
const isEmail = computed(() => uiDatatype.value === UITypes.Email) |
||||
const isAttachment = computed(() => uiDatatype.value === UITypes.Attachment) |
||||
const isRating = computed(() => uiDatatype.value === UITypes.Rating) |
||||
const isCurrency = computed(() => uiDatatype.value === UITypes.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 isSpecificDBType = computed(() => uiDatatype.value === UITypes.SpecificDBType) |
||||
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, |
||||
UITypes.Duration, |
||||
].includes(uiDatatype.value), |
||||
) |
||||
const isManualSaved = computed(() => [UITypes.Currency].includes(uiDatatype.value)) |
||||
const isPrimary = computed(() => column.value?.pv) |
||||
const isPrimaryKey = computed(() => !!column.value?.pk) |
||||
|
||||
return { |
||||
abstractType, |
||||
dataTypeLow, |
||||
isPrimary, |
||||
isBoolean, |
||||
isString, |
||||
isTextArea, |
||||
isInt, |
||||
isFloat, |
||||
isDate, |
||||
isYear, |
||||
isTime, |
||||
isDateTime, |
||||
isJSON, |
||||
isEnum, |
||||
isSet, |
||||
isURL, |
||||
isEmail, |
||||
isAttachment, |
||||
isRating, |
||||
isCurrency, |
||||
isDecimal, |
||||
isDuration, |
||||
isAutoSaved, |
||||
isManualSaved, |
||||
isSingleSelect, |
||||
isMultiSelect, |
||||
isPercent, |
||||
isPhoneNumber, |
||||
isSpecificDBType, |
||||
isPrimaryKey, |
||||
} |
||||
} |
||||
@ -1,36 +0,0 @@
|
||||
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk' |
||||
import { RelationTypes, UITypes } from 'nocodb-sdk' |
||||
import type { Ref } from 'vue' |
||||
import { computed } from '#imports' |
||||
|
||||
export function useVirtualCell(column: Ref<ColumnType | undefined>) { |
||||
const isHm = computed( |
||||
() => |
||||
column.value?.uidt === UITypes.LinkToAnotherRecord && |
||||
(<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.HAS_MANY, |
||||
) |
||||
const isMm = computed( |
||||
() => |
||||
column.value?.uidt === UITypes.LinkToAnotherRecord && |
||||
(<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.MANY_TO_MANY, |
||||
) |
||||
const isBt = computed( |
||||
() => |
||||
column.value?.uidt === UITypes.LinkToAnotherRecord && |
||||
(<LinkToAnotherRecordType>column.value?.colOptions).type === RelationTypes.BELONGS_TO, |
||||
) |
||||
const isLookup = computed(() => column.value?.uidt === UITypes.Lookup) |
||||
const isRollup = computed(() => column.value?.uidt === UITypes.Rollup) |
||||
const isFormula = computed(() => column.value?.uidt === UITypes.Formula) |
||||
const isCount = computed(() => column.value?.uidt === UITypes.Count) |
||||
|
||||
return { |
||||
isHm, |
||||
isMm, |
||||
isBt, |
||||
isLookup, |
||||
isRollup, |
||||
isFormula, |
||||
isCount, |
||||
} |
||||
} |
||||
@ -0,0 +1,53 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import { UITypes } from 'nocodb-sdk' |
||||
|
||||
export const dataTypeLow = (column: ColumnType) => column.dt?.toLowerCase() |
||||
export const isBoolean = (abstractType: any) => abstractType === 'boolean' |
||||
export const isString = (column: ColumnType, abstractType: any) => |
||||
column.uidt === UITypes.SingleLineText || abstractType === 'string' |
||||
export const isTextArea = (column: ColumnType) => column.uidt === UITypes.LongText |
||||
export const isInt = (column: ColumnType, abstractType: any) => abstractType === 'integer' |
||||
export const isFloat = (column: ColumnType, abstractType: any) => abstractType === 'float' || abstractType === UITypes.Number |
||||
export const isDate = (column: ColumnType, abstractType: any) => abstractType === 'date' || column.uidt === UITypes.Date |
||||
export const isYear = (column: ColumnType, abstractType: any) => abstractType === 'year' || column.uidt === UITypes.Year |
||||
export const isTime = (column: ColumnType, abstractType: any) => abstractType === 'time' || column.uidt === UITypes.Time |
||||
export const isDateTime = (column: ColumnType, abstractType: any) => |
||||
abstractType === 'datetime' || column.uidt === UITypes.DateTime |
||||
export const isJSON = (column: ColumnType) => column.uidt === UITypes.JSON |
||||
export const isEnum = (column: ColumnType) => column.uidt === UITypes.SingleSelect |
||||
export const isSingleSelect = (column: ColumnType) => column.uidt === UITypes.SingleSelect |
||||
export const isSet = (column: ColumnType) => column.uidt === UITypes.MultiSelect |
||||
export const isMultiSelect = (column: ColumnType) => column.uidt === UITypes.MultiSelect |
||||
export const isURL = (column: ColumnType) => column.uidt === UITypes.URL |
||||
export const isEmail = (column: ColumnType) => column.uidt === UITypes.Email |
||||
export const isAttachment = (column: ColumnType) => column.uidt === UITypes.Attachment |
||||
export const isRating = (column: ColumnType) => column.uidt === UITypes.Rating |
||||
export const isCurrency = (column: ColumnType) => column.uidt === UITypes.Currency |
||||
export const isPhoneNumber = (column: ColumnType) => column.uidt === UITypes.PhoneNumber |
||||
export const isDecimal = (column: ColumnType) => column.uidt === UITypes.Decimal |
||||
export const isDuration = (column: ColumnType) => column.uidt === UITypes.Duration |
||||
export const isPercent = (column: ColumnType) => column.uidt === UITypes.Percent |
||||
export const isSpecificDBType = (column: ColumnType) => column.uidt === UITypes.SpecificDBType |
||||
export const isAutoSaved = (column: ColumnType) => |
||||
[ |
||||
UITypes.SingleLineText, |
||||
UITypes.LongText, |
||||
UITypes.PhoneNumber, |
||||
UITypes.Email, |
||||
UITypes.URL, |
||||
UITypes.Number, |
||||
UITypes.Decimal, |
||||
UITypes.Percent, |
||||
UITypes.Count, |
||||
UITypes.AutoNumber, |
||||
UITypes.SpecificDBType, |
||||
UITypes.Geometry, |
||||
UITypes.Duration, |
||||
].includes(column.uidt as UITypes) |
||||
|
||||
export const isManualSaved = (column: ColumnType) => |
||||
[UITypes.Currency, UITypes.Year, UITypes.Time].includes(column.uidt as UITypes) |
||||
|
||||
export const isPrimary = (column: ColumnType) => !!column.pv |
||||
|
||||
export const isPrimaryKey = (column: ColumnType) => !!column.pk |
||||
@ -0,0 +1,19 @@
|
||||
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk' |
||||
import { RelationTypes, UITypes } from 'nocodb-sdk' |
||||
|
||||
export const isLTAR = (uidt: string, colOptions: unknown): colOptions is LinkToAnotherRecordType => |
||||
uidt === UITypes.LinkToAnotherRecord |
||||
|
||||
export const isHm = (column: ColumnType) => |
||||
isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.HAS_MANY |
||||
|
||||
export const isMm = (column: ColumnType) => |
||||
isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.MANY_TO_MANY |
||||
|
||||
export const isBt = (column: ColumnType) => |
||||
isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.BELONGS_TO |
||||
|
||||
export const isLookup = (column: ColumnType) => column.uidt === UITypes.Lookup |
||||
export const isRollup = (column: ColumnType) => column.uidt === UITypes.Rollup |
||||
export const isFormula = (column: ColumnType) => column.uidt === UITypes.Formula |
||||
export const isCount = (column: ColumnType) => column.uidt === UITypes.Count |
||||
Loading…
Reference in new issue