Skip to content

Commit

Permalink
Added new UI prototype to Upload Files pg. Code comments include some…
Browse files Browse the repository at this point in the history 
… to-do's to tackle. [ref #4610]
  • Loading branch information
@mheppler
mheppler committed May 31, 2018
1 parent e600c29 commit 3db4486
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 40 deletions.
5 changes: 3 additions & 2 deletions src/main/java/Bundle.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1226,7 +1226,8 @@ dataset.keywordDisplay.title=Keyword
dataset.subjectDisplay.title=Subject
dataset.contact.tip=Use email button above to contact.
dataset.asterisk.tip=Asterisks indicate required fields
dataset.message.uploadFiles=Upload Dataset Files - You can drag and drop files from your desktop, directly into the upload widget.
dataset.message.uploadFiles.label=Upload Dataset Files
dataset.message.uploadFiles.message=For more information about supported file formats, please refer to the <a href="{0}/{1}/user/dataset-management.html#file-handling-and-uploading" title="File Handling and Uploading - Dataverse User Guide" target="_blank">User Guide</a>.
dataset.message.editMetadata=Edit Dataset Metadata - Add more metadata about this dataset to help others easily find it.
dataset.message.editTerms=Edit Dataset Terms - Update this dataset's terms of use.
dataset.message.locked.editNotAllowedInReview=Dataset cannot be edited due to In Review dataset lock.
Expand Down Expand Up @@ -1302,7 +1303,7 @@ file.count={0} {0, choice, 0#Files|1#File|2#Files}
file.count.selected={0} {0, choice, 0#Files Selected|1#File Selected|2#Files Selected}
file.selectToAddBtn=Select Files to Add
file.selectToAdd.tipLimit=File upload limit is {0} bytes per file.
file.selectToAdd.tipMoreInformation=For more information about supported file formats, please refer to the <a href="{0}/{1}/user/dataset-management.html#file-handling-and-uploading" title="File Handling and Uploading - Dataverse User Guide" target="_blank">User Guide</a>.
file.selectToAdd.tipMoreInformation=Select or drag and drop files from your desktop, directly into the upload widget.
file.selectToAdd.dragdropMsg=Drag and drop files here.
file.createUploadDisabled=Once you have saved your dataset, you can upload your data using the "Upload Files" button on the dataset page. For more information about supported file formats, please refer to the User Guide.
file.fromDropbox=Upload from Dropbox
Expand Down
3 changes: 2 additions & 1 deletion src/main/java/edu/harvard/iq/dataverse/EditDatafilesPage.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import edu.harvard.iq.dataverse.ingest.IngestUtil;
import edu.harvard.iq.dataverse.search.FileView;
import edu.harvard.iq.dataverse.settings.SettingsServiceBean;
import edu.harvard.iq.dataverse.util.BundleUtil;
import edu.harvard.iq.dataverse.util.FileUtil;
import edu.harvard.iq.dataverse.util.JsfHelper;
import static edu.harvard.iq.dataverse.util.JsfHelper.JH;
Expand Down Expand Up @@ -551,7 +552,7 @@ public String init() {
saveEnabled = true;

if (mode == FileEditMode.UPLOAD) {
JH.addMessage(FacesMessage.SEVERITY_INFO, getBundleString("dataset.message.uploadFiles"));
JH.addMessage(FacesMessage.SEVERITY_INFO, BundleUtil.getStringFromBundle("dataset.message.uploadFiles.label"), BundleUtil.getStringFromBundle("dataset.message.uploadFiles.message", Arrays.asList(systemConfig.getGuidesBaseUrl(), systemConfig.getGuidesVersion())));
}

if (settingsService.isTrueForKey(SettingsServiceBean.Key.PublicInstall, false)){
Expand Down
158 changes: 130 additions & 28 deletions src/main/webapp/editFilesFragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,46 @@
</ul>
<div class="ui-tabs-panels">
<div aria-hidden="false" role="tabpanel" class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="datasetForm:tabView:dataFilesTab">

<!-- Upload -->
<ui:fragment id="fileUploadFragment" rendered="#{datasetPage || EditDatafilesPage.showFileUploadFragment()}">
<div class="panel-group" role="tablist" aria-multiselectable="true"
id="fileUploadFragment" jsf:rendered="#{datasetPage || EditDatafilesPage.showFileUploadFragment()}">

<!-- TODO: ACCORDION OPTIONS SCALABLE >1? -->

<div class="panel panel-default">

<!-- TODO: New help text needed for these panels, replace placeholder text here and add final msg text to bundle -->

<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#fileUploadFragment" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Upload with HTTP via your browser
</a>
</h4>
</div>

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">


<div class="panel-body">

<p class="help-block">
Help message proving value and info about HTTP upload to the user.
</p>

<p class="help-block">
<span class="glyphicon glyphicon-info-sign"/>
<h:outputFormat value=" #{bundle['file.selectToAdd.tipLimit']}" escape="false"
rendered="#{systemConfig.maxFileUploadSize !=null and !empty systemConfig.maxFileUploadSize}">
<f:param value="#{systemConfig.maxFileUploadSize}"/>
</h:outputFormat>
<h:outputFormat value=" #{bundle['file.selectToAdd.tipMoreInformation']}" escape="false">
<f:param value="#{systemConfig.guidesBaseUrl}"/>
<f:param value="#{systemConfig.guidesVersion}"/>
</h:outputFormat>
</p>

<script>
//<![CDATA[
function uploadWidgetDropMsg() {
Expand Down Expand Up @@ -140,20 +178,8 @@
});
//]]>
</script>
<p class="help-block">
<span class="glyphicon glyphicon-info-sign"/>
<ui:fragment rendered="#{systemConfig.maxFileUploadSize !=null and !empty systemConfig.maxFileUploadSize}">
<h:outputFormat value=" #{bundle['file.selectToAdd.tipLimit']}" escape="false">
<f:param value="#{systemConfig.maxFileUploadSize}"/>
</h:outputFormat>
</ui:fragment>
<ui:fragment rendered="true">
<h:outputFormat value=" #{bundle['file.selectToAdd.tipMoreInformation']}" escape="false">
<f:param value="#{systemConfig.guidesBaseUrl}"/>
<f:param value="#{systemConfig.guidesVersion}"/>
</h:outputFormat>
</ui:fragment>
</p>


<!-- ATTENTION: the update= attribute in the fileUpload component -->
<!-- below appears to be super important -->
<!-- Note the "oncomplete=" attribute in the p:fileUpload -->
Expand Down Expand Up @@ -198,29 +224,100 @@
invalidSizeMessage="#{bundle['file.edit.error.file_exceeds_limit']}"
sequential="true"
widgetVar="fileUploadWidget"/>
<!-- Dropbox Upload -->
<div jsf:id="dropboxUploadBlock" class="panel panel-default margin-bottom" jsf:rendered="#{(!(empty EditDatafilesPage.dropBoxKey))}">
<div class="panel-body">
<h:inputText id="dropBoxSelectionInput" style="display:none" value="#{EditDatafilesPage.dropBoxSelection}"/>
<p:commandButton id="dropBoxButton" actionListener="#{EditDatafilesPage.handleDropBoxUpload}" oncomplete="javascript:dropBoxUploadFinished();" update="@none" style="display:none;" />
<p:commandButton id="dropBoxUserButton" disabled="#{!(datasetPage || EditDatafilesPage.showFileUploadComponent())}" value="#{bundle['file.fromDropbox']}" onclick="openDropboxChooser();" icon="dropin-btn-status" />

<p class="help-block">#{bundle['file.fromDropbox.tip']}</p>

</div>
</div>
</div>


<div class="panel panel-default">

<!-- TODO: Need proper Dropbox render logic -->
<!-- TODO: New help text needed for these panels, replace placeholder text here and add final msg text to bundle -->

<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#fileUploadFragment" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Upload with Dropbox
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">

<p class="help-block">
Help message proving value and info about Dropbox to the user.
</p>

<!-- Dropbox Upload -->
<div jsf:id="dropboxUploadBlock" class="panel panel-default margin-bottom" jsf:rendered="#{(!(empty EditDatafilesPage.dropBoxKey))}">
<div class="panel-body">
<h:inputText id="dropBoxSelectionInput" style="display:none" value="#{EditDatafilesPage.dropBoxSelection}"/>
<p:commandButton id="dropBoxButton" actionListener="#{EditDatafilesPage.handleDropBoxUpload}" oncomplete="javascript:dropBoxUploadFinished();" update="@none" style="display:none;" />
<p:commandButton id="dropBoxUserButton" disabled="#{!(datasetPage || EditDatafilesPage.showFileUploadComponent())}" value="#{bundle['file.fromDropbox']}" onclick="openDropboxChooser();" icon="dropin-btn-status" />

<p class="help-block">#{bundle['file.fromDropbox.tip']}</p>
</div>
<p:message for="dropBoxButton" id="dropBoxUploadMessage" display="text" redisplay="false" />
</div>
</div>
</div>
<p:message for="dropBoxButton" id="dropBoxUploadMessage" display="text" redisplay="false" />
</div>


<div jsf:id="rsyncPanel" class="panel panel-default">

<!-- TODO: Need proper rsync render logic -->
<!-- TODO: New help text needed for these panels, replace placeholder text here and add final msg text to bundle -->

<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#fileUploadFragment" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Upload with rsync+ssh via Data Capture Module (DCM)
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p jsf:rendered="#{empty EditDatafilesPage.fileMetadatas}" class="help-block">
Help message proving value and info about rsync to the user.
</p>
<p jsf:rendered="#{!empty EditDatafilesPage.fileMetadatas}" class="help-block">
<span class="text-danger">Warning message about how this option is not available because of uploaded files to this dataset.</span>
</p>
</div>
</div>
</div>


<p:message for="fileUpload" id="uploadMessage" display="text" />

<p:commandButton id="uploadStarted" action="#{EditDatafilesPage.uploadStarted()}" update="" style="display:none"/>
<p:commandButton id="AllUploadsFinished" action="#{EditDatafilesPage.uploadFinished()}" update="datasetForm:fileUpload,datasetForm:dropBoxUserButton,datasetForm:uploadMessage,datasetForm:filesTable" oncomplete="javascript:uploadWidgetDropMsg();" style="display:none"/>
<p:commandButton id="dropBoxUploadFinished" action="#{EditDatafilesPage.uploadFinished()}" update="datasetForm:fileUpload,datasetForm:dropBoxUserButton,datasetForm:dropBoxUploadMessage,datasetForm:filesTable" style="display:none"/>
</ui:fragment>
<p:commandButton id="AllUploadsFinished" action="#{EditDatafilesPage.uploadFinished()}" update="datasetForm:fileUpload,datasetForm:dropBoxUserButton,datasetForm:uploadMessage,datasetForm:rsyncPanel,datasetForm:filesCounts,datasetForm:filesTable,datasetForm:filesButtons" oncomplete="javascript:uploadWidgetDropMsg();" style="display:none"/>
<p:commandButton id="dropBoxUploadFinished" action="#{EditDatafilesPage.uploadFinished()}" update="datasetForm:fileUpload,datasetForm:dropBoxUserButton,datasetForm:dropBoxUploadMessage,datasetForm:rsyncPanel,datasetForm:filesCounts,datasetForm:filesTable,datasetForm:filesButtons" style="display:none"/>

<!-- ????? TODO: How scalable are all these hidden update buttons ????? -->
<!-- ?????
datasetForm:fileUpload,
datasetForm:dropBoxUserButton,
datasetForm:uploadMessage,
datasetForm:filesCounts,
datasetForm:filesTable,
datasetForm:filesButtons
????? -->

</div>
<!-- END: Upload -->

<div jsf:id="filesCounts">

<!-- TODO: ADDED filesCounts id to commandButtons above in Line 291-292, is there a better way to do this other than listing out 5-6 elements to update? -->


<!-- Files Table -->
<p:dataTable id="filesTable"
value="#{EditDatafilesPage.fileMetadatas}"
rendered="#{datasetPage or (dataverseSession.user.authenticated and permissionsWrapper.canIssueUpdateDatasetCommand(EditDatafilesPage.dataset))}"
rendered="#{!empty EditDatafilesPage.fileMetadatas and (datasetPage or (dataverseSession.user.authenticated and permissionsWrapper.canIssueUpdateDatasetCommand(EditDatafilesPage.dataset)))}"
rowIndexVar="rowNum"
rowKey="#{fileMetadata.dataFile.storageIdentifier}"
selection="#{EditDatafilesPage.selectedFiles}"
Expand Down Expand Up @@ -422,6 +519,11 @@
</div>
</p:column>
</p:dataTable>


</div>


</div>
</div>
</div>
Expand Down
31 changes: 22 additions & 9 deletions src/main/webapp/editdatafiles.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,15 +100,28 @@
</div>

<!-- Create/Save Dataset Button Panel -->
<div class="button-block">
<p:commandButton tabindex="1000" id="save" value="#{bundle.saveChanges}" onclick="checkNewlyRestricted();PF('blockFileForm').show();" />
<p:commandButton tabindex="1000" id="cancel" value="#{bundle.cancel}" action="#{EditDatafilesPage.cancel}" process="@this" update="@form" oncomplete="javascript:post_cancel_edit_files_or_metadata()">
</p:commandButton>
<p:commandButton value="Direct" id="datasetSave"
style="display:none"
update=":datasetForm,:messagePanel"
oncomplete="javascript:bind_bsui_components();$(document).scrollTop(0);"
action="#{EditDatafilesPage.save}" />
<div jsf:id="filesButtons" class="button-block">
<div jsf:rendered="#{!empty EditDatafilesPage.fileMetadatas}">
<p:commandButton tabindex="1000" id="save" value="#{bundle.saveChanges}" onclick="checkNewlyRestricted();PF('blockFileForm').show();" />
<p:commandButton tabindex="1000" id="cancel" value="#{bundle.cancel}" action="#{EditDatafilesPage.cancel}" process="@this" update="@form" oncomplete="javascript:post_cancel_edit_files_or_metadata()">
</p:commandButton>
<p:commandButton value="Direct" id="datasetSave"
style="display:none"
update=":datasetForm,:messagePanel"
oncomplete="javascript:bind_bsui_components();$(document).scrollTop(0);"
action="#{EditDatafilesPage.save}" />
</div>

<div jsf:rendered="#{empty EditDatafilesPage.fileMetadatas}">

<!-- TODO: New Done button replaces Save Changes + Cancel btns when the page is empty/no file/nothing to save -->
<!-- TODO: Investigate + fix Delete Files > Done bug? -->

<p:commandButton tabindex="1000" id="done" value="#{bundle.done}" action="#{EditDatafilesPage.cancel}" process="@this" update="@form" oncomplete="javascript:post_cancel_edit_files_or_metadata()">
</p:commandButton>

</div>

</div>
<!-- END: Create/Save Dataset Button Panel -->

Expand Down

0 comments on commit 3db4486

Please sign in to comment.