pgadmin4/web/pgadmin/preferences/static/js/components/RightPreference.jsx

87 lines
2.7 KiB
JavaScript

/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2025, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import gettext from 'sources/gettext';
import React, { useEffect, useRef, useCallback } from 'react';
import { Box, Link } from '@mui/material';
import PropTypes from 'prop-types';
import SchemaView from '../../../../static/js/SchemaView';
// Import helpers from new file
export default function RightPreference({ schema, filteredItemIds, selectedItem, setSelectedItem, initValues, onDataChange }) {
const schemaViewRef = useRef(null);
const getInitData = useCallback(() => {
return new Promise((resolve, reject) => {
try {
resolve(initValues);
} catch (error) {
reject(error instanceof Error ? error : Error(gettext('Something went wrong')));
}
});
}, [initValues]);
const updateVisibleFields = () => {
if(!selectedItem) return;
schema.schemaFields.forEach((field) => {
field.visible = field.parentId === selectedItem.id && filteredItemIds.includes(field.id);
});
schema.categoryUpdated(selectedItem.id);
};
useEffect(() => {
updateVisibleFields();
}, [filteredItemIds, selectedItem]);
if(selectedItem?.children) {
return (
<Box className='PreferencesComponent-preferencesContainer'>
<Box className='PreferencesComponent-noSelection'>
<Box>{gettext('Navigate to any below item to view or edit its preferences.')}</Box>
{selectedItem.children.map((child) => (
<Box key={child.id}>
<Link component='button' onClick={()=>setSelectedItem(child)} underline="hover">{child.name}</Link>
</Box>
))}
</Box>
</Box>
);
}
return (
<div className='PreferencesComponent-preferencesContainer' ref={schemaViewRef}>
<SchemaView
key={selectedItem?.id ?? 0}
formType={'dialog'}
getInitData={getInitData}
viewHelperProps={{ mode: 'edit' }}
schema={schema}
showFooter={false}
isTabView={false}
formClassName='PreferencesComponent-preferencesContainerBackground'
onDataChange={(isChanged, changedData) => {
onDataChange(changedData);
}}
focusOnFirstInput={false}
/>
</div>
);
}
RightPreference.propTypes = {
schema: PropTypes.object.isRequired,
initValues: PropTypes.object.isRequired,
onDataChange: PropTypes.func.isRequired,
filteredItemIds: PropTypes.arrayOf(PropTypes.any).isRequired,
selectedItem: PropTypes.object,
setSelectedItem: PropTypes.func.isRequired,
};