ehr-alerts-ui 0.0.25 → 0.0.27

package/src/library/components/AlertModal/AlertModal.tsx

@@ -1,21 +1,30 @@
-import React from "react";
-import {Button, DatePicker, FieldWrapper, Input, Section, Select, TextArea, AlertIcon} from 'ehr-components';
-import {Alert, Audience, MessageLevel} from "../../reducers/tableReducer";
-import appendZero from "../../helpers/appendZero";
-import {AlertModalError} from "../../reducers/alertReducer";
+import React from 'react';
+import {
+  Button,
+  DatePicker,
+  FieldWrapper,
+  Input,
+  Section,
+  Select,
+  TextArea,
+  AlertIcon,
+} from 'ehr-components';
+import { Alert, Audience, MessageLevel } from '../../reducers/tableReducer';
+import appendZero from '../../helpers/appendZero';
+import { AlertModalError } from '../../reducers/alertReducer';
 
 export interface AlertModalState {
-  alert: Alert | undefined,
-  errors: AlertModalError[],
+  alert: Alert | undefined;
+  errors: AlertModalError[];
 }
 
 export interface AlertModalDispatch {
-  editAlert: (alert: Alert) => void,
-  clearAlert: () => void,
-  postAlert: () => void,
-  updateAlert: () => void,
-  addAlertModalError: (error: AlertModalError) => void,
-  clearAlertModalErrors: () => void,
+  editAlert: (alert: Alert) => void;
+  clearAlert: () => void;
+  postAlert: () => void;
+  updateAlert: () => void;
+  addAlertModalError: (error: AlertModalError) => void;
+  clearAlertModalErrors: () => void;
 }
 
 enum ContentLanguage {
@@ -25,20 +34,26 @@ enum ContentLanguage {
 }
 
 const audiences = [
-  {code: Audience.AUTHENTICATED, texts: 'Autenditud kasutaja'},
-  {code: Audience.NOT_AUTHENTICATED, texts: 'Autentimata kasutaja'},
-]
+  { code: Audience.AUTHENTICATED, texts: 'Autenditud kasutaja' },
+  { code: Audience.NOT_AUTHENTICATED, texts: 'Autentimata kasutaja' },
+];
 
 const messageLevels = [
-  {code: MessageLevel.TEADE, texts: 'Teade (roheline)'},
-  {code: MessageLevel.HOIATUS, texts: 'Hoiatus (kollane)'},
-  {code: MessageLevel.VEATEADE, texts: 'Veateade (punane)'},
-]
-
-const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clearAlert, editAlert, postAlert,
-                                                                      updateAlert, addAlertModalError, errors,
-                                                                      clearAlertModalErrors}) => {
-
+  { code: MessageLevel.TEADE, texts: 'Teade (roheline)' },
+  { code: MessageLevel.HOIATUS, texts: 'Hoiatus (kollane)' },
+  { code: MessageLevel.VEATEADE, texts: 'Veateade (punane)' },
+];
+
+const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({
+  alert,
+  clearAlert,
+  editAlert,
+  postAlert,
+  updateAlert,
+  addAlertModalError,
+  errors,
+  clearAlertModalErrors,
+}) => {
   function onAudienceChange(code: Audience) {
     if (!alert) {
       return;
@@ -91,7 +106,7 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
     editAlert({
       ...alert,
       beginMinute: parseInt(value) || 0,
-    })
+    });
   }
 
   function onDateEndChange(date: string) {
@@ -124,7 +139,7 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
     editAlert({
       ...alert,
       endMinute: parseInt(value) || 0,
-    })
+    });
   }
 
   function onTitleChange(lang: ContentLanguage, title: string) {
@@ -253,7 +268,7 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
     if (!checkMinute(alert.endMinute)) {
       addAlertModalError({
         title: 'end_minute',
-        content: "Please add a valid minute.",
+        content: 'Please add a valid minute.',
       });
       errors = true;
     }
@@ -278,16 +293,15 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
   }
 
   function checkHour(hour: number | undefined) {
-    return (hour !== undefined) && hour >= 0 && hour <= 23;
+    return hour !== undefined && hour >= 0 && hour <= 23;
   }
 
   function checkMinute(minute: number | undefined) {
-    return (minute !== undefined) && minute >= 0 && minute <= 59;
+    return minute !== undefined && minute >= 0 && minute <= 59;
   }
 
