U4-5683 Migrate Dictionary tree & editor to angular

src/Umbraco.Core/Constants-Applications.cs

@@ -93,6 +93,11 @@ public static class Trees
 			/// </summary>
 			public const string Dictionary = "dictionary";
 
+            /// <summary>
+            /// The dictionary obsolete.
+            /// </summary>
+            public const string DictionaryObsolete = "dictionary-obsolete";
+
             public const string Stylesheets = "stylesheets";
 
             /// <summary>

src/Umbraco.Web.UI.Client/src/common/resources/dictionary.resource.js

@@ -0,0 +1,162 @@
+/**
+    * @ngdoc service
+    * @name umbraco.resources.dictionaryResource
+    * @description Loads in data for dictionary items
+**/
+function dictionaryResource($q, $http, umbRequestHelper, umbDataFormatter) {
+
+  /**
+         * @ngdoc method
+         * @name umbraco.resources.dictionaryResource#deleteById
+         * @methodOf umbraco.resources.dictionaryResource
+         *
+         * @description
+         * Deletes a dictionary item with a given id
+         *
+         * ##usage
+         * <pre>
+         * dictionaryResource.deleteById(1234)
+         *    .then(function() {
+         *        alert('its gone!');
+         *    });
+         * </pre>
+         *
+         * @param {Int} id id of dictionary item to delete
+         * @returns {Promise} resourcePromise object.
+         *
+  **/
+  function deleteById(id) {
+    return umbRequestHelper.resourcePromise(
+      $http.post(
+        umbRequestHelper.getApiUrl(
+          "dictionaryApiBaseUrl",
+          "DeleteById",
+          [{ id: id }])),
+      "Failed to delete item " + id);
+  }
+
+  /**
+         * @ngdoc method
+         * @name umbraco.resources.dictionaryResource#create
+         * @methodOf umbraco.resources.dictionaryResource
+         *
+         * @description
+         * Creates a dictionary item with the gieven key and parent id
+         *
+         * ##usage
+         * <pre>
+         * dictionaryResource.create(1234,"Item key")
+         *    .then(function() {
+         *        alert('its created!');
+         *    });
+         * </pre>
+         *
+         * @param {Int} parentid the parentid of the new dictionary item
+         * @param {String} key the key of the new dictionary item
+         * @returns {Promise} resourcePromise object.
+         *
+  **/
+  function create(parentid, key) {
+    return umbRequestHelper.resourcePromise(
+      $http.post(
+        umbRequestHelper.getApiUrl(
+          "dictionaryApiBaseUrl",
+          "Create",
+          { parentId: parentid, key : key })),
+      "Failed to create item ");
+  }
+
+    /**
+         * @ngdoc method
+         * @name umbraco.resources.dictionaryResource#deleteById
+         * @methodOf umbraco.resources.dictionaryResource
+         *
+         * @description
+         * Gets a dictionary item with a given id
+         *
+         * ##usage
+         * <pre>
+         * dictionaryResource.getById(1234)
+         *    .then(function() {
+         *        alert('Found it!');
+         *    });
+         * </pre>
+         *
+         * @param {Int} id id of dictionary item to get
+         * @returns {Promise} resourcePromise object.
+         *
+  **/
+    function getById(id) {
+        return umbRequestHelper.resourcePromise(
+            $http.get(
+                umbRequestHelper.getApiUrl(
+                    "dictionaryApiBaseUrl",
+                    "GetById",
+                    [{ id: id }])),
+            "Failed to get item " + id);
+    }
+
+    /**
+        * @ngdoc method
+        * @name umbraco.resources.dictionaryResource#save
+        * @methodOf umbraco.resources.dictionaryResource
+        *
+        * @description
+        * Updates a dictionary
+        *
+        * @param {Object} dictionary  dictionary object to update     
+        * @param {Bool} nameIsDirty set to true if the name has been changed
+        * @returns {Promise} resourcePromise object.
+        *
+        */
+    function save(dictionary, nameIsDirty) {
+
+        var saveModel = umbDataFormatter.formatDictionaryPostData(dictionary, nameIsDirty);
+
+       return umbRequestHelper.resourcePromise(
+            $http.post(umbRequestHelper.getApiUrl("dictionaryApiBaseUrl", "PostSave"), saveModel),
+            "Failed to save data for dictionary id " + dictionary.id);
+    }
+
+    /**
+         * @ngdoc method
+         * @name umbraco.resources.dictionaryResource#getList
+         * @methodOf umbraco.resources.dictionaryResource
+         *
+         * @description
+         * Gets a list of all dictionary items
+         *
+         * ##usage
+         * <pre>
+         * dictionaryResource.getList()
+         *    .then(function() {
+         *        alert('Found it!');
+         *    });
+         * </pre>
+         *         
+         * @returns {Promise} resourcePromise object.
+         *
+  **/
+    function getList() {
+        return umbRequestHelper.resourcePromise(
+            $http.get(
+                umbRequestHelper.getApiUrl(
+                    "dictionaryApiBaseUrl",
+                    "getList")),
+            "Failed to get list");
+    }
+
+  var resource = {
+    deleteById: deleteById,
+    create: create,
+    getById: getById,
+    save: save,
+    getList : getList
+  };
+
+  return resource;
+
+
+}
+
+angular.module("umbraco.resources").factory("dictionaryResource", dictionaryResource);

