Feature/LOG-12 enhancement UI in Log-explorer

.github/workflows/test.yml

@@ -89,7 +89,7 @@ jobs:
       - name: Symfony start server
         run: |
           curl -sS https://get.symfony.com/cli/installer | bash
-          /home/runner/.symfony/bin/symfony server:start -d
+          /home/runner/.symfony5/bin/symfony server:start -d
       - name: Cypress test
         run: CYPRESS_BASE_URL=http://localhost:8000 ./node_modules/.bin/cypress run
       - name: Upload test failed

.gitignore

@@ -19,6 +19,7 @@
 ###> symfony/webpack-encore-bundle ###
 /node_modules/
 /public/build/
+
 npm-debug.log
 yarn-error.log
 ###< symfony/webpack-encore-bundle ###

assets/app.js

@@ -7,14 +7,20 @@
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.scss';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+const $ = require('jquery');
+import "./vendor/theme.min.js";
+
+window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');
 
 // Need jQuery? Install it with 'yarn add jquery', then uncomment to import it.
-import 'admin-lte/plugins/jquery/jquery';
-import 'admin-lte/plugins/jquery-ui/jquery-ui';
+// import 'admin-lte/plugins/jquery/jquery';
+// import 'admin-lte/plugins/jquery-ui/jquery-ui';
 
-$.widget.bridge('uibutton', $.ui.button);
+// $.widget.bridge('uibutton', $.ui.button);
 
-import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min';
+// import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min';
 // Import 'admin-lte/plugins/chart.js/Chart.min';
 // import Sparkline from 'admin-lte/plugins/sparklines/sparkline';
 // window.Sparkline = Sparkline;
@@ -25,9 +31,8 @@ import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min';
 // import 'admin-lte/plugins/daterangepicker/daterangepicker';
 // import 'admin-lte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min';
 // import 'admin-lte/plugins/summernote/summernote-bs4.min';
-import 'admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min';
-import 'admin-lte/dist/js/adminlte';
+// import 'admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min';
+// import 'admin-lte/dist/js/adminlte';
 // Import 'admin-lte/dist/js/pages/dashboard';
 // import 'admin-lte/dist/js/demo';
-
 // Console.log('Hello Webpack Encore! Edit me in assets/app.js');

assets/js/actions/_validator.js

