Stat tree edit (wip)

app/Http/Controllers/StatTreeController.php

@@ -61,7 +61,8 @@ class StatTreeController extends Controller
     }
 
     public function edit(Request $request, StatTree $statTree) {
-        return view('app.stat-tree.stat-trees.sub.edit', compact('statTree'));
+        $clauses = Clause::where('model', $statTree->model)->orderBy('position_index')->get();
+        return view('app.stat-tree.stat-trees.sub.edit', compact('statTree', 'clauses'));
     }
 
     public function delete(Request $request){

public/css/style.css

@@ -2760,4 +2760,18 @@ table.stag-compact-grid>tbody>tr>td [if-grid-view] {
 }
 .stat-tree-view>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node+.stat-tree-children>.stat-tree-node {
     padding-left: 9.2rem;
+}
+
+/* jstree overrides */
+body .vakata-context li>a {
+    padding: 1px 5px;
+    padding-right: 10px;
+    line-height: unset;
+    font-size: 13px
+}
+body .vakata-context li>a>i {
+    display: none;
+}
+body .vakata-context li>a .vakata-contextmenu-sep {
+    display: none;
 }

resources/views/app/stat-tree/clauses-edit.blade.php

@@ -1,6 +1,3 @@
-<?php
-$clauses = \App\Models\Clause::orderBy('position_index')->get();
-?>
 <div class="d-flex align-items-baseline mb-2">
     <h6 class="font-weight-bold m-0">Available Clauses</h6>
     <div moe relative wide class="ml-3">
@@ -38,11 +35,23 @@ $clauses = \App\Models\Clause::orderBy('position_index')->get();
     <ul>
     @foreach($clauses as $clause)
         <li class="jstree-open">
-            <div class="d-inline-flex align-items-baseline clause">
+            <div class="d-inline-flex align-items-baseline clause" data-clause-id="{{$clause->id}}">
                 <span class="flex-grow-1">{{$clause->label}}</span>
-                <div moe relative wide class="ml-3 mr-2">
+            </div>
+        </li>
+    @endforeach
+    </ul>
+</div>
+
+
+<div class="border mb-3 p-2 position-absolute" style="left: -10000px; top: -10000px;">
+    <ul>
+        @foreach($clauses as $clause)
+            <div class="d-inline-flex align-items-baseline">
+                <span class="flex-grow-1">{{$clause->label}}</span>
+                <div moe center relative wide class="ml-3 mr-2 edit-clause-moe-{{$clause->id}}">
                     <a href="#" start show><i class="text-sm fa fa-edit on-hover-opaque"></i></a>
-                    <form url="{{ route("practice-management.api.clause.update") }}" class="frm-clause-add-edit">
+                    <form url="{{ route("practice-management.api.clause.update") }}" class="frm-clause-add-edit" center>
                         @csrf
                         <input type="hidden" name="uid" value="{{$clause->uid}}">
                         <div class="mb-2">
@@ -71,9 +80,9 @@ $clauses = \App\Models\Clause::orderBy('position_index')->get();
                         </div>
                     </form>
                 </div>
-                <div moe relative>
+                <div moe relative center class="remove-clause-moe-{{$clause->id}}">
                     <a href="#" start show><i class="text-sm fa fa-trash-alt on-hover-opaque text-danger"></i></a>
-                    <form url="{{ route("practice-management.api.clause.remove") }}">
+                    <form url="{{ route("practice-management.api.clause.remove") }}" center>
                         @csrf
                         <input type="hidden" name="uid" value="{{$clause->uid}}">
                         <p>Are you sure?</p>
@@ -84,8 +93,6 @@ $clauses = \App\Models\Clause::orderBy('position_index')->get();
                     </form>
                 </div>
             </div>
-        </li>
-    @endforeach
+        @endforeach
     </ul>
 </div>
-

resources/views/app/stat-tree/stat-trees/list.blade.php

@@ -6,12 +6,33 @@
             <div class="col-12">
                 <div class="card">
                     <div class="card-header">
-                        <div class="d-flex align-items-center justify-content-between">
+                        <div class="d-flex align-items-baseline">
                             <div>
                                 <h6 class="font-weight-bold mb-0"><i class="fas fa-network-wired"></i> Stat Trees</h6>
                             </div>
-                            <div>
-                                <a href="{{ route('practice-management.statTrees.createPage') }}" class="btn btn-sm btn-primary text-white"><i class="fas fa-folder-plus"></i> Create Tree</a>
+                            <div moe relative wide class="ml-auto">
+                                <a href="#" start show class="btn btn-sm btn-primary text-white">Create Tree</a>
+                                <form url="{{ route("practice-management.api.statTree.create") }}"
+                                      right
+                                      redir="/practice-management/stat-trees/view/[data]/edit">
+                                    @csrf
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm mb-1">Name *</label>
+                                        <input type="text" class="form-control form-control-sm" name="name" autofocus required>
+                                    </div>
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm mb-1">Model *</label>
+                                        <input type="text" class="form-control form-control-sm" name="model" required>
+                                    </div>
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm mb-1">Slug *</label>
+                                        <input type="text" class="form-control form-control-sm" name="slug" required>
+                                    </div>
+                                    <div class="d-flex align-items-center">
+                                        <button class="btn btn-sm btn-primary mr-2" type="button" submit>Save</button>
+                                        <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
+                                    </div>
+                                </form>
                             </div>
                         </div>
                     </div>

resources/views/app/stat-tree/stat-trees/sub/edit.blade.php

@@ -4,12 +4,12 @@
 
     <div id="statTreeEdit">
         <div id="statTreeView" class="row">
-            @if(count($statTree->lines))
+            @if(1 || count($statTree->lines))
                 <div class="col-4 pr-0">
                     @include('app.stat-tree.clauses-edit')
                 </div>
                 <div class="col-8">
-                    @include('app.stat-tree.tree-edit-v2', ['slug' => 'rm-tree'])
+                    @include('app.stat-tree.tree-edit-v2', ['slug' => $statTree->slug])
                 </div>
             @endif
 
@@ -88,7 +88,7 @@
                 }
 
                 $('#stat-tree-view-{{$statTree->id}}')
