Files
nocodb/packages/nc-gui/utils/cell.ts
Ramesh Mane e9aa37e284 Nc fix: UI improvements (#8223)
* fix(nc-gui): add background color for row on hover in grid view

* fix(nc-gui): reduce width of index column

* fix(nc-gui): on hover grid row bg opacity issue

* fix(nc-gui): reduce font size and grid cell height

* fix(nc-gui): reduce font size

* fix(nc-gui): set column default width to 180px

* fix(nc-gui): revert sidebar changes

* fix(nc-gui): disable grid row hover effect if fillMode is true

* fix(nc-gui): display checkbox & row expand icon if it is active row

* fix(nc-gui): increase the weight of display value cell

* fix(nc-gui): grid cell should have constant padding

* fix(nc-gui): att cell row height auto increase issue

* fix(nc-gui): att cell center align issue

* fix(nc-gui): percent cell spacing issue

* fix(nc-gui): text overflow ellipsis

* fix(nc-gui): single select auto increase height issue if rowHeight is short

* fix(nc-gui): grayed out header text color

* fix(nc-gui): reduce header icon size

* fix(nc-gui): set 12px grid header horizontal padding

* fix(nc-gui): center align expand icon for short row height

* fix(nc-gui): rich text and select type field auto row height increase issue

* fix(nc-gui): lookup cell auto increase height issue

* fix(nc-gui): small changes

* fix(nc-gui): truncate text after no. of lines base on rowHeight

* fix(nc-gui): barcode & qrcode cell row height issue

* chore(nc-gui): lint

* fix(test): update row height pw test

* fix(test): grid toolbar rowHeight test update

* fix(nc-gui): ai review changes

* fix(test): multiselect pw test update

* fix(test): verify multiselct options test update

* fix(nc-gui): merge conflicts

* fix(nc-gui): small changes

* fix(nc-gui): small changes

* fix(nc-gui): display value should be in blue color
2024-04-18 18:21:54 +05:30

116 lines
5.0 KiB
TypeScript

import type { ColumnType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import dayjs from 'dayjs'
export const dataTypeLow = (column: ColumnType) => column.dt?.toLowerCase()
export const isBoolean = (column: ColumnType, abstractType?: any) =>
column.uidt === UITypes.Checkbox || 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 isReadonlyDateTime = (column: ColumnType, _abstractType: any) =>
column.uidt === UITypes.CreatedTime || column.uidt === UITypes.LastModifiedTime
export const isReadonlyUser = (column: ColumnType, _abstractType: any) =>
column.uidt === UITypes.CreatedBy || column.uidt === UITypes.LastModifiedBy
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 isGeoData = (column: ColumnType) => column.uidt === UITypes.GeoData
export const isPercent = (column: ColumnType) => column.uidt === UITypes.Percent
export const isSpecificDBType = (column: ColumnType) => column.uidt === UITypes.SpecificDBType
export const isGeometry = (column: ColumnType) => column.uidt === UITypes.Geometry
export const isUser = (column: ColumnType) => column.uidt === UITypes.User
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.GeoData,
UITypes.Duration,
].includes(column.uidt as UITypes)
export const isManualSaved = (column: ColumnType) => [UITypes.Currency].includes(column.uidt as UITypes)
export const isPrimary = (column: ColumnType) => !!column.pv
export const isPrimaryKey = (column: ColumnType) => !!column.pk
// used for LTAR and Formula
export const renderValue = (result?: any) => {
if (!result || typeof result !== 'string') {
return result
}
// convert ISO string (e.g. in MSSQL) to YYYY-MM-DD hh:mm:ssZ
// e.g. 2023-05-18T05:30:00.000Z -> 2023-05-18 11:00:00+05:30
result = result.replace(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/g, (d: string) => {
return dayjs(d).isValid() ? dayjs(d).format('YYYY-MM-DD HH:mm:ssZ') : d
})
// convert all date time values to local time
// the datetime is either YYYY-MM-DD hh:mm:ss (xcdb)
// or YYYY-MM-DD hh:mm:ss+/-xx:yy (ext)
return result.replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:[+-]\d{2}:\d{2})?/g, (d: string) => {
// TODO(timezone): retrieve the format from the corresponding column meta
// assume HH:mm at this moment
return dayjs(d).isValid() ? dayjs(d).format('YYYY-MM-DD HH:mm') : d
})
}
export const isNumericFieldType = (column: ColumnType, abstractType: any) => {
return (
isInt(column, abstractType) ||
isFloat(column, abstractType) ||
isDecimal(column) ||
isCurrency(column) ||
isPercent(column) ||
isDuration(column)
)
}
export const rowHeightInPx: Record<string, number> = {
1: 32,
2: 60,
4: 90,
6: 120,
}
export const rowHeightTruncateLines = (rowHeight?: number) => {
switch (rowHeight) {
case 2:
return 2
case 4:
return 3
case 6:
return 4
default:
return 1
}
}