@@ -10,7 +10,7 @@ const ValidatorHelper = {
         }, 'Email is invalid format');
 
         jQuery.validator.addMethod('passwordCapitalCharacters', function (value, element) {
-            const strongRegex = new RegExp('^(?=.*[a-zA-Z\\d])(?=.*[!@#$%^&\\.\\,\\/\\;\\\'\\[\\]\\(\\)\\=\\+\\-\\<\\>\\?\\:\\"\\{\\}])(?=.{8,})');
+            const strongRegex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$');
             return this.optional(element) || strongRegex.test(value);
         }, 'Password is invalid format');
         $(element).validate({

assets/js/components/_advanced-search.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {FilterDate, FilterText, Button, LogViewList} from '.';
-import '../../styles/component/_advanced-search.scss';
-import {Live} from '../actions';
+import React from "react";
+import PropTypes from "prop-types";
+import { FilterDate, FilterText, Button, LogViewList } from ".";
+import "../../styles/component/_advanced-search.scss";
+import { Live } from "../actions";
 
 export class AdvancedSearch extends React.Component {
     constructor(props) {
         super(props);
         this.filterDateRef = React.createRef();
     }
 
-    setDate(from, to, dateValue, callback){
-        this.filterDateRef.current.setDate(from, to, dateValue, callback)
+    setDate(from, to, dateValue, callback) {
+        this.filterDateRef.current.setDate(from, to, dateValue, callback);
     }
 
     render() {
@@ -25,37 +25,32 @@ export class AdvancedSearch extends React.Component {
         } = this.props;
 
         return (
-            <div className="advanced-search">
-                <div className="card mb-2">
-                    <div className="card-body pt-0 pb-1">
-                        <LogViewList
-                            {...otherProps}
+            <div className="advanced-search p-3 my-2">
+                <div className="d-flex justify-content-around align-self-center flex-wrap">
+                    <LogViewList className="me-3" {...otherProps} />
+                    <div className="d-flex flex-column flex-fill me-2">
+                        <FilterText
+                            label="What are you looking for ?"
+                            placeholder="status = 200 AND url LIKE '%product%'"
+                            queries={queries}
+                            onSaveClicked={onSaveClicked}
+                            onDeleteCLicked={onDeleteCLicked}
                         />
-                        <div className="row ">
-                            <div className="col-7 col-md-6">
-                                <FilterText
-                                    label="What are you looking for ?"
-                                    placeholder="status = 200 AND url LIKE '%product%'"
-                                    queries={queries}
-                                    onSaveClicked={onSaveClicked}
-                                    onDeleteCLicked={onDeleteCLicked}
-                                />
-                            </div>
-                            <div className="input-search col-5 col-md-4">
-                                <FilterDate
-                                    ref={this.filterDateRef}
-                                    label="Date Range"
-                                    dateRange={dateRange}
-                                    onDateRangeChanged={onDateRangeChanged}
-                                />
-                            </div>
-                            <div className="col-12 col-md-2 btn-action-group mt-2 mt-md-4">
-                                <Button id='btn-search' className="btn-search w-100" onClick={() => Live.refresh()}>
-                                    SEARCH
-                                </Button>
-                            </div>
-                        </div>
                     </div>
+                    <FilterDate
+                        className="me-2"
+                        ref={this.filterDateRef}
+                        label="Date Range"
+                        dateRange={dateRange}
+                        onDateRangeChanged={onDateRangeChanged}
+                    />
+                    <Button
+                        id="btn-search"
+                        className="btn-search flex-fill align-self-end"
+                        onClick={() => Live.refresh()}
+                    >
+                        Search
+                    </Button>
                 </div>
             </div>
         );

assets/js/components/_alert-message.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const AlertMessage = ({ message, color, className='' }) => {
+    return (
+        <>
+            {message && (
+                <div className={`alert alert-${color} ${className}`} role="alert">
+                    {message}
+                </div>
+            )}
+        </>
+    );
+};

assets/js/components/_button.js

@@ -1,38 +1,42 @@
-import React, {Component} from 'react';
-import {Colors} from '.';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-export class Button extends Component {
-    render() {
-        let {className = '', type = 'button', color = Colors.blue, isLoading = false, disabled = false, children, cy = '', ...rest} = this.props;
+export const Button = ({
+    className = "",
+    type = "button",
+    color,
+    outlineColor,
+    isLoading = false,
+    disabled = false,
+    children,
+    cy = "",
+    ...rest
+}) => {
+    let classes = `btn ${className}`;
 
-        if (Array.isArray(children)) {
-            children = children.map((child, index) => {
-                if (typeof child === 'string') {
-                    child = <span key={index}>{child}</span>;
-                }
+    if (outlineColor) classes += ` btn-outline-${outlineColor}`;
 
-                return child;
-            });
-        }
+    if (color) classes += ` btn-${color}`;
 
-        let classes = className;
-        classes += ' btn';
-        classes += ' btn-' + color;
-        if (isLoading) {
-            disabled = true;
-        }
+    if (!outlineColor && !color) classes += " btn-primary";
 
-        return (
-            <button {...rest} className={classes} disabled={disabled} type={type} data-cy={cy}>
-                {isLoading ? (<>  <span
-                    className="spinner-border spinner-border-sm mr-2"
-                    role="status" aria-hidden="true"></span>
-                    Loading... </>) : children}
-            </button>
-        );
-    }
-}
+    return (
+        <button {...rest} className={classes} disabled={disabled || isLoading} type={type} data-cy={cy}>
+            {isLoading ? (
+                <>
+                    <span
+                        className="spinner-border spinner-border-sm me-2"
+                        role="status"
+                        aria-hidden="true"
+                    ></span>
+                    Loading...
+                </>
+            ) : (
+                children
+            )}
+        </button>
+    );
+};
 
 Button.propTypes = {
     className: PropTypes.string,
@@ -42,5 +46,5 @@ Button.propTypes = {
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
     isLoading: PropTypes.bool,
-    cy: PropTypes.string
+    cy: PropTypes.string,
 };

assets/js/components/_card-tools.js

@@ -1,25 +1,26 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {Button, Icon, Colors} from '.';
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Icon, Colors } from ".";
 
-export class CardTool extends Component {
-    render() {
-        const {children} = this.props;
-
-        return (
-            <div className="btn-group">
-                <Button type="button" className="btn btn-sm dropdown-toggle" color={Colors.light}
-                    data-toggle="dropdown" data-offset="-52">
-                    <Icon name={'bars'}/>
-                </Button>
-                <div className="dropdown-menu" role="menu">
-                    {children}
-                </div>
+export const CardTool = ({ children }) => {
+    return (
+        <div className="btn-group">
+            <Button
+                className="dropdown-toggle dropdown-toggle-none-icon"
+                outlineColor={Colors.blue}
+                data-bs-toggle="dropdown"
+                data-offset="-52"
+            >
+                <Icon className="feather-sm me-2 stroke-width-3" dataFeather="upload" />
+                <span className="d-inline-block align-middle fw-bold">Export</span>
+            </Button>
+            <div className="dropdown-menu dropdown-menu-end" role="menu">
+                {children}
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 CardTool.propTypes = {
-    children: PropTypes.any
+    children: PropTypes.any,
 };