Skip to content

Commit

Permalink
Cleanup examine search results, and adds ability to toggle fields (#9141
Browse files Browse the repository at this point in the history 
)

* Cleanup examine search results, and adds ability to toggle fields

* update table to use joinarray filter with one-time binding to avoid recalculating filter values, updated filter to not explode when array arg is null

* fix failing tests - improve filter to not fail on non-array params, update tests accordingly

Co-authored-by: Nathan Woulfe <[email protected]>
  • Loading branch information
@skttl @nathanwoulfe
skttl and nathanwoulfe authored Sep 22, 2021
1 parent 48a3a05 commit ffa704c
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 48 deletions.
15 changes: 9 additions & 6 deletions src/Umbraco.Web.UI.Client/src/common/filters/umbCmsJoinArray.filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@
* @namespace umbCmsJoinArray
*
* param {array} array of string or objects, if an object use the third argument to specify which prop to list.
* param {seperator} string containing the seperator to add between joined values.
* param {separator} string containing the separator to add between joined values.
* param {prop} string used if joining an array of objects, set the name of properties to join.
*
* @description
* Join an array of string or an array of objects, with a costum seperator.
*
* Join an array of string or an array of objects, with a custom separator.
* If the array is null or empty, returns an empty string
* If the array is not actually an array (ie a string or number), returns the value of the array
*/
angular.module("umbraco.filters").filter('umbCmsJoinArray', function () {
return function join(array, separator, prop) {
return (!Utilities.isUndefined(prop) ? array.map(function (item) {
return item[prop];
}) : array).join(separator || '');
if (typeof array !== 'object' || !array) {
return array || '';
}
separator = separator || '';
return (!Utilities.isUndefined(prop) ? array.map(item => item[prop]) : array).join(separator);
};
});
37 changes: 37 additions & 0 deletions src/Umbraco.Web.UI.Client/src/less/dashboards/examine-management.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,45 @@
}
}

.umb-panel-group__details-status-content{
width:50%; // this is to fix flexbox not making the content too wide
}

.umb-panel-group__details-status-action{
background-color:transparent;
padding-left:0;
}

.result-table {
overflow-x:auto;
border:1px solid @tableBorder;

> table {
margin-bottom:0;
border:0;
}

th:first-child,
td:first-child {
position:sticky;
left:0;
background-color:@white;
border-right:1px solid @tableBorder;
border-left:0;

+ td,
+ th {
border-left:0;
}
}

th:last-child,
td:last-child {
position:sticky;
right:0;
background-color:@white;
border-left:1px solid @tableBorder;
}
}
}

12 changes: 9 additions & 3 deletions src/Umbraco.Web.UI.Client/src/less/utilities/_text-align.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
TEXT ALIGN
*/

