8258: Added create dictionary item button

This commit is contained in:
Patrick de Mooij
2021-10-05 22:20:27 +02:00
committed by Nathan Woulfe
parent 3dcfb6aea1
commit 49132e2b7f
4 changed files with 61 additions and 37 deletions

View File

@@ -1,4 +1,4 @@
/**
/**
* @ngdoc controller
* @name Umbraco.Editors.Dictionary.ListController
* @function
@@ -6,7 +6,7 @@
* @description
* The controller for listting dictionary items
*/
function DictionaryListController($scope, $location, dictionaryResource, localizationService, appState) {
function DictionaryListController($scope, $location, dictionaryResource, localizationService, appState, navigationService) {
var vm = this;
vm.title = "Dictionary overview";
vm.loading = false;
@@ -31,7 +31,17 @@ function DictionaryListController($scope, $location, dictionaryResource, localiz
$location.path("/" + currentSection + "/dictionary/edit/" + id);
}
function createNewItem() {
var rootNode = appState.getTreeState("currentRootNode").root;
//We need to load the menu first before we can access the menu actions.
navigationService.showMenu({ node: rootNode }).then(function () {
const action = appState.getMenuState("menuActions").find(item => item.alias === "create");
navigationService.executeMenuAction(action, rootNode, appState.getSectionState("currentSection"));
});
}
vm.clickItem = clickItem;
vm.createNewItem = createNewItem;
function onInit() {
localizationService.localize("dictionaryItem_overviewTitle").then(function (value) {

View File

@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">
<div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">
<umb-load-indicator ng-if="vm.loading">
</umb-load-indicator>
@@ -13,43 +13,55 @@
</umb-editor-header>
<umb-editor-container>
<umb-box ng-if="vm.items.length === 0">
<umb-box-content class="block-form">
<umb-editor-sub-header>
<umb-empty-state size="small">
<localize key="dictionary_noItems">There are no dictionary items.</localize>
</umb-empty-state>
<umb-editor-sub-header-content-left>
<umb-button button-style="outline"
type="button"
action="vm.createNewItem()"
label-key="dictionary_createNew">
</umb-button>
</umb-editor-sub-header-content-left>
</umb-box-content>
</umb-box>
</umb-editor-sub-header>
<table class="table table-hover" ng-if="vm.items.length > 0">
<caption class="sr-only"><localize key="visuallyHiddenTexts_dictionaryListCaption"></localize></caption>
<thead>
<tr>
<th><localize key="general_name">Name</localize></th>
<th ng-repeat="column in vm.items[0].translations | orderBy:'displayName'">{{column.displayName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items track by item.id" style="cursor: pointer;">
<th>
<button type="button" ng-style="item.style" class="btn-reset bold" ng-click="vm.clickItem(item.id)">{{item.name}}</button>
</th>
<td ng-repeat="column in item.translations | orderBy:'displayName'">
<button type="button" class="btn-reset" ng-click="vm.clickItem(item.id)">
<umb-icon icon="{{ column.hasTranslation ? 'icon-check' : 'icon-alert' }}"
class="{{ column.hasTranslation ? 'color-green' : 'color-red' }}">
</umb-icon>
<span class="sr-only">
<localize ng-if="column.hasTranslation" key="visuallyHiddenTexts_hasTranslation"></localize>
<localize ng-if="!column.hasTranslation" key="visuallyHiddenTexts_noTranslation"></localize>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<umb-box ng-if="vm.items.length === 0">
<umb-box-content class="block-form">
<umb-empty-state size="small">
<localize key="dictionary_noItems">There are no dictionary items.</localize>
</umb-empty-state>
</umb-box-content>
</umb-box>
<table class="table table-hover" ng-if="vm.items.length > 0">
<caption class="sr-only"><localize key="visuallyHiddenTexts_dictionaryListCaption"></localize></caption>
<thead>
<tr>
<th><localize key="general_name">Name</localize></th>
<th ng-repeat="column in vm.items[0].translations | orderBy:'displayName'">{{column.displayName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items track by item.id" style="cursor: pointer;">
<th>
<button type="button" ng-style="item.style" class="btn-reset bold" ng-click="vm.clickItem(item.id)">{{item.name}}</button>
</th>
<td ng-repeat="column in item.translations | orderBy:'displayName'">
<button type="button" class="btn-reset" ng-click="vm.clickItem(item.id)">
<umb-icon icon="{{ column.hasTranslation ? 'icon-check' : 'icon-alert' }}"
class="{{ column.hasTranslation ? 'color-green' : 'color-red' }}">
</umb-icon>
<span class="sr-only">
<localize ng-if="column.hasTranslation" key="visuallyHiddenTexts_hasTranslation"></localize>
<localize ng-if="!column.hasTranslation" key="visuallyHiddenTexts_noTranslation"></localize>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</umb-editor-container>
</umb-editor-view>