add: dashboard page & other logic

Code0987 · Sep 14, 2022 · b26277a · b26277a
1 parent 838e745
commit b26277a
Show file tree

Hide file tree

Showing 63 changed files with 1,550 additions and 573 deletions.
diff --git a/components/AsideMenu.tsx b/components/AsideMenu.tsx
@@ -1,21 +1,30 @@
 import React from 'react'
+import { MenuAsideItem } from '../interfaces'
 import AsideMenuLayer from './AsideMenuLayer'
 import OverlayLayer from './OverlayLayer'
 
+type Props = {
+  menu: MenuAsideItem[]
+  isAsideMobileExpanded: boolean
+  isAsideLgActive: boolean
+  onAsideLgClose: Function
+}
+
 export default function AsideMenu({
-  menu,
   isAsideMobileExpanded = false,
   isAsideLgActive = false,
-}) {
+  ...props
+}: Props) {
   return (
     <>
       <AsideMenuLayer
-        menu={menu}
+        menu={props.menu}
         className={`${isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'} ${
           !isAsideLgActive ? 'lg:hidden xl:flex' : ''
         }`}
+        onAsideLgCloseClick={props.onAsideLgClose}
       />
-      {isAsideLgActive && <OverlayLayer zIndex="z-30" />}
+      {isAsideLgActive && <OverlayLayer zIndex="z-30" onClick={props.onAsideLgClose} />}
     </>
   )
 }
diff --git a/components/AsideMenuItem.tsx b/components/AsideMenuItem.tsx
@@ -1,31 +1,60 @@
-
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { mdiMinus, mdiPlus } from '@mdi/js'
 import BaseIcon from './BaseIcon'
 import Link from 'next/link'
 import { getButtonColor } from '../src/colors'
 import AsideMenuList from './AsideMenuList'
 import { MenuAsideItem } from '../interfaces'
 import { useAppSelector } from '../src/stores/hooks'
+import { useRouter } from 'next/router'
 
 type Props = {
-  item: MenuAsideItem,
+  item: MenuAsideItem
   isDropdownList?: boolean
 }
 
