#53

sibvisions · Feb 15, 2021 · b28b5e5 · b28b5e5
1 parent b6690b8
commit b28b5e5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 39 deletions.
diff --git a/src/JVX/components/editors/number/UIEditorNumber.tsx b/src/JVX/components/editors/number/UIEditorNumber.tsx
@@ -12,6 +12,7 @@ import { checkCellEditorAlignments } from "../../compprops/CheckAlignments";
 import { sendOnLoadCallback } from "../../util/sendOnLoadCallback";
 import { parseJVxSize } from "../../util/parseJVxSize";
 import { getEditorCompId } from "../../util/GetEditorCompId";
+import { getDecimalLength, getGrouping, getMinimumIntDigits, getNumberLength, getScaleDigits } from "../../util/NumberProperties";
 
 interface ICellEditorNumber extends ICellEditor{
     numberFormat: string,
@@ -26,7 +27,7 @@ export interface IEditorNumber extends IEditor{
     scale: number,
 }
 
-interface ScaleType {
+export interface ScaleType {
     minScale:number,
     maxScale:number,
 }
@@ -43,38 +44,22 @@ const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
     const lastValue = useRef<any>();
     const {onLoadCallback, id} = baseProps;
 
-    const cellEditorMetaData:IEditorNumber|undefined = context.contentStore.dataProviderMetaData.get(compId)?.get(props.dataRow)?.columns.find(column => column.name === props.columnName) as IEditorNumber;
-
-    const scaleDigits:ScaleType = useMemo(() => {
-        let count = props.cellEditor.numberFormat.includes('.') ? (props.cellEditor.numberFormat.split('.')[1].match(/0/g) || []).length : 0;
-        return cellEditorMetaData.scale === -1 ? {minScale: count, maxScale:20} : {minScale: count, maxScale: cellEditorMetaData.scale}
-    }, [cellEditorMetaData.scale, props.cellEditor.numberFormat]);
-
-    const useGrouping = props.cellEditor.numberFormat?.includes(',');
-
-    const prefixLength = useMemo(() => {
-        let count = (props.cellEditor.numberFormat.split('.')[0].match(/0/g) || []).length;
-        return '0'.repeat(count - (selectedRow ? selectedRow.toString().length : 0))
-    },[props.cellEditor.numberFormat, selectedRow]);
-
-    const length = useMemo(() => {
-        let returnLength:number|undefined = undefined;
-        if (scaleDigits.maxScale === 0)
-            returnLength = cellEditorMetaData.precision;
-        else if (cellEditorMetaData.precision !== 0 && cellEditorMetaData.scale !== -1)
-            returnLength = cellEditorMetaData.precision+1;
-        if (useGrouping && returnLength)
-            returnLength += Math.floor((cellEditorMetaData.precision - cellEditorMetaData.scale)/4)
-        if (prefixLength && returnLength)
-            returnLength += prefixLength.length
-        return returnLength
-    }, [cellEditorMetaData.precision, cellEditorMetaData.scale, scaleDigits, useGrouping, prefixLength]);
+    const cellEditorMetaData:IEditorNumber|undefined = context.contentStore.dataProviderMetaData.get(compId)?.
+    get(props.dataRow)?.columns.find(column => column.name === props.columnName) as IEditorNumber;
+
+    const scaleDigits:ScaleType = useMemo(() => getScaleDigits(props.cellEditor.numberFormat, cellEditorMetaData.scale),
+    [cellEditorMetaData.scale, props.cellEditor.numberFormat]);
+
+    const useGrouping = getGrouping(props.cellEditor.numberFormat);
+
+    const prefixLength = useMemo(() => getMinimumIntDigits(props.cellEditor.numberFormat, selectedRow),
+    [props.cellEditor.numberFormat, selectedRow]);
+
+    const length = useMemo(() => getNumberLength(scaleDigits, cellEditorMetaData.precision, cellEditorMetaData.scale, useGrouping, prefixLength), 
+    [cellEditorMetaData.precision, cellEditorMetaData.scale, scaleDigits, useGrouping, prefixLength]);
 
     const decimalLength = useMemo(() => {
-        if (cellEditorMetaData.precision > 0)
-            return cellEditorMetaData.precision - cellEditorMetaData.scale
-        else
-            return undefined
+        getDecimalLength(cellEditorMetaData.precision, cellEditorMetaData.scale);
     },[cellEditorMetaData.precision, cellEditorMetaData.scale]);
 
     useLayoutEffect(() => {
@@ -101,8 +86,6 @@ const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
 
     const handleKeyDown = (e:any) => {
         const curRef = inputRef.current
-        //@ts-ignore
-        console.log(curRef.inputEl.value.length, length)
         handleEnterKey(e, () => sendSetValues(props.dataRow, props.name, props.columnName, selectedRow, lastValue.current, context.server));
         //@ts-ignore
         if (curRef.inputEl.value.length === curRef.inputEl.maxLength || (decimalLength && parseInt((value ? value.toString().split('.')[0] : "") + e.key).toString().length > decimalLength && curRef.inputEl.selectionStart <= (value ? value.toString().indexOf('.') : 0))) {
@@ -111,8 +94,6 @@ const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
         }
     }
 
-    console.log(selectedRow, prefixLength)
-
     return (
         <InputNumber
             ref={inputRef}

diff --git a/src/JVX/components/table/CellDisplaying.tsx b/src/JVX/components/table/CellDisplaying.tsx
@@ -6,6 +6,8 @@ import { IEditor } from "../editors/IEditor";
 import { parseDateFormatTable } from "../util/ParseDateFormats";
 import moment from "moment";
 import { createEditor } from "../../factories/UIFactory";
+import { IEditorNumber } from "../editors/number/UIEditorNumber";
+import { getGrouping, getMinimumIntDigits, getScaleDigits } from "../util/NumberProperties";
 
 export function displayEditor(metaData:IEditor|undefined, props:any) {
     let editor = <div>{props.cellData}</div>
@@ -24,7 +26,7 @@ export function displayEditor(metaData:IEditor|undefined, props:any) {
     return editor
 }
 
-export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource:string) {
+export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource:string, locale:string) {
     if (cellData !== undefined) {
         if (metaData && metaData.cellEditor) {
             if (metaData.cellEditor.className === "ChoiceCellEditor") {
@@ -47,10 +49,22 @@ export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource:
                 else
                     return null
             }
-            else if (metaData.cellEditor.className === "ImageCellEditor") {
+            else if (metaData.cellEditor.className === "ImageViewer") {
                 const castedColumn = metaData as IEditorImage
                 return <img className="rc-table-image" src={cellData ? "data:image/jpeg;base64," + cellData : resource + castedColumn.cellEditor.defaultImageName} alt="could not be loaded"/>
             }
+            else if (metaData.cellEditor.className === "NumberCellEditor") {
+                const castedColumn = metaData as IEditorNumber;
+                if (cellData === null)
+                    return null
+                return Intl.NumberFormat(locale, 
+                    {
+                        useGrouping: getGrouping(castedColumn.cellEditor.numberFormat),
+                        minimumIntegerDigits: getMinimumIntDigits(castedColumn.cellEditor.numberFormat, cellData)?.length,
+                        minimumFractionDigits: getScaleDigits(castedColumn.cellEditor.numberFormat, castedColumn.scale).minScale,
+                        maximumFractionDigits: getScaleDigits(castedColumn.cellEditor.numberFormat, castedColumn.scale).maxScale
+                    }).format(cellData);
+            }
             else
                 return cellData;
         }

diff --git a/src/JVX/components/table/UITable.scss b/src/JVX/components/table/UITable.scss
@@ -52,7 +52,7 @@ tr.p-highlight{
                 &.NumberCellEditor {
                     text-align: right;
                 }
-                &.ImageCellEditor {
+                &.ImageViewer {
                     >.cell-data {
                         padding: 0;
                         vertical-align: middle;

diff --git a/src/JVX/components/table/UITable.tsx b/src/JVX/components/table/UITable.tsx
@@ -40,13 +40,14 @@ const CellEditor: FC<CellEditor> = (props) => {
 
     const [edit, setEdit] = useState(false);
     const wrapperRef = useRef(null)
+    const context = useContext(jvxContext);
     const columnMetaData = props.metaData?.columns.find(column => column.name === props.colName)
     useOutsideClick(wrapperRef, setEdit, columnMetaData)
     return useMemo(() => {
         if (!edit) {
             return (
                 <div className={"cell-data"} style={{height: 30}} onDoubleClick={event => columnMetaData?.cellEditor?.className !== "ImageCellEditor" ? setEdit(true) : undefined}>
-                    {cellRenderer(columnMetaData, props.cellData, props.resource)}
+                    {cellRenderer(columnMetaData, props.cellData, props.resource, context.contentStore.locale)}
                 </div>
             )
         } else {

diff --git a/src/JVX/components/util/NumberProperties.tsx b/src/JVX/components/util/NumberProperties.tsx
@@ -0,0 +1,38 @@
+import { ScaleType } from "../editors/number/UIEditorNumber";
+
+export function getGrouping(numberFormat:string) {
+    return numberFormat.includes(',');
+}
+
+export function getMinimumIntDigits(numberFormat:string, value:any) {
+    let count = (numberFormat.split('.')[0].match(/0/g) || []).length;
+    if (count - (value ? value.toString().length : 0) > 0)
+        return '0'.repeat(count - (value ? value.toString().length : 0))
+    else
+        return undefined;
+}
+
+export function getScaleDigits(numberFormat:string, scale:number) {
+    let count = numberFormat.includes('.') ? (numberFormat.split('.')[1].match(/0/g) || []).length : 0;
+    return scale === -1 ? {minScale: count, maxScale:20} : {minScale: count, maxScale: scale}
+}
+
+export function getNumberLength(scaleDigits:ScaleType, precision:number, scale:number, grouping:boolean, minInt:string|undefined) {
+    let returnLength:number|undefined = undefined;
+    if (scaleDigits.maxScale === 0)
+        returnLength = precision;
+    else if (precision !== 0 && scale !== -1)
+        returnLength = precision+1;
+    if (grouping && returnLength)
+        returnLength += Math.floor((precision - scale)/4)
+    if (minInt && returnLength)
+        returnLength += minInt.length
+    return returnLength
+}
+
+export function getDecimalLength(precision:number, scale:number) {
+    if (precision > 0)
+    return precision - scale
+else
+    return undefined
+}