✨ Go to a folder when searched (#68)
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { FolderIcon } from '@heroicons/react/solid';
|
import { FolderIcon } from '@heroicons/react/solid';
|
||||||
import Highlighter from 'react-highlight-words';
|
import Highlighter from 'react-highlight-words';
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||||
import { onDriveItemDownloadClick, openDriveItem } from '../common';
|
import { onDriveItemDownloadClick } from '../common';
|
||||||
import ResultContext from './result-context';
|
import ResultContext from './result-context';
|
||||||
import { Button } from '@atoms/button/button';
|
import { Button } from '@atoms/button/button';
|
||||||
import { DownloadIcon } from '@atoms/icons-agnostic';
|
import { DownloadIcon } from '@atoms/icons-agnostic';
|
||||||
@@ -15,7 +15,6 @@ import {
|
|||||||
} from '@atoms/icons-colored';
|
} from '@atoms/icons-colored';
|
||||||
import * as Text from '@atoms/text';
|
import * as Text from '@atoms/text';
|
||||||
import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
|
import { useCompanyApplications } from '@features/applications/hooks/use-company-applications';
|
||||||
import useRouterCompany from '@features/router/hooks/use-router-company';
|
|
||||||
import { DriveItem } from '@features/drive/types';
|
import { DriveItem } from '@features/drive/types';
|
||||||
import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
|
import FileUploadAPIClient from '@features/files/api/file-upload-api-client';
|
||||||
import { formatDate } from '@features/global/utils/format-date';
|
import { formatDate } from '@features/global/utils/format-date';
|
||||||
@@ -24,16 +23,15 @@ import useRouterWorkspace from '@features/router/hooks/use-router-workspace';
|
|||||||
import { useSearchModal } from '@features/search/hooks/use-search';
|
import { useSearchModal } from '@features/search/hooks/use-search';
|
||||||
import { SearchInputState } from '@features/search/state/search-input';
|
import { SearchInputState } from '@features/search/state/search-input';
|
||||||
import { UserType } from '@features/users/types/user';
|
import { UserType } from '@features/users/types/user';
|
||||||
import { useFileViewerModal } from '@features/viewer/hooks/use-viewer';
|
|
||||||
import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
|
import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
|
||||||
import Media from '@molecules/media';
|
import Media from '@molecules/media';
|
||||||
import { DriveCurrentFolderAtom } from '@views/client/body/drive/browser';
|
import { DriveCurrentFolderAtom } from '@views/client/body/drive/browser';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import RouterServices from '@features/router/services/router-service';
|
import RouterServices from '@features/router/services/router-service';
|
||||||
import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
|
import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
|
||||||
|
import useRouterCompany from 'app/features/router/hooks/use-router-company';
|
||||||
|
|
||||||
|
export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
|
||||||
export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
|
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const input = useRecoilValue(SearchInputState);
|
const input = useRecoilValue(SearchInputState);
|
||||||
const currentWorkspaceId = useRouterWorkspace();
|
const currentWorkspaceId = useRouterWorkspace();
|
||||||
@@ -49,10 +47,14 @@ export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
|
|||||||
const extension = name?.split('.').pop();
|
const extension = name?.split('.').pop();
|
||||||
|
|
||||||
const { setOpen } = useSearchModal();
|
const { setOpen } = useSearchModal();
|
||||||
const { open: openViewer } = useFileViewerModal();
|
|
||||||
const { open } = useDrivePreview();
|
const { open } = useDrivePreview();
|
||||||
const company = useRouterCompany();
|
const company = useRouterCompany();
|
||||||
|
|
||||||
|
function openDoc(file: DriveItem){
|
||||||
|
open(file);
|
||||||
|
if (file.is_directory) setOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer"
|
className="flex items-center p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md cursor-pointer"
|
||||||
@@ -74,21 +76,23 @@ export default (props: { driveItem: DriveItem & { user?: UserType } }) => {
|
|||||||
</Text.Info>
|
</Text.Info>
|
||||||
<ResultContext user={file.user} />
|
<ResultContext user={file.user} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
{!file.is_directory && (
|
||||||
className="whitespace-nowrap"
|
<div
|
||||||
onClick={e => {
|
className="whitespace-nowrap"
|
||||||
e.preventDefault();
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.preventDefault();
|
||||||
}}
|
e.stopPropagation();
|
||||||
>
|
}}
|
||||||
<Button
|
|
||||||
theme="outline"
|
|
||||||
className="w-9 !p-0 flex items-center justify-center ml-2 rounded-full border-none"
|
|
||||||
onClick={() => onDriveItemDownloadClick(file)}
|
|
||||||
>
|
>
|
||||||
<DownloadIcon className="text-blue-500 w-6 h-6" />
|
<Button
|
||||||
</Button>
|
theme="outline"
|
||||||
</div>
|
className="w-9 !p-0 flex items-center justify-center ml-2 rounded-full border-none"
|
||||||
|
onClick={() => onDriveItemDownloadClick(file)}
|
||||||
|
>
|
||||||
|
<DownloadIcon className="text-blue-500 w-6 h-6" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ export default () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal open={open} onClose={() => setOpen(false)} className="sm:w-[80vw] sm:max-w-4xl">
|
<Modal open={open} onClose={() => setOpen(false)} className="sm:w-[80vw] sm:max-w-4xl">
|
||||||
<SearchBox />
|
<SearchBox/>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -18,7 +18,7 @@ const SearchBox = () => {
|
|||||||
return (
|
return (
|
||||||
<ModalContent textCenter title={Languages.t('components.searchpopup.header_title')}>
|
<ModalContent textCenter title={Languages.t('components.searchpopup.header_title')}>
|
||||||
<SearchInput />
|
<SearchInput />
|
||||||
<SearchResultsIndex />
|
<SearchResultsIndex/>
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const SearchResultsIndex = () => {
|
|||||||
options={{ suppressScrollX: true, suppressScrollY: false }}
|
options={{ suppressScrollX: true, suppressScrollY: false }}
|
||||||
component="div"
|
component="div"
|
||||||
>
|
>
|
||||||
<SearchResulsDriveItems />
|
<SearchResulsDriveItems/>
|
||||||
</PerfectScrollbar>
|
</PerfectScrollbar>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -22,13 +22,13 @@ export default () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={'-mx-2'}>
|
<div className={'-mx-2'}>
|
||||||
<DriveItemsResults />
|
<DriveItemsResults/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DriveItemsResults = (props: { max?: number }) => {
|
export const DriveItemsResults = (props: { max?: number}) => {
|
||||||
const { driveItems, loading } = useSearchDriveItems();
|
const { driveItems, loading } = useSearchDriveItems();
|
||||||
|
|
||||||
if (driveItems.length === 0 && !loading) return <NothingFound />;
|
if (driveItems.length === 0 && !loading) return <NothingFound />;
|
||||||
@@ -36,7 +36,7 @@ export const DriveItemsResults = (props: { max?: number }) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{driveItems.slice(0, props?.max || driveItems.length).map(item => (
|
{driveItems.slice(0, props?.max || driveItems.length).map(item => (
|
||||||
<DriveItemResult key={item.id} driveItem={item} />
|
<DriveItemResult key={item.id} driveItem={item}/>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,15 +9,21 @@ import { DriveItem } from '../types';
|
|||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import RouterServices from '@features/router/services/router-service';
|
import RouterServices from '@features/router/services/router-service';
|
||||||
import useRouterCompany from '@features/router/hooks/use-router-company';
|
import useRouterCompany from '@features/router/hooks/use-router-company';
|
||||||
|
import { DriveCurrentFolderAtom } from 'app/views/client/body/drive/browser';
|
||||||
|
|
||||||
export const useDrivePreviewModal = () => {
|
export const useDrivePreviewModal = () => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const company = useRouterCompany();
|
const company = useRouterCompany();
|
||||||
const [status, setStatus] = useRecoilState(DriveViewerState);
|
const [status, setStatus] = useRecoilState(DriveViewerState);
|
||||||
|
const [ parentId, setParentId ] = useRecoilState(
|
||||||
|
DriveCurrentFolderAtom({ initialFolderId: 'root' }),
|
||||||
|
);
|
||||||
|
|
||||||
const open: (item: DriveItem) => void = (item: DriveItem) => {
|
const open: (item: DriveItem) => void = (item: DriveItem) => {
|
||||||
if (item.last_version_cache?.file_metadata?.source === 'internal') {
|
if (item.last_version_cache?.file_metadata?.source === 'internal') {
|
||||||
setStatus({ item, loading: true });
|
setStatus({ item, loading: true });
|
||||||
|
} else if (item.is_directory){
|
||||||
|
setParentId(item.id);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -89,3 +95,4 @@ export const useDrivePreviewDisplayData = () => {
|
|||||||
|
|
||||||
return { download, id, name, type, extension, size: status.details?.item.size };
|
return { download, id, name, type, extension, size: status.details?.item.size };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user