Auto expand row edit form when a new row is added for Primary Key, Foreign Key, Unique Constraint and Exclusion Constraint. #3298

This commit is contained in:
Aditya Toshniwal 2023-03-27 17:14:37 +05:30 committed by GitHub
parent 51c22608b2
commit 66cb4e3bcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 8 deletions

View File

@ -67,7 +67,7 @@ export default class CheckConstraintSchema extends BaseUISchema {
},{
id: 'consrc', label: gettext('Check'), type: 'multiline', cell: 'text',
group: gettext('Definition'), mode: ['properties', 'create', 'edit'],
readonly: obj.isReadonly, editable: false, noEmpty: true,
readonly: obj.isReadonly, editable: true, noEmpty: true,
},{
id: 'connoinherit', label: gettext('No inherit?'), type: 'switch', cell: 'switch',
group: gettext('Definition'), mode: ['properties', 'create', 'edit'], min_version: 90200,

View File

@ -121,6 +121,7 @@ export class ConstraintsSchema extends BaseUISchema {
canAddRow: function(state) {
return ((state.primary_key||[]).length < 1 && obj.anyColumnAdded(state));
},
expandEditOnAdd: true,
depChange: (state, source, topState, actionObj)=>{
if (state.is_partitioned && obj.top.getServerVersion() < 110000 || state.columns?.length <= 0) {
return {primary_key: []};
@ -147,6 +148,7 @@ export class ConstraintsSchema extends BaseUISchema {
columns : ['name', 'columns','references_table_name'],
disabled: this.inCatalog,
canAddRow: obj.anyColumnAdded,
expandEditOnAdd: true,
depChange: (state)=>{
if (state.is_partitioned && obj.top.getServerVersion() < 110000 || state.columns?.length <= 0) {
return {foreign_key: []};
@ -177,6 +179,7 @@ export class ConstraintsSchema extends BaseUISchema {
return obj.canAdd(state);
},
canAddRow: obj.anyColumnAdded,
expandEditOnAdd: true,
depChange: (state)=>{
if (state.is_partitioned && obj.top.getServerVersion() < 110000 || state.columns?.length <= 0) {
return {unique_constraint: []};
@ -196,6 +199,7 @@ export class ConstraintsSchema extends BaseUISchema {
return obj.canAdd(state);
},
canAddRow: obj.anyColumnAdded,
expandEditOnAdd: true,
depChange: (state)=>{
if (state.is_partitioned && obj.top.getServerVersion() < 110000 || state.columns?.length <= 0) {
return {exclude_constraint: []};

View File

@ -346,6 +346,7 @@ export default function DataGridView({
const stateUtils = useContext(StateUtilsContext);
const checkIsMounted = useIsMounted();
const [hoverIndex, setHoverIndex] = useState();
const newRowIndex = useRef();
/* Using ref so that schema variable is not frozen in columns closure */
const schemaRef = useRef(schema);
@ -538,12 +539,15 @@ export default function DataGridView({
}
let newRow = schemaRef.current.getNewData();
if(props.expandEditOnAdd && props.canEdit) {
newRowIndex.current = rows.length;
}
dataDispatch({
type: SCHEMA_STATE_ACTIONS.ADD_ROW,
path: accessPath,
value: newRow,
});
}, [props.canAddRow]);
}, [props.canAddRow, rows?.length]);
const defaultColumn = useMemo(()=>({
}), []);
@ -593,6 +597,13 @@ export default function DataGridView({
}
}, []);
useEffect(()=>{
if(newRowIndex.current >= 0) {
rows[newRowIndex.current]?.toggleRowExpanded(true);
newRowIndex.current = null;
}
}, [rows?.length]);
const moveRow = (dragIndex, hoverIndex) => {
dataDispatch({
type: SCHEMA_STATE_ACTIONS.MOVE_ROW,
@ -666,6 +677,7 @@ DataGridView.propTypes = {
canDeleteRow: PropTypes.oneOfType([
PropTypes.bool, PropTypes.func,
]),
expandEditOnAdd: PropTypes.bool,
customDeleteTitle: PropTypes.string,
customDeleteMsg: PropTypes.string,
canSearch: PropTypes.bool,

View File

@ -277,6 +277,7 @@ export default function FormView({
containerClassName: classes.controlRow, ...field, canAdd: canAdd, canReorder: canReorder,
canEdit: canEdit, canDelete: canDelete,
visible: visible, canAddRow: canAddRow, onDelete: field.onDelete, canSearch: field.canSearch,
expandEditOnAdd: field.expandEditOnAdd,
fixedRows: (viewHelperProps.mode == 'create' ? field.fixedRows : undefined)
};

View File

@ -110,7 +110,7 @@ MappedFormControlBase.propTypes = {
};
/* Control mapping for grid cell view */
function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, visible, reRenderRow, ...props }) {
function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, visible, reRenderRow, inputRef, ...props }) {
const name = id;
const onTextChange = useCallback((e) => {
let val = e;
@ -149,15 +149,16 @@ function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, v
/* The mapping does not need Form* components as labels are not needed for grid cells */
switch(cell) {
case 'int':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='int'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='int'/>;
case 'numeric':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='numeric'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='numeric'/>;
case 'text':
return <InputText name={name} value={value} onChange={onTextChange} {...props}/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props}/>;
case 'password':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='password'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='password'/>;
case 'select':
return <InputSelect name={name} value={value} onChange={onTextChange} optionsLoaded={optionsLoadedRerender} {...props}/>;
return <InputSelect name={name} value={value} onChange={onTextChange} optionsLoaded={optionsLoadedRerender}
inputRef={inputRef} {...props}/>;
case 'switch':
return <InputSwitch name={name} value={value}
onChange={(e)=>onTextChange(e.target.checked, e.target.name)} {...props} />;