Skip to content

Commit

Permalink
updates to use reference the filter types in the selected tabs and po…
Browse files Browse the repository at this point in the history
…pups
  • Loading branch information
apeters committed Aug 21, 2024
1 parent 4deaaa9 commit 0749dfc
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ define([
if(page){
this.userRequestedNewPage = true;
this.page(page);
this.shiftFocus('#search-results-list');
this.shiftFocus('#search-results-list-type');
}
},

Expand Down
50 changes: 20 additions & 30 deletions arches/app/media/js/views/components/search/search-results.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,30 +54,20 @@ define([

this.searchFilterVms[componentName](this);
this.restoreState();
this.mapFilter = this.getFilter("map-filter", false);
if (ko.unwrap(this.mapFilter)) {
this.mapFilter = this.mapFilter();
this.selectedTab.subscribe(function (tab) {
if (tab === "map-filter") {
if (ko.unwrap(this.mapFilter.map)) {
this.mapFilter.map().resize();
}
}
}, this);
} else {
this.mapFilter.subscribe(mapFilter => {
if (mapFilter) {
this.mapFilter = mapFilter;
this.selectedTab.subscribe(function (tab) {
if (tab === "map-filter") {
if (ko.unwrap(this.mapFilter.map)) {
this.mapFilter.map().resize();
}
}
}, this);

this.mapFilter = this.getFilterByType("map-filter-type", false);
this.mapFilter.subscribe(mapFilter => {
if (mapFilter) {
this.mapFilter = mapFilter;
}
}, this);
this.selectedTab.subscribe(function (tab) {
if (tab === "map-filter-type") {
if (ko.unwrap(this.mapFilter.map)) {
this.mapFilter.map().resize();
}
}, this);
}
}
}, this);

this.bulkResourceReportCache = ko.observable({});
this.bulkDisambiguatedResourceInstanceCache = ko.observable({});
Expand Down Expand Up @@ -119,10 +109,10 @@ define([
}
}
self.showRelationships(resourceinstance);
if (self.selectedTab() !== "related-resources-filter") {
self.selectedTab("related-resources-filter");
if (self.selectedTab() !== "related-resources-filter-type") {
self.selectedTab("related-resources-filter-type");
}
self.shiftFocus("#related-resources-filter-tabpanel");
self.shiftFocus("#related-resources-filter-type-tabpanel");
};
},

Expand Down Expand Up @@ -175,8 +165,8 @@ define([
}
});

if (self.selectedTab() !== "search-result-details") {
self.selectedTab("search-result-details");
if (self.selectedTab() !== "search-result-details-type") {
self.selectedTab("search-result-details-type");
}
};
},
Expand Down Expand Up @@ -334,8 +324,8 @@ define([
self.selectedResourceId(
result._source.resourceinstanceid,
);
if (self.selectedTab() !== "map-filter") {
self.selectedTab("map-filter");
if (self.selectedTab() !== "map-filter-type") {
self.selectedTab("map-filter-type");
}
self.mapLinkData({
properties: result._source,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ define([
var firstEnabledFilter = _.find(this.sharedStateObject.searchFilterConfigs, function(filter) {
return filter.config.layoutType === 'tabbed';
}, this);
this.selectedTab = ko.observable(firstEnabledFilter.componentname);
this.selectedTab = ko.observable(firstEnabledFilter.type);
this.sharedStateObject.selectedTab = this.selectedTab;
this.resultsExpanded = ko.observable(true);
this.isResourceRelatable = function(graphId) {
Expand All @@ -41,11 +41,11 @@ define([
};
this.sharedStateObject.toggleRelationshipCandidacy = this.toggleRelationshipCandidacy;

this.selectPopup = function(componentname) {
if(this.selectedPopup() !== '' && componentname === this.selectedPopup()) {
this.selectPopup = function(component_type) {
if(this.selectedPopup() !== '' && component_type === this.selectedPopup()) {
this.selectedPopup('');
} else {
this.selectedPopup(componentname);
this.selectedPopup(component_type);
}
};
this.searchFilterVms[componentName](this);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="close-popup-panel-container">
<span class="close-popup-panel" tabindex="0" role="button" id="saved-searches-close-btn"
data-bind="onEnterkeyClick, onSpaceClick,
click: function(){selectedPopup(''); $root.shiftFocus('#saved-searches-open-btn');},
click: function(){selectedPopup(''); $root.shiftFocus('#saved-searches-type-open-btn');},
attr: {'aria-label': $root.translations.closeSavedSearches},
text: $root.translations.savedSearches">
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="close-popup-panel-container">
<span class="close-popup-panel" tabindex="0" role="button" id="search-export-close-btn"
data-bind="onEnterkeyClick, onSpaceClick,
click: function(){selectedPopup(''); $root.shiftFocus('#search-export-open-btn');},
click: function(){selectedPopup(''); $root.shiftFocus('#search-export-type-open-btn');},
attr: {'aria-label': $root.translations.closeExportSearchResults},
text: $root.translations.exportSearchResults">
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@
<div class="search-type-btn-panel" data-bind="foreach: {data: sharedStateObject.searchFilterConfigs, as: 'filter'}" role="tablist">
<!-- ko if: filter.config.layoutType === 'tabbed' && $parent.sharedStateObject.userCanReadResources -->
<button class="search-type-btn relative" role="tab" data-bind="onEnterkeyClick, onSpaceClick,
css: {'active': $parent.selectedTab() === filter.componentname},
css: {'active': $parent.selectedTab() === filter.type},
click: function(){
$parent.selectedTab(filter.componentname);
$root.shiftFocus('#' + filter.componentname + '-tabpanel');
$parent.selectedTab(filter.type);
$root.shiftFocus('#' + filter.type + '-tabpanel');
},
attr: {
'aria-selected': ($parent.selectedTab() === filter.componentname).toString(),
'aria-controls': filter.componentname + '-tabpanel'
'aria-selected': ($parent.selectedTab() === filter.type).toString(),
'aria-controls': filter.type + '-tabpanel'
}
">
<i data-bind="css: filter.icon"></i>
Expand All @@ -83,20 +83,20 @@
<div class="popup-panel-row" data-bind="foreach: {data: sharedStateObject.searchFilterConfigs, as: 'filter'}" role="tablist">
<!-- ko if: filter.config.layoutType === 'popup' && $parent.sharedStateObject.userCanReadResources -->
<button class="saved-search-container search-type-btn-popup relative" role="tab" data-bind="onEnterkeyClick, onSpaceClick,
css: {'active': $parent.selectedPopup() === filter.componentname},
css: {'active': $parent.selectedPopup() === filter.type},
click: function(data, event){
$parent.selectPopup(filter.componentname);
$parent.selectPopup(filter.type);
$root.handleEscKey(
event.currentTarget,
'#' + filter.componentname + '-popup-tabpanel',
'#' + filter.componentname + '-close-btn'
'#' + filter.type + '-popup-tabpanel',
'#' + filter.type + '-close-btn'
);
},
attr: {
id: filter.componentname + '-open-btn',
'aria-expanded': ($parent.selectedPopup() === filter.componentname).toString(),
id: filter.type + '-open-btn',
'aria-expanded': ($parent.selectedPopup() === filter.type).toString(),
'aria-label': filter.name,
'aria-controls': filter.componentname + '-popup-tabpanel'
'aria-controls': filter.type + '-popup-tabpanel'
}
">
<div data-placement="auto" data-toggle="tooltip"
Expand All @@ -116,9 +116,9 @@
<div class="card-form-preview-container relative">
<div class="tab-content relative" data-bind="foreach: {data: sharedStateObject.searchFilterConfigs, as: 'filter'}">
<!-- ko if: filter.config.layoutType === 'tabbed' -->
<div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.selectedTab() === filter.componentname},
<div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.selectedTab() === filter.type},
attr: {
id: filter.componentname + '-tabpanel',
id: filter.type + '-tabpanel',
'aria-label': filter.name,
},
">
Expand All @@ -132,9 +132,9 @@

<div class="tab-content search-popup-panel" data-bind="foreach: {data: sharedStateObject.searchFilterConfigs, as: 'filter'}, visible: selectedPopup() !== ''">
<!-- ko if: filter.config.layoutType === 'popup' -->
<div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.selectedPopup() === filter.componentname},
<div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.selectedPopup() === filter.type},
attr: {
id: filter.componentname + '-popup-tabpanel',
id: filter.type + '-popup-tabpanel',
'aria-label': filter.name,
},
">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="close-popup-panel-container time-filter-title">
<span class="close-popup-panel" tabindex="0" role="button" id="time-filter-close-btn"
data-bind="onEnterkeyClick, onSpaceClick,
click: function(){selectedPopup(''); $root.shiftFocus('#time-filter-open-btn');},
click: function(){selectedPopup(''); $root.shiftFocus('#time-filter-type-open-btn');},
attr: {'aria-label': $root.translations.closeTimeFilter},
text: $root.translations.timeFilter,
"></span>
Expand Down

0 comments on commit 0749dfc

Please sign in to comment.