From e27288e37bf909d9f229fe91506d75b60408da73 Mon Sep 17 00:00:00 2001 From: Thomas LEMAISTRE <35010958+Terdious@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:40:23 +0200 Subject: [PATCH] Fix: Device label in Chart & Device widget can be empty (#2127) --- front/src/components/boxs/chart/EditChart.jsx | 12 ++- front/src/components/boxs/chart/style.css | 16 --- .../DeviceListWithDragAndDrop.jsx | 97 ------------------- .../boxs/device-in-room/EditDevices.jsx | 9 +- .../components/boxs/device-in-room/style.css | 12 --- .../DeviceListWithDragAndDrop.jsx | 14 +-- front/src/components/drag-and-drop/style.css | 30 ++++++ 7 files changed, 51 insertions(+), 139 deletions(-) delete mode 100644 front/src/components/boxs/device-in-room/DeviceListWithDragAndDrop.jsx delete mode 100644 front/src/components/boxs/device-in-room/style.css rename front/src/components/{boxs/chart => drag-and-drop}/DeviceListWithDragAndDrop.jsx (83%) diff --git a/front/src/components/boxs/chart/EditChart.jsx b/front/src/components/boxs/chart/EditChart.jsx index d40c59f3cd..50415bb5c0 100644 --- a/front/src/components/boxs/chart/EditChart.jsx +++ b/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); }; diff --git a/front/src/components/boxs/chart/style.css b/front/src/components/boxs/chart/style.css index c6142c85a7..5a161f0ffb 100644 --- a/front/src/components/boxs/chart/style.css +++ b/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; } \ No newline at end of file diff --git a/front/src/components/boxs/device-in-room/DeviceListWithDragAndDrop.jsx b/front/src/components/boxs/device-in-room/DeviceListWithDragAndDrop.jsx deleted file mode 100644 index b722f0e97e..0000000000 --- a/front/src/components/boxs/device-in-room/DeviceListWithDragAndDrop.jsx +++ /dev/null @@ -1,97 +0,0 @@ -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 cx from 'classnames'; -import style from './style.css'; - -const DEVICE_TYPE = 'DEVICE_TYPE'; - -const DeviceRow = ({ selectedDeviceFeature, moveDevice, index, removeDevice, updateDeviceFeatureName }) => { - const ref = useRef(null); - const [{ isDragging }, drag, preview] = useDrag(() => ({ - type: DEVICE_TYPE, - item: () => { - return { index }; - }, - collect: monitor => ({ - isDragging: !!monitor.isDragging() - }) - })); - const [{ isActive }, drop] = useDrop({ - accept: DEVICE_TYPE, - collect: monitor => ({ - isActive: monitor.canDrop() && monitor.isOver() - }), - drop(item) { - if (!ref.current) { - return; - } - moveDevice(item.index, index); - } - }); - preview(drop(ref)); - const removeThisDevice = () => { - removeDevice(index); - }; - - const updateThisDeviceFeatureName = e => { - updateDeviceFeatureName(index, e.target.value); - }; - - return ( -
- -
-
- -
- -
- -
-
-
- ); -}; - -const DeviceListWithDragAndDrop = ({ - selectedDeviceFeaturesOptions, - isTouchDevice, - moveDevice, - removeDevice, - updateDeviceFeatureName -}) => ( - - {selectedDeviceFeaturesOptions.map((selectedDeviceFeature, index) => ( - - ))} - -); - -export { DeviceListWithDragAndDrop }; diff --git a/front/src/components/boxs/device-in-room/EditDevices.jsx b/front/src/components/boxs/device-in-room/EditDevices.jsx index 76784fcbb2..57e0a17da2 100644 --- a/front/src/components/boxs/device-in-room/EditDevices.jsx +++ b/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 => { diff --git a/front/src/components/boxs/device-in-room/style.css b/front/src/components/boxs/device-in-room/style.css deleted file mode 100644 index d9711f3251..0000000000 --- a/front/src/components/boxs/device-in-room/style.css +++ /dev/null @@ -1,12 +0,0 @@ -.deviceListDragAndDrop { - cursor: 'pointer'; - userselect: 'none'; -} - -.deviceListDragAndDropDragging { - opacity: 0.5; -} - -.deviceListDragAndDropActive { - background-color: #ecf0f1; -} diff --git a/front/src/components/boxs/chart/DeviceListWithDragAndDrop.jsx b/front/src/components/drag-and-drop/DeviceListWithDragAndDrop.jsx similarity index 83% rename from front/src/components/boxs/chart/DeviceListWithDragAndDrop.jsx rename to front/src/components/drag-and-drop/DeviceListWithDragAndDrop.jsx index 5aba7997d7..65df874477 100644 --- a/front/src/components/boxs/chart/DeviceListWithDragAndDrop.jsx +++ b/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 (
@@ -55,13 +58,12 @@ const DeviceRow = ({ selectedDeviceFeature, moveDevice, index, removeDevice, upd
diff --git a/front/src/components/drag-and-drop/style.css b/front/src/components/drag-and-drop/style.css index ef4c64bc2b..abcb9ce1a4 100644 --- a/front/src/components/drag-and-drop/style.css +++ b/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; +} \ No newline at end of file