Merge pull request #5 from ALTAMASH80/fix-change-tree-nodes

Added edit option for nodes. After updated changed the DOM element.
ALTAMASH80 · Jun 10, 2024 · afb7cea · afb7cea
2 parents d26b812 + 2488bcc
commit afb7cea
Show file tree

Hide file tree

Showing 8 changed files with 368 additions and 84 deletions.
diff --git a/config/module.config.php b/config/module.config.php
@@ -54,6 +54,16 @@
                             ],
                         ],
                     ],
+                    'update' => [
+                        'type' => Literal::class,
+                        'options' => [
+                            'route' => '/update',
+                            'defaults' => [
+                                'controller' => Controller\IndexController::class,
+                                'action'     => 'update',
+                            ],
+                        ],
+                    ],
                 ],
             ],
         ],

diff --git a/pickletree/pickletree.css b/pickletree/pickletree.css
@@ -164,3 +164,6 @@ ul li a {
     font-size: larger;
     margin: 3px 5px 3px 5px;
 }
+div[id^='div_g_node']:hover{
+    background-color: var(--bs-gray-200);
+}
diff --git a/pickletree/pickletree.js b/pickletree/pickletree.js
@@ -97,9 +97,7 @@ class PickleTree {
                 } else {
                     node.parent = this.getNode(this.drag_target);
                 }
