Only show table when any filtered result (#12993)

* Only show table when any filtered result

* Show table when any filtered dictionary items
This commit is contained in:
Bjarne Fyrstenborg
2022-09-16 02:45:10 +02:00
committed by GitHub
parent 6d27454ed2
commit eddf0ad61e
2 changed files with 18 additions and 15 deletions

View File

@@ -7,7 +7,9 @@
* The controller for listting dictionary items
*/
function DictionaryListController($scope, $location, dictionaryResource, localizationService, appState, navigationService) {
var vm = this;
const vm = this;
vm.title = "Dictionary overview";
vm.loading = false;
vm.items = [];
@@ -20,11 +22,13 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
vm.loading = true;
dictionaryResource.getList()
.then(function (data) {
vm.items = data;
vm.items.forEach(function(item){
item.style = { "paddingLeft": item.level * 10 };
.then(data => {
let items = data || [];
items.forEach(item => {
item.style = { "paddingLeft": item.level * 10 };
});
vm.items = items;
vm.loading = false;
});
}
@@ -47,7 +51,7 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
vm.createNewItem = createNewItem;
function onInit() {
localizationService.localize("dictionaryItem_overviewTitle").then(function (value) {
localizationService.localize("dictionaryItem_overviewTitle").then(value => {
vm.title = value;
});

View File

@@ -1,9 +1,6 @@
<div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">
<umb-load-indicator ng-if="vm.loading">
</umb-load-indicator>
<umb-editor-view ng-if="!vm.loading">
<umb-editor-view>
<umb-editor-header
name="vm.title"
hide-alias="true"
@@ -32,7 +29,9 @@
</umb-editor-sub-header>
<umb-box ng-if="vm.items.length === 0">
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<umb-box ng-if="!vm.loading && vm.items.length === 0">
<umb-box-content class="block-form">
<umb-empty-state size="small">
@@ -42,7 +41,7 @@
</umb-box-content>
</umb-box>
<table class="table table-hover" ng-if="vm.items.length > 0">
<table class="table table-hover" ng-show="!vm.loading && vm.filtered.length > 0">
<caption class="sr-only"><localize key="visuallyHiddenTexts_dictionaryListCaption">Dictionary items</localize></caption>
<thead>
<tr>
@@ -51,7 +50,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.filtered = (vm.items | filter: { 'name': vm.filter.searchTerm }) track by $id(item)" style="cursor: pointer;">
<tr ng-repeat="item in vm.filtered = (vm.items | filter: { 'name': vm.filter.searchTerm })" class="cursor-pointer">
<th>
<button type="button" ng-style="item.style" class="btn-reset bold" ng-click="vm.clickItem(item.id)">{{item.name}}</button>
</th>
@@ -69,8 +68,8 @@
</tr>
</tbody>
</table>
<umb-empty-state ng-if="vm.filtered.length === 0"
<umb-empty-state ng-if="!vm.loading && vm.filtered.length === 0"
position="center">
<localize key="dictionary_noItemsFound">There were no dictionary items found.</localize>
</umb-empty-state>