I am most of the way redoing the Tag Manager package, and have struck some minor issues that I simply cannot fix / get my head around.
Editing and saving a tag works fine, it is the actions after save I am having problems with.
Firstly, the tree collapses on save and I have not been able to get it to reload / expand.
Secondly on save I would like to reload the tag data in the main area, however I cannot get it to work. What currently happens is the form remains but the fields blank out. I have noticed also that you cannot click the same node in the tree after save - the data doesn't load, you have to first click on another node, and then back on the original one to get it to load.
My controller code is below - can someone please, please, please assist ?
angular.module("umbraco").controller("TagManager.TagManagerEditController",
function ($scope, $routeParams, TagManagerResource, notificationsService, navigationService) {
TagManagerResource.getById($routeParams.id).then(function (response) {
$scope.cmsTags = response.data;
$scope.selectedTag = $routeParams.id;
});
$scope.save = function (cmsTags) {
TagManagerResource.save(cmsTags).then(function (response) {
$scope.cmsTags = response.data;
notificationsService.success("Success", "'" + cmsTags.tag + "' has been saved");
var pathArray = ['-1'];
pathArray.push($scope.cmsTags.id);
navigationService.syncTree({ tree: 'TagManagerTree', path: pathArray, forceReload: true });
});
};
$scope.deleteTag = function (cmsTags) {
TagManagerResource.deleteTag(cmsTags).then(function (response) {
if (window.confirm("Are you sure you wish to delete '" + cmsTags.tag + "' tag?")) {
$scope.cmsTags = response.data;
notificationsService.success("Success", "'" + cmsTags.tag + "' has been deleted.");
var pathArray = ['-1'];
navigationService.syncTree({ tree: 'TagManagerTree', path: pathArray, forceReload: true });
treeService.removeNode($scope.currentNode);
}
else {
return false;
}
});
};
});
I have updated the save synctree method and also think I have corrected the pathArray.
As per the screenshot below shows the tree with the "default" and "special" tag group nodes having an id of "tagGroup-default" and "tagGroup-special" respectively.
My updated code is
$scope.save = function (cmsTags) {
TagManagerResource.save(cmsTags).then(function (response) {
$scope.cmsTags = response.data;
var pathArray = ['tagGroup-'+cmsTags.group];
pathArray.push(cmsTags.id);
navigationService.syncTree({ tree: 'TagManagerTree', path: pathArray, forceReload: true, activate: false }).then(
function (syncArgs) {
if ($routeParams.save) {
$location.path(syncArgs.node.routePath);
}
});
notificationsService.success("Success", "'" + cmsTags.tag + "' has been saved");
});
};
OK, partly sorted due to an epiphany in the night - have updated the code to below and the tree now stays expanded. Just gotta figure out how to reload the node data after save - it is still disappearing.
$scope.save = function (cmsTags) {
TagManagerResource.save(cmsTags).then(function (response) {
$scope.cmsTags = response.data;
var pathArray = ['-1', 'tagGroup-' + cmsTags.group];
pathArray.push(cmsTags.id);
navigationService.syncTree({ tree: 'TagManagerTree', path: pathArray, forceReload: true, activate: false }).then(
function (syncArgs) {
if ($routeParams.method == "edit") {
$location.path(syncArgs.node.routePath);
}
});
notificationsService.success("Success", "'" + cmsTags.tag + "' has been saved");
});
};
Didn't read the rest of this thread, but wanted to give you a heads up on your latest reply that the variables are passed to that function via dependency injection.
That is, Angular looks at the names of each parameter, and based on the names it will try to find a service matching that name so it can instantiate it and pass it to that function.
As an example, the "$location" service is a built-in service that will be passed to that function. You can also create your own services and they will follow this same pattern of dependency injection.
And just to be clear, not every function gets parameters dependency injected. Typically, you would do this in controller functions (like the one you have in your latest reply).
So finally "hacked" my way to solving the reload issue. Found some code on another post (https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/79436-reload-node-in-custom-tree) which detailed a $route.reload() method being called.
So added $route to the controller and updated my code as follows and now working fine.
$scope.save = function (cmsTags) {
TagManagerResource.save(cmsTags).then(function (response) {
$scope.cmsTags = response.data;
var pathArray = ['-1', 'tagGroup-' + cmsTags.group];
notificationsService.success("Success", "'" + cmsTags.tag + "' has been saved");
pathArray.push(cmsTags.id);
navigationService.syncTree({ tree: 'TagManagerTree', path: pathArray, forceReload: true, activate: false }).then(
function (syncArgs) {
if ($routeParams.method == "edit") {
$location.path(syncArgs.node.routePath);
$route.reload();
}
});
});
};
Custom Section - Tree & Node Issues
Hi there
I am most of the way redoing the Tag Manager package, and have struck some minor issues that I simply cannot fix / get my head around.
Editing and saving a tag works fine, it is the actions after save I am having problems with.
Firstly, the tree collapses on save and I have not been able to get it to reload / expand.
Secondly on save I would like to reload the tag data in the main area, however I cannot get it to work. What currently happens is the form remains but the fields blank out. I have noticed also that you cannot click the same node in the tree after save - the data doesn't load, you have to first click on another node, and then back on the original one to get it to load.
My controller code is below - can someone please, please, please assist ?
Cheers Nigel
Hi Nigel,
If I understand correct your fields stay empty after saving.
Maybe this code example can help you : https://bitbucket.org/dawoe/umbukfestival2014/src/1f7a6c03621a873b25cb709ecac43b298dad2a20/Sources/UmbUkFestival2014.Website/App_Plugins/UmbUkFest/backoffice/speakers/edit.controller.js?at=master&fileviewer=file-view-default#edit.controller.js-64
It is the part that you are looking for :
Also see you use a window.confirm in your code. In this article I explain how to create a custom dialog using the notificationsService : http://24days.in/umbraco/2014/umbraco-angular-tips/
That is more consistent with the rest of the backoffice.
Dave
Hi Dave
Thanks for your feedback, but I'm still stuck...
I have updated the save synctree method and also think I have corrected the pathArray.
As per the screenshot below shows the tree with the "default" and "special" tag group nodes having an id of "tagGroup-default" and "tagGroup-special" respectively.
My updated code is
Any suggestions please ?
Thanks
Nigel
NB I can look into the window.confirm later - trying to tick the above off first. :-)
Have just checked routeParams object that there was no "create" so have changed this to the following:
As you can guess I am guessing at what is the problem, but still no joy... :-(
OK, partly sorted due to an epiphany in the night - have updated the code to below and the tree now stays expanded. Just gotta figure out how to reload the node data after save - it is still disappearing.
In doing a bit more debugging I have now realised the variable '$location' isn't defined as per the previous code snippet.
As per the Umbraco2014 sample the opening 2 lines of code are as follows:
I simply do not understand how the variables are constructed / passed to the function.
Didn't read the rest of this thread, but wanted to give you a heads up on your latest reply that the variables are passed to that function via dependency injection.
That is, Angular looks at the names of each parameter, and based on the names it will try to find a service matching that name so it can instantiate it and pass it to that function.
As an example, the "$location" service is a built-in service that will be passed to that function. You can also create your own services and they will follow this same pattern of dependency injection.
And just to be clear, not every function gets parameters dependency injected. Typically, you would do this in controller functions (like the one you have in your latest reply).
Hi Nicholas
Appreciate the feedback and clarification of how angular works.
Cheers, Nigel
So finally "hacked" my way to solving the reload issue. Found some code on another post (https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/79436-reload-node-in-custom-tree) which detailed a $route.reload() method being called.
So added $route to the controller and updated my code as follows and now working fine.
Onto the custom dialog as suggested by Dave
is working on a reply...
This forum is in read-only mode while we transition to the new forum.
You can continue this topic on the new forum by tapping the "Continue discussion" link below.