refactor: update sidebar style (#175)

hudy9x · May 17, 2024 · 695db28 · 695db28
1 parent 4ca412b
commit 695db28
Show file tree

Hide file tree

Showing 26 changed files with 453 additions and 101 deletions.
diff --git a/packages/be-gateway/src/routes/project/index.ts b/packages/be-gateway/src/routes/project/index.ts
@@ -271,11 +271,13 @@ router.post('/project', async (req: AuthRequest, res) => {
       console.log('done')
 
       delCache([CKEY.USER_PROJECT, userId])
-      console.log('delete cache done')
+
+      const retData: Project = { ...result, projectViewId: firstProjectView.id }
+      console.log('delete cache done', retData)
 
       res.json({
         status: 200,
-        data: result
+        data: retData
       })
     })
 

diff --git a/packages/ui-app/app/[orgID]/ProjectSidebar.tsx b/packages/ui-app/app/[orgID]/ProjectSidebar.tsx
@@ -7,17 +7,17 @@ import ProjectList from '@/features/Project/Nav/index'
 import {
   HiOutlineBriefcase,
   HiOutlineChartPie,
+  HiOutlineChevronLeft,
   HiOutlineServerStack,
-  HiOutlineCog6Tooth,
-  HiOutlineStar,
-  HiOutlineVideoCamera
+  HiOutlineVideoCamera,
 } from 'react-icons/hi2'
 import { Button, Scrollbar } from '@shared/ui'
 import { AiOutlinePlus } from 'react-icons/ai'
 import ProjectAddModal from '@/features/Project/Add/ProjectAddModal'
-import Favorites from '@/features/Favorites'
 import { useMemo, useState } from 'react'
 import { useMenuStore } from '@/store/menu'
+import OrgSection from 'packages/ui-app/layouts/OrgSection'
+import { getLocalCache } from '@shared/libs'
 
 function ViewAllBtn() {
   return (
@@ -44,32 +44,24 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
   const { setVisible: setMenuVisible } = useMenuStore()
   const pathname = usePathname()
   const { push } = useRouter()
-  const [open, setOpen] = useState(false)
 
   if (pathname.includes('/sign-in') || pathname.includes('/sign-up')) {
     return null
   }
 
   const menus = [
+    // {
+    //   title: 'Back',
+    //   href: `/organization`,
+    //   icon: HiArrowLeft,
+    //   active: false
+    // },
     {
       title: 'My works',
       href: `/${orgID}/my-works`,
       icon: HiOutlineBriefcase,
       active: pathname.includes('/my-works')
     },
-    {
-      title: 'Meeting',
-      href: `/${orgID}/meeting`,
-      icon: HiOutlineVideoCamera,
-      active: pathname.includes('/meeting')
-    },
-    {
-      title: 'Favorites',
-      // href: `/${orgID}/favorites`,
-      icon: HiOutlineStar,
-      active: pathname.includes('/favorites'),
-      children: Favorites
-    },
     {
       title: 'Projects',
       href: `/${orgID}/project`,
@@ -78,27 +70,45 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
       active: pathname.includes('/project/') || pathname.includes('/project'),
       children: ProjectList
     },
+    {
+      title: 'Meeting',
+      href: `/${orgID}/meeting`,
+      icon: HiOutlineVideoCamera,
+      active: pathname.includes('/meeting')
+    },
+    // {
+    //   title: 'Favorites',
+    //   // href: `/${orgID}/favorites`,
+    //   icon: HiOutlineStar,
+    //   active: pathname.includes('/favorites'),
+    //   children: Favorites
+    // },
     {
       title: 'Reports',
       href: `/${orgID}/report`,
       icon: HiOutlineChartPie,
       active: pathname.includes(`${orgID}/report`)
     },
-    {
-      title: 'Settings',
-      href: `/${orgID}/setting/people`,
-      icon: HiOutlineCog6Tooth,
-      active: pathname.includes(`${orgID}/setting`)
-    }
+    // {
+    //   title: 'Settings',
+    //   href: `/${orgID}/setting/people`,
+    //   icon: HiOutlineCog6Tooth,
+    //   active: pathname.includes(`${orgID}/setting`)
+    // }
   ]
 
   return (
     <>
-      <aside className={`root-sidebar`}>
-        <RootSidebar />
-        <nav className="secondary-sidebar">
-          <UserSection />
-          <Scrollbar style={{ height: `calc(100vh - 79px)` }}>
+      <aside className={`root-sidebar relative`}>
+        {/* <RootSidebar /> */}
+        <nav className={`secondary-sidebar`}>
+          {/* <div className='absolute -right-[12px] bottom-[71px] z-10'> */}
+          {/*   <div className='w-6 h-6 flex items-center justify-center rounded-full bg-gray-50 dark:bg-gray-900 border dark:border-gray-700 dark:text-gray-400'> */}
+          {/*     <HiOutlineChevronLeft /> */}
+          {/*   </div> */}
+          {/* </div> */}
+          <OrgSection />
+          <Scrollbar style={{ height: `calc(100vh - 141px)` }}>
             <section className="side-nav">
               {menus.map((menu, mindex) => {
                 const Icon = menu.icon
@@ -127,6 +137,8 @@ function ProjectSidebarContainer({ orgID }: { orgID: string }) {
               })}
             </section>
           </Scrollbar>
+
+          <UserSection />
         </nav>
       </aside>
     </>

diff --git a/packages/ui-app/app/[orgID]/layout.tsx b/packages/ui-app/app/[orgID]/layout.tsx
@@ -27,7 +27,7 @@ export default function ProjectLayout({
       <ProjectSidebar />
       <main
         className="main-content w-full"
-        style={{ width: 'calc(100% - 308px)' }}>
+        style={{ width: 'calc(100% - 251px)' }}>
         <HamburgerMenu />
         {children}
       </main>

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/ProjectNav.tsx
@@ -110,12 +110,13 @@ export default function ProjectNav() {
     <div className="project-nav">
       <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
         <h2 className="text-xl pb-2 sm:pb-0 dark:text-gray-200 font-bold px-4 pt-2 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Link
-              href={`${params.orgID}/project`}
-              className="hidden sm:inline-block p-2 border rounded-md bg-white text-sm text-gray-500 hover:bg-gray-50 dark:bg-slate-900 dark:border-gray-700 dark:hover:bg-slate-800">
-              <AiOutlineArrowLeft />
-            </Link>
+          <div className="flex items-center gap-2 mb-1">
+            {/* <Link */}
+            {/*   href={`${params.orgID}/project`} */}
+            {/*   className="hidden sm:inline-block p-2 border rounded-md bg-white text-sm text-gray-500 hover:bg-gray-50 dark:bg-slate-900 dark:border-gray-700 dark:hover:bg-slate-800"> */}
+            {/*   <AiOutlineArrowLeft /> */}
+            {/* </Link> */}
+
             {selectedProject?.icon ? (
               <img
                 alt={selectedProject.icon}
@@ -124,7 +125,7 @@ export default function ProjectNav() {
               />
             ) : null}
             {selectedProject?.name || (
-              <span className="text-transparent animate-pulse bg-gray-100 dark:bg-gray-700 rounded-md">
+              <span className="text-transparent animate-pulse h-7 bg-gray-100 dark:bg-gray-700 rounded-md">
                 Project
               </span>
             )}

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx
@@ -84,7 +84,7 @@ export default function BoardContainer() {
           return (
             <div
               className="board-container overflow-y-auto custom-scrollbar"
-              style={{ width: 'calc(100vw - 309px)' }}
+              style={{ width: 'calc(100vw - 269px)' }}
               {...provided.droppableProps}
               ref={provided.innerRef}>
               {groupByItems.map((group, groupIndex) => {

diff --git a/packages/ui-app/app/[orgID]/setting/SettingTab.tsx b/packages/ui-app/app/[orgID]/setting/SettingTab.tsx
@@ -27,24 +27,24 @@ export default function SettingTabLayout() {
       active: pathname.includes('/setting/people'),
       enable: true
     },
+    // {
+    //   title: 'Projects',
+    //   name: 'projects',
+    //   href: '#',
+    //   icon: HiOutlineServerStack,
+    //   active: false,
+    //   enable: true
+    // },
+    // {
+    //   title: 'Apps',
+    //   name: 'apps',
+    //   href: '#',
+    //   icon: AiOutlineAppstoreAdd,
+    //   active: false,
+    //   enable: true
+    // },
     {
-      title: 'Projects',
-      name: 'projects',
-      href: '#',
-      icon: HiOutlineServerStack,
-      active: false,
-      enable: true
-    },
-    {
-      title: 'Apps',
-      name: 'apps',
-      href: '#',
-      icon: AiOutlineAppstoreAdd,
-      active: false,
-      enable: true
-    },
-    {
-      title: 'Export/import',
+      title: 'Export',
       name: 'export-import',
       href: '#',
       icon: AiOutlineCloudDownload,

diff --git a/packages/ui-app/app/[orgID]/setting/layout.tsx b/packages/ui-app/app/[orgID]/setting/layout.tsx
@@ -5,7 +5,7 @@ export default function SettingLayout({ children }: { children: ReactNode }) {
   return (
     <div className="project-nav">
       <div className="bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700">
-        <h2 className="text-xl font-bold px-4 py-2">Settings</h2>
+        <h2 className="text-xl font-bold px-4 py-2 pb-[4px]">Settings</h2>
 
         <SettingTabLayout />
       </div>

diff --git a/packages/ui-app/app/_components/EmojiInput/index.tsx b/packages/ui-app/app/_components/EmojiInput/index.tsx
@@ -102,6 +102,7 @@ export default function EmojiInput({
                 const emojiUrl = emoji.getImageUrl(EmojiStyle.TWITTER)
                 // const emojiNative = emoji.emoji
                 setSelected(emojiUrl)
+                setVisible(false)
                 onChange && onChange(emojiUrl)
               }}
             />

diff --git a/packages/ui-app/app/_components/StatusSelectMultiple.tsx b/packages/ui-app/app/_components/StatusSelectMultiple.tsx
@@ -104,7 +104,7 @@ export default function StatusSelectMultiple({
         }}>
         <List.Button>
           {!selectedList || !selectedList.length ? <span className='text-transparent'>Option</span> : null}
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="flex flex-wrap items-center gap-1">
             {slicedList.map(item => {
               const stt = statuses.find(stt => stt.id === item.id)
               const isAllOption = item.id === 'ALL' ? bgOfAll : stt?.color

diff --git a/packages/ui-app/app/_features/Automation/AutomateMenu.tsx b/packages/ui-app/app/_features/Automation/AutomateMenu.tsx
@@ -40,7 +40,7 @@ export default function AutomateMenu() {
   const SelectedContent = asides.find(s => s.active)?.content
 
   return (
-    <div className="pt-8 w-[1200px] ml-8">
+    <div className="pt-8 w-[1024px] ml-8">
       <div className="org">
         <div className="aside-content">
           <aside className="aside-menu">

diff --git a/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx b/packages/ui-app/app/_features/MyWorks/MyWorkContainer.tsx
@@ -29,8 +29,8 @@ export default function MyworkContainer() {
         setProjectId
       }}>
       <div id="my-work">
-        <div className="py-4 sm:py-3 bg-white dark:bg-gray-900 border-b dark:border-gray-800">
-          <div className="sm:w-[1120px] mx-4 sm:mx-auto">
+        <div className="py-4 sm:py-[15px] bg-white dark:bg-gray-900 border-b dark:border-gray-800">
+          <div className="sm:w-[1120px] mx-4 px-4 sm:mx-auto">
             <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
               My works board
             </h2>
@@ -43,7 +43,7 @@ export default function MyworkContainer() {
 
         <div
           className="bg-indigo-50/50 dark:bg-[#182031] overflow-y-auto"
-          style={{ height: 'calc(100vh - 73px)' }}>
+          style={{ height: 'calc(100vh - 79px)' }}>
           <div className="sm:w-[1120px] sm:mx-auto pt-5 px-4 sm:pt-10 grid grid-cols-1 sm:grid-cols-4 gap-6">
             <div className="grid grid-cols-1 sm:grid-cols-2 col-span-3 sm:gap-6">
               <div>

diff --git a/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx b/packages/ui-app/app/_features/Project/List/ProjectAvailable.tsx
@@ -1,32 +1,63 @@
 import { projectGet } from '@/services/project'
 import { useProjectStore } from '@/store/project'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import ProjectItem from './ProjectItem'
 import { useParams } from 'next/navigation'
+import { motion } from 'framer-motion'
+
+
+function LoadingSkeleton({ enabled }: { enabled: boolean }) {
+  if (!enabled) return null
+  return <>{[1, 2, 3].map(item => {
+    return <motion.div
+      key={item}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      className="">
+      <div className="project-item group relative">
+        <div className='w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-700 animate-pulse'></div>
+        <div className="overflow-hidden">
+          <h2 className="text-lg text-transparent bg-gray-100 dark:bg-gray-700 animate-pulse rounded-md h-[20px] w-[100px]" >No title</h2>
+          <p className="text-xs text-transparent bg-gray-100 dark:bg-gray-700 animate-pulse rounded-md mt-[9px] w-[70px]">
+            <span className="flex items-center gap-1">notitle</span>
+          </p>
+        </div>
+      </div>
+    </motion.div>
+
+  })}</>
+}
 
 export default function ProjectAvailable() {
   const { projects, addAllProject } = useProjectStore(state => state)
-  const {orgID} = useParams()
+  const { orgID } = useParams()
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (!projects.length) {
+      setLoading(true)
       projectGet({
-        orgId: orgID, 
+        orgId: orgID,
         isArchive: false
       }).then(result => {
+        setLoading(false)
         const { data, status } = result.data
         // const projects = data as Project[]
         if (status !== 200) return
 
         addAllProject(data)
+      }).catch(err => {
+        console.log(err)
+        setLoading(false)
       })
     }
   }, [JSON.stringify(projects)])
   return (
     <div>
-      <h2 className="text-lg mb-3 text-gray-500">Select one to go</h2>
+      <h2 className="text-lg mb-3 text-gray-500">Available projects</h2>
       <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
-        {projects.map(project => {
+        <LoadingSkeleton enabled={loading} />
+        {!loading && projects.map(project => {
           return <ProjectItem key={project.id} project={project} />
         })}
       </div>

diff --git a/packages/ui-app/app/_features/Project/List/index.tsx b/packages/ui-app/app/_features/Project/List/index.tsx
@@ -15,7 +15,7 @@ import ProjectAvailable from './ProjectAvailable'
 export default function ProjectList() {
   return (
     <div className="bg-indigo-50/50 dark:bg-[#182031]">
-      <div className="bg-white py-3 border-b dark:bg-gray-900 dark:border-gray-700">
+      <div className="bg-white py-[15px] border-b dark:bg-gray-900 dark:border-gray-700">
         <div className="px-5 sm:w-[1120px] mx-auto">
           <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
             Your projects

diff --git a/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx b/packages/ui-app/app/_features/Project/Nav/ProjectNavItem.tsx
@@ -8,6 +8,7 @@ import Badge from '@/components/Badge'
 import Tooltip from 'packages/shared-ui/src/components/Tooltip'
 import { useProjectViewStore } from '@/store/projectView'
 import { useTaskStore } from '@/store/task'
+import { GoDot, GoDotFill } from 'react-icons/go'
 
 export default function ProjectNavItem({
   pinned = false,
@@ -73,15 +74,14 @@ export default function ProjectNavItem({
 
   return (
     <div
-      className={`${active ? 'active' : ''} nav-item group ${
-        visible ? 'opacity-100' : 'opacity-0'
-      } transition-all duration-300`}
+      className={`${active ? 'active' : ''} nav-item group ${visible ? 'opacity-100' : 'opacity-0'
+        } transition-all duration-300`}
       onClick={() => {
         onSelectItem(href)
       }}
       title={name}>
       <div className="left">
-        <HiChevronRight className="text-gray-400 shrink-0" />
+        <GoDot className="ml-0.5 text-gray-400 dark:text-gray-500 shrink-0" />
         <img className="w-5 h-5" src={icon || ''} />
         <span className="whitespace-nowrap truncate">{name}</span>
         {showBadges()}