CmsKit - Fix ContextMenu for MenuItems

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/Index.cshtml

@@ -20,6 +20,7 @@
 @section styles {
     <abp-style-bundle name="@typeof(IndexModel).FullName">
         <abp-style type="typeof(JsTreeStyleContributor)" />
+        <abp-script src="/Pages/CmsKit/Menus/MenuItems/index.css" />
     </abp-style-bundle>
 }
 
@@ -34,12 +35,28 @@
     @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
 }
 
+  <div id="jstree">
+    <!-- in this example the tree is populated from inline HTML -->
+    <ul>
+      <li>Root node 1
+        <ul>
+          <li id="child_node_1">Child node 1</li>
+          <li>Child node 2</li>
+        </ul>
+      </li>
+      <li>Root node 2</li>
+    </ul>
+  </div>
+
+<hr />
+
 <div id="CmsKitMenuItemsWrapper" data-menu-id="@Model.Id">
     <abp-card>
         <abp-card-body>
             <abp-card-title>
                 @L["MenuItems"]
             </abp-card-title>
+
             <div id="MenuItemsEditTree"></div>
             <div id="MenuItemsTreeEmptyInfo" class="text-muted">@L["NoMenuItems"]</div>
         </abp-card-body>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/index.css

@@ -0,0 +1 @@
+.vakata-context { z-index:10052 !important; }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Menus/MenuItems/index.js

@@ -94,7 +94,7 @@ $(function () {
                 edit: {
                     label: l('Edit'),
                     icon: 'fa fa-pencil',
-                    _disabled: abp.auth.isGranted('CmsKit.Menus.Items.Update'),
+                    _disabled: !abp.auth.isGranted('CmsKit.Menus.Items.Update'),
                     action: function (data) {
                         var instance = $.jstree.reference(data.reference);
 
@@ -108,7 +108,7 @@ $(function () {
                 addSubMenuItem: {
                     label: l('AddSubMenuItem'),
                     icon: 'fa fa-plus',
-                    _disabled: abp.auth.isGranted('CmsKit.Menus.Items.Create'),
+                    _disabled: !abp.auth.isGranted('CmsKit.Menus.Items.Create'),
                     action: function () {
                         menuTree.addItem(node.id);
                     }
@@ -117,7 +117,7 @@ $(function () {
                 'delete': {
                     label: l('Delete'),
                     icon: 'fa fa-remove',
-                    _disabled: abp.auth.isGranted('CmsKit.Menus.Items.Delete'),
+                    _disabled: !abp.auth.isGranted('CmsKit.Menus.Items.Delete'),
                     action: function (data) {
                         var instance = $.jstree.reference(data.reference);
 
@@ -146,7 +146,7 @@ $(function () {
             return items;
         },
 
-        addItem: function (parentId) {
+        addItem: function () {
             var instance = $.jstree.reference(menuTree.$tree);
 
             createModal.open({
@@ -262,34 +262,34 @@ $(function () {
                             multiple: false,
                             check_callback: function (operation, node, node_parent, node_position, more) {
                                 return true;
-                            },
-
-                            contextmenu: {
-                                items: menuTree.contextMenu,
-                                'select_node': false
-                            },
-
-                            //sort: function (node1, node2) {
-                            //    if (this.get_node(node2).original.displayName < this.get_node(node1).original.displayName) {
-                            //        return 1;
-                            //    }
-
-                            //    return -1;
-                            //},
-
-                            plugins: [
-                                'types',
-                                'contextmenu',
-                                'wholerow',
-                                'sort',
-                                'dnd'
-                            ]
-                        }
+                            }
+                        },
+
+                        contextmenu: {
+                            items: menuTree.contextMenu,
+                            'select_node': false
+                        },
+
+                        sort: function (node1, node2) {
+                           if (this.get_node(node2).original.displayName < this.get_node(node1).original.displayName) {
+                               return 1;
+                           }
+
+                           return -1;
+                        },
+
+                        plugins: [
+                            'types',
+                            'contextmenu',
+                            'wholerow',
+                            'sort',
+                            'dnd'
+                        ]
                     });
 
                 $('button[name=CreateMenuItem]').click(function (e) {
                     e.preventDefault();
-                    createModal.open({ menuId: menuId });
+                    createModal.open({menuId: menuId});
                 });
 
                 createModal.onResult(function () {
@@ -300,15 +300,13 @@ $(function () {
                     menuTree.reload();
                 });
 
-                //menuTree.$tree.on('click', '.ou-text .fa-caret-down', function (e) {
-                //    e.preventDefault();
-                //    debugger;
-                //    var id = $(this).closest('.ou-text').attr('data-menuitem-id');
-                //    setTimeout(function () {
-                //        debugger;
-                //        menuTree.$tree.jstree('show_contextmenu', id);
-                //    }, 100);
-                //});
+                menuTree.$tree.on('click', '.ou-text .fa-caret-down', function (e) {
+                   e.preventDefault();
+                   var id = $(this).closest('.ou-text').attr('data-menuitem-id');
+                   setTimeout(function () {
+                       menuTree.$tree.jstree('show_contextmenu', id);
+                   }, 100);
+                });
             });
         },
 
@@ -371,7 +369,7 @@ $(function () {
         $('table>tbody>').find('input[type="checkbox"]').prop("checked", true);
         let selectedItems = $(`input[name="${selectedCheckboxNames}"]:checked`);
         selectedIds = [];
-        for (var i = 0; typeof (selectedItems[i]) != 'undefined'; selectedIds.push(selectedItems[i++].getAttribute('id')));
+        for (var i = 0; typeof (selectedItems[i]) != 'undefined'; selectedIds.push(selectedItems[i++].getAttribute('id'))) ;
     };
 
     const uncheckAndRemoveAll = function () {