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 1/5] 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 ( -