src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js

@@ -99,6 +99,28 @@
                 return saveModel;
             },
 
+            /** formats the display model used to display the dictionary to the model used to save the dictionary */
+            formatDictionaryPostData : function(dictionary, nameIsDirty) {
+                var saveModel = {
+                    parentId: dictionary.parentId,
+                    id: dictionary.id,
+                    name: dictionary.name,
+                    nameIsDirty: nameIsDirty,
+                    translations: [],
+                    key : dictionary.key
+                };
+
+                for(var i = 0; i < dictionary.translations.length; i++) {
+                    saveModel.translations.push({
+                        isoCode: dictionary.translations[i].isoCode,
+                        languageId: dictionary.translations[i].languageId,
+                        translation: dictionary.translations[i].translation
+                    });
+                }
+
+                return saveModel;
+            },
+
             /** formats the display model used to display the user to the model used to save the user */
             formatUserPostData: function (displayModel) {
 

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

@@ -0,0 +1,19 @@
+<div 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>
+
+      <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>
+
+      <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
+    </form>
+  </div>  
+</div>

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

@@ -0,0 +1,12 @@
+<div class="umb-dialog umb-pane" ng-controller="Umbraco.Editors.Dictionary.DeleteController as vm" >
+  <div class="umb-dialog-body" auto-scale="90">
+
+    <p class="umb-abstract">
+      <localize key="defaultdialogs_confirmdelete">Are you sure you want to delete</localize> <strong>{{currentNode.name}}</strong> ?
+    </p>
+
+    <umb-confirm on-confirm="vm.performDelete" on-cancel="vm.cancel">    
+    </umb-confirm>
+
+  </div>
+</div>

src/Umbraco.Web.UI.Client/src/views/dictionary/dictionairy.edit.controller.js

@@ -0,0 +1,115 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.Dictionary.EditController
+ * @function
+ * 
+ * @description
+ * The controller for editing dictionary items
+ */
+function DictionaryEditController($scope, $routeParams, dictionaryResource, treeService, navigationService, appState, editorState, contentEditingHelper, formHelper, notificationsService, localizationService) {
+    vm = this;
+
+    //setup scope vars
+    vm.nameDirty = false;
+    vm.page = {};
+    vm.page.loading = false;
+    vm.page.nameLocked = false;
+    vm.page.menu = {};
+    vm.page.menu.currentSection = appState.getSectionState("currentSection");
+    vm.page.menu.currentNode = null;
+    vm.description = '';
+
+    function loadDictionary() {
+
+        vm.page.loading = true;
+
+        //we are editing so get the content item from the server
+        dictionaryResource.getById($routeParams.id)
+            .then(function (data) {
+
+                bindDictionary(data);
+
+                vm.page.loading = false;               
+            });
+    }
+
+    function createTranslationProperty(translation) {
+        return {
+            alias: translation.isoCode,
+            label: translation.displayName,
+            hideLabel : false
+        }
+    }
+
+    function bindDictionary(data) {
+        localizationService.localize('dictionaryItem_description').then(function (value) {
+            vm.description = value.replace('%0%', data.name);
+        });
+
+        // create data for  umb-property displaying
+        for (var i = 0; i < data.translations.length; i++) {
+            data.translations[i].property = createTranslationProperty(data.translations[i]);
+        }
+
+        contentEditingHelper.handleSuccessfulSave({
+            scope: $scope,
+            savedContent: data
+        });
+
+        // set content
+        vm.content = data;
+
+        //share state
+        editorState.set(vm.content);
+
+        navigationService.syncTree({ tree: "dictionary", path: data.path, forceReload: true }).then(function (syncArgs) {
+            vm.page.menu.currentNode = syncArgs.node;
+        });
+    }
+
+    function onInit() {
+        loadDictionary();
+    }
+
+    function saveDictionary() {
+        if (formHelper.submitForm({ scope: $scope, statusMessage: "Saving..." })) {
+
+            vm.page.saveButtonState = "busy";
+
+            dictionaryResource.save(vm.content, vm.nameDirty)
+                .then(function (data) {
+
+                    formHelper.resetForm({ scope: $scope, notifications: data.notifications });
+
+                        bindDictionary(data);       
+
+
+                        vm.page.saveButtonState = "success";
+                    },
+                    function (err) {
+
+                        contentEditingHelper.handleSaveError({
+                            redirectOnFailure: false,
+                            err: err
+                        });
+
+                        notificationsService.error(err.data.message);
+
+                        vm.page.saveButtonState = "error";
+                    });
+        }
+    }
+
+    vm.save = saveDictionary;
+
+    $scope.$watch("vm.content.name", function (newVal, oldVal) {
+        //when the value changes, we need to set the name dirty
+        if (newVal && (newVal !== oldVal) && typeof(oldVal) !== 'undefined') {
+            vm.nameDirty = true;           
+        }
+    });
+
+    onInit();
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.Dictionary.EditController", DictionaryEditController);