feat: trash path switcher ui

linagora · Sep 15, 2023 · 3363e60 · 3363e60
1 parent 6f462ca
commit 3363e60
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 27 deletions.
diff --git a/tdrive/frontend/public/locales/en.json b/tdrive/frontend/public/locales/en.json
@@ -265,6 +265,8 @@
     "components.side_menu.buttons.upload": "Upload",
     "components.side_menu.buttons.create": "Create",
     "components.side_menu.buttons.empty_trash": "Empty trash",
+    "components.header_path.shared_trash": "Shared Trash",
+    "components.header_path.my_trash": "My Trash",
     "scenes.app.drive.nothing": "Nothing here.",
     "scenes.app.drive.drag_and_drop": "Drag and drop files to upload them or click on the 'Add document' button.",
     "scenes.app.drive.add_doc": "Add document or folder",

diff --git a/tdrive/frontend/public/locales/fr.json b/tdrive/frontend/public/locales/fr.json
@@ -265,6 +265,8 @@
     "components.side_menu.buttons.upload": "Télécharger",
     "components.side_menu.buttons.create": "Créer",
     "components.side_menu.buttons.empty_trash": "Vider la corbeille",
+    "components.header_path.shared_trash": "Corbeille partagée",
+    "components.header_path.my_trash": "Ma corbeille",    
     "scenes.app.drive.nothing": "Rien ici.",
     "scenes.app.drive.drag_and_drop": "Faites glisser et déposez des fichiers pour les télécharger ou cliquez sur le bouton 'Ajouter un document'.",
     "scenes.app.drive.add_doc": "Ajouter un document ou un dossier",

diff --git a/tdrive/frontend/public/locales/ru.json b/tdrive/frontend/public/locales/ru.json
@@ -265,6 +265,8 @@
     "components.side_menu.buttons.upload": "Загрузить",
     "components.side_menu.buttons.create": "Создать",
     "components.side_menu.buttons.empty_trash": "Очистить козину",
+    "components.header_path.shared_trash": "Shared Trash",
+    "components.header_path.my_trash": "My Trash",
     "scenes.app.drive.nothing": "Здесь ничего нет.",
     "scenes.app.drive.drag_and_drop": "Перенесите сюда файлы чтобы загрузить их или нажмите кнопку \"Добавить файл\"",
     "scenes.app.drive.add_doc": "Добавить файл или папку",

diff --git a/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx b/tdrive/frontend/src/app/views/client/body/drive/header-path.tsx
@@ -5,7 +5,10 @@ import { useEffect, useState } from 'react';
 import { PublicIcon } from './components/public-icon';
 import MenusManager from '@components/menus/menus-manager.jsx';
 import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
