Skip to content

Commit

Permalink
Update design of new CSV import page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mark-dce
mark-dce committed Oct 16, 2019
1 parent 6b449a2 commit 266d5d1
Show file tree
Hide file tree
Showing 9 changed files with 140 additions and 75 deletions.
44 changes: 44 additions & 0 deletions app/assets/stylesheets/zizia/_new.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
.bullet {
background: black;
color: white;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}

.well {
margin-bottom: 0.25em;
min-height: 5em;
h4 {
margin-top: 0;
.bullet {
float: left;
background: white;
color: black;
border: 1px solid #e3e3e3;
}
}
}

.no-collection {
background: #f7ecb5;
}

.step {
margin-top: -1em;
margin-bottom: .5em;
}

.zizia .btn {
width: 60%;
}

.zizia h3 {
margin-bottom: 1.5em;
}
1 change: 1 addition & 0 deletions app/assets/stylesheets/zizia/zizia.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'file_upload';
@import 'field_guide';
@import 'new';

.btn {
white-space:normal !important;
Expand Down
4 changes: 2 additions & 2 deletions app/views/zizia/csv_imports/_actions.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="actions">
<%= form.submit 'Preview Import', class: "btn btn-primary btn-lg" %>
</div>
<span class="glyphicon glyphicon-square-checkbox"></span><%= form.submit 'Preview Import', class: "btn btn-default btn-lg glyphicon glyphicon-square-checkbox" %>
</div>
4 changes: 1 addition & 3 deletions app/views/zizia/csv_imports/_collection_selection.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
<div class="form-group">
<%= form.select :fedora_collection_id, options_for_select(collections_for_select), {}, class: "form-control", id: "fedora_collection_id" %>
</div>
<%= form.select :fedora_collection_id, options_for_select(collections_for_select), {}, class: "form-control", id: "fedora_collection_id" %>
2 changes: 1 addition & 1 deletion app/views/zizia/csv_imports/_file_upload.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<%= form.file_field :manifest, required: true, id: 'file-upload', class: "file-upload form-control", onchange: "Zizia.displayUploadedFile()" %>
<label for="file-upload" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-upload"></span> Upload Your CSV</label>
<label for="file-upload" class="btn btn-lg btn-default"><span class="glyphicon glyphicon-upload"></span> Upload Your CSV</label>
<div id="file-upload-display"></div>
136 changes: 77 additions & 59 deletions app/views/zizia/csv_imports/_form.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,101 @@
<%= form_with(model: csv_import, local: true, html: { multipart: true }, url: preview_csv_import_path) do |form| %>
<%= form.hidden_field :manifest_cache %>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<h2> Getting Started </h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well well-lg">
<p><b>Read the CSV Field Guide</b> to learn what is required in your CSV.</p>
<h3><span class="bullet">1</span> Prepare Your Content</h3>
<div class="well well-sm">
<h4><span class="bullet">A</span></h4>
<div class="step">
<b>Read the Metadata Field Guide</b> to learn what fields are available for import.
</div>
<div class="text-center">
<a href="/importer_documentation/guide" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-book"></i> CSV Field Guide</a>
<a href="/importer_documentation/guide" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-book"></i> Field Guide</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="well well-lg">
<p><b>Download a CSV template</b> to get started.</b></p>
<div class="well well-sm">
<h4><span class="bullet">B</span></h4>
<div class="step">
<b>Download a CSV template</b> and start filling in your metadata.
</div>
<div class="text-center">
<a href="/importer_documentation/csv" data-turbolinks="false" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-list"></i> Download an Import Template</a>
<a href="/importer_documentation/csv" data-turbolinks="false" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-list"></i> Import Template</a>
</div>
</div>
<div class="well well-sm">
<h4><span class="bullet">C</span></h4>
<div class="step">
<b>Upload your files</b> over SFTP, using a tool like <a href="https://filezilla-project.org">FileZilla</a> to transfer files.
</div>
</div>
</div>
</div>
<hr/>

<% if collections? %>
<div class="row">
<div class="col-md-8">
<h2> Upload Your CSV </h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well well-lg">
<p> <b>Upload a CSV</b> that has your content. </p>
<div class="text-center">
<%= render "file_upload", form: form %>
<div class="col-md-4">
<h3><span class="bullet">2</span> Upload Your Files</h3>
<% if collections? %>
<div class="well well-sm">
<h4><span class="bullet">A</span></h4>
<div class="step">
<b>Upload a CSV</b> that lists the metadata and files you want to import.
</div>
<div class="text-center">
<%= render "file_upload", form: form %>
</div>
</div>
</div>
<div class="col-md-4">
<div class="well well-lg">
<p> <b>Choose a collection</b>. All imports need to be associated with a collection. </p>
<div class="text-center">
<%= render "collection_selection", form: form %>
<div class="well well-sm">
<h4><span class="bullet">B</span></h4>
<div class="step">
<b>Choose a collection</b> that you'd like your new works to be associated with.
</div>
<div class="text-center">
<%= render "collection_selection", form: form %>
</div>
</div>
</div>
<div class="col-md-4">
<div class="well well-lg">
<p> <b>Import Behavior</b>. Choose how you would like existing IDs to be handled.</p>
<div class="text-center">
<%= render "update_actor_stack", form: form %>
<div class="well well-sm">
<h4><span class="bullet">C</span></h4>
<div class="step">
<b>Select update behavior.</b> New works will always be added to the repository. Existing works can be overwritten, updated,
or ignored.
</div>
<div class="text-center">
<%= render "update_actor_stack", form: form %>
</div>
</div>
</div>
<div class="col-md-4">
<div class="well well-lg">
<p> <b>Preview your import</b> before starting the process. </p>
<div class="text-center">
<%= render "actions", form: form %>
<div class="well well-sm">
<h4><span class="bullet">D</span></h4>
<div class="step">
<b>Preview your import</b> and start the import if everything looks good.
or overwritten
</div>
<div class="text-center">
<%= render "actions", form: form %>
</div>
</div>
</div>
<% else %>
<div class="well well-sm no-collection ">
<h4><span class="bullet">A</span></h4>
<div class="step">
You must <a href="/dashboard/collections">create a collection</a> before importing content.
</div>
</div>
<% end %>
</div>

<div class="row">
<div class="col-md-4">
<%= render "error", csv_import: csv_import %>
</div>
<div class="col-md-4">
<div class="col-md-4">
<h3><span class="bullet">3</span> Monitor Your Progress</h3>
<div class="well well-sm">
<h4><span class="bullet">A</span></h4>
<div class="step">
<b>Check the status</b> of batches that have been submitted for import.
</div>
<div class="text-center">
<a href="/csv_import_details/index" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-roundabout"></i> Import History</a>
</div>
</div>
</div>


<%= form.hidden_field :manifest_cache %>
<% else %>
<%= render 'no_collection' %>
<% end %>
</div> <!-- row -->
<div class="row">
<%= render "error", csv_import: csv_import %>
</div> <!-- row -->
</div> <!-- panel-body -->
</div> <!-- panel -->
<% end %>
9 changes: 4 additions & 5 deletions app/views/zizia/csv_imports/_update_actor_stack.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<div class="form-group">
<%= form.select :update_actor_stack, options_for_select([['Update metadata for any existing IDs', 'HyraxMetadataOnly'],
['Only create works for new IDs', 'HyraxOnlyNew' ],
['Update metadata and files or create new works as required', 'HyraxDelete']]), {}, class: "form-control", id: "update_actor_stack_id" %>
</div>
<%= form.select :update_actor_stack, options_for_select([['Overwrite All Files & Metadata', 'HyraxDelete'],
['Update Existing Metadata, create new works', 'HyraxMetadataOnly'],
['Ignore Existing Works, new works only', 'HyraxOnlyNew' ]]), {}, class: "form-control", id: "update_actor_stack_id" %>

6 changes: 4 additions & 2 deletions app/views/zizia/csv_imports/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<%= javascript_include_tag 'zizia/application' %>
<h2><span class="glyphicon glyphicon-cloud-upload"></span> Begin Your CSV Import </h2>
<%= render 'form', csv_import: @csv_import %>
<div id="zizia_new" class="zizia">
<h2><span class="glyphicon glyphicon-cloud-upload"></span> Batch Import </h2>
<%= render 'form', csv_import: @csv_import %>
</div>
9 changes: 6 additions & 3 deletions spec/dummy/spec/system/import_from_csv_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,10 @@
visit '/csv_imports/new'
expect(page).to have_content 'Testing Collection'
expect(page).not_to have_content '["Testing Collection"]'
select 'Testing Collection', from: "csv_import[fedora_collection_id]"

# Fill in and submit the form
select 'Testing Collection', from: "csv_import[fedora_collection_id]"
select 'Update Existing Metadata, create new works', from: "csv_import[update_actor_stack]"
attach_file('csv_import[manifest]', csv_file, make_visible: true)

expect(page).to have_content('You sucessfully uploaded this CSV: all_fields.csv')
Expand Down Expand Up @@ -104,6 +106,7 @@
expect(page).to have_content 'Testing Collection'
expect(page).not_to have_content '["Testing Collection"]'
select 'Testing Collection', from: "csv_import[fedora_collection_id]"
select 'Update Existing Metadata, create new works', from: "csv_import[update_actor_stack]"

# Fill in and submit the form
attach_file('csv_import[manifest]', csv_metadata_update_file, make_visible: true)
Expand Down Expand Up @@ -159,7 +162,7 @@
expect(page).not_to have_content '["Testing Collection"]'
select 'Testing Collection', from: "csv_import[fedora_collection_id]"

select 'Only create works for new IDs', from: 'csv_import[update_actor_stack]'
select 'Ignore Existing Works, new works only', from: 'csv_import[update_actor_stack]'
# Fill in and submit the form
attach_file('csv_import[manifest]', csv_only_new_file, make_visible: true)

Expand Down Expand Up @@ -206,7 +209,7 @@
expect(page).not_to have_content '["Testing Collection"]'
select 'Testing Collection', from: "csv_import[fedora_collection_id]"

select 'Update metadata and files or create new works as required', from: 'csv_import[update_actor_stack]'
select 'Overwrite All Files & Metadata', from: 'csv_import[update_actor_stack]'
# Fill in and submit the form
attach_file('csv_import[manifest]', csv_complete_update_file, make_visible: true)

Expand Down

0 comments on commit 266d5d1

Please sign in to comment.