-export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
+const AsideMenuItem = ({ item, isDropdownList = false }: Props) => {
+  const [isLinkActive, setIsLinkActive] = useState(false)
   const [isDropdownActive, setIsDropdownActive] = useState(false)
+
   const asideMenuItemStyle = useAppSelector((state) => state.style.asideMenuItemStyle)
   const asideMenuDropdownStyle = useAppSelector((state) => state.style.asideMenuDropdownStyle)
+  const asideMenuItemActiveStyle = useAppSelector((state) => state.style.asideMenuItemActiveStyle)
+
+  const activeClassAddon = !item.color && isLinkActive ? asideMenuItemActiveStyle : ''
+
+  const { asPath, isReady } = useRouter()
+
+  useEffect(() => {
+    if (item.href && isReady) {
+      const linkPathName = new URL(item.href, location.href).pathname
+
+      const activePathname = new URL(asPath, location.href).pathname
+
+      if (linkPathName === activePathname) {
+        setIsLinkActive(true)
+      }
+    }
+  })
 
   const asideMenuItemInnerContents = (
     <>
-      {item.icon && <BaseIcon path={item.icon} className="flex-none" w="w-16" size="18" />}
-      <span className={`grow text-ellipsis line-clamp-1 ${item.menu ? '' : 'pr-12'}`}>
+      {item.icon && (
+        <BaseIcon path={item.icon} className={`flex-none ${activeClassAddon}`} w="w-16" size="18" />
+      )}
+      <span
+        className={`grow text-ellipsis line-clamp-1 ${
+          item.menu ? '' : 'pr-12'
+        } ${activeClassAddon}`}
+      >
         {item.label}
       </span>
       {item.menu && (
-        <BaseIcon path={isDropdownActive ? mdiMinus : mdiPlus} className="flex-none" w="w-12" />
+        <BaseIcon
+          path={isDropdownActive ? mdiMinus : mdiPlus}
+          className={`flex-none ${activeClassAddon}`}
+          w="w-12"
+        />
       )}
     </>
   )
@@ -41,11 +70,15 @@ export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
   return (
     <li>
       {item.href && (
-        <Link href={item.href} target={item.target}>
+        <Link href={item.href} target={item.target} passHref>
           <a className={componentClass}>{asideMenuItemInnerContents}</a>
         </Link>
       )}
-      {!item.href && <div className={componentClass}>{asideMenuItemInnerContents}</div>}
+      {!item.href && (
+        <div className={componentClass} onClick={() => setIsDropdownActive(!isDropdownActive)}>
+          {asideMenuItemInnerContents}
+        </div>
+      )}
       {item.menu && (
         <AsideMenuList
           menu={item.menu}
@@ -58,3 +91,5 @@ export default function AsideMenuItem({ item, isDropdownList = false }: Props) {
     </li>
   )
 }
+
+export default AsideMenuItem
diff --git a/components/AsideMenuLayer.tsx b/components/AsideMenuLayer.tsx
@@ -7,11 +7,12 @@ import { MenuAsideItem } from '../interfaces'
 import { useAppSelector } from '../src/stores/hooks'
 
 type Props = {
-  menu: MenuAsideItem[],
+  menu: MenuAsideItem[]
   className?: string
+  onAsideLgCloseClick: Function
 }
 
-export default function AsideMenuLayer({ menu, className='' }: Props) {
+export default function AsideMenuLayer({ menu, className = '', ...props }: Props) {
   const asideStyle = useAppSelector((state) => state.style.asideStyle)
   const asideBrandStyle = useAppSelector((state) => state.style.asideBrandStyle)
   const asideScrollbarsStyle = useAppSelector((state) => state.style.asideScrollbarsStyle)
@@ -24,6 +25,11 @@ export default function AsideMenuLayer({ menu, className='' }: Props) {
     isLogout: true,
   }
 
+  const handleAsideLgCloseClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    props.onAsideLgCloseClick()
+  }
+
   return (
     <aside
       className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
@@ -37,7 +43,10 @@ export default function AsideMenuLayer({ menu, className='' }: Props) {
           <div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
             <b className="font-black">One</b>
           </div>
-          <button className="hidden lg:inline-block xl:hidden p-3">
+          <button
+            className="hidden lg:inline-block xl:hidden p-3"
+            onClick={handleAsideLgCloseClick}
+          >
             <BaseIcon path={mdiClose} />
           </button>
         </div>

diff --git a/components/AsideMenuList.tsx b/components/AsideMenuList.tsx
@@ -3,8 +3,8 @@ import { MenuAsideItem } from '../interfaces'
 import AsideMenuItem from './AsideMenuItem'
 
 type Props = {
-  menu: MenuAsideItem[],
-  isDropdownList?: boolean,
+  menu: MenuAsideItem[]
+  isDropdownList?: boolean
   className?: string
 }
 

diff --git a/components/BaseButton.tsx b/components/BaseButton.tsx
@@ -5,20 +5,22 @@ import BaseIcon from './BaseIcon'
 import { ColorButtonKey } from '../interfaces'
 
 type Props = {
-  label?: string,
-  icon?: string,
-  iconSize?: string|number,
-  href?: string,
-  target?: string,
-  type?: string,
-  color?: ColorButtonKey,
-  className?: string,
-  asAnchor?: boolean,
-  small?: boolean,
-  outline?: boolean,
-  active?: boolean,
-  disabled?: boolean,
+  label?: string
+  icon?: string
+  iconSize?: string | number
+  href?: string
+  target?: string
+  type?: string
+  color?: ColorButtonKey
+  className?: string
+  asAnchor?: boolean
+  small?: boolean
+  outline?: boolean
+  active?: boolean
+  disabled?: boolean
   roundedFull?: boolean
+  isGrouped?: boolean
+  onClick?: Function
 }
 
 export default function BaseButton({
@@ -28,14 +30,16 @@ export default function BaseButton({
   href,
   target,
   type,
-  color='white',
-  className='',
+  color = 'white',
+  className = '',
   asAnchor = false,
   small = false,
   outline = false,
   active = false,
   disabled = false,
   roundedFull = false,
+  isGrouped = false,
+  onClick,
 }: Props) {
   const componentClass = [
     'inline-flex',
@@ -65,6 +69,10 @@ export default function BaseButton({
     componentClass.push(outline ? 'opacity-50' : 'opacity-70')
   }
 
+  if (isGrouped) {
+    componentClass.push('mr-3 last:mr-0 mb-3')
+  }
+
   const componentClassString = componentClass.join(' ')
 
   const componentChildren = (
@@ -77,16 +85,14 @@ export default function BaseButton({
   if (href && !disabled) {
     return (
       <Link href={href} target={target} passHref>
-        <a className={componentClassString}>
-          {componentChildren}
-        </a>
+        <a className={componentClassString}>{componentChildren}</a>
       </Link>
     )
   }
 
   return React.createElement(
     asAnchor ? 'a' : 'button',
-    { className: componentClassString, type: type ?? 'button', target, disabled },
+    { className: componentClassString, type: type ?? 'button', target, disabled, onClick },
     componentChildren
   )
 }
diff --git a/components/BaseButtons.tsx b/components/BaseButtons.tsx
@@ -1,19 +1,18 @@
-import React, { ReactNode } from 'react'
+import React, { Children, cloneElement, ReactNode } from 'react'
 
 type Props = {
-  type?: string,
-  mb?: string,
-  noWrap: boolean,
+  type?: string
+  mb?: string
+  noWrap?: boolean
   children: ReactNode
 }
 
-export default function BaseButtons({
-  type = 'justify-start',
-  mb = '-mb-3',
-  noWrap = false,
-  children,
-}: Props) {
-  const parentClass = `flex items-center ${type} ${mb} ${noWrap ? 'flex-nowrap' : 'flex-wrap'}`
-
-  return <div className={parentClass}>{children}</div>
+const BaseButtons = ({ type = 'justify-start', mb = '-mb-3', noWrap = false, children }: Props) => {
+  return (
+    <div className={`flex items-center ${type} ${mb} ${noWrap ? 'flex-nowrap' : 'flex-wrap'}`}>
+      {children}
+    </div>
+  )
 }
+
+export default BaseButtons
diff --git a/components/BaseDivider.tsx b/components/BaseDivider.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React from 'react'
 
 type Props = {
   navBar?: boolean

diff --git a/components/BaseIcon.tsx b/components/BaseIcon.tsx
@@ -1,14 +1,20 @@
-import React from "react"
+import React from 'react'
 
 type Props = {
-  path: string,
-  w?: string,
-  h?: string,
-  size?: string|number|null,
+  path: string
+  w?: string
+  h?: string
+  size?: string | number | null
   className?: string
 }
 
-export default function BaseIcon({ path, w = 'w-6', h = 'h-6', size=null, className='' }: Props) {
+export default function BaseIcon({
+  path,
+  w = 'w-6',
+  h = 'h-6',
+  size = null,
+  className = '',
+}: Props) {
   const iconSize = size ?? 16
 
   return (

diff --git a/components/BaseLevel.tsx b/components/BaseLevel.tsx
@@ -1,20 +1,26 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode } from 'react'
 
 type Props = {
-  mobile?: boolean,
-  type?: string,
+  mobile?: boolean
+  type?: string
+  className?: string
   children?: ReactNode
 }
 
-export default function BaseLevel({ mobile = false, type = 'justify-between', children }: Props) {
+export default function BaseLevel({
+  mobile = false,
+  type = 'justify-between',
+  className = '',
+  children,
+}: Props) {
   const parentClass = `${type} items-center`
 
   const parentMobileClass = 'flex'
 
   const parentBaseClass = 'block md:flex'
 
   return (
-    <div className={`${parentClass} ${mobile ? parentMobileClass : parentBaseClass}`}>
+    <div className={`${parentClass} ${className} ${mobile ? parentMobileClass : parentBaseClass}`}>
       {children}
     </div>
   )