Synced from the Blueshift Repository

Author: Blueshift Staff

projects/ngx-grid-core/src/lib/controller/cell-operations/get-formatted-value.operation.ts

@@ -3,6 +3,7 @@ import { IGridCellCoordinates, IGridColumn, IGridDataType, INumberOptions } from
 import { ICellOperationFactory } from '../../typings/interfaces/grid-cell-operation-factory.interface'
 import { NumberOptionsParser } from '../../utils/number-format-parser/number-options-parser'
 import { ParseDate } from '../../utils/parse-date-string'
+import { ParseDateTime } from '../../utils/parse-datetime-string'
 import { Operation } from '../operation.abstract'
 
 export class GetFormattedValue extends Operation {
@@ -111,6 +112,13 @@ export class GetFormattedValue extends Operation {
           if (formattedDate) return formattedDate
         }
         break
+      case 'DateTime':
+        const dateTime = typeof value === 'string' ? ParseDateTime(value) : value
+        if (dateTime) {
+          const formattedDateTime = this.controller.datePipe.transform(dateTime, this._dateTimeFormat)
+          if (formattedDateTime) return formattedDateTime
+        }
+        break
       case 'File':
         if (typeof value === 'object' && value !== null && value.fileName !== undefined) return value.fileName
         break
@@ -140,4 +148,8 @@ export class GetFormattedValue extends Operation {
     return this.controller.getDateFormat()
   }
 
+  private get _dateTimeFormat(): string {
+    return this.controller.getDateTimeFormat()
+  }
+
 }

projects/ngx-grid-core/src/lib/controller/column-operations/initialise-column-width.operation.ts