-                    .on('changed.jstree', generateTextRepresentation)
+                    //.on('changed.jstree', generateTextRepresentation)
                     .on('move_node.jstree', generateTextRepresentation)
                     .on('copy_node.jstree', generateTextRepresentation)
                     .jstree({
@@ -100,9 +100,30 @@
                         "dnd": {
                             "use_html5": true
                         },
+                        "contextmenu": {
+                            show_at_node: false,
+                            items: function ($node) {
+                                return {
+                                    "cols": {
+                                        "label": "<span class='text-sm'>Report Columns</span>",
+                                        "action": function (obj) {
+
+                                        },
+                                    },
+                                    "remove": {
+                                        "label": "<span class='text-sm'>Remove</span>",
+                                        "action": function (obj) {
+                                            let id = $(obj.reference).find('>div.stat-tree-line').attr('data-line-id');
+                                            $('.remove-line-moe-' + id).find('a[start]').trigger('click');
+                                        }
+                                    }
+                                }
+                            },
+                        },
                         "plugins": [
                             "wholerow",
-                            "dnd"
+                            "dnd",
+                            "contextmenu"
                         ]
                     });
 
@@ -118,20 +139,42 @@
                         "dnd": {
                             "use_html5": true
                         },
+                        "contextmenu": {
+                            show_at_node: false,
+                            items: function ($node) {
+                                return {
+                                    "edit": {
+                                        "label": "<span class='text-sm'>Edit</span>",
+                                        "action": function (obj) {
+                                            let id = $(obj.reference).find('>div.clause').attr('data-clause-id');
+                                            $('.edit-clause-moe-' + id).find('a[start]').trigger('click');
+                                        }
+                                    },
+                                    "remove": {
+                                        "label": "<span class='text-sm'>Remove</span>",
+                                        "action": function (obj) {
+                                            let id = $(obj.reference).find('>div.clause').attr('data-clause-id');
+                                            $('.remove-clause-moe-' + id).find('a[start]').trigger('click');
+                                        }
+                                    }
+                                }
+                            },
+                        },
                         "plugins": [
                             "wholerow",
-                            "dnd"
+                            "dnd",
+                            "contextmenu"
                         ]
                     });
 
