Skip to content

Commit

Permalink
Merge pull request #2986 from SEED-platform/refactor-2929/validation-…
Browse files Browse the repository at this point in the history 
…uiux

refactor: moved warning and errors for import into accordions
  • Loading branch information
Ryo committed Nov 3, 2021
2 parents 4d16477 + 982ac92 commit 669deaf
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 30 deletions.
42 changes: 12 additions & 30 deletions seed/static/seed/partials/data_upload_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,24 +142,21 @@ <h4 class="modal-title" ng-switch-when="16" translate>PM_METER_IMPORT_RESULTS</h
<!--<div class="row">
<div class="col-sm-8 col-sm-offset-2 green_button" sd-uploader sourcetype="Green Button Raw" sourceprog="" sourcever="" importrecord="dataset.id" buttontext="{$:: 'Upload Green Button Data' | translate $}" eventfunc="uploaderfunc(message, file, progress)" ng-hide="uploader.in_progress" ng-disabled="true" style="padding-top: 10px;"></div>
</div>-->

</div>
<!-- Step 3 -->
<div class="data_upload_steps" ng-switch-when="3">
<div class="row">
<div class="alert alert-success"
translate="DATASET_FILENAME_UPLOADED_TO"
translate-values="{ dataset_name: dataset.name , dataset_filename: dataset.filename , cycle_name: selectedCycle.name }"></div>
<div class="alert alert-danger" ng-if="buildingsync_issues != null && buildingsync_issues.length > 0">
There were errors and/or warnings for the file(s) uploaded.
</div>
</div>
<div class="row" ng-if="buildingsync_issues != null && buildingsync_issues.length > 0">
<div class="col-sm-12">
<p>There were one or more warnings for the file(s) uploaded.</p>
<div ng-repeat="file_issues in buildingsync_issues">
<em>{$ file_issues.file $}</em>
<div class="alert alert-warning" ng-if="file_issues.use_case_warnings.length > 0" style="word-wrap: break-word;">
<h5>Use Case Warnings</h5>
<div ng-repeat="warn in file_issues.use_case_warnings">{$ warn $}</div>
</div>
<ng-include src="::urls.static_url + 'seed/partials/import_messages.html'"></ng-include>
</div>
</div>
</div>
Expand Down Expand Up @@ -318,29 +315,14 @@ <h5>Use Case Warnings</h5>
<div class="data_upload_steps" ng-switch-when="12">
<div class="row">
<div class="col-sm-12">
<div>

<p ng-if="!step_12_buildingsync_validation_error" translate>An error occurred while processing the file. Please ensure that your file meets the required specifications.</p>
<pre class="text-wrap" ng-class="{'pre-scrollable': step_12_error_message.length >= 300}" ng-show="step_12_error_message && !step_12_buildingsync_validation_error">{$ step_12_error_message | json $}</pre>
<span ng-if="step_12_buildingsync_validation_error">
<p>BuildingSync file(s) failed to validate. No files were imported. Please fix the errors and re-upload the corrected file(s).</p>
<div ng-repeat="file_issues in buildingsync_issues">
<em>{$ file_issues.file $}</em>
<div class="alert alert-danger" ng-if="file_issues.schema_errors.length > 0" style="word-wrap: break-word;">
<h5>Schema Errors</h5>
<div ng-repeat="err in file_issues.schema_errors">{$ err.path $}: {$ err.message $}</div>
</div>
<div class="alert alert-danger" ng-if="file_issues.use_case_errors.length > 0" style="word-wrap: break-word;">
<h5>Use Case Errors</h5>
<div ng-repeat="err in file_issues.use_case_errors">{$ err $}</div>
</div>
<div class="alert alert-warning" ng-if="file_issues.use_case_warnings.length > 0" style="word-wrap: break-word;">
<h5>Use Case Warnings</h5>
<div ng-repeat="warn in file_issues.use_case_warnings">{$ warn $}</div>
</div>
</div>
</span>
</div>
<p ng-if="!step_12_buildingsync_validation_error" translate>An error occurred while processing the file. Please ensure that your file meets the required specifications.</p>
<pre class="text-wrap" ng-class="{'pre-scrollable': step_12_error_message.length >= 300}" ng-show="step_12_error_message && !step_12_buildingsync_validation_error">{$ step_12_error_message | json $}</pre>
<span ng-if="step_12_buildingsync_validation_error">
<div class="alert alert-danger">BuildingSync file(s) failed to validate. No files were imported. Please fix the errors and re-upload the corrected file(s).</div>
<div ng-repeat="file_issues in buildingsync_issues">
<ng-include src="::urls.static_url + 'seed/partials/import_messages.html'"></ng-include>
</div>
</span>
</div>
</div>
</div>
Expand Down
34 changes: 34 additions & 0 deletions seed/static/seed/partials/import_messages.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<h4>{$ file_issues.file $}</h4>
<uib-accordion>

<div uib-accordion-group ng-if="file_issues.schema_errors.length > 0" class="panel-danger" is-open="schema_errors[$index].open">
<uib-accordion-heading>
<b>Schema Errors</b> <small>({$:: file_issues.schema_errors.length $})</small>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': schema_errors[$index].open, 'glyphicon-chevron-right': !schema_errors[$index].open}"></i>
</uib-accordion-heading>
<div class="clean-list">
<div ng-repeat="error in file_issues.schema_errors" class="row">{$ error $}</div>
</div>
</div>

<div uib-accordion-group ng-if="file_issues.use_case_errors.length > 0" class="panel-danger" is-open="use_case_errors[$index].open">
<uib-accordion-heading>
<b>Use Case Errors</b> <small>({$:: file_issues.use_case_errors.length $})</small>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': use_case_errors[$index].open, 'glyphicon-chevron-right': !use_case_errors[$index].open}"></i>
</uib-accordion-heading>
<div class="clean-list">
<div ng-repeat="error in file_issues.use_case_errors" class="row">{$ error $}</div>
</div>
</div>

<div uib-accordion-group ng-if="file_issues.use_case_warnings.length > 0" class="panel-warning" is-open="use_case_warnings[$index].open">
<uib-accordion-heading>
<b>Use Case Warnings</b> <small>({$:: file_issues.use_case_warnings.length $})</small>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': use_case_warnings[$index].open, 'glyphicon-chevron-right': !use_case_warnings[$index].open}"></i>
</uib-accordion-heading>
<div class="clean-list">
<div ng-repeat="warn in file_issues.use_case_warnings" class="row">{$ warn $}</div>
</div>
</div>

</uib-accordion>
30 changes: 30 additions & 0 deletions seed/static/seed/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3919,6 +3919,36 @@ FAQ page
}
}

.panel-body .clean-list {
margin: -15px 0;

& > .row {
margin: 0 -15px;
padding: 10px
}
}

.clean-list {
word-wrap: break-word;

& > .row {
padding: 5px;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid rgba(255, 255, 255, .5);
}

& > .row:first-child {
border-radius: 10px 10px 0 0;
border-top: none;
}

& > .row:last-child {
border-radius: 0 0 10px 10px;
border-bottom: none;
}
}

.flex-centered {
display: flex;
align-items: center;
Expand Down

0 comments on commit 669deaf

Please sign in to comment.