feat: #1342 - Window level tab (#1429)

* WindowLevel preset code changes

* Remove localStorage code as its already being saved and some small refactor on reducer/action

* Creating unit tests for preferences reducer

* Fix cypress after class naming change

* Make hidden false as default for tab components

* Remove addUserPreferences

* Small refactor to use commandsManager from getCommandsModule instead of getting it from App.js

platform/viewer/src/components/UserPreferences/HotkeysPreferences.js

@@ -168,9 +168,11 @@ function HotkeysPreferences({ onClose }) {
                             keys={keys}
                             modifier_keys={MODIFIER_KEYS}
                             handleChange={handleChange}
-                            classNames={'hotkeyInput'}
+                            classNames={'preferencesInput'}
                           ></HotkeyField>
-                          <span className="errorMessage">{errorMessage}</span>
+                          <span className="preferencesInputErrorMessage">
+                            {errorMessage}
+                          </span>
                         </div>
                       </div>
                     );

platform/viewer/src/components/UserPreferences/HotkeysPreferences.styl

@@ -2,11 +2,6 @@
     display: flex
     padding: 20px
 
-    .errorMessage
-      color: var(--state-error-text)
-      font-size: 10px
-      text-transform: uppercase
-
     .hotkeyTable
       display: flex
       flex-direction: row
@@ -40,28 +35,6 @@
             flex-basis: 0
             flex-grow: 1.5
 
-          .hotkeyInput
-            font-weight: 400
-            cursor: pointer
-            transition: background-color .3s ease,border-color .3s ease
-            background-color: var(--ui-gray)
-            color: var(--text-primary-color)
-            border-color: var(--ui-border-coolor)
-            border: 0
-            border-radius: 2px
-            font-size: 14px
-            height: 30px
-            width: 100%
-            line-height: 16px
-            padding: 8px 9px 6px
-            text-align: center
-
-          .hotkeyInput:focus
-            border-color: var(--active-color)
-            background-color: var(--ui-gray-dark)
-            box-shadow: 0 0 0 2px var(--active-color) !important
-            outline: 0
-
           .hotkeyLabel
             padding: 5px 15px 5px 0
             text-align: right
@@ -69,5 +42,5 @@
             flex-grow: 1.5
 
           .stateError
-            .hotkeyInput
+            .preferencesInput
               background-color: var(--state-error)

platform/viewer/src/components/UserPreferences/UserPreferences.js

@@ -8,24 +8,23 @@ import { HotkeysPreferences } from './HotkeysPreferences';
 import { WindowLevelPreferences } from './WindowLevelPreferences';
 import { GeneralPreferences } from './GeneralPreferences';
 
+import './UserPreferences.styl';
+
 const tabs = [
   {
     name: 'Hotkeys',
     Component: HotkeysPreferences,
     customProps: {},
-    hidden: false,
   },
   {
     name: 'General',
     Component: GeneralPreferences,
     customProps: {},
-    hidden: false,
   },
   {
     name: 'Window Level',
     Component: WindowLevelPreferences,
     customProps: {},
-    hidden: true,
   },
 ];
 

platform/viewer/src/components/UserPreferences/UserPreferences.styl

@@ -0,0 +1,26 @@
+.preferencesInputErrorMessage
+    color: var(--state-error-text)
+    font-size: 10px
+    text-transform: uppercase
+
+.preferencesInput
+  font-weight: 400
+  cursor: pointer
+  transition: background-color .3s ease,border-color .3s ease
+  background-color: var(--ui-gray)
+  color: var(--text-primary-color)
+  border-color: var(--ui-border-coolor)
+  border: 0
+  border-radius: 2px
+  font-size: 14px
+  height: 30px
+  width: 100%
+  line-height: 16px
+  padding: 8px 9px 6px
+  text-align: center
+
+.preferencesInput:focus
+  border-color: var(--active-color)
+  background-color: var(--ui-gray-dark)
+  box-shadow: 0 0 0 2px var(--active-color) !important
+  outline: 0

platform/viewer/src/components/UserPreferences/WindowLevelPreferences.js

@@ -1,19 +1,115 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { redux } from '@ohif/core';
 
-import { TabFooter } from '@ohif/ui';
+import { TabFooter, useSnackbarContext } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
+const { actions } = redux;
+
+import './WindowLevelPreferences.styl';
+
 function WindowLevelPreferences({ onClose }) {
+  const dispatch = useDispatch();
+
+  const windowLevelData = useSelector(state => {
+    const { preferences = {} } = state;
+    const { windowLevelData } = preferences;
+
+    return windowLevelData;
+  });
+
+  const [state, setState] = useState({
+    values: { ...windowLevelData },
+  });
+
   const { t } = useTranslation('UserPreferencesModal');
   const onResetPreferences = () => {};
-  const onSave = () => {};
   const hasErrors = false;
+  const onSave = () => {
+    dispatch(actions.setUserPreferences({ windowLevelData: state.values }));
+
+    onClose();
+
+    snackbar.show({
+      message: t('SaveMessage'),
+      type: 'success',
+    });
+  };
+
+  const snackbar = useSnackbarContext();
+
+  const handleInputChange = event => {
+    const $target = event.target;
+    const { key, inputname } = $target.dataset;
+    const inputValue = $target.value;
+
+    if (!state.values[key] || !state.values[key][inputname]) {
+      return;
+    }
+
+    setState(prevState => ({
+      ...prevState,
+      values: {
+        ...prevState.values,
+        [key]: {
+          ...prevState.values[key],
+          [inputname]: inputValue,
+        },
+      },
+    }));
+  };
 
   return (
     <React.Fragment>
-      <div className="">Component content: {name}</div>
-      <div className="">TDB!</div>
+      <div className="WindowLevelPreferences">
+        <div className="wlColumn">
+          <div className="wlRow header">
+            <div className="wlColumn preset">Preset</div>
+            <div className="wlColumn description">Description</div>
+            <div className="wlColumn window">Window</div>
+            <div className="wlColumn level">Level</div>
+          </div>
+          {Object.keys(state.values).map((key, index) => {
+            return (
+              <div className="wlRow" key={key}>
+                <div className="wlColumn preset">{key}</div>
+                <div className="wlColumn description">
+                  <input
+                    type="text"
+                    className="preferencesInput"
+                    value={state.values[key].description}
+                    data-key={key}
+                    data-inputname="description"
+                    onChange={handleInputChange}
+                  />
+                </div>
+                <div className="wlColumn window">
+                  <input
+                    type="number"
+                    className="preferencesInput"
+                    value={state.values[key].window}
+                    data-key={key}
+                    data-inputname="window"
+                    onChange={handleInputChange}
+                  />
+                </div>
+                <div className="wlColumn level">
+                  <input
+                    type="number"
+                    className="preferencesInput"
+                    value={state.values[key].level}
+                    data-key={key}
+                    data-inputname="level"
+                    onChange={handleInputChange}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
       <TabFooter
         onResetPreferences={onResetPreferences}
         onSave={onSave}

platform/viewer/src/components/UserPreferences/WindowLevelPreferences.styl

@@ -0,0 +1,28 @@
+.WindowLevelPreferences
+  display: flex
+  padding: 20px 0
+  text-align: center
+
+  .wlColumn
+    display: flex
+    flex-direction: column
+    flex-basis: 0
+    flex-grow: 1.5
+    margin: 0 5px
+
+  .wlRow
+    display: flex
+    flex-direction: row
+    margin: 5px 0
+
+  .header
+
+  .preset
+    flex-grow: 0.5
+
+  .window,
+  .level
+    flex-grow: 1
+
+  .description
+    flex-grow: 2