Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jesper Hauge 298 posts 487 karma points c-trib
    Sep 03, 2014 @ 10:37
    Jesper Hauge
    0

    Handling edit/create state in custom section

    I'm building a custom section, and utilizing the built in menu actions for items in the menu tree. Basically I'm trying to create a folder tree, that lets the users create a folder hierarchy in my tree.

    Problem is: after creating a new folder, the umbraco backend stays in "create" mode, which means that after creating and saving a node, next action will spawn a "You have unsaved changes" warning in the backend. I suspect this is because after creating and saving the node, the url does not change. While creating it will be: #/Docstore/DocstoreTree/edit/{id of parent}?create, and it doesn't change after hitting "Save" in the backend. I've tried changing the url in the $scope.save function, but it just shows the "Unsaved changes" warning and halts the url relocation.

    EDIT: Later found a service with a method aimed at this: contentEditingHelper.redirectToCreatedContent(), but it still shows the dreaded "Unsaved content" warning when calling the method.

    UPDATE: Pinpointed the origin of the warning, in the html form I'm using I copied a form with a val-form-manager directive, that basically checks the $dirty property of the form and blocks navigating to new route with the unsaved message. At the moment I don't understand why the form is considered dirty after the save.

    To set up the menu actions for each node I'm using this code:

    namespace MySection.Trees
    {
        [PluginController("Docstore")]
        [Tree("Docstore", "DocstoreTree", "Versioned documents", 
              "icon-folder", "icon-folder-open", true, 100)]
        public class DocstoreTreeController : TreeController
        {
            // Tree
            protected override TreeNodeCollection GetTreeNodes(string id,
                FormDataCollection queryStrings)
            {
                // Creating the tree …
            }
    
            // Menuitems
            protected override MenuItemCollection GetMenuForNode(string id,
                FormDataCollection queryStrings)
            {
                var menu = new MenuItemCollection();
    
                // Menu for root
                if (id == Constants.System.Root.ToInvariantString())
                {
                    menu.Items.Add<CreateChildEntity, ActionNew>
                        (ui.Text("actions", ActionNew.Instance.Alias));
                    menu.Items.Add<RefreshNode, ActionRefresh>
                        (ui.Text("actions", ActionRefresh.Instance.Alias), true);
                    return menu;
                }
                // Menu for other items
                menu.Items.Add<CreateChildEntity, ActionNew>
                    (ui.Text("actions", ActionNew.Instance.Alias));
                menu.Items.Add<RefreshNode, ActionRefresh>
                    (ui.Text("actions", ActionRefresh.Instance.Alias), true);
                return menu;
            }
        }
    }
    

    In the edit controller I'm handling the edit/save events like this:

    angular.module('umbraco').controller('Docstore.FolderEditController',
        function ($scope, $routeParams, notificationsService,
                  navigationService, docstoreResource) {
            // Event handlers
            $scope.save = function (folder) {
                docstoreResource.saveFolder(folder).then(function (response) {
                    $scope.folder = response.data;
                    $scope.syncDocstoreTree(true);
                    notificationsService.success('Succes', folder.name + ' blev oprettet');
                });
            }
    
            $scope.syncDocstoreTree = function (reload) {
                var pathArray = ['-1'];
                console.log('Path: ' + $scope.folder.path + "!");
                if ($scope.folder.path) {
                    pathArray.push.apply(pathArray, $scope.folder.path.trim().split(','));
                }
                pathArray.push($scope.folder.id.toString());
                return navigationService.syncTree({
                    tree: 'DocstoreTree',
                    path: pathArray,
                    forceReload: reload
                });
            }
    
            // Setup scope properties and display
            $scope.loaded = false;
    
    
            // Check if we're at the root of the tree
            if ($routeParams.id === '-1') {
                $scope.folder = {
                    name: ''
                }
                $scope.loaded = true;
                return;
            }
    
            // Check if we're creating a subfolder
            if ($routeParams.create) {
                $scope.folder = {
                    name: '',
                    parentId: $routeParams.id
                }
                $scope.loaded = true;
                return;
            }
    
            // If we reached this spot, there must be a selected folder to load
            docstoreResource.getFolder($routeParams.id).then(function (response) {
                $scope.folder = response.data;
                $scope.syncDocstoreTree(true).then(function() {
                    $scope.loaded = true;
                });
            });
        });
    
  • vinegar 8 posts 25 karma points
    Oct 06, 2014 @ 05:04
    vinegar
    0

    I got around this issue by setting the $dirty property of the form to false after saving the data.

     

    $scope.formName.$dirty = false
  • Ian Grainger 71 posts 135 karma points
    Aug 15, 2017 @ 11:46
    Ian Grainger
    0

    The IsDirty of which form? I can't get this to work - I've included my own val-form-manager form, but clearing isDirty on that isn't working - as the umb-dashboard form control is apparently still dirty.

    And I can't work out how to get an instance of the umb-dashboard control so I can change it's dirty flag...

  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Oct 06, 2014 @ 08:55
    Dave Woestenborghs
    0

    This occurs because in the save even you have this line of code

    $scope.folder = response.data;

    Because you change your data on your scope it will trigger the form to become dirty.

    As vinegar points out you overrulle this by adding his code to your save code in the controller.

     

Please Sign in or register to post replies

Write your reply to:

Draft