Files CRUD.
Remove Contacts and Calendar + CardDav and CalDav.
This commit is contained in:
Bruno Bernardino
60
components/files/CreateDirectoryModal.tsx
Normal file
60
components/files/CreateDirectoryModal.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
|
||||
interface CreateDirectoryModalProps {
|
||||
isOpen: boolean;
|
||||
onClickSave: (newDirectoryName: string) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function CreateDirectoryModal(
|
||||
{ isOpen, onClickSave, onClose }: CreateDirectoryModalProps,
|
||||
) {
|
||||
const newDirectoryName = useSignal<string>('');
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${
|
||||
isOpen ? 'block' : 'hidden'
|
||||
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
|
||||
>
|
||||
<h1 class='text-2xl font-semibold my-5'>Create New Directory</h1>
|
||||
<section class='py-5 my-2 border-y border-slate-500'>
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='directory_name'>Name</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='text'
|
||||
name='directory_name'
|
||||
id='directory_name'
|
||||
value={newDirectoryName.value}
|
||||
onInput={(event) => {
|
||||
newDirectoryName.value = event.currentTarget.value;
|
||||
}}
|
||||
placeholder='Amazing'
|
||||
/>
|
||||
</fieldset>
|
||||
</section>
|
||||
<footer class='flex justify-between'>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClickSave(newDirectoryName.value)}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
44
components/files/FilesBreadcrumb.tsx
Normal file
44
components/files/FilesBreadcrumb.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
interface FilesBreadcrumbProps {
|
||||
path: string;
|
||||
}
|
||||
|
||||
export default function FilesBreadcrumb({ path }: FilesBreadcrumbProps) {
|
||||
if (path === '/') {
|
||||
return (
|
||||
<h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
|
||||
All files
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
|
||||
const pathParts = path.slice(1, -1).split('/');
|
||||
|
||||
return (
|
||||
<h3 class='text-base font-semibold text-white whitespace-nowrap mr-2'>
|
||||
<a href={`/files?path=/`}>All files</a>
|
||||
{pathParts.map((part, index) => {
|
||||
if (index === pathParts.length - 1) {
|
||||
return (
|
||||
<>
|
||||
<span class='ml-2 text-xs'>/</span>
|
||||
<span class='ml-2'>{part}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const fullPathForPart: string[] = [];
|
||||
|
||||
for (let pathPartIndex = 0; pathPartIndex <= index; ++pathPartIndex) {
|
||||
fullPathForPart.push(pathParts[pathPartIndex]);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<span class='ml-2 text-xs'>/</span>
|
||||
<a href={`/files?path=/${fullPathForPart.join('/')}/`} class='ml-2'>{part}</a>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
209
components/files/ListFiles.tsx
Normal file
209
components/files/ListFiles.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import { Directory, DirectoryFile } from '/lib/types.ts';
|
||||
import { humanFileSize, TRASH_PATH } from '/lib/utils/files.ts';
|
||||
|
||||
interface ListFilesProps {
|
||||
directories: Directory[];
|
||||
files: DirectoryFile[];
|
||||
onClickDeleteDirectory: (parentPath: string, name: string) => Promise<void>;
|
||||
onClickDeleteFile: (parentPath: string, name: string) => Promise<void>;
|
||||
onClickOpenRenameDirectory: (parentPath: string, name: string) => void;
|
||||
onClickOpenRenameFile: (parentPath: string, name: string) => void;
|
||||
onClickOpenMoveDirectory: (parentPath: string, name: string) => void;
|
||||
onClickOpenMoveFile: (parentPath: string, name: string) => void;
|
||||
}
|
||||
|
||||
export default function ListFiles(
|
||||
{
|
||||
directories,
|
||||
files,
|
||||
onClickDeleteDirectory,
|
||||
onClickDeleteFile,
|
||||
onClickOpenRenameDirectory,
|
||||
onClickOpenRenameFile,
|
||||
onClickOpenMoveDirectory,
|
||||
onClickOpenMoveFile,
|
||||
}: ListFilesProps,
|
||||
) {
|
||||
const dateFormat = new Intl.DateTimeFormat('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
return (
|
||||
<section class='mx-auto max-w-7xl my-8'>
|
||||
<table class='w-full border-collapse bg-gray-900 text-left text-sm text-slate-500 shadow-sm rounded-md'>
|
||||
<thead>
|
||||
<tr class='border-b border-slate-600'>
|
||||
<th scope='col' class='px-6 py-4 font-medium text-white'>Name</th>
|
||||
<th scope='col' class='px-6 py-4 font-medium text-white w-56'>Last update</th>
|
||||
<th scope='col' class='px-6 py-4 font-medium text-white w-32'>Size</th>
|
||||
<th scope='col' class='px-6 py-4 font-medium text-white w-20'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class='divide-y divide-slate-600 border-t border-slate-600'>
|
||||
{directories.map((directory) => {
|
||||
const fullPath = `${directory.parent_path}${directory.directory_name}/`;
|
||||
|
||||
return (
|
||||
<tr class='bg-slate-700 hover:bg-slate-600 group'>
|
||||
<td class='flex gap-3 px-6 py-4'>
|
||||
<a
|
||||
href={`/files?path=${fullPath}`}
|
||||
class='flex items-center font-normal text-white'
|
||||
>
|
||||
<img
|
||||
src={`/images/${fullPath === TRASH_PATH ? 'trash.svg' : 'directory.svg'}`}
|
||||
class='white drop-shadow-md mr-2'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='Directory'
|
||||
title='Directory'
|
||||
/>
|
||||
{directory.directory_name}
|
||||
</a>
|
||||
</td>
|
||||
<td class='px-6 py-4 text-slate-200'>
|
||||
{dateFormat.format(new Date(directory.updated_at))}
|
||||
</td>
|
||||
<td class='px-6 py-4 text-slate-200'>
|
||||
-
|
||||
</td>
|
||||
<td class='px-6 py-4'>
|
||||
{fullPath === TRASH_PATH ? null : (
|
||||
<section class='flex items-center justify-end w-20'>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
|
||||
onClick={() => onClickOpenRenameDirectory(directory.parent_path, directory.directory_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/rename.svg'
|
||||
class='white drop-shadow-md'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='Rename directory'
|
||||
title='Rename directory'
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
|
||||
onClick={() => onClickOpenMoveDirectory(directory.parent_path, directory.directory_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/move.svg'
|
||||
class='white drop-shadow-md'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='Move directory'
|
||||
title='Move directory'
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100'
|
||||
onClick={() => onClickDeleteDirectory(directory.parent_path, directory.directory_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/delete.svg'
|
||||
class='red drop-shadow-md'
|
||||
width={20}
|
||||
height={20}
|
||||
alt='Delete directory'
|
||||
title='Delete directory'
|
||||
/>
|
||||
</span>
|
||||
</section>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{files.map((file) => (
|
||||
<tr class='bg-slate-700 hover:bg-slate-600 group'>
|
||||
<td class='flex gap-3 px-6 py-4'>
|
||||
<a
|
||||
href={`/files/open/${file.file_name}?path=${file.parent_path}`}
|
||||
class='flex items-center font-normal text-white'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<img
|
||||
src='/images/file.svg'
|
||||
class='white drop-shadow-md mr-2'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='File'
|
||||
title='File'
|
||||
/>
|
||||
{file.file_name}
|
||||
</a>
|
||||
</td>
|
||||
<td class='px-6 py-4 text-slate-200'>
|
||||
{dateFormat.format(new Date(file.updated_at))}
|
||||
</td>
|
||||
<td class='px-6 py-4 text-slate-200'>
|
||||
{humanFileSize(file.size_in_bytes)}
|
||||
</td>
|
||||
<td class='px-6 py-4'>
|
||||
<section class='flex items-center justify-end w-20'>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
|
||||
onClick={() => onClickOpenRenameFile(file.parent_path, file.file_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/rename.svg'
|
||||
class='white drop-shadow-md'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='Rename file'
|
||||
title='Rename file'
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100 mr-2'
|
||||
onClick={() => onClickOpenMoveFile(file.parent_path, file.file_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/move.svg'
|
||||
class='white drop-shadow-md'
|
||||
width={18}
|
||||
height={18}
|
||||
alt='Move file'
|
||||
title='Move file'
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class='invisible cursor-pointer group-hover:visible opacity-50 hover:opacity-100'
|
||||
onClick={() => onClickDeleteFile(file.parent_path, file.file_name)}
|
||||
>
|
||||
<img
|
||||
src='/images/delete.svg'
|
||||
class='red drop-shadow-md'
|
||||
width={20}
|
||||
height={20}
|
||||
alt='Delete file'
|
||||
title='Delete file'
|
||||
/>
|
||||
</span>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{directories.length === 0 && files.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td class='flex gap-3 px-6 py-4 font-normal' colspan={4}>
|
||||
<div class='text-md'>
|
||||
<div class='font-medium text-slate-400'>No files to show</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: null}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
522
components/files/MainFiles.tsx
Normal file
522
components/files/MainFiles.tsx
Normal file
@@ -0,0 +1,522 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
|
||||
import { Directory, DirectoryFile } from '/lib/types.ts';
|
||||
import { ResponseBody as UploadResponseBody } from '/routes/api/files/upload.tsx';
|
||||
import { RequestBody as RenameRequestBody, ResponseBody as RenameResponseBody } from '/routes/api/files/rename.tsx';
|
||||
import { RequestBody as MoveRequestBody, ResponseBody as MoveResponseBody } from '/routes/api/files/move.tsx';
|
||||
import { RequestBody as DeleteRequestBody, ResponseBody as DeleteResponseBody } from '/routes/api/files/delete.tsx';
|
||||
import {
|
||||
RequestBody as CreateDirectoryRequestBody,
|
||||
ResponseBody as CreateDirectoryResponseBody,
|
||||
} from '/routes/api/files/create-directory.tsx';
|
||||
import {
|
||||
RequestBody as RenameDirectoryRequestBody,
|
||||
ResponseBody as RenameDirectoryResponseBody,
|
||||
} from '/routes/api/files/rename-directory.tsx';
|
||||
import {
|
||||
RequestBody as MoveDirectoryRequestBody,
|
||||
ResponseBody as MoveDirectoryResponseBody,
|
||||
} from '/routes/api/files/move-directory.tsx';
|
||||
import {
|
||||
RequestBody as DeleteDirectoryRequestBody,
|
||||
ResponseBody as DeleteDirectoryResponseBody,
|
||||
} from '/routes/api/files/delete-directory.tsx';
|
||||
import SearchFiles from './SearchFiles.tsx';
|
||||
import ListFiles from './ListFiles.tsx';
|
||||
import FilesBreadcrumb from './FilesBreadcrumb.tsx';
|
||||
import CreateDirectoryModal from './CreateDirectoryModal.tsx';
|
||||
import RenameDirectoryOrFileModal from './RenameDirectoryOrFileModal.tsx';
|
||||
import MoveDirectoryOrFileModal from './MoveDirectoryOrFileModal.tsx';
|
||||
|
||||
interface MainFilesProps {
|
||||
initialDirectories: Directory[];
|
||||
initialFiles: DirectoryFile[];
|
||||
initialPath: string;
|
||||
}
|
||||
|
||||
export default function MainFiles({ initialDirectories, initialFiles, initialPath }: MainFilesProps) {
|
||||
const isAdding = useSignal<boolean>(false);
|
||||
const isUploading = useSignal<boolean>(false);
|
||||
const isDeleting = useSignal<boolean>(false);
|
||||
const isUpdating = useSignal<boolean>(false);
|
||||
const directories = useSignal<Directory[]>(initialDirectories);
|
||||
const files = useSignal<DirectoryFile[]>(initialFiles);
|
||||
const path = useSignal<string>(initialPath);
|
||||
const areNewOptionsOption = useSignal<boolean>(false);
|
||||
const isNewDirectoryModalOpen = useSignal<boolean>(false);
|
||||
const renameDirectoryOrFileModal = useSignal<
|
||||
{ isOpen: boolean; isDirectory: boolean; parentPath: string; name: string } | null
|
||||
>(null);
|
||||
const moveDirectoryOrFileModal = useSignal<
|
||||
{ isOpen: boolean; isDirectory: boolean; path: string; name: string } | null
|
||||
>(null);
|
||||
|
||||
function onClickUploadFile() {
|
||||
const fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.click();
|
||||
|
||||
fileInput.onchange = async (event) => {
|
||||
const chosenFiles = (event.target as HTMLInputElement)?.files!;
|
||||
const chosenFile = chosenFiles[0];
|
||||
|
||||
if (!chosenFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUploading.value = true;
|
||||
|
||||
areNewOptionsOption.value = false;
|
||||
|
||||
const requestBody = new FormData();
|
||||
requestBody.set('parent_path', path.value);
|
||||
requestBody.set('name', chosenFile.name);
|
||||
requestBody.set('contents', chosenFile);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/files/upload`, {
|
||||
method: 'POST',
|
||||
body: requestBody,
|
||||
});
|
||||
const result = await response.json() as UploadResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to upload file!');
|
||||
}
|
||||
|
||||
files.value = [...result.newFiles];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUploading.value = false;
|
||||
};
|
||||
}
|
||||
|
||||
function onClickCreateDirectory() {
|
||||
if (isNewDirectoryModalOpen.value) {
|
||||
isNewDirectoryModalOpen.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isNewDirectoryModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function onClickSaveDirectory(newDirectoryName: string) {
|
||||
if (isAdding.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newDirectoryName) {
|
||||
return;
|
||||
}
|
||||
|
||||
areNewOptionsOption.value = false;
|
||||
isAdding.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: CreateDirectoryRequestBody = {
|
||||
parentPath: path.value,
|
||||
name: newDirectoryName,
|
||||
};
|
||||
const response = await fetch(`/api/files/create-directory`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as CreateDirectoryResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to create directory!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
|
||||
isNewDirectoryModalOpen.value = false;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isAdding.value = false;
|
||||
}
|
||||
|
||||
function onCloseCreateDirectory() {
|
||||
isNewDirectoryModalOpen.value = false;
|
||||
}
|
||||
|
||||
function toggleNewOptionsDropdown() {
|
||||
areNewOptionsOption.value = !areNewOptionsOption.value;
|
||||
}
|
||||
|
||||
function onClickOpenRenameDirectory(parentPath: string, name: string) {
|
||||
renameDirectoryOrFileModal.value = {
|
||||
isOpen: true,
|
||||
isDirectory: true,
|
||||
parentPath,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
function onClickOpenRenameFile(parentPath: string, name: string) {
|
||||
renameDirectoryOrFileModal.value = {
|
||||
isOpen: true,
|
||||
isDirectory: false,
|
||||
parentPath,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
function onClickCloseRename() {
|
||||
renameDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickSaveRenameDirectory(newName: string) {
|
||||
if (
|
||||
isUpdating.value || !renameDirectoryOrFileModal.value?.isOpen || !renameDirectoryOrFileModal.value?.isDirectory
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdating.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: RenameDirectoryRequestBody = {
|
||||
parentPath: renameDirectoryOrFileModal.value.parentPath,
|
||||
oldName: renameDirectoryOrFileModal.value.name,
|
||||
newName,
|
||||
};
|
||||
const response = await fetch(`/api/files/rename-directory`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as RenameDirectoryResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to rename directory!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUpdating.value = false;
|
||||
renameDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickSaveRenameFile(newName: string) {
|
||||
if (
|
||||
isUpdating.value || !renameDirectoryOrFileModal.value?.isOpen || renameDirectoryOrFileModal.value?.isDirectory
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdating.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: RenameRequestBody = {
|
||||
parentPath: renameDirectoryOrFileModal.value.parentPath,
|
||||
oldName: renameDirectoryOrFileModal.value.name,
|
||||
newName,
|
||||
};
|
||||
const response = await fetch(`/api/files/rename`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as RenameResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to rename file!');
|
||||
}
|
||||
|
||||
files.value = [...result.newFiles];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUpdating.value = false;
|
||||
renameDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
function onClickOpenMoveDirectory(parentPath: string, name: string) {
|
||||
moveDirectoryOrFileModal.value = {
|
||||
isOpen: true,
|
||||
isDirectory: true,
|
||||
path: parentPath,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
function onClickOpenMoveFile(parentPath: string, name: string) {
|
||||
moveDirectoryOrFileModal.value = {
|
||||
isOpen: true,
|
||||
isDirectory: false,
|
||||
path: parentPath,
|
||||
name,
|
||||
};
|
||||
}
|
||||
|
||||
function onClickCloseMove() {
|
||||
moveDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickSaveMoveDirectory(newPath: string) {
|
||||
if (isUpdating.value || !moveDirectoryOrFileModal.value?.isOpen || !moveDirectoryOrFileModal.value?.isDirectory) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdating.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: MoveDirectoryRequestBody = {
|
||||
oldParentPath: moveDirectoryOrFileModal.value.path,
|
||||
newParentPath: newPath,
|
||||
name: moveDirectoryOrFileModal.value.name,
|
||||
};
|
||||
const response = await fetch(`/api/files/move-directory`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as MoveDirectoryResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to move directory!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUpdating.value = false;
|
||||
moveDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickSaveMoveFile(newPath: string) {
|
||||
if (isUpdating.value || !moveDirectoryOrFileModal.value?.isOpen || moveDirectoryOrFileModal.value?.isDirectory) {
|
||||
return;
|
||||
}
|
||||
|
||||
isUpdating.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: MoveRequestBody = {
|
||||
oldParentPath: moveDirectoryOrFileModal.value.path,
|
||||
newParentPath: newPath,
|
||||
name: moveDirectoryOrFileModal.value.name,
|
||||
};
|
||||
const response = await fetch(`/api/files/move`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as MoveResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to move file!');
|
||||
}
|
||||
|
||||
files.value = [...result.newFiles];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isUpdating.value = false;
|
||||
moveDirectoryOrFileModal.value = null;
|
||||
}
|
||||
|
||||
async function onClickDeleteDirectory(parentPath: string, name: string) {
|
||||
if (confirm('Are you sure you want to delete this directory?')) {
|
||||
if (isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDeleting.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: DeleteDirectoryRequestBody = {
|
||||
parentPath,
|
||||
name,
|
||||
};
|
||||
const response = await fetch(`/api/files/delete-directory`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as DeleteDirectoryResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to delete directory!');
|
||||
}
|
||||
|
||||
directories.value = [...result.newDirectories];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onClickDeleteFile(parentPath: string, name: string) {
|
||||
if (confirm('Are you sure you want to delete this file?')) {
|
||||
if (isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDeleting.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: DeleteRequestBody = {
|
||||
parentPath,
|
||||
name,
|
||||
};
|
||||
const response = await fetch(`/api/files/delete`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as DeleteResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to delete file!');
|
||||
}
|
||||
|
||||
files.value = [...result.newFiles];
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section class='flex flex-row items-center justify-between mb-4'>
|
||||
<section class='relative inline-block text-left mr-2'>
|
||||
<section class='flex flex-row items-center justify-start'>
|
||||
<SearchFiles />
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class='flex items-center justify-end'>
|
||||
<FilesBreadcrumb path={path.value} />
|
||||
|
||||
<section class='relative inline-block text-left ml-2'>
|
||||
<div>
|
||||
<button
|
||||
class='inline-block justify-center gap-x-1.5 rounded-md bg-[#51A4FB] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 ml-2'
|
||||
type='button'
|
||||
title='Add new event'
|
||||
id='new-button'
|
||||
aria-expanded='true'
|
||||
aria-haspopup='true'
|
||||
onClick={() => toggleNewOptionsDropdown()}
|
||||
>
|
||||
<img
|
||||
src='/images/add.svg'
|
||||
alt='Add new file or directory'
|
||||
class={`white ${isAdding.value || isUploading.value ? 'animate-spin' : ''}`}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
|
||||
!areNewOptionsOption.value ? 'hidden' : ''
|
||||
}`}
|
||||
role='menu'
|
||||
aria-orientation='vertical'
|
||||
aria-labelledby='new-button'
|
||||
tabindex={-1}
|
||||
>
|
||||
<div class='py-1'>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickUploadFile()}
|
||||
>
|
||||
Upload File
|
||||
</button>
|
||||
<button
|
||||
class={`text-white block px-4 py-2 text-sm w-full text-left hover:bg-slate-600`}
|
||||
onClick={() => onClickCreateDirectory()}
|
||||
>
|
||||
New Directory
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class='mx-auto max-w-7xl my-8'>
|
||||
<ListFiles
|
||||
directories={directories.value}
|
||||
files={files.value}
|
||||
onClickDeleteDirectory={onClickDeleteDirectory}
|
||||
onClickDeleteFile={onClickDeleteFile}
|
||||
onClickOpenRenameDirectory={onClickOpenRenameDirectory}
|
||||
onClickOpenRenameFile={onClickOpenRenameFile}
|
||||
onClickOpenMoveDirectory={onClickOpenMoveDirectory}
|
||||
onClickOpenMoveFile={onClickOpenMoveFile}
|
||||
/>
|
||||
|
||||
<span
|
||||
class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
|
||||
>
|
||||
{isDeleting.value
|
||||
? (
|
||||
<>
|
||||
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Deleting...
|
||||
</>
|
||||
)
|
||||
: null}
|
||||
{isAdding.value
|
||||
? (
|
||||
<>
|
||||
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Creating...
|
||||
</>
|
||||
)
|
||||
: null}
|
||||
{isUploading.value
|
||||
? (
|
||||
<>
|
||||
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Uploading...
|
||||
</>
|
||||
)
|
||||
: null}
|
||||
{isUpdating.value
|
||||
? (
|
||||
<>
|
||||
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Updating...
|
||||
</>
|
||||
)
|
||||
: null}
|
||||
{!isDeleting.value && !isAdding.value && !isUploading.value && !isUpdating.value ? <> </> : null}
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<CreateDirectoryModal
|
||||
isOpen={isNewDirectoryModalOpen.value}
|
||||
onClickSave={onClickSaveDirectory}
|
||||
onClose={onCloseCreateDirectory}
|
||||
/>
|
||||
|
||||
<RenameDirectoryOrFileModal
|
||||
isOpen={renameDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={renameDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialName={renameDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={renameDirectoryOrFileModal.value?.isDirectory ? onClickSaveRenameDirectory : onClickSaveRenameFile}
|
||||
onClose={onClickCloseRename}
|
||||
/>
|
||||
|
||||
<MoveDirectoryOrFileModal
|
||||
isOpen={moveDirectoryOrFileModal.value?.isOpen || false}
|
||||
isDirectory={moveDirectoryOrFileModal.value?.isDirectory || false}
|
||||
initialPath={moveDirectoryOrFileModal.value?.path || ''}
|
||||
name={moveDirectoryOrFileModal.value?.name || ''}
|
||||
onClickSave={moveDirectoryOrFileModal.value?.isDirectory ? onClickSaveMoveDirectory : onClickSaveMoveFile}
|
||||
onClose={onClickCloseMove}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
145
components/files/MoveDirectoryOrFileModal.tsx
Normal file
145
components/files/MoveDirectoryOrFileModal.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
|
||||
import { RequestBody, ResponseBody } from '/routes/api/files/get-directories.tsx';
|
||||
import { Directory } from '/lib/types.ts';
|
||||
|
||||
interface MoveDirectoryOrFileModalProps {
|
||||
isOpen: boolean;
|
||||
initialPath: string;
|
||||
isDirectory: boolean;
|
||||
name: string;
|
||||
onClickSave: (newPath: string) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function MoveDirectoryOrFileModal(
|
||||
{ isOpen, initialPath, isDirectory, name, onClickSave, onClose }: MoveDirectoryOrFileModalProps,
|
||||
) {
|
||||
const newPath = useSignal<string>(initialPath);
|
||||
const isLoading = useSignal<boolean>(false);
|
||||
const directories = useSignal<Directory[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
newPath.value = initialPath;
|
||||
|
||||
fetchDirectories();
|
||||
}, [initialPath]);
|
||||
|
||||
async function fetchDirectories() {
|
||||
if (!initialPath) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const requestBody: RequestBody = {
|
||||
parentPath: newPath.value,
|
||||
directoryPathToExclude: isDirectory ? `${initialPath}${name}` : '',
|
||||
};
|
||||
const response = await fetch(`/api/files/get-directories`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
const result = await response.json() as ResponseBody;
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error('Failed to get directories!');
|
||||
}
|
||||
|
||||
directories.value = [...result.directories];
|
||||
|
||||
isLoading.value = false;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function onChooseNewDirectory(chosenPath: string) {
|
||||
newPath.value = chosenPath;
|
||||
|
||||
await fetchDirectories();
|
||||
}
|
||||
|
||||
const parentPath = newPath.value === '/'
|
||||
? null
|
||||
: `/${newPath.peek().split('/').filter(Boolean).slice(0, -1).join('/')}`;
|
||||
|
||||
if (!name) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${
|
||||
isOpen ? 'block' : 'hidden'
|
||||
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
|
||||
>
|
||||
<h1 class='text-2xl font-semibold my-5'>Move "{name}" into "{newPath.value}"</h1>
|
||||
<section class='py-5 my-2 border-y border-slate-500'>
|
||||
<ol class='mt-2'>
|
||||
{parentPath
|
||||
? (
|
||||
<li class='mb-1'>
|
||||
<span
|
||||
class={`block px-2 py-2 hover:no-underline hover:opacity-60 bg-slate-700 cursor-pointer rounded-md`}
|
||||
onClick={() => onChooseNewDirectory(parentPath === '/' ? parentPath : `${parentPath}/`)}
|
||||
>
|
||||
<p class='flex-auto truncate font-medium text-white'>
|
||||
..
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
: null}
|
||||
{directories.value.map((directory) => (
|
||||
<li class='mb-1'>
|
||||
<span
|
||||
class={`block px-2 py-2 hover:no-underline hover:opacity-60 bg-slate-700 cursor-pointer rounded-md`}
|
||||
onClick={() => onChooseNewDirectory(`${directory.parent_path}${directory.directory_name}/`)}
|
||||
>
|
||||
<p class='flex-auto truncate font-medium text-white'>
|
||||
{directory.directory_name}
|
||||
</p>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<span
|
||||
class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
|
||||
>
|
||||
{isLoading.value
|
||||
? (
|
||||
<>
|
||||
<img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Loading...
|
||||
</>
|
||||
)
|
||||
: null}
|
||||
{!isLoading.value ? <> </> : null}
|
||||
</span>
|
||||
</section>
|
||||
<footer class='flex justify-between'>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClickSave(newPath.value)}
|
||||
>
|
||||
Move {isDirectory ? 'directory' : 'file'} here
|
||||
</button>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
67
components/files/RenameDirectoryOrFileModal.tsx
Normal file
67
components/files/RenameDirectoryOrFileModal.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
|
||||
interface RenameDirectoryOrFileModalProps {
|
||||
isOpen: boolean;
|
||||
initialName: string;
|
||||
isDirectory: boolean;
|
||||
onClickSave: (newName: string) => Promise<void>;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function RenameDirectoryOrFileModal(
|
||||
{ isOpen, initialName, isDirectory, onClickSave, onClose }: RenameDirectoryOrFileModalProps,
|
||||
) {
|
||||
const newName = useSignal<string>(initialName);
|
||||
|
||||
useEffect(() => {
|
||||
newName.value = initialName;
|
||||
}, [initialName]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${
|
||||
isOpen ? 'block' : 'hidden'
|
||||
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
|
||||
>
|
||||
<h1 class='text-2xl font-semibold my-5'>Rename {isDirectory ? 'Directory' : 'File'}</h1>
|
||||
<section class='py-5 my-2 border-y border-slate-500'>
|
||||
<fieldset class='block mb-2'>
|
||||
<label class='text-slate-300 block pb-1' for='directory_or_file_name'>Name</label>
|
||||
<input
|
||||
class='input-field'
|
||||
type='text'
|
||||
name='directory_or_file_name'
|
||||
id='directory_or_file_name'
|
||||
value={newName.value}
|
||||
onInput={(event) => {
|
||||
newName.value = event.currentTarget.value;
|
||||
}}
|
||||
placeholder='Amazing'
|
||||
/>
|
||||
</fieldset>
|
||||
</section>
|
||||
<footer class='flex justify-between'>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClickSave(newName.value)}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClose()}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
165
components/files/SearchFiles.tsx
Normal file
165
components/files/SearchFiles.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { useSignal } from '@preact/signals';
|
||||
import { useEffect } from 'preact/hooks';
|
||||
|
||||
import { Directory, DirectoryFile } from '/lib/types.ts';
|
||||
// import { RequestBody, ResponseBody } from '/routes/api/files/search.tsx';
|
||||
interface SearchFilesProps {}
|
||||
|
||||
export default function SearchFiles({}: SearchFilesProps) {
|
||||
const isSearching = useSignal<boolean>(false);
|
||||
const areResultsVisible = useSignal<boolean>(false);
|
||||
const matchingDirectories = useSignal<Directory[]>([]);
|
||||
const matchingFiles = useSignal<DirectoryFile[]>([]);
|
||||
const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
|
||||
const closeTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
|
||||
|
||||
const dateFormat = new Intl.DateTimeFormat('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
function searchFiles(searchTerm: string) {
|
||||
if (searchTimeout.value) {
|
||||
clearTimeout(searchTimeout.value);
|
||||
}
|
||||
|
||||
if (searchTerm.trim().length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
areResultsVisible.value = false;
|
||||
|
||||
searchTimeout.value = setTimeout(() => {
|
||||
isSearching.value = true;
|
||||
|
||||
// TODO: Build this
|
||||
// try {
|
||||
// const requestBody: RequestBody = { searchTerm };
|
||||
// const response = await fetch(`/api/files/search`, {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(requestBody),
|
||||
// });
|
||||
// const result = await response.json() as ResponseBody;
|
||||
|
||||
// if (!result.success) {
|
||||
// throw new Error('Failed to search files!');
|
||||
// }
|
||||
|
||||
// matchingDirectories.value = result.matchingDirectories;
|
||||
// matchingFiles.value = result.matchingFiles;
|
||||
|
||||
// if (matchingDirectories.value.length > 0 || matchingFiles.value.length > 0) {
|
||||
// areResultsVisible.value = true;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
|
||||
isSearching.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function onFocus() {
|
||||
if (matchingDirectories.value.length > 0 || matchingFiles.value.length > 0) {
|
||||
areResultsVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
if (closeTimeout.value) {
|
||||
clearTimeout(closeTimeout.value);
|
||||
}
|
||||
|
||||
closeTimeout.value = setTimeout(() => {
|
||||
areResultsVisible.value = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (searchTimeout.value) {
|
||||
clearTimeout(searchTimeout.value);
|
||||
}
|
||||
|
||||
if (closeTimeout.value) {
|
||||
clearTimeout(closeTimeout.value);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
class='input-field w-72 mr-2'
|
||||
type='search'
|
||||
name='search'
|
||||
placeholder='Search files...'
|
||||
onInput={(event) => searchFiles(event.currentTarget.value)}
|
||||
onFocus={() => onFocus()}
|
||||
onBlur={() => onBlur()}
|
||||
/>
|
||||
{isSearching.value ? <img src='/images/loading.svg' class='white mr-2' width={18} height={18} /> : null}
|
||||
{areResultsVisible.value
|
||||
? (
|
||||
<section class='relative inline-block text-left ml-2 text-xs'>
|
||||
<section
|
||||
class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`}
|
||||
role='menu'
|
||||
aria-orientation='vertical'
|
||||
aria-labelledby='view-button'
|
||||
tabindex={-1}
|
||||
>
|
||||
<section class='py-1'>
|
||||
<ol class='mt-2'>
|
||||
{matchingDirectories.value.map((directory) => (
|
||||
<li class='mb-1'>
|
||||
<a
|
||||
href={`/files?path=${directory.parent_path}${directory.directory_name}`}
|
||||
class={`block px-2 py-2 hover:no-underline hover:opacity-60`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<time
|
||||
datetime={new Date(directory.updated_at).toISOString()}
|
||||
class='mr-2 flex-none text-slate-100 block'
|
||||
>
|
||||
{dateFormat.format(new Date(directory.updated_at))}
|
||||
</time>
|
||||
<p class='flex-auto truncate font-medium text-white'>
|
||||
{directory.directory_name}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
{matchingFiles.value.map((file) => (
|
||||
<li class='mb-1'>
|
||||
<a
|
||||
href={`/files/open/${file.file_name}?path=${file.parent_path}`}
|
||||
class={`block px-2 py-2 hover:no-underline hover:opacity-60`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<time
|
||||
datetime={new Date(file.updated_at).toISOString()}
|
||||
class='mr-2 flex-none text-slate-100 block'
|
||||
>
|
||||
{dateFormat.format(new Date(file.updated_at))}
|
||||
</time>
|
||||
<p class='flex-auto truncate font-medium text-white'>
|
||||
{file.file_name}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user