fix: User Preferences Issues (#1207)
* fix: study list translations * Don't render until translations are ready * Try to wait for translations to load * Use null to render "nothing" * Try toggling useSuspense off up a layer * logging * Remove useSuspense false flags * DO NOT OPEN A PR WITH IT. Experimental changes only. Try to solve issues with useTranslation hooks #Please enter the commit message for your changes. Lines starting * Remove unecessary changes * feat: 🎸 useMedia hook to not use one more prop for upd state vl * docs: Add license scan report and status (#1161) Signed-off-by: fossabot <badges@fossa.io> * fix: 🐛 Fix for JS breaking on header (#1164) * feat: 🎸 Code review and refact Revised code based on PRs(variable alias,...). Changed hook for useMedia. Now, it provides two hooks: one to get displayMediaSize and other to get Entity(component, objects...) based on displayMediaSize. Implemented a similar solution for state manager to store mediaQueryList(s) and displaySize for app. * feat: 🎸 Fine tunning on mediaQuery value, fixed issue about it * fix: 🐛 Fixed issue and refactoring Fixed js exception and also refactoring userPreferences components to functional component * fix: 🐛 Code review. Localstorage fix minor bugs * fix: 🐛 Ensure hotkey lower case always * fix: translation switcher * chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.6 - @ohif/ui@0.62.1 - @ohif/viewer@2.8.2 * Add new modal service * Change serviceManager prop to servicesManager * CR Update: fix casing and add required proptypes to providers * CR Update: Improve ohifmodal proptypes * CR Update: Fix typo in extensionmanager * CR Update: add default props to service and check service in provider * Refactor modal provider to better use its own state * ci: don't build our master branch (#1177) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * Use modal instead of modal context * Ci/promotable builds (#1179) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Change modal children order * Ci/promotable builds (#1180) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * Ci/promotable builds (#1181) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * Ci/promotable builds (#1182) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Fix OHIFModal proptypes * Ci/promotable builds (#1183) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * Ci/promotable builds (#1184) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * ci: workaround for sudo limitations * ci: restore release workflow (#1185) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * ci: workaround for sudo limitations * ci: restore release workflow * Pass services to each module, improve tests * Add servicesManager test and registerServices method * Fix key warning of snackbar elements * Remove netlify-cli; we';ll install this on CI server * Update staging and prod netlify site IDs * Clean up NPM_PUBLISH step * Clean up DOCS_PUBLISH step * Clean up Deploy workflow * Custom executor to override cypress config * Spacing * Use an existing docker hub image * Switch to npx instead of digging into npm bin location * Remove e2e test before prod deploy * Add workflow images * docs: continous integrationn * Add default props to modal * chore(release): publish [skip ci] - @ohif/extension-cornerstone@1.5.1 - @ohif/extension-vtk@0.53.7 - @ohif/core@1.9.1 - @ohif/ui@0.62.2 - @ohif/viewer@2.8.3 * chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.8 - @ohif/core@1.10.0 - @ohif/ui@0.62.3 - @ohif/viewer@2.8.4 * ci: Redirect site traffic to index.html if file is not resolved * ci: fix typo * fix: 🐛 Code review. Remove 'global state' for displaySize * fix: 🐛 Code review. Ref back to useMedia and pass value down Code review. Ref back to useMedia and pass value down (components) instead of creating a specialized hook to tied any component on it * fix: translation switcher * fix * cleanup * add missed translation * fix: 🐛 Code review * fix: 🐛 Fix unit tests * fix: 🐛 Fix unit test * fix: 🐛 Code merge solve conflicts. Missing files changes * Merge from master. Missing files changes * feat: 🎸 Code review. Fix issues with DatePicker Fixed at least the minimum issue with datePicker and update some content on every translation changed * fix: 🐛 Code review. Style fix on modal * fixes in general preferences after merge * fix * export default i18n language * translation fixes * increase snackbar zindex * initialize language * WIP propagate props<>state fixes * fix state propagation * remove hotkey error when reset default * fix datePicker * i18n updates * fix i18n strings * fix reset default -- set right input value * fix default language * fix e2e for user preferences * small fix datePicker props * remove i18n from window -- debugging purposes only * lint fixes
This commit is contained in:
Rodrigo Antinarelli authored and Danny Brown committed
1 parent
fd1a9e2abe
commit
1df21a9e07
31 files changed
+1332
-737
No files matched your search
@@ -1,94 +1,132 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './WindowLevelPreferences.styl';
|
||||
/**
|
||||
* WindowLevelPreferencesRow
|
||||
* Renders row for window level preference
|
||||
* It stores current state and whenever it changes, component messages parent of new value (through function callback)
|
||||
* @param {object} props component props
|
||||
* @param {string} props.description description for given preset
|
||||
* @param {number} props.window window value
|
||||
* @param {number} props.level level value
|
||||
* @param {string} props.rowName name of given row to identify it
|
||||
* @param {function} props.onSuccessChanged Callback function to communicate parent in case its states changes
|
||||
*/
|
||||
function WindowLevelPreferencesRow({
|
||||
description,
|
||||
window,
|
||||
level,
|
||||
rowName,
|
||||
onSuccessChanged,
|
||||
// onFailureChanged
|
||||
}) {
|
||||
const [rowState, setRowState] = useState({ description, window, level });
|
||||
|
||||
export class WindowLevelPreferences extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
data: this.props.windowLevelData,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
windowLevelData: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
const onInputChanged = (event, name) => {
|
||||
const newValue = event.target.value;
|
||||
setRowState({ ...rowState, [name]: newValue });
|
||||
};
|
||||
|
||||
onChange(event, key, field) {
|
||||
const data = this.state.data;
|
||||
const entry = data[key];
|
||||
entry[field] = event.target.value;
|
||||
this.setState({ data });
|
||||
useEffect(() => {
|
||||
onSuccessChanged(rowName, rowState);
|
||||
}, [rowState]);
|
||||
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(data);
|
||||
}
|
||||
}
|
||||
|
||||
getWLPreferencesRows(key) {
|
||||
const entry = this.state.data[key];
|
||||
const renderTd = (value, name, type) => {
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td className="p-r-1 text-center">{key}</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.description}
|
||||
type="text"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'description');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.window}
|
||||
type="number"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'window');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.level}
|
||||
type="number"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'level');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={value}
|
||||
type={type}
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
onInputChanged(event, name);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<table className="full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-x-1 text-center presetIndex">Preset</th>
|
||||
<th className="p-x-1">Description</th>
|
||||
<th className="p-x-1">Window</th>
|
||||
<th className="p-x-1">Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.keys(this.state.data).map(key => {
|
||||
return this.getWLPreferencesRows(key);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<tr key={rowName}>
|
||||
<td className="p-r-1 text-center">{rowName}</td>
|
||||
{renderTd(rowState.description, 'description', 'text')}
|
||||
{renderTd(rowState.window, 'window', 'number')}
|
||||
{renderTd(rowState.level, 'level', 'number')}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
WindowLevelPreferencesRow.propTypes = {
|
||||
description: PropTypes.string.isRequired,
|
||||
window: PropTypes.number.isRequired,
|
||||
level: PropTypes.number.isRequired,
|
||||
rowName: PropTypes.string.isRequired,
|
||||
onSuccessChanged: PropTypes.func.isRequired,
|
||||
//onFailureChanged: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
/**
|
||||
* WindowLevelPreferences tab
|
||||
* It renders all window level presets
|
||||
*
|
||||
* It stores current state and whenever it changes, component messages parent of new value (through function callback)
|
||||
* @param {object} props component props
|
||||
* @param {string} props.name Tab`s name
|
||||
* @param {object} props.windowLevelData Data for initial state
|
||||
* @param {function} props.onTabStateChanged Callback function to communicate parent in case its states changes
|
||||
*/
|
||||
function WindowLevelPreferences({
|
||||
windowLevelData,
|
||||
name,
|
||||
onTabStateChanged /*onTabErrorChanged*/,
|
||||
}) {
|
||||
const [tabState, setTabState] = useState(windowLevelData);
|
||||
// TODO to be used once error handling is implemented
|
||||
//const [tabError, setTabError] = useState(false);
|
||||
|
||||
const onWindowLevelChanged = (key, state) => {
|
||||
setTabState({ ...tabState, [key]: state });
|
||||
};
|
||||
|
||||
// tell parent to update its state
|
||||
useEffect(() => {
|
||||
onTabStateChanged(name, { windowLevelData: tabState });
|
||||
}, [tabState]);
|
||||
|
||||
return (
|
||||
<table className="full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-x-1 text-center presetIndex">Preset</th>
|
||||
<th className="p-x-1">Description</th>
|
||||
<th className="p-x-1">Window</th>
|
||||
<th className="p-x-1">Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.keys(tabState).map(objKey => (
|
||||
<WindowLevelPreferencesRow
|
||||
onSuccessChanged={onWindowLevelChanged}
|
||||
rowName={objKey}
|
||||
key={objKey}
|
||||
description={tabState[objKey].description}
|
||||
window={tabState[objKey].window}
|
||||
level={tabState[objKey].level}
|
||||
></WindowLevelPreferencesRow>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
WindowLevelPreferences.propTypes = {
|
||||
windowLevelData: PropTypes.object.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
onTabStateChanged: PropTypes.func.isRequired,
|
||||
//onTabErrorChanged: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export { WindowLevelPreferences };
|
||||
Reference in new issue
Block a user