-                initMoes();
-
                 $('#btn-save-tree')
                     .off('click')
                     .on('click', function() {
                         saveStatTree();
                         return false;
                     });
+
+                initMoes();
             }
             addMCInitializer('stat-tree-edit-page', init, '#statTreeEdit')
         }).call(window);

resources/views/app/stat-tree/tree-edit-v2.blade.php

@@ -4,21 +4,9 @@ if (!function_exists('renderStatTreeLineNodeEdit')) {
     {
         ?>
         <li class="jstree-open">
-        <div class="d-inline-flex align-items-baseline stat-tree-line">
+        <div class="d-inline-flex align-items-baseline stat-tree-line" data-line-id="{{$line->id}}">
             <span>{{$line->displayLabel()}}</span>
             <span class="ml-2 text-secondary">({{(is_null($line->last_refresh_count) ? '-' : $line->last_refresh_count)}})</span>
-            <div moe relative wide class="ml-3 mr-2">
-                <a href="#" start show><i class="text-sm fa fa-trash-alt on-hover-opaque text-danger"></i></a>
-                <form url="#">Foobar</form>
-            </div>
-            <div moe relative wide class="mr-2">
-                <a href="#" start show class="text-sm">Cols</a>
-                <form url="#">Foobar</form>
-            </div>
-            <div moe relative wide>
-                <a href="#" start show class="text-sm">+Child</a>
-                <form url="#">Move</form>
-            </div>
         </div>
         <?php
             if (count($line->children)) {
@@ -33,6 +21,35 @@ if (!function_exists('renderStatTreeLineNodeEdit')) {
         <?php
     }
 }
+if (!function_exists('renderStatTreeLineNodeEdit_Moes')) {
+    function renderStatTreeLineNodeEdit_Moes($line)
+    {
+        ?>
+        <div class="d-flex align-items-baseline stat-tree-line">
+            <div moe relative center class="remove-line-moe-{{$line->id}}">
+                <a href="#" start show><i class="text-sm fa fa-trash-alt on-hover-opaque text-danger"></i></a>
+                <form url="{{ route("practice-management.api.statTreeLine.remove") }}" center>
+                    @csrf
+                    <input type="hidden" name="uid" value="{{$line->uid}}">
+                    <p>Are you sure?</p>
+                    <div class="d-flex align-items-center">
+                        <button class="btn btn-sm btn-danger mr-2" type="button" submit>Remove</button>
+                        <button class="btn btn-sm btn-default mr-2 border" type="button" cancel>Cancel</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <?php
+            if (count($line->children)) {
+                foreach ($line->children as $child) {
+                    renderStatTreeLineNodeEdit_Moes($child);
+                }
+            }
+        ?>
+        </li>
+        <?php
+    }
+}
 $statTree = \App\Models\StatTree::where('slug', $slug)->first();
 ?>
 @if(@$statTree)
@@ -57,4 +74,11 @@ $statTree = \App\Models\StatTree::where('slug', $slug)->first();
         @endforeach
         </ul>
     </div>
+    <div class="border mb-3 p-2 position-absolute" style="left: -10000px; top: -10000px;">
+    @foreach($statTree->lines as $line)
+        @if(!$line->parent_stat_tree_line_id)
+            <?php renderStatTreeLineNodeEdit_Moes($line); ?>
+        @endif
+    @endforeach
+    </div>
 @endif