From 4afbb4388fbe41e22a807a24a54f29dbbf9b4ced Mon Sep 17 00:00:00 2001 From: Mariela Date: Fri, 22 Jul 2022 14:59:59 -0600 Subject: [PATCH 001/100] add functions --- .../src/components/AdministradoresSistema.js | 14 +-- .../src/components/ComunidadViviendas.js | 113 ++++++++++++++++++ 2 files changed, 116 insertions(+), 11 deletions(-) diff --git a/web-ui/web-react/src/components/AdministradoresSistema.js b/web-ui/web-react/src/components/AdministradoresSistema.js index 8a8ea049..58b21b3b 100644 --- a/web-ui/web-react/src/components/AdministradoresSistema.js +++ b/web-ui/web-react/src/components/AdministradoresSistema.js @@ -8,7 +8,7 @@ import { Dialog } from 'primereact/dialog'; import { Toolbar } from 'primereact/toolbar'; const AdministradoresSistema = () => { - +`` const [administrators, setAdministrators] = useState([]); const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findAdminSistema/'); const [sysadmin, setSysAdmin] = useState(emptySysAdmin); @@ -19,7 +19,6 @@ const AdministradoresSistema = () => { const toast = useRef(null); const dt = useRef(null); - let emptySysAdmin = { _id: null, dni: '', @@ -123,10 +122,8 @@ const AdministradoresSistema = () => { function (response) { let _sysadmin = administrators.filter(val => val._id !== sysadmin._id); setAdministrators(_sysadmin); - setDeleteAdminSystemDialog(false); setSysAdmin(emptySysAdmin); - toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador del Sistema Eliminado', life: 3000 }); } ) @@ -155,7 +152,6 @@ const AdministradoresSistema = () => { toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); } - const actionsAdmin = (rowData) => { return (
@@ -205,14 +201,13 @@ const AdministradoresSistema = () => {
+ ); + } + + const leftToolbarTemplate = () => { + return ( + +
+
+ + ) + } + + const rightToolbarTemplate = () => { + return ( + + diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js index f6beee33..dcee03df 100644 --- a/web-ui/web-react/src/components/ComunidadViviendas.js +++ b/web-ui/web-react/src/components/ComunidadViviendas.js @@ -6,7 +6,7 @@ import { Column } from 'primereact/column'; import { Dropdown } from 'primereact/dropdown'; import { Toast } from 'primereact/toast'; import classNames from 'classnames'; - +import { Toolbar } from 'primereact/toolbar'; const Communities = () => { @@ -36,9 +36,12 @@ const Communities = () => { const [districtId, setDistrictId] = useState(null); const [codeHouses, setCodeHouses] = useState(''); const [submitted, setSubmitted] = useState(false); + const [selectedCommunities, setSelectedCommunities] = useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false); + const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false); const toast = useRef(null); - const dt = useRef(null); - + const dt = useEffect(null); const p = provincesList.map((item) => ({ @@ -157,7 +160,7 @@ const Communities = () => { const saveCommunity = () => { - if (community.name && community.num_houses > 0 && provinciaId && cantonId && districtId && community.phone ) { + if (community.name && community.num_houses > 0 && provinciaId && cantonId && districtId && community.phone) { let _communities = [...communitiesList]; let _community = { ...community }; _community.province = provinciaId; @@ -229,78 +232,85 @@ const Communities = () => { } - const hideDeleteAdminSystemDialog = () => { - setDeleteAdminSystemDialog(false); + const hideDeleteCommunityDialog = () => { + setDeleteCommunityDialog(false); } - const hideDeleteAdminsSystemsDialog = () => { - setDeleteAdminsSystemDialog(false); + const hideDeleteCommunitiesDialog = () => { + setDeleteCommunitiesDialog(false); } - const confirmDeleteAdminSystem = (sysAdmin) => { - setSysAdmin(sysAdmin); - setDeleteAdminSystemDialog(true); + const confirmDeleteCommunity = (community) => { + setCommunity(community); + setDeleteCommunityDialog(true); } const confirmDeleteSelected = () => { - setDeleteAdminsSystemDialog(true); + setDeleteCommunitiesDialog(true); } - const deleteSysAdmin = () => { + const deleteCommunity = () => { - fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, { - cache: 'no-cache', - method: 'DELETE', - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then( - function (response) { - let _sysadmin = communities.filter(val => val._id !== community._id); - setAdministrators(_sysadmin); - setDeleteAdminSystemDialog(false); - setSysAdmin(emptySysAdmin); - toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Administrador del Sistema Eliminado', life: 3000 }); - } - ) - .catch( - err => { - console.log('Ocurrió un error con el fetch', err) - toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Administrador del Sistema no se pudo eliminar', life: 3000 }); - } - ); + /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { + cache: 'no-cache', + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }) + .then( + function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else + return response.json(); + } + ) + .then( + function (response) { + + let _community = communities.filter(val => val._id !== community._id); + setCommunities(_community); + setDeleteCommunityDialog(false); + setCommunity(emptyCommunity); + toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Comunidad de Viviendas Eliminada', life: 3000 }); + } + ) + .catch( + err => { + console.log('Ocurrió un error con el fetch', err) + toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Comunidad de Viviendas no se pudo eliminar', life: 3000 }); + } + ); + */ + let _community = communitiesList.filter(val => val._id !== community._id); + setCommunitiesList(_community); + setDeleteCommunityDialog(false); + setCommunity(emptyCommunity); + toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidad de Viviendas Eliminada', life: 3000 }); } - const deleteSelectedAdminsSystem = () => { - let _communities = communitiesList.filter(val => !selectedAdministrators.includes(val)); - selectedAdministrators.map((item) => { - fetch('http://localhost:4000/user/deleteAdminSystem/' + item._id, { + const deleteSelectedCommunities = () => { + let _communities = communitiesList.filter(val => !selectedCommunities.includes(val)); + /* selectedCommunities.map((item) => { + fetch('http://localhost:4000/user/deleteCommunity/' + item._id, { cache: 'no-cache', method: 'DELETE', headers: { 'Content-Type': 'application/json' } }) - }) + })*/ setCommunitiesList(_communities); - setDeleteAdminsSystemDialog(false); - setSelectedAdministrators(null); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); + setDeleteCommunitiesDialog(false); + setSelectedCommunities(null); + toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidades de Viviendas Eliminada', life: 3000 }); } - const actionsAdmin = (rowData) => { + const actionsCommunity = (rowData) => { return (
-
); } @@ -309,7 +319,7 @@ const Communities = () => { return (
-
) @@ -318,14 +328,14 @@ const Communities = () => { const rightToolbarTemplate = () => { return ( - - - -
- -
-
- -
-
- -
- - -
Material Design
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Material Design Compact
-
-
- -
-
- -
-
- -
-
- -
-
- -
Tailwind
-
-
- -
-
- -
Fluent UI
-
-
- -
-
- -
PrimeOne Design - 2022
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
PrimeOne Design - 2021
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - + const isOutsideClicked = (event) => { + return !( + config.current.isSameNode(event.target) || + config.current.contains(event.target) ); -} + }; + + const decrementScale = () => { + setScale((prevState) => --prevState); + }; + + const incrementScale = () => { + setScale((prevState) => ++prevState); + }; + + useEffect(() => { + document.documentElement.style.fontSize = scale + 'px'; + }, [scale]); + + const toggleConfigurator = (event) => { + setActive((prevState) => !prevState); + }; + + const configClassName = classNames('layout-config', { + 'layout-config-active': active, + }); + + const replaceLink = useCallback((linkElement, href, callback) => { + if (isIE()) { + linkElement.setAttribute('href', href); + + if (callback) { + callback(); + } + } else { + const id = linkElement.getAttribute('id'); + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('href', href); + cloneLinkElement.setAttribute('id', id + '-clone'); + + linkElement.parentNode.insertBefore( + cloneLinkElement, + linkElement.nextSibling, + ); + + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', id); + + if (callback) { + callback(); + } + }); + } + }, []); + + useEffect(() => { + let themeElement = document.getElementById('theme-link'); + const themeHref = 'assets/themes/' + theme + '/theme.css'; + replaceLink(themeElement, themeHref); + }, [theme, replaceLink]); + + const isIE = () => { + return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent); + }; + + const changeTheme = (e, theme, scheme) => { + props.onColorModeChange(scheme); + setTheme(theme); + }; + + return ( +
+ +
+ +
Input Style
+
+
+ props.onInputStyleChange(e.value)} + checked={props.inputStyle === 'outlined'} + /> + +
+
+ props.onInputStyleChange(e.value)} + checked={props.inputStyle === 'filled'} + /> + +
+
+ +
Ripple Effect
+ + +
Menu Type
+
+
+ props.onLayoutModeChange(e.value)} + checked={props.layoutMode === 'static'} + /> + +
+
+ props.onLayoutModeChange(e.value)} + checked={props.layoutMode === 'overlay'} + /> + +
+
+ +
Themes
+
Bootstrap
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Material Design
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Material Design Compact
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
Tailwind
+
+
+ +
+
+ +
Fluent UI
+
+
+ +
+
+ +
PrimeOne Design - 2022
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
PrimeOne Design - 2021
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + ); +}; diff --git a/web-ui/web-react/src/AppFooter.js b/web-ui/web-react/src/AppFooter.js index 78b4f54e..fb9f6951 100644 --- a/web-ui/web-react/src/AppFooter.js +++ b/web-ui/web-react/src/AppFooter.js @@ -1,12 +1,20 @@ import React from 'react'; export const AppFooter = (props) => { - - return ( -
- Logo - by - PrimeReact -
- ); -} + return ( +
+ Logo + by + PrimeReact +
+ ); +}; diff --git a/web-ui/web-react/src/AppMenu.js b/web-ui/web-react/src/AppMenu.js index 7ee0e07e..3d9fe782 100644 --- a/web-ui/web-react/src/AppMenu.js +++ b/web-ui/web-react/src/AppMenu.js @@ -2,117 +2,175 @@ import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; import { CSSTransition } from 'react-transition-group'; import classNames from 'classnames'; -import {Ripple} from "primereact/ripple"; +import { Ripple } from 'primereact/ripple'; import { Badge } from 'primereact/badge'; const AppSubmenu = (props) => { + const [activeIndex, setActiveIndex] = useState(null); - const [activeIndex, setActiveIndex] = useState(null) - - const onMenuItemClick = (event, item, index) => { - //avoid processing disabled items - if (item.disabled) { - event.preventDefault(); - return true; - } - - //execute command - if (item.command) { - item.command({ originalEvent: event, item: item }); - } - - if (index === activeIndex) - setActiveIndex(null); - else - setActiveIndex(index); - - if (props.onMenuItemClick) { - props.onMenuItemClick({ - originalEvent: event, - item: item - }); - } + const onMenuItemClick = (event, item, index) => { + //avoid processing disabled items + if (item.disabled) { + event.preventDefault(); + return true; } - const onKeyDown = (event) => { - if (event.code === 'Enter' || event.code === 'Space'){ - event.preventDefault(); - event.target.click(); - } + //execute command + if (item.command) { + item.command({ originalEvent: event, item: item }); } - const renderLinkContent = (item) => { - let submenuIcon = item.items && ; - let badge = item.badge && + if (index === activeIndex) setActiveIndex(null); + else setActiveIndex(index); - return ( - - - {item.label} - {submenuIcon} - {badge} - - - ); + if (props.onMenuItemClick) { + props.onMenuItemClick({ + originalEvent: event, + item: item, + }); } + }; - const renderLink = (item, i) => { - let content = renderLinkContent(item); - - if (item.to) { - return ( - onMenuItemClick(e, item, i)} exact target={item.target}> - {content} - - ) - } - else { - return ( - onMenuItemClick(e, item, i)} target={item.target}> - {content} - - ); - } + const onKeyDown = (event) => { + if (event.code === 'Enter' || event.code === 'Space') { + event.preventDefault(); + event.target.click(); } + }; - let items = props.items && props.items.map((item, i) => { - let active = activeIndex === i; - let styleClass = classNames(item.badgeStyleClass, {'layout-menuitem-category': props.root, 'active-menuitem': active && !item.to }); - - if(props.root) { - return ( -
  • - {props.root === true && -
    {item.label}
    - -     } -
    • - ); - } - else { - return ( -
  • - {renderLink(item, i)} - - - -
    • - ); - } - }); - - return items ?
      {items}
    : null; -} - -export const AppMenu = (props) => { + const renderLinkContent = (item) => { + let submenuIcon = item.items && ( + + ); + let badge = item.badge && ; return ( -
    - - - primeblocks - -
    + + + {item.label} + {submenuIcon} + {badge} + + ); -} + }; + + const renderLink = (item, i) => { + let content = renderLinkContent(item); + + if (item.to) { + return ( + onMenuItemClick(e, item, i)} + exact + target={item.target} + > + {content} + + ); + } else { + return ( + onMenuItemClick(e, item, i)} + target={item.target} + > + {content} + + ); + } + }; + + let items = + props.items && + props.items.map((item, i) => { + let active = activeIndex === i; + let styleClass = classNames(item.badgeStyleClass, { + 'layout-menuitem-category': props.root, + 'active-menuitem': active && !item.to, + }); + + if (props.root) { + return ( +
  • + {props.root === true && ( + +
    + {item.label} +
    + +     + )} +
    • + ); + } else { + return ( +
  • + {renderLink(item, i)} + + + +
    • + ); + } + }); + + return items ? ( +
      + {items} +
    + ) : null; +}; + +export const AppMenu = (props) => { + return ( +
    + + + primeblocks + +
    + ); +}; diff --git a/web-ui/web-react/src/AppTopbar.js b/web-ui/web-react/src/AppTopbar.js index 40e350b1..037432da 100644 --- a/web-ui/web-react/src/AppTopbar.js +++ b/web-ui/web-react/src/AppTopbar.js @@ -3,42 +3,44 @@ import { Link } from 'react-router-dom'; import classNames from 'classnames'; export const AppTopbar = (props) => { + return ( +
    + + logo + KATOIKIA + - return ( -
    - - logo - KATOIKIA - - - {/* */} - + -
      - {/*
    • +
        + {/*
        • */} - {/*
      • + {/*
        • */} -
      • - -
        • -
      -
    - ); -} +
  • + +
    • + +
    + ); +}; diff --git a/web-ui/web-react/src/BlockViewer.js b/web-ui/web-react/src/BlockViewer.js index 2e440d6d..8fb61ae8 100644 --- a/web-ui/web-react/src/BlockViewer.js +++ b/web-ui/web-react/src/BlockViewer.js @@ -3,47 +3,63 @@ import { classNames } from 'primereact/utils'; import { CodeHighlight } from './templates/CodeHighlight'; const BlockViewer = (props) => { + const [blockView, setBlockView] = useState('PREVIEW'); - const [blockView, setBlockView] = useState('PREVIEW') + const copyCode = async (event) => { + await navigator.clipboard.writeText(props.code); + event.preventDefault(); + }; - const copyCode = async (event) => { - await navigator.clipboard.writeText(props.code); - event.preventDefault(); - } - - return ( -
    -
    -
    - - {props.header} - {props.new && New} - -
    - - - -
    -
    -
    - {blockView === 'PREVIEW' && -
    - {props.children} -
    } - - {blockView === 'CODE' && - - {props.code} - - } -
    -
    + return ( +
    +
    +
    + + {props.header} + {props.new && New} + +
    + + + +
    - ) -} +
    + {blockView === 'PREVIEW' && ( +
    + {props.children} +
    + )} + + {blockView === 'CODE' && {props.code}} +
    +
    +
    + ); +}; export default BlockViewer; diff --git a/web-ui/web-react/src/ScrollToTop.js b/web-ui/web-react/src/ScrollToTop.js index e4313de7..04ad222c 100644 --- a/web-ui/web-react/src/ScrollToTop.js +++ b/web-ui/web-react/src/ScrollToTop.js @@ -2,14 +2,13 @@ import { useEffect } from 'react'; import { useLocation, withRouter } from 'react-router-dom'; const ScrollToTop = (props) => { + let location = useLocation(); - let location = useLocation(); + useEffect(() => { + window.scrollTo(0, 0); + }, [location]); - useEffect(() => { - window.scrollTo(0, 0) - }, [location]); - - return props.children; -} + return props.children; +}; export default withRouter(ScrollToTop); diff --git a/web-ui/web-react/src/assets/demo/Badge.scss b/web-ui/web-react/src/assets/demo/Badge.scss index e61e59de..e8016853 100644 --- a/web-ui/web-react/src/assets/demo/Badge.scss +++ b/web-ui/web-react/src/assets/demo/Badge.scss @@ -1,95 +1,95 @@ .customer-badge, .product-badge, .order-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; } .customer-badge { - &.status-qualified { - background: #C8E6C9; - color: #256029; - } + &.status-qualified { + background: #c8e6c9; + color: #256029; + } - &.status-unqualified { - background: #FFCDD2; - color: #C63737; - } + &.status-unqualified { + background: #ffcdd2; + color: #c63737; + } - &.status-negotiation { - background: #FEEDAF; - color: #8A5340; - } + &.status-negotiation { + background: #feedaf; + color: #8a5340; + } - &.status-new { - background: #B3E5FC; - color: #23547B; - } + &.status-new { + background: #b3e5fc; + color: #23547b; + } - &.status-renewal { - background: #ECCFFF; - color: #694382; - } + &.status-renewal { + background: #eccfff; + color: #694382; + } - &.status-proposal { - background: #FFD8B2; - color: #805B36; - } + &.status-proposal { + background: #ffd8b2; + color: #805b36; + } } .product-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; - &.status-instock { - background: #C8E6C9; - color: #256029; - } + &.status-instock { + background: #c8e6c9; + color: #256029; + } - &.status-outofstock { - background: #FFCDD2; - color: #C63737; - } + &.status-outofstock { + background: #ffcdd2; + color: #c63737; + } - &.status-lowstock { - background: #FEEDAF; - color: #8A5340; - } + &.status-lowstock { + background: #feedaf; + color: #8a5340; + } } .order-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; + border-radius: var(--border-radius); + padding: 0.25em 0.5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 0.3px; - &.order-delivered { - background: #C8E6C9; - color: #256029; - } + &.order-delivered { + background: #c8e6c9; + color: #256029; + } - &.order-cancelled { - background: #FFCDD2; - color: #C63737; - } + &.order-cancelled { + background: #ffcdd2; + color: #c63737; + } - &.order-pending { - background: #FEEDAF; - color: #8A5340; - } + &.order-pending { + background: #feedaf; + color: #8a5340; + } - &.order-returned { - background: #ECCFFF; - color: #694382; - } + &.order-returned { + background: #eccfff; + color: #694382; + } } diff --git a/web-ui/web-react/src/assets/demo/BlockViewer.scss b/web-ui/web-react/src/assets/demo/BlockViewer.scss index 39b996c1..f9d3e345 100644 --- a/web-ui/web-react/src/assets/demo/BlockViewer.scss +++ b/web-ui/web-react/src/assets/demo/BlockViewer.scss @@ -1,147 +1,149 @@ .block-viewer { - .block-section { - margin-bottom: 4rem; - overflow: hidden; + .block-section { + margin-bottom: 4rem; + overflow: hidden; + } + + .block-header { + padding: 1rem 2rem; + background-color: var(--surface-section); + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border: 1px solid var(--surface-d); + display: flex; + align-items: center; + justify-content: space-between; + + .block-title { + font-weight: 700; + display: inline-flex; + align-items: center; + + .badge-free { + border-radius: 4px; + padding: 0.25rem 0.5rem; + background-color: var(--orange-500); + color: white; + margin-left: 1rem; + font-weight: 700; + font-size: 0.875rem; + } } - .block-header { - padding: 1rem 2rem; - background-color: var(--surface-section); - border-top-left-radius: 12px; - border-top-right-radius: 12px; - border:1px solid var(--surface-d); + .block-actions { + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; + margin-left: 1rem; + + a, + button { display: flex; align-items: center; - justify-content: space-between; + margin-right: 0.75rem; + padding: 0.5rem 1rem; + border-radius: 4px; + font-weight: 600; + border: 1px solid transparent; + transition: background-color 0.2s; + cursor: pointer; - .block-title { - font-weight: 700; - display: inline-flex; - align-items: center; - - .badge-free { - border-radius: 4px; - padding: .25rem .5rem; - background-color: var(--orange-500); - color: white; - margin-left: 1rem; - font-weight: 700; - font-size: .875rem; - } + &:last-child { + margin-right: 0; } - .block-actions { - display: flex; - align-items: center; - justify-content: space-between; - user-select: none; - margin-left: 1rem; - - a,button { - display: flex; - align-items: center; - margin-right: .75rem; - padding: .5rem 1rem; - border-radius: 4px; - font-weight: 600; - border: 1px solid transparent; - transition: background-color .2s; - cursor: pointer; - - &:last-child { - margin-right: 0; - } - - &:not(.block-action-disabled):hover { - background-color: var(--surface-c); - } - - &.block-action-active { - border-color: var(--primary-color); - color: var(--primary-color); - } - - &.block-action-copy { - i { - color: var(--primary-color); - font-size: 1.25rem; - margin: 0; - } - } - - &.block-action-disabled { - opacity: .6; - cursor: auto !important; - } - - i { - margin-right: .5rem; - } - } - } - } - - .block-content { - padding: 0; - border:1px solid var(--surface-d); - border-top: 0 none; - border-bottom-left-radius: 12px; - border-bottom-right-radius: 12px; - overflow: hidden; - } - - pre[class*="language-"] { - margin: 0 !important; - - &:before, &:after { - display: none !important; + &:not(.block-action-disabled):hover { + background-color: var(--surface-c); } - code { - border-left: 0 none !important; - box-shadow: none !important; - background: var(--surface-e) !important; + &.block-action-active { + border-color: var(--primary-color); + color: var(--primary-color); + } + + &.block-action-copy { + i { + color: var(--primary-color); + font-size: 1.25rem; margin: 0; - color: var(--text-color); - font-size: 14px; - padding: 0 2rem !important; - - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } - - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } - - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.string { - background: transparent; - } - } + } } + + &.block-action-disabled { + opacity: 0.6; + cursor: auto !important; + } + + i { + margin-right: 0.5rem; + } + } + } + } + + .block-content { + padding: 0; + border: 1px solid var(--surface-d); + border-top: 0 none; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + overflow: hidden; + } + + pre[class*='language-'] { + margin: 0 !important; + + &:before, + &:after { + display: none !important; } - @media screen and (max-width: 575px) { - .block-header { - flex-direction: column; - align-items: start; + code { + border-left: 0 none !important; + box-shadow: none !important; + background: var(--surface-e) !important; + margin: 0; + color: var(--text-color); + font-size: 14px; + padding: 0 2rem !important; - .block-actions { - margin-top: 1rem; - margin-left: 0; - } + .token { + &.tag, + &.keyword { + color: #2196f3 !important; } + + &.attr-name, + &.attr-string { + color: #2196f3 !important; + } + + &.attr-value { + color: #4caf50 !important; + } + + &.punctuation { + color: var(--text-color); + } + + &.operator, + &.string { + background: transparent; + } + } } + } + + @media screen and (max-width: 575px) { + .block-header { + flex-direction: column; + align-items: start; + + .block-actions { + margin-top: 1rem; + margin-left: 0; + } + } + } } diff --git a/web-ui/web-react/src/assets/demo/Demos.scss b/web-ui/web-react/src/assets/demo/Demos.scss index a4036b84..07d55104 100644 --- a/web-ui/web-react/src/assets/demo/Demos.scss +++ b/web-ui/web-react/src/assets/demo/Demos.scss @@ -3,4 +3,4 @@ @import './MediaDemo.scss'; @import './TableDemo.scss'; @import './TimelineDemo.scss'; -@import './Badge.scss'; \ No newline at end of file +@import './Badge.scss'; diff --git a/web-ui/web-react/src/assets/demo/Documentation.scss b/web-ui/web-react/src/assets/demo/Documentation.scss index 61110e84..205bc20e 100644 --- a/web-ui/web-react/src/assets/demo/Documentation.scss +++ b/web-ui/web-react/src/assets/demo/Documentation.scss @@ -1,60 +1,61 @@ .docs { - i:not([class~="pi"]) { - background-color: transparent; - color: #2196f3; - font-family: Monaco, courier, monospace; - font-style: normal; - font-size: 12px; - font-weight: 500; - padding: 0 4px; - letter-spacing: .5px; - font-weight: 600; - margin: 0 2px; - display: inline-flex; + i:not([class~='pi']) { + background-color: transparent; + color: #2196f3; + font-family: Monaco, courier, monospace; + font-style: normal; + font-size: 12px; + font-weight: 500; + padding: 0 4px; + letter-spacing: 0.5px; + font-weight: 600; + margin: 0 2px; + display: inline-flex; + } + + a { + font-weight: 500; + } + + pre[class*='language-'] { + &:before, + &:after { + display: none !important; } - a { - font-weight: 500; + code { + border-left: 6px solid var(--surface-border) !important; + box-shadow: none !important; + background: var(--surface-ground) !important; + margin: 1em 0; + color: var(--text-color); + font-size: 14px; } - pre[class*="language-"] { - &:before, &:after { - display: none !important; - } + .token { + &.tag, + &.keyword { + color: #2196f3 !important; + } - code { - border-left: 6px solid var(--surface-border) !important; - box-shadow: none !important; - background: var(--surface-ground) !important; - margin: 1em 0; - color: var(--text-color); - font-size: 14px; - } + &.attr-name, + &.attr-string { + color: #2196f3 !important; + } - .token { - &.tag, - &.keyword { - color: #2196F3 !important; - } + &.attr-value { + color: #4caf50 !important; + } - &.attr-name, - &.attr-string { - color: #2196F3 !important; - } + &.punctuation { + color: var(--text-color); + } - &.attr-value { - color: #4CAF50 !important; - } - - &.punctuation { - color: var(--text-color); - } - - &.operator, - &.variable, - &.string { - background: transparent; - } - } + &.operator, + &.variable, + &.string { + background: transparent; + } } + } } diff --git a/web-ui/web-react/src/assets/demo/MediaDemo.scss b/web-ui/web-react/src/assets/demo/MediaDemo.scss index 43ad7ab1..412cc03e 100644 --- a/web-ui/web-react/src/assets/demo/MediaDemo.scss +++ b/web-ui/web-react/src/assets/demo/MediaDemo.scss @@ -1,16 +1,16 @@ .media-demo { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: 0.3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - } + .product-item { + .product-item-content { + border: 1px solid var(--surface-d); + border-radius: 3px; + margin: 0.3rem; + text-align: center; + padding: 2rem 0; } + + .product-image { + width: 50%; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + } + } } diff --git a/web-ui/web-react/src/assets/demo/TableDemo.scss b/web-ui/web-react/src/assets/demo/TableDemo.scss index 75193929..f5fc5816 100644 --- a/web-ui/web-react/src/assets/demo/TableDemo.scss +++ b/web-ui/web-react/src/assets/demo/TableDemo.scss @@ -1,16 +1,16 @@ .table-demo { - .p-datatable-frozen-tbody { - font-weight: bold; - } + .p-datatable-frozen-tbody { + font-weight: bold; + } - .p-datatable-scrollable { - .p-frozen-column { - font-weight: bold; - } + .p-datatable-scrollable { + .p-frozen-column { + font-weight: bold; } + } - .image-text { - vertical-align: middle; - margin-left: .5rem; - } + .image-text { + vertical-align: middle; + margin-left: 0.5rem; + } } diff --git a/web-ui/web-react/src/assets/demo/TimelineDemo.scss b/web-ui/web-react/src/assets/demo/TimelineDemo.scss index 8be2c5aa..b01f93a5 100644 --- a/web-ui/web-react/src/assets/demo/TimelineDemo.scss +++ b/web-ui/web-react/src/assets/demo/TimelineDemo.scss @@ -1,26 +1,26 @@ .timeline-demo { - .p-timeline-event-content, - .p-timeline-event-opposite { - line-height: 1; - } + .p-timeline-event-content, + .p-timeline-event-opposite { + line-height: 1; + } - @media screen and (max-width: 960px) { - .customized-timeline { - .p-timeline-event:nth-child(even) { - flex-direction: row !important; + @media screen and (max-width: 960px) { + .customized-timeline { + .p-timeline-event:nth-child(even) { + flex-direction: row !important; - .p-timeline-event-content { - text-align: left !important; - } - } - - .p-timeline-event-opposite { - flex: 0; - } - - .p-card { - margin-top: 1rem; - } + .p-timeline-event-content { + text-align: left !important; } + } + + .p-timeline-event-opposite { + flex: 0; + } + + .p-card { + margin-top: 1rem; + } } + } } diff --git a/web-ui/web-react/src/assets/demo/flags/flags.css b/web-ui/web-react/src/assets/demo/flags/flags.css index 592d5757..81849bc4 100755 --- a/web-ui/web-react/src/assets/demo/flags/flags.css +++ b/web-ui/web-react/src/assets/demo/flags/flags.css @@ -1 +1,740 @@ -span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%} +span.flag { + width: 44px; + height: 30px; + display: inline-block; +} +img.flag { + width: 30px; +} +.flag { + background: url(flags_responsive.png) no-repeat; + background-size: 100%; + vertical-align: middle; +} +.flag-ad { + background-position: 0 0.413223%; +} +.flag-ae { + background-position: 0 0.826446%; +} +.flag-af { + background-position: 0 1.239669%; +} +.flag-ag { + background-position: 0 1.652893%; +} +.flag-ai { + background-position: 0 2.066116%; +} +.flag-al { + background-position: 0 2.479339%; +} +.flag-am { + background-position: 0 2.892562%; +} +.flag-an { + background-position: 0 3.305785%; +} +.flag-ao { + background-position: 0 3.719008%; +} +.flag-aq { + background-position: 0 4.132231%; +} +.flag-ar { + background-position: 0 4.545455%; +} +.flag-as { + background-position: 0 4.958678%; +} +.flag-at { + background-position: 0 5.371901%; +} +.flag-au { + background-position: 0 5.785124%; +} +.flag-aw { + background-position: 0 6.198347%; +} +.flag-az { + background-position: 0 6.61157%; +} +.flag-ba { + background-position: 0 7.024793%; +} +.flag-bb { + background-position: 0 7.438017%; +} +.flag-bd { + background-position: 0 7.85124%; +} +.flag-be { + background-position: 0 8.264463%; +} +.flag-bf { + background-position: 0 8.677686%; +} +.flag-bg { + background-position: 0 9.090909%; +} +.flag-bh { + background-position: 0 9.504132%; +} +.flag-bi { + background-position: 0 9.917355%; +} +.flag-bj { + background-position: 0 10.330579%; +} +.flag-bm { + background-position: 0 10.743802%; +} +.flag-bn { + background-position: 0 11.157025%; +} +.flag-bo { + background-position: 0 11.570248%; +} +.flag-br { + background-position: 0 11.983471%; +} +.flag-bs { + background-position: 0 12.396694%; +} +.flag-bt { + background-position: 0 12.809917%; +} +.flag-bv { + background-position: 0 13.22314%; +} +.flag-bw { + background-position: 0 13.636364%; +} +.flag-by { + background-position: 0 14.049587%; +} +.flag-bz { + background-position: 0 14.46281%; +} +.flag-ca { + background-position: 0 14.876033%; +} +.flag-cc { + background-position: 0 15.289256%; +} +.flag-cd { + background-position: 0 15.702479%; +} +.flag-cf { + background-position: 0 16.115702%; +} +.flag-cg { + background-position: 0 16.528926%; +} +.flag-ch { + background-position: 0 16.942149%; +} +.flag-ci { + background-position: 0 17.355372%; +} +.flag-ck { + background-position: 0 17.768595%; +} +.flag-cl { + background-position: 0 18.181818%; +} +.flag-cm { + background-position: 0 18.595041%; +} +.flag-cn { + background-position: 0 19.008264%; +} +.flag-co { + background-position: 0 19.421488%; +} +.flag-cr { + background-position: 0 19.834711%; +} +.flag-cu { + background-position: 0 20.247934%; +} +.flag-cv { + background-position: 0 20.661157%; +} +.flag-cx { + background-position: 0 21.07438%; +} +.flag-cy { + background-position: 0 21.487603%; +} +.flag-cz { + background-position: 0 21.900826%; +} +.flag-de { + background-position: 0 22.31405%; +} +.flag-dj { + background-position: 0 22.727273%; +} +.flag-dk { + background-position: 0 23.140496%; +} +.flag-dm { + background-position: 0 23.553719%; +} +.flag-do { + background-position: 0 23.966942%; +} +.flag-dz { + background-position: 0 24.380165%; +} +.flag-ec { + background-position: 0 24.793388%; +} +.flag-ee { + background-position: 0 25.206612%; +} +.flag-eg { + background-position: 0 25.619835%; +} +.flag-eh { + background-position: 0 26.033058%; +} +.flag-er { + background-position: 0 26.446281%; +} +.flag-es { + background-position: 0 26.859504%; +} +.flag-et { + background-position: 0 27.272727%; +} +.flag-fi { + background-position: 0 27.68595%; +} +.flag-fj { + background-position: 0 28.099174%; +} +.flag-fk { + background-position: 0 28.512397%; +} +.flag-fm { + background-position: 0 28.92562%; +} +.flag-fo { + background-position: 0 29.338843%; +} +.flag-fr { + background-position: 0 29.752066%; +} +.flag-ga { + background-position: 0 30.165289%; +} +.flag-gd { + background-position: 0 30.578512%; +} +.flag-ge { + background-position: 0 30.991736%; +} +.flag-gf { + background-position: 0 31.404959%; +} +.flag-gh { + background-position: 0 31.818182%; +} +.flag-gi { + background-position: 0 32.231405%; +} +.flag-gl { + background-position: 0 32.644628%; +} +.flag-gm { + background-position: 0 33.057851%; +} +.flag-gn { + background-position: 0 33.471074%; +} +.flag-gp { + background-position: 0 33.884298%; +} +.flag-gq { + background-position: 0 34.297521%; +} +.flag-gr { + background-position: 0 34.710744%; +} +.flag-gs { + background-position: 0 35.123967%; +} +.flag-gt { + background-position: 0 35.53719%; +} +.flag-gu { + background-position: 0 35.950413%; +} +.flag-gw { + background-position: 0 36.363636%; +} +.flag-gy { + background-position: 0 36.77686%; +} +.flag-hk { + background-position: 0 37.190083%; +} +.flag-hm { + background-position: 0 37.603306%; +} +.flag-hn { + background-position: 0 38.016529%; +} +.flag-hr { + background-position: 0 38.429752%; +} +.flag-ht { + background-position: 0 38.842975%; +} +.flag-hu { + background-position: 0 39.256198%; +} +.flag-id { + background-position: 0 39.669421%; +} +.flag-ie { + background-position: 0 40.082645%; +} +.flag-il { + background-position: 0 40.495868%; +} +.flag-in { + background-position: 0 40.909091%; +} +.flag-io { + background-position: 0 41.322314%; +} +.flag-iq { + background-position: 0 41.735537%; +} +.flag-ir { + background-position: 0 42.14876%; +} +.flag-is { + background-position: 0 42.561983%; +} +.flag-it { + background-position: 0 42.975207%; +} +.flag-jm { + background-position: 0 43.38843%; +} +.flag-jo { + background-position: 0 43.801653%; +} +.flag-jp { + background-position: 0 44.214876%; +} +.flag-ke { + background-position: 0 44.628099%; +} +.flag-kg { + background-position: 0 45.041322%; +} +.flag-kh { + background-position: 0 45.454545%; +} +.flag-ki { + background-position: 0 45.867769%; +} +.flag-km { + background-position: 0 46.280992%; +} +.flag-kn { + background-position: 0 46.694215%; +} +.flag-kp { + background-position: 0 47.107438%; +} +.flag-kr { + background-position: 0 47.520661%; +} +.flag-kw { + background-position: 0 47.933884%; +} +.flag-ky { + background-position: 0 48.347107%; +} +.flag-kz { + background-position: 0 48.760331%; +} +.flag-la { + background-position: 0 49.173554%; +} +.flag-lb { + background-position: 0 49.586777%; +} +.flag-lc { + background-position: 0 50%; +} +.flag-li { + background-position: 0 50.413223%; +} +.flag-lk { + background-position: 0 50.826446%; +} +.flag-lr { + background-position: 0 51.239669%; +} +.flag-ls { + background-position: 0 51.652893%; +} +.flag-lt { + background-position: 0 52.066116%; +} +.flag-lu { + background-position: 0 52.479339%; +} +.flag-lv { + background-position: 0 52.892562%; +} +.flag-ly { + background-position: 0 53.305785%; +} +.flag-ma { + background-position: 0 53.719008%; +} +.flag-mc { + background-position: 0 54.132231%; +} +.flag-md { + background-position: 0 54.545455%; +} +.flag-me { + background-position: 0 54.958678%; +} +.flag-mg { + background-position: 0 55.371901%; +} +.flag-mh { + background-position: 0 55.785124%; +} +.flag-mk { + background-position: 0 56.198347%; +} +.flag-ml { + background-position: 0 56.61157%; +} +.flag-mm { + background-position: 0 57.024793%; +} +.flag-mn { + background-position: 0 57.438017%; +} +.flag-mo { + background-position: 0 57.85124%; +} +.flag-mp { + background-position: 0 58.264463%; +} +.flag-mq { + background-position: 0 58.677686%; +} +.flag-mr { + background-position: 0 59.090909%; +} +.flag-ms { + background-position: 0 59.504132%; +} +.flag-mt { + background-position: 0 59.917355%; +} +.flag-mu { + background-position: 0 60.330579%; +} +.flag-mv { + background-position: 0 60.743802%; +} +.flag-mw { + background-position: 0 61.157025%; +} +.flag-mx { + background-position: 0 61.570248%; +} +.flag-my { + background-position: 0 61.983471%; +} +.flag-mz { + background-position: 0 62.396694%; +} +.flag-na { + background-position: 0 62.809917%; +} +.flag-nc { + background-position: 0 63.22314%; +} +.flag-ne { + background-position: 0 63.636364%; +} +.flag-nf { + background-position: 0 64.049587%; +} +.flag-ng { + background-position: 0 64.46281%; +} +.flag-ni { + background-position: 0 64.876033%; +} +.flag-nl { + background-position: 0 65.289256%; +} +.flag-no { + background-position: 0 65.702479%; +} +.flag-np { + background-position: 0 66.115702%; +} +.flag-nr { + background-position: 0 66.528926%; +} +.flag-nu { + background-position: 0 66.942149%; +} +.flag-nz { + background-position: 0 67.355372%; +} +.flag-om { + background-position: 0 67.768595%; +} +.flag-pa { + background-position: 0 68.181818%; +} +.flag-pe { + background-position: 0 68.595041%; +} +.flag-pf { + background-position: 0 69.008264%; +} +.flag-pg { + background-position: 0 69.421488%; +} +.flag-ph { + background-position: 0 69.834711%; +} +.flag-pk { + background-position: 0 70.247934%; +} +.flag-pl { + background-position: 0 70.661157%; +} +.flag-pm { + background-position: 0 71.07438%; +} +.flag-pn { + background-position: 0 71.487603%; +} +.flag-pr { + background-position: 0 71.900826%; +} +.flag-pt { + background-position: 0 72.31405%; +} +.flag-pw { + background-position: 0 72.727273%; +} +.flag-py { + background-position: 0 73.140496%; +} +.flag-qa { + background-position: 0 73.553719%; +} +.flag-re { + background-position: 0 73.966942%; +} +.flag-ro { + background-position: 0 74.380165%; +} +.flag-rs { + background-position: 0 74.793388%; +} +.flag-ru { + background-position: 0 75.206612%; +} +.flag-rw { + background-position: 0 75.619835%; +} +.flag-sa { + background-position: 0 76.033058%; +} +.flag-sb { + background-position: 0 76.446281%; +} +.flag-sc { + background-position: 0 76.859504%; +} +.flag-sd { + background-position: 0 77.272727%; +} +.flag-se { + background-position: 0 77.68595%; +} +.flag-sg { + background-position: 0 78.099174%; +} +.flag-sh { + background-position: 0 78.512397%; +} +.flag-si { + background-position: 0 78.92562%; +} +.flag-sj { + background-position: 0 79.338843%; +} +.flag-sk { + background-position: 0 79.752066%; +} +.flag-sl { + background-position: 0 80.165289%; +} +.flag-sm { + background-position: 0 80.578512%; +} +.flag-sn { + background-position: 0 80.991736%; +} +.flag-so { + background-position: 0 81.404959%; +} +.flag-sr { + background-position: 0 81.818182%; +} +.flag-ss { + background-position: 0 82.231405%; +} +.flag-st { + background-position: 0 82.644628%; +} +.flag-sv { + background-position: 0 83.057851%; +} +.flag-sy { + background-position: 0 83.471074%; +} +.flag-sz { + background-position: 0 83.884298%; +} +.flag-tc { + background-position: 0 84.297521%; +} +.flag-td { + background-position: 0 84.710744%; +} +.flag-tf { + background-position: 0 85.123967%; +} +.flag-tg { + background-position: 0 85.53719%; +} +.flag-th { + background-position: 0 85.950413%; +} +.flag-tj { + background-position: 0 86.363636%; +} +.flag-tk { + background-position: 0 86.77686%; +} +.flag-tl { + background-position: 0 87.190083%; +} +.flag-tm { + background-position: 0 87.603306%; +} +.flag-tn { + background-position: 0 88.016529%; +} +.flag-to { + background-position: 0 88.429752%; +} +.flag-tp { + background-position: 0 88.842975%; +} +.flag-tr { + background-position: 0 89.256198%; +} +.flag-tt { + background-position: 0 89.669421%; +} +.flag-tv { + background-position: 0 90.082645%; +} +.flag-tw { + background-position: 0 90.495868%; +} +.flag-ty { + background-position: 0 90.909091%; +} +.flag-tz { + background-position: 0 91.322314%; +} +.flag-ua { + background-position: 0 91.735537%; +} +.flag-ug { + background-position: 0 92.14876%; +} +.flag-gb, +.flag-uk { + background-position: 0 92.561983%; +} +.flag-um { + background-position: 0 92.975207%; +} +.flag-us { + background-position: 0 93.38843%; +} +.flag-uy { + background-position: 0 93.801653%; +} +.flag-uz { + background-position: 0 94.214876%; +} +.flag-va { + background-position: 0 94.628099%; +} +.flag-vc { + background-position: 0 95.041322%; +} +.flag-ve { + background-position: 0 95.454545%; +} +.flag-vg { + background-position: 0 95.867769%; +} +.flag-vi { + background-position: 0 96.280992%; +} +.flag-vn { + background-position: 0 96.694215%; +} +.flag-vu { + background-position: 0 97.107438%; +} +.flag-wf { + background-position: 0 97.520661%; +} +.flag-ws { + background-position: 0 97.933884%; +} +.flag-ye { + background-position: 0 98.347107%; +} +.flag-za { + background-position: 0 98.760331%; +} +.flag-zm { + background-position: 0 99.173554%; +} +.flag-zr { + background-position: 0 99.586777%; +} +.flag-zw { + background-position: 0 100%; +} diff --git a/web-ui/web-react/src/assets/layout/_overrides.scss b/web-ui/web-react/src/assets/layout/_overrides.scss index 850b92b1..e6b931c3 100644 --- a/web-ui/web-react/src/assets/layout/_overrides.scss +++ b/web-ui/web-react/src/assets/layout/_overrides.scss @@ -1 +1 @@ -//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future \ No newline at end of file +//Suggested location to add your overrides so that migration would be easy by just updating the SASS folder in the future diff --git a/web-ui/web-react/src/assets/layout/_variables.scss b/web-ui/web-react/src/assets/layout/_variables.scss index 3886613d..54a65a75 100644 --- a/web-ui/web-react/src/assets/layout/_variables.scss +++ b/web-ui/web-react/src/assets/layout/_variables.scss @@ -1,4 +1,4 @@ /* General */ -$fontSize:10px; -$borderRadius:12px; -$transitionDuration:.2s; +$fontSize: 10px; +$borderRadius: 12px; +$transitionDuration: 0.2s; diff --git a/web-ui/web-react/src/assets/layout/layout.scss b/web-ui/web-react/src/assets/layout/layout.scss index 5980a637..772e4ee7 100644 --- a/web-ui/web-react/src/assets/layout/layout.scss +++ b/web-ui/web-react/src/assets/layout/layout.scss @@ -1,3 +1,3 @@ -@import "./_variables"; -@import "./sass/_layout"; -@import "./_overrides"; \ No newline at end of file +@import './_variables'; +@import './sass/_layout'; +@import './_overrides'; diff --git a/web-ui/web-react/src/assets/layout/sass/_config.scss b/web-ui/web-react/src/assets/layout/sass/_config.scss index 76bf2a28..466271c3 100644 --- a/web-ui/web-react/src/assets/layout/sass/_config.scss +++ b/web-ui/web-react/src/assets/layout/sass/_config.scss @@ -1,103 +1,104 @@ .layout-config { - position: fixed; - top: 0; - padding: 0; - right: 0; - width: 20rem; - z-index: 999; + position: fixed; + top: 0; + padding: 0; + right: 0; + width: 20rem; + z-index: 999; + height: 100vh; + transform: translateX(100%); + transition: transform $transitionDuration; + backface-visibility: hidden; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08) !important; + color: var(--text-color); + background-color: var(--surface-overlay); + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + + &.layout-config-active { + transform: translateX(0); + } + + .layout-config-button { + display: block; + position: absolute; + width: 52px; + height: 52px; + line-height: 52px; + background-color: var(--primary-color); + color: var(--primary-color-text); + text-align: center; + top: 230px; + left: -52px; + z-index: -1; + overflow: hidden; + cursor: pointer; + border-top-left-radius: $borderRadius; + border-bottom-left-radius: $borderRadius; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + transition: background-color $transitionDuration; + + i { + font-size: 32px; + line-height: inherit; + cursor: pointer; + transform: rotate(0deg); + transition: color $transitionDuration, transform 1s; + } + } + + .layout-config-close { + position: absolute; + right: 1rem; + top: 1rem; + z-index: 1; + } + + .layout-config-content { + position: relative; + overflow: auto; height: 100vh; - transform: translateX(100%); - transition: transform $transitionDuration; - backface-visibility: hidden; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) !important; - color: var(--text-color); - background-color: var(--surface-overlay); - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; + padding: 2rem; + } - &.layout-config-active { - transform: translateX(0); + .config-scale { + display: flex; + align-items: center; + margin: 1rem 0 2rem 0; + + .p-button { + margin-right: 0.5rem; } - .layout-config-button { - display: block; - position: absolute; - width: 52px; - height: 52px; - line-height: 52px; - background-color: var(--primary-color); - color: var(--primary-color-text); - text-align: center; - top: 230px; - left: -52px; - z-index: -1; - overflow: hidden; - cursor: pointer; - border-top-left-radius: $borderRadius; - border-bottom-left-radius: $borderRadius; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - transition: background-color $transitionDuration; + i { + margin-right: 0.5rem; + font-size: 0.75rem; + color: var(--text-color-secondary); - i { - font-size: 32px; - line-height: inherit; - cursor: pointer; - transform: rotate(0deg); - transition: color $transitionDuration, transform 1s; - } + &.scale-active { + font-size: 1.25rem; + color: var(--primary-color); + } + } + } + + .free-themes { + img { + width: 2rem; + border-radius: 4px; + transition: transform 0.2s; + display: block; + + &:hover { + transform: scale(1.1); + } } - .layout-config-close { - position: absolute; - right: 1rem; - top: 1rem; - z-index: 1; - } - - .layout-config-content { - position: relative; - overflow: auto; - height: 100vh; - padding: 2rem; - } - - .config-scale { - display: flex; - align-items: center; - margin: 1rem 0 2rem 0; - - .p-button { - margin-right: .5rem; - } - - i { - margin-right: .5rem; - font-size: .75rem; - color: var(--text-color-secondary); - - &.scale-active { - font-size: 1.25rem; - color: var(--primary-color); - } - } - } - - .free-themes { - img { - width: 2rem; - border-radius: 4px; - transition: transform .2s; - display: block; - - &:hover { - transform: scale(1.1); - } - } - - span { - font-size: .75rem; - margin-top: .25rem; - } + span { + font-size: 0.75rem; + margin-top: 0.25rem; } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_content.scss b/web-ui/web-react/src/assets/layout/sass/_content.scss index 2c40e1da..5bf68c26 100644 --- a/web-ui/web-react/src/assets/layout/sass/_content.scss +++ b/web-ui/web-react/src/assets/layout/sass/_content.scss @@ -1,12 +1,12 @@ .layout-main-container { - display: flex; - flex-direction: column; - min-height: 100vh; - justify-content: space-between; - padding: 7rem 2rem 2rem 4rem; - transition: margin-left $transitionDuration; + display: flex; + flex-direction: column; + min-height: 100vh; + justify-content: space-between; + padding: 7rem 2rem 2rem 4rem; + transition: margin-left $transitionDuration; } .layout-main { - flex: 1 1 auto; + flex: 1 1 auto; } diff --git a/web-ui/web-react/src/assets/layout/sass/_footer.scss b/web-ui/web-react/src/assets/layout/sass/_footer.scss index 367d3128..4b988613 100644 --- a/web-ui/web-react/src/assets/layout/sass/_footer.scss +++ b/web-ui/web-react/src/assets/layout/sass/_footer.scss @@ -1,8 +1,8 @@ .layout-footer { - transition: margin-left $transitionDuration; - display: flex; - align-items: center; - justify-content: center; - padding-top: 1rem; - border-top: 1px solid var(--surface-border); + transition: margin-left $transitionDuration; + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + border-top: 1px solid var(--surface-border); } diff --git a/web-ui/web-react/src/assets/layout/sass/_layout.scss b/web-ui/web-react/src/assets/layout/sass/_layout.scss index ec73f06a..908c2f42 100644 --- a/web-ui/web-react/src/assets/layout/sass/_layout.scss +++ b/web-ui/web-react/src/assets/layout/sass/_layout.scss @@ -1,11 +1,11 @@ -@import "./_mixins"; -@import "./_splash"; -@import "./_main"; -@import "./_topbar"; -@import "./_menu"; -@import "./_config"; -@import "./_content"; -@import "./_footer"; -@import "./_responsive"; -@import "./_utils"; -@import "./_typography"; +@import './_mixins'; +@import './_splash'; +@import './_main'; +@import './_topbar'; +@import './_menu'; +@import './_config'; +@import './_content'; +@import './_footer'; +@import './_responsive'; +@import './_utils'; +@import './_typography'; diff --git a/web-ui/web-react/src/assets/layout/sass/_main.scss b/web-ui/web-react/src/assets/layout/sass/_main.scss index 6edf0076..fa3adfdf 100644 --- a/web-ui/web-react/src/assets/layout/sass/_main.scss +++ b/web-ui/web-react/src/assets/layout/sass/_main.scss @@ -1,28 +1,29 @@ * { - box-sizing: border-box; + box-sizing: border-box; } html { - height: 100%; - font-size: $fontSize; + height: 100%; + font-size: $fontSize; } body { - font-family: var(--font-family); - color: var(--text-color); - background-color: var(--surface-ground); - margin: 0; - padding: 0; - min-height: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: var(--font-family); + color: var(--text-color); + background-color: var(--surface-ground); + margin: 0; + padding: 0; + min-height: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -a, button { - text-decoration: none; - color: var(--primary-color); +a, +button { + text-decoration: none; + color: var(--primary-color); } .layout-theme-light { - background-color: #edf1f5; + background-color: #edf1f5; } diff --git a/web-ui/web-react/src/assets/layout/sass/_menu.scss b/web-ui/web-react/src/assets/layout/sass/_menu.scss index a7bff896..55e7174f 100644 --- a/web-ui/web-react/src/assets/layout/sass/_menu.scss +++ b/web-ui/web-react/src/assets/layout/sass/_menu.scss @@ -1,120 +1,121 @@ .layout-sidebar { - position: fixed; - width: 300px; - height: calc(100vh - 9rem); - z-index: 999; - overflow-y: auto; - user-select: none; - top: 7rem; - left: 2rem; - transition: transform $transitionDuration, left $transitionDuration; - background-color: var(--surface-overlay); - border-radius: 12px; - padding: 1.5rem; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) + position: fixed; + width: 300px; + height: calc(100vh - 9rem); + z-index: 999; + overflow-y: auto; + user-select: none; + top: 7rem; + left: 2rem; + transition: transform $transitionDuration, left $transitionDuration; + background-color: var(--surface-overlay); + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); } .layout-menu { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; - li { - &.layout-menuitem-category { - margin-top: .75rem; + li { + &.layout-menuitem-category { + margin-top: 0.75rem; - &:first-child { - margin-top: 0; - } - } - - .layout-menuitem-root-text { - text-transform: uppercase; - color:var(--surface-900); - font-weight: 600; - margin-bottom: .5rem; - font-size: .875rem; - } - - a { - cursor: pointer; - text-decoration: none; - display: flex; - align-items: center; - color:var(--text-color); - transition: color $transitionDuration; - border-radius: $borderRadius; - padding: .75rem 1rem; - transition: background-color .15s; - - span { - margin-left: 0.5rem; - } - - .menuitem-toggle-icon { - margin-left: auto; - } - - &:focus { - @include focused-inset(); - } - - &:hover { - background-color: var(--surface-hover); - } - - &.router-link-exact-active { - font-weight: 700; - color: var(--primary-color); - } - - .p-badge { - margin-left: auto; - } - } - - &.active-menuitem { - > a { - .menuitem-toggle-icon { - &:before { - content: '\e933'; - } - } - } - } - - ul { - list-style-type: none; - margin: 0; - padding: 0; - - &.layout-submenu-wrapper-enter { - max-height: 0; - } - - &.layout-submenu-wrapper-enter-active { - overflow: hidden; - max-height: 1000px; - transition: max-height 1s ease-in-out; - } - - &.layout-submenu-wrapper-enter-done { - transform: none; - } - - &.layout-submenu-wrapper-exit { - max-height: 1000px; - } - - &.layout-submenu-wrapper-exit-active { - overflow: hidden; - max-height: 0; - transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1); - } - - ul { - padding-left: 1rem; - } - } + &:first-child { + margin-top: 0; + } } + + .layout-menuitem-root-text { + text-transform: uppercase; + color: var(--surface-900); + font-weight: 600; + margin-bottom: 0.5rem; + font-size: 0.875rem; + } + + a { + cursor: pointer; + text-decoration: none; + display: flex; + align-items: center; + color: var(--text-color); + transition: color $transitionDuration; + border-radius: $borderRadius; + padding: 0.75rem 1rem; + transition: background-color 0.15s; + + span { + margin-left: 0.5rem; + } + + .menuitem-toggle-icon { + margin-left: auto; + } + + &:focus { + @include focused-inset(); + } + + &:hover { + background-color: var(--surface-hover); + } + + &.router-link-exact-active { + font-weight: 700; + color: var(--primary-color); + } + + .p-badge { + margin-left: auto; + } + } + + &.active-menuitem { + > a { + .menuitem-toggle-icon { + &:before { + content: '\e933'; + } + } + } + } + + ul { + list-style-type: none; + margin: 0; + padding: 0; + + &.layout-submenu-wrapper-enter { + max-height: 0; + } + + &.layout-submenu-wrapper-enter-active { + overflow: hidden; + max-height: 1000px; + transition: max-height 1s ease-in-out; + } + + &.layout-submenu-wrapper-enter-done { + transform: none; + } + + &.layout-submenu-wrapper-exit { + max-height: 1000px; + } + + &.layout-submenu-wrapper-exit-active { + overflow: hidden; + max-height: 0; + transition: max-height 0.45s cubic-bezier(0.86, 0, 0.07, 1); + } + + ul { + padding-left: 1rem; + } + } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_mixins.scss b/web-ui/web-react/src/assets/layout/sass/_mixins.scss index ec26860a..65e74e5f 100644 --- a/web-ui/web-react/src/assets/layout/sass/_mixins.scss +++ b/web-ui/web-react/src/assets/layout/sass/_mixins.scss @@ -1,13 +1,13 @@ @mixin focused() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: var(--focus-ring); + outline: 0 none; + outline-offset: 0; + transition: box-shadow 0.2s; + box-shadow: var(--focus-ring); } @mixin focused-inset() { - outline: 0 none; - outline-offset: 0; - transition: box-shadow .2s; - box-shadow: inset var(--focus-ring); + outline: 0 none; + outline-offset: 0; + transition: box-shadow 0.2s; + box-shadow: inset var(--focus-ring); } diff --git a/web-ui/web-react/src/assets/layout/sass/_responsive.scss b/web-ui/web-react/src/assets/layout/sass/_responsive.scss index d94d09c8..fc470cd2 100644 --- a/web-ui/web-react/src/assets/layout/sass/_responsive.scss +++ b/web-ui/web-react/src/assets/layout/sass/_responsive.scss @@ -1,89 +1,89 @@ @media (min-width: 992px) { - .layout-wrapper { - &.layout-overlay { - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } + .layout-wrapper { + &.layout-overlay { + .layout-main-container { + margin-left: 0; + padding-left: 2rem; + } - .layout-sidebar { - transform: translateX(-100%); - left: 0; - top: 0; - height: 100vh; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + .layout-sidebar { + transform: translateX(-100%); + left: 0; + top: 0; + height: 100vh; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } - &.layout-overlay-sidebar-active { - .layout-sidebar { - transform: translateX(0); - } - } - } - - &.layout-static { - .layout-main-container { - margin-left: 300px; - } - - &.layout-static-sidebar-inactive { - .layout-sidebar { - transform: translateX(-100%); - left: 0; - } - - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } - } - } - - .layout-mask { - display: none; + &.layout-overlay-sidebar-active { + .layout-sidebar { + transform: translateX(0); } + } } + + &.layout-static { + .layout-main-container { + margin-left: 300px; + } + + &.layout-static-sidebar-inactive { + .layout-sidebar { + transform: translateX(-100%); + left: 0; + } + + .layout-main-container { + margin-left: 0; + padding-left: 2rem; + } + } + } + + .layout-mask { + display: none; + } + } } @media (max-width: 991px) { - .layout-wrapper { - .layout-main-container { - margin-left: 0; - padding-left: 2rem; - } - - .layout-sidebar { - transform: translateX(-100%); - left: 0; - top: 0; - height: 100vh; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .layout-mask { - z-index: 998; - background-color: var(--mask-bg); - - &.layout-mask-enter-from, - &.layout-mask-leave-to { - background-color: transparent; - } - } - - &.layout-mobile-sidebar-active { - .layout-sidebar { - transform: translateX(0); - } - - .layout-mask { - display: block; - } - } + .layout-wrapper { + .layout-main-container { + margin-left: 0; + padding-left: 2rem; } - .body-overflow-hidden { - overflow: hidden; + .layout-sidebar { + transform: translateX(-100%); + left: 0; + top: 0; + height: 100vh; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + + .layout-mask { + z-index: 998; + background-color: var(--mask-bg); + + &.layout-mask-enter-from, + &.layout-mask-leave-to { + background-color: transparent; + } + } + + &.layout-mobile-sidebar-active { + .layout-sidebar { + transform: translateX(0); + } + + .layout-mask { + display: block; + } + } + } + + .body-overflow-hidden { + overflow: hidden; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_splash.scss b/web-ui/web-react/src/assets/layout/sass/_splash.scss index a8141044..f3ff3e7e 100644 --- a/web-ui/web-react/src/assets/layout/sass/_splash.scss +++ b/web-ui/web-react/src/assets/layout/sass/_splash.scss @@ -1,47 +1,48 @@ .preloader { - position: fixed; - z-index: 999999; - background: #edf1f5; - width: 100%; - height: 100%; + position: fixed; + z-index: 999999; + background: #edf1f5; + width: 100%; + height: 100%; } .preloader-content { - border: 0 solid transparent; - border-radius: 50%; - width: 150px; - height: 150px; - position: absolute; - top: calc(50vh - 75px); - left: calc(50vw - 75px); + border: 0 solid transparent; + border-radius: 50%; + width: 150px; + height: 150px; + position: absolute; + top: calc(50vh - 75px); + left: calc(50vw - 75px); } -.preloader-content:before, .preloader-content:after{ - content: ''; - border: 1em solid var(--primary-color); - border-radius: 50%; - width: inherit; - height: inherit; - position: absolute; - top: 0; - left: 0; - animation: loader 2s linear infinite; +.preloader-content:before, +.preloader-content:after { + content: ''; + border: 1em solid var(--primary-color); + border-radius: 50%; + width: inherit; + height: inherit; + position: absolute; + top: 0; + left: 0; + animation: loader 2s linear infinite; + opacity: 0; +} + +.preloader-content:before { + animation-delay: 0.5s; +} + +@keyframes loader { + 0% { + transform: scale(0); opacity: 0; -} - -.preloader-content:before{ - animation-delay: 0.5s; -} - -@keyframes loader{ - 0%{ - transform: scale(0); - opacity: 0; - } - 50%{ - opacity: 1; - } - 100%{ - transform: scale(1); - opacity: 0; - } + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_topbar.scss b/web-ui/web-react/src/assets/layout/sass/_topbar.scss index 79402366..3984dd7d 100644 --- a/web-ui/web-react/src/assets/layout/sass/_topbar.scss +++ b/web-ui/web-react/src/assets/layout/sass/_topbar.scss @@ -1,149 +1,151 @@ .layout-topbar { - position: fixed; - height: 5rem; - z-index: 997; - left: 0; - top: 0; - width: 100%; - padding: 0 2rem; - background-color: var(--surface-card); - transition: left $transitionDuration; + position: fixed; + height: 5rem; + z-index: 997; + left: 0; + top: 0; + width: 100%; + padding: 0 2rem; + background-color: var(--surface-card); + transition: left $transitionDuration; + display: flex; + align-items: center; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08); + + .layout-topbar-logo { display: flex; align-items: center; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); + color: var(--surface-900); + font-size: 1.5rem; + font-weight: 500; + width: 300px; + border-radius: 12px; - .layout-topbar-logo { - display: flex; - align-items: center; - color: var(--surface-900); - font-size: 1.5rem; - font-weight: 500; - width: 300px; - border-radius: 12px; - - img { - height: 2.5rem; - margin-right: .5rem; - } - - &:focus { - @include focused(); - } + img { + height: 2.5rem; + margin-right: 0.5rem; } + &:focus { + @include focused(); + } + } + + .layout-topbar-button { + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + color: var(--text-color-secondary); + border-radius: 50%; + width: 3rem; + height: 3rem; + cursor: pointer; + transition: background-color $transitionDuration; + + &:hover { + color: var(--text-color); + background-color: var(--surface-hover); + } + + &:focus { + @include focused(); + } + + i { + font-size: 1.5rem; + } + + span { + font-size: 1rem; + display: none; + } + } + + .layout-menu-button { + margin-left: 2rem; + } + + .layout-topbar-menu-button { + display: none; + + i { + font-size: 1.25rem; + } + } + + .layout-topbar-menu { + margin: 0 0 0 auto; + padding: 0; + list-style: none; + display: flex; + .layout-topbar-button { - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - color: var(--text-color-secondary); - border-radius: 50%; - width: 3rem; - height: 3rem; - cursor: pointer; - transition: background-color $transitionDuration; - - &:hover { - color: var(--text-color); - background-color: var(--surface-hover); - } - - &:focus { - @include focused(); - } - - i { - font-size: 1.5rem; - } - - span { - font-size: 1rem; - display: none; - } - } - - .layout-menu-button { - margin-left: 2rem; - } - - .layout-topbar-menu-button { - display: none; - - i { - font-size: 1.25rem; - } - } - - .layout-topbar-menu { - margin: 0 0 0 auto; - padding: 0; - list-style: none; - display: flex; - - .layout-topbar-button { - margin-left: 1rem; - } + margin-left: 1rem; } + } } @media (max-width: 991px) { - .layout-topbar { - justify-content: space-between; + .layout-topbar { + justify-content: space-between; - .layout-topbar-logo { - width: auto; - order: 2; - } - - .layout-menu-button { - margin-left: 0; - order: 1; - } - - .layout-topbar-menu-button { - display: inline-flex; - margin-left: 0; - order: 3; - } - - .layout-topbar-menu { - margin-left: 0; - position: absolute; - flex-direction: column; - background-color: var(--surface-overlay); - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08); - border-radius: 12px; - padding: 1rem; - right: 2rem; - top: 5rem; - min-width: 15rem; - display: none; - -webkit-animation: scalein 0.15s linear; - animation: scalein 0.15s linear; - - &.layout-topbar-menu-mobile-active { - display: block - } - - .layout-topbar-button { - margin-left: 0; - display: flex; - width: 100%; - height: auto; - justify-content: flex-start; - border-radius: 12px; - padding: 1rem; - - i { - font-size: 1rem; - margin-right: .5rem; - } - - span { - font-weight: medium; - display: block; - } - } - } + .layout-topbar-logo { + width: auto; + order: 2; } + + .layout-menu-button { + margin-left: 0; + order: 1; + } + + .layout-topbar-menu-button { + display: inline-flex; + margin-left: 0; + order: 3; + } + + .layout-topbar-menu { + margin-left: 0; + position: absolute; + flex-direction: column; + background-color: var(--surface-overlay); + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), + 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08); + border-radius: 12px; + padding: 1rem; + right: 2rem; + top: 5rem; + min-width: 15rem; + display: none; + -webkit-animation: scalein 0.15s linear; + animation: scalein 0.15s linear; + + &.layout-topbar-menu-mobile-active { + display: block; + } + + .layout-topbar-button { + margin-left: 0; + display: flex; + width: 100%; + height: auto; + justify-content: flex-start; + border-radius: 12px; + padding: 1rem; + + i { + font-size: 1rem; + margin-right: 0.5rem; + } + + span { + font-weight: medium; + display: block; + } + } + } + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_typography.scss b/web-ui/web-react/src/assets/layout/sass/_typography.scss index 5cd89d25..3cb2d648 100644 --- a/web-ui/web-react/src/assets/layout/sass/_typography.scss +++ b/web-ui/web-react/src/assets/layout/sass/_typography.scss @@ -1,63 +1,68 @@ -h1, h2, h3, h4, h5, h6 { - margin: 1.5rem 0 1rem 0; - font-family: inherit; - font-weight: 500; - line-height: 1.2; - color: inherit; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1.5rem 0 1rem 0; + font-family: inherit; + font-weight: 500; + line-height: 1.2; + color: inherit; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } } h1 { - font-size: 2.5rem; + font-size: 2.5rem; } h2 { - font-size: 2rem; + font-size: 2rem; } h3 { - font-size: 1.75rem; + font-size: 1.75rem; } h4 { - font-size: 1.5rem; + font-size: 1.5rem; } h5 { - font-size: 1.25rem; + font-size: 1.25rem; } h6 { - font-size: 1rem; + font-size: 1rem; } mark { - background: #FFF8E1; - padding: .25rem .4rem; - border-radius: $borderRadius; - font-family: monospace; + background: #fff8e1; + padding: 0.25rem 0.4rem; + border-radius: $borderRadius; + font-family: monospace; } blockquote { - margin: 1rem 0; - padding: 0 2rem; - border-left: 4px solid #90A4AE; + margin: 1rem 0; + padding: 0 2rem; + border-left: 4px solid #90a4ae; } hr { - border-top: solid var(--surface-border); - border-width: 1px 0 0 0; - margin: 1rem 0; + border-top: solid var(--surface-border); + border-width: 1px 0 0 0; + margin: 1rem 0; } p { - margin: 0 0 1rem 0; - line-height: 1.5; + margin: 0 0 1rem 0; + line-height: 1.5; - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; + } } diff --git a/web-ui/web-react/src/assets/layout/sass/_utils.scss b/web-ui/web-react/src/assets/layout/sass/_utils.scss index 93bdb6c9..49ce2848 100644 --- a/web-ui/web-react/src/assets/layout/sass/_utils.scss +++ b/web-ui/web-react/src/assets/layout/sass/_utils.scss @@ -1,11 +1,12 @@ .card { - background-color: var(--surface-card); - padding: 1.5rem; - margin-bottom: 1rem; - border-radius: $borderRadius; - box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08) !important; + background-color: var(--surface-card); + padding: 1.5rem; + margin-bottom: 1rem; + border-radius: $borderRadius; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05), + 0px 1px 4px rgba(0, 0, 0, 0.08) !important; - &.card-w-title { - padding-bottom: 2rem; - } + &.card-w-title { + padding-bottom: 2rem; + } } diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js index 06416d5d..c1ec59c4 100644 --- a/web-ui/web-react/src/components/AdministradoresComunidad.js +++ b/web-ui/web-react/src/components/AdministradoresComunidad.js @@ -6,7 +6,7 @@ import { Column } from 'primereact/column'; import { Toast } from 'primereact/toast'; import { Dialog } from 'primereact/dialog'; import { Toolbar } from 'primereact/toolbar'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons'; import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; import { faAt } from '@fortawesome/free-solid-svg-icons'; @@ -14,74 +14,84 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; import { faHomeAlt } from '@fortawesome/free-solid-svg-icons'; - const AdministradoresComunidad = () => { + const [listaAdmins, setListaAdmins] = useState([]); + const [listaAdminComunidad, setListaAdminComunidad] = useState([]); + const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); + const [selectedAdminsCommunities, setSelectedAdminsCommunities] = + useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = + useState(false); + const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = + useState(false); + const toast = useRef(null); + const dt = useRef(null); - const [listaAdmins, setListaAdmins] = useState([]); - const [listaAdminComunidad, setListaAdminComunidad] = useState([]); - const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); - const [selectedAdminsCommunities, setSelectedAdminsCommunities] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = useState(false); - const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = useState(false); - const toast = useRef(null); - const dt = useRef(null); + let emptyAdminCommunity = { + _id: null, + dni: '', + name: '', + last_name: '', + email: '', + phone: '', + password: '', + community_id: '', + community_name: '', + user_type: '2', + status: '', + }; - let emptyAdminCommunity = { - _id: null, - dni: '', - name: '', - last_name: '', - email: '', - phone: '', - password: '', - community_id: '', - community_name: '', - user_type: '2', - status: '' - }; + async function listaAdmin() { + let nombres = await fetch( + 'http://localhost:4000/user/findAdminComunidad/', + { method: 'GET' }, + ) + .then((response) => response.json()) + .then((data) => { + return Promise.all( + data.message.map((item) => { + //item.full_name returns the repositorie name + return fetch( + `http://localhost:4000/community/findCommunityName/${item.community_id}`, + { method: 'GET' }, + ) + .then((response2) => response2.json()) + .then((data) => { + console.log(data.message.name); + item.community_name = data.message.name; + return item; + }); + }), + ); + }) + .then((data) => setListaAdmins(data)); + } - async function listaAdmin() { - let nombres = await fetch('http://localhost:4000/user/findAdminComunidad/', { method: 'GET' }) - .then((response) => response.json()) - .then((data) => { - return Promise.all(data.message.map(item => { - //item.full_name returns the repositorie name - return fetch(`http://localhost:4000/community/findCommunityName/${item.community_id}`, { method: 'GET' }) - .then((response2) => response2.json()) - .then(data => { - console.log(data.message.name); - item.community_name = data.message.name - return item - }) - })); - }).then(data => setListaAdmins(data) - ); + async function nombreComunidad(id) { + let nombres = await fetch( + 'http://localhost:4000/community/findCommunityName/' + id, + { method: 'GET' }, + ); + let nombresRes = await nombres.json(); + return await nombresRes.message['name']; + } - } + async function setNameCommunities() { + Promise.all( + listaAdmins.map(async function (administrador) { + // await listaComunidades(administrador.community_id); + administrador.community_id = await listaAdminComunidad.name; + }), + ); + } - async function nombreComunidad(id) { - let nombres = await fetch('http://localhost:4000/community/findCommunityName/' + id, { method: 'GET' }); - let nombresRes = await nombres.json(); - return await nombresRes.message['name']; - } + useEffect(() => { + listaAdmin(); + }, []); - - async function setNameCommunities() { - Promise.all(listaAdmins.map(async function (administrador) { - // await listaComunidades(administrador.community_id); - administrador.community_id = await listaAdminComunidad.name; - })) - } - - useEffect(() => { - listaAdmin(); - - }, []) - - - const deleteAdminCommunity = () => { - /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { + const deleteAdminCommunity = () => { + /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { cache: 'no-cache', method: 'DELETE', headers: { @@ -113,16 +123,24 @@ const AdministradoresComunidad = () => { } ); */ - let _administrators = listaAdmins.filter(val => val._id !== adminCommunity._id); - setListaAdmins(_administrators); - setDeleteAdminCommunityDialog(false); - setAdminCommunity(emptyAdminCommunity); - toast.current.show({ severity: 'success', summary: 'Administrador de Comunidad Eliminada', life: 3000 }); - } + let _administrators = listaAdmins.filter( + (val) => val._id !== adminCommunity._id, + ); + setListaAdmins(_administrators); + setDeleteAdminCommunityDialog(false); + setAdminCommunity(emptyAdminCommunity); + toast.current.show({ + severity: 'success', + summary: 'Administrador de Comunidad Eliminada', + life: 3000, + }); + }; - const deleteSelectedAdminsCommunity = () => { - let _admins = listaAdmins.filter(val => !selectedAdminsCommunities.includes(val)); - /* selectedCommunities.map((item) => { + const deleteSelectedAdminsCommunity = () => { + let _admins = listaAdmins.filter( + (val) => !selectedAdminsCommunities.includes(val), + ); + /* selectedCommunities.map((item) => { fetch('http://localhost:4000/user/deleteCommunity/' + item._id, { cache: 'no-cache', method: 'DELETE', @@ -131,285 +149,515 @@ const AdministradoresComunidad = () => { } }) })*/ - setListaAdmins(_admins); - setDeleteAdminsCommunitiesDialog(false); - setSelectedAdminsCommunities(null); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores de Comunidad de Viviendas Eliminado', life: 3000 }); - } + setListaAdmins(_admins); + setDeleteAdminsCommunitiesDialog(false); + setSelectedAdminsCommunities(null); + toast.current.show({ + severity: 'success', + summary: 'Éxito', + detail: 'Administradores de Comunidad de Viviendas Eliminado', + life: 3000, + }); + }; + const hideDeleteAdminCommunityDialog = () => { + setDeleteAdminCommunityDialog(false); + }; + const hideDeleteAdminsCommunitysDialog = () => { + setDeleteAdminsCommunitiesDialog(false); + }; - const hideDeleteAdminCommunityDialog = () => { - setDeleteAdminCommunityDialog(false); - } - - const hideDeleteAdminsCommunitysDialog = () => { - setDeleteAdminsCommunitiesDialog(false); - } - - const confirmDeleteAdminCommunity = (adminCommunity) => { - setAdminCommunity(adminCommunity); - setDeleteAdminCommunityDialog(true); - } - - const confirmDeleteSelected = () => { - setDeleteAdminsCommunitiesDialog(true); - } - - const actionsAdminCommunity = (rowData) => { - return ( -
    -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - - - - +
    +
    + ); + }; + + const leftToolbarTemplate = () => { + return ( + +
    +
    - ) -} +     + ); + }; + + const rightToolbarTemplate = () => { + return ( + + + + + + + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(AdministradoresSistema, comparisonFn); diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js index 4dd54733..7fc4e7ad 100644 --- a/web-ui/web-react/src/components/ComunidadViviendas.js +++ b/web-ui/web-react/src/components/ComunidadViviendas.js @@ -8,255 +8,255 @@ import { Toast } from 'primereact/toast'; import classNames from 'classnames'; import { Dialog } from 'primereact/dialog'; import { Toolbar } from 'primereact/toolbar'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faHome } from '@fortawesome/free-solid-svg-icons'; import { faMapLocationDot } from '@fortawesome/free-solid-svg-icons'; import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; const Communities = () => { + let emptyCommunity = { + _id: null, + name: '', + province: provinciaId, + canton: cantonId, + district: districtId, + phone: '', + num_houses: 0, + status: 'activo', + date_entry: new Date(), + houses: [], + }; - let emptyCommunity = { - _id: null, - name: '', - province: provinciaId, - canton: cantonId, - district: districtId, - phone: '', - num_houses: 0, - status: 'activo', - date_entry: new Date(), - houses: [], - }; + const [communitiesList, setCommunitiesList] = useState([]); + const [community, setCommunity] = useState(emptyCommunity); + const [housesList, setHousesList] = useState([]); + const [provincesList, setProvincesList] = useState([]); + const [provinciaId, setProvinciaId] = useState(null); + const [cantonsList, setCantonsList] = useState([]); + const [cantonId, setCantonId] = useState(null); + const [districtsList, setDistrictsList] = useState([]); + const [districtId, setDistrictId] = useState(null); + const [codeHouses, setCodeHouses] = useState(''); + const [submitted, setSubmitted] = useState(false); + const [selectedCommunities, setSelectedCommunities] = useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false); + const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false); + const toast = useRef(null); + const dt = useRef(null); - const [communitiesList, setCommunitiesList] = useState([]); - const [community, setCommunity] = useState(emptyCommunity); + const p = provincesList.map((item) => ({ + label: item.name, + value: item.code, + })); - const [housesList, setHousesList] = useState([]); - const [provincesList, setProvincesList] = useState([]); - const [provinciaId, setProvinciaId] = useState(null); - const [cantonsList, setCantonsList] = useState([]); - const [cantonId, setCantonId] = useState(null); - const [districtsList, setDistrictsList] = useState([]); - const [districtId, setDistrictId] = useState(null); - const [codeHouses, setCodeHouses] = useState(''); - const [submitted, setSubmitted] = useState(false); - const [selectedCommunities, setSelectedCommunities] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteCommunityDialog, setDeleteCommunityDialog] = useState(false); - const [deleteCommunitiesDialog, setDeleteCommunitiesDialog] = useState(false); - const toast = useRef(null); - const dt = useRef(null); + const c = cantonsList.map((item) => ({ + label: item.name, + value: item.code, + parent: item.parentCode, + })); + const d = districtsList.map((item) => ({ + label: item.name, + value: item.code, + parent: item.parentCode, + })); + useEffect(() => { + fillProvinces(); + }, []); - const p = provincesList.map((item) => ({ - label: item.name, - value: item.code - })) + useEffect(() => { + fillCantons(); + }, [provinciaId]); + useEffect(() => { + fillDistricts(); + }, [cantonId]); - const c = cantonsList.map((item) => ({ - label: item.name, - value: item.code, - parent: item.parentCode - })) + async function getProvinces() { + const response = await fetch('assets/demo/data/provincias.json', { + method: 'GET', + }); + return await response.json(); + } - const d = districtsList.map((item) => ({ - label: item.name, - value: item.code, - parent: item.parentCode - })) + async function fillProvinces() { + const getP = await getProvinces(); + setProvincesList(await getP); + } + async function getCantons() { + const response = await fetch('assets/demo/data/cantones.json', { + method: 'GET', + }); + return await response.json(); + } + async function fillCantons() { + const resJson = await getCantons(); + const cantones = await resJson.filter(function (i, n) { + return i.parentCode === provinciaId; + }); + setCantonsList(await cantones); + } - useEffect(() => { - fillProvinces(); + async function getDistricts() { + const response = await fetch('assets/demo/data/distritos.json', { + method: 'GET', + }); + return await response.json(); + } - }, []) + async function fillDistricts() { + const resJson = await getDistricts(); + const districts = await resJson.filter(function (i, n) { + return i.parentCode === cantonId; + }); + setDistrictsList(await districts); + } - useEffect(() => { - fillCantons(); - }, [provinciaId]) + const handleProvinces = (event) => { + const getprovinciaId = event.target.value; + setProvinciaId(getprovinciaId); + }; - useEffect(() => { - fillDistricts(); - }, [cantonId]) + const handleCanton = (event) => { + const getCantonId = event.target.value; + setCantonId(getCantonId); + }; - async function getProvinces() { - const response = await fetch('assets/demo/data/provincias.json', { method: 'GET' }); - return await response.json(); - } + const handleDistrict = (event) => { + const getDistrictId = event.target.value; + setDistrictId(getDistrictId); + }; - async function fillProvinces() { - const getP = await getProvinces(); - setProvincesList(await getP); - } + const handleCodeHouses = (event) => { + const getcodehouse = event.target.value; + setCodeHouses(getcodehouse); + }; - async function getCantons() { - const response = await fetch('assets/demo/data/cantones.json', { method: 'GET' }); - return await response.json(); - } + async function getCommunites() { + let response = await fetch( + 'http://localhost:4000/community/allCommunities', + { method: 'GET' }, + ); + let resJson = await response.json(); + let pList = await getProvinces(); + let cList = await getCantons(); + let dList = await getDistricts(); + await resJson.message.map((item) => { + item.province = pList.find((p) => p.code === item.province).name; + item.canton = cList.find((p) => p.code === item.canton).name; + item.district = dList.find((p) => p.code === item.district).name; + if (!item.id_admin) { + item.name_admin = 'Sin Administrador'; + } + }); + setCommunitiesList(await resJson.message); + } - async function fillCantons() { - const resJson = await getCantons(); - const cantones = await resJson.filter(function (i, n) { - return i.parentCode === provinciaId; + useEffect(() => { + getCommunites(); + }, []); + + const saveCommunity = () => { + if ( + community.name && + community.num_houses > 0 && + provinciaId && + cantonId && + districtId && + community.phone + ) { + let _communities = [...communitiesList]; + let _community = { ...community }; + _community.province = provinciaId; + _community.canton = cantonId; + _community.district = districtId; + + for (let i = 0; i < _community.num_houses; i++) { + _community.houses.push({ + number_house: codeHouses + (i + 1), }); - setCantonsList(await cantones); - } - - async function getDistricts() { - const response = await fetch('assets/demo/data/distritos.json', { method: 'GET' }); - return await response.json(); - } - - async function fillDistricts() { - const resJson = await getDistricts(); - const districts = await resJson.filter(function (i, n) { - return i.parentCode === cantonId; - }); - setDistrictsList(await districts); - } - - const handleProvinces = (event) => { - const getprovinciaId = event.target.value; - setProvinciaId(getprovinciaId); - } - - const handleCanton = (event) => { - const getCantonId = event.target.value; - setCantonId(getCantonId); - } - - const handleDistrict = (event) => { - const getDistrictId = event.target.value; - setDistrictId(getDistrictId); - } - - - const handleCodeHouses = (event) => { - const getcodehouse = event.target.value; - setCodeHouses(getcodehouse); - } - - async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); - let resJson = await response.json(); - let pList = await getProvinces(); - let cList = await getCantons(); - let dList = await getDistricts(); - await resJson.message.map((item) => { - item.province = pList.find(p => p.code === item.province).name - item.canton = cList.find(p => p.code === item.canton).name - item.district = dList.find(p => p.code === item.district).name - if (!item.id_admin) { - item.name_admin = "Sin Administrador" - } + } + // console.log(houses) + fetch('http://localhost:4000/community/createCommunity', { + cache: 'no-cache', + method: 'POST', + body: JSON.stringify(_community), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else return response.json(); }) - setCommunitiesList(await resJson.message); + .then(() => { + _community.province = provincesList.find( + (p) => p.code === _community.province, + ).name; + _community.canton = cantonsList.find( + (p) => p.code === _community.canton, + ).name; + _community.district = districtsList.find( + (p) => p.code === _community.district, + ).name; + + _communities.push(_community); + toast.current.show({ + severity: 'success', + summary: 'Registro exitoso', + detail: 'Comunidad de vivienda Creada', + life: 3000, + }); + + setCommunitiesList(_communities); + + setProvinciaId(''); + setCantonId(''); + setDistrictId(''); + setCodeHouses(''); + + setCommunity(emptyCommunity); + }) + .catch((err) => console.log('Ocurrió un error con el fetch', err)); + } else { + setSubmitted(true); } + }; - useEffect(() => { - getCommunites(); - }, []) + const onInputChange = (e, name) => { + const val = (e.target && e.target.value) || ''; + let _community = { ...community }; + _community[`${name}`] = val; + setCommunity(_community); + }; - const saveCommunity = () => { + const hideDeleteCommunityDialog = () => { + setDeleteCommunityDialog(false); + }; - if (community.name && community.num_houses > 0 && provinciaId && cantonId && districtId && community.phone) { - let _communities = [...communitiesList]; - let _community = { ...community }; - _community.province = provinciaId; - _community.canton = cantonId; - _community.district = districtId; + const hideDeleteCommunitiesDialog = () => { + setDeleteCommunitiesDialog(false); + }; + const confirmDeleteCommunity = (community) => { + setCommunity(community); + setDeleteCommunityDialog(true); + }; + const confirmDeleteSelected = () => { + setDeleteCommunitiesDialog(true); + }; - for (let i = 0; i < _community.num_houses; i++) { - _community.houses.push({ - number_house: codeHouses + (i + 1), - }) - } - // console.log(houses) - fetch('http://localhost:4000/community/createCommunity', { - cache: 'no-cache', - method: 'POST', - body: JSON.stringify(_community), - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then(() => { - - _community.province = provincesList.find(p => p.code === _community.province).name - _community.canton = cantonsList.find(p => p.code === _community.canton).name - _community.district = districtsList.find(p => p.code === _community.district).name - - _communities.push(_community); - toast.current.show({ severity: 'success', summary: 'Registro exitoso', detail: 'Comunidad de vivienda Creada', life: 3000 }); - - setCommunitiesList(_communities); - - - setProvinciaId(''); - setCantonId(''); - setDistrictId(''); - setCodeHouses(''); - - setCommunity(emptyCommunity); - - }) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); - - - } else { - setSubmitted(true); - - } - - } - - const onInputChange = (e, name) => { - const val = (e.target && e.target.value) || ''; - let _community = { ...community }; - _community[`${name}`] = val; - - setCommunity(_community); - } - - - const hideDeleteCommunityDialog = () => { - setDeleteCommunityDialog(false); - } - - const hideDeleteCommunitiesDialog = () => { - setDeleteCommunitiesDialog(false); - } - - const confirmDeleteCommunity = (community) => { - setCommunity(community); - setDeleteCommunityDialog(true); - } - - const confirmDeleteSelected = () => { - setDeleteCommunitiesDialog(true); - } - - const deleteCommunity = () => { - - /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { + const deleteCommunity = () => { + /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { cache: 'no-cache', method: 'DELETE', headers: { @@ -288,16 +288,23 @@ const Communities = () => { } ); */ - let _community = communitiesList.filter(val => val._id !== community._id); - setCommunitiesList(_community); - setDeleteCommunityDialog(false); - setCommunity(emptyCommunity); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidad de Viviendas Eliminada', life: 3000 }); - } + let _community = communitiesList.filter((val) => val._id !== community._id); + setCommunitiesList(_community); + setDeleteCommunityDialog(false); + setCommunity(emptyCommunity); + toast.current.show({ + severity: 'success', + summary: 'Éxito', + detail: 'Comunidad de Viviendas Eliminada', + life: 3000, + }); + }; - const deleteSelectedCommunities = () => { - let _communities = communitiesList.filter(val => !selectedCommunities.includes(val)); - /* selectedCommunities.map((item) => { + const deleteSelectedCommunities = () => { + let _communities = communitiesList.filter( + (val) => !selectedCommunities.includes(val), + ); + /* selectedCommunities.map((item) => { fetch('http://localhost:4000/user/deleteCommunity/' + item._id, { cache: 'no-cache', method: 'DELETE', @@ -306,246 +313,492 @@ const Communities = () => { } }) })*/ - setCommunitiesList(_communities); - setDeleteCommunitiesDialog(false); - setSelectedCommunities(null); - toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Comunidades de Viviendas Eliminadas', life: 3000 }); - } - - const actionsCommunity = (rowData) => { - return ( -
    -
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - - - - - + + +
    + + {selectedCommunities && ( + + ¿Está seguro eliminar los adminsitradores del sistema + seleccionados? + + )}
    - +     + + +
    +
    +
    Registro de comunidad de viviendas
    +
    +
    + +
    +
    + + + + onInputChange(e, 'name')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.name === '', + })} + /> +
    + {submitted && community.name === '' && ( + Nombre es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !provinciaId && ( + Provincia es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !cantonId && ( + Cantón es requirido. + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && !districtId && ( + Distrito es requirido. + )} +
    +
    +
    + +
    +
    + + + + onInputChange(e, 'phone')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.phone === '', + })} + /> +
    + {submitted && community.phone === '' && ( + + Número de teléfono es requirido. + + )} +
    +
    +
    + +
    +
    + + + + onInputChange(e, 'num_houses')} + required + autoFocus + className={classNames({ + 'p-invalid': submitted && community.num_houses < 1, + })} + /> +
    + {submitted && community.num_houses < 1 && ( + + Número de viviendas es requirido y debe ser mayor que 0. + + )} +
    +
    +
    + +
    +
    + + + + +
    + {submitted && codeHouses === '' && ( + + El código para las viviendas es requirido. + + )} +
    +
    +
    + +
    +
    +
    +
    + + ); +}; - - ) -} - -export default React.memo(Communities); \ No newline at end of file +export default React.memo(Communities); diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js index bc4ec2f8..836d8647 100644 --- a/web-ui/web-react/src/components/GuardasSeguridad.js +++ b/web-ui/web-react/src/components/GuardasSeguridad.js @@ -5,117 +5,136 @@ import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; const GuardasSeguridad = () => { - - const [pokemones,setPokemones]=useState([]); - const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134'); - async function fetchP(){ - let nombres=await fetch(urlFetch, {method:'GET'}); - let pokemonesRes= await nombres.json(); + const [pokemones, setPokemones] = useState([]); + const [urlFetch, setUrlFetch] = useState( + 'http://localhost:4000/user/findGuards/62be68215692582bbfd77134', + ); + async function fetchP() { + let nombres = await fetch(urlFetch, { method: 'GET' }); + let pokemonesRes = await nombres.json(); setPokemones(pokemonesRes.message); console.log(pokemones); - } - useEffect(()=>{ - fetchP(); - },[]) + } + useEffect(() => { + fetchP(); + }, []); - function registrarGuarda() { - var data = { - dni: document.getElementById('identificacion').value, - name: document.getElementById('nombre').value, - last_name: document.getElementById('apellidos').value, - email: document.getElementById('correo_electronico').value, - phone: document.getElementById('telefono').value, - password: document.getElementById('correo_electronico').value, - user_type: "4", //4 es guarda - status: "1", - community_id:"62be68215692582bbfd77134" - }; - var data2={ - dni: "98765", - name: "Danielito", - last_name: "Rodriguez", - email: "danirodriguez@gmail.com", - phone: 84664515, - password: "1203", - user_type: "2", - status: "4", - community_id:"62be68215692582bbfd77134" - } - console.log(data2); + function registrarGuarda() { + var data = { + dni: document.getElementById('identificacion').value, + name: document.getElementById('nombre').value, + last_name: document.getElementById('apellidos').value, + email: document.getElementById('correo_electronico').value, + phone: document.getElementById('telefono').value, + password: document.getElementById('correo_electronico').value, + user_type: '4', //4 es guarda + status: '1', + community_id: '62be68215692582bbfd77134', + }; + var data2 = { + dni: '98765', + name: 'Danielito', + last_name: 'Rodriguez', + email: 'danirodriguez@gmail.com', + phone: 84664515, + password: '1203', + user_type: '2', + status: '4', + community_id: '62be68215692582bbfd77134', + }; + console.log(data2); - fetch('http://localhost:4000/user/createGuard', { - cache: 'no-cache', - method: 'POST', - mode:'cors', - body: JSON.stringify(data2), - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then( - function (response) { - fetchP(); - } - ) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); - } + fetch('http://localhost:4000/user/createGuard', { + cache: 'no-cache', + method: 'POST', + mode: 'cors', + body: JSON.stringify(data2), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then(function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else return response.json(); + }) + .then(function (response) { + fetchP(); + }) + .catch((err) => console.log('Ocurrió un error con el fetch', err)); + } - return ( -
    -
    -
    -
    Guardas de seguridad
    - - - - - - - -
    -
    -
    -
    -
    Registro de un guarda de seguridad
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    -
    -
    + return ( +
    +
    +
    +
    Guardas de seguridad
    + + + + + + +
    +
    +
    +
    +
    Registro de un guarda de seguridad
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +
    + ); +}; - - ) -} - -export default React.memo(GuardasSeguridad); \ No newline at end of file +export default React.memo(GuardasSeguridad); diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js index 608a0a6b..280cf83a 100644 --- a/web-ui/web-react/src/components/Inquilinos.js +++ b/web-ui/web-react/src/components/Inquilinos.js @@ -1,27 +1,30 @@ import { Button } from 'primereact/button'; import { Dropdown } from 'primereact/dropdown'; -import { InputText } from 'primereact/inputtext' -import React, { useEffect, useState } from 'react' +import { InputText } from 'primereact/inputtext'; +import React, { useEffect, useState } from 'react'; const Inquilinos = () => { const [communitiesList, setCommunitiesList] = useState([]); - const communityIdList = communitiesList.map(community => community.id); + const communityIdList = communitiesList.map((community) => community.id); async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); + let response = await fetch( + 'http://localhost:4000/community/allCommunities', + { method: 'GET' }, + ); let list = await response.json(); setCommunitiesList(list.message); } useEffect(() => { getCommunites(); - }, []) + }, []); function registrarInquilino() { let data = { email: document.getElementById('correo_electronico').value, community_id: document.getElementById('numero_vivienda').value, user_type: '3', status: '1', - } + }; fetch('http://localhost:3000/api/createUser', { method: 'POST', @@ -32,11 +35,11 @@ const Inquilinos = () => { }, }).then((response) => { if (response.ok) { - alert('Inquilino registrado correctamente') + alert('Inquilino registrado correctamente'); } else { - alert('Error al registrar inquilino') + alert('Error al registrar inquilino'); } - }) + }); } return ( @@ -47,18 +50,26 @@ const Inquilinos = () => {
    - +
    - +
    -
    - ) -} + ); +}; -export default React.memo(Inquilinos); \ No newline at end of file +export default React.memo(Inquilinos); diff --git a/web-ui/web-react/src/components/LogIn.js b/web-ui/web-react/src/components/LogIn.js index 10c58bd6..22808d70 100644 --- a/web-ui/web-react/src/components/LogIn.js +++ b/web-ui/web-react/src/components/LogIn.js @@ -2,32 +2,29 @@ import React from 'react'; import { InputText } from 'primereact/inputtext'; const LogIn = () => { - - return ( -
    -
    -
    -
    Iniciar Sesión
    -
    -
    - - -
    -
    - - -
    - - {/* */} -
    -
    + return ( +
    +
    +
    +
    Iniciar Sesión
    +
    +
    + + +
    +
    + +
    -
    - ) -} -export default LogIn + {/* */} +
    +
    +
    +
    + ); +}; + +export default LogIn; /* image 1 */ - - diff --git a/web-ui/web-react/src/index.js b/web-ui/web-react/src/index.js index fb5e7a3f..9a5f6b56 100644 --- a/web-ui/web-react/src/index.js +++ b/web-ui/web-react/src/index.js @@ -3,19 +3,19 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; //import * as serviceWorker from './serviceWorker'; -import { HashRouter } from 'react-router-dom' +import { HashRouter } from 'react-router-dom'; import ScrollToTop from './ScrollToTop'; ReactDOM.render( - - - - - , - document.getElementById('root') + + + + + , + document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA -//serviceWorker.unregister(); \ No newline at end of file +//serviceWorker.unregister(); diff --git a/web-ui/web-react/src/pages/Crud.js b/web-ui/web-react/src/pages/Crud.js index cfe3081f..58e9780b 100644 --- a/web-ui/web-react/src/pages/Crud.js +++ b/web-ui/web-react/src/pages/Crud.js @@ -15,370 +15,623 @@ import { InputText } from 'primereact/inputtext'; import { ProductService } from '../service/ProductService'; const Crud = () => { - let emptyProduct = { - id: null, - name: '', - image: null, - description: '', - category: null, - price: 0, - quantity: 0, - rating: 0, - inventoryStatus: 'INSTOCK' - }; + let emptyProduct = { + id: null, + name: '', + image: null, + description: '', + category: null, + price: 0, + quantity: 0, + rating: 0, + inventoryStatus: 'INSTOCK', + }; - const [products, setProducts] = useState(null); - const [productDialog, setProductDialog] = useState(false); - const [deleteProductDialog, setDeleteProductDialog] = useState(false); - const [deleteProductsDialog, setDeleteProductsDialog] = useState(false); - const [product, setProduct] = useState(emptyProduct); - const [selectedProducts, setSelectedProducts] = useState(null); - const [submitted, setSubmitted] = useState(false); - const [globalFilter, setGlobalFilter] = useState(null); - const toast = useRef(null); - const dt = useRef(null); + const [products, setProducts] = useState(null); + const [productDialog, setProductDialog] = useState(false); + const [deleteProductDialog, setDeleteProductDialog] = useState(false); + const [deleteProductsDialog, setDeleteProductsDialog] = useState(false); + const [product, setProduct] = useState(emptyProduct); + const [selectedProducts, setSelectedProducts] = useState(null); + const [submitted, setSubmitted] = useState(false); + const [globalFilter, setGlobalFilter] = useState(null); + const toast = useRef(null); + const dt = useRef(null); - useEffect(() => { - const productService = new ProductService(); - productService.getProducts().then(data => setProducts(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProducts().then((data) => setProducts(data)); + }, []); - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; + + const openNew = () => { + setProduct(emptyProduct); + setSubmitted(false); + setProductDialog(true); + }; + + const hideDialog = () => { + setSubmitted(false); + setProductDialog(false); + }; + + const hideDeleteProductDialog = () => { + setDeleteProductDialog(false); + }; + + const hideDeleteProductsDialog = () => { + setDeleteProductsDialog(false); + }; + + const saveProduct = () => { + setSubmitted(true); + + if (product.name.trim()) { + let _products = [...products]; + let _product = { ...product }; + if (product.id) { + const index = findIndexById(product.id); + + _products[index] = _product; + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Updated', + life: 3000, + }); + } else { + _product.id = createId(); + _product.image = 'product-placeholder.svg'; + _products.push(_product); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Created', + life: 3000, + }); + } + + setProducts(_products); + setProductDialog(false); + setProduct(emptyProduct); + } + }; + + const editProduct = (product) => { + setProduct({ ...product }); + setProductDialog(true); + }; + + const confirmDeleteProduct = (product) => { + setProduct(product); + setDeleteProductDialog(true); + }; + + const deleteProduct = () => { + let _products = products.filter((val) => val.id !== product.id); + setProducts(_products); + setDeleteProductDialog(false); + setProduct(emptyProduct); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Product Deleted', + life: 3000, + }); + }; + + const findIndexById = (id) => { + let index = -1; + for (let i = 0; i < products.length; i++) { + if (products[i].id === id) { + index = i; + break; + } } - const openNew = () => { - setProduct(emptyProduct); - setSubmitted(false); - setProductDialog(true); + return index; + }; + + const createId = () => { + let id = ''; + let chars = + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + for (let i = 0; i < 5; i++) { + id += chars.charAt(Math.floor(Math.random() * chars.length)); } + return id; + }; - const hideDialog = () => { - setSubmitted(false); - setProductDialog(false); - } + const exportCSV = () => { + dt.current.exportCSV(); + }; - const hideDeleteProductDialog = () => { - setDeleteProductDialog(false); - } + const confirmDeleteSelected = () => { + setDeleteProductsDialog(true); + }; - const hideDeleteProductsDialog = () => { - setDeleteProductsDialog(false); - } + const deleteSelectedProducts = () => { + let _products = products.filter((val) => !selectedProducts.includes(val)); + setProducts(_products); + setDeleteProductsDialog(false); + setSelectedProducts(null); + toast.current.show({ + severity: 'success', + summary: 'Successful', + detail: 'Products Deleted', + life: 3000, + }); + }; - const saveProduct = () => { - setSubmitted(true); + const onCategoryChange = (e) => { + let _product = { ...product }; + _product['category'] = e.value; + setProduct(_product); + }; - if (product.name.trim()) { - let _products = [...products]; - let _product = { ...product }; - if (product.id) { - const index = findIndexById(product.id); + const onInputChange = (e, name) => { + const val = (e.target && e.target.value) || ''; + let _product = { ...product }; + _product[`${name}`] = val; - _products[index] = _product; - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 }); - } - else { - _product.id = createId(); - _product.image = 'product-placeholder.svg'; - _products.push(_product); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 }); - } + setProduct(_product); + }; - setProducts(_products); - setProductDialog(false); - setProduct(emptyProduct); - } - } + const onInputNumberChange = (e, name) => { + const val = e.value || 0; + let _product = { ...product }; + _product[`${name}`] = val; - const editProduct = (product) => { - setProduct({ ...product }); - setProductDialog(true); - } - - const confirmDeleteProduct = (product) => { - setProduct(product); - setDeleteProductDialog(true); - } - - const deleteProduct = () => { - let _products = products.filter(val => val.id !== product.id); - setProducts(_products); - setDeleteProductDialog(false); - setProduct(emptyProduct); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 }); - } - - const findIndexById = (id) => { - let index = -1; - for (let i = 0; i < products.length; i++) { - if (products[i].id === id) { - index = i; - break; - } - } - - return index; - } - - const createId = () => { - let id = ''; - let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (let i = 0; i < 5; i++) { - id += chars.charAt(Math.floor(Math.random() * chars.length)); - } - return id; - } - - const exportCSV = () => { - dt.current.exportCSV(); - } - - const confirmDeleteSelected = () => { - setDeleteProductsDialog(true); - } - - const deleteSelectedProducts = () => { - let _products = products.filter(val => !selectedProducts.includes(val)); - setProducts(_products); - setDeleteProductsDialog(false); - setSelectedProducts(null); - toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 }); - } - - const onCategoryChange = (e) => { - let _product = { ...product }; - _product['category'] = e.value; - setProduct(_product); - } - - const onInputChange = (e, name) => { - const val = (e.target && e.target.value) || ''; - let _product = { ...product }; - _product[`${name}`] = val; - - setProduct(_product); - } - - const onInputNumberChange = (e, name) => { - const val = e.value || 0; - let _product = { ...product }; - _product[`${name}`] = val; - - setProduct(_product); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - - -
    - ); - } - - const header = ( -
    -
    Manage Products
    - - - setGlobalFilter(e.target.value)} placeholder="Search..." /> - -
    - ); - - const productDialogFooter = ( - <> - + + ); + }; - const customizedContent = (item) => { - return ( - - { item.image && e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-2 mb-3" />} -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

    - -     - ); - }; + const customizedMarker = (item) => { + return ( + + + + ); + }; - const customizedMarker = (item) => { - return ( - - - - ); - }; + return ( +
    +
    +
    +

    Timeline

    - return
    -
    -
    -

    Timeline

    +
    Custom Timeline
    + -
    Custom Timeline
    - - -
    Horizontal - Alternate Align
    - item} opposite={ } /> -
    +
    Horizontal - Alternate Align
    + item} + opposite={ } + />
    +
    -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + ); }; -export default React.memo(TimelineDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(TimelineDemo, comparisonFn); diff --git a/web-ui/web-react/src/service/CountryService.js b/web-ui/web-react/src/service/CountryService.js index 43532da9..f8c58103 100644 --- a/web-ui/web-react/src/service/CountryService.js +++ b/web-ui/web-react/src/service/CountryService.js @@ -1,9 +1,9 @@ -import axios from 'axios' +import axios from 'axios'; export class CountryService { - - getCountries() { - return axios.get('assets/demo/data/countries.json') - .then(res => res.data.data); - } -} \ No newline at end of file + getCountries() { + return axios + .get('assets/demo/data/countries.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/service/CustomerService.js b/web-ui/web-react/src/service/CustomerService.js index 257ae3c6..4958a90c 100644 --- a/web-ui/web-react/src/service/CustomerService.js +++ b/web-ui/web-react/src/service/CustomerService.js @@ -1,14 +1,15 @@ -import axios from 'axios' +import axios from 'axios'; export class CustomerService { - getCustomersMedium() { - return axios.get('assets/demo/data/customers-medium.json') - .then(res => res.data.data); - } + getCustomersMedium() { + return axios + .get('assets/demo/data/customers-medium.json') + .then((res) => res.data.data); + } - getCustomersLarge() { - return axios.get('assets/demo/data/customers-large.json') - .then(res => res.data.data); - } - -} \ No newline at end of file + getCustomersLarge() { + return axios + .get('assets/demo/data/customers-large.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/service/EventService.js b/web-ui/web-react/src/service/EventService.js index cd486b3e..7cc65488 100644 --- a/web-ui/web-react/src/service/EventService.js +++ b/web-ui/web-react/src/service/EventService.js @@ -1,9 +1,9 @@ import axios from 'axios'; export class EventService { - - getEvents() { - return axios.get('assets/demo/data/events.json') - .then(res => res.data.data); - } + getEvents() { + return axios + .get('assets/demo/data/events.json') + .then((res) => res.data.data); + } } diff --git a/web-ui/web-react/src/service/NodeService.js b/web-ui/web-react/src/service/NodeService.js index 2d0f2828..a26bf091 100644 --- a/web-ui/web-react/src/service/NodeService.js +++ b/web-ui/web-react/src/service/NodeService.js @@ -1,13 +1,15 @@ import axios from 'axios'; export class NodeService { - getTreeNodes() { - return axios.get('assets/demo/data/treenodes.json') - .then(res => res.data.root); - } + getTreeNodes() { + return axios + .get('assets/demo/data/treenodes.json') + .then((res) => res.data.root); + } - getTreeTableNodes() { - return axios.get('assets/demo/data/treetablenodes.json') - .then(res => res.data.root); - } + getTreeTableNodes() { + return axios + .get('assets/demo/data/treetablenodes.json') + .then((res) => res.data.root); + } } diff --git a/web-ui/web-react/src/service/PhotoService.js b/web-ui/web-react/src/service/PhotoService.js index 30614faa..0e138506 100644 --- a/web-ui/web-react/src/service/PhotoService.js +++ b/web-ui/web-react/src/service/PhotoService.js @@ -1,8 +1,9 @@ import axios from 'axios'; export class PhotoService { - - getImages() { - return axios.get('assets/demo/data/photos.json').then(res => res.data.data); - } + getImages() { + return axios + .get('assets/demo/data/photos.json') + .then((res) => res.data.data); + } } diff --git a/web-ui/web-react/src/service/ProductService.js b/web-ui/web-react/src/service/ProductService.js index ce8a229e..da658536 100644 --- a/web-ui/web-react/src/service/ProductService.js +++ b/web-ui/web-react/src/service/ProductService.js @@ -1,16 +1,21 @@ import axios from 'axios'; export class ProductService { + getProductsSmall() { + return axios + .get('assets/demo/data/products-small.json') + .then((res) => res.data.data); + } - getProductsSmall() { - return axios.get('assets/demo/data/products-small.json').then(res => res.data.data); - } + getProducts() { + return axios + .get('assets/demo/data/products.json') + .then((res) => res.data.data); + } - getProducts() { - return axios.get('assets/demo/data/products.json').then(res => res.data.data); - } - - getProductsWithOrdersSmall() { - return axios.get('assets/demo/data/products-orders-small.json').then(res => res.data.data); - } -} \ No newline at end of file + getProductsWithOrdersSmall() { + return axios + .get('assets/demo/data/products-orders-small.json') + .then((res) => res.data.data); + } +} diff --git a/web-ui/web-react/src/serviceWorker.js b/web-ui/web-react/src/serviceWorker.js index 2283ff9c..f17645e5 100755 --- a/web-ui/web-react/src/serviceWorker.js +++ b/web-ui/web-react/src/serviceWorker.js @@ -16,8 +16,8 @@ const isLocalhost = Boolean( window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, + ), ); export function register(config) { @@ -43,7 +43,7 @@ export function register(config) { navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit http://bit.ly/CRA-PWA' + 'worker. To learn more, visit http://bit.ly/CRA-PWA', ); }); } else { @@ -57,7 +57,7 @@ export function register(config) { function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) - .then(registration => { + .then((registration) => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { @@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) { // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.', ); // Execute callback @@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) { }; }; }) - .catch(error => { + .catch((error) => { console.error('Error during service worker registration:', error); }); } @@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) { function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) - .then(response => { + .then((response) => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( @@ -109,7 +109,7 @@ function checkValidServiceWorker(swUrl, config) { (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister().then(() => { window.location.reload(); }); @@ -121,14 +121,14 @@ function checkValidServiceWorker(swUrl, config) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + 'No internet connection found. App is running in offline mode.', ); }); } export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister(); }); } diff --git a/web-ui/web-react/src/templates/BlocksDemo.js b/web-ui/web-react/src/templates/BlocksDemo.js index d62d0947..040f9e74 100644 --- a/web-ui/web-react/src/templates/BlocksDemo.js +++ b/web-ui/web-react/src/templates/BlocksDemo.js @@ -6,9 +6,9 @@ import { Checkbox } from 'primereact/checkbox'; import BlockViewer from '../BlockViewer'; const BlocksDemo = () => { - const [checked, setChecked] = useState(false); + const [checked, setChecked] = useState(false); - const block1 = ` + const block1 = `
    @@ -26,7 +26,7 @@ const BlocksDemo = () => {
    `; - const block2 = ` + const block2 = `
    One Product, @@ -80,7 +80,7 @@ const BlocksDemo = () => {
    `; - const block3 = ` + const block3 = `
    Pricing Plans
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    @@ -198,7 +198,7 @@ const BlocksDemo = () => {
    `; - const block4 = ` + const block4 = `
     POWERED BY DISCORD
    @@ -209,7 +209,7 @@ const BlocksDemo = () => {
    `; - const block5 = ` + const block5 = `
    🔥 Hot Deals!
    @@ -224,7 +224,7 @@ const BlocksDemo = () => {
    `; - const block6 = ` + const block6 = `
    • @@ -263,7 +263,7 @@ const BlocksDemo = () => {
    `; - const block7 = ` + const block7 = `
    @@ -330,7 +330,7 @@ const BlocksDemo = () => {
    `; - const block8 = ` + const block8 = `
    hyper @@ -359,7 +359,7 @@ const BlocksDemo = () => {
    `; - const block9 = ` + const block9 = `
    Movie Information
    Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
    @@ -409,7 +409,7 @@ const BlocksDemo = () => {
    `; - const block10 = ` + const block10 = `
    Card Title
    Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
    @@ -417,422 +417,639 @@ const BlocksDemo = () => {
    `; - return ( - <> - -
    -
    -
    - Create the screens your -
    your visitors deserve to see
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    + return ( + <> + +
    +
    +
    + + Create the screens your + +
    + your visitors deserve to see +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    - - -
    -
    -
    - hero-1 -
    + + +
    +
    +
    + hero-1 +
    +
    +     + + +
    +
    + One Product, + Many Solutions +
    +
    + Ac turpis egestas maecenas pharetra convallis posuere morbi leo + urna. +
    +
    +
    + + + +
    + Built for Developers +
    + + Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + +
    +
    + + + +
    + End-to-End Encryption +
    + + Risus nec feugiat in fermentum posuere urna nec. Posuere + sollicitudin aliquam ultrices sagittis. + +
    +
    + + + +
    Easy to Use
    + + Ornare suspendisse sed nisi lacus sed viverra tellus. Neque + volutpat ac tincidunt vitae semper. + +
    +
    + + + +
    + Fast & Global Support +
    + + Fermentum et sollicitudin ac orci phasellus egestas tellus + rutrum tellus. + +
    +
    + + + +
    Open Source
    + + Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec + adipiscing tristique risus nec feugiat.{' '} + +
    +
    + + + +
    Trusted Securitty
    + + Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus + metus aliquam eleifend. + +
    +
    +
    +     + + +
    +
    + Pricing Plans +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit + numquam eligendi quos. +
    + +
    +
    +
    +
    +
    Basic
    +
    Plan description
    +
    +
    + $9 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    +
    +
    - +
    +
    - -
    -
    - One Product, - Many Solutions -
    -
    Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
    -
    -
    - - - -
    Built for Developers
    - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
    -
    - - - -
    End-to-End Encryption
    - Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis. -
    -
    - - - -
    Easy to Use
    - Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper. -
    -
    - - - -
    Fast & Global Support
    - Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. -
    -
    - - - -
    Open Source
    - Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. -
    -
    - - - -
    Trusted Securitty
    - Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend. -
    -
    +
    +
    +
    +
    + Premium +
    +
    Plan description
    +
    +
    + $29 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    • + + Duis ultricies lacus sed +
      • +
    +
    +
    - +
    +
    - -
    -
    Pricing Plans
    -
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    +
    +
    +
    +
    + Enterprise +
    +
    Plan description
    +
    +
    + $49 + per month +
    +
    +
      +
    • + + Arcu vitae elementum +
      • +
    • + + Dui faucibus in ornare +
      • +
    • + + Morbi tincidunt augue +
      • +
    • + + Duis ultricies lacus sed +
      • +
    • + + Imperdiet proin +
      • +
    • + + Nisi scelerisque +
      • +
    +
    + +
    +
    +
    +
    +
    +     -
    -
    -
    -
    -
    Basic
    -
    Plan description
    -
    -
    - $9 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    -
    - -
    -
    -
    + +
    +
    +
    +  POWERED BY DISCORD +
    +
    + Join Our Design Community +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit + numquam eligendi quos. +
    + +
    +
    +     -
    -
    -
    -
    Premium
    -
    Plan description
    -
    -
    - $29 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    • - - Duis ultricies lacus sed -
      • -
    -
    - -
    -
    -
    + +
    +
    + + 🔥 + {' '} + Hot Deals! +
    +
    + + Libero voluptatum atque exercitationem praesentium provident odit. + +
    + + +
    +     -
    -
    -
    -
    Enterprise
    -
    Plan description
    -
    -
    - $49 - per month -
    -
    -
      -
    • - - Arcu vitae elementum -
      • -
    • - - Dui faucibus in ornare -
      • -
    • - - Morbi tincidunt augue -
      • -
    • - - Duis ultricies lacus sed -
      • -
    • - - Imperdiet proin -
      • -
    • - - Nisi scelerisque -
      • -
    -
    - -
    -
    -
    + +
    +
      +
    • + +
      • +
    • + +
      • +
    • + Analytics +
      • +
    +
    +
    +
    Customers
    +
    +
    + + 332 Active Users +
    +
    + + 9402 Sessions +
    +
    + + 2.32m Avg. Duration +
    +
    +
    +
    +
    +
    +
    +     + + +
    +
    +
    +
    +
    +
    + + Orders + +
    152
    +
    +
    + +
    +
    + 24 new + since last visit +
    +
    +
    +
    +
    +
    + + Revenue + +
    $2.100
    +
    +
    + +
    +
    + %52+ + since last week +
    +
    +
    +
    +
    +
    + + Customers + +
    28441
    +
    +
    + +
    +
    + 520 + newly registered +
    +
    +
    +
    +
    +
    + + Comments + +
    + 152 Unread
    +
    +
    + +
    - + 85 + responded +
    +
    +
    +
    +     - -
    -
    -
     POWERED BY DISCORD
    -
    Join Our Design Community
    -
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.
    - -
    -
    -     + +
    +
    + hyper +
    + Welcome Back +
    + + Don't have an account? + + +
    - -
    -
    🔥 Hot Deals!
    -
    - Libero voluptatum atque exercitationem praesentium provident odit. -
    - - -
    -     +
    + + - -
    -
      -
    • - -
      • -
    • - -
      • -
    • - Analytics -
      • -
    -
    -
    -
    Customers
    -
    -
    - - 332 Active Users -
    -
    - - 9402 Sessions -
    -
    - - 2.32m Avg. Duration -
    -
    -
    -
    -
    -
    -
    -     + + - -
    -
    -
    -
    -
    -
    - Orders -
    152
    -
    -
    - -
    -
    - 24 new - since last visit -
    -
    -
    -
    -
    -
    - Revenue -
    $2.100
    -
    -
    - -
    -
    - %52+ - since last week -
    -
    -
    -
    -
    -
    - Customers -
    28441
    -
    -
    - -
    -
    - 520 - newly registered -
    -
    -
    -
    -
    -
    - Comments -
    152 Unread
    -
    -
    - -
    -
    - 85 - responded -
    -
    -
    -
    -     +
    +
    + setChecked(e.checked)} + checked={checked} + /> + +
    + +
    - -
    -
    - hyper -
    Welcome Back
    - Don't have an account? - -
    +
    +
    + -
    - - + +
    +
    + Movie Information +
    +
    + Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit + rutrum. +
    +
      +
    • +
      Title
      +
      + Heat +
      +
      +
      +
      • +
    • +
      Genre
      +
      + + + +
      +
      +
      +
      • +
    • +
      Director
      +
      + Michael Mann +
      +
      +
      +
      • +
    • +
      Actors
      +
      + Robert De Niro, Al Pacino +
      +
      +
      +
      • +
    • +
      Plot
      +
      + A group of professional bank robbers start to feel the heat from + police when they unknowingly leave a clue at their latest heist. +
      +
      +
      +
      • +
    +
    +     - - - -
    -
    - setChecked(e.checked)} checked={checked} /> - -
    - -
    - -
    -
    -     - - -
    -
    Movie Information
    -
    Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.
    -
      -
    • -
      Title
      -
      Heat
      -
      -
      -
      • -
    • -
      Genre
      -
      - - - -
      -
      -
      -
      • -
    • -
      Director
      -
      Michael Mann
      -
      -
      -
      • -
    • -
      Actors
      -
      Robert De Niro, Al Pacino
      -
      -
      -
      • -
    • -
      Plot
      -
      - A group of professional bank robbers start to feel the heat from police - when they unknowingly leave a clue at their latest heist.
      -
      -
      -
      • -
    -
    -     - - -
    -
    Card Title
    -
    Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.
    -
    -
    -     - - ) -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + +
    +
    Card Title
    +
    + Vivamus id nisl interdum, blandit augue sit amet, eleifend mi. +
    +
    +
    +     + + ); }; -export default React.memo(BlocksDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(BlocksDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ButtonDemo.js b/web-ui/web-react/src/templates/ButtonDemo.js index 33d777d3..5fbdc695 100644 --- a/web-ui/web-react/src/templates/ButtonDemo.js +++ b/web-ui/web-react/src/templates/ButtonDemo.js @@ -3,195 +3,381 @@ import { Button } from 'primereact/button'; import { SplitButton } from 'primereact/splitbutton'; const ButtonDemo = () => { - const [loading1, setLoading1] = useState(false); - const [loading2, setLoading2] = useState(false); - const [loading3, setLoading3] = useState(false); - const [loading4, setLoading4] = useState(false); + const [loading1, setLoading1] = useState(false); + const [loading2, setLoading2] = useState(false); + const [loading3, setLoading3] = useState(false); + const [loading4, setLoading4] = useState(false); - const onLoadingClick1 = () => { - setLoading1(true); + const onLoadingClick1 = () => { + setLoading1(true); - setTimeout(() => { - setLoading1(false); - }, 2000); - } + setTimeout(() => { + setLoading1(false); + }, 2000); + }; - const onLoadingClick2 = () => { - setLoading2(true); + const onLoadingClick2 = () => { + setLoading2(true); - setTimeout(() => { - setLoading2(false); - }, 2000); - } + setTimeout(() => { + setLoading2(false); + }, 2000); + }; - const onLoadingClick3 = () => { - setLoading3(true); + const onLoadingClick3 = () => { + setLoading3(true); - setTimeout(() => { - setLoading3(false); - }, 2000); - } + setTimeout(() => { + setLoading3(false); + }, 2000); + }; - const onLoadingClick4 = () => { - setLoading4(true); + const onLoadingClick4 = () => { + setLoading4(true); - setTimeout(() => { - setLoading4(false); - }, 2000); - } + setTimeout(() => { + setLoading4(false); + }, 2000); + }; - const items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'Home', - icon: 'pi pi-home' - } - ]; + const items = [ + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-times', + }, + { + label: 'Home', + icon: 'pi pi-home', + }, + ]; - return ( -
    -
    -
    -
    Default
    - - - -
    - -
    -
    Severities
    -
    - -
    -
    Text
    -
    - -
    -
    Outlined
    -
    - -
    -
    Button Group
    - -
    - -
    -
    SplitButton
    - - - - - -
    -
    - -
    -
    -
    Icons
    - - - -
    - -
    -
    Raised
    -
    - -
    -
    Rounded
    -
    - -
    -
    Rounded Icons
    -
    - -
    -
    Rounded Text
    -
    - -
    -
    Rounded Outlined
    -
    - -
    -
    Loading
    -
    -
    + return ( +
    +
    +
    +
    Default
    + + +
    - ) -} -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    Severities
    +
    + +
    +
    Text
    +
    + +
    +
    Outlined
    +
    + +
    +
    Button Group
    + +
    + +
    +
    SplitButton
    + + + + + +
    +
    + +
    +
    +
    Icons
    + + + +
    + +
    +
    Raised
    +
    + +
    +
    Rounded
    +
    + +
    +
    Rounded Icons
    +
    + +
    +
    Rounded Text
    +
    + +
    +
    Rounded Outlined
    +
    + +
    +
    Loading
    +
    +
    +
    + ); }; -export default React.memo(ButtonDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(ButtonDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ChartDemo.js b/web-ui/web-react/src/templates/ChartDemo.js index 669daaaa..fac867e7 100644 --- a/web-ui/web-react/src/templates/ChartDemo.js +++ b/web-ui/web-react/src/templates/ChartDemo.js @@ -2,406 +2,404 @@ import React, { useEffect, useState } from 'react'; import { Chart } from 'primereact/chart'; const lineData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'First Dataset', - data: [65, 59, 80, 81, 56, 55, 40], - fill: false, - backgroundColor: '#2f4860', - borderColor: '#2f4860', - tension: .4 - }, - { - label: 'Second Dataset', - data: [28, 48, 40, 19, 86, 27, 90], - fill: false, - backgroundColor: '#00bb7e', - borderColor: '#00bb7e', - tension: .4 - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + fill: false, + backgroundColor: '#2f4860', + borderColor: '#2f4860', + tension: 0.4, + }, + { + label: 'Second Dataset', + data: [28, 48, 40, 19, 86, 27, 90], + fill: false, + backgroundColor: '#00bb7e', + borderColor: '#00bb7e', + tension: 0.4, + }, + ], }; const pieData = { - labels: ['A', 'B', 'C'], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ], - hoverBackgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ] - } - ] + labels: ['A', 'B', 'C'], + datasets: [ + { + data: [300, 50, 100], + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + }, + ], }; const polarData = { - datasets: [{ - data: [ - 11, - 16, - 7, - 3, - 14 - ], - backgroundColor: [ - "#FF6384", - "#4BC0C0", - "#FFCE56", - "#E7E9ED", - "#36A2EB" - ], - label: 'My dataset' - }], - labels: [ - "Red", - "Green", - "Yellow", - "Grey", - "Blue" - ] + datasets: [ + { + data: [11, 16, 7, 3, 14], + backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'], + label: 'My dataset', + }, + ], + labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'], }; const barData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: '#2f4860', - data: [65, 59, 80, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: '#00bb7e', - data: [28, 48, 40, 19, 86, 27, 90] - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'My First dataset', + backgroundColor: '#2f4860', + data: [65, 59, 80, 81, 56, 55, 40], + }, + { + label: 'My Second dataset', + backgroundColor: '#00bb7e', + data: [28, 48, 40, 19, 86, 27, 90], + }, + ], }; const doughnutData = { - labels: ['A', 'B', 'C'], - datasets: [ - { - data: [300, 50, 100], - backgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ], - hoverBackgroundColor: [ - "#FF6384", - "#36A2EB", - "#FFCE56" - ] - } - ] + labels: ['A', 'B', 'C'], + datasets: [ + { + data: [300, 50, 100], + backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], + }, + ], }; const radarData = { - labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - borderColor: 'rgba(179,181,198,1)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] + labels: [ + 'Eating', + 'Drinking', + 'Sleeping', + 'Designing', + 'Coding', + 'Cycling', + 'Running', + ], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + borderColor: 'rgba(179,181,198,1)', + pointBackgroundColor: 'rgba(179,181,198,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(179,181,198,1)', + data: [65, 59, 90, 81, 56, 55, 40], + }, + { + label: 'My Second dataset', + backgroundColor: 'rgba(255,99,132,0.2)', + borderColor: 'rgba(255,99,132,1)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100], + }, + ], }; const ChartDemo = (props) => { - const [lineOptions, setLineOptions] = useState(null) - const [barOptions, setBarOptions] = useState(null) - const [pieOptions, setPieOptions] = useState(null) - const [polarOptions, setPolarOptions] = useState(null) - const [radarOptions, setRadarOptions] = useState(null) + const [lineOptions, setLineOptions] = useState(null); + const [barOptions, setBarOptions] = useState(null); + const [pieOptions, setPieOptions] = useState(null); + const [polarOptions, setPolarOptions] = useState(null); + const [radarOptions, setRadarOptions] = useState(null); - const applyLightTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; + const applyLightTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, + }; - const barOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; + const barOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, + }; - const pieOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - } - }; + const pieOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + }; - const polarOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - r: { - grid: { - color: '#ebedef' - } - } - } - }; + const polarOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + r: { + grid: { + color: '#ebedef', + }, + }, + }, + }; - const radarOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - r: { - grid: { - color: '#ebedef' - } - } - } - }; + const radarOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + r: { + grid: { + color: '#ebedef', + }, + }, + }, + }; - setLineOptions(lineOptions) - setBarOptions(barOptions) - setPieOptions(pieOptions) - setPolarOptions(polarOptions) - setRadarOptions(radarOptions) + setLineOptions(lineOptions); + setBarOptions(barOptions); + setPieOptions(pieOptions); + setPolarOptions(polarOptions); + setRadarOptions(radarOptions); + }; + const applyDarkTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const barOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const pieOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + }; + + const polarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + const radarOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + r: { + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + setLineOptions(lineOptions); + setBarOptions(barOptions); + setPieOptions(pieOptions); + setPolarOptions(polarOptions); + setRadarOptions(radarOptions); + }; + + useEffect(() => { + if (props.colorMode === 'light') { + applyLightTheme(); + } else { + applyDarkTheme(); } + }, [props.colorMode]); - const applyDarkTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - const barOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - const pieOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - } - }; - - const polarOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - r: { - grid: { - color: 'rgba(160, 167, 181, .3)' - } - } - } - }; - - const radarOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - r: { - grid: { - color: 'rgba(160, 167, 181, .3)' - } - } - } - }; - - setLineOptions(lineOptions) - setBarOptions(barOptions) - setPieOptions(pieOptions) - setPolarOptions(polarOptions) - setRadarOptions(radarOptions) - } - - useEffect(() => { - if (props.colorMode === 'light') { - applyLightTheme(); - } else { - applyDarkTheme(); - } - }, [props.colorMode]); - - return ( -
    -
    -
    -
    Linear Chart
    - -
    - -
    -
    Pie Chart
    - -
    - -
    -
    Polar Area Chart
    - -
    -
    -
    -
    -
    Bar Chart
    - -
    - -
    -
    Doughnut Chart
    - -
    - -
    -
    Radar Chart
    - -
    -
    + return ( +
    +
    +
    +
    Linear Chart
    +
    - ) -} + +
    +
    Pie Chart
    + +
    + +
    +
    Polar Area Chart
    + +
    +
    +
    +
    +
    Bar Chart
    + +
    + +
    +
    Doughnut Chart
    + +
    + +
    +
    Radar Chart
    + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return (prevProps.location.pathname === nextProps.location.pathname) && (prevProps.colorMode === nextProps.colorMode); + return ( + prevProps.location.pathname === nextProps.location.pathname && + prevProps.colorMode === nextProps.colorMode + ); }; export default React.memo(ChartDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/CodeHighlight.js b/web-ui/web-react/src/templates/CodeHighlight.js index e6035c20..19c5fb9b 100644 --- a/web-ui/web-react/src/templates/CodeHighlight.js +++ b/web-ui/web-react/src/templates/CodeHighlight.js @@ -8,25 +8,24 @@ import 'prismjs/components/prism-css'; import 'prismjs/components/prism-scss'; export const CodeHighlight = (props) => { + const codeElement = useRef(null); - const codeElement = useRef(null); + useEffect(() => { + if (Prism) { + Prism.highlightElement(codeElement.current); + } + }, []); - useEffect(() => { - if (Prism) { - Prism.highlightElement(codeElement.current); - } - }, []); - - return ( - 
    -            
-                {props.children} 
-                
-
    - ); -} + return ( + 
    +      
+        {props.children} 
+      
+
    + ); +}; CodeHighlight.defaultProps = { - lang: 'jsx', - style: null + lang: 'jsx', + style: null, }; diff --git a/web-ui/web-react/src/templates/Dashboard.js b/web-ui/web-react/src/templates/Dashboard.js index c332d519..6eef0e5e 100644 --- a/web-ui/web-react/src/templates/Dashboard.js +++ b/web-ui/web-react/src/templates/Dashboard.js @@ -7,348 +7,503 @@ import { Column } from 'primereact/column'; import { ProductService } from '../service/ProductService'; const lineData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'First Dataset', - data: [65, 59, 80, 81, 56, 55, 40], - fill: false, - backgroundColor: '#2f4860', - borderColor: '#2f4860', - tension: .4 - }, - { - label: 'Second Dataset', - data: [28, 48, 40, 19, 86, 27, 90], - fill: false, - backgroundColor: '#00bb7e', - borderColor: '#00bb7e', - tension: .4 - } - ] + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + fill: false, + backgroundColor: '#2f4860', + borderColor: '#2f4860', + tension: 0.4, + }, + { + label: 'Second Dataset', + data: [28, 48, 40, 19, 86, 27, 90], + fill: false, + backgroundColor: '#00bb7e', + borderColor: '#00bb7e', + tension: 0.4, + }, + ], }; const Dashboard = (props) => { - const [products, setProducts] = useState(null); - const menu1 = useRef(null); - const menu2 = useRef(null); - const [lineOptions, setLineOptions] = useState(null) + const [products, setProducts] = useState(null); + const menu1 = useRef(null); + const menu2 = useRef(null); + const [lineOptions, setLineOptions] = useState(null); - const applyLightTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#495057' - } - } - }, - scales: { - x: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - y: { - ticks: { - color: '#495057' - }, - grid: { - color: '#ebedef', - } - }, - } - }; - - setLineOptions(lineOptions) - } - - const applyDarkTheme = () => { - const lineOptions = { - plugins: { - legend: { - labels: { - color: '#ebedef' - } - } - }, - scales: { - x: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - y: { - ticks: { - color: '#ebedef' - }, - grid: { - color: 'rgba(160, 167, 181, .3)', - } - }, - } - }; - - setLineOptions(lineOptions) - } - - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then(data => setProducts(data)); - }, []); - - useEffect(() => { - if (props.colorMode === 'light') { - applyLightTheme(); - } else { - applyDarkTheme(); - } - }, [props.colorMode]); - - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + const applyLightTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#495057', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + y: { + ticks: { + color: '#495057', + }, + grid: { + color: '#ebedef', + }, + }, + }, }; - return ( -
    -
    -
    -
    -
    - Orders -
    152
    -
    -
    - -
    -
    - 24 new - since last visit -
    -
    -
    -
    -
    -
    - Revenue -
    $2.100
    -
    -
    - -
    -
    - %52+ - since last week -
    -
    -
    -
    -
    -
    - Customers -
    28441
    -
    -
    - -
    -
    - 520 - newly registered -
    -
    -
    -
    -
    -
    - Comments -
    152 Unread
    -
    -
    - -
    -
    - 85 - responded -
    -
    + setLineOptions(lineOptions); + }; -
    -
    -
    Recent Sales
    - - {data.image}}/> - - formatCurrency(data.price)}/> - ( - <> -
    -
    -
    -
    Best Selling Products
    -
    -
    -
    -
      -
    • -
      - Space T-Shirt -
      Clothing
      -
      -
      -
      -
      -
      - %50 -
      -
      • -
    • -
      - Portal Sticker -
      Accessories
      -
      -
      -
      -
      -
      - %16 -
      -
      • -
    • -
      - Supernova Sticker -
      Accessories
      -
      -
      -
      -
      -
      - %67 -
      -
      • -
    • -
      - Wonders Notebook -
      Office
      -
      -
      -
      -
      -
      - %35 -
      -
      • -
    • -
      - Mat Black Case -
      Accessories
      -
      -
      -
      -
      -
      - %75 -
      -
      • -
    • -
      - Robots T-Shirt -
      Clothing
      -
      -
      -
      -
      -
      - %40 -
      -
      • -
    -
    + const applyDarkTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef', + }, + }, + }, + scales: { + x: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + y: { + ticks: { + color: '#ebedef', + }, + grid: { + color: 'rgba(160, 167, 181, .3)', + }, + }, + }, + }; + + setLineOptions(lineOptions); + }; + + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((data) => setProducts(data)); + }, []); + + useEffect(() => { + if (props.colorMode === 'light') { + applyLightTheme(); + } else { + applyDarkTheme(); + } + }, [props.colorMode]); + + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; + + return ( +
    +
    +
    +
    +
    + Orders +
    152
    - -
    -
    -
    Sales Overview
    - -
    - -
    -
    -
    Notifications
    -
    -
    -
    - - TODAY -
      -
    • -
      - -
      - Richard Jones - has purchased a blue t-shirt for 79$ - -
      • -
    • -
      - -
      - Your request for withdrawal of 2500$ has been initiated. -
      • -
    - - YESTERDAY -
      -
    • -
      - -
      - Keyser Wick - has purchased a black jacket for 59$ - -
      • -
    • -
      - -
      - Jane Davis - has posted a new questions about your product. - -
      • -
    -
    -
    -
    -
    TAKE THE NEXT STEP
    -
    Try PrimeBlocks
    -
    - -
    +
    +
    +
    + 24 new + since last visit
    - ); -} +
    +
    +
    +
    +
    + Revenue +
    $2.100
    +
    +
    + +
    +
    + %52+ + since last week +
    +
    +
    +
    +
    +
    + Customers +
    28441
    +
    +
    + +
    +
    + 520 + newly registered +
    +
    +
    +
    +
    +
    + Comments +
    152 Unread
    +
    +
    + +
    +
    + 85 + responded +
    +
    + +
    +
    +
    Recent Sales
    + + ( + {data.image} + )} + /> + + formatCurrency(data.price)} + /> + ( + <> +
    +
    +
    +
    Best Selling Products
    +
    +
    +
    +
      +
    • +
      + + Space T-Shirt + +
      Clothing
      +
      +
      +
      +
      +
      + %50 +
      +
      • +
    • +
      + + Portal Sticker + +
      Accessories
      +
      +
      +
      +
      +
      + %16 +
      +
      • +
    • +
      + + Supernova Sticker + +
      Accessories
      +
      +
      +
      +
      +
      + %67 +
      +
      • +
    • +
      + + Wonders Notebook + +
      Office
      +
      +
      +
      +
      +
      + %35 +
      +
      • +
    • +
      + + Mat Black Case + +
      Accessories
      +
      +
      +
      +
      +
      + %75 +
      +
      • +
    • +
      + + Robots T-Shirt + +
      Clothing
      +
      +
      +
      +
      +
      + %40 +
      +
      • +
    +
    +
    + +
    +
    +
    Sales Overview
    + +
    + +
    +
    +
    Notifications
    +
    +
    +
    + + TODAY +
      +
    • +
      + +
      + + Richard Jones + + {' '} + has purchased a blue t-shirt for{' '} + 79$ + + +
      • +
    • +
      + +
      + + Your request for withdrawal of{' '} + 2500$ has + been initiated. + +
      • +
    + + YESTERDAY +
      +
    • +
      + +
      + + Keyser Wick + + {' '} + has purchased a black jacket for{' '} + 59$ + + +
      • +
    • +
      + +
      + + Jane Davis + + {' '} + has posted a new questions about your product. + + +
      • +
    +
    +
    +
    +
    + TAKE THE NEXT STEP +
    +
    + Try PrimeBlocks +
    +
    + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return (prevProps.location.pathname === nextProps.location.pathname) && (prevProps.colorMode === nextProps.colorMode); + return ( + prevProps.location.pathname === nextProps.location.pathname && + prevProps.colorMode === nextProps.colorMode + ); }; export default React.memo(Dashboard, comparisonFn); diff --git a/web-ui/web-react/src/templates/Documentation.js b/web-ui/web-react/src/templates/Documentation.js index bb47ca8b..f1a2d7cb 100644 --- a/web-ui/web-react/src/templates/Documentation.js +++ b/web-ui/web-react/src/templates/Documentation.js @@ -2,92 +2,123 @@ import React from 'react'; import { CodeHighlight } from './CodeHighlight'; const Documentation = () => { + return ( +
    +
    +
    +

    Current Version

    +

    React 17.x and PrimeReact 7.x

    - return ( -
    -
    -
    -

    Current Version

    -

    React 17.x and PrimeReact 7.x

    - -
    Getting Started
    -

    Sakai is an application template for React based on the popular create-react-app that allows - creating React apps with no configuration. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.

    - -{` +
    Getting Started
    +

    + Sakai is an application template for React based on the popular{' '} + + create-react-app + {' '} + that allows creating React apps with no configuration. To get + started, clone the{' '} + repository{' '} + from GitHub and install the dependencies with npm or yarn. +

    + + {` "npm install" or "yarn" `} - +     -

    Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application. - That is it, you may now start with the development of your application using the Sakai template.

    +

    + Next step is running the application using the start script and + navigate to http://localhost:3000/ to view the application. + That is it, you may now start with the development of your + application using the Sakai template. +

    - -{` + + {` "npm start" or "yarn start" `} - + -
    React Scripts
    -

    Following commands are derived from create-app-app.

    - -{` +
    React Scripts
    +

    Following commands are derived from create-app-app.

    + + {` "npm start" or "yarn start": Starts the development server "npm test" or "yarn test": Runs the tests. "npm run build" or "yarn run build": Creates a production build. `} - +     -
    Dependencies
    -

    Dependencies of Sakai are listed below and needs to be defined at package.json.

    +
    Dependencies
    +

    + Dependencies of Sakai are listed below and needs to be defined at + package.json. +

    - -{` + + {` "primereact": "...", //required: PrimeReact components "primeicons": "...", //required: Icons "primeflex": "...", //optional: Sample pages "react-transition-group": "^4.4.1", //required: PrimeReact animations `} - + -
    Structure
    -

    Sakai consists of 2 main parts; the application layout and the resources. App.js inside src folder is the main component containing the template for the base layout - whereas required resources such as SASS structure for the layout are placed inside the src/layout folder.

    +
    Structure
    +

    + Sakai consists of 2 main parts; the application layout and the + resources. App.js inside src folder is the main component + containing the template for the base layout whereas required + resources such as SASS structure for the layout are placed inside + the src/layout folder. +

    -
    Application Template
    -

    Main layout is the JSX template of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the - App.js component that implements the logic such as menu state, layout modes and so on. -

    +
    Application Template
    +

    + Main layout is the JSX template of the App.js, it is divided into a + couple of child components such as topbar, profile, menu and footer. + Here is render method of the App.js component that implements the + logic such as menu state, layout modes and so on. +

    -
    Menu
    -

    Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems, - navigate to App.js file and define your own model as a nested structure. Here is the menu component from the demo application.

    +
    Menu
    +

    + Menu is a separate component defined in AppMenu.js file based on + PrimeReact MenuModel API. In order to define the menuitems, navigate + to App.js file and define your own model as a nested structure. Here + is the menu component from the demo application. +

    -
    PrimeReact Theme
    -

    Sakai theming is based on the PrimeReact theme being used. Default theme is lara-light-indigo.

    +
    PrimeReact Theme
    +

    + Sakai theming is based on the PrimeReact theme being used. Default + theme is lara-light-indigo. +

    -
    SASS Variables
    -

    In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes - will be reflected instantly at your browser. -

    +
    SASS Variables
    +

    + In case you'd like to customize the main layout variables, open{' '} + _variables.scss file under src/layout folder. Saving the + changes will be reflected instantly at your browser. +

    -
    src/layout/_variables.scss
    - -{` +
    src/layout/_variables.scss
    + + {` /* General */ $fontSize:14px; $borderRadius:12px; $transitionDuration:.2s; `} - -
    -
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(Documentation, comparisonFn); diff --git a/web-ui/web-react/src/templates/FileDemo.js b/web-ui/web-react/src/templates/FileDemo.js index ea6572c2..59f707ad 100644 --- a/web-ui/web-react/src/templates/FileDemo.js +++ b/web-ui/web-react/src/templates/FileDemo.js @@ -2,29 +2,48 @@ import React, { useRef } from 'react'; import { FileUpload } from 'primereact/fileupload'; const FileDemo = () => { - const toast = useRef(null); + const toast = useRef(null); - const onUpload = () => { - toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 }); - } + const onUpload = () => { + toast.current.show({ + severity: 'info', + summary: 'Success', + detail: 'File Uploaded', + life: 3000, + }); + }; - return ( -
    -
    -
    -
    Advanced
    - + return ( +
    +
    +
    +
    Advanced
    + -
    Basic
    - -
    -
    +
    Basic
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FileDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/FloatLabelDemo.js b/web-ui/web-react/src/templates/FloatLabelDemo.js index 130a354d..7077b1b1 100644 --- a/web-ui/web-react/src/templates/FloatLabelDemo.js +++ b/web-ui/web-react/src/templates/FloatLabelDemo.js @@ -1,134 +1,186 @@ -import React, {useState, useEffect} from 'react'; -import {InputText} from 'primereact/inputtext'; -import {InputTextarea} from 'primereact/inputtextarea'; -import {InputMask} from 'primereact/inputmask'; -import {InputNumber} from 'primereact/inputnumber'; -import {AutoComplete} from 'primereact/autocomplete'; -import {Calendar} from 'primereact/calendar'; -import {Chips} from 'primereact/chips'; -import {Dropdown} from 'primereact/dropdown'; -import {MultiSelect} from 'primereact/multiselect'; -import {CountryService} from '../service/CountryService'; +import React, { useState, useEffect } from 'react'; +import { InputText } from 'primereact/inputtext'; +import { InputTextarea } from 'primereact/inputtextarea'; +import { InputMask } from 'primereact/inputmask'; +import { InputNumber } from 'primereact/inputnumber'; +import { AutoComplete } from 'primereact/autocomplete'; +import { Calendar } from 'primereact/calendar'; +import { Chips } from 'primereact/chips'; +import { Dropdown } from 'primereact/dropdown'; +import { MultiSelect } from 'primereact/multiselect'; +import { CountryService } from '../service/CountryService'; const FloatLabelDemo = () => { - const [countries, setCountries] = useState([]); - const [filteredCountries, setFilteredCountries] = useState(null); - const [value1, setValue1] = useState(''); - const [value2, setValue2] = useState(''); - const [value3, setValue3] = useState(null); - const [value4, setValue4] = useState(''); - const [value5, setValue5] = useState(''); - const [value6, setValue6] = useState(''); - const [value7, setValue7] = useState(''); - const [value8, setValue8] = useState(''); - const [value9, setValue9] = useState([]); - const [value10, setValue10] = useState(null); + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState(null); + const [value1, setValue1] = useState(''); + const [value2, setValue2] = useState(''); + const [value3, setValue3] = useState(null); + const [value4, setValue4] = useState(''); + const [value5, setValue5] = useState(''); + const [value6, setValue6] = useState(''); + const [value7, setValue7] = useState(''); + const [value8, setValue8] = useState(''); + const [value9, setValue9] = useState([]); + const [value10, setValue10] = useState(null); - const cities = [ - {name: 'New York', code: 'NY'}, - {name: 'Rome', code: 'RM'}, - {name: 'London', code: 'LDN'}, - {name: 'Istanbul', code: 'IST'}, - {name: 'Paris', code: 'PRS'}, - ]; + const cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - countryService.getCountries().then((countries) => { - setCountries(countries); - }); - }, []); + useEffect(() => { + const countryService = new CountryService(); + countryService.getCountries().then((countries) => { + setCountries(countries); + }); + }, []); - const searchCountry = (event) => { - // in a real application, make a request to a remote url with the query and - // return filtered results, for demo we filter at client side - const filtered = []; - const query = event.query; - for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { - filtered.push(country); - } - } - setFilteredCountries(filtered); - }; + const searchCountry = (event) => { + // in a real application, make a request to a remote url with the query and + // return filtered results, for demo we filter at client side + const filtered = []; + const query = event.query; + for (let i = 0; i < countries.length; i++) { + const country = countries[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { + filtered.push(country); + } + } + setFilteredCountries(filtered); + }; - return ( -
    -
    Float Label
    -
    -
    - - setValue1(e.target.value)}/> - - -
    -
    - - setValue6(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name"> - - -
    -
    - - setValue7(e.value)}> - - -
    -
    - - setValue9(e.value)}> - - -
    -
    - - setValue2(e.value)}> - - -
    -
    - - setValue3(e.target.value)}> - - -
    -
    -
    - - - - - setValue4(e.target.value)}/> - - -
    -
    -
    - - setValue8(e.value)} optionLabel="name"> - - -
    -
    - - setValue10(e.value)} optionLabel="name"> - - -
    -
    - - setValue5(e.target.value)}> - - -
    -
    + return ( +
    +
    Float Label
    +
    +
    + + setValue1(e.target.value)} + /> + +
    - ) -} +
    + + setValue6(e.value)} + suggestions={filteredCountries} + completeMethod={searchCountry} + field="name" + > + + +
    +
    + + setValue7(e.value)} + > + + +
    +
    + + setValue9(e.value)} + > + + +
    +
    + + setValue2(e.value)} + > + + +
    +
    + + setValue3(e.target.value)} + > + + +
    +
    +
    + + + + + setValue4(e.target.value)} + /> + + +
    +
    +
    + + setValue8(e.value)} + optionLabel="name" + > + + +
    +
    + + setValue10(e.value)} + optionLabel="name" + > + + +
    +
    + + setValue5(e.target.value)} + > + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FloatLabelDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/FormLayoutDemo.js b/web-ui/web-react/src/templates/FormLayoutDemo.js index 03d26aba..224d0239 100644 --- a/web-ui/web-react/src/templates/FormLayoutDemo.js +++ b/web-ui/web-react/src/templates/FormLayoutDemo.js @@ -5,126 +5,141 @@ import { InputTextarea } from 'primereact/inputtextarea'; import { Dropdown } from 'primereact/dropdown'; const FormLayoutDemo = () => { - const [dropdownItem, setDropdownItem] = useState(null); - const dropdownItems = [ - { name: 'Option 1', code: 'Option 1' }, - { name: 'Option 2', code: 'Option 2' }, - { name: 'Option 3', code: 'Option 3' } - ]; + const [dropdownItem, setDropdownItem] = useState(null); + const dropdownItems = [ + { name: 'Option 1', code: 'Option 1' }, + { name: 'Option 2', code: 'Option 2' }, + { name: 'Option 3', code: 'Option 3' }, + ]; - return ( -
    -
    -
    -
    Vertical
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - -
    -
    Vertical Grid
    -
    -
    - - -
    -
    - - -
    -
    -
    -
    - -
    -
    -
    Horizontal
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    Inline
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -
    -
    Help Text
    -
    - - - Enter your username to reset your password. -
    -
    -
    - -
    -
    -
    Advanced
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - setDropdownItem(e.value)} options={dropdownItems} optionLabel="name" placeholder="Select One"> -
    -
    - - -
    -
    -
    -
    + return ( +
    +
    +
    +
    Vertical
    +
    + + +
    +
    + + +
    +
    + + +
    - ) -} + +
    +
    Vertical Grid
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    Horizontal
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    +
    Inline
    +
    +
    + + +
    +
    + + +
    + +
    +
    + +
    +
    Help Text
    +
    + + + Enter your username to reset your password. +
    +
    +
    + +
    +
    +
    Advanced
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + setDropdownItem(e.value)} + options={dropdownItems} + optionLabel="name" + placeholder="Select One" + > +
    +
    + + +
    +
    +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(FormLayoutDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/IconsDemo.js b/web-ui/web-react/src/templates/IconsDemo.js index 2b5e0da3..c6a5c16c 100644 --- a/web-ui/web-react/src/templates/IconsDemo.js +++ b/web-ui/web-react/src/templates/IconsDemo.js @@ -4,99 +4,119 @@ import { InputText } from 'primereact/inputtext'; import { CodeHighlight } from './CodeHighlight'; const IconsDemo = () => { - const [icons, setIcons] = useState([]); - const [filteredIcons, setFilteredIcons] = useState([]); + const [icons, setIcons] = useState([]); + const [filteredIcons, setFilteredIcons] = useState([]); - useEffect(() => { - axios.get('assets/demo/data/icons.json').then(res => { - let icons = res.data.icons; - icons.sort((icon1, icon2) => { - if (icon1.properties.name < icon2.properties.name) - return -1; - else if (icon1.properties.name < icon2.properties.name) - return 1; - else - return 0; - }); + useEffect(() => { + axios.get('assets/demo/data/icons.json').then((res) => { + let icons = res.data.icons; + icons.sort((icon1, icon2) => { + if (icon1.properties.name < icon2.properties.name) return -1; + else if (icon1.properties.name < icon2.properties.name) return 1; + else return 0; + }); - setIcons(icons); - setFilteredIcons(icons); - }); - }, []); + setIcons(icons); + setFilteredIcons(icons); + }); + }, []); - const onFilter = (event) => { - if (!event.target.value) { - setFilteredIcons(icons); - } - else { - setFilteredIcons(icons.filter( it => { - return it.icon.tags[0].includes(event.target.value); - })); - } + const onFilter = (event) => { + if (!event.target.value) { + setFilteredIcons(icons); + } else { + setFilteredIcons( + icons.filter((it) => { + return it.icon.tags[0].includes(event.target.value); + }), + ); } + }; - return ( -
    -

    Icons

    -

    PrimeReact components internally use PrimeIcons library, the official icons suite from PrimeTek.

    + return ( +
    +

    Icons

    +

    + PrimeReact components internally use{' '} + + PrimeIcons + {' '} + library, the official icons suite from{' '} + + PrimeTek + + . +

    -
    Download
    -

    PrimeIcons is available at npm, run the following command to download it to your project.

    - -{` +
    Download
    +

    + PrimeIcons is available at npm, run the following command to download it + to your project. +

    + + {` npm install primeicons --save `} - +     -
    Getting Started
    -

    PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. - A standalone icon can be displayed using an element like i or span

    +
    Getting Started
    +

    + PrimeIcons use the pi pi-{icon} syntax such + as pi pi-check. A standalone icon can be displayed + using an element like i or span +

    - -{` + + {` `} - + -
    Size
    -

    Size of the icons can easily be changed using font-size property.

    +
    Size
    +

    Size of the icons can easily be changed using font-size property.

    - -{` + + {` `} - + - + - -{` + + {` `} - + - + -
    Spinning Animation
    -

    Special pi-spin class applies continuous rotation to an icon.

    - -{` +
    Spinning Animation
    +

    Special pi-spin class applies continuous rotation to an icon.

    + + {` `} - +     - + -
    Constants
    -

    PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.

    - -{` +
    Constants
    +

    + PrimeIcons constants API is provided to easily choose an icon with + typescript e.g. when defining a menu model. +

    + + {` `} - - -{` + + + {` import {PrimeIcons} from 'primereact/api'; const items = [ @@ -112,33 +132,52 @@ const items = [ } ] `} - -
    List of Icons
    -

    Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.

    + +
    List of Icons
    +

    + Here is the current list of PrimeIcons, more icons are added + periodically. You may also{' '} + + request new icons + {' '} + at the issue tracker. +

    -
    - -
    -
    - { - filteredIcons && filteredIcons.map(iconMeta => { - const { icon, properties } = iconMeta; +
    + +
    +
    + {filteredIcons && + filteredIcons.map((iconMeta) => { + const { icon, properties } = iconMeta; - return icon.tags.indexOf('deprecate') === -1 && ( -
    - -
    pi-{properties.name}
    -
    - ); - }) - } -
    -
    - ) -} - -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return ( + icon.tags.indexOf('deprecate') === -1 && ( +
    + +
    pi-{properties.name}
    +
    + ) + ); + })} +
    +
    + ); }; -export default React.memo(IconsDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(IconsDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/InputDemo.js b/web-ui/web-react/src/templates/InputDemo.js index 9dcf1bd3..47252b33 100644 --- a/web-ui/web-react/src/templates/InputDemo.js +++ b/web-ui/web-react/src/templates/InputDemo.js @@ -23,332 +23,485 @@ import { CountryService } from '../service/CountryService'; import { NodeService } from '../service/NodeService'; export const InputDemo = () => { - const [floatValue, setFloatValue] = useState(''); - const [autoValue, setAutoValue] = useState(null); - const [selectedAutoValue, setSelectedAutoValue] = useState(null); - const [autoFilteredValue, setAutoFilteredValue] = useState([]); - const [calendarValue, setCalendarValue] = useState(null); - const [inputNumberValue, setInputNumberValue] = useState(null); - const [chipsValue, setChipsValue] = useState([]); - const [sliderValue, setSliderValue] = useState(''); - const [ratingValue, setRatingValue] = useState(null); - const [colorValue, setColorValue] = useState('1976D2'); - const [knobValue, setKnobValue] = useState(20); - const [radioValue, setRadioValue] = useState(null); - const [checkboxValue, setCheckboxValue] = useState([]); - const [switchValue, setSwitchValue] = useState(false); - const [listboxValue, setListboxValue] = useState(null); - const [dropdownValue, setDropdownValue] = useState(null); - const [multiselectValue, setMultiselectValue] = useState(null); - const [toggleValue, setToggleValue] = useState(false); - const [selectButtonValue1, setSelectButtonValue1] = useState(null); - const [selectButtonValue2, setSelectButtonValue2] = useState(null); - const [inputGroupValue, setInputGroupValue] = useState(false); - const [selectedNode, setSelectedNode] = useState(null); - const [treeSelectNodes, setTreeSelectNodes] = useState(null); + const [floatValue, setFloatValue] = useState(''); + const [autoValue, setAutoValue] = useState(null); + const [selectedAutoValue, setSelectedAutoValue] = useState(null); + const [autoFilteredValue, setAutoFilteredValue] = useState([]); + const [calendarValue, setCalendarValue] = useState(null); + const [inputNumberValue, setInputNumberValue] = useState(null); + const [chipsValue, setChipsValue] = useState([]); + const [sliderValue, setSliderValue] = useState(''); + const [ratingValue, setRatingValue] = useState(null); + const [colorValue, setColorValue] = useState('1976D2'); + const [knobValue, setKnobValue] = useState(20); + const [radioValue, setRadioValue] = useState(null); + const [checkboxValue, setCheckboxValue] = useState([]); + const [switchValue, setSwitchValue] = useState(false); + const [listboxValue, setListboxValue] = useState(null); + const [dropdownValue, setDropdownValue] = useState(null); + const [multiselectValue, setMultiselectValue] = useState(null); + const [toggleValue, setToggleValue] = useState(false); + const [selectButtonValue1, setSelectButtonValue1] = useState(null); + const [selectButtonValue2, setSelectButtonValue2] = useState(null); + const [inputGroupValue, setInputGroupValue] = useState(false); + const [selectedNode, setSelectedNode] = useState(null); + const [treeSelectNodes, setTreeSelectNodes] = useState(null); - const listboxValues = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; + const listboxValues = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - const dropdownValues = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; + const dropdownValues = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - const multiselectValues = [ - { name: 'Australia', code: 'AU' }, - { name: 'Brazil', code: 'BR' }, - { name: 'China', code: 'CN' }, - { name: 'Egypt', code: 'EG' }, - { name: 'France', code: 'FR' }, - { name: 'Germany', code: 'DE' }, - { name: 'India', code: 'IN' }, - { name: 'Japan', code: 'JP' }, - { name: 'Spain', code: 'ES' }, - { name: 'United States', code: 'US' } - ]; + const multiselectValues = [ + { name: 'Australia', code: 'AU' }, + { name: 'Brazil', code: 'BR' }, + { name: 'China', code: 'CN' }, + { name: 'Egypt', code: 'EG' }, + { name: 'France', code: 'FR' }, + { name: 'Germany', code: 'DE' }, + { name: 'India', code: 'IN' }, + { name: 'Japan', code: 'JP' }, + { name: 'Spain', code: 'ES' }, + { name: 'United States', code: 'US' }, + ]; - const selectButtonValues1 = [ - { name: 'Option 1', code: 'O1' }, - { name: 'Option 2', code: 'O2' }, - { name: 'Option 3', code: 'O3' }, - ]; + const selectButtonValues1 = [ + { name: 'Option 1', code: 'O1' }, + { name: 'Option 2', code: 'O2' }, + { name: 'Option 3', code: 'O3' }, + ]; - const selectButtonValues2 = [ - { name: 'Option 1', code: 'O1' }, - { name: 'Option 2', code: 'O2' }, - { name: 'Option 3', code: 'O3' }, - ]; + const selectButtonValues2 = [ + { name: 'Option 1', code: 'O1' }, + { name: 'Option 2', code: 'O2' }, + { name: 'Option 3', code: 'O3' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - const nodeService = new NodeService(); - countryService.getCountries().then(data => setAutoValue(data)); - nodeService.getTreeNodes().then(data => setTreeSelectNodes(data)); - }, []); + useEffect(() => { + const countryService = new CountryService(); + const nodeService = new NodeService(); + countryService.getCountries().then((data) => setAutoValue(data)); + nodeService.getTreeNodes().then((data) => setTreeSelectNodes(data)); + }, []); - const searchCountry = (event) => { - setTimeout(() => { - if (!event.query.trim().length) { - setAutoFilteredValue([...autoValue]); - } - else { - setAutoFilteredValue(autoValue.filter((country) => { - return country.name.toLowerCase().startsWith(event.query.toLowerCase()); - })); - } - }, 250); - }; - - const onCheckboxChange = (e) => { - let selectedValue = [...checkboxValue]; - if (e.checked) - selectedValue.push(e.value); - else - selectedValue.splice(selectedValue.indexOf(e.value), 1); - - setCheckboxValue(selectedValue); - }; - - const itemTemplate = (option) => { - return ( -
    - - {option.name} -
    + const searchCountry = (event) => { + setTimeout(() => { + if (!event.query.trim().length) { + setAutoFilteredValue([...autoValue]); + } else { + setAutoFilteredValue( + autoValue.filter((country) => { + return country.name + .toLowerCase() + .startsWith(event.query.toLowerCase()); + }), ); - }; + } + }, 250); + }; - const selectedItemTemplate = (option) => { - if (option) { - return ( -
    - - {option.name} -
    - ); - } + const onCheckboxChange = (e) => { + let selectedValue = [...checkboxValue]; + if (e.checked) selectedValue.push(e.value); + else selectedValue.splice(selectedValue.indexOf(e.value), 1); - return 'Select Countries'; - }; + setCheckboxValue(selectedValue); + }; + const itemTemplate = (option) => { return ( -
    -
    -
    -
    InputText
    -
    -
    - -
    -
    - -
    -
    - -
    -
    +
    + + {option.name} +
    + ); + }; -
    Icons
    -
    -
    - - - - -
    -
    - - - - -
    -
    - - - - - -
    -
    + const selectedItemTemplate = (option) => { + if (option) { + return ( +
    + + {option.name} +
    + ); + } -
    Float Label
    - - setFloatValue(e.target.value)} /> - - + return 'Select Countries'; + }; -
    Textarea
    - - -
    AutoComplete
    - setSelectedAutoValue(e.value)} suggestions={autoFilteredValue} completeMethod={searchCountry} field="name" /> - -
    Calendar
    - setCalendarValue(e.value)}> - -
    InputNumber
    - setInputNumberValue(e.value)} showButtons mode="decimal"> - -
    Chips
    - setChipsValue(e.value)} /> -
    - -
    -
    -
    -
    Slider
    - setSliderValue(parseInt(e.target.value), 10)} /> - setSliderValue(e.value)} /> -
    -
    -
    Rating
    - setRatingValue(e.value)} /> -
    -
    -
    ColorPicker
    - setColorValue(e.value)} style={{ width: '2rem' }} /> -
    -
    -
    Knob
    - setKnobValue(e.value)} step={10} min={-50} max={50} /> -
    -
    -
    + return ( +
    +
    +
    +
    InputText
    +
    +
    +
    - -
    -
    -
    RadioButton
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    -
    - setRadioValue(e.value)} /> - -
    -
    -
    - -
    Checkbox
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    - -
    Input Switch
    - setSwitchValue(e.value)} /> -
    - -
    -
    Listbox
    - setListboxValue(e.value)} options={listboxValues} optionLabel="name" filter /> - -
    Dropdown
    - setDropdownValue(e.value)} options={dropdownValues} optionLabel="name" placeholder="Select" /> - -
    MultiSelect
    - setMultiselectValue(e.value)} options={multiselectValues} optionLabel="name" placeholder="Select Countries" filter - itemTemplate={itemTemplate} selectedItemTemplate={selectedItemTemplate} /> - -
    TreeSelect
    - setSelectedNode(e.value)} options={treeSelectNodes} placeholder="Select Item"> -
    - -
    -
    ToggleButton
    - setToggleValue(e.value)} onLabel="Yes" offLabel="No" /> - -
    SelectButton
    - setSelectButtonValue1(e.value)} options={selectButtonValues1} optionLabel="name" /> - -
    SelectButton - Multiple
    - setSelectButtonValue2(e.value)} options={selectButtonValues2} optionLabel="name" multiple /> -
    +
    +
    +
    + +
    +
    +
    Icons
    +
    +
    + + + + +
    +
    + + + + +
    +
    + + + + + +
    +
    + +
    Float Label
    + + setFloatValue(e.target.value)} + /> + + + +
    Textarea
    + + +
    AutoComplete
    + setSelectedAutoValue(e.value)} + suggestions={autoFilteredValue} + completeMethod={searchCountry} + field="name" + /> + +
    Calendar
    + setCalendarValue(e.value)} + > + +
    InputNumber
    + setInputNumberValue(e.value)} + showButtons + mode="decimal" + > + +
    Chips
    + setChipsValue(e.value)} /> +
    + +
    +
    -
    -
    Input Groups
    -
    -
    -
    - - - - -
    -
    - -
    -
    - - - - $ - .00 -
    -
    - -
    -
    -
    -
    - -
    -
    - - setInputGroupValue(e.checked)} binary /> - - -
    -
    -
    -
    +
    Slider
    + setSliderValue(parseInt(e.target.value), 10)} + /> + setSliderValue(e.value)} + />
    -
    - ) -} +
    +
    Rating
    + setRatingValue(e.value)} + /> +
    +
    +
    ColorPicker
    + setColorValue(e.value)} + style={{ width: '2rem' }} + /> +
    +
    +
    Knob
    + setKnobValue(e.value)} + step={10} + min={-50} + max={50} + /> +
    +
    +
    +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    RadioButton
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    +
    + setRadioValue(e.value)} + /> + +
    +
    +
    + +
    Checkbox
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    Input Switch
    + setSwitchValue(e.value)} + /> +
    + +
    +
    Listbox
    + setListboxValue(e.value)} + options={listboxValues} + optionLabel="name" + filter + /> + +
    Dropdown
    + setDropdownValue(e.value)} + options={dropdownValues} + optionLabel="name" + placeholder="Select" + /> + +
    MultiSelect
    + setMultiselectValue(e.value)} + options={multiselectValues} + optionLabel="name" + placeholder="Select Countries" + filter + itemTemplate={itemTemplate} + selectedItemTemplate={selectedItemTemplate} + /> + +
    TreeSelect
    + setSelectedNode(e.value)} + options={treeSelectNodes} + placeholder="Select Item" + > +
    + +
    +
    ToggleButton
    + setToggleValue(e.value)} + onLabel="Yes" + offLabel="No" + /> + +
    SelectButton
    + setSelectButtonValue1(e.value)} + options={selectButtonValues1} + optionLabel="name" + /> + +
    SelectButton - Multiple
    + setSelectButtonValue2(e.value)} + options={selectButtonValues2} + optionLabel="name" + multiple + /> +
    +
    + +
    +
    +
    Input Groups
    +
    +
    +
    + + + + +
    +
    + +
    +
    + + + + + + + + $ + .00 +
    +
    + +
    +
    +
    +
    + +
    +
    + + setInputGroupValue(e.checked)} + binary + /> + + +
    +
    +
    +
    +
    +
    + ); }; -export default React.memo(InputDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(InputDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/InvalidStateDemo.js b/web-ui/web-react/src/templates/InvalidStateDemo.js index d11d3e75..378f839b 100644 --- a/web-ui/web-react/src/templates/InvalidStateDemo.js +++ b/web-ui/web-react/src/templates/InvalidStateDemo.js @@ -12,108 +12,170 @@ import { Password } from 'primereact/password'; import { CountryService } from '../service/CountryService'; const InvalidStateDemo = () => { - const [countries, setCountries] = useState([]); - const [filteredCountries, setFilteredCountries] = useState(null); - const [value1, setValue1] = useState(''); - const [value2, setValue2] = useState(''); - const [value3, setValue3] = useState(null); - const [value4, setValue4] = useState(''); - const [value5, setValue5] = useState(''); - const [value6, setValue6] = useState(''); - const [value7, setValue7] = useState(''); - const [value8, setValue8] = useState([]); - const [value9, setValue9] = useState(null); - const [value10, setValue10] = useState(''); + const [countries, setCountries] = useState([]); + const [filteredCountries, setFilteredCountries] = useState(null); + const [value1, setValue1] = useState(''); + const [value2, setValue2] = useState(''); + const [value3, setValue3] = useState(null); + const [value4, setValue4] = useState(''); + const [value5, setValue5] = useState(''); + const [value6, setValue6] = useState(''); + const [value7, setValue7] = useState(''); + const [value8, setValue8] = useState([]); + const [value9, setValue9] = useState(null); + const [value10, setValue10] = useState(''); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' }, - ]; + const cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' }, + ]; - useEffect(() => { - const countryService = new CountryService(); - countryService.getCountries().then((countries) => { - setCountries(countries); - }); - }, []); + useEffect(() => { + const countryService = new CountryService(); + countryService.getCountries().then((countries) => { + setCountries(countries); + }); + }, []); - const searchCountry = (event) => { - // in a real application, make a request to a remote url with the query and - // return filtered results, for demo we filter at client side - const filtered = []; - const query = event.query; - for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { - filtered.push(country); - } - } - setFilteredCountries(filtered); - }; + const searchCountry = (event) => { + // in a real application, make a request to a remote url with the query and + // return filtered results, for demo we filter at client side + const filtered = []; + const query = event.query; + for (let i = 0; i < countries.length; i++) { + const country = countries[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) === 0) { + filtered.push(country); + } + } + setFilteredCountries(filtered); + }; - return ( -
    -
    -
    -
    Invalid State
    -
    -
    -
    - - setValue1(e.target.value)} className="p-invalid" /> -
    -
    - - setValue5(e.value)} suggestions={filteredCountries} completeMethod={searchCountry} field="name" className="p-invalid"/> -
    -
    - - setValue6(e.value)} className="p-invalid" showIcon/> -
    -
    - - setValue8(e.value)} className="p-invalid"/> -
    -
    - - setValue10(e.target.value)} className="p-invalid" /> -
    -
    - -
    -
    - - setValue2(e.value)} className="p-invalid"/> -
    -
    - - setValue3(e.target.value)} className="p-invalid"/> -
    -
    - - setValue7(e.value)} optionLabel="name" className="p-invalid"/> -
    -
    - - setValue9(e.value)} optionLabel="name" className="p-invalid"/> -
    -
    - - setValue4(e.target.value)} className="p-invalid"/> -
    -
    -
    -
    + return ( +
    +
    +
    +
    Invalid State
    +
    +
    +
    + + setValue1(e.target.value)} + className="p-invalid" + /> +
    +
    + + setValue5(e.value)} + suggestions={filteredCountries} + completeMethod={searchCountry} + field="name" + className="p-invalid" + /> +
    +
    + + setValue6(e.value)} + className="p-invalid" + showIcon + /> +
    +
    + + setValue8(e.value)} + className="p-invalid" + /> +
    +
    + + setValue10(e.target.value)} + className="p-invalid" + /> +
    + +
    +
    + + setValue2(e.value)} + className="p-invalid" + /> +
    +
    + + setValue3(e.target.value)} + className="p-invalid" + /> +
    +
    + + setValue7(e.value)} + optionLabel="name" + className="p-invalid" + /> +
    +
    + + setValue9(e.value)} + optionLabel="name" + className="p-invalid" + /> +
    +
    + + setValue4(e.target.value)} + className="p-invalid" + /> +
    +
    +
    - ) -} +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(InvalidStateDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/ListDemo.js b/web-ui/web-react/src/templates/ListDemo.js index 2d73aa5b..2ea17526 100644 --- a/web-ui/web-react/src/templates/ListDemo.js +++ b/web-ui/web-react/src/templates/ListDemo.js @@ -8,154 +8,219 @@ import { OrderList } from 'primereact/orderlist'; import { ProductService } from '../service/ProductService'; const ListDemo = () => { - const listValue = [ - { name: 'San Francisco', code: 'SF' }, - { name: 'London', code: 'LDN' }, - { name: 'Paris', code: 'PRS' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Berlin', code: 'BRL' }, - { name: 'Barcelona', code: 'BRC' }, - { name: 'Rome', code: 'RM' }, - ]; + const listValue = [ + { name: 'San Francisco', code: 'SF' }, + { name: 'London', code: 'LDN' }, + { name: 'Paris', code: 'PRS' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Berlin', code: 'BRL' }, + { name: 'Barcelona', code: 'BRC' }, + { name: 'Rome', code: 'RM' }, + ]; - const [picklistSourceValue, setPicklistSourceValue] = useState(listValue); - const [picklistTargetValue, setPicklistTargetValue] = useState([]); - const [orderlistValue, setOrderlistValue] = useState(listValue); - const [dataviewValue, setDataviewValue] = useState(null); - const [layout, setLayout] = useState('grid'); - const [sortKey, setSortKey] = useState(null); - const [sortOrder, setSortOrder] = useState(null); - const [sortField, setSortField] = useState(null); + const [picklistSourceValue, setPicklistSourceValue] = useState(listValue); + const [picklistTargetValue, setPicklistTargetValue] = useState([]); + const [orderlistValue, setOrderlistValue] = useState(listValue); + const [dataviewValue, setDataviewValue] = useState(null); + const [layout, setLayout] = useState('grid'); + const [sortKey, setSortKey] = useState(null); + const [sortOrder, setSortOrder] = useState(null); + const [sortField, setSortField] = useState(null); - const sortOptions = [ - { label: 'Price High to Low', value: '!price' }, - { label: 'Price Low to High', value: 'price' } - ]; + const sortOptions = [ + { label: 'Price High to Low', value: '!price' }, + { label: 'Price Low to High', value: 'price' }, + ]; - useEffect(() => { - const productService = new ProductService(); - productService.getProducts().then(data => setDataviewValue(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProducts().then((data) => setDataviewValue(data)); + }, []); - const onSortChange = (event) => { - const value = event.value; + const onSortChange = (event) => { + const value = event.value; - if (value.indexOf('!') === 0) { - setSortOrder(-1); - setSortField(value.substring(1, value.length)); - setSortKey(value); - } - else { - setSortOrder(1); - setSortField(value); - setSortKey(value); - } - }; + if (value.indexOf('!') === 0) { + setSortOrder(-1); + setSortField(value.substring(1, value.length)); + setSortKey(value); + } else { + setSortOrder(1); + setSortField(value); + setSortKey(value); + } + }; - const dataviewHeader = ( -
    -
    - -
    -
    - setLayout(e.value)} /> -
    -
    - ); - - const dataviewListItem = (data) => { - return ( -
    -
    - {data.name} -
    -
    {data.name}
    -
    {data.description}
    - -
    - - {data.category} -
    -
    -
    - ${data.price} - - {data.inventoryStatus} -
    -
    -
    - ); - }; - - const dataviewGridItem = (data) => { - return ( -
    -
    -
    -
    - - {data.category} -
    - {data.inventoryStatus} -
    -
    - {data.name} -
    {data.name}
    -
    {data.description}
    - -
    -
    - ${data.price} -
    -
    -
    - ); - }; - - const itemTemplate = (data, layout) => { - if (!data) { - return; - } - - if (layout === 'list') { - return dataviewListItem(data); - } - else if (layout === 'grid') { - return dataviewGridItem(data); - } - }; + const dataviewHeader = ( +
    +
    + +
    +
    + setLayout(e.value)} + /> +
    +
    + ); + const dataviewListItem = (data) => { return ( -
    -
    -
    -
    DataView
    - -
    -
    - -
    -
    -
    PickList
    -
    {item.name}
    } - onChange={(e) => { setPicklistSourceValue(e.source); setPicklistTargetValue(e.target) }} sourceStyle={{ height: '200px' }} targetStyle={{ height: '200px' }}>     -
    -
    - -
    -
    -
    OrderList
    -
    {item.name}
    } - onChange={(e) => setOrderlistValue(e.value)}>     -
    +
    +
    + {data.name} +
    +
    {data.name}
    +
    {data.description}
    + +
    + + {data.category}
    +
    +
    + + ${data.price} + + + + {data.inventoryStatus} + +
    - ) -} +
    + ); + }; -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + const dataviewGridItem = (data) => { + return ( +
    +
    +
    +
    + + {data.category} +
    + + {data.inventoryStatus} + +
    +
    + {data.name} +
    {data.name}
    +
    {data.description}
    + +
    +
    + ${data.price} +
    +
    +
    + ); + }; + + const itemTemplate = (data, layout) => { + if (!data) { + return; + } + + if (layout === 'list') { + return dataviewListItem(data); + } else if (layout === 'grid') { + return dataviewGridItem(data); + } + }; + + return ( +
    +
    +
    +
    DataView
    + +
    +
    + +
    +
    +
    PickList
    +
    {item.name}
    } + onChange={(e) => { + setPicklistSourceValue(e.source); + setPicklistTargetValue(e.target); + }} + sourceStyle={{ height: '200px' }} + targetStyle={{ height: '200px' }} + >     +
    +
    + +
    +
    +
    OrderList
    +
    {item.name}
    } + onChange={(e) => setOrderlistValue(e.value)} + >     +
    +
    +
    + ); }; -export default React.memo(ListDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(ListDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MediaDemo.js b/web-ui/web-react/src/templates/MediaDemo.js index c9b74002..6231bdeb 100644 --- a/web-ui/web-react/src/templates/MediaDemo.js +++ b/web-ui/web-react/src/templates/MediaDemo.js @@ -2,115 +2,163 @@ import React, { useEffect, useState } from 'react'; import { Carousel } from 'primereact/carousel'; import { Galleria } from 'primereact/galleria'; import { Button } from 'primereact/button'; -import { Image } from "primereact/image"; +import { Image } from 'primereact/image'; import { ProductService } from '../service/ProductService'; import { PhotoService } from '../service/PhotoService'; const MediaDemo = () => { - const [products, setProducts] = useState([]); - const [images, setImages] = useState([]); - const galleriaResponsiveOptions = [ - { - breakpoint: "1024px", - numVisible: 5, - }, - { - breakpoint: "960px", - numVisible: 4, - }, - { - breakpoint: "768px", - numVisible: 3, - }, - { - breakpoint: "560px", - numVisible: 1, - }, - ]; - const carouselResponsiveOptions = [ - { - breakpoint: "1024px", - numVisible: 3, - numScroll: 3, - }, - { - breakpoint: "768px", - numVisible: 2, - numScroll: 2, - }, - { - breakpoint: "560px", - numVisible: 1, - numScroll: 1, - }, - ]; + const [products, setProducts] = useState([]); + const [images, setImages] = useState([]); + const galleriaResponsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5, + }, + { + breakpoint: '960px', + numVisible: 4, + }, + { + breakpoint: '768px', + numVisible: 3, + }, + { + breakpoint: '560px', + numVisible: 1, + }, + ]; + const carouselResponsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 3, + numScroll: 3, + }, + { + breakpoint: '768px', + numVisible: 2, + numScroll: 2, + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1, + }, + ]; - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then((products) => setProducts(products)); + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((products) => setProducts(products)); - const photoService = new PhotoService(); - photoService.getImages().then((images) => setImages(images)); - }, []); - - const carouselItemTemplate = (product) => { - return ( -
    -
    -
    - {product.name} -
    -
    -

    - {product.name} -

    -
    ${product.price}
    - {product.inventoryStatus} -
    - - - -
    -
    -
    -
    - ); - }; - - const galleriaItemTemplate = (item) => {item.alt} - const galleriaThumbnailTemplate = (item) => {item.alt} + const photoService = new PhotoService(); + photoService.getImages().then((images) => setImages(images)); + }, []); + const carouselItemTemplate = (product) => { return ( -
    -
    -
    -
    Carousel
    - -
    -
    - -
    -
    -
    Galleria
    - -
    -
    - -
    -
    -
    Image
    -
    - galleria -
    -
    +
    +
    +
    + {product.name} +
    +
    +

    {product.name}

    +
    ${product.price}
    + + {product.inventoryStatus} + +
    + + +
    +
    +
    ); -} + }; -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + const galleriaItemTemplate = (item) => ( + {item.alt} + ); + const galleriaThumbnailTemplate = (item) => ( + {item.alt} + ); + + return ( +
    +
    +
    +
    Carousel
    + +
    +
    + +
    +
    +
    Galleria
    + +
    +
    + +
    +
    +
    Image
    +
    + galleria +
    +
    +
    +
    + ); }; -export default React.memo(MediaDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MediaDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MenuDemo.js b/web-ui/web-react/src/templates/MenuDemo.js index 67552d8b..fe7c7667 100644 --- a/web-ui/web-react/src/templates/MenuDemo.js +++ b/web-ui/web-react/src/templates/MenuDemo.js @@ -17,575 +17,623 @@ import { PaymentDemo } from '../templates/menu/PaymentDemo'; import { SeatDemo } from '../templates/menu/SeatDemo'; const MenuDemo = () => { - const [activeIndex, setActiveIndex] = useState(0); + const [activeIndex, setActiveIndex] = useState(0); - const menu = useRef(null); - const contextMenu = useRef(null); - const history = useHistory(); - const location = useLocation(); + const menu = useRef(null); + const contextMenu = useRef(null); + const history = useHistory(); + const location = useLocation(); - const checkActiveIndex = useCallback(() => { - const paths = location.pathname.split('/'); - const currentPath = paths[paths.length - 1]; + const checkActiveIndex = useCallback(() => { + const paths = location.pathname.split('/'); + const currentPath = paths[paths.length - 1]; - switch (currentPath) { - case 'seat': - setActiveIndex(1); - break; - case 'payment': - setActiveIndex(2); - break; - case 'confirmation': - setActiveIndex(3); - break; - default: - break; - } - },[location]) + switch (currentPath) { + case 'seat': + setActiveIndex(1); + break; + case 'payment': + setActiveIndex(2); + break; + case 'confirmation': + setActiveIndex(3); + break; + default: + break; + } + }, [location]); - useEffect(() => { - checkActiveIndex(); - }, [checkActiveIndex]) + useEffect(() => { + checkActiveIndex(); + }, [checkActiveIndex]); - const nestedMenuitems = [ + const nestedMenuitems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ { - label: 'Customers', - icon: 'pi pi-fw pi-table', + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', + }, + { + label: 'Map', + icon: 'pi pi-fw pi-map-marker', + }, + { + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-sign-out', + }, + ]; + + const breadcrumbHome = { icon: 'pi pi-home', to: '/' }; + const breadcrumbItems = [ + { label: 'Computer' }, + { label: 'Notebook' }, + { label: 'Accessories' }, + { label: 'Backpacks' }, + { label: 'Item' }, + ]; + + const wizardItems = [ + { label: 'Personal', command: () => history.push('/menu') }, + { label: 'Seat', command: () => history.push('/menu/seat') }, + { label: 'Payment', command: () => history.push('/menu/payment') }, + { + label: 'Confirmation', + command: () => history.push('/menu/confirmation'), + }, + ]; + + const tieredMenuItems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', + }, + { + label: 'Map', + icon: 'pi pi-fw pi-map-marker', + }, + { + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + { + separator: true, + }, + { + label: 'Quit', + icon: 'pi pi-fw pi-sign-out', + }, + ]; + + const overlayMenuItems = [ + { + label: 'Save', + icon: 'pi pi-save', + }, + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + separator: true, + }, + { + label: 'Home', + icon: 'pi pi-home', + }, + ]; + + const menuitems = [ + { + label: 'Customers', + items: [ + { + label: 'New', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', + }, + { + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + ]; + + const contextMenuItems = [ + { + label: 'Save', + icon: 'pi pi-save', + }, + { + label: 'Update', + icon: 'pi pi-refresh', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + separator: true, + }, + { + label: 'Options', + icon: 'pi pi-cog', + }, + ]; + + const megamenuItems = [ + { + label: 'Fashion', + icon: 'pi pi-fw pi-tag', + items: [ + [ + { + label: 'Woman', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - }, - - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', + { label: 'Woman Item' }, + { label: 'Woman Item' }, + { label: 'Woman Item' }, + ], + }, + { + label: 'Men', items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - }, - - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', + { label: 'Men Item' }, + { label: 'Men Item' }, + { label: 'Men Item' }, + ], + }, + ], + [ + { + label: 'Kids', + items: [{ label: 'Kids Item' }, { label: 'Kids Item' }], + }, + { + label: 'Luggage', items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', + { label: 'Luggage Item' }, + { label: 'Luggage Item' }, + { label: 'Luggage Item' }, + ], + }, + ], + ], + }, + { + label: 'Electronics', + icon: 'pi pi-fw pi-desktop', + items: [ + [ + { + label: 'Computer', + items: [{ label: 'Computer Item' }, { label: 'Computer Item' }], + }, + { + label: 'Camcorder', items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-sign-out' - } - ]; - - const breadcrumbHome = { icon: 'pi pi-home', to: '/' }; - const breadcrumbItems = [ - { label: 'Computer' }, - { label: 'Notebook' }, - { label: 'Accessories' }, - { label: 'Backpacks' }, - { label: 'Item' } - ]; - - const wizardItems = [ - { label: 'Personal', command: () => history.push('/menu') }, - { label: 'Seat', command: () => history.push('/menu/seat') }, - { label: 'Payment', command: () => history.push('/menu/payment') }, - { label: 'Confirmation', command: () => history.push('/menu/confirmation') } - ]; - - const tieredMenuItems = [ - { - label: 'Customers', - icon: 'pi pi-fw pi-table', + { label: 'Camcorder Item' }, + { label: 'Camcorder Item' }, + { label: 'Camcorder Item' }, + ], + }, + ], + [ + { + label: 'TV', + items: [{ label: 'TV Item' }, { label: 'TV Item' }], + }, + { + label: 'Audio', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', + { label: 'Audio Item' }, + { label: 'Audio Item' }, + { label: 'Audio Item' }, + ], + }, + ], + [ + { + label: 'Sports.7', + items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }], + }, + ], + ], + }, + { + label: 'Furniture', + icon: 'pi pi-fw pi-image', + items: [ + [ + { + label: 'Living Room', items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', + { label: 'Living Room Item' }, + { label: 'Living Room Item' }, + ], + }, + { + label: 'Kitchen', items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', + { label: 'Kitchen Item' }, + { label: 'Kitchen Item' }, + { label: 'Kitchen Item' }, + ], + }, + ], + [ + { + label: 'Bedroom', + items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }], + }, + { + label: 'Outdoor', items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-sign-out' - } - ]; - - const overlayMenuItems = [ - { - label: 'Save', - icon: 'pi pi-save' - }, - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - separator: true - }, - { - label: 'Home', - icon: 'pi pi-home' - } - ]; - - const menuitems = [ - { - label: 'Customers', + { label: 'Outdoor Item' }, + { label: 'Outdoor Item' }, + { label: 'Outdoor Item' }, + ], + }, + ], + ], + }, + { + label: 'Sports', + icon: 'pi pi-fw pi-star', + items: [ + [ + { + label: 'Basketball', + items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }], + }, + { + label: 'Football', items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - } - ]; + { label: 'Football Item' }, + { label: 'Football Item' }, + { label: 'Football Item' }, + ], + }, + ], + [ + { + label: 'Tennis', + items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }], + }, + ], + ], + }, + ]; - const contextMenuItems = [ + const panelMenuitems = [ + { + label: 'Customers', + icon: 'pi pi-fw pi-table', + items: [ { - label: 'Save', - icon: 'pi pi-save' + label: 'New', + icon: 'pi pi-fw pi-user-plus', + items: [ + { + label: 'Customer', + icon: 'pi pi-fw pi-plus', + }, + { + label: 'Duplicate', + icon: 'pi pi-fw pi-copy', + }, + ], }, { - label: 'Update', - icon: 'pi pi-refresh' + label: 'Edit', + icon: 'pi pi-fw pi-user-edit', + }, + ], + }, + { + label: 'Orders', + icon: 'pi pi-fw pi-shopping-cart', + items: [ + { + label: 'View', + icon: 'pi pi-fw pi-list', }, { - label: 'Delete', - icon: 'pi pi-trash' + label: 'Search', + icon: 'pi pi-fw pi-search', + }, + ], + }, + { + label: 'Shipments', + icon: 'pi pi-fw pi-envelope', + items: [ + { + label: 'Tracker', + icon: 'pi pi-fw pi-compass', }, { - separator: true + label: 'Map', + icon: 'pi pi-fw pi-map-marker', }, { - label: 'Options', - icon: 'pi pi-cog' - } - ]; + label: 'Manage', + icon: 'pi pi-fw pi-pencil', + }, + ], + }, + { + label: 'Profile', + icon: 'pi pi-fw pi-user', + items: [ + { + label: 'Settings', + icon: 'pi pi-fw pi-cog', + }, + { + label: 'Billing', + icon: 'pi pi-fw pi-file', + }, + ], + }, + ]; - const megamenuItems = [ - { - label: 'Fashion', icon: 'pi pi-fw pi-tag', - items: [ - [ - { - label: 'Woman', - items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }] - }, - { - label: 'Men', - items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }] - } - ], - [ - { - label: 'Kids', - items: [{ label: 'Kids Item' }, { label: 'Kids Item' }] - }, - { - label: 'Luggage', - items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }] - } - ] - ] - }, - { - label: 'Electronics', icon: 'pi pi-fw pi-desktop', - items: [ - [ - { - label: 'Computer', - items: [{ label: 'Computer Item' }, { label: 'Computer Item' }] - }, - { - label: 'Camcorder', - items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' },] - }, - ], - [ - { - label: 'TV', - items: [{ label: 'TV Item' }, { label: 'TV Item' }] - }, - { - label: 'Audio', - items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }] - } - ], - [ - { - label: 'Sports.7', - items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }] - } - ] - ] - }, - { - label: 'Furniture', icon: 'pi pi-fw pi-image', - items: [ - [ - { - label: 'Living Room', - items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' },] - }, - { - label: 'Kitchen', - items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }] - } - ], - [ - { - label: 'Bedroom', - items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }] - }, - { - label: 'Outdoor', - items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }] - } - ] - ] - }, - { - label: 'Sports', icon: 'pi pi-fw pi-star', - items: [ - [ - { - label: 'Basketball', - items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }] - }, - { - label: 'Football', - items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }] - } - ], - [ - { - label: 'Tennis', - items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }] - } - ] - ] - } - ]; + const toggleMenu = (event) => { + menu.current.toggle(event); + }; - const panelMenuitems = [ - { - label: 'Customers', - icon: 'pi pi-fw pi-table', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - items: [ - { - label: 'Customer', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Duplicate', - icon: 'pi pi-fw pi-copy' - }, - - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-user-edit' - } - ] - }, - { - label: 'Orders', - icon: 'pi pi-fw pi-shopping-cart', - items: [ - { - label: 'View', - icon: 'pi pi-fw pi-list' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-search' - } - ] - }, - { - label: 'Shipments', - icon: 'pi pi-fw pi-envelope', - items: [ - { - label: 'Tracker', - icon: 'pi pi-fw pi-compass' - - }, - { - label: 'Map', - icon: 'pi pi-fw pi-map-marker' - - }, - { - label: 'Manage', - icon: 'pi pi-fw pi-pencil' - } - ] - }, - { - label: 'Profile', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'Settings', - icon: 'pi pi-fw pi-cog' - }, - { - label: 'Billing', - icon: 'pi pi-fw pi-file' - } - ] - } - ]; - - const toggleMenu = (event) => { - menu.current.toggle(event); - }; - - const onContextRightClick = (event) => { - contextMenu.current.show(event); - }; - - const menubarEndTemplate = () => { - return ( - - - - - ); - }; + const onContextRightClick = (event) => { + contextMenu.current.show(event); + }; + const menubarEndTemplate = () => { return ( -
    -
    -
    -
    Menubar
    - -
    -
    + + + + + ); + }; -
    -
    -
    Breadcrumb
    - -
    -
    - -
    -
    -
    Steps
    - setActiveIndex(e.index)} readOnly={false} /> - - - - -
    -
    - -
    -
    -
    TabMenu
    - setActiveIndex(e.index)} /> - - - - -
    -
    - -
    -
    -
    Tiered Menu
    - -
    -
    - -
    -
    -
    Plain Menu
    - -
    -
    - -
    -
    -
    Overlay Menu
    - - -
    - -
    -
    ContextMenu
    - Right click to display. - -
    -
    - -
    -
    -
    MegaMenu - Horizontal
    - - -
    MegaMenu - Vertical
    - -
    -
    - -
    -
    -
    PanelMenu
    - -
    -
    + return ( +
    +
    +
    +
    Menubar
    +
    - ) -} +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    Breadcrumb
    + +
    +
    + +
    +
    +
    Steps
    + setActiveIndex(e.index)} + readOnly={false} + /> + + + + +
    +
    + +
    +
    +
    TabMenu
    + setActiveIndex(e.index)} + /> + + + + +
    +
    + +
    +
    +
    Tiered Menu
    + +
    +
    + +
    +
    +
    Plain Menu
    + +
    +
    + +
    +
    +
    Overlay Menu
    + + +
    + +
    +
    ContextMenu
    + Right click to display. + +
    +
    + +
    +
    +
    MegaMenu - Horizontal
    + + +
    MegaMenu - Vertical
    + +
    +
    + +
    +
    +
    PanelMenu
    + +
    +
    +
    + ); }; -export default React.memo(MenuDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MenuDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MessagesDemo.js b/web-ui/web-react/src/templates/MessagesDemo.js index c373c20a..04c80672 100644 --- a/web-ui/web-react/src/templates/MessagesDemo.js +++ b/web-ui/web-react/src/templates/MessagesDemo.js @@ -6,105 +6,188 @@ import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; const MessagesDemo = () => { - const [username, setUsername] = useState(''); - const [email, setEmail] = useState(''); - const toast = useRef(); - const message = useRef(); + const [username, setUsername] = useState(''); + const [email, setEmail] = useState(''); + const toast = useRef(); + const message = useRef(); - const addSuccessMessage = () => { - message.current.show({ severity: 'success', content: 'Message Detail' }); - }; + const addSuccessMessage = () => { + message.current.show({ severity: 'success', content: 'Message Detail' }); + }; - const addInfoMessage = () => { - message.current.show({ severity: 'info', content: 'Message Detail' }); - }; + const addInfoMessage = () => { + message.current.show({ severity: 'info', content: 'Message Detail' }); + }; - const addWarnMessage = () => { - message.current.show({ severity: 'warn', content: 'Message Detail' }); - }; + const addWarnMessage = () => { + message.current.show({ severity: 'warn', content: 'Message Detail' }); + }; - const addErrorMessage = () => { - message.current.show({ severity: 'error', content: 'Message Detail' }); - }; + const addErrorMessage = () => { + message.current.show({ severity: 'error', content: 'Message Detail' }); + }; - const showSuccess = () => { - toast.current.show({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 }); - }; + const showSuccess = () => { + toast.current.show({ + severity: 'success', + summary: 'Success Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showInfo = () => { - toast.current.show({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 }); - }; + const showInfo = () => { + toast.current.show({ + severity: 'info', + summary: 'Info Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showWarn = () => { - toast.current.show({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 }); - }; + const showWarn = () => { + toast.current.show({ + severity: 'warn', + summary: 'Warn Message', + detail: 'Message Detail', + life: 3000, + }); + }; - const showError = () => { - toast.current.show({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 }); - }; + const showError = () => { + toast.current.show({ + severity: 'error', + summary: 'Error Message', + detail: 'Message Detail', + life: 3000, + }); + }; - return ( -
    -
    -
    -
    Toast
    + return ( +
    +
    +
    +
    Toast
    - -
    -
    - -
    -
    -
    Messages
    - -
    -
    - -
    -
    -
    Inline
    -
    - -
    - setUsername(e.target.value)} required className="p-invalid mr-2"/> - -
    -
    -
    - -
    - setEmail(e.target.value)} required className="p-invalid mr-2"/> - -
    -
    -
    -
    - -
    -
    -
    Help Text
    -
    - - - Enter your username to reset your password. -
    -
    -
    + +
    - ); -} +
    + +
    +
    +
    Messages
    + +
    +
    + +
    +
    +
    Inline
    +
    + +
    + setUsername(e.target.value)} + required + className="p-invalid mr-2" + /> + +
    +
    +
    + +
    + setEmail(e.target.value)} + required + className="p-invalid mr-2" + /> + +
    +
    +
    +
    + +
    +
    +
    Help Text
    +
    + + + + Enter your username to reset your password. + +
    +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(MessagesDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/MiscDemo.js b/web-ui/web-react/src/templates/MiscDemo.js index b47318ab..04665ad0 100644 --- a/web-ui/web-react/src/templates/MiscDemo.js +++ b/web-ui/web-react/src/templates/MiscDemo.js @@ -11,195 +11,341 @@ import { ScrollPanel } from 'primereact/scrollpanel'; import { ScrollTop } from 'primereact/scrolltop'; const MiscDemo = () => { - const [value, setValue] = useState(0); - const interval = useRef(null); + const [value, setValue] = useState(0); + const interval = useRef(null); - useEffect(() => { - let val = value; - interval.current = setInterval(() => { - val += Math.floor(Math.random() * 10) + 1; + useEffect(() => { + let val = value; + interval.current = setInterval(() => { + val += Math.floor(Math.random() * 10) + 1; - if (val >= 100) { - val = 100; - clearInterval(interval.current); - } - setValue(val); - }, 2000); + if (val >= 100) { + val = 100; + clearInterval(interval.current); + } + setValue(val); + }, 2000); - return () => { - if (interval.current) { - clearInterval(interval.current); - interval.current = null; - } - } - }, [value]); + return () => { + if (interval.current) { + clearInterval(interval.current); + interval.current = null; + } + }; + }, [value]); - return ( -
    -
    -
    -
    ProgressBar
    -
    -
    - -
    -
    - -
    -
    -
    + return ( +
    +
    +
    +
    ProgressBar
    +
    +
    +
    -
    -
    -

    Badge

    -
    Numbers
    - - - - - - -
    Positioned Badge
    - - - - -
    Button Badge
    - - - -
    Sizes
    - - - -
    - -
    -

    Avatar

    -
    Avatar Group
    - - - - - - - - - -
    Label - Circle
    - - - - -
    Icon - Badge
    - -
    - -
    -

    ScrollTop

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Vitae et leo duis ut diam. - Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. - Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. - Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. - Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. - Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. - Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. - Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. - Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. - Mattis aliquam faucibus purus in massa tempor nec. -

    - -     -
    -
    -
    -
    -

    Tag

    -
    Tags
    - - - - - - -
    Pills
    - - - - - - -
    Icons
    - - - - - -
    - -
    -

    Chip

    -
    Basic
    -
    - - - - -
    - -
    Icon
    -
    - - - - -
    - -
    Image
    -
    - - - - -
    - -
    Styling
    -
    - - - - -
    -
    - -
    -

    Skeleton

    -
    -
    - -
    - - - -
    -
    - -
    - - -
    -
    -
    +
    +
    +
    - ) -} +
    +
    +
    +

    Badge

    +
    Numbers
    + + + + + -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    Positioned Badge
    + + + + + + + + + + +
    Button Badge
    + + + +
    Sizes
    + + + +
    + +
    +

    Avatar

    +
    Avatar Group
    + + + + + + + + + +
    Label - Circle
    + + + + +
    Icon - Badge
    + + + +
    + +
    +

    ScrollTop

    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae + et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget + est lorem. Amet consectetur adipiscing elit ut. Nam libero justo + laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit + dolor magna. Est ultricies integer quis auctor elit sed vulputate. + Consequat ac felis donec et. Tellus orci ac auctor augue mauris. + Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. + Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend + mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut + etiam sit amet nisl purus. Cursus sit amet dictum sit amet. + Tristique senectus et netus et malesuada fames ac turpis egestas. + Et tortor consequat id porta nibh venenatis cras sed. Diam + maecenas ultricies mi eget mauris. Eget egestas purus viverra + accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies + integer. Mattis aliquam faucibus purus in massa tempor nec. +

    + +     +
    +
    +
    +
    +

    Tag

    +
    Tags
    + + + + + + +
    Pills
    + + + + + + +
    Icons
    + + + + + +
    + +
    +

    Chip

    +
    Basic
    +
    + + + + +
    + +
    Icon
    +
    + + + + +
    + +
    Image
    +
    + + + + +
    + +
    Styling
    +
    + + + + +
    +
    + +
    +

    Skeleton

    +
    +
    + +
    + + + +
    +
    + +
    + + +
    +
    +
    +
    +
    + ); }; -export default React.memo(MiscDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(MiscDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/OverlayDemo.js b/web-ui/web-react/src/templates/OverlayDemo.js index e5f1cb95..51fddc97 100644 --- a/web-ui/web-react/src/templates/OverlayDemo.js +++ b/web-ui/web-react/src/templates/OverlayDemo.js @@ -11,184 +11,368 @@ import { confirmPopup } from 'primereact/confirmpopup'; import { ProductService } from '../service/ProductService'; const OverlayDemo = () => { - const [displayBasic, setDisplayBasic] = useState(false); - const [displayConfirmation, setDisplayConfirmation] = useState(false); - const [visibleLeft, setVisibleLeft] = useState(false); - const [visibleRight, setVisibleRight] = useState(false); - const [visibleTop, setVisibleTop] = useState(false); - const [visibleBottom, setVisibleBottom] = useState(false); - const [visibleFullScreen, setVisibleFullScreen] = useState(false); - const [products, setProducts] = useState(null); - const [selectedProduct, setSelectedProduct] = useState(null); - const op = useRef(null); - const op2 = useRef(null); - const toast = useRef(null); + const [displayBasic, setDisplayBasic] = useState(false); + const [displayConfirmation, setDisplayConfirmation] = useState(false); + const [visibleLeft, setVisibleLeft] = useState(false); + const [visibleRight, setVisibleRight] = useState(false); + const [visibleTop, setVisibleTop] = useState(false); + const [visibleBottom, setVisibleBottom] = useState(false); + const [visibleFullScreen, setVisibleFullScreen] = useState(false); + const [products, setProducts] = useState(null); + const [selectedProduct, setSelectedProduct] = useState(null); + const op = useRef(null); + const op2 = useRef(null); + const toast = useRef(null); - const accept = () => { - toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); - }; + const accept = () => { + toast.current.show({ + severity: 'info', + summary: 'Confirmed', + detail: 'You have accepted', + life: 3000, + }); + }; - const reject = () => { - toast.current.show({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); - }; + const reject = () => { + toast.current.show({ + severity: 'error', + summary: 'Rejected', + detail: 'You have rejected', + life: 3000, + }); + }; - const confirm = (event) => { - confirmPopup({ - target: event.currentTarget, - message: 'Are you sure you want to proceed?', - icon: 'pi pi-exclamation-triangle', - accept, - reject - }); - }; + const confirm = (event) => { + confirmPopup({ + target: event.currentTarget, + message: 'Are you sure you want to proceed?', + icon: 'pi pi-exclamation-triangle', + accept, + reject, + }); + }; - useEffect(() => { - const productService = new ProductService(); - productService.getProductsSmall().then(data => setProducts(data)); - }, []); + useEffect(() => { + const productService = new ProductService(); + productService.getProductsSmall().then((data) => setProducts(data)); + }, []); - const toggle = (event) => { - op.current.toggle(event); - }; + const toggle = (event) => { + op.current.toggle(event); + }; - const toggleDataTable = (event) => { - op2.current.toggle(event); - }; + const toggleDataTable = (event) => { + op2.current.toggle(event); + }; - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); - }; + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; - const onProductSelect = (event) => { - op2.current.hide(); - toast.current.show({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 }); - }; + const onProductSelect = (event) => { + op2.current.hide(); + toast.current.show({ + severity: 'info', + summary: 'Product Selected', + detail: event.data.name, + life: 3000, + }); + }; - const basicDialogFooter =
    -
    -
    -
    -
    Overlay Panel
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Confirmation
    -
    -
    -
    Sidebar
    - setVisibleLeft(false)} baseZIndex={1000}> -

    Left Sidebar

    -     - - setVisibleRight(false)} baseZIndex={1000} position="right"> -

    Right Sidebar

    -     - - setVisibleTop(false)} baseZIndex={1000} position="top"> -

    Top Sidebar

    -     - - setVisibleBottom(false)} baseZIndex={1000} position="bottom"> -

    Bottom Sidebar

    -     - - setVisibleFullScreen(false)} baseZIndex={1000} fullScreen> -

    Full Screen

    -     - -
    -
    - -
    -
    -
    Tooltip
    -
    -
    - -
    - -
    -
    -
    -
    - - -
    -
    ConfirmPopup
    - -
    -
    +
    +
    +
    +
    +
    Overlay Panel
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Confirmation
    +
    +
    +
    Sidebar
    + setVisibleLeft(false)} + baseZIndex={1000} + > +

    Left Sidebar

    +     - - ) -} + setVisibleRight(false)} + baseZIndex={1000} + position="right" + > +

    Right Sidebar

    +     -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + setVisibleTop(false)} + baseZIndex={1000} + position="top" + > +

    Top Sidebar

    +     + + setVisibleBottom(false)} + baseZIndex={1000} + position="bottom" + > +

    Bottom Sidebar

    +     + + setVisibleFullScreen(false)} + baseZIndex={1000} + fullScreen + > +

    Full Screen

    +     + +
    +
    + +
    +
    +
    Tooltip
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    ConfirmPopup
    + +
    +
    +
    + + ); }; -export default React.memo(OverlayDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(OverlayDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/PanelDemo.js b/web-ui/web-react/src/templates/PanelDemo.js index 7590e4b6..f754b824 100644 --- a/web-ui/web-react/src/templates/PanelDemo.js +++ b/web-ui/web-react/src/templates/PanelDemo.js @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, { useRef } from 'react'; import { Toolbar } from 'primereact/toolbar'; import { Button } from 'primereact/button'; import { SplitButton } from 'primereact/splitbutton'; @@ -11,242 +11,347 @@ import { Divider } from 'primereact/divider'; import { InputText } from 'primereact/inputtext'; import { Splitter, SplitterPanel } from 'primereact/splitter'; import { Password } from 'primereact/password'; -import {Menu} from "primereact/menu"; +import { Menu } from 'primereact/menu'; const PanelDemo = () => { - const menu1 = useRef(null); - const toolbarItems = [ - { - label: 'Save', - icon: 'pi pi-check' - }, - { - label: 'Update', - icon: 'pi pi-upload' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - label: 'Home Page', - icon: 'pi pi-home' - }, - ]; - - const toolbarLeftTemplate = () => { - return ( - <> -
    - ); + const menu1 = useRef(null); + const toolbarItems = [ + { + label: 'Save', + icon: 'pi pi-check', + }, + { + label: 'Update', + icon: 'pi pi-upload', + }, + { + label: 'Delete', + icon: 'pi pi-trash', + }, + { + label: 'Home Page', + icon: 'pi pi-home', + }, + ]; + const toolbarLeftTemplate = () => { return ( -
    -
    -
    -
    Toolbar
    - -
    -
    -
    -
    -
    AccordionPanel
    - - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     - -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque - ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. - Consectetur, adipisci velit, sed quia non numquam eius modi.

    -     - -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. - Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit - quo minus.

    -     -     -
    -
    -
    TabView
    - - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

     - -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque - ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. - Consectetur, adipisci velit, sed quia non numquam eius modi.

    -     - -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores - et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. - Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit - quo minus.

    -     -     -
    -
    -
    -
    -
    Panel
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     -
    -
    -
    Fieldset
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -
    -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    -     -
    + <> + -
    -
    -
    - - OR - -
    -
    -

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, - totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

    + - - Badge - +
    + ); -

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum - deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati - cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est - laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. - Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

    - - - - - -

    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et - voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur - a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis - doloribus asperiores repellat. - Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. - Morbi dapibus luctus odio.

    -
    -
    -
    -
    - -
    -
    -
    Splitter
    - - -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim - id est laborum. -
    -     - - - -
    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium - doloremque - laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi - architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia - voluptas - sit - aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione - voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius - modi. -
    -     - -
    - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis - praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias - excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem - rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est - eligendi optio cumque nihil impedit quo minus. -
    -     -     -     -     -
    -
    + return ( +
    +
    +
    +
    Toolbar
    +
    - ) -} +
    +
    +
    +
    AccordionPanel
    + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     + +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    +     + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    +     +     +
    +
    +
    TabView
    + + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     + +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    +     + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    +     +     +
    +
    +
    +
    +
    Panel
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +     +
    +
    +
    Fieldset
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

    +
    +
    + +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

    +     +
    -const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; +
    +
    +
    Divider
    +
    +
    +
    +
    + + + + +
    +
    + + + + +
    + +
    +
    +
    + + OR + +
    +
    +

    + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi + nesciunt. Consectetur, adipisci velit, sed quia non numquam eius + modi. +

    + + + Badge + + +

    + At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos + dolores et quas molestias excepturi sint occaecati cupiditate + non provident, similique sunt in culpa qui officia deserunt + mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, + cum soluta nobis est eligendi optio cumque nihil impedit quo + minus. +

    + + + + + +

    + Temporibus autem quibusdam et aut officiis debitis aut rerum + necessitatibus saepe eveniet ut et voluptates repudiandae sint + et molestiae non recusandae. Itaque earum rerum hic tenetur a + sapiente delectus, ut aut reiciendis voluptatibus maiores alias + consequatur aut perferendis doloribus asperiores repellat. Donec + vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt + eget, egestas vitae sapien. Morbi dapibus luctus odio. +

    +
    +
    +
    +
    + +
    +
    +
    Splitter
    + + +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +     + + + +
    + Sed ut perspiciatis unde omnis iste natus error sit + voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et + quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit + aut fugit, sed quia consequuntur magni dolores eos qui + ratione voluptatem sequi nesciunt. Consectetur, adipisci + velit, sed quia non numquam eius modi. +
    +     + +
    + At vero eos et accusamus et iusto odio dignissimos ducimus + qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint + occaecati cupiditate non provident, similique sunt in culpa + qui officia deserunt mollitia animi, id est laborum et + dolorum fuga. Et harum quidem rerum facilis est et expedita + distinctio. Nam libero tempore, cum soluta nobis est + eligendi optio cumque nihil impedit quo minus. +
    +     +     +     +     +
    +
    +
    + ); }; -export default React.memo(PanelDemo, comparisonFn); \ No newline at end of file +const comparisonFn = function (prevProps, nextProps) { + return prevProps.location.pathname === nextProps.location.pathname; +}; + +export default React.memo(PanelDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/TableDemo.js b/web-ui/web-react/src/templates/TableDemo.js index 2bebc1ea..51c17544 100644 --- a/web-ui/web-react/src/templates/TableDemo.js +++ b/web-ui/web-react/src/templates/TableDemo.js @@ -17,359 +17,740 @@ import { CustomerService } from '../service/CustomerService'; import { ProductService } from '../service/ProductService'; const TableDemo = () => { - const [customers1, setCustomers1] = useState(null); - const [customers2, setCustomers2] = useState([]); - const [customers3, setCustomers3] = useState([]); - const [filters1, setFilters1] = useState(null); - const [loading1, setLoading1] = useState(true); - const [loading2, setLoading2] = useState(true); - const [idFrozen, setIdFrozen] = useState(false); - const [products, setProducts] = useState([]); - const [expandedRows, setExpandedRows] = useState(null); + const [customers1, setCustomers1] = useState(null); + const [customers2, setCustomers2] = useState([]); + const [customers3, setCustomers3] = useState([]); + const [filters1, setFilters1] = useState(null); + const [loading1, setLoading1] = useState(true); + const [loading2, setLoading2] = useState(true); + const [idFrozen, setIdFrozen] = useState(false); + const [products, setProducts] = useState([]); + const [expandedRows, setExpandedRows] = useState(null); - const representatives = [ - { name: "Amy Elsner", image: 'amyelsner.png' }, - { name: "Anna Fali", image: 'annafali.png' }, - { name: "Asiya Javayant", image: 'asiyajavayant.png' }, - { name: "Bernardo Dominic", image: 'bernardodominic.png' }, - { name: "Elwin Sharvill", image: 'elwinsharvill.png' }, - { name: "Ioni Bowcher", image: 'ionibowcher.png' }, - { name: "Ivan Magalhaes", image: 'ivanmagalhaes.png' }, - { name: "Onyama Limba", image: 'onyamalimba.png' }, - { name: "Stephen Shaw", image: 'stephenshaw.png' }, - { name: "XuXue Feng", image: 'xuxuefeng.png' } - ]; + const representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'XuXue Feng', image: 'xuxuefeng.png' }, + ]; - const statuses = [ - 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal' - ]; + const statuses = [ + 'unqualified', + 'qualified', + 'new', + 'negotiation', + 'renewal', + 'proposal', + ]; - const customerService = new CustomerService(); - const productService = new ProductService(); + const customerService = new CustomerService(); + const productService = new ProductService(); - useEffect(() => { - setLoading2(true); + useEffect(() => { + setLoading2(true); - customerService.getCustomersLarge().then(data => { setCustomers1(getCustomers(data)); setLoading1(false) }); - customerService.getCustomersLarge().then(data => { setCustomers2(getCustomers(data)); setLoading2(false); }); - customerService.getCustomersMedium().then(data => setCustomers3(data)); - productService.getProductsWithOrdersSmall().then(data => setProducts(data)); + customerService.getCustomersLarge().then((data) => { + setCustomers1(getCustomers(data)); + setLoading1(false); + }); + customerService.getCustomersLarge().then((data) => { + setCustomers2(getCustomers(data)); + setLoading2(false); + }); + customerService.getCustomersMedium().then((data) => setCustomers3(data)); + productService + .getProductsWithOrdersSmall() + .then((data) => setProducts(data)); - initFilters1(); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + initFilters1(); + }, []); // eslint-disable-line react-hooks/exhaustive-deps - const balanceTemplate = (rowData) => { - return ( - - {formatCurrency(rowData.balance)} - - ) - } + const balanceTemplate = (rowData) => { + return {formatCurrency(rowData.balance)}; + }; - const getCustomers = (data) => { - return [...data || []].map(d => { - d.date = new Date(d.date); - return d; - }); - } + const getCustomers = (data) => { + return [...(data || [])].map((d) => { + d.date = new Date(d.date); + return d; + }); + }; - const formatDate = (value) => { - return value.toLocaleDateString('en-US', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }); - } + const formatDate = (value) => { + return value.toLocaleDateString('en-US', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }); + }; - const formatCurrency = (value) => { - return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); - } + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + }); + }; - const initFilters1 = () => { - setFilters1({ - 'global': { value: null, matchMode: FilterMatchMode.CONTAINS }, - 'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }, - 'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }, - 'representative': { value: null, matchMode: FilterMatchMode.IN }, - 'date': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }, - 'balance': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, - 'status': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, - 'activity': { value: null, matchMode: FilterMatchMode.BETWEEN }, - 'verified': { value: null, matchMode: FilterMatchMode.EQUALS } - }); - } - - - const countryBodyTemplate = (rowData) => { - return ( - - flag - {rowData.country.name} - - ); - } - - const filterClearTemplate = (options) => { - return ; - } - - const filterApplyTemplate = (options) => { - return - } - - const representativeBodyTemplate = (rowData) => { - const representative = rowData.representative; - return ( - - {representative.name} e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} /> - {representative.name} - - ); - } - - const representativeFilterTemplate = (options) => { - return (<> -
    Agent Picker
    - options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" /> - - ) - } - - const representativesItemTemplate = (option) => { - return ( -
    - {option.name} - {option.name} -
    - ); - } - - const dateBodyTemplate = (rowData) => { - return formatDate(rowData.date); - } - - const dateFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" /> - } - - const balanceBodyTemplate = (rowData) => { - return formatCurrency(rowData.balance); - } - - const balanceFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" /> - } - - const statusBodyTemplate = (rowData) => { - return {rowData.status}; - } - - const statusFilterTemplate = (options) => { - return options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />; - } - - const statusItemTemplate = (option) => { - return {option}; - } - - const activityBodyTemplate = (rowData) => { - return ; - } - - const activityFilterTemplate = (options) => { - return ( - - options.filterCallback(e.value)} range className="m-3"> -
    - {options.value ? options.value[0] : 0} - {options.value ? options.value[1] : 100} -
    -     - ) - } - - const verifiedBodyTemplate = (rowData) => { - return ; - } - - const verifiedFilterTemplate = (options) => { - return options.filterCallback(e.value)} /> - } - - const expandAll = () => { - let _expandedRows = {}; - products.forEach(p => _expandedRows[`${p.id}`] = true); - - setExpandedRows(_expandedRows); - } - - const collapseAll = () => { - setExpandedRows(null); - } - - const amountBodyTemplate = (rowData) => { - return formatCurrency(rowData.amount); - } - - const statusOrderBodyTemplate = (rowData) => { - return {rowData.status}; - } - - const searchBodyTemplate = () => { - return
    - ); - - const headerTemplate = (data) => { - return ( - - {data.representative.name} - {data.representative.name} - - ); - } - - const footerTemplate = (data) => { - return ( - - Total Customers - {calculateCustomerTotal(data.representative.name)} - - ); - } - - const calculateCustomerTotal = (name) => { - let total = 0; - - if (customers3) { - for (let customer of customers3) { - if (customer.representative.name === name) { - total++; - } - } - } - - return total; - } + const initFilters1 = () => { + setFilters1({ + global: { value: null, matchMode: FilterMatchMode.CONTAINS }, + name: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }], + }, + 'country.name': { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }], + }, + representative: { value: null, matchMode: FilterMatchMode.IN }, + date: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }], + }, + balance: { + operator: FilterOperator.AND, + constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }], + }, + status: { + operator: FilterOperator.OR, + constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }], + }, + activity: { value: null, matchMode: FilterMatchMode.BETWEEN }, + verified: { value: null, matchMode: FilterMatchMode.EQUALS }, + }); + }; + const countryBodyTemplate = (rowData) => { return ( -
    -
    -
    -
    Filter Menu
    - - - - - - - - - - -
    -
    - -
    -
    - -
    Frozen Columns
    - setIdFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style={{ width: '10rem' }} /> - - - - - - - - - - - - - -
    -
    - -
    -
    -
    Row Expand
    - setExpandedRows(e.data)} responsiveLayout="scroll" - rowExpansionTemplate={rowExpansionTemplate} dataKey="id" header={header}> - - - - - - - - -
    -
    - -
    -
    -
    Subheader Grouping
    - - - - - - - -
    -
    -
    + + flag + + {rowData.country.name} + + ); -} + }; + + const filterClearTemplate = (options) => { + return ( + + ); + }; + + const filterApplyTemplate = (options) => { + return ( + + ); + }; + + const representativeBodyTemplate = (rowData) => { + const representative = rowData.representative; + return ( + + {representative.name} + (e.target.src = + 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png') + } + width={32} + style={{ verticalAlign: 'middle' }} + /> + + {representative.name} + + + ); + }; + + const representativeFilterTemplate = (options) => { + return ( + <> +
    Agent Picker
    + options.filterCallback(e.value)} + optionLabel="name" + placeholder="Any" + className="p-column-filter" + /> + + ); + }; + + const representativesItemTemplate = (option) => { + return ( +
    + {option.name} + + {option.name} + +
    + ); + }; + + const dateBodyTemplate = (rowData) => { + return formatDate(rowData.date); + }; + + const dateFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + dateFormat="mm/dd/yy" + placeholder="mm/dd/yyyy" + mask="99/99/9999" + /> + ); + }; + + const balanceBodyTemplate = (rowData) => { + return formatCurrency(rowData.balance); + }; + + const balanceFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + mode="currency" + currency="USD" + locale="en-US" + /> + ); + }; + + const statusBodyTemplate = (rowData) => { + return ( + + {rowData.status} + + ); + }; + + const statusFilterTemplate = (options) => { + return ( + options.filterCallback(e.value, options.index)} + itemTemplate={statusItemTemplate} + placeholder="Select a Status" + className="p-column-filter" + showClear + /> + ); + }; + + const statusItemTemplate = (option) => { + return {option}; + }; + + const activityBodyTemplate = (rowData) => { + return ( + + ); + }; + + const activityFilterTemplate = (options) => { + return ( + + options.filterCallback(e.value)} + range + className="m-3" + > +
    + {options.value ? options.value[0] : 0} + {options.value ? options.value[1] : 100} +
    +     + ); + }; + + const verifiedBodyTemplate = (rowData) => { + return ( + + ); + }; + + const verifiedFilterTemplate = (options) => { + return ( + options.filterCallback(e.value)} + /> + ); + }; + + const expandAll = () => { + let _expandedRows = {}; + products.forEach((p) => (_expandedRows[`${p.id}`] = true)); + + setExpandedRows(_expandedRows); + }; + + const collapseAll = () => { + setExpandedRows(null); + }; + + const amountBodyTemplate = (rowData) => { + return formatCurrency(rowData.amount); + }; + + const statusOrderBodyTemplate = (rowData) => { + return ( + + {rowData.status} + + ); + }; + + const searchBodyTemplate = () => { + return
    + ); + + const headerTemplate = (data) => { + return ( + + {data.representative.name} + {data.representative.name} + + ); + }; + + const footerTemplate = (data) => { + return ( + + + Total Customers + + {calculateCustomerTotal(data.representative.name)} + + ); + }; + + const calculateCustomerTotal = (name) => { + let total = 0; + + if (customers3) { + for (let customer of customers3) { + if (customer.representative.name === name) { + total++; + } + } + } + + return total; + }; + + return ( +
    +
    +
    +
    Filter Menu
    + + + + + + + + + + +
    +
    + +
    +
    +
    Frozen Columns
    + setIdFrozen(e.value)} + onIcon="pi pi-lock" + offIcon="pi pi-lock-open" + onLabel="Unfreeze Id" + offLabel="Freeze Id" + style={{ width: '10rem' }} + /> + + + + + + + + + + + + + +
    +
    + +
    +
    +
    Row Expand
    + setExpandedRows(e.data)} + responsiveLayout="scroll" + rowExpansionTemplate={rowExpansionTemplate} + dataKey="id" + header={header} + > + + + + + + + + +
    +
    + +
    +
    +
    Subheader Grouping
    + + + + + + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(TableDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/TreeDemo.js b/web-ui/web-react/src/templates/TreeDemo.js index 90e7efdb..82f22823 100644 --- a/web-ui/web-react/src/templates/TreeDemo.js +++ b/web-ui/web-react/src/templates/TreeDemo.js @@ -5,41 +5,54 @@ import { Column } from 'primereact/column'; import { NodeService } from '../service/NodeService'; const TreeDemo = () => { - const [treeNodes, setTreeNodes] = useState([]); - const [selectedTreeNodeKeys, setSelectedTreeNodeKeys] = useState(null); - const [treeTableNodes, setTreeTableNodes] = useState([]); - const [selectedTreeTableNodeKeys, setSelectedTreeTableNodeKeys] = useState([]); + const [treeNodes, setTreeNodes] = useState([]); + const [selectedTreeNodeKeys, setSelectedTreeNodeKeys] = useState(null); + const [treeTableNodes, setTreeTableNodes] = useState([]); + const [selectedTreeTableNodeKeys, setSelectedTreeTableNodeKeys] = useState( + [], + ); - useEffect(() => { - const nodeService = new NodeService(); - nodeService.getTreeNodes().then(data => setTreeNodes(data)); - nodeService.getTreeTableNodes().then(data => setTreeTableNodes(data)); - }, []); + useEffect(() => { + const nodeService = new NodeService(); + nodeService.getTreeNodes().then((data) => setTreeNodes(data)); + nodeService.getTreeTableNodes().then((data) => setTreeTableNodes(data)); + }, []); - return ( -
    -
    -
    -
    Tree
    - setSelectedTreeNodeKeys(e.value)}/> -
    -
    -
    -
    -
    TreeTable
    - setSelectedTreeTableNodeKeys(e.value)}> - - - - -
    -
    + return ( +
    +
    +
    +
    Tree
    + setSelectedTreeNodeKeys(e.value)} + />
    - ) -} +
    +
    +
    +
    TreeTable
    + setSelectedTreeTableNodeKeys(e.value)} + > + + + + +
    +
    +
    + ); +}; const comparisonFn = function (prevProps, nextProps) { - return prevProps.location.pathname === nextProps.location.pathname; + return prevProps.location.pathname === nextProps.location.pathname; }; export default React.memo(TreeDemo, comparisonFn); diff --git a/web-ui/web-react/src/templates/menu/ConfirmationDemo.js b/web-ui/web-react/src/templates/menu/ConfirmationDemo.js index 14556bd3..d5a6dca5 100644 --- a/web-ui/web-react/src/templates/menu/ConfirmationDemo.js +++ b/web-ui/web-react/src/templates/menu/ConfirmationDemo.js @@ -1,10 +1,12 @@ import React from 'react'; export const ConfirmationDemo = () => { - return ( -
    - -

    Confirmation Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    + Confirmation Component Content via Child Route +

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/PaymentDemo.js b/web-ui/web-react/src/templates/menu/PaymentDemo.js index 8a37e836..4afd4bf8 100644 --- a/web-ui/web-react/src/templates/menu/PaymentDemo.js +++ b/web-ui/web-react/src/templates/menu/PaymentDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const PaymentDemo = () => { - return ( -
    - -

    Payment Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Payment Component Content via Child Route

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/PersonalDemo.js b/web-ui/web-react/src/templates/menu/PersonalDemo.js index e9aad639..964df2f5 100644 --- a/web-ui/web-react/src/templates/menu/PersonalDemo.js +++ b/web-ui/web-react/src/templates/menu/PersonalDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const PersonalDemo = () => { - return ( -
    - -

    Personal Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Personal Component Content via Child Route

    +
    + ); +}; diff --git a/web-ui/web-react/src/templates/menu/SeatDemo.js b/web-ui/web-react/src/templates/menu/SeatDemo.js index 989dff7c..bd03ea1b 100644 --- a/web-ui/web-react/src/templates/menu/SeatDemo.js +++ b/web-ui/web-react/src/templates/menu/SeatDemo.js @@ -1,10 +1,10 @@ import React from 'react'; export const SeatDemo = () => { - return ( -
    - -

    Seat Component Content via Child Route

    -
    - ) -} + return ( +
    + +

    Seat Component Content via Child Route

    +
    + ); +}; From c4096300fc6c2cd062db883407ccb2cfe802611b Mon Sep 17 00:00:00 2001 From: Eduardo Quiros Date: Sun, 24 Jul 2022 23:01:15 -0600 Subject: [PATCH 018/100] rename node js workflow for github --- .github/workflows/{mobile.js.yml => node.js.yml} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{mobile.js.yml => node.js.yml} (100%) diff --git a/.github/workflows/mobile.js.yml b/.github/workflows/node.js.yml similarity index 100% rename from .github/workflows/mobile.js.yml rename to .github/workflows/node.js.yml From 4a595d6f44cab97fe80144139cc089e36d2422ee Mon Sep 17 00:00:00 2001 From: Eduardo Quiros Date: Sun, 24 Jul 2022 23:04:37 -0600 Subject: [PATCH 019/100] add 'dev' branch to branch lists for workflows --- .github/workflows/node.js.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index ed3a4edd..d4520efe 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -5,9 +5,9 @@ name: Node.js CI on: push: - branches: ['master'] + branches: ['master', 'dev'] pull_request: - branches: ['master'] + branches: ['master', 'dev'] jobs: build: From 1629edc32a5e4b4b5c80452acdf48eb378fda273 Mon Sep 17 00:00:00 2001 From: Mariela Date: Sun, 24 Jul 2022 23:53:28 -0600 Subject: [PATCH 020/100] establecer primero constantes para obtener comunidades --- .../components/AdministradoresComunidad.js | 40 +++---------------- .../src/components/AdministradoresSistema.js | 2 +- .../src/components/ComunidadViviendas.js | 2 +- 3 files changed, 8 insertions(+), 36 deletions(-) diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js index 06416d5d..3eae0d1f 100644 --- a/web-ui/web-react/src/components/AdministradoresComunidad.js +++ b/web-ui/web-react/src/components/AdministradoresComunidad.js @@ -26,6 +26,9 @@ const AdministradoresComunidad = () => { const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = useState(false); const toast = useRef(null); const dt = useRef(null); + const [communitiesList, setCommunitiesList] = useState([]); + const [communityId, setCommunityId] = useState([]); + let emptyAdminCommunity = { _id: null, @@ -38,7 +41,7 @@ const AdministradoresComunidad = () => { community_id: '', community_name: '', user_type: '2', - status: '' + status: '1' }; async function listaAdmin() { @@ -152,9 +155,6 @@ const AdministradoresComunidad = () => { setDeleteAdminCommunityDialog(true); } - const confirmDeleteSelected = () => { - setDeleteAdminsCommunitiesDialog(true); - } const actionsAdminCommunity = (rowData) => { return ( @@ -164,35 +164,6 @@ const AdministradoresComunidad = () => { ); } - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - -
    + + ) + } + + const rightToolbarTemplate = () => { + return ( + +
    - ); - } - - const leftToolbarTemplate = () => { - return ( - -
    -
    -     - ) - } - - const rightToolbarTemplate = () => { - return ( - -
    +
    +
    +
    Registro de un administrador de una comunidad de viviendas
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    ) } From cf0b5c2d27bff98dd38514bca61ad14b8b110043 Mon Sep 17 00:00:00 2001 From: Mariela Date: Mon, 25 Jul 2022 16:08:00 -0600 Subject: [PATCH 024/100] add validaciones en blanco en inputs --- .../components/AdministradoresComunidad.js | 153 +++++++++++++----- 1 file changed, 114 insertions(+), 39 deletions(-) diff --git a/web-ui/web-react/src/components/AdministradoresComunidad.js b/web-ui/web-react/src/components/AdministradoresComunidad.js index 84120372..7a203a1e 100644 --- a/web-ui/web-react/src/components/AdministradoresComunidad.js +++ b/web-ui/web-react/src/components/AdministradoresComunidad.js @@ -14,22 +14,10 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; import { faHomeAlt } from '@fortawesome/free-solid-svg-icons'; import { Dropdown } from 'primereact/dropdown'; - +import classNames from 'classnames'; const AdministradoresComunidad = () => { - const [listaAdmins, setListaAdmins] = useState([]); - const [listaAdminComunidad, setListaAdminComunidad] = useState([]); - const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); - const [selectedAdminsCommunities, setSelectedAdminsCommunities] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = useState(false); - const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = useState(false); - const toast = useRef(null); - const dt = useRef(null); - const [communitiesList, setCommunitiesList] = useState([]); - const [communityId, setCommunityId] = useState([]); - let emptyAdminCommunity = { _id: null, @@ -39,24 +27,27 @@ const AdministradoresComunidad = () => { email: '', phone: '', password: '', + confirmPassword: '', community_id: '', community_name: '', user_type: '2', status: '1' }; - async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); - let resList = await response.json(); - let list = await resList.message; - console.log(list); + const [listaAdmins, setListaAdmins] = useState([]); + const [listaAdminComunidad, setListaAdminComunidad] = useState([]); + const [adminCommunity, setAdminCommunity] = useState(emptyAdminCommunity); + const [selectedAdminsCommunities, setSelectedAdminsCommunities] = useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteAdminCommunityDialog, setDeleteAdminCommunityDialog] = useState(false); + const [deleteAdminsCommunitiesDialog, setDeleteAdminsCommunitiesDialog] = useState(false); + const [communitiesList, setCommunitiesList] = useState([]); + const [communityId, setCommunityId] = useState(null); + const [submitted, setSubmitted] = useState(false); + const toast = useRef(null); + const dt = useRef(null); - setCommunitiesList(await list); - } - useEffect(() => { - getCommunites(); - }, []) async function listaAdmin() { @@ -83,11 +74,25 @@ const AdministradoresComunidad = () => { }, []) + + async function getCommunites() { + let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); + let resList = await response.json(); + let list = await resList.message; + console.log(list); + + setCommunitiesList(await list); + } + + useEffect(() => { + getCommunites(); + }, []) + const cList = communitiesList.map((item) => ({ label: item.name, value: item.id, })) - + const deleteAdminCommunity = () => { /* fetch('http://localhost:4000/community/deleteCommunity/' + community._id, { @@ -147,8 +152,16 @@ const AdministradoresComunidad = () => { } - const saveCommunityAdmin = () => { + const saveAdminCommunity = () => { + if (adminCommunity.password !== adminCommunity.confirmPassword) { + setSubmitted(true); + } else if (adminCommunity.name && adminCommunity.dni && adminCommunity.last_name && adminCommunity.email && adminCommunity.password && adminCommunity.phone) { + toast.current.show({ severity: 'success', summary: 'Registro exitoso', detail: 'Administrador de Comunidad de vivienda Creada', life: 3000 }); + } else { + setSubmitted(true); + + } } const hideDeleteAdminCommunityDialog = () => { @@ -264,6 +277,18 @@ const AdministradoresComunidad = () => { ) + const onInputChange = (e, name) => { + const val = (e.target && e.target.value) || ''; + let _adminCommunity = { ...adminCommunity }; + _adminCommunity[`${name}`] = val; + + setAdminCommunity(_adminCommunity); + } + + const handleCommunities = (event) => { + const getCommunity = event.target.value; + setCommunityId(getCommunity); + } return (
    @@ -305,30 +330,80 @@ const AdministradoresComunidad = () => {
    Registro de un administrador de una comunidad de viviendas
    - - + +
    +
    + + + + onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.name === '' })} /> +
    + {submitted && adminCommunity.name === '' && Nombre es requirido.} +
    - - + +
    +
    + + + + onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.last_name === '' })} /> +
    + {submitted && adminCommunity.last_name === '' && Apellidos es requirido.} +
    - - + +
    +
    + + + + onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.email === '' })} /> +
    + {submitted && adminCommunity.email === '' && Correo electrónico + es requirido.} +
    - - + +
    +
    + + + + onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.dni === '' })} /> +
    + {submitted && adminCommunity.email === '' && Identificación es requirida.} +
    -
    - - +
    + +
    +
    + + + + onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && adminCommunity.phone === '' })} /> +
    + {submitted && adminCommunity.phone === '' && Número de teléfono es requirida.} +
    -
    +
    - +
    +
    + + + + +
    + {submitted && !communityId && Comunidad es requirida.} +
    -
    From 8989178ed75eda220402719a73dafa116c3460cf Mon Sep 17 00:00:00 2001 From: Traym17 <51390112+Traym17@users.noreply.github.com> Date: Mon, 25 Jul 2022 19:03:32 -0600 Subject: [PATCH 025/100] Cambio de estilo a los guardas de seguridad --- .../src/components/GuardasSeguridad.js | 248 ++++++++++++++++-- 1 file changed, 226 insertions(+), 22 deletions(-) diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js index bc4ec2f8..c6e7b425 100644 --- a/web-ui/web-react/src/components/GuardasSeguridad.js +++ b/web-ui/web-react/src/components/GuardasSeguridad.js @@ -1,21 +1,50 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; +import { Toast } from 'primereact/toast'; +import { Dialog } from 'primereact/dialog'; +import { Toolbar } from 'primereact/toolbar'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faUserAlt } from '@fortawesome/free-solid-svg-icons'; +import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; +import { faAt } from '@fortawesome/free-solid-svg-icons'; +import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; +import { faEllipsis } from '@fortawesome/free-solid-svg-icons'; const GuardasSeguridad = () => { - const [pokemones,setPokemones]=useState([]); + const [listaGuardas,setListaGuardas]=useState([]); const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134'); - async function fetchP(){ + const [guarda, setGuarda] = useState(emptyGuarda); + const [selectedGuardas, setSelectedGuardas] = useState(null); + const [globalFilter, setGlobalFilter] = useState(null); + const [deleteGuardaDialog, setDeleteGuardaDialog] = useState(false); + const [deleteGuardasDialog, setDeleteGuardasDialog] = useState(false); + const toast = useRef(null); + const dt = useRef(null); + let emptyGuarda = { + _id: null, + dni: '', + name: '', + last_name: '', + email: '', + phone: '', + password: '', + user_type: '1', + status: '' + }; + + + + async function listaGuardasF(){ let nombres=await fetch(urlFetch, {method:'GET'}); - let pokemonesRes= await nombres.json(); - setPokemones(pokemonesRes.message); - console.log(pokemones); + let listaGuardasRes= await nombres.json(); + setListaGuardas(listaGuardasRes.message); } useEffect(()=>{ - fetchP(); + listaGuardasF(); },[]) function registrarGuarda() { @@ -31,18 +60,17 @@ const GuardasSeguridad = () => { community_id:"62be68215692582bbfd77134" }; var data2={ - dni: "98765", - name: "Danielito", - last_name: "Rodriguez", - email: "danirodriguez@gmail.com", + dni: "11979037", + name: "Jorge", + last_name: "Soto", + email: "jorgesoto@gmail.com", phone: 84664515, password: "1203", user_type: "2", status: "4", community_id:"62be68215692582bbfd77134" } - console.log(data2); - +console.log('ssss'); fetch('http://localhost:4000/user/createGuard', { cache: 'no-cache', method: 'POST', @@ -62,7 +90,8 @@ const GuardasSeguridad = () => { ) .then( function (response) { - fetchP(); + console.log('fff'); + listaGuardasF(); } ) .catch( @@ -70,18 +99,193 @@ const GuardasSeguridad = () => { ); } + const hideDeleteGuardaDialog = () => { + setDeleteGuardaDialog(false); + } + + const hideDeleteGuardasDialog = () => { + setDeleteGuardasDialog(false); + } + + const confirmDeleteGuarda = (guarda) => { + setGuarda(guarda); + setDeleteGuardaDialog(true); + } + + const confirmDeleteSelected = () => { + setDeleteGuardasDialog(true); + } + + const deleteGuarda = () => { + + fetch('http://localhost:4000/user/deleteAdminSystem/' + guarda._id, { + cache: 'no-cache', + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }) + .then( + function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else + return response.json(); + } + ) + .then( + function (response) { + let _guarda = listaGuardas.filter(val => val._id !== guarda._id); + setListaGuardas(_guarda); + setDeleteGuardaDialog(false); + setGuarda(emptyGuarda); + toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administrador del Sistema Eliminado', life: 3000 }); + } + ) + .catch( + err => { + console.log('Ocurrió un error con el fetch', err) + toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Administrador del Sistema no se pudo Eliminar', life: 3000 }); + } + ); + } + + const deleteSelectedGuardas = () => { + let _guardas = listaGuardas.filter(val => !selectedGuardas.includes(val)); + selectedGuardas.map((item) => { + fetch('http://localhost:4000/user/deleteAdminSystem/' + item._id, { + cache: 'no-cache', + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }) + }) + setListaGuardas(_guardas); + setDeleteGuardasDialog(false); + setSelectedGuardas(null); + toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Administradores del Sistema Eliminados', life: 3000 }); + } + + const actionsAdmin = (rowData) => { + return ( +
    +
    + ); + } + + const leftToolbarTemplate = () => { + return ( + +
    +
    +     + ) + } + + const rightToolbarTemplate = () => { + return ( + +
    - ); - }; + const confirmDeleteAdminCommunity = (adminCommunity) => { + setAdminCommunity(adminCommunity); + setDeleteAdminCommunityDialog(true); + } const confirmDeleteSelected = () => { setDeleteAdminsCommunitiesDialog(true); - } + }; + const actionsAdminCommunity = (rowData) => { return (
    -
    ); - } + }; + const deleteAdminCommunityDialogFooter = ( <> @@ -288,89 +279,81 @@ const AdministradoresComunidad = () => { const header = ( -
    -
    Administradores de Comunidades
    - - - setGlobalFilter(e.target.value)} placeholder="Buscar..." /> - -
    - + + +
    +
    Administradores de Comunidades
    + + + setGlobalFilter(e.target.value)} placeholder="Buscar..." /> + +
    +     ); - }; const headerName = ( <> -

    Nombre

    +

    {' '} + {' '} + Nombre +

    ) - const deleteAdminsCommunityDialogFooter = ( - <> -
    - ); + ); }; export default React.memo(AdministradoresComunidad); diff --git a/web-ui/web-react/src/components/AdministradoresSistema.js b/web-ui/web-react/src/components/AdministradoresSistema.js index c70ed3c5..5d007e38 100644 --- a/web-ui/web-react/src/components/AdministradoresSistema.js +++ b/web-ui/web-react/src/components/AdministradoresSistema.js @@ -36,53 +36,63 @@ const AdministradoresSistema = () => { phone: '', password: '', user_type: '1', - status: '', + status: '1', }; - - function registrarAdmin() { - var data = { - dni: document.getElementById('identificacion').value, - name: document.getElementById('nombre').value, - last_name: document.getElementById('apellidos').value, - email: document.getElementById('correo_electronico').value, - phone: document.getElementById('telefono').value, - password: document.getElementById('correo_electronico').value, - user_type: "1", //1 es admin - status: "1" - }; - setSysAdmin(data) - // console.log(data); + async function fetchP() { + let nombres = await fetch(urlFetch, { method: 'GET' }); + let adminRes = await nombres.json(); + setAdministrators(adminRes.message); + console.log(administrators); + } + useEffect(() => { + fetchP(); + }, []) - fetch('http://localhost:4000/user/createAdminSystem/', { - cache: 'no-cache', - method: 'POST', - body: JSON.stringify(data), - headers: { - 'Content-Type': 'application/json' - } - }) - .then( - function (response) { - if (response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); - } - ) - .then( - function (response) { - let _administrators = [...administrators]; - let _admin = { ...sysadmin }; - _administrators.push(_admin); - setAdministrators(_administrators) - } - ) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); - } + + function registrarAdmin() { + var data = { + dni: document.getElementById('identificacion').value, + name: document.getElementById('nombre').value, + last_name: document.getElementById('apellidos').value, + email: document.getElementById('correo_electronico').value, + phone: document.getElementById('telefono').value, + password: document.getElementById('correo_electronico').value, + user_type: "1", //1 es admin + status: "1" + }; + setSysAdmin(data) + // console.log(data); + + fetch('http://localhost:4000/user/createAdminSystem/', { + cache: 'no-cache', + method: 'POST', + body: JSON.stringify(data), + headers: { + 'Content-Type': 'application/json' + } + }) + .then( + function (response) { + if (response.status != 201) + console.log('Ocurrió un error con el servicio: ' + response.status); + else + return response.json(); + } + ) + .then( + function (response) { + let _administrators = [...administrators]; + let _admin = { ...sysadmin }; + _administrators.push(_admin); + setAdministrators(_administrators) + } + ) + .catch( + err => console.log('Ocurrió un error con el fetch', err) + ); + } const confirmDeleteAdminSystem = (sysAdmin) => { setSysAdmin(sysAdmin); @@ -93,6 +103,15 @@ const AdministradoresSistema = () => { setDeleteAdminsSystemDialog(true); }; + const hideDeleteAdminSystemDialog = () => { + setDeleteAdminSystemDialog(false); + }; + + const hideDeleteAdminsSystemDialog = () => { + setDeleteAdminsSystemDialog(false); + }; + + const deleteSysAdmin = () => { fetch('http://localhost:4000/user/deleteAdminSystem/' + sysadmin._id, { cache: 'no-cache', @@ -198,7 +217,7 @@ const AdministradoresSistema = () => { const header = (
    - Administradores del sistema + Administradores del sistema
    @@ -234,7 +253,7 @@ const AdministradoresSistema = () => { label="No" icon="pi pi-times" className="p-button-text" - onClick={hideDeleteAdminsSystemsDialog} + onClick={hideDeleteAdminsSystemDialog} />