upgade package

2024-04-23 14:04:21 -04:00
parent ede879d821
commit 44f6fb0816
966 changed files with 7972 additions and 88698 deletions
@@ -0,0 +1,141 @@
+/* eslint-disable no-prototype-builtins */
+import clsx from 'clsx'
+import {useEffect, useRef} from 'react'
+import {ILayout, useLayout} from '../../core'
+import {SidebarMenu} from './sidebar-menu/SidebarMenu'
+import {SidebarFooter} from './SidebarFooter'
+import {SidebarLogo} from './SidebarLogo'
+
+const Sidebar = () => {
+  const {config} = useLayout()
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    updateDOM(config)
+  }, [config])
+
+  if (!config.app?.sidebar?.display) {
+    return null
+  }
+
+  return (
+    <>
+      {(config.layoutType === 'dark-sidebar' || config.layoutType === 'light-sidebar') && (
+        <div
+          ref={sidebarRef}
+          id='kt_app_sidebar'
+          className={clsx('app-sidebar', config.app?.sidebar?.default?.class)}
+        >
+          <SidebarLogo sidebarRef={sidebarRef} />
+          <SidebarMenu />
+          <SidebarFooter />
+        </div>
+      )}
+    </>
+  )
+}
+
+const updateDOM = (config: ILayout) => {
+  if (config.layoutType === 'dark-sidebar' || config.layoutType === 'light-sidebar') {
+    if (config.app?.sidebar?.default?.minimize?.desktop?.enabled) {
+      if (config.app?.sidebar?.default?.minimize?.desktop?.default) {
+        document.body.setAttribute('data-kt-app-sidebar-minimize', 'on')
+      }
+
+      if (config.app?.sidebar?.default?.minimize?.desktop?.hoverable) {
+        document.body.setAttribute('data-kt-app-sidebar-hoverable', 'true')
+      }
+    }
+
+    if (config.app?.sidebar?.default?.minimize?.mobile?.enabled) {
+      if (config.app?.sidebar?.default?.minimize?.mobile?.default) {
+        document.body.setAttribute('data-kt-app-sidebar-minimize-mobile', 'on')
+      }
+
+      if (config.app?.sidebar?.default?.minimize?.mobile?.hoverable) {
+        document.body.setAttribute('data-kt-app-sidebar-hoverable-mobile', 'true')
+      }
+    }
+
+    if (config.app?.sidebar?.default?.collapse?.desktop?.enabled) {
+      if (config.app?.sidebar?.default?.collapse?.desktop?.default) {
+        document.body.setAttribute('data-kt-app-sidebar-collapse', 'on')
+      }
+    }
+
+    if (config.app?.sidebar?.default?.collapse?.mobile?.enabled) {
+      if (config.app?.sidebar?.default?.collapse?.mobile?.default) {
+        document.body.setAttribute('data-kt-app-sidebar-collapse-mobile', 'on')
+      }
+    }
+
+    if (config.app?.sidebar?.default?.push) {
+      if (config.app?.sidebar?.default?.push?.header) {
+        document.body.setAttribute('data-kt-app-sidebar-push-header', 'true')
+      }
+
+      if (config.app?.sidebar?.default?.push?.toolbar) {
+        document.body.setAttribute('data-kt-app-sidebar-push-toolbar', 'true')
+      }
+
+      if (config.app?.sidebar?.default?.push?.footer) {
+        document.body.setAttribute('data-kt-app-sidebar-push-footer', 'true')
+      }
+    }
+
+    if (config.app?.sidebar?.default?.stacked) {
+      document.body.setAttribute('app-sidebar-stacked', 'true')
+    }
+
+    document.body.setAttribute('data-kt-app-sidebar-enabled', 'true')
+    document.body.setAttribute(
+      'data-kt-app-sidebar-fixed',
+      config.app?.sidebar?.default?.fixed?.desktop?.toString() || ''
+    )
+
+    const appSidebarDefaultDrawerEnabled = config.app?.sidebar?.default?.drawer?.enabled
+    let appSidebarDefaultDrawerAttributes: {[attrName: string]: string} = {}
+    if (appSidebarDefaultDrawerEnabled) {
+      appSidebarDefaultDrawerAttributes = config.app?.sidebar?.default?.drawer?.attributes as {
+        [attrName: string]: string
+      }
+    }
+
+    const appSidebarDefaultStickyEnabled = config.app?.sidebar?.default?.sticky?.enabled
+    let appSidebarDefaultStickyAttributes: {[attrName: string]: string} = {}
+    if (appSidebarDefaultStickyEnabled) {
+      appSidebarDefaultStickyAttributes = config.app?.sidebar?.default?.sticky?.attributes as {
+        [attrName: string]: string
+      }
+    }
+
+    setTimeout(() => {
+      const sidebarElement = document.getElementById('kt_app_sidebar')
+      // sidebar
+      if (sidebarElement) {
+        const sidebarAttributes = sidebarElement
+          .getAttributeNames()
+          .filter((t) => t.indexOf('data-') > -1)
+        sidebarAttributes.forEach((attr) => sidebarElement.removeAttribute(attr))
+
+        if (appSidebarDefaultDrawerEnabled) {
+          for (const key in appSidebarDefaultDrawerAttributes) {
+            if (appSidebarDefaultDrawerAttributes.hasOwnProperty(key)) {
+              sidebarElement.setAttribute(key, appSidebarDefaultDrawerAttributes[key])
+            }
+          }
+        }
+
+        if (appSidebarDefaultStickyEnabled) {
+          for (const key in appSidebarDefaultStickyAttributes) {
+            if (appSidebarDefaultStickyAttributes.hasOwnProperty(key)) {
+              sidebarElement.setAttribute(key, appSidebarDefaultStickyAttributes[key])
+            }
+          }
+        }
+      }
+    }, 0)
+  }
+}
+
+export {Sidebar}
@@ -0,0 +1,26 @@
+
+import {KTIcon} from '../../../helpers'
+
+const SidebarFooter = () => {
+  return (
+      <div>
+
+      </div>
+    // <div className='app-sidebar-footer flex-column-auto pt-2 pb-6 px-6' id='kt_app_sidebar_footer'>
+    //   <a
+    //     href={import.meta.env.VITE_APP_PREVIEW_DOCS_URL}
+    //     target='_blank'
+    //     className='btn btn-flex flex-center btn-custom btn-primary overflow-hidden text-nowrap px-0 h-40px w-100'
+    //     data-bs-toggle='tooltip'
+    //     data-bs-trigger='hover'
+    //     data-bs-dismiss-='click'
+    //     title='Metronic Docs & Components'
+    //   >
+    //     {/*<span className='btn-label'>Docs & Components</span>*/}
+    //     <KTIcon iconName='document' className='btn-icon fs-2 m-0' />
+    //   </a>
+    // </div>
+  )
+}
+
+export {SidebarFooter}
@@ -0,0 +1,101 @@
+import {Link} from 'react-router-dom'
+import clsx from 'clsx'
+import {KTIcon, toAbsoluteUrl} from '../../../helpers'
+import {useLayout} from '../../core'
+import {MutableRefObject, useEffect, useRef} from 'react'
+import {ToggleComponent} from '../../../assets/ts/components'
+
+type PropsType = {
+  sidebarRef: MutableRefObject<HTMLDivElement | null>
+}
+
+const SidebarLogo = (props: PropsType) => {
+  const {config} = useLayout()
+  const toggleRef = useRef<HTMLDivElement>(null)
+
+  const appSidebarDefaultMinimizeDesktopEnabled =
+    config?.app?.sidebar?.default?.minimize?.desktop?.enabled
+  const appSidebarDefaultCollapseDesktopEnabled =
+    config?.app?.sidebar?.default?.collapse?.desktop?.enabled
+  const toggleType = appSidebarDefaultCollapseDesktopEnabled
+    ? 'collapse'
+    : appSidebarDefaultMinimizeDesktopEnabled
+    ? 'minimize'
+    : ''
+  const toggleState = appSidebarDefaultMinimizeDesktopEnabled ? 'active' : ''
+  const appSidebarDefaultMinimizeDefault = config.app?.sidebar?.default?.minimize?.desktop?.default
+
+  useEffect(() => {
+    setTimeout(() => {
+      const toggleObj = ToggleComponent.getInstance(toggleRef.current!) as ToggleComponent | null
+
+      if (toggleObj === null) {
+        return
+      }
+
+      // Add a class to prevent sidebar hover effect after toggle click
+      toggleObj.on('kt.toggle.change', function () {
+        // Set animation state
+        props.sidebarRef.current!.classList.add('animating')
+
+        // Wait till animation finishes
+        setTimeout(function () {
+          // Remove animation state
+          props.sidebarRef.current!.classList.remove('animating')
+        }, 300)
+      })
+    }, 600)
+  }, [toggleRef, props.sidebarRef])
+
+  return (
+    <div className='app-sidebar-logo px-6' id='kt_app_sidebar_logo'>
+      <Link to='/dashboard'>
+        {config.layoutType === 'dark-sidebar' ? (
+          <img
+            alt='Logo'
+            src={toAbsoluteUrl('media/logos/default-dark.svg')}
+            className='h-25px app-sidebar-logo-default'
+          />
+        ) : (
+          <>
+            <img
+              alt='Logo'
+              src={toAbsoluteUrl('media/logos/sidelogo.png')}
+              className='h-25px app-sidebar-logo-default theme-light-show'
+            />
+            <img
+              alt='Logo'
+              src={toAbsoluteUrl('media/logos/default-dark.svg')}
+              className='h-25px app-sidebar-logo-default theme-dark-show'
+            />
+          </>
+        )}
+
+        <img
+          alt='Logo'
+          src={toAbsoluteUrl('media/logos/default-small.svg')}
+          className='h-20px app-sidebar-logo-minimize'
+        />
+      </Link>
+
+      {(appSidebarDefaultMinimizeDesktopEnabled || appSidebarDefaultCollapseDesktopEnabled) && (
+        <div
+          ref={toggleRef}
+          id='kt_app_sidebar_toggle'
+          className={clsx(
+            'app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary h-30px w-30px position-absolute top-50 start-100 translate-middle rotate',
+            {active: appSidebarDefaultMinimizeDefault}
+          )}
+          data-kt-toggle='true'
+          data-kt-toggle-state={toggleState}
+          data-kt-toggle-target='body'
+          data-kt-toggle-name={`app-sidebar-${toggleType}`}
+        >
+          <KTIcon iconName='black-left-line' className='fs-3 rotate-180 ms-1' />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export {SidebarLogo}
@@ -0,0 +1 @@
+export * from './Sidebar'
@@ -0,0 +1,30 @@
+import {SidebarMenuMain} from './SidebarMenuMain'
+
+const SidebarMenu = () => {
+  return (
+    <div className='app-sidebar-menu overflow-hidden flex-column-fluid'>
+      <div
+        id='kt_app_sidebar_menu_wrapper'
+        className='app-sidebar-wrapper hover-scroll-overlay-y my-5'
+        data-kt-scroll='true'
+        data-kt-scroll-activate='true'
+        data-kt-scroll-height='auto'
+        data-kt-scroll-dependencies='#kt_app_sidebar_logo, #kt_app_sidebar_footer'
+        data-kt-scroll-wrappers='#kt_app_sidebar_menu'
+        data-kt-scroll-offset='5px'
+        data-kt-scroll-save-state='true'
+      >
+        <div
+          className='menu menu-column menu-rounded menu-sub-indention px-3'
+          id='#kt_app_sidebar_menu'
+          data-kt-menu='true'
+          data-kt-menu-expand='false'
+        >
+          <SidebarMenuMain />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export {SidebarMenu}
@@ -0,0 +1,53 @@
+import {FC} from 'react'
+import clsx from 'clsx'
+import {Link} from 'react-router-dom'
+import {useLocation} from 'react-router'
+import {checkIsActive, KTIcon, WithChildren} from '../../../../helpers'
+import {useLayout} from '../../../core'
+
+type Props = {
+  to: string
+  title: string
+  icon?: string
+  fontIcon?: string
+  hasBullet?: boolean
+}
+
+const SidebarMenuItem: FC<Props & WithChildren> = ({
+  children,
+  to,
+  title,
+  icon,
+  fontIcon,
+  hasBullet = false,
+}) => {
+  const {pathname} = useLocation()
+  const isActive = checkIsActive(pathname, to)
+  const {config} = useLayout()
+  const {app} = config
+
+  return (
+    <div className='menu-item'>
+      <Link className={clsx('menu-link without-sub', {active: isActive})} to={to}>
+        {hasBullet && (
+          <span className='menu-bullet'>
+            <span className='bullet bullet-dot'></span>
+          </span>
+        )}
+        {icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
+          <span className='menu-icon'>
+            {' '}
+            <KTIcon iconName={icon} className='fs-2' />
+          </span>
+        )}
+        {fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
+          <i className={clsx('bi fs-3', fontIcon)}></i>
+        )}
+        <span className='menu-title'>{title}</span>
+      </Link>
+      {children}
+    </div>
+  )
+}
+
+export {SidebarMenuItem}
@@ -0,0 +1,57 @@
+import React from 'react'
+import clsx from 'clsx'
+import {useLocation} from 'react-router'
+import {checkIsActive, KTIcon, WithChildren} from '../../../../helpers'
+import {useLayout} from '../../../core'
+
+type Props = {
+  to: string
+  title: string
+  icon?: string
+  fontIcon?: string
+  hasBullet?: boolean
+}
+
+const SidebarMenuItemWithSub: React.FC<Props & WithChildren> = ({
+  children,
+  to,
+  title,
+  icon,
+  fontIcon,
+  hasBullet,
+}) => {
+  const {pathname} = useLocation()
+  const isActive = checkIsActive(pathname, to)
+  const {config} = useLayout()
+  const {app} = config
+
+  return (
+    <div
+      className={clsx('menu-item', {'here show': isActive}, 'menu-accordion')}
+      data-kt-menu-trigger='click'
+    >
+      <span className='menu-link'>
+        {hasBullet && (
+          <span className='menu-bullet'>
+            <span className='bullet bullet-dot'></span>
+          </span>
+        )}
+        {icon && app?.sidebar?.default?.menu?.iconType === 'svg' && (
+          <span className='menu-icon'>
+            <KTIcon iconName={icon} className='fs-2' />
+          </span>
+        )}
+        {fontIcon && app?.sidebar?.default?.menu?.iconType === 'font' && (
+          <i className={clsx('bi fs-3', fontIcon)}></i>
+        )}
+        <span className='menu-title'>{title}</span>
+        <span className='menu-arrow'></span>
+      </span>
+      <div className={clsx('menu-sub menu-sub-accordion', {'menu-active-bg': isActive})}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export {SidebarMenuItemWithSub}
@@ -0,0 +1,121 @@
+import {useIntl} from 'react-intl'
+import {KTIcon} from '../../../../helpers'
+import {SidebarMenuItemWithSub} from './SidebarMenuItemWithSub'
+import {SidebarMenuItem} from './SidebarMenuItem'
+
+const SidebarMenuMain = () => {
+  const intl = useIntl()
+
+  return (
+    <>
+      <SidebarMenuItem
+        to='/dashboard'
+        icon='element-11'
+        title={intl.formatMessage({id: 'MENU.DASHBOARD'})}
+        fontIcon='bi-app-indicator'
+      />
+      {/*<SidebarMenuItem to='/builder' icon='switch' title='Layout Builder' fontIcon='bi-layers' />*/}
+      <div className='menu-item'>
+        <div className='menu-content pt-8 pb-2'>
+          <span className='menu-section text-muted text-uppercase fs-8 ls-1'>Crafted</span>
+        </div>
+      </div>
+      <SidebarMenuItemWithSub
+        to='/crafted/pages'
+        title='Pages'
+        fontIcon='bi-archive'
+        icon='element-plus'
+      >
+        <SidebarMenuItemWithSub to='/crafted/pages/profile' title='Profile' hasBullet={true}>
+          <SidebarMenuItem to='/crafted/pages/profile/overview' title='Overview' hasBullet={true} />
+          <SidebarMenuItem to='/crafted/pages/profile/projects' title='Projects' hasBullet={true} />
+          <SidebarMenuItem
+            to='/crafted/pages/profile/campaigns'
+            title='Campaigns'
+            hasBullet={true}
+          />
+          <SidebarMenuItem
+            to='/crafted/pages/profile/documents'
+            title='Documents'
+            hasBullet={true}
+          />
+          <SidebarMenuItem
+            to='/crafted/pages/profile/connections'
+            title='Connections'
+            hasBullet={true}
+          />
+        </SidebarMenuItemWithSub>
+
+        <SidebarMenuItemWithSub to='/crafted/pages/wizards' title='Wizards' hasBullet={true}>
+          <SidebarMenuItem
+            to='/crafted/pages/wizards/horizontal'
+            title='Horizontal'
+            hasBullet={true}
+          />
+          <SidebarMenuItem to='/crafted/pages/wizards/vertical' title='Vertical' hasBullet={true} />
+        </SidebarMenuItemWithSub>
+      </SidebarMenuItemWithSub>
+      <SidebarMenuItemWithSub
+        to='/crafted/accounts'
+        title='Accounts'
+        icon='profile-circle'
+        fontIcon='bi-person'
+      >
+        <SidebarMenuItem to='/crafted/account/overview' title='Overview' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/account/settings' title='Settings' hasBullet={true} />
+      </SidebarMenuItemWithSub>
+      <SidebarMenuItemWithSub to='/error' title='Errors' fontIcon='bi-sticky' icon='cross-circle'>
+        <SidebarMenuItem to='/error/404' title='Error 404' hasBullet={true} />
+        <SidebarMenuItem to='/error/500' title='Error 500' hasBullet={true} />
+      </SidebarMenuItemWithSub>
+      <SidebarMenuItemWithSub
+        to='/crafted/widgets'
+        title='Widgets'
+        icon='element-7'
+        fontIcon='bi-layers'
+      >
+        <SidebarMenuItem to='/crafted/widgets/lists' title='Lists' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/widgets/statistics' title='Statistics' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/widgets/charts' title='Charts' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/widgets/mixed' title='Mixed' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/widgets/tables' title='Tables' hasBullet={true} />
+        <SidebarMenuItem to='/crafted/widgets/feeds' title='Feeds' hasBullet={true} />
+      </SidebarMenuItemWithSub>
+      <div className='menu-item'>
+        <div className='menu-content pt-8 pb-2'>
+          <span className='menu-section text-muted text-uppercase fs-8 ls-1'>Apps</span>
+        </div>
+      </div>
+      <SidebarMenuItemWithSub
+        to='/apps/chat'
+        title='Chat'
+        fontIcon='bi-chat-left'
+        icon='message-text-2'
+      >
+        <SidebarMenuItem to='/apps/chat/private-chat' title='Private Chat' hasBullet={true} />
+        <SidebarMenuItem to='/apps/chat/group-chat' title='Group Chart' hasBullet={true} />
+        <SidebarMenuItem to='/apps/chat/drawer-chat' title='Drawer Chart' hasBullet={true} />
+      </SidebarMenuItemWithSub>
+      <SidebarMenuItem
+        to='/apps/user-management/users'
+        icon='abstract-28'
+        title='User management'
+        fontIcon='bi-layers'
+      />
+      {/*<div className='menu-item'>*/}
+      {/*  <a*/}
+      {/*    target='_blank'*/}
+      {/*    className='menu-link'*/}
+      {/*    href={import.meta.env.VITE_APP_PREVIEW_DOCS_URL + '/changelog'}*/}
+      {/*  >*/}
+      {/*    <span className='menu-icon'>*/}
+      {/*      <KTIcon iconName='code' className='fs-2' />*/}
+      {/*    </span>*/}
+      {/*    <span className='menu-title'>Changelog {import.meta.env.VITE_APP_VERSION}</span>*/}
+      {/*  </a>*/}
+      {/*</div>*/}
+    </>
+  )
+}
+
+export {SidebarMenuMain}