@@ -8,6 +8,7 @@ export class InitialiseColumnWidth extends Operation {
 
   private readonly columnWidthsMap   = new Map<TColumnKey, number>()
   private readonly headerWidthsMap   = new Map<TColumnKey, number>()
+  private readonly columnKeysBasedOnHeaderWidthOnly = new Set<string>()
   private readonly commonCellPadding = 14
   private readonly bufferOperation   = new BufferOperation((args: any) => this._measureCellWidth(args))
 
@@ -25,6 +26,7 @@ export class InitialiseColumnWidth extends Operation {
    */
   public reset() {
     this.columnWidthsMap.clear()
+    this.columnKeysBasedOnHeaderWidthOnly.clear()
   }
 
   /**
@@ -65,17 +67,19 @@ export class InitialiseColumnWidth extends Operation {
           this.headerWidthsMap.get(columnKey) ?? 0,
           width + this.commonCellPadding)
         )
+        this.columnKeysBasedOnHeaderWidthOnly.add(columnKey)
         wasChanged = true
       } else {
         const cellType = cellTypeOrColumnWidth
-        if (existingColumnWidths.has(cellType.coordinates.columnKey)) continue
+        if (existingColumnWidths.has(cellType.coordinates.columnKey) && (!cellType.value || !this.columnKeysBasedOnHeaderWidthOnly.has(cellType.coordinates.columnKey))) continue
         const minWidth = this.dataSource.getColumn(cellType.coordinates.columnKey)?.minWidth ?? 0
         this.columnWidthsMap.set(cellType.coordinates.columnKey, Math.max(
           this.headerWidthsMap.get(cellType.coordinates.columnKey) ?? 0,
           this.columnWidthsMap.get(cellType.coordinates.columnKey) ?? 0,
           cellType.measureWidth() + this.commonCellPadding,
           minWidth)
         )
+        this.columnKeysBasedOnHeaderWidthOnly.delete(cellType.coordinates.columnKey)
         wasChanged = true
       }      
     }

projects/ngx-grid-core/src/lib/controller/grid-controller.service.ts

@@ -39,6 +39,7 @@ export class GridControllerService {
   public keyboardTriggers = this.grid.KeyBindings.manualKeyboardTriggers
 
   public defaultDateFormat = 'yyyy/MM/dd'
+  public defaultDateTimeFormat = 'yyyy/MM/dd h:mm a'
 
   private _subs : Set<Subscription> = new Set()
 
@@ -222,8 +223,11 @@ export class GridControllerService {
   }
 
   public getDateFormat() {
-    const format = this.localize.getLocalizedString('dateFormat')
-    return format === 'dateFormat' ? this.defaultDateFormat : format
+    return this.defaultDateFormat
+  }
+
+  public getDateTimeFormat() {
+    return this.defaultDateTimeFormat
   }
 
 }

projects/ngx-grid-core/src/lib/ui/cell/cell-types/date-time.cell-type.ts

@@ -0,0 +1,50 @@
+import { BehaviorSubject } from 'rxjs'
+
+import { GridControllerService } from '../../../controller/grid-controller.service'
+import { GridOverlayService } from '../../../services/grid-overlay-service.service'
+import { ECellMode } from '../../../typings/enums'
+import { IGridCellComponent } from '../../../typings/interfaces'
+import { CharacterSizer } from '../../../utils/character-sizer'
+import { BaseCellType } from './abstractions/base-cell-type.abstract'
+
+export class DateTimeCellType extends BaseCellType {
+
+  public mode = new BehaviorSubject<ECellMode>(ECellMode.Readonly)
+
+  private readonly readonlyCssClassName = 'datetime-readonly'
+
+  private _displayNode?: HTMLElement
+
+  constructor(
+    gridController: GridControllerService,
+    overlayService: GridOverlayService,
+    parentCell    : IGridCellComponent
+  ) { super(overlayService, parentCell, gridController) }
+
+  public get displayNode()  { return this._displayNode  ?? this._generateDisplayNode() }
+  public get editableNode() { return this.displayNode }
+
+  public override receiveValue(value: any = this.value): void {
+    super.receiveValue(value)
+    if (!this._displayNode) return
+    this._displayNode.innerText = this._displayValue
+  }
+
+  private _generateDisplayNode(): HTMLElement {
+    this._displayNode = this.createDiv(this.readonlyCssClassName)
+    this.receiveValue()
+    return this._displayNode
+  }
+
+  private get _displayValue(): string {
+    return this.gridController.cell.GetFormattedValue.getHTML(this.coordinates, this.value)
+  }
+
+  public override measureWidth(): number {
+    if (!this.value) return 0
+    const additionalWidth = 17
+    const formattedVal = this.gridController.cell.GetFormattedValue.getPlainText(this.coordinates, this.value)
+    return CharacterSizer.measure(formattedVal, this.getFont(), this.maxWidth) + additionalWidth
+  }
+
+}

projects/ngx-grid-core/src/lib/ui/cell/cell-types/index.ts

@@ -2,6 +2,7 @@ import { BooleanCellType as Boolean } from './boolean.cell-type'
 import { ColorCellType as Color } from './color.cell-type'
 import { DateRangeCellType as DateRange } from './date-range.cell-type'
 import { DateCellType as Date } from './date.cell-type'
+import { DateTimeCellType as DateTime } from './date-time.cell-type'
 import { DropdownMultiSelectCellType as DropdownMultiSelect } from './dropdown-multi-select.cell-type'
 import { DropdownSingleSelectCellType as DropdownSingleSelect } from './dropdown-single-select.cell-type'
 import { FileCellType as File } from './file.cell-type'
@@ -21,6 +22,7 @@ const CELL_TYPES = {
   Number,
   NumberRange,
   Date,
+  DateTime,
   DateRange,
   DropdownSingleSelect,
   DropdownMultiSelect,

projects/ngx-grid-core/src/lib/ui/cell/cell-types/styles/cell-type-styles.scss

@@ -2,6 +2,7 @@
 .number-readonly,
 .rich-text-readonly,
 .date-readonly,
+.datetime-readonly,
 .color-readonly,
 .file-cell-type {
   height: min-content;

projects/ngx-grid-core/src/lib/ui/cell/cell-types/value-multi-editing/multi-editors-factory.ts

@@ -9,6 +9,7 @@ export const CELL_MULTI_EDITORS: {[key in TCellTypeName]: Array<new (cellValue:
   RichText            : [ editors.TextAppend, editors.TextPrepend, editors.ClearValues ],
   Number              : [ editors.NumberAdd, editors.NumberSubtract, editors.NumberDivide, editors.NumberMultiply, editors.ClearValues],
   Date                : [ editors.DateAddDays, editors.DateSubtractDays, editors.ClearValues ],
+  DateTime            : [ ],
   NumberRange         : [ editors.ClearValues ],
   DateRange           : [ editors.ClearValues ],
   DropdownSingleSelect: [ editors.ClearValues ],

projects/ngx-grid-core/src/lib/ui/cell/cell-types/value-parsing/index.ts

@@ -13,6 +13,7 @@ export const CELL_VALUE_PARSERS: {[key in TCellTypeName]: ICellValueParser} = {
   Color               : new ValueParser([parsers.String, parsers.Color]),
   Number              : new ValueParser([parsers.Number]),
   Date                : new ValueParser([parsers.Date]),
+  DateTime            : new ValueParser([parsers.DateTime]),
   DropdownSingleSelect: new ValueParser([parsers.MultiSelect]),
   DropdownMultiSelect : new ValueParser([parsers.Array, parsers.MultiSelect]),
   DateRange           : new ValueParser([parsers.Array]),

projects/ngx-grid-core/src/lib/ui/cell/cell-types/value-parsing/parsers/datetime.parser.ts

@@ -0,0 +1,22 @@
+import { IGridValueParsingResult } from '../../../../../typings/interfaces'
+import { ParseDateTime } from '../../../../../utils/parse-datetime-string'
+import { BaseParser } from './base-parser.abstract'
+import { IParsingTest } from './parsing-test.interface'
+
+export class DateTimeParser extends BaseParser implements IParsingTest {
+  constructor (public readonly initialValue: any) { super() }
+
+  // Parses a datetime string into a Date object
+  public run(): IGridValueParsingResult<Date> {
+
+    if (this.initialValue instanceof Date) return this.passed(this.initialValue)
+    
+    if (typeof this.initialValue !== 'string') return this.failed()
+
+    const dateObj = ParseDateTime(this.initialValue)
+
+    if (!dateObj) return this.failed()
+    
+    return this.passed(dateObj)
+  }
+}

projects/ngx-grid-core/src/lib/ui/cell/cell-types/value-parsing/parsers/index.ts

@@ -2,6 +2,7 @@ import { ArrayParser as Array } from './array.parser'
 import { BooleanParser as Boolean } from './boolean.parser'
 import { ColorParser as Color } from './color.parser'
 import { DateParser as Date } from './date.parser'
+import { DateTimeParser as DateTime } from './datetime.parser'
 import { FileParser as File } from './file.parser'
 import { MultiSelectParser as MultiSelect } from './multi-select.parser'
 import { NumberParser as Number } from './number.parser'
@@ -14,6 +15,7 @@ export {
   Array,
   Boolean,
   Date,
+  DateTime,
   MultiSelect,
   Number,
   String,