feat: search+create for folder select (#283)

* feat?: Search for the folder to add.
Also you can create a folder right from the file, rather than being redirected.

* woops wrong import
This commit is contained in:
Jayvin Hernandez 2023-02-13 19:37:47 -08:00 committed by GitHub
parent 283c7c5a26
commit d70ddd1f53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -40,11 +40,6 @@ import {
import MutedText from './MutedText';
import Type from './Type';
const CREATE_FOLDER_OPTION = {
label: 'Create new folder',
value: 'create',
};
export function FileMeta({ Icon, title, subtitle, ...other }) {
return other.tooltip ? (
<Group>
@ -171,31 +166,53 @@ export default function File({ image, disableMediaPreview, exifEnabled, refreshI
};
const addToFolder = async (t) => {
if (t === CREATE_FOLDER_OPTION.value) {
router.push('/dashboard/folders?create=' + image.id);
} else {
const res = await useFetch('/api/user/folders/' + t, 'POST', {
file: Number(image.id),
});
const res = await useFetch('/api/user/folders/' + t, 'POST', {
file: Number(image.id),
});
refresh();
if (!res.error) {
showNotification({
title: 'Added to folder',
message: res.name,
color: 'green',
icon: <FolderPlusIcon />,
});
} else {
showNotification({
title: 'Failed to add to folder',
message: res.error,
color: 'red',
icon: <CrossIcon />,
});
}
};
const createFolder = (t) => {
useFetch('/api/user/folders', 'POST', {
name: t,
add: [Number(image.id)],
}).then((res) => {
refresh();
if (!res.error) {
showNotification({
title: 'Added to folder',
title: 'Created & added to folder',
message: res.name,
color: 'green',
icon: <FolderPlusIcon />,
});
} else {
showNotification({
title: 'Failed to add to folder',
title: 'Failed to create folder',
message: res.error,
color: 'red',
icon: <CrossIcon />,
});
}
}
});
return { value: t, label: t };
};
return (
@ -290,8 +307,11 @@ export default function File({ image, disableMediaPreview, exifEnabled, refreshI
value: String(folder.id),
label: `${folder.id}: ${folder.name}`,
})),
CREATE_FOLDER_OPTION,
]}
searchable
creatable
getCreateLabel={(query) => `Create folder "${query}"`}
onCreate={createFolder}
/>
</Tooltip>
)}