.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tl,
.table td.tl,
.table th.tl { text-align: left; }
.tr,
.table td.tr,
.table th.tr { text-align: right; }
.tc,
.table td.tc,
.table th.tc { text-align: center; }
42 changes: 42 additions & 0 deletions src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ function ExamineManagementController($http, $q, $timeout, umbRequestHelper, loca
vm.selectedIndex = null;
vm.selectedSearcher = null;
vm.searchResults = null;
vm.showSearchResultFields = [];

vm.showSelectFieldsDialog = showSelectFieldsDialog;
vm.showSearchResultDialog = showSearchResultDialog;
vm.showIndexInfo = showIndexInfo;
vm.showSearcherInfo = showSearcherInfo;
Expand All @@ -24,6 +26,35 @@ function ExamineManagementController($http, $q, $timeout, umbRequestHelper, loca

vm.infoOverlay = null;

function showSelectFieldsDialog() {
if (vm.searchResults) {

// build list of available fields
var availableFields = [];
vm.searchResults.results.map(r => Object.keys(r.values).map(key => {
if (availableFields.indexOf(key) == -1 && key != "__NodeId" && key != "nodeName") {
availableFields.push(key);
}
}));

availableFields.sort();

editorService.open({
title: "Fields",
availableFields: availableFields,
fieldIsSelected: function(key) {
return vm.showSearchResultFields.indexOf(key) > -1;
},
toggleField: vm.toggleField,
size: "small",
view: "views/dashboard/settings/examinemanagementfields.html",
close: function () {
editorService.close();
}
});
}
}

function showSearchResultDialog(values) {
if (vm.searchResults) {
localizationService.localize("examineManagement_fieldValues").then(function (value) {
Expand All @@ -40,6 +71,17 @@ function ExamineManagementController($http, $q, $timeout, umbRequestHelper, loca
}
}

vm.toggleField = function(key) {
if (vm.showSearchResultFields.indexOf(key) > -1) {
vm.showSearchResultFields = vm.showSearchResultFields.filter(field => field != key);
}
else {
vm.showSearchResultFields.push(key);
}

vm.showSearchResultFields.sort();
};

function nextSearchResultPage(pageNumber) {
search(vm.selectedIndex ? vm.selectedIndex : vm.selectedSearcher, null, pageNumber);
}
Expand Down
73 changes: 49 additions & 24 deletions src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,9 @@
<td>{{result.score}}</td>
<td>{{result.id}}</td>
<td>
<a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">{{result.values['nodeName'] | umbCmsJoinArray:', '}}</a>
<span ng-hide="result.editUrl">{{result.values['nodeName'] | umbCmsJoinArray:', '}}</span>
<button type="button" class="table__action-overlay color-green" ng-click="vm.showSearchResultDialog(result.values)">({{result.fieldCount}} <localize key="examineManagement_fields">fields</localize>)</button>
<a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">{{ ::result.values['nodeName'] | umbCmsJoinArray:', '}}</a>
<span ng-hide="result.editUrl">{{ ::result.values['nodeName'] | umbCmsJoinArray:', '}}</span>
<button type="button" class="table__action-overlay color-green" ng-click="vm.showSearchResultDialog(result.values)">({{ ::result.fieldCount}} <localize key="examineManagement_fields">fields</localize>)</button>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -288,27 +288,52 @@

<div ng-if="!vm.selectedIndex.isProcessing && vm.searchResults">
<br />

<table class="table table-bordered table-condensed">
<thead>
<tr>
<th class="score">Score</th>
<th class="id">Id</th>
<th><localize key="general_name">Name</localize></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.searchResults.results track by $index">
<td>{{result.score}}</td>
<td>{{result.id}}</td>
<td>
<a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">{{result.values['nodeName'] | umbCmsJoinArray:', '}}</a>
<span ng-hide="result.editUrl">{{result.values['nodeName'] | umbCmsJoinArray:', '}}</span>
<button type="button" class="table__action-overlay color-green" ng-click="vm.showSearchResultDialog(result.values)">({{result.fieldCount}} <localize key="examineManagement_fields">fields</localize>)</button>
</td>
</tr>
</tbody>
</table>
<div class="result-table">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th class="id nowrap" width="40">Id</th>
<th><localize key="general_name">Name</localize></th>
<th class="nowrap" ng-repeat="field in vm.showSearchResultFields">
<div class="flex justify-between">
<span>{{ field }}</span>
<button type="button" class="btn btn-mini btn-white ml-3" ng-click="vm.toggleField(field)">
&times;
</button>
</div>
</th>
<th class="tr nowrap" width="40">
<button type="button" class="btn btn-reset btn-link" style="font:inherit;color:inherit;" ng-click="vm.showSelectFieldsDialog()">Fields</button>
</th>
<th class="score tr nowrap" width="40">Score</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.searchResults.results track by $index" valign="top">
<td class="nowrap">{{result.id}}</td>
<td>
<a ng-show="result.editUrl" ng-click="vm.goToResult(result, $event)" ng-href="#{{result.editUrl}}">
{{ ::result.values['nodeName'] | umbCmsJoinArray:', ' }}
</a>
<span ng-hide="result.editUrl">{{ ::result.values['nodeName'] | umbCmsJoinArray:', ' }}</span>
</td>
<td ng-repeat="field in vm.showSearchResultFields">
{{ ::result.values[field] | umbCmsJoinArray:', ' }}
</td>
<td class="tr nowrap">
<button type="button"
class="table__action-overlay color-green"
ng-click="vm.showSearchResultDialog(result.values)">({{ ::result.fieldCount }} <localize key="examineManagement_fields">fields</localize>)</button>
</td>
<td class="tr nowrap umb-avatar--white">
<span title="{{ result.score }}">
{{ ::result.score | number:4 }}
</span>
</td>
</tr>
</tbody>
</table>
</div>

<div class="flex justify-center">
<umb-pagination page-number="vm.searchResults.pageNumber"
Expand Down
38 changes: 38 additions & 0 deletions src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagementfields.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div>
<umb-editor-view>
<umb-editor-header
name="model.title"
hide-icon="true"
hide-alias="true"
name-locked="true"
hide-description="true">
</umb-editor-header>
<umb-editor-container>
<umb-box>
<umb-box-content>
<div class="flex mb2" ng-repeat="field in model.availableFields">
<span class="mr2">
<umb-toggle
checked="model.fieldIsSelected(field)"
on-click="model.toggleField(field)"
hide-icons="true">
</umb-toggle>
</span>
<span>{{ field }}</span>
</div>
</umb-box-content>
</umb-box>
</umb-editor-container>
<umb-editor-footer>
<umb-editor-footer-content-right>
<umb-button
type="button"
button-style="link"
label-key="general_close"
shortcut="esc"
action="model.close()">
</umb-button>
</umb-editor-footer-content-right>
</umb-editor-footer>
</umb-editor-view>
</div>
2 changes: 1 addition & 1 deletion src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagementresults.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<tbody>
<tr ng-repeat="(key, values) in model.searchResultValues track by key">
<td>{{key}}</td>
<td style="word-break: break-word;">{{values | umbCmsJoinArray:', '}}</td>
<td style="word-break: break-word;">{{ ::values | umbCmsJoinArray:', '}}</td>
</tr>
</tbody>
</table>
Expand Down
17 changes: 3 additions & 14 deletions src/Umbraco.Web.UI.Client/test/unit/common/filters/umbCmsJoinArray.filter.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@
{input:[], separator:', ', prop:'param' , expectedResult: ''},
{input:[{param:'a'},{param:'b'},{param:'c'}], separator:', ', prop:null , expectedResult: ', , '},
{input:[{param:'a'},{param:'b'},{param:'c'}], separator:null, prop:'param' , expectedResult: 'abc'},
];

var testCasesWithExpectedError = [
{input:'test', separator:', ', prop:'param'},
{input:null, separator:', ', prop:'param'},
{input:undefined, separator:', ', prop:'param'},
{input:'test', separator:', ', prop:'param', expectedResult: 'test'},
{input:null, separator:', ', prop:'param', expectedResult: ''},
{input:undefined, separator:', ', prop:'param', expectedResult: ''},
];

beforeEach(module('umbraco'));
Expand All @@ -25,19 +22,11 @@
$umbCmsJoinArray = $filter('umbCmsJoinArray');
}));


testCases.forEach(function(test){
it('Blackbox tests with expected result=\''+test.expectedResult+'\'', function() {
expect($umbCmsJoinArray(test.input, test.separator, test.prop)).toBe(test.expectedResult);
});
});

testCasesWithExpectedError.forEach(function(test){
it('Blackbox tests with expected error. Input=\''+test.input+'\'', function() {
expect(function() { $umbCmsJoinArray(test.input, test.separator, test.prop)}).toThrow();
});
});

});

}());

0 comments on commit ffa704c

Please sign in to comment.