From 5da1b37f978377f948d3c130195a1dd7f55b0435 Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Mon, 16 Sep 2024 16:21:56 +0000 Subject: [PATCH 1/4] feat: setup different layout render --- .../kup-input-panel-declarations.ts | 39 ++++++++++++++++++- .../kup-input-panel/kup-input-panel.tsx | 39 ++++++++++++++----- 2 files changed, 67 insertions(+), 11 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 70a937c3c2..6f087177d0 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -52,15 +52,22 @@ export interface KupInputPanelCellOptions { } export interface KupInputPanelLayout { + type: KupInputPanelLayoutType; horizontal?: boolean; - sections?: KupInputPanelLayoutSection[]; + sections?: + | KupInputPanelLayoutSection[] + | KupInputPanelLayoutAbsoluteSection[]; sectionsType?: KupInputPanelLayoutSectionType; } +export enum KupInputPanelLayoutType { + GRID = 'SmeupDataLayout', + ABSOLUTE = 'SmeupDataLayoutAbsolute', +} + export enum KupInputPanelLayoutSectionType { TAB = 'tab', } - export interface KupInputPanelLayoutSection { id?: string; title?: string; @@ -76,6 +83,12 @@ export interface KupInputPanelLayoutSection { sectionsType?: KupInputPanelLayoutSectionType; } +export interface KupInputPanelLayoutAbsoluteSection { + attributes: KupInputPanelLayoutAbsoluteSectionAttributes; + fields: KupInputPanelLayoutAbsoluteFields[]; + sections?: KupInputPanelLayoutAbsoluteSection[]; +} + export interface KupInputPanelLayoutField { id: string; // Span is referred to start @@ -88,6 +101,28 @@ export interface KupInputPanelLayoutField { rowEnd?: number; } +export interface KupInputPanelLayoutAbsoluteFields { + attributes: KupInputPanelLayoutAbsoluteFieldsAttributes; +} + +export interface KupInputPanelLayoutAbsoluteSectionAttributes { + Col: string; + Wid: string; + Left: string; + Pos: string; + Dim: string; + Nam: string; + Row: string; + Hei: string; +} + +export interface KupInputPanelLayoutAbsoluteFieldsAttributes { + Col: string; + Lun: string; + Nam: string; + Row: string; +} + export type DataAdapterFn = ( options: GenericObject, fieldLabel: string, diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 544172861f..734a0208e0 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -53,9 +53,11 @@ import { KupInputPanelCell, KupInputPanelColumn, KupInputPanelData, + KupInputPanelLayout, KupInputPanelLayoutField, KupInputPanelLayoutSection, KupInputPanelLayoutSectionType, + KupInputPanelLayoutType, KupInputPanelProps, KupInputPanelRow, KupInputPanelSubmit, @@ -180,6 +182,16 @@ export class KupInputPanel { [FCellShapes.LABEL, this.#renderLabel.bind(this)], [FCellShapes.TABLE, this.#renderDataTable.bind(this)], ]); + #layoutRender: Map< + KupInputPanelLayoutType, + (inputPanelCell: InputPanelCells, layout: KupInputPanelLayout) => any + > = new Map any>([ + [KupInputPanelLayoutType.GRID, this.#renderGridLayout.bind(this)], + [ + KupInputPanelLayoutType.ABSOLUTE, + this.#renderAbsoluteLayout.bind(this), + ], + ]); #sectionRenderMap: Map< KupInputPanelLayoutSectionType, (cells: InputPanelCells, sections: KupInputPanelLayoutSection[]) => any @@ -283,6 +295,7 @@ export class KupInputPanel { #renderRow(inputPanelCell: InputPanelCells) { const layout = inputPanelCell.row.layout; + const horizontal = layout?.horizontal || false; let rowContent: VNode[]; @@ -292,15 +305,8 @@ export class KupInputPanel { this.#renderCell(cell.cell, inputPanelCell.row, cell.column) ); } else { - const sectionRender = this.#sectionRenderMap.get( - layout.sectionsType - ); - - rowContent = sectionRender - ? sectionRender(inputPanelCell, layout.sections) - : layout.sections.map((section) => - this.#renderSection(inputPanelCell, section) - ); + const layoutRender = this.#layoutRender.get(layout.type); + rowContent = layoutRender(inputPanelCell, layout); } const classObj = { @@ -461,6 +467,21 @@ export class KupInputPanel { return null; } + #renderGridLayout( + inputPanelCell: InputPanelCells, + layout: KupInputPanelLayout + ) { + const sectionRender = this.#sectionRenderMap.get(layout.sectionsType); + + return sectionRender + ? sectionRender(inputPanelCell, layout.sections) + : layout.sections.map((section) => + this.#renderSection(inputPanelCell, section) + ); + } + + #renderAbsoluteLayout() {} + #renderSection( cells: InputPanelCells, section: KupInputPanelLayoutSection, From fb4ceff011783933c256fdd22de1725a198ca6a0 Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Wed, 18 Sep 2024 15:04:52 +0000 Subject: [PATCH 2/4] feat: render sections and fields --- .../kup-input-panel-declarations.ts | 4 +- .../kup-input-panel/kup-input-panel-utils.ts | 42 +++++++ .../kup-input-panel/kup-input-panel.scss | 21 ++++ .../kup-input-panel/kup-input-panel.tsx | 118 ++++++++++++++++-- 4 files changed, 174 insertions(+), 11 deletions(-) create mode 100644 packages/ketchup/src/components/kup-input-panel/kup-input-panel-utils.ts diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 6f087177d0..3671d1bb0f 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -85,7 +85,7 @@ export interface KupInputPanelLayoutSection { export interface KupInputPanelLayoutAbsoluteSection { attributes: KupInputPanelLayoutAbsoluteSectionAttributes; - fields: KupInputPanelLayoutAbsoluteFields[]; + fields: KupInputPanelLayoutAbsoluteField[]; sections?: KupInputPanelLayoutAbsoluteSection[]; } @@ -101,7 +101,7 @@ export interface KupInputPanelLayoutField { rowEnd?: number; } -export interface KupInputPanelLayoutAbsoluteFields { +export interface KupInputPanelLayoutAbsoluteField { attributes: KupInputPanelLayoutAbsoluteFieldsAttributes; } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-utils.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-utils.ts new file mode 100644 index 0000000000..5f298b0475 --- /dev/null +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-utils.ts @@ -0,0 +1,42 @@ +const CHAR_WIDTH = 12; +const ROW_HEIGHT = 22; + +export const getAbsoluteWidth = (length: number) => { + if (length == 0) { + return CHAR_WIDTH / 2; + } + + if (!length) { + return null; + } + + if (length === 1) { + return 1.5 * CHAR_WIDTH; + } + + return length * CHAR_WIDTH; +}; + +export const getAbsoluteHeight = (height: number) => { + if (!height) { + return null; + } + + return height * ROW_HEIGHT; +}; + +export const getAbsoluteTop = (row: number) => { + if (!row) { + return null; + } + + return row * ROW_HEIGHT; +}; + +export const getAbsoluteLeft = (col: number) => { + if (!col) { + return null; + } + + return col * CHAR_WIDTH; +}; diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss index 0ee40c22a3..1cc1bff62a 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.scss @@ -92,5 +92,26 @@ font-family: var(--kup_cell_font_family); } } + + .input-panel-label { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + } + + &--absolute { + height: 87ch; + justify-content: flex-end; + + .input-panel-label { + justify-content: start; + } + + .mdc-text-field { + height: unset !important; + } + } } } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 734a0208e0..d82dd165ff 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -54,6 +54,8 @@ import { KupInputPanelColumn, KupInputPanelData, KupInputPanelLayout, + KupInputPanelLayoutAbsoluteField, + KupInputPanelLayoutAbsoluteSection, KupInputPanelLayoutField, KupInputPanelLayoutSection, KupInputPanelLayoutSectionType, @@ -63,6 +65,12 @@ import { KupInputPanelSubmit, } from './kup-input-panel-declarations'; import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations'; +import { + getAbsoluteHeight, + getAbsoluteLeft, + getAbsoluteTop, + getAbsoluteWidth, +} from './kup-input-panel-utils'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -312,6 +320,8 @@ export class KupInputPanel { const classObj = { 'input-panel': true, 'input-panel--column': !horizontal, + 'input-panel--absolute': + layout?.type === KupInputPanelLayoutType.ABSOLUTE, }; // We create a form for each row in data @@ -439,15 +449,8 @@ export class KupInputPanel { } #renderLabel(cell: KupDataCell, cellId: string) { - const styleObj = { - display: 'flex', - width: '100%', - height: '100%', - 'align-items': 'center', - 'justify-content': 'center', - }; return ( - + {cell.value} ); @@ -480,7 +483,14 @@ export class KupInputPanel { ); } - #renderAbsoluteLayout() {} + #renderAbsoluteLayout( + inputPanelCell: InputPanelCells, + layout: KupInputPanelLayout + ) { + return layout.sections.map((section) => + this.#renderAbsoluteSection(inputPanelCell, section) + ); + } #renderSection( cells: InputPanelCells, @@ -536,6 +546,43 @@ export class KupInputPanel { ); } + #renderAbsoluteSection( + cells: InputPanelCells, + section: KupInputPanelLayoutAbsoluteSection + ) { + let content = []; + + if (section.sections?.length) { + content = section.sections.map((innerSection) => + this.#renderAbsoluteSection(cells, innerSection) + ); + } else if (section.fields?.length) { + content = section.fields.map((field) => + this.#renderAbsoluteField(cells, field) + ); + } + + const width = `${getAbsoluteWidth(+section.attributes.Wid)}px`; + const height = `${getAbsoluteHeight(+section.attributes.Hei)}px`; + const top = `${getAbsoluteTop(+section.attributes.Row)}px`; + const left = `${getAbsoluteLeft(+section.attributes.Col)}px`; + + const sectionStyle = { + position: 'absolute', + width, + 'min-width': width, + 'max-width': width, + height, + 'min-height': height, + 'max-height': height, + top, + left, + overflow: 'auto', + }; + + return
{content}
; + } + #renderSectionTab( cells: InputPanelCells, sections: KupInputPanelLayoutSection[] @@ -630,6 +677,59 @@ export class KupInputPanel { ); } + #renderAbsoluteField( + cells: InputPanelCells, + field: KupInputPanelLayoutAbsoluteField + ) { + const fieldCell = cells.cells.find( + (cell) => cell.column.name === field.attributes.Nam + ); + if (!fieldCell || !fieldCell.cell) { + return; + } + + let length: number; + if (fieldCell.cell.shape == FCellShapes.DATE) { + length = +field.attributes.Lun > 8 ? +field.attributes.Lun : 8; + } else { + length = +field.attributes.Lun; + } + + const width = `${getAbsoluteWidth(length)}px`; + const height = `${getAbsoluteHeight(1)}px`; + const top = `${getAbsoluteTop(+field.attributes.Row)}px`; + const left = `${getAbsoluteLeft(+field.attributes.Col)}px`; + + const styleObj = { + position: 'absolute', + width, + 'min-width': width, + 'max-width': width, + height, + 'min-height': height, + 'max-height': height, + top, + left, + overflow: 'auto', + }; + + const cell = { + ...fieldCell.cell, + data: { + ...fieldCell.cell.data, + customStyle: + (fieldCell.cell.data.customStyle || '') + + '.mdc-text-field {height: unset !important;}', + }, + }; + + return ( +
+ {this.#renderCell(cell, cells.row, fieldCell.column)} +
+ ); + } + #mapCells(data: KupInputPanelData) { const inpuPanelCells = data?.rows?.length ? data.rows.reduce((inpuPanelCells, row) => { From 4a26c541211758dc260b041f0433c92c9d68681e Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Thu, 19 Sep 2024 13:34:50 +0000 Subject: [PATCH 3/4] fix: different layout render --- .../kup-input-panel-declarations.ts | 7 +------ .../kup-input-panel/kup-input-panel.tsx | 20 ++++--------------- 2 files changed, 5 insertions(+), 22 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 3671d1bb0f..40bbb9ab20 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -52,19 +52,14 @@ export interface KupInputPanelCellOptions { } export interface KupInputPanelLayout { - type: KupInputPanelLayoutType; horizontal?: boolean; + absolute?: boolean; sections?: | KupInputPanelLayoutSection[] | KupInputPanelLayoutAbsoluteSection[]; sectionsType?: KupInputPanelLayoutSectionType; } -export enum KupInputPanelLayoutType { - GRID = 'SmeupDataLayout', - ABSOLUTE = 'SmeupDataLayoutAbsolute', -} - export enum KupInputPanelLayoutSectionType { TAB = 'tab', } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 3bb83cca3d..7ab953f15a 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -59,7 +59,6 @@ import { KupInputPanelLayoutField, KupInputPanelLayoutSection, KupInputPanelLayoutSectionType, - KupInputPanelLayoutType, KupInputPanelProps, KupInputPanelRow, KupInputPanelSubmit, @@ -190,16 +189,6 @@ export class KupInputPanel { [FCellShapes.LABEL, this.#renderLabel.bind(this)], [FCellShapes.TABLE, this.#renderDataTable.bind(this)], ]); - #layoutRender: Map< - KupInputPanelLayoutType, - (inputPanelCell: InputPanelCells, layout: KupInputPanelLayout) => any - > = new Map any>([ - [KupInputPanelLayoutType.GRID, this.#renderGridLayout.bind(this)], - [ - KupInputPanelLayoutType.ABSOLUTE, - this.#renderAbsoluteLayout.bind(this), - ], - ]); #sectionRenderMap: Map< KupInputPanelLayoutSectionType, (cells: InputPanelCells, sections: KupInputPanelLayoutSection[]) => any @@ -220,7 +209,6 @@ export class KupInputPanel { @Watch('data') onDataChanged() { this.#originalData = structuredClone(this.data); - if (this.#listeners.length) { this.#listeners.map(({ event, handler }) => { this.rootElement.removeEventListener(event, handler); @@ -304,15 +292,15 @@ export class KupInputPanel { this.#renderCell(cell.cell, inputPanelCell.row, cell.column) ); } else { - const layoutRender = this.#layoutRender.get(layout.type); - rowContent = layoutRender(inputPanelCell, layout); + rowContent = layout.absolute + ? this.#renderAbsoluteLayout(inputPanelCell, layout) + : this.#renderGridLayout(inputPanelCell, layout); } const classObj = { 'input-panel': true, 'input-panel--column': !horizontal, - 'input-panel--absolute': - layout?.type === KupInputPanelLayoutType.ABSOLUTE, + 'input-panel--absolute': layout?.absolute, }; // We create a form for each row in data From 934f0f24ee4556563f6e9fcc4ed662958e677b85 Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Thu, 19 Sep 2024 13:56:54 +0000 Subject: [PATCH 4/4] fix typo --- .../components/kup-input-panel/kup-input-panel-declarations.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 40bbb9ab20..b54795e043 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -103,9 +103,6 @@ export interface KupInputPanelLayoutAbsoluteField { export interface KupInputPanelLayoutAbsoluteSectionAttributes { Col: string; Wid: string; - Left: string; - Pos: string; - Dim: string; Nam: string; Row: string; Hei: string;