v8: Fix dictionary items overview (#4456)

src/Umbraco.Web.UI.Client/src/views/dictionary/create.html

@@ -1,19 +1,19 @@
-<div ng-controller="Umbraco.Editors.Dictionary.CreateController as vm">
+<div class="umbracoDialog umb-dialog-body with-footer" ng-controller="Umbraco.Editors.Dictionary.CreateController as vm">
   
   <div class="umb-pane">
     <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
   </div>
   
   <div class="umb-pane">
-    <form name="createDictionaryForm"
-          ng-submit="vm.createItem()"
-          val-form-manager>
+      <form novalidate name="createDictionaryForm"
+            ng-submit="vm.createItem()"
+            val-form-manager>
 
-      <umb-control-group label="Enter a item-name" hide-label="true">
-        <input type="text" name="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level" required />
-      </umb-control-group>
+          <umb-control-group label="@general_name" hide-label="false">
+              <input type="text" name="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level" umb-auto-focus required />
+          </umb-control-group>
 
-      <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
-    </form>
+          <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
+      </form>
   </div>  
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js

@@ -7,38 +7,41 @@
  * The controller for creating dictionary items
  */
 function DictionaryCreateController($scope, $location, dictionaryResource, navigationService, notificationsService, formHelper, appState) {
+
     var vm = this;
 
     vm.itemKey = "";
 
+    vm.createItem = createItem;
+
     function createItem() {
 
-        var node = $scope.currentNode;
+        if (formHelper.submitForm({ scope: $scope, formCtrl: this.createDictionaryForm })) {
 
-        dictionaryResource.create(node.id, vm.itemKey).then(function (data) {
-            navigationService.hideMenu();
+            var node = $scope.currentNode;
 
-            // set new item as active in tree
-            var currPath = node.path ? node.path : "-1";
-            navigationService.syncTree({ tree: "dictionary", path: currPath + "," + data, forceReload: true, activate: true });
-
-            // reset form state
-            formHelper.resetForm({ scope: $scope });
-
-            // navigate to edit view
-            var currentSection = appState.getSectionState("currentSection");
-            $location.path("/" + currentSection + "/dictionary/edit/" + data);
-
-
-        }, function (err) {
-            if (err.data && err.data.message) {
-                notificationsService.error(err.data.message);
+            dictionaryResource.create(node.id, vm.itemKey).then(function (data) {
                 navigationService.hideMenu();
-            }
-        });
-    }
 
-    vm.createItem = createItem;
+                // set new item as active in tree
+                var currPath = node.path ? node.path : "-1";
+                navigationService.syncTree({ tree: "dictionary", path: currPath + "," + data, forceReload: true, activate: true });
+
+                // reset form state
+                formHelper.resetForm({ scope: $scope });
+
+                // navigate to edit view
+                var currentSection = appState.getSectionState("currentSection");
+                $location.path("/" + currentSection + "/dictionary/edit/" + data);
+
+            }, function (err) {
+                if (err.data && err.data.message) {
+                    notificationsService.error(err.data.message);
+                    navigationService.hideMenu();
+                }
+            });
+        }
+    }
 }
 
 angular.module("umbraco").controller("Umbraco.Editors.Dictionary.CreateController", DictionaryCreateController);

src/Umbraco.Web.UI.Client/src/views/dictionary/list.html

@@ -1,4 +1,5 @@
 <div ng-controller="Umbraco.Editors.Dictionary.ListController as vm">
+
     <umb-load-indicator ng-if="vm.loading">
     </umb-load-indicator>
 
@@ -12,12 +13,22 @@
         </umb-editor-header>
         <umb-editor-container>
 
-            <table class="table table-hover" ng-if="vm.items">
+            <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">
                 <thead>
                     <tr>
                         <th><localize key="general_name">Name</localize></th>
                         <th ng-repeat="column in vm.items[0].translations">{{column.displayName}}</th>
-                    </th>
+                    </tr>
                 </thead>
                 <tbody>
                     <tr ng-repeat="item in vm.items track by item.id" ng-click="vm.clickItem(item.id)" style="cursor: pointer;">
@@ -31,7 +42,7 @@
                     </tr>
                 </tbody>
             </table>
-                
+
         </umb-editor-container>
     </umb-editor-view>
 </div>

src/Umbraco.Web.UI/Umbraco/config/lang/da.xml

@@ -444,6 +444,9 @@
     <key alias="selectSnippet">Vælg snippet</key>
     <key alias="variantdeletewarning">Dette vil slette noden og alle dets sprog. Hvis du kun vil slette et sprog, så afpublicér det i stedet.</key>
   </area>
+  <area alias="dictionary">
+    <key alias="noItems">Der er ingen ordbogselementer.</key>
+  </area>
   <area alias="dictionaryItem">
     <key alias="description"><![CDATA[
       Rediger de forskellige sprogversioner for ordbogselementet '%0%' herunder.<br />Du tilføjer flere sprog under 'sprog' i menuen til venstre </key>
@@ -452,7 +455,7 @@
     <key alias="changeKeyError"><![CDATA[
       Navnet '%0%' eksisterer allerede.
    ]]></key>
-    <key alias="overviewTitle">Ordbog</key>
+    <key alias="overviewTitle">Ordbogsoversigt</key>
   </area>
   <area alias="examineManagement">
     <key alias="configuredSearchers">Konfigurerede søgere</key>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -462,6 +462,9 @@
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language go and unpublish it instead.</key>
   </area>
+  <area alias="dictionary">
+    <key alias="noItems">There are no dictionary items.</key>
+  </area>
   <area alias="dictionaryItem">
     <key alias="description"><![CDATA[
       Edit the different language versions for the dictionary item '<em>%0%</em>' below<br/>You can add additional languages under the 'languages' in the menu on the left

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -465,6 +465,9 @@
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language go and unpublish it instead.</key>
   </area>
+  <area alias="dictionary">
+    <key alias="noItems">There are no dictionary items.</key>
+  </area>
   <area alias="dictionaryItem">
     <key alias="description"><![CDATA[
       Edit the different language versions for the dictionary item '<em>%0%</em>' below<br/>You can add additional languages under the 'languages' in the menu on the left

src/Umbraco.Web/Editors/DictionaryController.cs

@@ -74,7 +74,7 @@ namespace Umbraco.Web.Editors
         {
             if (string.IsNullOrEmpty(key))
                 return Request
-                    .CreateNotificationValidationErrorResponse("Key can not be empty;"); // TODO: translate
+                    .CreateNotificationValidationErrorResponse("Key can not be empty."); // TODO: translate
 
             if (Services.LocalizationService.DictionaryItemExists(key))
             {