diff --git a/ui/components/Popup.vue b/ui/components/Popup.vue
new file mode 100644
index 0000000..7bd6260
--- /dev/null
+++ b/ui/components/Popup.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ui/pages/home/[...name].vue b/ui/pages/home/[...name].vue
index 84245b8..210ea63 100644
--- a/ui/pages/home/[...name].vue
+++ b/ui/pages/home/[...name].vue
@@ -9,12 +9,53 @@ definePageMeta({
});
const user = await getUser()
-
-let { data: usageBytes } = await useFetch<{ usage: number }>('/api/user/usage')
-let { data: files } = await useFetch<[File]>('/api/files')
-
const route = useRoute();
+
+let { data: files } = await useFetch<[File]>('/api/files/get/' + route.path.replace(/^\/home/, ''))
+
+const sortedFiles = computed(() => {
+ files.value?.forEach(file => file.toggled === undefined ? file.toggled = 'unchecked' : {})
+
+ let folders = files.value?.filter(file => file.is_dir).sort((a, b) => {
+ return ('' + a.name).localeCompare(b.name);
+ });
+ let archives = files.value?.filter(file => !file.is_dir).sort((a, b) => {
+ return ('' + a.name).localeCompare(b.name);
+ });
+
+ return folders?.concat(archives)
+})
+
+let selectAll = ref('unchecked');
+let selectedFiles = computed(() => sortedFiles.value?.filter(file => file.toggled === 'checked'))
+
+watch(sortedFiles, (newVal, oldVal) => {
+ let checkedFilesLength = newVal?.filter(file => file.toggled === 'checked').length;
+ if (checkedFilesLength > 0) {
+ if (checkedFilesLength < newVal?.length) {
+ selectAll.value = 'some';
+ } else {
+ selectAll.value = 'checked';
+ }
+ } else {
+ selectAll.value = 'unchecked';
+ }
+})
+
+watch(selectAll, (newVal, oldVal) => {
+ if (newVal === 'some') {
+ return
+ }
+
+ sortedFiles.value?.forEach(file => {
+ file.toggled = newVal
+ })
+});
+
+let folderName = ref('');
let folder = ref("");
+let folderError = ref('');
+let popupVisable = ref(false);
let uploadPaneClosed = ref(true);
if (typeof route.params.name == "object") {
@@ -67,7 +108,7 @@ const uploadFile = (file: File) => {
uploadPaneClosed.value = false;
}
- xhr.open('POST', '/api/upload', true);
+ xhr.open('POST', '/api/files/upload/' + route.path.replace(/^\/home/, ''), true);
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
@@ -94,16 +135,16 @@ const uploadFile = (file: File) => {
};
xhr.onload = () => {
- let data = JSON.parse(xhr.response)
- usageBytes.value.usage = data.usage
- files.value?.push(data.file)
-
let file = uploadingFiles.value.find(upload => upload.id === id);
if (!file) {
throw new Error("Upload has finished but file is missing!")
}
if (xhr.status >= 200 && xhr.status < 300) {
+ let data = JSON.parse(xhr.response)
+ user.usage = data.usage
+ files.value?.push(data.file)
+
file.uploading = false;
file.status = {
@@ -165,15 +206,59 @@ const uploadFile = (file: File) => {
const openFilePicker = () => {
fileInput.value?.click();
}
+
+const createFolder = async () => {
+ let { data, error } = await useFetch('/api/files/upload/' + route.path.replace(/^\/home/, '') + '/' + folderName.value, {
+ method: "POST"
+ })
+
+ if (error.value != null) {
+ folderError.value = error.value.data.message;
+ } else {
+ user.usage = data.value.usage
+ files.value?.push(data.value.file)
+
+ popupVisable.value = false;
+ navigateTo(route.path + '/' + folderName.value);
+ }
+}
+
+const deleteFiles = async () => {
+ await useFetch('/api/files/delete' + route.path.replace(/^\/home/, ''), {
+ method: "POST",
+ body: {
+ files: selectedFiles.value?.map(file => ({ name: file.name }))
+ }
+ })
+
+ files.value = files.value?.filter(file => !selectedFiles.value?.includes(file))
+}
-
+
+
+
+
+
+
+
{{ folderError }}
+
+
+
+
+
+
+
+
@@ -191,7 +276,7 @@ const openFilePicker = () => {
Upload
-