@iobroker/adapter-react-v5 7.4.21 → 7.5.0

package/build/Components/ObjectBrowser.js

@@ -8,7 +8,7 @@ import React, { Component, createRef } from 'react';
 import SVG from 'react-inlinesvg';
 import { Badge, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fab, FormControl, FormControlLabel, Grid2, IconButton, Input, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, Select, Snackbar, Switch, TextField, Tooltip, } from '@mui/material';
 // Icons
-import { Add as AddIcon, ArrowRight as ArrowRightIcon, BedroomParent, BorderColor, Build as BuildIcon, CalendarToday as IconSchedule, Check as IconCheck, Close as IconClose, Code as IconScript, Construction, CreateNewFolder as IconFolder, Delete as IconDelete, Description as IconMeta, Edit as IconEdit, Error as IconError, FindInPage, FormatItalic as IconValueEdit, Info as IconInfo, Link as IconLink, ListAlt as IconEnum, LooksOne as LooksOneIcon, PersonOutlined as IconUser, Publish as PublishIcon, Refresh as RefreshIcon, Router as IconHost, Settings as IconConfig, SettingsApplications as IconSystem, DataObject as IconData, ShowChart as IconChart, SupervisedUserCircle as IconGroup, TextFields as TextFieldsIcon, ViewColumn as IconColumns, Wifi as IconConnection, WifiOff as IconDisconnected, } from '@mui/icons-material';
+import { Add as AddIcon, ArrowRight as ArrowRightIcon, BedroomParent, BorderColor, Build as BuildIcon, CalendarToday as IconSchedule, Check as IconCheck, Close as IconClose, Code as IconScript, Construction, CreateNewFolder as IconFolder, Delete as IconDelete, Description as IconMeta, Edit as IconEdit, Error as IconError, FindInPage, FormatItalic as IconValueEdit, Info as IconInfo, Link as IconLink, ListAlt as IconEnum, LooksOne as LooksOneIcon, PersonOutlined as IconUser, Publish as PublishIcon, Refresh as RefreshIcon, Router as IconHost, Settings as IconConfig, SettingsApplications as IconSystem, DataObject as IconData, ShowChart as IconChart, SupervisedUserCircle as IconGroup, TextFields as TextFieldsIcon, ViewColumn as IconColumns, Wifi as IconConnection, WifiOff as IconDisconnected, DriveFileRenameOutline, } from '@mui/icons-material';
 import { IconExpert } from '../icons/IconExpert';
 import { IconAdapter } from '../icons/IconAdapter';
 import { IconChannel } from '../icons/IconChannel';
@@ -574,9 +574,6 @@ const styles = {
         height: 'calc(100% - 50px)',
         overflow: 'auto',
     },
-    enumButton: {
-        float: 'right',
-    },
     enumCheckbox: {
         minWidth: 0,
     },
@@ -1615,6 +1612,7 @@ function formatValue(options) {
     }
     if (valText.v?.length > 40) {
         valText.v = `${valText.v.substring(0, 40)}...`;
+        valText.c = valText.v;
     }
     if (isCommon?.unit) {
         valText.u = isCommon.unit;
@@ -2032,6 +2030,7 @@ export class ObjectBrowserClass extends Component {
             excludeTranslations: false,
             tooltipInfo: null,
             aliasMenu: '',
+            showRenameDialog: null,
         };
         this.texts = {
             name: props.t('ra_Name'),
@@ -3368,6 +3367,139 @@ export class ObjectBrowserClass extends Component {
                     ")"),
                 React.createElement(Button, { color: "grey", variant: "contained", onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }), startIcon: React.createElement(IconClose, null) }, this.props.t('ra_Cancel')))));
     }
