Skip to content

Commit

Permalink
Add folder deletion and bump itty-router-openapi
Browse files Browse the repository at this point in the history
  • Loading branch information
G4brym committed Jan 11, 2024
1 parent d9de6c4 commit b8a9a58
Show file tree
Hide file tree
Showing 10 changed files with 361 additions and 115 deletions.
79 changes: 79 additions & 0 deletions packages/dashboard-v2/src/appUtils.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { api } from "boot/axios";
import { useMainStore } from "stores/main-store";

export const ROOT_FOLDER = "IA==" // IA== is a space

Expand Down Expand Up @@ -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
]
}
}
61 changes: 33 additions & 28 deletions packages/dashboard-v2/src/components/files/CreateFolder.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<q-dialog v-model="modal" persistent>
<q-form
@submit="onSubmit"
>
<q-card style="min-width: 350px">
<q-dialog v-model="modal" @hide="cancel">
<q-card style="min-width: 350px">
<q-form
@submit="onSubmit"
>
<q-card-section>
<div class="text-h6">New Folder Name</div>
</q-card-section>
Expand All @@ -15,11 +15,11 @@
</q-card-section>

<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" @click="cancel" />
<q-btn flat label="Create" type="submit" />
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat label="Create" type="submit" :loading="loading" />
</q-card-actions>
</q-card>
</q-form>
</q-form>
</q-card>
</q-dialog>
</template>

Expand All @@ -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
};
},
})
}
});
</script>
131 changes: 131 additions & 0 deletions packages/dashboard-v2/src/components/files/FileOptions.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<q-dialog v-model="deleteModal" @hide="deleteReset">
<q-card>
<q-card-section class="row column" v-if="deleteRow">
<q-avatar class="q-mb-md" icon="delete" color="red" text-color="white" />
<span v-if="deleteRow.type === 'folder'" class="q-ml-sm">Are you sure you want to delete the folder <code>{{deleteRow.name}}</code>, and
<code v-if="deleteFolderInnerFilesCount !== null">{{deleteFolderInnerFilesCount}}</code>
<code v-else><q-spinner color="primary"/></code>
files inside?</span>
<span v-else class="q-ml-sm">Are you sure you want to delete the file <code>{{deleteRow.name}}</code>?</span>
</q-card-section>

<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="Delete" color="red" @click="deleteConfirm" />
</q-card-actions>
</q-card>
</q-dialog>
</template>

<script>
import { defineComponent } from "vue";
import { useMainStore } from "stores/main-store";
import { apiHandler, decode, encode, ROOT_FOLDER } from "src/appUtils";
import { useQuasar } from "quasar";
export default defineComponent({
name: 'FileOptions',
data: function () {
return {
deleteRow: null,
deleteFolderContents: [],
deleteModal: false,
deleteFolderInnerFilesCount: null,
newFolderName: ''
}
},
methods: {
deleteObject: async function(row) {
this.deleteModal = true
this.deleteRow = row
if (row.type === 'folder') {
this.deleteFolderContents = await apiHandler.fetchFile(this.selectedBucket, row.key, '')
this.deleteFolderInnerFilesCount = this.deleteFolderContents.length
}
},
deleteConfirm: async function() {
this.deleteModal = false
if (this.deleteRow.type === 'folder') {
const notif = this.q.notify({
group: false,
spinner: true,
message: 'Deleting files...',
caption: '0%',
timeout: 0
})
console.log(this.deleteFolderContents)
for (const [i, innerFile] of this.deleteFolderContents.entries()) {
if (innerFile.key) {
await apiHandler.deleteObject(innerFile.key, this.selectedBucket)
}
notif({
caption: `${parseInt(i*100/(this.deleteFolderInnerFilesCount+1))}%` // +1 because still needs to delete the folder
})
}
await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
notif({
icon: 'done', // we add an icon
spinner: false, // we reset the spinner setting so the icon can be displayed
caption: '100%',
message: 'Folder deleted!',
timeout: 2500 // we will timeout it in 2.5s
})
} else {
await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
this.q.notify({
group: false,
icon: 'done', // we add an icon
spinner: false, // we reset the spinner setting so the icon can be displayed
message: 'File deleted!',
timeout: 2500 // we will timeout it in 2.5s
})
}
this.$bus.emit('fetchFiles')
this.deleteReset()
},
deleteReset: function() {
this.deleteModal = false
this.deleteRow = null
this.deleteFolderInnerFilesCount = null
this.deleteFolderContents = []
},
onSubmit: async function() {
await apiHandler.createFolder(this.selectedFolder + this.newFolderName + '/', this.selectedBucket)
this.$bus.emit('fetchFiles')
this.modal = false
},
open: function() {
this.modal = true
}
},
computed: {
selectedBucket: function () {
return this.$route.params.bucket
},
selectedFolder: function () {
if (this.$route.params.folder && this.$route.params.folder !== ROOT_FOLDER) {
return decode(this.$route.params.folder)
}
return ''
},
},
setup() {
return {
mainStore: useMainStore(),
q: useQuasar()
};
},
})
</script>

<style scoped>
code {
background-color: #e9e9e9;
padding: 0.25em;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
});
Expand Down
Loading

0 comments on commit b8a9a58

Please sign in to comment.