From 49132e2b7f64292ac9049b2348ee8e7e4245e794 Mon Sep 17 00:00:00 2001
From: Patrick de Mooij <patrickdemooij98@hotmail.com>
Date: Tue, 5 Oct 2021 22:20:27 +0200
Subject: [PATCH] 8258: Added create dictionary item button

---
 .../dictionary/dictionary.list.controller.js  | 14 +++-
 .../src/views/dictionary/list.html            | 82 +++++++++++--------
 src/Umbraco.Web.UI/umbraco/config/lang/en.xml |  1 +
 .../umbraco/config/lang/en_us.xml             |  1 +
 4 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
index e55dfd44a1..669a0d5183 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.list.controller.js
@@ -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) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
index 928aba0607..14c7bb4c5c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
@@ -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>
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
index 27137c0a5e..a5b2bb5540 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
@@ -500,6 +500,7 @@
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>
+    <key alias="createNew">Create dictionary item</key>
   </area>
   <area alias="dictionaryItem">
     <key alias="description"><![CDATA[
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
index 94cf22501e..0ae0453ac9 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
@@ -511,6 +511,7 @@
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>
+    <key alias="createNew">Create dictionary item</key>
   </area>
   <area alias="dictionaryItem">
     <key alias="description"><![CDATA[