-                console.log(this.dragstartNode.parent.id);
-                console.log(node.old_parent.id);
-                console.log(node.old_parent.id === this.dragstartNode.parent.id);
+
                 if( node.old_parent.id !== this.dragstartNode.parent.id ){
                     //save node in an object array of ids
                     this.changeParentNodes[node.id] = node;
@@ -378,6 +376,12 @@ class PickleTree {
             id: 'node_' + id,
             //node title
             title: 'untitled ' + id,
+            //node element value
+            route: 'route ' + id,
+            //node element value
+            uri: 'uri ' + id,
+            //node element value
+            slug: 'uri ' + id,
             //node html elements
             elements: [],
             //node parent element
@@ -419,7 +423,6 @@ class PickleTree {
         //logged
         this.log('Node is created (' + node.id + ')');
         if (node.id.indexOf('lrphpt') > 0 ){
-            console.log('new node id is ' + node.id);
             this.nodeCreatedAtRuntime[node.id] = node;
         }
         //node is returned
@@ -465,6 +468,28 @@ class PickleTree {
         return node;
     }
 
+    /**
+     * 
+     * @param {JSON} jsonValues
+     * @returns {type} bool
+     */
+    updateNodeValues(jsonValues){
+        let updated = false;
+        try{
+            document.getElementById('a_dr_node_' + jsonValues.id).setAttribute('drag-title', jsonValues.title);
+            let ele = document.getElementById('a_toggle_node_' + jsonValues.id);
+            let changeText = ele.innerHTML.replace(this.nodeList[jsonValues.id].title, jsonValues.title);
+            ele.innerHTML = changeText;
+            this.nodeList[jsonValues.id].title = jsonValues.title;
+            this.nodeList[jsonValues.id].uri = jsonValues.uri;
+            this.nodeList[jsonValues.id].route = jsonValues.route_name;
+            updated = true;
+        }catch(e){
+            updated = false;
+        }
+        return updated;
+    }
+
     /**
      * 
      * @param {object} node object for creating html element
@@ -637,22 +662,15 @@ class PickleTree {
                     let next    = li.nextElementSibling;               // <-- Code changed
                     if (next != null) next = next.nextElementSibling;  // <-- Code inserted
                     let prev    = li.previousElementSibling;
-                    //console.log(clicked.classList.contains('fa-level-up'));
                     let node = this.getNode(e.target.parentNode.parentNode.parentNode.id.split('_')[1]);
-                    console.log(node);
+
                     if (clicked.classList.contains('fa-level-down')) {
                         ul.insertBefore(li, next);
                         this.saveNodeChanges(node, li, 'move-down');
                     } else if (clicked.classList.contains('fa-level-up')) {
                         ul.insertBefore(li, prev);
                         this.saveNodeChanges(node, li, 'move-up');
-                    } else if (clicked.classList.contains('fa-trash')) {
-                        li.remove();
-                        this.saveNodeChanges(node, li, 'delete');
-                    } else {
-                        this.saveNodeChanges(node, li, 'edit');
                     }
-                    //console.log(e.target.parentNode.parentNode.parentNode.id);
                 });
             }
         }
@@ -665,8 +683,6 @@ class PickleTree {
         }else if(action === 'move-up'){
             node.sibling = 'moveup_' + element.nextElementSibling.id;
             this.moveNodes[node.id] = node;
-        }else if(action === 'delete'){
-            this.deletedNodes[node.id] = node;
         }
     }
 
@@ -698,6 +714,9 @@ class PickleTree {
                     this.createNode({
                         n_value: list[i].n_id,
                         n_title: list[i].n_title,
+                        n_route: list[i].n_route,
+                        n_uri: list[i].n_uri,
+                        n_slug: list[i].n_slug,
                         n_id: list[i].n_id,
                         n_elements: list[i].n_elements,
                         n_parent: this.getNode(list[i].n_parentid),

diff --git a/src/Controller/IndexController.php b/src/Controller/IndexController.php
@@ -60,4 +60,37 @@ public function menutreeAction(){
         }
         return new ViewModel(['treeArray' => $arr, 'rootNode' => $dummyParentNode]);
     }
-}
+
+    public function updateAction(){
+        $request = $this->getRequest();
+        $data = ['status' => '404', 'message' => 'Failure'];
+        $viewModel = new \Laminas\View\Model\JsonModel();
+        if($request->isPost() && $request->isXmlHttpRequest()){
+            $repo = $this->entityManager->getRepository(Menu::class);
+            $postDataArr = $request->getPost()->toArray();
+            $return = null;
+
+            $return = $repo->editPostedNode($postDataArr);
+            if($return){
+                $uow = $this->entityManager->getUnitOfWork();
+                $return = $uow->getOriginalEntityData($return);
+
+                $arrReturn = [
+                    'id' => $postDataArr['id'],
+                    'title' => $return['label'],
+                    'route_name' => $return['route'],
+                    'uri' => $return['uri'],
+                    'resource' => $return['resource'],
+                    'slug' => $return['slug'],
+                ];
+                unset($return);
+                $data['status'] = 200; 
+                $data['message'] = 'Success';
+                $data['data'] = $arrReturn;
+                $data['postedData']  = $postDataArr;
+            }
+        }
+
+        return $viewModel->setVariables($data);
+    }
+}
diff --git a/src/Entity/Menu.php b/src/Entity/Menu.php
@@ -14,6 +14,7 @@
  * @ORM\Entity(repositoryClass=\LRPHPT\MenuTree\Repository\MenuRepository::class)
  */
 #[Gedmo\Tree(type: 'nested')]
+#[Gedmo\Loggable()]
 #[ORM\Table(name: 'menu')]
 #[ORM\Entity(repositoryClass: \LRPHPT\MenuTree\Repository\MenuRepository::class)]
 class Menu
@@ -53,6 +54,14 @@ class Menu
      */
     #[ORM\Column(name: 'resource', type: Types::STRING, length: 255, nullable:true)]
     private $resource;
+
+    /**
+     * @var string|null
+     *
+     * @ORM\Column(name="permission", type="string", length=255, nullable=true)
+     */
+    #[ORM\Column(name: 'permission', type: Types::STRING, length: 255, nullable:true)]
+    private $permission;
 
     /**
      * @var string|null
@@ -99,6 +108,8 @@ class Menu
      * @Gedmo\Slug(fields={"label"}, updatable=true)
      * @ORM\Column(type="string", length=255)
      */
+    #[Gedmo\Slug(fields:['label'], updateable: true)]
+    #[ORM\Column(name: 'slug', type: Types::STRING, length: 255)]
     private $slug;
 
     /**

diff --git a/src/Module.php b/src/Module.php
@@ -8,7 +8,6 @@
 namespace LRPHPT\MenuTree;
 
 class Module{
-
     public function getConfig() : array{
         return include __DIR__ . '/../config/module.config.php';
     }