diff --git a/src/components/dropbox-file-selector/dropbox-file-selector.vue b/src/components/dropbox-file-selector/dropbox-file-selector.vue index ad7c99a..bbf2975 100644 --- a/src/components/dropbox-file-selector/dropbox-file-selector.vue +++ b/src/components/dropbox-file-selector/dropbox-file-selector.vue @@ -47,31 +47,38 @@

@@ -83,7 +90,7 @@ import { mapMutations, mapActions } from "vuex"; import { loader } from "zcanvas"; import ImageToDocumentManager from "@/mixins/image-to-document-manager"; -import { listFolder, downloadFileAsBlob } from "@/services/dropbox-service"; +import { listFolder, downloadFileAsBlob, deleteEntry } from "@/services/dropbox-service"; import DropboxImagePreview from "./dropbox-image-preview"; import { truncate } from "@/utils/string-util"; import { disposeResource } from "@/utils/resource-manager"; @@ -255,6 +262,26 @@ export default { } this.unsetLoading( "dbox" ); }, + handleDeleteClick({ path }) { + this.openDialog({ + type: "confirm", + message: this.$t( "deleteEntryWarning", { entry: path }), + confirm: async () => { + const success = await deleteEntry( path ); + if ( success ) { + this.showNotification({ + message: this.$t( "entryDeletedSuccessfully", { entry: path }) + }); + this.retrieveFiles( this.leaf.path ); + } else { + this.openDialog({ + type: "error", + message: this.$t( "couldNotDeleteEntry", { entry: path }) + }); + } + }, + }); + }, }, }; @@ -293,6 +320,7 @@ export default { button { display: inline; position: relative; + cursor: pointer; margin-right: $spacing-small; border: none; background: none; @@ -316,11 +344,6 @@ export default { cursor: pointer; @include customFont(); - &:hover { - background-color: $color-1; - color: #FFF; - } - .title { position: absolute; bottom: $spacing-medium; @@ -329,14 +352,44 @@ export default { @include truncate(); } - &__folder { - background: url("../../assets/images/folder.png") no-repeat 50% $spacing-xlarge; - background-size: 50%; + &__icon { + width: inherit; + height: inherit; + + &--folder { + background: url("../../assets/images/folder.png") no-repeat 50% $spacing-xlarge; + background-size: 50%; + } + + &--document { + background: url("../../assets/icons/icon-bpy.svg") no-repeat 50% $spacing-xlarge; + background-size: 50%; + } } - &__document { - background: url("../../assets/icons/icon-bpy.svg") no-repeat 50% $spacing-xlarge; - background-size: 50%; + &__delete-button { + display: none; + position: absolute; + cursor: pointer; + top: -$spacing-small; + right: -$spacing-small; + background-color: #FFF; + color: $color-1; + width: $spacing-large; + height: $spacing-large; + border: none; + border-radius: 50%; + } + + &:hover { + .entry__icon { + background-color: $color-1; + color: #FFF; + } + + .entry__delete-button { + display: block; + } } } diff --git a/src/components/dropbox-file-selector/messages.json b/src/components/dropbox-file-selector/messages.json index b95539f..305b98b 100644 --- a/src/components/dropbox-file-selector/messages.json +++ b/src/components/dropbox-file-selector/messages.json @@ -3,6 +3,10 @@ "files": "Files", "noImageFiles": "This folder contains no image files", "couldNotRetrieveFilesForPath": "Could not retrieve files for \"{path}\"", - "importedFileSuccessfully": "Imported \"{file}\" successfully." + "importedFileSuccessfully": "Imported \"{file}\" successfully.", + "delete": "Delete", + "deleteEntryWarning": "Are you sure you wish to delete \"{entry}\" ? You can recover files and folders deleted from your Dropbox, but only through the Dropbox app or site.", + "entryDeletedSuccessfully": "\"{entry}\" deleted successfully", + "couldNotDeleteEntry": "An error occurred while attempting to delete \"{entry}\"" } } diff --git a/src/services/dropbox-service.js b/src/services/dropbox-service.js index b8f7f33..e6a0081 100644 --- a/src/services/dropbox-service.js +++ b/src/services/dropbox-service.js @@ -100,6 +100,15 @@ export const downloadFileAsBlob = async ( path, returnAsURL = false ) => { } }; +export const deleteEntry = async path => { + try { + const { result } = await dbx.filesDelete({ path }); + return !!result; + } catch { + return false; + } +}; + export const uploadBlob = async ( fileOrBlob, fileName ) => { const path = `${PROJECT_FOLDER}/${fileName.split( " " ).join ( "_" )}`; if ( fileOrBlob.size < UPLOAD_FILE_SIZE_LIMIT ) {