-import Languages from "features/global/services/languages-service";
+import Languages from 'features/global/services/languages-service';
+import { useHistory } from 'react-router-dom';
+import useRouterCompany from '@features/router/hooks/use-router-company';
+import RouterServices from '@features/router/services/router-service';
 
 export default ({
   path: livePath,
@@ -17,18 +20,35 @@ export default ({
   setParentId: (id: string) => void;
 }) => {
   const [savedPath, setSavedPath] = useState<DriveItem[]>([]);
+  const { user } = useCurrentUser();
+  const history = useHistory();
+  const company = useRouterCompany();
   useEffect(() => {
     if (livePath) setSavedPath(livePath);
   }, [livePath]);
   const path = livePath || savedPath;
 
-  return <PathRender inTrash={inTrash || false} path={path} onClick={id => setParentId(id)} />;
+  return (
+    <PathRender
+      inTrash={inTrash || false}
+      path={path}
+      onClick={id => {
+        history.push(
+          RouterServices.generateRouteFromState({
+            companyId: company,
+            viewId: id,
+          }),
+        );
+        setParentId(id);
+      }}
+    />
+  );
 };
 
-function cutFileName (name: any){
-  if (typeof name !== "undefined" ){
-    if (name.length >= 30){
-      return name.substring(0,30)+" ...";
+function cutFileName(name: any) {
+  if (typeof name !== 'undefined') {
+    if (name.length >= 30) {
+      return name.substring(0, 30) + ' ...';
     } else {
       return name;
     }
@@ -103,27 +123,55 @@ const PathItem = ({
   onClick: (id: string) => void;
 }) => {
   const { user } = useCurrentUser();
+  const { viewId } = RouterServices.getStateFromRoute();
   return (
     <div className="flex items-center">
       <a
         href="#"
         className="text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
         onClick={evt => {
-        if (first && user?.id) {
-            MenusManager.openMenu(
-              [
-                { type: 'menu', text: Languages.t('components.side_menu.home'), onClick: () => onClick('root') },
-                { type: 'menu', text: Languages.t('components.side_menu.my_drive'), onClick: () => onClick('user_' + user?.id) },
-              ],
-              { x: evt.clientX, y: evt.clientY },
-              'center',
-            );
+          const driveMenuItems = [
+            {
+              type: 'menu',
+              text: Languages.t('components.side_menu.home'),
+              onClick: () => onClick('root'),
+            },
+            {
+              type: 'menu',
+              text: Languages.t('components.side_menu.my_drive'),
+              onClick: () => onClick('user_' + user?.id),
+            },
+          ];
+
+          const trashMenuItems = [
+            {
+              type: 'menu',
+              text: Languages.t('components.header_path.my_trash'),
+              onClick: () => onClick('trash_' + user?.id),
+            },
+            {
+              type: 'menu',
+              text: Languages.t('components.header_path.shared_trash'),
+              onClick: () => onClick('trash'),
+            },
+          ];
+
+          if (first && user?.id) {
+            if (viewId?.includes('trash')) {
+              MenusManager.openMenu(trashMenuItems, { x: evt.clientX, y: evt.clientY }, 'center');
+            } else {
+              MenusManager.openMenu(driveMenuItems, { x: evt.clientX, y: evt.clientY }, 'center');
+            }
           } else {
             onClick(item?.id || '');
           }
         }}
       >
-        <Title>{cutFileName(item?.name) || ''}</Title>
+        <Title>
+          {viewId?.includes('trash_') && Languages.t('components.header_path.my_trash')}
+          {viewId === 'trash' && Languages.t('components.header_path.shared_trash')}
+          {!viewId?.includes('trash') && (cutFileName(item?.name) || '')}
+        </Title>
       </a>
       {item?.access_info?.public?.level && item?.access_info?.public?.level !== 'none' && (
         <PublicIcon className="h-5 w-5 ml-2" />

diff --git a/tdrive/frontend/src/app/views/client/side-bar/index.tsx b/tdrive/frontend/src/app/views/client/side-bar/index.tsx
@@ -109,23 +109,13 @@ export default () => {
             </Button>
           </>
         )}
-        {rootAccess === 'manage' && (
-          <Button
-            onClick={() =>{history.push(RouterServices.generateRouteFromState({companyId: company, viewId: 'trash'}));setParentId('trash')}}
-            size="lg"
-            theme="white"
-            className={'w-full mb-1 ' + (folderType === 'trash' && viewId == ''? activeClass : '')}
-          >
-            <TrashIcon className="w-5 h-5 mr-4 text-rose-500" /> {Languages.t('components.side_menu.trash')}
-          </Button>
-        )}
         <Button
           onClick={() =>{history.push(RouterServices.generateRouteFromState({companyId: company, viewId: 'trash_'+user?.id}));setParentId('trash_'+user?.id)}}
           size="lg"
           theme="white"
           className={'w-full mb-1 ' + (folderType === 'trash' && viewId == ''? activeClass : '')}
         >
-          <TrashIcon className="w-5 h-5 mr-4 text-rose-500" /> {Languages.t('components.side_menu.trash')} (personal)
+          <TrashIcon className="w-5 h-5 mr-4 text-rose-500" /> {Languages.t('components.side_menu.trash')}
         </Button>
 
         {false && (