Fix: Device label in Chart & Device widget can be empty (#2127)

front/src/components/boxs/chart/EditChart.jsx

@@ -8,7 +8,7 @@ import get from 'get-value';
 import BaseEditBox from '../baseEditBox';
 import Chart from './Chart';
 import { getDeviceFeatureName } from '../../../utils/device';
-import { DeviceListWithDragAndDrop } from './DeviceListWithDragAndDrop';
+import { DeviceListWithDragAndDrop } from '../../drag-and-drop/DeviceListWithDragAndDrop';
 import { DEVICE_FEATURE_TYPES } from '../../../../../server/utils/constants';
 import withIntlAsProp from '../../../utils/withIntlAsProp';
 import { DEFAULT_COLORS, DEFAULT_COLORS_NAME } from './ApexChartComponent';
@@ -129,9 +129,8 @@ class EditChart extends Component {
 
   refreshDeviceFeaturesNames = () => {
     const newDeviceFeatureNames = this.state.selectedDeviceFeaturesOptions.map(o => {
-      return o.new_label !== undefined ? o.new_label : o.label;
+      return o.new_label !== undefined && o.new_label !== '' ? o.new_label : o.label;
     });
-
     const newDeviceFeature = this.state.selectedDeviceFeaturesOptions.map(o => {
       return o.value;
     });
@@ -213,7 +212,10 @@ class EditChart extends Component {
       }
     });
     await this.setState(newState);
-    this.refreshDeviceFeaturesNames();
+
+    if (name !== '') {
+      this.refreshDeviceFeaturesNames();
+    }
   };
 
   getSelectedDeviceFeaturesAndOptions = (devices, chartType = this.state.chart_type) => {
@@ -342,7 +344,7 @@ class EditChart extends Component {
       }
     });
     await this.setState(newStateWithoutElement);
-    this.refreshDeviceFeaturesNames();
+    await this.refreshDeviceFeaturesNames();
     this.refreshDeviceUnitAndChartType(this.state.selectedDeviceFeaturesOptions);
   };
 

front/src/components/boxs/chart/style.css

@@ -133,20 +133,4 @@
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   text-align: justify;
-}
-.deviceListDragAndDrop {
-  cursor: 'pointer';
-  user-select: 'none';
-}
-
-.deviceListDragAndDropDragging {
-  opacity: 0.5;
-}
-
-.deviceListDragAndDropActive {
-  background-color: #ecf0f1;
-}
-
-.deviceListRemoveButton {
-  z-index: 0;
 }

front/src/components/boxs/device-in-room/EditDevices.jsx

@@ -5,7 +5,7 @@ import Select from 'react-select';
 import update from 'immutability-helper';
 import BaseEditBox from '../baseEditBox';
 import { getDeviceFeatureName } from '../../../utils/device';
-import { DeviceListWithDragAndDrop } from './DeviceListWithDragAndDrop';
+import { DeviceListWithDragAndDrop } from '../../drag-and-drop/DeviceListWithDragAndDrop';
 import withIntlAsProp from '../../../utils/withIntlAsProp';
 import SUPPORTED_FEATURE_TYPES from './SupportedFeatureTypes';
 
@@ -24,7 +24,7 @@ class EditDevices extends Component {
 
   refreshDeviceFeaturesNames = () => {
     const newDeviceFeatureNames = this.state.selectedDeviceFeaturesOptions.map(o => {
-      return o.new_label !== undefined ? o.new_label : o.label;
+      return o.new_label !== undefined && o.new_label !== '' ? o.new_label : o.label;
     });
     const newDeviceFeature = this.state.selectedDeviceFeaturesOptions.map(o => {
       return o.value;
@@ -62,7 +62,10 @@ class EditDevices extends Component {
       }
     });
     await this.setState(newState);
-    this.refreshDeviceFeaturesNames();
+
+    if (name !== '') {
+      this.refreshDeviceFeaturesNames();
+    }
   };
 
   getSelectedDeviceFeaturesAndOptions = devices => {

front/src/components/boxs/chart/DeviceListWithDragAndDrop.jsx → front/src/components/drag-and-drop/DeviceListWithDragAndDrop.jsx

@@ -1,7 +1,7 @@
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { TouchBackend } from 'react-dnd-touch-backend';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { useRef } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import cx from 'classnames';
 import style from './style.css';
 
@@ -35,10 +35,13 @@ const DeviceRow = ({ selectedDeviceFeature, moveDevice, index, removeDevice, upd
     removeDevice(index);
   };
 
+  const [isEmpty, setIsEmpty] = useState(selectedDeviceFeature.new_label === '');
   const updateThisDeviceFeatureName = e => {
     updateDeviceFeatureName(index, e.target.value);
+    setIsEmpty(e.target.value === '');
   };
 
+  const emptyFieldAutogenerated = isEmpty && selectedDeviceFeature.new_label !== '';
   return (
     <div class="mb-1">
       <label class="form-label">{selectedDeviceFeature.label}</label>
@@ -55,13 +58,12 @@ const DeviceRow = ({ selectedDeviceFeature, moveDevice, index, removeDevice, upd
         <input
           type="text"
           class={cx('form-control', {
+            [style.deviceListDragAndDropEmpty]: isEmpty && !emptyFieldAutogenerated,
+            [style.deviceListDragAndDropEmptyAutoGenerated]: emptyFieldAutogenerated,
             [style.deviceListDragAndDropActive]: isActive
           })}
-          value={
-            selectedDeviceFeature.new_label !== undefined
-              ? selectedDeviceFeature.new_label
-              : selectedDeviceFeature.label
-          }
+          value={selectedDeviceFeature.new_label || ''}
+          placeholder={selectedDeviceFeature.label}
           onChange={updateThisDeviceFeatureName}
         />
         <div class={cx('input-group-append', style.deviceListRemoveButton)}>

front/src/components/drag-and-drop/style.css

@@ -17,3 +17,33 @@
   height: 20%;
   width: 100%;
 }
+
+.deviceListDragAndDrop {
+  cursor: 'pointer';
+  user-select: 'none';
+}
+
+.deviceListDragAndDropDragging {
+  opacity: 0.5;
+}
+
+.deviceListDragAndDropActive {
+  background-color: #ecf0f1;
+}
+
+.deviceListDragAndDropEmpty {
+  border: 1px solid #e90a0a;
+}
+
+.deviceListDragAndDropEmptyAutoGenerated {
+  border: 1px dashed #e90a0a;
+}
+
+.deviceListDragAndDropEmpty:focus {
+  border: 1px solid #e90a0a;
+  box-shadow: 0 0 5px #e90a0a;
+}
+
+.deviceListRemoveButton {
+  z-index: 0;
+}