From 5db72a691670cf6432007f78aff22c491cb977a4 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Tue, 20 Jul 2021 18:26:20 +0530 Subject: [PATCH] - Some UI changes based on review comments. - Fix the numeric type. --- .../static/js/SchemaView/DataGridView.jsx | 27 +++++++++---- web/pgadmin/static/js/SchemaView/FormView.jsx | 12 +++--- .../static/js/SchemaView/MappedControl.jsx | 39 ++++++++++++++++++- .../static/js/components/FormComponents.jsx | 3 -- 4 files changed, 63 insertions(+), 18 deletions(-) diff --git a/web/pgadmin/static/js/SchemaView/DataGridView.jsx b/web/pgadmin/static/js/SchemaView/DataGridView.jsx index 0f657f41d..74a45ea8d 100644 --- a/web/pgadmin/static/js/SchemaView/DataGridView.jsx +++ b/web/pgadmin/static/js/SchemaView/DataGridView.jsx @@ -9,7 +9,7 @@ /* The DataGridView component is based on react-table component */ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useContext, useMemo, useRef, useState } from 'react'; import { Box } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { PgIconButton } from '../components/Buttons'; @@ -85,6 +85,9 @@ const useStyles = makeStyles((theme)=>({ padding: theme.spacing(1, 0.5), textAlign: 'left', }, + btnCell: { + padding: theme.spacing(0.5, 0), + }, resizer: { display: 'inline-block', width: '5px', @@ -146,13 +149,14 @@ function DataTableRow({row, totalRows, isResizing, schema, schemaRef, accessPath const classes = useStyles(); const [key, setKey] = useState(false); const depListener = useContext(DepListenerContext); + /* Memoize the row to avoid unnecessary re-render. * If table data changes, then react-table re-renders the complete tables * We can avoid re-render by if row data is not changed */ - let depsMap = _.values(row.values, Object.keys(row.values).filter((k)=>!k.startsWith('btn'))); - useEffect(()=>{ + const externalDeps = useMemo(()=>{ + let retVal = []; /* Calculate the fields which depends on the current field deps has info on fields which the current field depends on. */ schema.fields.forEach((field)=>{ @@ -164,18 +168,25 @@ function DataTableRow({row, totalRows, isResizing, schema, schemaRef, accessPath let source = accessPath.concat(dep); if(_.isArray(dep)) { source = dep; - depsMap.push(_.get(schemaRef.current.sessData, source)); + /* If its an array, then dep is from the top schema */ + retVal.push(source); } depListener.addDepListener(source, accessPath.concat(field.id), field.depChange); }); }); + return retVal; }, []); + /* External deps values are from top schema sess data */ + depsMap = depsMap.concat(externalDeps.map((source)=>_.get(schemaRef.current.top?.sessData, source))); depsMap = depsMap.concat([totalRows, row.isExpanded, key, isResizing]); return useMemo(()=>
{row.cells.map((cell, ci) => { let classNames = [classes.tableCell]; + if(typeof(cell.column.id) == 'string' && cell.column.id.startsWith('btn-')) { + classNames.push(classes.btnCell); + } if(cell.column.id == 'btn-edit' && row.isExpanded) { classNames.push(classes.expandedIconCell); } @@ -207,14 +218,14 @@ export default function DataGridView({ resizable: false, sortable: false, dataType: 'edit', - width: 30, + width: 26, minWidth: '0', Cell: ({row})=>{ let canEditRow = true; if(props.canEditRow) { canEditRow = evalFunc(schemaRef.current, props.canEditRow, row.original || {}); } - return } className={classes.gridRowButton} + return } className={classes.gridRowButton} onClick={()=>{ row.toggleRowExpanded(!row.isExpanded); }} disabled={!canEditRow} @@ -235,7 +246,7 @@ export default function DataGridView({ resizable: false, sortable: false, dataType: 'delete', - width: 30, + width: 26, minWidth: '0', Cell: ({row}) => { let canDeleteRow = true; @@ -244,7 +255,7 @@ export default function DataGridView({ } return ( - } + } onClick={()=>{ confirmDeleteRow(()=>{ /* Get the changes on dependent fields as well */ diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index bfa4dd1e3..c561a80d7 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/web/pgadmin/static/js/SchemaView/FormView.jsx @@ -77,7 +77,7 @@ export function getFieldMetaData(field, schema, value, viewHelperProps) { disabled: false, visible: true, canAdd: true, - canEdit: true, + canEdit: false, canDelete: true, modeSupported: true, }; @@ -112,9 +112,9 @@ export function getFieldMetaData(field, schema, value, viewHelperProps) { retData.disabled = Boolean(evalFunc(schema, disabled, value)); let {canAdd, canEdit, canDelete } = field; - retData.canAdd = _.isUndefined(canAdd) ? true : evalFunc(schema, canAdd, value); - retData.canEdit = _.isUndefined(canEdit) ? true : evalFunc(schema, canEdit, value); - retData.canDelete = _.isUndefined(canDelete) ? true : evalFunc(schema, canDelete, value); + retData.canAdd = _.isUndefined(canAdd) ? retData.canAdd : evalFunc(schema, canAdd, value); + retData.canEdit = _.isUndefined(canEdit) ? retData.canEdit : evalFunc(schema, canEdit, value); + retData.canDelete = _.isUndefined(canDelete) ? retData.canDelete : evalFunc(schema, canDelete, value); return retData; } @@ -216,9 +216,9 @@ export default function FormView({ depsMap.push(canAdd, canEdit, canDelete, visible); tabs[group].push( - useMemo(()=>, depsMap) + {...field} canAdd={canAdd} canEdit={canEdit} canDelete={canDelete} visible={visible}/> ); } else if(field.type === 'group') { groupLabels[field.id] = field.label; diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx index cd04f9655..479538cc9 100644 --- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx +++ b/web/pgadmin/static/js/SchemaView/MappedControl.jsx @@ -43,6 +43,17 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i onChange && onChange(value); }, []); + const onNumChange = useCallback((e) => { + let value = e; + if(e && e.target) { + value = e.target.value; + } + if(!isNaN(parseFloat(value))) { + value = parseFloat(value); + } + onChange && onChange(value); + }, []); + if(!visible) { return <>; } @@ -51,6 +62,8 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i switch (type) { case 'int': return ; + case 'numeric': + return ; case 'text': return ; case 'multiline': @@ -109,6 +122,28 @@ function MappedCellControlBase({cell, value, id, optionsLoaded, onCellChange, vi onCellChange(value); }, []); + const onIntChange = useCallback((e) => { + let value = e; + if(e && e.target) { + value = e.target.value; + } + if(!isNaN(parseInt(value))) { + value = parseInt(value); + } + onChange && onChange(value); + }, []); + + const onNumChange = useCallback((e) => { + let value = e; + if(e && e.target) { + value = e.target.value; + } + if(!isNaN(parseFloat(value))) { + value = parseFloat(value); + } + onChange && onChange(value); + }, []); + /* Some grid cells are based on options selected in other cells. * lets trigger a re-render for the row if optionsLoaded */ @@ -125,7 +160,9 @@ function MappedCellControlBase({cell, value, id, optionsLoaded, onCellChange, vi /* The mapping does not need Form* components as labels are not needed for grid cells */ switch(cell) { case 'int': - case 'number': + return ; + case 'numeric': + return ; case 'text': return ; case 'password': diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index 82bebdc95..d4eef3529 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/web/pgadmin/static/js/components/FormComponents.jsx @@ -781,9 +781,6 @@ export function InputColor({value, controlProps, disabled, onChange, currObj}) { let btnStyles = {backgroundColor: value}; return ( - // } />