Skip to content

Commit

Permalink
Merge pull request #5203 from archesproject/4771_componentize_search
Browse files Browse the repository at this point in the history 
4771 componentize search
  • Loading branch information
@apeters
apeters authored Aug 28, 2019
2 parents 0fc3ab5 + b7c85aa commit 62afa34
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 93 deletions.
10 changes: 4 additions & 6 deletions arches/app/media/css/arches.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10975,26 +10975,22 @@ a.search-query-link-captions:focus {
.search-control-container {
-ms-flex: 0 0 400px;
-webkit-flex: 0 0 400px;
flex: 0 0 400px;
flex: 1 0 400px;
margin-bottom: 0px;
background-color: #fafafa;
padding: 10px 20px 80px 20px;
border-right: solid 1px #dddddd;
border-top: 1px solid #ddd;
overflow-y: scroll;
overflow-x: hidden;
transition: all .5s;
margin-top: inherit;
min-width: 400px;
z-index: 5;
}

.search-count-container {
height: 40px;
padding: 10px 20px 0px 20px;
background: #f4f4f4;
border-bottom: 1px solid #ddd;
margin: -10px -20px 10px -20px;
}

.search-title {
Expand Down Expand Up @@ -11124,7 +11120,9 @@ ul.pagination {
padding-bottom: 0px;
}

.search-results-container {}
.search-results-container {
padding: 19px;
}

.calendar {
display: table-cell;
Expand Down
4 changes: 0 additions & 4 deletions arches/app/media/js/views/components/search/search-results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,11 @@ function($, _, BaseFilter, bootstrap, arches, select2, ko, koMapping, viewdata)
options.name = 'Search Results';
BaseFilter.prototype.initialize.call(this, options);

this.total = ko.observable();
this.results = ko.observableArray();
this.showRelationships = ko.observable();
this.mouseoverInstanceId = ko.observable();
this.relationshipCandidates = ko.observableArray();
this.selectedResourceId = ko.observable(null);
this.userIsReviewer = ko.observable(false);

this.showRelationships.subscribe(function(res) {
this.selectedResourceId(res.resourceinstanceid);
Expand Down Expand Up @@ -77,10 +75,8 @@ function($, _, BaseFilter, bootstrap, arches, select2, ko, koMapping, viewdata)
var data = $('div[name="search-result-data"]').data();

if (!!this.searchResults.results){
this.total(this.searchResults.results.hits.total);
this.results.removeAll();
this.selectedResourceId(null);
this.userIsReviewer(this.searchResults.reviewer);
this.searchResults.results.hits.hits.forEach(function(result){
var graphdata = _.find(viewdata.graphs, function(graphdata){
return result._source.graph_id === graphdata.graphid;
Expand Down
4 changes: 4 additions & 0 deletions arches/app/media/js/views/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ define([
this.query = ko.observable(getQueryObject());
this.mouseoverInstanceId = ko.observable();
this.mapLinkData = ko.observable(null);
this.userIsReviewer = ko.observable(false);
this.searchResults = {'timestamp': ko.observable()};
this.selectPopup = function(componentname) {
if(this.selectedPopup() !== '' && componentname === this.selectedPopup()) {
Expand Down Expand Up @@ -91,6 +92,7 @@ define([
var SearchView = BaseManagerView.extend({
initialize: function(options) {
this.viewModel.sharedStateObject = new CommonSearchViewModel();
this.viewModel.total = ko.observable();
_.extend(this, this.viewModel.sharedStateObject);

this.queryString = ko.computed(function() {
Expand Down Expand Up @@ -126,6 +128,8 @@ define([
}
}, this);
this.viewModel.sharedStateObject.searchResults.timestamp(response.timestamp);
this.viewModel.sharedStateObject.userIsReviewer(response.reviewer);
this.viewModel.total(response.results.hits.total);
this.viewModel.alert(false);
},
error: function(response, status, error) {
Expand Down
111 changes: 32 additions & 79 deletions arches/app/templates/views/components/search/search-results.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,48 @@
{% load template_tags %}
{% load i18n %}

<!-- Content -->
<div class="search-control-container" data-bind="css: { 'slide': !resultsExpanded() }">
<!-- Title Block -->
<div class="search-count-container">
<h3 class="search-title" data-bind="text: '{% trans 'Results: ' %}' + total()"></h3>
<div id="search-results-container">
<div class="search-inline-filters">
<!--ko if: userIsReviewer -->
<div data-bind="component: {
name: 'provisional-filter',
params: $parent.sharedStateObject
}"></div>
<!--/ko-->
<div data-bind="component: {
name: 'resource-type-filter',
params: $parent.sharedStateObject
}"></div>
</div>
</div>
</div>
<div class="search-results-container">
<div class="row" style="">
<div class="col-xs-11 col-xs-offset-1 col-sm-4 col-sm-offset-7 col-md-3 map-loading loading-mask" style="display: none;">

<img src="{% static 'img/spinner.gif' %}" height="28" width="28" style="margin-top: 2px;">
<p class="map-loading-text">{% trans "Loading results..." %}</p>

</div>
</div>

<!-- Begin Search Results -->
<div>

<div id="search-results-list" data-bind="foreach: results, visible: true" style="display: none;">
<div id="search-results-list" data-bind="foreach: results, visible: true" style="display: none;">

<div class="search-listing" data-bind="event: { mouseover: mouseoverInstance, mouseout: mouseoverInstance('')}, css: {'selected': selected()}">
<h3 class="search-listing-title"><a class="search-candidate-title" href="" data-bind="click: $parent.viewReport.bind($parent)"><i class="search-listing-icon" data-bind="css: iconclass"></i> <span data-bind="text: displayname"></span></a></h3>
<div class="search-listing" data-bind="event: { mouseover: mouseoverInstance, mouseout: mouseoverInstance('')}, css: {'selected': selected()}">
<h3 class="search-listing-title"><a class="search-candidate-title" href="" data-bind="click: $parent.viewReport.bind($parent)"><i class="search-listing-icon" data-bind="css: iconclass"></i> <span data-bind="text: displayname"></span></a></h3>



<div class="search-listing-body" data-bind="html: displaydescription">
</div>

<div class="search-listing-footer">
<!--ko if: provisional_resource == 'true' -->
<a class="provisional-edits" href=""><i class="fa fa-exclamation-circle"></i> {% trans "Provisional" %} </a>
<!--/ko-->

<!--ko if: provisional_resource == 'partial' && $parent.userIsReviewer -->
<a class="provisional-edits" href=""><i class="fa fa-exclamation-circle"></i> {% trans "Has provisional edits" %} </a>
<!--/ko-->

<div class="search-listing-body" data-bind="html: displaydescription">
</div>

{% if user|can_edit_resource_instance %}<a class="search-candidate-link" href="" data-bind="click: $parent.editResource.bind($parent)"><i class="ion-ios-refresh-empty"></i> {% trans "Edit" %} </a>{% endif %}
<!-- ko if: !!$parent.mapFilter -->
<a class="search-candidate-link" href="" data-bind="visible: point, click: mapLinkClicked"><i class="fa fa-map-marker"></i> {% trans "Map" %} </a>
<!-- /ko -->
<div class="search-listing-footer">
<!--ko if: provisional_resource == 'true' -->
<a class="provisional-edits" href=""><i class="fa fa-exclamation-circle"></i> {% trans "Provisional" %} </a>
<!--/ko-->

<!--ko ifnot: $root.resourceEditorContext -->
{% if user|can_read_resource_instance %}
<!--ko if: !!$parent.relatedResourcesManager -->
<a class="search-candidate-link pull-right" href="" data-bind="click: showrelated"><i class="fa fa-code-fork"></i> {% trans "Related Resources" %} </a>
{% endif %}
<!--/ko-->
<!--ko if: $root.resourceEditorContext -->
<!--ko if: relatable & $root.editingInstanceId != resourceinstanceid -->
<a class="search-candidate-link pull-right" href="" data-bind="click: function(val){relationshipcandidacy(val); showrelated()}"><i class="fa fa-code-fork"></i> {% trans "Relate Resource" %} </a>
<!--/ko-->
<!--ko if: relatable == false || $root.editingInstanceId == resourceinstanceid -->
<a class="search-candidate-link unrelatable-search-result pull-right" href=""><i class="fa fa-code-fork"></i> {% trans "Cannot Be Related" %} </a>
<!--/ko-->
<!--/ko-->
<!--/ko-->
<!--ko if: provisional_resource == 'partial' && $parent.userIsReviewer -->
<a class="provisional-edits" href=""><i class="fa fa-exclamation-circle"></i> {% trans "Has provisional edits" %} </a>
<!--/ko-->

</div>
</div>

</div>
{% if user|can_edit_resource_instance %}<a class="search-candidate-link" href="" data-bind="click: $parent.editResource.bind($parent)"><i class="ion-ios-refresh-empty"></i> {% trans "Edit" %} </a>{% endif %}
<!-- ko if: !!$parent.mapFilter -->
<a class="search-candidate-link" href="" data-bind="visible: point, click: mapLinkClicked"><i class="fa fa-map-marker"></i> {% trans "Map" %} </a>
<!-- /ko -->

<div class="margin-bottom-30"></div>
<!--ko ifnot: $root.resourceEditorContext -->
{% if user|can_read_resource_instance %}
<!--ko if: !!$parent.relatedResourcesManager -->
<a class="search-candidate-link pull-right" href="" data-bind="click: showrelated"><i class="fa fa-code-fork"></i> {% trans "Related Resources" %} </a>
{% endif %}
<!--/ko-->
<!--ko if: $root.resourceEditorContext -->
<!--ko if: relatable & $root.editingInstanceId != resourceinstanceid -->
<a class="search-candidate-link pull-right" href="" data-bind="click: function(val){relationshipcandidacy(val); showrelated()}"><i class="fa fa-code-fork"></i> {% trans "Relate Resource" %} </a>
<!--/ko-->
<!--ko if: relatable == false || $root.editingInstanceId == resourceinstanceid -->
<a class="search-candidate-link unrelatable-search-result pull-right" href=""><i class="fa fa-code-fork"></i> {% trans "Cannot Be Related" %} </a>
<!--/ko-->
<!--/ko-->
<!--/ko-->

<!-- Pagination -->
<div data-bind="component: {
name: 'paging-filter',
params: $parent.sharedStateObject
}"></div>
<!-- End Pagination -->
</div>
<!-- End Search Results -->
</div>

</div>
<!-- End Content -->
38 changes: 34 additions & 4 deletions arches/app/templates/views/search.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,40 @@
params: sharedStateObject
}"></div>
</div>
<div class="flex" style="max-width: 400px;" data-bind="component: {
name: 'search-results',
params: sharedStateObject
}"></div>
<div class="search-control-container" data-bind="css: { 'slide': !sharedStateObject.resultsExpanded() }">
<!-- Title Block -->
<div class="search-count-container">
<h3 class="search-title" data-bind="text: '{% trans 'Results: ' %}' + total()"></h3>
<div class="search-inline-filters">
<!--ko if: sharedStateObject.userIsReviewer-->
<div data-bind="component: {
name: 'provisional-filter',
params: sharedStateObject
}"></div>
<!--/ko-->
<div data-bind="component: {
name: 'resource-type-filter',
params: sharedStateObject
}"></div>
</div>
</div>

<div class="search-results-container">

<div data-bind="component: {
name: 'search-results',
params: sharedStateObject
}"></div>
<div class="margin-bottom-30"></div>

<div data-bind="component: {
name: 'paging-filter',
params: sharedStateObject
}"></div>

</div>

</div>
</div>


Expand Down

0 comments on commit 62afa34

Please sign in to comment.