-
   function checkSelfError(title: string): string {
-    if (errors.filter((error) => (error.title === title)).length > 0) {
+    if (errors.filter((error) => error.title === title).length > 0) {
       return 'has-danger';
     }
 
@@ -296,11 +310,10 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
 
   return (
     <>
-      {
-        alert &&
-        <div id='alerts-ui--alert-creation-modal'>
-          <div className='alerts-ui--alert-creation-modal--modal'>
-            <h4 className='text-primary'>Teate lisamine</h4>
+      {alert && (
+        <div id="alerts-ui--alert-creation-modal">
+          <div className="alerts-ui--alert-creation-modal--modal">
+            <h4 className="text-primary">Teate lisamine</h4>
 
             {/*<ul className="alerts-ui--alert-creation-modal--errors">*/}
             {/*  {*/}
@@ -313,101 +326,163 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
             {/*    ))*/}
             {/*  }*/}
             {/*</ul>*/}
-            <div className='alerts-ui--alert-creation-modal--content'>
-
-              <FieldWrapper label='Teate publik'
-                            info={{content: 'Autentimata kasutaja on iga kasutaja, kes avab e-ehituse veebilehe. Autenditud kasutaja on kasutaja, kes logib end e-ehituse veebi sisse. Teate loomisel tuleb arvestada, kas teade on vajalik neile, kes on juba lehel sisse loginud või kõikidele, kes lehele satuvad.'}}
-                            className={checkSelfError('publik')}
-                            component={
-                              <Select name='audience' value={alert.audience} onChange={onAudienceChange} options={audiences} />
-                            }
-                            required
+            <div className="alerts-ui--alert-creation-modal--content">
+              <FieldWrapper
+                label="Teate publik"
+                info={{
+                  content:
+                    'Autentimata kasutaja on iga kasutaja, kes avab e-ehituse veebilehe. Autenditud kasutaja on kasutaja, kes logib end e-ehituse veebi sisse. Teate loomisel tuleb arvestada, kas teade on vajalik neile, kes on juba lehel sisse loginud või kõikidele, kes lehele satuvad.',
+                }}
+                className={checkSelfError('publik')}
+                component={
+                  <Select
+                    name="audience"
+                    value={alert.audience}
+                    onChange={onAudienceChange}
+                    options={audiences}
+                  />
+                }
+                required
               />
 
-              <FieldWrapper label='Teate tase'
-                            info={{content: 'Teade (roheline) on neutraalse või positiivse sisuga. Näiteks info uue teenuse või muutuse kohta keskkonnas. Hoiatus (kollane) on hoiatav info millegi kohta, mis võib häirida kasutaja tööd lehel, kuid ei takista. Näiteks suhtlus mõne teise registriga võib olla häiritud. Veateade (punane) on teade selle kohta, et midagi ei tööta ja see takistab tööd lehel. Näiteks teenus on mingi aeg maas, allkirjastamine ei tööta, sisse logida ei saa.'}}
-                            className={checkSelfError('tease')}
-                            component={
-                              <Select name='level' value={alert.level} onChange={onLevelChange} options={messageLevels} />
-                            }
-                            required
+              <FieldWrapper
+                label="Teate tase"
+                info={{
+                  content:
+                    'Teade (roheline) on neutraalse või positiivse sisuga. Näiteks info uue teenuse või muutuse kohta keskkonnas. Hoiatus (kollane) on hoiatav info millegi kohta, mis võib häirida kasutaja tööd lehel, kuid ei takista. Näiteks suhtlus mõne teise registriga võib olla häiritud. Veateade (punane) on teade selle kohta, et midagi ei tööta ja see takistab tööd lehel. Näiteks teenus on mingi aeg maas, allkirjastamine ei tööta, sisse logida ei saa.',
+                }}
+                className={checkSelfError('tease')}
+                component={
+                  <Select
+                    name="level"
+                    value={alert.level}
+                    onChange={onLevelChange}
+                    options={messageLevels}
+                  />
+                }
+                required
               />
 
-              <FieldWrapper label='Teate kuvamise algus'
-                            info={{content: 'Teade kuvatakse kasutajale siin märgitud kellaajast alates'}}
-                            component={
-                              <div className='alerts-ui--alert-creation-modal--content--date'>
-                                <InternalDatePicker date={alert.begin} onChange={onDateStartChange} title='start_date'
-                                                    checkSelfError={checkSelfError} />
-                                &nbsp;
-                                <div className='alerts-ui--alert-creation-modal--content--time'>
-                                  <p>kell</p>
-                                  &nbsp;
-                                  <TimeInput date={alert.beginHour}
-                                             checkSelfError={checkSelfError}
-                                             onChange={onHourStartChange} min='0' max='23' title='start_hour' />
-                                  &nbsp;
-                                  <p>:</p>
-                                  &nbsp;
-                                  <TimeInput date={alert.beginMinute}
-                                             onChange={onMinuteStartChange} min='0' max='59' title='start_minute'
-                                             checkSelfError={checkSelfError} />
-                                </div>
-                              </div>
-                            }
-                            required
+              <FieldWrapper
+                label="Teate kuvamise algus"
+                info={{
+                  content:
+                    'Teade kuvatakse kasutajale siin märgitud kellaajast alates',
+                }}
+                component={
+                  <div className="alerts-ui--alert-creation-modal--content--date">
+                    <InternalDatePicker
+                      date={alert.begin}
+                      onChange={onDateStartChange}
+                      title="start_date"
+                      checkSelfError={checkSelfError}
+                    />
+                    &nbsp;
+                    <div className="alerts-ui--alert-creation-modal--content--time">
+                      <p>kell</p>
+                      &nbsp;
+                      <TimeInput
+                        date={alert.beginHour}
+                        checkSelfError={checkSelfError}
+                        onChange={onHourStartChange}
+                        min="0"
+                        max="23"
+                        title="start_hour"
+                      />
+                      &nbsp;
+                      <p>:</p>
+                      &nbsp;
+                      <TimeInput
+                        date={alert.beginMinute}
+                        onChange={onMinuteStartChange}
+                        min="0"
+                        max="59"
+                        title="start_minute"
+                        checkSelfError={checkSelfError}
+                      />
+                    </div>
+                  </div>
+                }
+                required
               />
 
-              <FieldWrapper label='Teate kuvamise lõpp'
-                            info={{content: 'Teate kuvamine kasutajale lõpeb siin märgitud kellaajast'}}
-                            component={
-                              <div className='alerts-ui--alert-creation-modal--content--date'>
-                                <InternalDatePicker date={alert.end} onChange={onDateEndChange} title='end_date'
-                                                    checkSelfError={checkSelfError} />
-                                &nbsp;
-                                <div className='alerts-ui--alert-creation-modal--content--time'>
-                                  <p>kell</p>
-                                  &nbsp;
-                                  <TimeInput date={alert.endHour}
-                                             onChange={onHourEndChange} min='0' max='23'
-                                             checkSelfError={checkSelfError}
-                                             title='end_hour' />
-                                  &nbsp;
-                                  <p>:</p>
-                                  &nbsp;
-                                  <TimeInput date={alert.endMinute}
-                                             onChange={onMinuteEndChange} min='0' max='59' title='end_minute'
-                                             checkSelfError={checkSelfError} />
-                                </div>
-                              </div>
-                            }
-                            required
+              <FieldWrapper
+                label="Teate kuvamise lõpp"
+                info={{
+                  content:
+                    'Teate kuvamine kasutajale lõpeb siin märgitud kellaajast',
+                }}
+                component={
+                  <div className="alerts-ui--alert-creation-modal--content--date">
+                    <InternalDatePicker
+                      date={alert.end}
+                      onChange={onDateEndChange}
+                      title="end_date"
+                      checkSelfError={checkSelfError}
+                    />
+                    &nbsp;
+                    <div className="alerts-ui--alert-creation-modal--content--time">
+                      <p>kell</p>
+                      &nbsp;
+                      <TimeInput
+                        date={alert.endHour}
+                        onChange={onHourEndChange}
+                        min="0"
+                        max="23"
+                        checkSelfError={checkSelfError}
+                        title="end_hour"
+                      />
+                      &nbsp;
+                      <p>:</p>
+                      &nbsp;
+                      <TimeInput
+                        date={alert.endMinute}
+                        onChange={onMinuteEndChange}
+                        min="0"
+                        max="59"
+                        title="end_minute"
+                        checkSelfError={checkSelfError}
+                      />
+                    </div>
+                  </div>
+                }
+                required
               />
 
               {/*<Section form={true} title='EE' >*/}
 
-                <FieldWrapper label='Teate pealkiri'
-                              className={checkSelfError('title')}
-                              component={
-                                <Input name='Title EE' value={alert.title}
-                                       onChange={(c: string) => onTitleChange(ContentLanguage.EE, c)}
-                                       maxLength="100"
-                                />
-                              }
-                              required
-                />
-
-                <FieldWrapper label='Teate sisu'
-                              className={checkSelfError('content')}
-                              component={
-                                <TextArea name='Content EE' value={alert.content}
-                                          onChange={(c: string) => onContentChange(ContentLanguage.EE, c)}
-                                          isLimitingLength={true}
-                                          maxLength={500}
-                                />
-                              }
-                              required
-                />
+              <FieldWrapper
+                label="Teate pealkiri"
+                className={checkSelfError('title')}
+                component={
+                  <Input
+                    name="Title EE"
+                    value={alert.title}
+                    onChange={(c: string) =>
+                      onTitleChange(ContentLanguage.EE, c)
+                    }
+                    maxLength="100"
+                  />
+                }
+                required
+              />
+
+              <FieldWrapper
+                label="Teate sisu"
+                className={checkSelfError('content')}
+                component={
+                  <TextArea
+                    name="Content EE"
+                    value={alert.content}
+                    onChange={(c: string) =>
+                      onContentChange(ContentLanguage.EE, c)
+                    }
+                    isLimitingLength={true}
+                    maxLength={500}
+                  />
+                }
+                required
+              />
 
               {/*</Section>*/}
 
@@ -466,49 +541,73 @@ const AlertModal: React.FC<AlertModalState & AlertModalDispatch> = ({alert, clea
               {/*</Section>*/}
             </div>
 
-            <div className='alerts-ui--alert-creation-modal--footer mt-2'>
-              <Button colourScheme='light' onClick={onCancel}>Loobun</Button>
-              <Button colourScheme='success' onClick={onSubmit}>Salvestan</Button>
+            <div className="alerts-ui--alert-creation-modal--footer mt-2">
+              <Button colourScheme="light" onClick={onCancel}>
+                Loobun
+              </Button>
+              <Button colourScheme="success" onClick={onSubmit}>
+                Salvestan
+              </Button>
             </div>
           </div>
         </div>
-      }
+      )}
     </>
   );
-}
-
+};
 
 interface TimeInputProps {
-  date: number | undefined,
-  onChange: (value: string) => void,
-  min: string,
-  max: string,
-  title: string,
-  checkSelfError: (title: string) => string,
+  date: number | undefined;
+  onChange: (value: string) => void;
+  min: string;
+  max: string;
+  title: string;
+  checkSelfError: (title: string) => string;
 }
 
-const TimeInput: React.FC<TimeInputProps> = ({date, onChange, max, min, title, checkSelfError}) => {
+const TimeInput: React.FC<TimeInputProps> = ({
+  date,
+  onChange,
+  max,
+  min,
+  title,
+  checkSelfError,
+}) => {
   return (
-    <input className={`safari-input-rendering-bug-fix form-control ${checkSelfError(title)}`}
-           placeholder='00'
-           defaultValue={(date !== undefined) ? appendZero(date.toString()) : ''}
-           onChange={(event) => onChange(event.target.value)} type='number' min={min} max={max} />
-  )
-}
+    <input
+      className={`safari-input-rendering-bug-fix form-control ${checkSelfError(
+        title,
+      )}`}
+      placeholder="00"
+      defaultValue={date !== undefined ? appendZero(date.toString()) : ''}
+      onChange={(event) => onChange(event.target.value)}
+      type="number"
+      min={min}
+      max={max}
+    />
+  );
+};
 
 interface InternalDatePickerProps {
-  date: string | undefined,
-  onChange: (value: string) => void,
-  title: string,
-  checkSelfError: (title: string) => string,
+  date: string | undefined;
+  onChange: (value: string) => void;
+  title: string;
+  checkSelfError: (title: string) => string;
 }
 
-const InternalDatePicker: React.FC<InternalDatePickerProps> = ({date, onChange, title, checkSelfError}) => {
+const InternalDatePicker: React.FC<InternalDatePickerProps> = ({
+  date,
+  onChange,
+  title,
+  checkSelfError,
+}) => {
   return (
-    <DatePicker value={date}
-                className={checkSelfError(title)}
-                onChange={onChange} />
-  )
-}
+    <DatePicker
+      value={date}
+      className={checkSelfError(title)}
+      onChange={onChange}
+    />
+  );
+};
 