+    static calculateNewId(oldId, newId, id) {
+        // find common name
+        const oldParts = oldId.split('.');
+        const newParts = newId.split('.');
+        let i = 0;
+        while (oldParts[i] === newParts[i]) {
+            i++;
+        }
+        const parts = id.split('.');
+        parts.splice(0, i + 1);
+        return `${newId}.${parts.join('.')}`;
+    }
+    async renameObject(oldId, newId, withChildren) {
+        if (oldId === newId) {
+            return;
+        }
+        let obj;
+        try {
+            obj = await this.props.socket.getObject(oldId);
+        }
+        catch {
+            // ignore
+        }
+        let state;
+        if (obj?.type === 'state') {
+            state = await this.props.socket.getState(oldId);
+        }
+        if (withChildren) {
+            const children = Object.keys(this.objects).filter(id => id.startsWith(`${oldId}.`));
+            for (const id of children) {
+                const nid = ObjectBrowserClass.calculateNewId(oldId, newId, id);
+                // calculate new id
+                await this.renameObject(id, nid, false);
+            }
+        }
+        if (obj) {
+            await this.props.socket.setObject(newId, obj);
+            if (state) {
+                await this.props.socket.setState(newId, state);
+            }
+            await this.props.socket.delObject(oldId);
+        }
+    }
+    renderRenameDialog() {
+        if (!this.state.showRenameDialog) {
+            return null;
+        }
+        let newID;
+        let notExtendedPossible = true;
+        const parts = this.state.showRenameDialog.id.split('.');
+        if (this.state.showRenameDialog.extended) {
+            newID = `${parts[0]}.${parts[1]}.${this.state.showRenameDialog.value}`;
+            parts.pop();
+            const parentId = parts.join('.');
+            const newParts = newID.split('.');
+            newParts.splice(parentId.length);
+            if (newParts.join('.') !== parentId) {
+                notExtendedPossible = false;
+            }
+        }
+        else {
+            parts.pop();
+            newID = `${parts.join('.')}.${this.state.showRenameDialog.value}`;
+        }
+        return (React.createElement(Dialog, { open: !0, maxWidth: "md", fullWidth: true, onClose: () => this.setState({ showRenameDialog: null }) },
+            React.createElement(DialogTitle, null, this.props.t('ra_Rename object')),
+            React.createElement(DialogContent, null,
+                React.createElement(TextField, { value: this.state.showRenameDialog.value, onChange: e => {
+                        const value = e.target.value
+                            .replace(Utils.FORBIDDEN_CHARS, '_')
+                            .replace(/\s/g, '_')
+                            .replace(/,/g, '_')
+                            .replace(/__/g, '_')
+                            .replace(/__/g, '_');
+                        if (!this.state.showRenameDialog.extended && value.includes('.')) {
+                            this.setState({
+                                showRenameDialog: {
+                                    ...this.state.showRenameDialog,
+                                    value: e.target.value.replace(/\./g, '_'),
+                                },
+                            });
+                        }
+                        else {
+                            this.setState({
+                                showRenameDialog: { ...this.state.showRenameDialog, value },
+                            });
+                        }
+                    }, variant: "standard", fullWidth: true, label: this.props.t('ra_New object ID'), helperText: `${this.props.t('ra_New object ID')}: ${newID}` }),
+                this.props.expertMode ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { disabled: !notExtendedPossible, checked: this.state.showRenameDialog.extended, onChange: () => {
+                            if (this.state.showRenameDialog.extended) {
+                                const parts = this.state.showRenameDialog.value.split('.');
+                                this.setState({
+                                    showRenameDialog: {
+                                        ...this.state.showRenameDialog,
+                                        value: parts.pop(),
+                                        extended: false,
+                                    },
+                                });
+                            }
+                            else {
+                                const parts = this.state.showRenameDialog.id.split('.');
+                                parts.shift(); // remove "javascript"
+                                parts.shift(); // remove "0"
+                                parts.pop(); // remove the last part
+                                this.setState({
+                                    showRenameDialog: {
+                                        ...this.state.showRenameDialog,
+                                        value: `${parts.join('.')}.${this.state.showRenameDialog.value}`,
+                                        extended: true,
+                                    },
+                                });
+                            }
+                        } }), label: this.props.t('ra_Edit full path') })) : null,
+                this.state.showRenameDialog.hasChildren ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.showRenameDialog.renameAllChildren, onChange: () => {
+                            this.setState({
+                                showRenameDialog: {
+                                    ...this.state.showRenameDialog,
+                                    renameAllChildren: !this.state.showRenameDialog.renameAllChildren,
+                                },
+                            });
+                        } }), label: this.props.t('ra_Rename all children') })) : null),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { disabled: !this.state.showRenameDialog.value ||
+                        this.state.showRenameDialog.value.endsWith('.') ||
+                        newID === this.state.showRenameDialog.id, color: "primary", variant: "contained", onClick: async () => {
+                        await this.renameObject(this.state.showRenameDialog.id, newID, this.state.showRenameDialog.hasChildren &&
+                            this.state.showRenameDialog.renameAllChildren);
+                        this.setState({ showRenameDialog: null });
+                    } }, newID !== this.state.showRenameDialog.id && this.objects[newID]
+                    ? this.props.t('ra_Replace')
+                    : this.props.t('ra_Rename')),
+                React.createElement(Button, { variant: "contained", color: "grey", onClick: () => this.setState({ showRenameDialog: null }), startIcon: React.createElement(IconClose, null) }, this.props.t('ra_Cancel')))));
+    }
     handleJsonUpload(evt) {
         const target = evt.target;
         const f = target.files?.length && target.files[0];
@@ -3948,7 +4080,6 @@ export class ObjectBrowserClass extends Component {
             });
             const valTextRx = [];
             item.data.state = { valTextRx };
