Skip to content

Commit

Permalink
debug #301, better UI for uploads/deletions
Browse files Browse the repository at this point in the history
  • Loading branch information
@wpbonelli
wpbonelli committed Jun 5, 2022
1 parent f463f84 commit 46f5d16
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 117 deletions.
112 changes: 56 additions & 56 deletions plantit/front_end/src/components/datasets/data-tree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@
'\''
"
></b-form-file>
<span v-if="create">
<span v-if="create" class="ml-2">
<b-button
v-if="!isShared"
class="ml-1 mr-1"
Expand All @@ -202,28 +202,7 @@
? 'outline-light'
: 'outline-dark'
"
><i class="fas fa-plus fa-fw"></i
></b-button>
<b-button
v-if="isOwned && !isRoot"
class="ml-1 mr-1"
size="sm"
:disabled="deletingDirectory"
title="Delete Folder"
@click="
deleteFolder(
internalLoaded
? internalNode.path
: node.path,
profile.djangoProfile.cyverse_token
)
"
:variant="
profile.darkMode
? 'outline-light'
: 'outline-dark'
"
><i class="fas fa-trash text-danger fa-fw"></i
><i class="fas fa-folder-plus fa-fw"></i
></b-button>
<b-modal
:title-class="
Expand Down Expand Up @@ -418,7 +397,7 @@
? 'text-light'
: 'text-dark'
"
>The folder name</span
>Enter a name for this directory.</span
></template
>
<b-form-input
Expand All @@ -429,7 +408,7 @@
"
size="sm"
v-model="newDirectoryName"
:placeholder="'Enter a folder name'"
:placeholder="'Enter a name'"
></b-form-input>
</b-form-group>
<div v-if="showingProjectSelection">
Expand Down Expand Up @@ -557,7 +536,7 @@
></i></b-button></b-col></b-row></b-col
></b-row>
</div>
<b-row v-else
<!--<b-row v-else
><b-col
><b-button
@click="showProjectSelection"
Expand All @@ -579,7 +558,7 @@
Show Project Selection</b-button
></b-col
></b-row
>
>-->
</b-modal>
<b-modal
:title-class="
Expand Down Expand Up @@ -672,6 +651,27 @@
class="ml-1 mr-1"
><i class="fas fa-share-alt fa-fw"></i
></b-button>
<b-button
v-if="isOwned && !isRoot"
class="ml-1 mr-1"
size="sm"
:disabled="deletingDirectory"
title="Delete Folder"
@click="
deleteFolder(
internalLoaded
? internalNode.path
: node.path,
profile.djangoProfile.cyverse_token
)
"
:variant="
profile.darkMode
? 'outline-light'
: 'outline-dark'
"
><i class="fas fa-trash text-danger fa-fw"></i
></b-button>
<!--<b-dropdown
class="mr-1 ml-1"
v-if="
Expand Down Expand Up @@ -1050,22 +1050,21 @@
v-if="upload && !isShared && (filesToUpload.length > 0 || uploadingFiles.length > 0)"
no-body
:bg-variant="profile.darkMode ? 'dark' : 'light'">
<template #header><h5 :class="profile.darkMode ? 'text-light' : 'text-dark'">Uploads</h5></template>
<b-row>
<b-col>
<b-list-group>
<b-list-group-item :variant="profile.darkMode ? 'dark' : 'light'" v-for="file in filesToUpload" v-bind:key="file.name">
<span>{{ file.name }}</span> <span v-if="uploadedFiles.some(f => f.name === file.name)"><i class="fas fa-check text-success ml-1"></i></span><span v-else-if="uploading"><b-spinner label="Uploading..." class="ml-1" variant="secondary" small></b-spinner></span>
<b-list-group-item :class="profile.darkMode ? 'darkitems' : ''" v-for="file in filesToUpload" v-bind:key="file.name">
<span><i class="fas fa-upload fa-fw"></i> {{ file.name }}</span> <span v-if="uploadedFiles.some(f => f.name === file.name)"><i class="fas fa-check text-success ml-1"></i></span><span v-else-if="uploading"><b-spinner label="Uploading..." class="ml-1" variant="secondary" small></b-spinner></span>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
<b-row v-if="!uploading" class="mt-2">
<b-row class="mt-2">
<b-col>
<b-button
block
size="sm"
:disabled="filesToUpload.length === 0"
:disabled="filesToUpload.length === 0 || uploading"
@click="
uploadFiles(
filesToUpload,
Expand All @@ -1076,7 +1075,7 @@
:variant="
profile.darkMode ? 'outline-light' : 'outline-dark'
"
><i class="fas fa-upload fa-fw"></i
><b-spinner v-if="uploading" label="Uploading..." class="ml-1" variant="secondary" small></b-spinner> <i v-else class="fas fa-angle-right fa-fw"></i
> Upload</b-button>
</b-col>
</b-row>
Expand All @@ -1085,11 +1084,10 @@
v-if="!isShared && deletingPaths.length > 0"
no-body
:bg-variant="profile.darkMode ? 'dark' : 'light'">
<template #header><h5 :class="profile.darkMode ? 'text-light' : 'text-dark'">Deletions</h5></template>
<b-row>
<b-col>
<b-list-group-item :variant="profile.darkMode ? 'dark' : 'light'" v-for="path in deletingPaths" v-bind:key="path">
<span>{{ path }}</span>
<b-list-group-item :class="profile.darkMode ? 'darkitems' : ''" :variant="profile.darkMode ? 'dark' : 'light'" v-for="path in deletingPaths" v-bind:key="path">
<span class="text-danger"><i class="fas fa-trash fa-fw"></i> Deleting {{ path }}</span>
<span><b-spinner label="Uploading..." class="ml-1" variant="danger" small></b-spinner></span>
</b-list-group-item>
</b-col>
Expand Down Expand Up @@ -1224,11 +1222,6 @@
:class="profile.darkMode ? 'theme-dark' : 'theme-light'"
>
<b-col>
<b-img-lazy
v-if="previewsLoaded && fileIsImage(child.label)"
:src="getFileURL(child)"
style="width: 2rem; height: 2rem"
></b-img-lazy>
<b-button
class="mt-1 mb-1 ml-4"
:disabled="!select || select !== 'file'"
Expand All @@ -1243,11 +1236,16 @@
{{ child.label }}</b-button
>
</b-col>
<b-col md="auto" align-self="center"
<b-col align-self="center"
><small>{{
formatBytes(child['file-size'])
}}</small></b-col
>
<b-col md="auto" align-self="center"><b-img-lazy
v-if="previewsLoaded && fileIsImage(child.label)"
:src="getFileURL(child)"
style="width: 2rem; height: 2rem"
></b-img-lazy></b-col>
<b-col md="auto" align-self="center">
<b-button
id="popover-reactive-1"
Expand All @@ -1264,19 +1262,6 @@
<i class="fas fa-eye fa-fw"></i>
</b-button>
<b-button
v-if="isOwned"
class="m-1"
size="sm"
title="Delete File"
@click="
deleteFile(
child.path,
profile.djangoProfile.cyverse_token
)
"
variant="outline-danger"
><i class="fas fa-trash fa-fw"></i></b-button
><b-button
class="m-1"
size="sm"
title="Download File"
Expand All @@ -1293,7 +1278,21 @@
: 'outline-dark'
"
><i class="fas fa-download fa-fw"></i></b-button
></b-col>
>
<b-button
v-if="isOwned"
class="m-1"
size="sm"
title="Delete File"
@click="
deleteFile(
child.path,
profile.djangoProfile.cyverse_token
)
"
variant="outline-danger"
><i class="fas fa-trash fa-fw"></i></b-button
></b-col>
</b-row>
</b-overlay>
</b-list-group-item>
Expand Down Expand Up @@ -2042,6 +2041,7 @@ export default {
guid: guid().toString(),
});
this.removeItemAll(this.deletingPaths, path);
setTimeout(this.refresh, 2000)
}
return deleted;
},
Expand Down
36 changes: 21 additions & 15 deletions plantit/front_end/src/components/navigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -815,27 +815,21 @@
}}</b-button
>
<p v-if="profile.migration.started !== null">
<br />
<span v-if="profile.migration.num_files !== null"
>You have
{{ profile.migration.num_files - uploadedFiles.length }} remaining files to
migrate.</span
>
<b-progress
v-if="profile.migration.num_files !== null"
:value="uploadedFiles.length"
:max="profile.migration.num_files"
animated
variant="success"
></b-progress>
<br />
<b>Started:</b>
{{ prettify(profile.migration.started) }}
<br />
<b>Collection:</b>
{{ profile.migration.target_path }}
<br />
<b>Orphans:</b> {{ uploadedFiles.filter(f => f.orphan).length }}
<br/>
<b>Missing:</b> {{ uploadedFiles.filter(f => f.missing).length }}
<br/>
<b>Subcollections:</b>
<br/>
<b-list-group
v-if="uploadedCollections.length > 0"
style="
max-height: 10rem;
overflow: scroll;
Expand All @@ -847,13 +841,25 @@
v-for="collection in uploadedCollections"
v-bind:key="collection.name"
>
<i
<!--<i
class="fas text-success fa-check fa-1x fa-fw"
></i>
></i>-->
{{ collection.name }},
{{ collection.files }} file(s)
</b-list-group-item>
</b-list-group>
<b-spinner class="text-center" v-else variant="secondary"></b-spinner>
<br/>
<span v-if="profile.migration.num_files !== null"
>{{ uploadedFiles.length }}/{{ profile.migration.num_files }} files migrated.</span
>
<b-progress
v-if="profile.migration.num_files !== null"
:value="uploadedFiles.length"
:max="profile.migration.num_files"
animated
variant="success"
></b-progress>
</p>
</b-col>
</b-row>
Expand Down
3 changes: 3 additions & 0 deletions plantit/front_end/src/scss/main.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,9 @@ h5
margin-bottom: 1px
// box-shadow: -1px 1px 13px $gray-500
.darkitems
background-color: #1c1e23
a
font-weight: 300
font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif
Expand Down
Loading

0 comments on commit 46f5d16

Please sign in to comment.