Feature/LOG-5 Alert's page

assets/js/components/_content-header.js

@@ -19,7 +19,7 @@ export class ContentHeader extends Component {
         }
 
         return (
-            <div className={`header d-flex justify-content-between ${splitUrl[1] === 'log-view' ? 'mt-1' : 'mt-3'}`}>
+            <div className={`header d-flex justify-content-between ${splitUrl[1] === 'log-view' ? 'pt-1' : 'pt-3'}`}>
                 <div className="title fw-bold">
                     <Icon dataFeather={iconName} className="feather-lg" />
                     <span className="align-middle ms-2">{title}</span>

assets/js/components/_data-table.js

@@ -6,7 +6,7 @@ export class DataTable extends Component {
         let { columns, className = "", dataTable, isSortableTable = false } = this.props;
 
         return (
-            <table className={`table table-striped table-responsive table-sortable ${isSortableTable ? 'table-sortable' : ''} ${className}`}>
+            <table className={`table bg-white mt-3 table-striped table-responsive table-sortable ${isSortableTable ? 'table-sortable' : ''} ${className}`}>
                 <thead>
                     <tr className="border-0">
                         {columns.map((item, index) => {

assets/js/components/_form-field.js

@@ -1,30 +1,56 @@
 import React, {Component} from 'react';
 import {Input, Checkbox} from "./index";
-import {WidgetTable} from "./widget/_widget-table";
 import {Select2} from "./_select2";
 import {Select} from "./_select";
 import '../../styles/component/_form-field.scss';
 
+const COMPONENT_TYPE = {
+    SELECT: 'select',
+    SELECT_TYPE_AHEAD: 'selectTypeAhead',
+    CHECKBOX: 'checkbox',
+    NUMBER: 'number'
+}
+
+
 const FormFieldComponent = ({...props}) => {
     let component;
     const {type, children, checkboxlabel } = {...props};
     switch (type) {
-        case 'select':
+        case COMPONENT_TYPE.SELECT:
             component = <Select {...props} > {children} </Select>
             break;
-        case 'selectTypeAhead':
+        case COMPONENT_TYPE.SELECT_TYPE_AHEAD:
             component = <Select2 {...props} > {children} </Select2>
             break;
-        case 'checkbox':
+        case COMPONENT_TYPE.CHECKBOX:
             component = <Checkbox {...props} label={checkboxlabel} />;
             break;
         default:
-            component = <Input {...props} />;
+            component = <Input type={type} {...props} />;
             break;
     }
     return component;
 }
 
+const generateErrorMessage = (componentType) => {
+    let errorMessage = '';
+    switch (componentType) {
+        case COMPONENT_TYPE.SELECT:
+            errorMessage = 'Please select a valid value.';
+            break;
+        case COMPONENT_TYPE.SELECT_TYPE_AHEAD:
+            errorMessage = 'Please select at least one option.';
+            break;
+        case COMPONENT_TYPE.CHECKBOX:
+            errorMessage = 'Please check to this checkbox.';
+            break;
+        default:
+            errorMessage = 'Please fill out this field.';
+            break;
+    }
+    return errorMessage;
+}
+
 export class FormField extends Component {
     render() {
         const {
@@ -38,7 +64,9 @@ export class FormField extends Component {
             isMandatory = false,
             isHiddenLabel = false,
             children,
+            errorMessage,
             errors,
+            type,
             ...rest
         } = this.props;
 
@@ -51,12 +79,13 @@ export class FormField extends Component {
         }
 
         return (
-            <div key={isInvalidField} className={`form-field form-group ${className}`}>
+            <div className={`form-field form-group ${className}`}>
                 {!isHiddenLabel && <label className={isMandatory ? 'required' : ''}>{label}</label>}
                 <FormFieldComponent
                     className={isInvalidField ? 'is-invalid' : ''}
                     name={fieldName}
                     value={value}
+                    type={type}
                     onChange={(e) => {
                         if (onChange) onChange(e);
                     }}
@@ -67,7 +96,7 @@ export class FormField extends Component {
                 >
                     {children}
                 </FormFieldComponent>
-                {isInvalidField && <span className="error invalid-feedback">Please fill out this field</span>}
+                {isInvalidField && <span className="error invalid-feedback">{errorMessage || generateErrorMessage(type)}</span>}
             </div>
         );
     }

assets/js/components/_select.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 export class Select extends Component {
     render() {
         let {className = '', hasEmpty = false, children, ...rest} = this.props;
-        className += ' form-control';
+        className += ' form-select';
 
         return (
             <select className={className} {...rest}>