-export default AlertModal;
+export default AlertModal;

package/src/library/components/AlertModal/AlertModalContainer.tsx

@@ -1,26 +1,28 @@
-import React from "react";
-import {connect} from "react-redux";
-import {AlertsUiState} from "../../reducers";
-import AlertModal, {AlertModalDispatch, AlertModalState} from "./AlertModal";
-import {ThunkDispatch} from "redux-thunk";
+import React from 'react';
+import { connect } from 'react-redux';
+import { AlertsUiState } from '../../reducers';
+import AlertModal, { AlertModalDispatch, AlertModalState } from './AlertModal';
+import { ThunkDispatch } from 'redux-thunk';
 import {
   addAlertModalError,
   clearAlert,
   clearAlertModalErrors,
   editAlert,
   postAlert,
-  updateAlert
-} from "../../actions/AlertActions";
-import {Simulate} from "react-dom/test-utils";
+  updateAlert,
+} from '../../actions/AlertActions';
+import { Simulate } from 'react-dom/test-utils';
 
 function mapStateToProps(state: AlertsUiState): AlertModalState {
   return {
     alert: state.alert.alert,
     errors: state.alert.errors,
-  }
+  };
 }
 
-function mapDispatchToProps(dispatch: ThunkDispatch<any, any, any>): AlertModalDispatch {
+function mapDispatchToProps(
+  dispatch: ThunkDispatch<any, any, any>,
+): AlertModalDispatch {
   return {
     clearAlert: () => {
       dispatch(clearAlert());
@@ -35,12 +37,12 @@ function mapDispatchToProps(dispatch: ThunkDispatch<any, any, any>): AlertModalD
       dispatch(updateAlert());
     },
     addAlertModalError: (error) => {
-      dispatch(addAlertModalError(error))
+      dispatch(addAlertModalError(error));
     },
     clearAlertModalErrors: () => {
       dispatch(clearAlertModalErrors());
-    }
-  }
+    },
+  };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AlertModal);
+export default connect(mapStateToProps, mapDispatchToProps)(AlertModal);

package/src/library/components/AlertModal/index.ts

@@ -1 +1 @@
-export {default} from './AlertModalContainer';
+export { default } from './AlertModalContainer';