10804 componentizing core search

arches/app/media/css/arches.scss

@@ -10025,7 +10025,7 @@ table.table.dataTable {
 
 .search-type-btn {
     height: 50px;
-    padding: 0px;
+    padding: 0px 4px;
     font-size: 1.2rem;
     font-weight: 600;
     color: #888;

arches/app/media/js/views/components/search/advanced-search.js

@@ -14,7 +14,6 @@ define([
         initialize: function(options) {
             var self = this;
             options.name = 'Advanced Search Filter';
-
             BaseFilter.prototype.initialize.call(this, options);
             this.urls = arches.urls;
             this.tagId = "Advanced Search";
@@ -179,7 +178,7 @@ define([
                 options.loading(false);
             });
 
-            this.filters[componentName](this);
+            this.searchFilterVms[componentName](this);
         },
 
         updateQuery: function() {
@@ -194,12 +193,12 @@ define([
                 });
                 queryObj[componentName] = JSON.stringify(advanced);
 
-                if (this.getFilter('term-filter').hasTag(this.tagId) === false) {
-                    this.getFilter('term-filter').addTag(this.tagId, this.name, ko.observable(false));
+                if (this.getFilterByType('term-filter-type').hasTag(this.tagId) === false) {
+                    this.getFilterByType('term-filter-type').addTag(this.tagId, this.name, ko.observable(false));
                 }
             } else {
                 delete queryObj[componentName];
-                this.getFilter('term-filter').removeTag(this.tagId);
+                this.getFilterByType('term-filter-type').removeTag(this.tagId);
             }
             this.query(queryObj);
         },
@@ -223,7 +222,7 @@ define([
                 var facets = JSON.parse(query[componentName]);
 
                 if (facets.length > 0) {
-                    this.getFilter('term-filter').addTag("Advanced Search", this.name, ko.observable(false));    
+                    this.getFilterByType('term-filter-type').addTag("Advanced Search", this.name, ko.observable(false));    
                 }
                 _.each(facets, function(facet) {
                     var nodeIds = _.filter(Object.keys(facet), function(key) {

arches/app/media/js/views/components/search/base-filter.js

@@ -8,23 +8,12 @@ define([
             this.name = 'Base Filter';
             // the various filters managed by this widget
             this.filter = {};
-            this.requiredFilters = [];
             // Call the original constructor
             Backbone.View.apply(this, arguments);
         },
 
         initialize: function(options) {
             $.extend(this, options);
-            this.requiredFiltersLoaded = ko.computed(function() {
-                var self = this;
-                var res = this.requiredFilters.every(function(f){return self.getFilter(f) !== null;});
-                return res;
-            }, this);
         },
-
-
-        getFilter: function(filterName) {
-            return ko.unwrap(this.filters[filterName]);
-        }
     });
 });

arches/app/media/js/views/components/search/base-search-view.js

@@ -0,0 +1,102 @@
+define([
+    'jquery',
+    'underscore',
+    'knockout',
+    'backbone',
+    'arches',
+    'viewmodels/alert',
+], function($, _, ko, BackBone, arches, AlertViewModel) {
+    return Backbone.View.extend({
+        constructor: function() {
+            this.name = 'Base Search View';
+            this.filter = {};
+            this.defaultQuery = {};
+            Backbone.View.apply(this, arguments);
+        },
+
+        initialize: function(sharedStateObject) {
+            const self = this;
+            $.extend(this, sharedStateObject);
+            this.query = sharedStateObject.query;
+            this.queryString = sharedStateObject.queryString;
+            this.updateRequest = sharedStateObject.updateRequest;
+            this.userIsReviewer = sharedStateObject.userIsReviewer;
+            this.total = sharedStateObject.total;
+            this.userid = sharedStateObject.userid;
+            this.hits = sharedStateObject.hits;
+            this.alert = sharedStateObject.alert;
+            this.sharedStateObject = sharedStateObject;
+            this.queryString.subscribe(function() {
+                if (this.searchViewFiltersLoaded()) {
+                    this.doQuery();
+                } else {
+                    this.searchViewFiltersLoaded.subscribe(function() {
+                        this.doQuery();
+                    }, this);
+                }
+            }, this);
+            // init query
+            if (self.updateRequest === undefined) {
+                if (this.searchViewFiltersLoaded()) {
+                    this.doQuery();
+                } else {
+                    this.searchViewFiltersLoaded.subscribe(function() {
+                        this.doQuery();
+                    }, this);
+                }
+            }
+        },
+
+        doQuery: function() {
+            const queryObj = JSON.parse(this.queryString());
+            if (self.updateRequest) { self.updateRequest.abort(); }
+            self.updateRequest = $.ajax({
+                type: "GET",
+                url: arches.urls.search_results,
+                data: queryObj,
+                context: this,
+                success: function(response) {
+                    _.each(this.sharedStateObject.searchResults, function(value, key, results) {
+                        if (key !== 'timestamp') {
+                            delete this.sharedStateObject.searchResults[key];
+                        }
+                    }, this);
+                    _.each(response, function(value, key, response) {
+                        if (key !== 'timestamp') {
+                            this.sharedStateObject.searchResults[key] = value;
+                        }
+                    }, this);
+                    this.sharedStateObject.searchResults.timestamp(response.timestamp);
+                    this.sharedStateObject.userIsReviewer(response.reviewer);
+                    this.sharedStateObject.userid(response.userid);
+                    this.sharedStateObject.total(response.total_results);
+                    this.sharedStateObject.hits(response.results.hits.hits.length);
+                    this.sharedStateObject.alert(false);
+                },
+                error: function(response, status, error) {
+                    const alert = new AlertViewModel('ep-alert-red', arches.translations.requestFailed.title, response.responseJSON?.message);
+                    if(self.updateRequest.statusText !== 'abort'){
+                        self.alert(alert);
+                    }
+                    this.sharedStateObject.loading(false);
+                },
+                complete: function(request, status) {
+                    self.updateRequest = undefined;
+                    window.history.pushState({}, '', '?' + $.param(queryObj).split('+').join('%20'));
+                    this.sharedStateObject.loading(false);
+                }
+            });
+        },
+
+        clearQuery: function(){
+            Object.values(this.searchFilterVms).forEach(function(value){
+                if (value()){
+                    if (value().clear){
+                        value().clear();
+                    }
+                }
+            }, this);
+            this.query(this.defaultQuery);
+        },
+    });
+});

arches/app/media/js/views/components/search/map-filter.js

@@ -337,7 +337,7 @@ define([
                 updateSearchResultPointLayer();
             };
 
-            this.filters[componentName](this);
+            this.searchFilterVms[componentName](this);
             this.map.subscribe(function(){
                 this.setupDraw();
                 this.restoreState();
@@ -514,8 +514,8 @@ define([
             var self = this;
             var queryObj = this.query();
             if (this.filter.feature_collection().features.length > 0) {
-                if (this.getFilter('term-filter').hasTag(this.type) === false) {
-                    this.getFilter('term-filter').addTag('Map Filter Enabled', this.name, this.filter.inverted);
+                if (this.getFilterByType('term-filter-type').hasTag(this.type) === false) {
+                    this.getFilterByType('term-filter-type').addTag('Map Filter Enabled', this.name, this.filter.inverted);
                 }
                 this.filter.feature_collection().features[0].properties['inverted'] = this.filter.inverted();
                 queryObj[componentName] = ko.toJSON(this.filter.feature_collection());
@@ -552,7 +552,7 @@ define([
             this.bufferUnit = ko.observable(bufferUnit).extend({ deferred: true });
             this.filter.inverted = ko.observable(inverted).extend({ deferred: true });
             if (hasSpatialFilter) {
-                this.getFilter('term-filter').addTag('Map Filter Enabled', this.name, this.filter.inverted);
+                this.getFilterByType('term-filter-type').addTag('Map Filter Enabled', this.name, this.filter.inverted);
             }
             this.updateResults();
             this.pageLoaded = true;
@@ -581,7 +581,7 @@ define([
                 "type": "FeatureCollection",
                 "features": []
             });
-            this.getFilter('term-filter').removeTag('Map Filter Enabled');
+            this.getFilterByType('term-filter-type').removeTag('Map Filter Enabled');
             this.draw.deleteAll();
             this.searchGeometries([]);
         },

arches/app/media/js/views/components/search/paging-filter.js

@@ -5,7 +5,7 @@ define([
     'utils/aria',
     'templates/views/components/search/paging-filter.htm',
 ], function(BaseFilter, ko, koMapping, ariaUtils, pagingFilterTemplate) {
-    var componentName = 'paging-filter';
+    const componentName = 'paging-filter';
     const viewModel = BaseFilter.extend({
         initialize: function(options) {
             options.name = 'Paging Filter';
@@ -45,7 +45,7 @@ define([
                 this.updateResults();
             }, this);
 
-            this.filters[componentName](this);
+            this.searchFilterVms[componentName](this);
             this.restoreState();
             this.pageInitialized = true;
         },
@@ -60,7 +60,7 @@ define([
             if(page){
                 this.userRequestedNewPage = true;
                 this.page(page);
-                this.shiftFocus('#search-results-list');
+                this.shiftFocus('#search-results-list-type');
             }
         },
 

arches/app/media/js/views/components/search/provisional-filter.js

@@ -4,32 +4,30 @@ define([
     'views/components/search/base-filter',
     'templates/views/components/search/provisional-filter.htm',
 ], function(ko, arches, BaseFilter, provisionalFilterTemplate) {
-    var componentName = 'provisional-filter';
+    const componentName = 'provisional-filter';
     const viewModel = BaseFilter.extend({
         initialize: function(options) {
             options.name = 'Provisional Filter';
-            this.translations = arches. translations;
-            this.requiredFilters = ['term-filter'];
+            this.translations = arches.translations;
             BaseFilter.prototype.initialize.call(this, options);
             this.filter = ko.observableArray();
             this.provisionalOptions = [{'name': 'Authoritative'},{'name': 'Provisional'}];
-
-            if (this.requiredFiltersLoaded() === false) {
-                this.requiredFiltersLoaded.subscribe(function() {
-                    this.restoreState();
-                }, this);
-            } else {
-                this.restoreState();
-            }
-
             var filterUpdated = ko.computed(function() {
                 return JSON.stringify(ko.toJS(this.filter()));
             }, this);
             filterUpdated.subscribe(function() {
                 this.updateQuery();
             }, this);
 
-            this.filters[componentName](this);
+            this.searchFilterVms[componentName](this);
+
+            if (this.searchViewFiltersLoaded() === false) {
+                this.searchViewFiltersLoaded.subscribe(function() {
+                    this.restoreState();
+                }, this);
+            } else {
+                this.restoreState();
+            }
         },
 
         updateQuery: function() {
@@ -49,7 +47,7 @@ define([
                 if (provisionalQuery.length > 0) {
                     provisionalQuery.forEach(function(type){
                         type.inverted = ko.observable(!!type.inverted);
-                        this.getFilter('term-filter').addTag(type.provisionaltype, this.name, type.inverted);
+                        this.getFilterByType('term-filter-type').addTag(type.provisionaltype, this.name, type.inverted);
                     }, this);
                     this.filter(provisionalQuery);
                 }
@@ -58,12 +56,12 @@ define([
 
         selectProvisional: function(item) {
             this.filter().forEach(function(val){
-                this.getFilter('term-filter').removeTag(val.provisionaltype);
+                this.getFilterByType('term-filter-type').removeTag(val.provisionaltype);
             }, this);
 
             if(!!item){
                 var inverted = ko.observable(false);
-                this.getFilter('term-filter').addTag(item.name, this.name, inverted);
+                this.getFilterByType('term-filter-type').addTag(item.name, this.name, inverted);
                 this.filter([{provisionaltype: item.name, inverted: inverted}]);
 
             }else{

arches/app/media/js/views/components/search/related-resources-filter.js

@@ -10,30 +10,28 @@ define([
     const viewModel = BaseFilter.extend ({
         initialize: function(options) {
             options.name = 'Related Resources Filter';
-
-
-            this.requiredFilters = ['search-results'];
             BaseFilter.prototype.initialize.call(this, options);
             this.ready = ko.observable(false);
             this.options = options;
             this.urls = arches.urls;
             var self = this;
-            // this component is just a light weight wrapper around the relatd resources manager
-            // need to wait for the search-resutls filter to be ready
-            // before we can load the realated-resources-filter
-            // because we need to pass the entire rsearch results filter into the
-            // related resources filter
             var setSearchResults = function(){
-                options.searchResultsVm = self.getFilter('search-results');
-                options.searchResultsVm.relatedResourcesManager = self;
-                options.filters[componentName](self);
+                self.searchResultsVm.relatedResourcesManager = self;
                 self.ready(true);
             };
+            this.searchFilterVms[componentName](this);
 
-            if (this.requiredFiltersLoaded() === false) {
-                this.requiredFiltersLoaded.subscribe(setSearchResults, this);
-            } else {
+            this.searchResultsVm = self.getFilterByType('search-results-type', false);
+            if (ko.unwrap(this.searchResultsVm)) {
+                this.searchResultsVm = this.searchResultsVm();
                 setSearchResults();
+            } else {
+                this.searchResultsVm.subscribe(searchResultsFilter => {
+                    if (searchResultsFilter) {
+                        this.searchResultsVm = searchResultsFilter;
+                        setSearchResults();
+                    }
+                }, this);
             }
         }
     });