mirror of https://github.com/nocodb/nocodb
braks
2 years ago
8 changed files with 211 additions and 191 deletions
@ -0,0 +1,140 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import type { PropType } from '@vue/runtime-core' |
||||
import { SqlUiFactory, isVirtualCol } from 'nocodb-sdk' |
||||
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 { project } = useProject() |
||||
|
||||
const abstractType = computed(() => { |
||||
// kludge: CY test hack; column 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) |
||||
}) |
||||
|
||||
return () => { |
||||
if (!column.value) return null |
||||
|
||||
return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-sm' }) |
||||
} |
||||
}, |
||||
}) |
||||
@ -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,53 +0,0 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk' |
||||
import type { ComputedRef, Ref } from 'vue' |
||||
import { computed, dataTypeLow, isBoolean, isPrimary, isString, isTextArea, useProject } from '#imports' |
||||
|
||||
export function useColumn(column: Ref<ColumnType | undefined>) { |
||||
const { project } = useProject() |
||||
|
||||
const data = computed(() => { |
||||
if (!column.value) return null |
||||
|
||||
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) |
||||
}) |
||||
|
||||
return { |
||||
abstractType, |
||||
dataTypeLow: dataTypeLow(column.value), |
||||
isPrimary: isPrimary(column.value), |
||||
isBoolean: isBoolean(abstractType.value), |
||||
isString: isString(column.value, abstractType.value), |
||||
isTextArea: isTextArea(column.value), |
||||
isInt, |
||||
isFloat, |
||||
isDate, |
||||
isYear, |
||||
isTime, |
||||
isDateTime, |
||||
isJSON, |
||||
isEnum, |
||||
isSet, |
||||
isURL, |
||||
isEmail, |
||||
isAttachment, |
||||
isRating, |
||||
isCurrency, |
||||
isDecimal, |
||||
isDuration, |
||||
isAutoSaved, |
||||
isManualSaved, |
||||
isSingleSelect, |
||||
isMultiSelect, |
||||
isPercent, |
||||
isPhoneNumber, |
||||
isSpecificDBType, |
||||
} |
||||
}) |
||||
} |
||||
@ -1,24 +0,0 @@
|
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import type { Ref } from 'vue' |
||||
import { computed, isBt, isCount, isFormula, isHm, isLookup, isMm, isRollup } from '#imports' |
||||
import HasMany from '~/components/virtual-cell/HasMany.vue' |
||||
import ManyToMany from '~/components/virtual-cell/ManyToMany.vue' |
||||
import BelongsTo from '~/components/virtual-cell/BelongsTo.vue' |
||||
import Lookup from '~/components/virtual-cell/Lookup.vue' |
||||
import Rollup from '~/components/virtual-cell/Rollup.vue' |
||||
import Formula from '~/components/virtual-cell/Formula.vue' |
||||
import Count from '~/components/virtual-cell/Count.vue' |
||||
|
||||
export function useVirtualCell(column: Ref<ColumnType | undefined>) { |
||||
return computed(() => { |
||||
if (!column.value) return null |
||||
|
||||
if (isHm(column.value)) return HasMany |
||||
if (isMm(column.value)) return ManyToMany |
||||
if (isBt(column.value)) return BelongsTo |
||||
if (isLookup(column.value)) return Lookup |
||||
if (isRollup(column.value)) return Rollup |
||||
if (isFormula(column.value)) return Formula |
||||
if (isCount(column.value)) return Count |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue