Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Make results table in search panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-04-10 23:30:24 +03:00
parent 98a995a6cc
commit f69eb8ddfa
4 changed files with 113 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
apps/common/main/lib/view/SearchPanel.js
View file

@ -160,18 +160,6 @@ define([
this.$resultsContainer = $('#search-results');
this.$resultsContainer.hide();
this.$resultsContainer.scroller = new Common.UI.Scroller({
el: this.$resultsContainer,
includePadding: true,
useKeyboard: true,
minScrollbarLength: 40,
alwaysVisibleY: true
});
Common.NotificationCenter.on('window:resize', function() {
me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
me.$resultsContainer.scroller.update({alwaysVisibleY: true});
});
Common.NotificationCenter.on('search:updateresults', _.bind(this.disableNavButtons, this));
if (window.SSE) {
this.cmbWithin = new Common.UI.ComboBox({
@ -244,7 +232,36 @@ define([
this.cmbWithin.setValue(0);
this.cmbSearch.setValue(0);
this.cmbLookIn.setValue(0);
var tableTemplate = '<div class="search-table">' +
'<div class="header-item">' + this.textSheet + '</div>' +
'<div class="header-item">' + this.textName + '</div>' +
'<div class="header-item">' + this.textCell + '</div>' +
'<div class="header-item">' + this.textValue + '</div>' +
'<div class="header-item">' + this.textFormula + '</div>' +
'<div class="ps-container oo search-items"></div>' +
'</div>',
$resultTable = $(tableTemplate).appendTo(this.$resultsContainer);
this.$resultsContainer.scroller = new Common.UI.Scroller({
el: $resultTable.find('.search-items'),
includePadding: true,
useKeyboard: true,
minScrollbarLength: 40,
alwaysVisibleY: true
});
} else {
this.$resultsContainer.scroller = new Common.UI.Scroller({
el: this.$resultsContainer,
includePadding: true,
useKeyboard: true,
minScrollbarLength: 40,
alwaysVisibleY: true
});
}
Common.NotificationCenter.on('window:resize', function() {
me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
me.$resultsContainer.scroller.update({alwaysVisibleY: true});
});
}
this.rendered = true;
@ -366,7 +383,11 @@ define([
textNoMatches: 'No matches',
textNoSearchResults: 'No search results',
textItemEntireCell: 'Entire cell contents',
textTooManyResults: 'There are too many results to show here'
textTooManyResults: 'There are too many results to show here',
textName: 'Name',
textCell: 'Cell',
textValue: 'Value',
textFormula: 'Formula'
}, Common.Views.SearchPanel || {}));
});

5
apps/documenteditor/main/app/controller/Search.js
View file

@ -343,6 +343,11 @@ define([
}
var text = findText || this.api.asc_GetSelectedText() || this._state.searchText;
if (this.resultItems && this.resultItems.length > 0 &&
(!this._state.matchCase && text.toLowerCase() === this.view.inputText.getValue().toLowerCase() ||
this._state.matchCase && text === this.view.inputText.getValue())) { // show old results
return;
}
if (text) {
this.view.setFindText(text);
} else if (text !== undefined) {

73
apps/spreadsheeteditor/main/app/controller/Search.js
View file

@ -364,7 +364,7 @@ define([
if (this.resultItems[current]) {
this.resultItems[current].selected = true;
$('#search-results').find('.item').removeClass('selected');
$(this.resultItems[current].el).addClass('selected');
this.resultItems[current].$el.addClass('selected');
this.scrollToSelectedResult(current);
}
}
@ -378,13 +378,13 @@ define([
var item = this.resultItems[index].$el,
itemHeight = item.outerHeight(),
itemTop = item.position().top,
container = this.view.$resultsContainer,
container = this.view.$resultsContainer.find('.search-items'),
containerHeight = container.outerHeight(),
containerTop = container.scrollTop();
if (itemTop < 0 || (containerTop === 0 && itemTop > containerHeight)) {
container.scroller.scrollTop(containerTop + itemTop - 12);
this.view.$resultsContainer.scroller.scrollTop(containerTop + itemTop - 12);
} else if (itemTop + itemHeight > containerHeight) {
container.scroller.scrollTop(containerTop + itemHeight);
this.view.$resultsContainer.scroller.scrollTop(containerTop + itemHeight);
}
}
},
@ -406,40 +406,22 @@ define([
if (this.view && this._state.isStartedAddingResults) {
if (data.length > 300) return;
var me = this,
container = me.view.$resultsContainer;
container.html('<table style="width:100%">' +
'<col style="width:20%">' +
'<col style="width:20%">' +
'<col style="width:20%">' +
'<col style="width:20%">' +
'<col style="width:20%">' +
'<thead>' +
'<tr>' +
'<th>' + this.textSheet + '</th>' +
'<th>' + this.textName + '</th>' +
'<th>' + this.textCell + '</th>' +
'<th>' + this.textValue + '</th>' +
'<th>' + this.textFormula + '</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'</table>');
var $tableBody = container.find('tbody');
$innerResults = me.view.$resultsContainer.find('.search-items');
me.resultItems = [];
data.forEach(function (item, ind) {
var isSelected = ind === me._state.currentResult;
var tr = '<tr class="item">' +
'<td>' + item[1] + '</td>' +
'<td>' + item[2] + '</td>' +
'<td>' + item[3] + '</td>' +
'<td>' + item[4] + '</td>' +
'<td>' + item[5] + '</td>' +
'</tr>';
var $item = $(tr).appendTo($tableBody);
var tr = '<div class="item" style="width: 100%;">' +
'<div>' + item[1] + '</div>' +
'<div>' + item[2] + '</div>' +
'<div>' + item[3] + '</div>' +
'<div>' + item[4] + '</div>' +
'<div>' + item[5] + '</div>' +
'</div>';
var $item = $(tr).appendTo($innerResults);
if (isSelected) {
$item.addClass('selected');
}
var resultItem = {id: item[0], $el: $item, selected: isSelected};
var resultItem = {id: item[0], $el: $item, el: tr, selected: isSelected};
me.resultItems.push(resultItem);
$item.on('click', _.bind(function (el) {
var id = item[0];
@ -453,7 +435,7 @@ define([
hideResults: function () {
if (this.view) {
this.view.$resultsContainer.hide();
this.view.$resultsContainer.empty();
this.view.$resultsContainer.find('tbody').empty();
}
},
@ -464,14 +446,19 @@ define([
}
var text = findText || this.api.asc_GetSelectedText() || this._state.searchText;
if (text) {
if (this.resultItems && this.resultItems.length > 0 &&
(!this._state.matchCase && text.toLowerCase() === this.view.inputText.getValue().toLowerCase() ||
this._state.matchCase && text === this.view.inputText.getValue())) { // show old results
return;
}
if (text && text !== this.view.inputText.getValue()) {
this.view.setFindText(text);
} else if (text !== undefined) {
this.view.setFindText('');
}
this.hideResults();
if (text !== '' && text === this._state.searchText) { // search was made
if (text !== '') { // search was made
this.view.disableReplaceButtons(false);
this.api.asc_StartTextAroundSearch();
} else if (text !== '') { // search wasn't made
@ -486,14 +473,15 @@ define([
onShowPanel: function () {
if (this.resultItems && this.resultItems.length > 0 && !this._state.isStartedAddingResults) {
var me = this;
var me = this,
$tableBody = this.view.$resultsContainer.find('tbody');
this.view.$resultsContainer.show();
this.resultItems.forEach(function (item) {
me.view.$resultsContainer.append(item.el);
var $item = $(item.el).appendTo($tableBody);
if (item.selected) {
$(item.el).addClass('selected');
$item.addClass('selected');
}
$(item.el).on('click', function (el) {
$item.on('click', function (el) {
me.api.asc_SelectSearchElement(item.id);
$('#search-results').find('.item').removeClass('selected');
$(el.currentTarget).addClass('selected');
@ -510,12 +498,7 @@ define([
textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
textReplaceSuccess: 'Search has been done. {0} occurrences have been replaced',
textReplaceSkipped: 'The replacement has been made. {0} occurrences were skipped.',
textInvalidRange: 'ERROR! Invalid cells range',
textSheet: 'Sheet',
textName: 'Name',
textCell: 'Cell',
textValue: 'Value',
textFormula: 'Formula'
textInvalidRange: 'ERROR! Invalid cells range'
}, SSE.Controllers.Search || {}));
});

46
apps/spreadsheeteditor/main/resources/less/leftmenu.less
View file

@ -660,3 +660,49 @@
height: 16px;
width: 16px;
}
.search-panel {
#search-results {
padding-top: 6px;
.search-table {
width:100%;
height: 100%;
position: relative;
}
.header-item {
width:16%;
display: inline-block;
height: 18px;
text-align: start;
font-weight: normal;
padding-left: 4px;
&:not(:first-child) {
border-left: @scaled-one-px-value-ie solid @border-divider-ie;
border-left: @scaled-one-px-value solid @border-divider;
}
&:last-child {
width:36%;
}
}
.search-items {
height: calc(100% - 24px);
position: absolute;
top: 24px;
width: 100%;
overflow: hidden;
.item {
padding: 0;
display: flex;
div {
width: 16%;
padding-left: 4px;
height: 28px;
line-height: 28px;
&:last-child {
width: 36%;
}
}
}
}
}
}