sdnr/wt-odlux/odlux/apps/maintenanceApp/src/components/editMaintenenceEntryDialog.tsx

   1 /* eslint-disable @typescript-eslint/no-unused-expressions */
   2 /**
   3  * ============LICENSE_START========================================================================
   4  * ONAP : ccsdk feature sdnr wt odlux
   5  * =================================================================================================
   6  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   7  * =================================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   9  * in compliance with the License. You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software distributed under the License
  14  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  15  * or implied. See the License for the specific language governing permissions and limitations under
  16  * the License.
  17  * ============LICENSE_END==========================================================================
  18  */
  19 import * as React from 'react';
  20
  21 import Button from '@mui/material/Button';
  22 import Dialog from '@mui/material/Dialog';
  23 import DialogActions from '@mui/material/DialogActions';
  24 import DialogContent from '@mui/material/DialogContent';
  25 import DialogContentText from '@mui/material/DialogContentText';
  26 import DialogTitle from '@mui/material/DialogTitle';
  27 import TextField from '@mui/material/TextField';
  28
  29 import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
  30
  31 import { FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material';
  32 import {
  33   addOrUpdateMaintenenceEntryAsyncActionCreator,
  34   removeFromMaintenenceEntrysAsyncActionCreator,
  35 } from '../actions/maintenenceActions';
  36 import { MaintenanceEntry } from '../models/maintenanceEntryType';
  37
  38 export enum EditMaintenenceEntryDialogMode {
  39   None = 'none',
  40   AddMaintenenceEntry = 'addMaintenenceEntry',
  41   EditMaintenenceEntry = 'editMaintenenceEntry',
  42   RemoveMaintenenceEntry = 'removeMaintenenceEntry',
  43 }
  44
  45 const mapDispatch = (dispatcher: IDispatcher) => ({
  46   addOrUpdateMaintenenceEntry: (entry: MaintenanceEntry) => {
  47     dispatcher.dispatch(addOrUpdateMaintenenceEntryAsyncActionCreator(entry));
  48   },
  49   removeMaintenenceEntry: (entry: MaintenanceEntry) => {
  50     dispatcher.dispatch(removeFromMaintenenceEntrysAsyncActionCreator(entry));
  51   },
  52 });
  53
  54 type DialogSettings = {
  55   dialogTitle: string;
  56   dialogDescription: string;
  57   applyButtonText: string;
  58   cancelButtonText: string;
  59   enableMountIdEditor: boolean;
  60   enableTimeEditor: boolean;
  61 };
  62
  63 const settings: { [key: string]: DialogSettings } = {
  64   [EditMaintenenceEntryDialogMode.None]: {
  65     dialogTitle: '',
  66     dialogDescription: '',
  67     applyButtonText: '',
  68     cancelButtonText: '',
  69     enableMountIdEditor: false,
  70     enableTimeEditor: false,
  71   },
  72   [EditMaintenenceEntryDialogMode.AddMaintenenceEntry]: {
  73     dialogTitle: 'Add new maintenence entry',
  74     dialogDescription: '',
  75     applyButtonText: 'Add',
  76     cancelButtonText: 'Cancel',
  77     enableMountIdEditor: true,
  78     enableTimeEditor: true,
  79   },
  80   [EditMaintenenceEntryDialogMode.EditMaintenenceEntry]: {
  81     dialogTitle: 'Edit maintenence entry',
  82     dialogDescription: '',
  83     applyButtonText: 'Save',
  84     cancelButtonText: 'Cancel',
  85     enableMountIdEditor: false,
  86     enableTimeEditor: true,
  87   },
  88   [EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry]: {
  89     dialogTitle: 'Remove maintenence entry',
  90     dialogDescription: '',
  91     applyButtonText: 'Remove',
  92     cancelButtonText: 'Cancel',
  93     enableMountIdEditor: false,
  94     enableTimeEditor: false,
  95   },
  96 };
  97
  98 type EditMaintenenceEntryDIalogComponentProps = Connect<undefined, typeof mapDispatch> & {
  99   mode: EditMaintenenceEntryDialogMode;
 100   initialMaintenenceEntry: MaintenanceEntry;
 101   onClose: () => void;
 102 };
 103
 104 type EditMaintenenceEntryDIalogComponentState = MaintenanceEntry & { isErrorVisible: boolean };
 105
 106 class EditMaintenenceEntryDIalogComponent extends React.Component<EditMaintenenceEntryDIalogComponentProps, EditMaintenenceEntryDIalogComponentState> {
 107   constructor(props: EditMaintenenceEntryDIalogComponentProps) {
 108     super(props);
 109
 110     this.state = {
 111       ...this.props.initialMaintenenceEntry,
 112       isErrorVisible: false,
 113     };
 114   }
 115
 116   render(): JSX.Element {
 117     const setting = settings[this.props.mode];
 118     return (
 119       <Dialog open={this.props.mode !== EditMaintenenceEntryDialogMode.None}>
 120         <DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle>
 121         <DialogContent>
 122           <DialogContentText>
 123             {setting.dialogDescription}
 124           </DialogContentText>
 125           <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} />
 126           {this.state.isErrorVisible && <Typography variant="body1" color="error" >Name must not be empty.</Typography>}
 127           <TextField variant="standard" disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="start"
 128             label="Start (Local DateTime)" type="datetime-local" fullWidth value={this.state.start} onChange={(event) => { this.setState({ start: event.target.value }); }} />
 129           <TextField variant="standard" disabled={!setting.enableTimeEditor} spellCheck={false} autoFocus margin="dense" id="end"
 130             label="End (Local DateTime)" type="datetime-local" fullWidth value={this.state.end} onChange={(event) => { this.setState({ end: event.target.value }); }} />
 131           <FormControl variant="standard" fullWidth disabled={!setting.enableTimeEditor}>
 132             <InputLabel htmlFor="active">Active</InputLabel>
 133             <Select variant="standard" value={this.state.active || false} onChange={(event) => {
 134               this.setState({ active: event.target.value as any as boolean });
 135             }} inputProps={{ name: 'active', id: 'active' }} fullWidth >
 136               <MenuItem value={true as any as string}>active</MenuItem>
 137               <MenuItem value={false as any as string}>not active</MenuItem>
 138             </Select>
 139           </FormControl>
 140         </DialogContent>
 141         <DialogActions>
 142           <Button onClick={(event) => {
 143
 144             if (this.props.mode === EditMaintenenceEntryDialogMode.AddMaintenenceEntry && this.state.nodeId.trim().length === 0) {
 145               this.setState({ isErrorVisible: true });
 146             } else {
 147               this.onApply({
 148                 mId: this.state.mId || this.state.nodeId,
 149                 nodeId: this.state.nodeId,
 150                 description: this.state.description,
 151                 start: this.state.start,
 152                 end: this.state.end,
 153                 active: this.state.active,
 154               });
 155               this.setState({ isErrorVisible: false });
 156             }
 157
 158             event.preventDefault();
 159             event.stopPropagation();
 160           }} color="inherit" > {setting.applyButtonText} </Button>
 161           <Button onClick={(event) => {
 162             this.onCancel();
 163             event.preventDefault();
 164             event.stopPropagation();
 165             this.setState({ isErrorVisible: false });
 166           }} color="secondary"> {setting.cancelButtonText} </Button>
 167         </DialogActions>
 168       </Dialog>
 169     );
 170   }
 171
 172   private onApply = (entry: MaintenanceEntry) => {
 173     this.props.onClose && this.props.onClose();
 174     switch (this.props.mode) {
 175       case EditMaintenenceEntryDialogMode.AddMaintenenceEntry:
 176         entry && this.props.addOrUpdateMaintenenceEntry(entry);
 177         break;
 178       case EditMaintenenceEntryDialogMode.EditMaintenenceEntry:
 179         entry && this.props.addOrUpdateMaintenenceEntry(entry);
 180         break;
 181       case EditMaintenenceEntryDialogMode.RemoveMaintenenceEntry:
 182         entry && this.props.removeMaintenenceEntry(entry);
 183         break;
 184     }
 185   };
 186
 187
 188   private onCancel = () => {
 189     this.props.onClose && this.props.onClose();
 190   };
 191
 192   static getDerivedStateFromProps(props: EditMaintenenceEntryDIalogComponentProps, state: EditMaintenenceEntryDIalogComponentState & { initialMaintenenceEntrie: MaintenanceEntry }): EditMaintenenceEntryDIalogComponentState & { initialMaintenenceEntrie: MaintenanceEntry } {
 193     if (props.initialMaintenenceEntry !== state.initialMaintenenceEntrie) {
 194       // eslint-disable-next-line no-param-reassign
 195       state = {
 196         ...state,
 197         ...props.initialMaintenenceEntry,
 198         initialMaintenenceEntrie: props.initialMaintenenceEntry,
 199       };
 200     }
 201     return state;
 202   }
 203
 204 }
 205
 206 export const EditMaintenenceEntryDIalog = connect(undefined, mapDispatch)(EditMaintenenceEntryDIalogComponent);
 207 export default EditMaintenenceEntryDIalog;