diff --git a/packages/dashboard-v2/src/appUtils.js b/packages/dashboard-v2/src/appUtils.js index 6ef4a53..e859d2a 100644 --- a/packages/dashboard-v2/src/appUtils.js +++ b/packages/dashboard-v2/src/appUtils.js @@ -1,4 +1,5 @@ import { api } from "boot/axios"; +import { useMainStore } from "stores/main-store"; export const ROOT_FOLDER = "IA==" // IA== is a space @@ -147,4 +148,82 @@ export const apiHandler = { onUploadProgress: callback }) }, + fetchFile: async (bucket, prefix, delimiter = '/') => { + const mainStore = useMainStore(); + let truncated = true + let cursor = null + let contentFiles = [] + let contentFolders = [] + + while (truncated) { + const response = await api.get(`/buckets/${bucket}?include=customMetadata&include=httpMetadata`, { + params: { + delimiter: delimiter, + prefix: prefix && prefix !== '/' ? encode(prefix) : '', + cursor: cursor + } + }) + + truncated = response.data.truncated + cursor = response.data.cursor + + if (response.data.objects) { + const files = response.data.objects.filter(function(obj) { + return !(obj.key.endsWith('/') && delimiter !== '') && obj.key !== prefix // Remove selected folder when delimiter is defined + }).map(function(obj) { + const date = new Date(obj.uploaded) + + return { + ...obj, + hash: encode(obj.key), + nameHash: encode(obj.key.replace(prefix, '')), + name: obj.key.replace(prefix, ''), + lastModified: timeSince(date), + timestamp: date.getTime(), + size: bytesToSize(obj.size), + sizeRaw: obj.size, + type: 'file', + icon: 'article', + color: 'grey', + } + }).filter(obj => { + // Remove hidden files + return !(mainStore.showHiddenFiles !== true && obj.name.startsWith('.')) + }) + + for (const f of files) { + contentFiles.push(f) + } + } + + if (response.data.delimitedPrefixes) { + const folders = response.data.delimitedPrefixes.map(function (obj) { + return { + name: obj.replace(prefix, ''), + hash: encode(obj.key), + key: obj, + lastModified: '--', + timestamp: 0, + size: '--', + sizeRaw: 0, + type: 'folder', + icon: 'folder', + color: 'orange', + } + }).filter(obj => { + // Remove hidden files + return !(mainStore.showHiddenFiles !== true && obj.name.startsWith('.')) + }) + + for (const f of folders) { + contentFolders.push(f) + } + } + } + + return [ + ...contentFolders, + ...contentFiles + ] + } } diff --git a/packages/dashboard-v2/src/components/files/CreateFolder.vue b/packages/dashboard-v2/src/components/files/CreateFolder.vue index 57cabcc..3624a59 100644 --- a/packages/dashboard-v2/src/components/files/CreateFolder.vue +++ b/packages/dashboard-v2/src/components/files/CreateFolder.vue @@ -1,9 +1,9 @@ - - - + + + New Folder Name @@ -15,11 +15,11 @@ - - + + - - + + @@ -29,44 +29,49 @@ import { useMainStore } from "stores/main-store"; import { apiHandler, decode, ROOT_FOLDER } from "src/appUtils"; export default defineComponent({ - name: 'CreateFolder', - data: function () { + name: "CreateFolder", + data: function() { return { modal: false, - newFolderName: '' - } + newFolderName: "", + loading: false + }; }, methods: { cancel: function() { - this.modal = false - this.newFolderName = '' + this.modal = false; + this.newFolderName = ""; + this.loading = false }, onSubmit: async function() { - await apiHandler.createFolder(this.selectedFolder + this.newFolderName + '/', this.selectedBucket) - this.$bus.emit('fetchFiles') - this.modal = false + this.loading = true + await apiHandler.createFolder(this.selectedFolder + this.newFolderName + "/", this.selectedBucket); + this.$bus.emit("fetchFiles"); + this.loading = false + this.modal = false; + this.newFolderName = ""; }, open: function() { - this.modal = true + this.modal = true; } }, computed: { - selectedBucket: function () { - return this.$route.params.bucket + selectedBucket: function() { + return this.$route.params.bucket; }, - selectedFolder: function () { + selectedFolder: function() { if (this.$route.params.folder && this.$route.params.folder !== ROOT_FOLDER) { - return decode(this.$route.params.folder) + return decode(this.$route.params.folder); } - return '' - }, + return ""; + } }, setup() { const mainStore = useMainStore(); return { - mainStore, + mainStore }; - }, -}) + } +}); diff --git a/packages/dashboard-v2/src/components/files/FileOptions.vue b/packages/dashboard-v2/src/components/files/FileOptions.vue new file mode 100644 index 0000000..74ed684 --- /dev/null +++ b/packages/dashboard-v2/src/components/files/FileOptions.vue @@ -0,0 +1,131 @@ + + + + + + Are you sure you want to delete the folder {{deleteRow.name}}, and + {{deleteFolderInnerFilesCount}} + + files inside? + Are you sure you want to delete the file {{deleteRow.name}}? + + + + + + + + + + + + + diff --git a/packages/dashboard-v2/src/components/preview/FilePreview.vue b/packages/dashboard-v2/src/components/preview/FilePreview.vue index a2953f9..21f70c6 100644 --- a/packages/dashboard-v2/src/components/preview/FilePreview.vue +++ b/packages/dashboard-v2/src/components/preview/FilePreview.vue @@ -211,7 +211,7 @@ export default { params: { bucket: this.$route.params.bucket, folder: this.$route.params.folder || ROOT_FOLDER, - file: file.hash + file: file.nameHash } }); diff --git a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue index 4446e26..4190998 100644 --- a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue +++ b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue @@ -17,8 +17,7 @@ :hide-pagination="true" :rows-per-page-options="[0]" column-sort-order="da" - :flat="true" - @rowClick="rowClick"> + :flat="true"> @@ -27,14 +26,23 @@ - + - + Open + + Download + + + Get sharable link + + + Delete + New incognito tab @@ -52,19 +60,22 @@ +
{{deleteRow.name}}
{{deleteFolderInnerFilesCount}}