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 @@
-
+
{{ node.name }}
{{ node.name }}
-
+
+
@@ -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 ) {