-            const copyText = valText.v || '';
             valTextRx.push(React.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
                     whiteSpace: 'nowrap',
                     display: 'inline-block',
@@ -3965,6 +4096,7 @@ export class ObjectBrowserClass extends Component {
                     ")"));
             }
             if (!narrowStyleWithDetails) {
+                const copyText = valText.c !== undefined ? valText.c : valText.v || '';
                 valTextRx.push(React.createElement(IconCopy, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
             }
             // <IconEdit className="copyButton" style={{{ ...styles.cellButtonsValueButton, styles.cellButtonsValueButtonEdit)} key="ce" />
@@ -4076,9 +4208,16 @@ export class ObjectBrowserClass extends Component {
         });
         // const hasIcons = !!enums.find(item => item.icon);
         return (React.createElement(Dialog, { sx: { '& .MuiPaper-root': styles.enumDialog }, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
-            React.createElement(DialogTitle, { id: "enum-dialog-title" },
+            React.createElement(DialogTitle, { id: "enum-dialog-title", style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    flexWrap: 'nowrap',
+                    gap: 8,
+                    paddingRight: 12,
+                } },
                 type === 'func' ? this.props.t('ra_Define functions') : this.props.t('ra_Define rooms'),
-                React.createElement(Fab, { sx: styles.enumButton, color: "primary", disabled: enumsOriginal === JSON.stringify(itemEnums), size: "small", onClick: () => this.syncEnum(item.data.id, type, itemEnums).then(() => this.setState({ enumDialog: null, enumDialogEnums: null })) },
+                React.createElement(Fab, { color: "primary", disabled: enumsOriginal === JSON.stringify(itemEnums), size: "small", onClick: () => this.syncEnum(item.data.id, type, itemEnums).then(() => this.setState({ enumDialog: null, enumDialogEnums: null })) },
                     React.createElement(IconCheck, null))),
             React.createElement(List, { sx: { '&.MuiList-root': styles.enumList } }, enums.map(_item => {
                 let id;
@@ -4922,7 +5061,7 @@ export class ObjectBrowserClass extends Component {
                                     ? this.systemConfig.common.isFloatComma
                                     : this.props.isFloatComma,
                             });
-                            this.onCopy(e, valText.v.toString());
+                            this.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
                         }, key: "cc" }))),
                 colButtons && (React.createElement("div", { style: { ...styles.cellDetailsLine, justifyContent: 'right' } }, colButtons))));
             colName = null;
@@ -5256,9 +5395,7 @@ export class ObjectBrowserClass extends Component {
         window.removeEventListener('mouseup', this.resizerMouseUp);
     };
     resizerMouseDown = (e) => {
-        this.storedWidths =
-            this.storedWidths ||
-                JSON.parse(JSON.stringify(SCREEN_WIDTHS[this.props.width || 'lg']));
+        this.storedWidths ||= JSON.parse(JSON.stringify(SCREEN_WIDTHS[this.props.width || 'lg']));
         this.resizerCurrentWidths = this.resizerCurrentWidths || {};
         this.resizerActiveDiv = e.target.parentNode;
         this.resizerActiveName = this.resizerActiveDiv.dataset.name || null;
@@ -5838,6 +5975,29 @@ export class ObjectBrowserClass extends Component {
                     },
                 ],
             },
+            RENAME: {
+                key: '8',
+                visibility: !!(!this.props.notEditable &&
+                    !item.data.id.startsWith('system.') &&
+                    item.data.id.split('.').length > 2 &&
+                    (this.props.expertMode ||
+                        item.data.id.startsWith('javascript.0.') ||
+                        item.data.id.startsWith('0_userdata.0.'))),
+                icon: React.createElement(DriveFileRenameOutline, null),
+                label: this.props.t('ra_Rename'),
+                onClick: () => {
+                    this.setState({
+                        showContextMenu: null,
+                        showRenameDialog: {
+                            id: item.data.id,
+                            value: item.data.id.split('.').pop(),
+                            extended: false,
+                            hasChildren: !!item.children?.length,
+                            renameAllChildren: true,
+                        },
+                    });
+                },
+            },
             DELETE: {
                 key: 'Delete',
                 visibility: !!(this.props.onObjectDelete &&
@@ -6044,6 +6204,7 @@ export class ObjectBrowserClass extends Component {
             this.renderEnumDialog(),
             this.renderErrorDialog(),
             this.renderExportDialog(),
+            this.renderRenameDialog(),
             this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this),
             this.state.modalEditOfAccess &&
                 this.state.modalEditOfAccessObjData &&