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