New note-section add/remove from left-nav

app/Http/Controllers/NoteController.php

@@ -18,12 +18,18 @@ class NoteController extends Controller
     {
         $pros = Pro::all();
         $noteSections = $note->sections;
-        $noteSectionTemplateIDs = [];
-        foreach ($noteSections as $noteSection) {
-            $noteSectionTemplateIDs[] = $noteSection->sectionTemplate->id;
+        $allSections = SectionTemplate::where('is_active', true)->get();
+        foreach ($allSections as $section) {
+            $section->used = false;
+            foreach ($noteSections as $noteSection) {
+                if($noteSection->sectionTemplate->id === $section->id) {
+                    $section->used = true;
+                    $section->section_uid = $noteSection->uid;
+                    break;
+                }
+            }
         }
-        $sections = SectionTemplate::whereNotIn('id', $noteSectionTemplateIDs)->get();
-        return view('app.patient.note.dashboard', compact('patient', 'note', 'pros', 'sections'));
+        return view('app.patient.note.dashboard', compact('patient', 'note', 'pros', 'allSections'));
     }
 
     public function renderNote($noteUid, Request $request)

app/Models/Note.php

@@ -30,6 +30,8 @@ class Note extends Model
 
     public function sections()
     {
-        return $this->hasMany(Section::class, 'note_id', 'id')->orderBy('position_index', 'asc');
+        return $this->hasMany(Section::class, 'note_id', 'id')
+            ->where('is_active', true)
+            ->orderBy('position_index', 'asc');
     }
 }

resources/views/app/patient/note/dashboard.blade.php

@@ -136,28 +136,6 @@
                     </div>
                     @endif
                 </div>
-                <div class="d-flex">
-                    <div moe>
-                        <a href="" show start class="font-weight-bold">Add Section</a>
-                        <form url="/api/section/create">
-                            <input type="hidden" name="noteUid" value="{{$note->uid}}">
-                            <input type="hidden" name="summaryHtml" value="">
-                            <input type="hidden" name="contentData" value="">
-                            <div class="mb-2">
-                                <select name="sectionTemplateUid" class="form-control form-control-sm">
-                                    <option value="">-- Select Section --</option>
-                                    @foreach ($sections as $section)
-                                        <option value="{{$section->uid}}">{{$section->title}}</option>
-                                    @endforeach
-                                </select>
-                            </div>
-                            <div class="mb-0">
-                                <button class="btn btn-primary btn-sm" submit>Submit</button>
-                                <button class="btn btn-default border btn-sm" cancel>Cancel</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
             </div>
             <div class="ml-auto d-flex align-items-start">
                 <div class="pr-2">
@@ -473,3 +451,89 @@
         })();
     </script>
 @endsection
+
+@section('left-nav-content')
+    <div class="left-nav-content" id="note-sections-app">
+        <div class="note-widget-title px-2 py-1">Note Sections</div>
+        <input type="text" class="d-block w-100 border-0 outline-0 px-2 py-1"
+               v-model="q" placeholder="Filter">
+        <div class="border-top py-1">
+            <div v-for="section in sections"
+                 v-show="section.title.toLowerCase().indexOf(q.toLowerCase()) !== -1">
+                <div class="d-flex pr-1 align-items-center note-widget-item">
+                    <span class="mx-2" v-show="section.used">
+                        <a class="font-12 text-secondary" href="#"
+                           v-on:click.prevent="remove(section.section_uid)">
+                            <i class="fa fa-minus-circle"></i>
+                        </a>
+                    </span>
+                    <span class="mx-2" v-show="!section.used">
+                        <a class="font-12" href="#"
+                           v-on:click.prevent="add(section.uid)">
+                            <i class="fa fa-plus-circle"></i>
+                        </a>
+                    </span>
+                    <span class="font-smaller text-ellipsis c-pointer" :title="section.title">
+                        @{{section.title}}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        (function() {
+            function initSectionsWidget() {
+                var allSections = <?= json_encode($allSections) ?>;
+                new Vue({
+                    el: '#note-sections-app',
+                    delimiters: ['@{{', '}}'],
+                    data: {
+                        q: '',
+                        sections: allSections
+                    },
+                    methods: {
+                        add: function(_uid) {
+                            $.post('/api/section/create', {
+                                noteUid: '{{$note->uid}}',
+                                summaryHtml: '',
+                                contentData: '',
+                                sectionTemplateUid: _uid,
+                            }, function(_data) {
+                                if(_data) {
+                                    if(_data.success) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        toastr.error(_data.message);
+                                    }
+                                }
+                                else {
+                                    toastr.error('Unable to add section!');
+                                }
+                            }, 'json');
+                        },
+                        remove: function(_uid) {
+                            $.post('/api/section/deactivate', {
+                                uid: _uid,
+                                memo: 'Deactivated from note',
+                            }, function(_data) {
+                                if(_data) {
+                                    if(_data.success) {
+                                        fastReload();
+                                    }
+                                    else {
+                                        toastr.error(_data.message);
+                                    }
+                                }
+                                else {
+                                    toastr.error('Unable to remove section!');
+                                }
+                            }, 'json');
+                        }
+                    }
+                });
+            }
+            addMCInitializer('sections-widget', initSectionsWidget);
+        })();
+    </script>
+@endsection

resources/views/layouts/auth.blade.php

@@ -10,7 +10,7 @@
     <!-- Google Font: Source Sans Pro -->
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+    <link rel="stylesheet" href="/fontawesome-free-5.13.1-web/css/all.min.css">
     <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('/css/style.css') }}" rel="stylesheet">
 

resources/views/layouts/patient.blade.php

@@ -89,6 +89,9 @@
                         </li>
                         */ ?>
                     </ul>
+                    <div class="mt-3 mcp-theme-1">
+                        @yield('left-nav-content')
+                    </div>
                 </div>
             </nav>
             <main role="main" class="">

resources/views/layouts/template.blade.php

@@ -17,7 +17,6 @@
             window.mcInitializers[_name] = _func;
         };
         window.runMCInitializers = function() {
-            // run all mcInitializers
             if(!!mcInitializers) {
                 for(var func in mcInitializers) {
                     if(mcInitializers.hasOwnProperty(func)) mcInitializers[func]();
@@ -27,14 +26,14 @@
     </script>
 
     {{-- vue --}}
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="/js/vue.js"></script>
 
     {{-- Quill RTE --}}
-    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+    <link href="/quill/quill.snow.css" rel="stylesheet">
+    <script src="/quill/quill.js"></script>
 
     <!-- <link href="{{ asset('bootstrap-4.5.0/css/bootstrap.css') }}" rel="stylesheet"> -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
+    <link rel="stylesheet" href="/fontawesome-free-5.13.1-web/css/all.min.css">
     <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('/css/style.css') }}" rel="stylesheet">
     <link rel="stylesheet" href="{{asset('/fullcalendar/main.min.css')}}">
@@ -44,13 +43,13 @@
     <!-- Styles -->
 
     <script src="{{ asset('js/app.js') }}" type="application/javascript"></script>
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    <script src="/js/jquery-3.5.1.min.js"></script>
     <script src="{{ asset('fullcalendar/main.min.js') }}" type="application/javascript"></script>
     <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
     <script src="/js/yemi.js?_=4" type="application/javascript"></script>
 
     {{-- med ac --}}
-    <link href='https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.2/autocomplete-lhc.min.css' rel="stylesheet">
+    <link href='/css/autocomplete-lhc.min.css' rel="stylesheet">
     <script src='/js/autocomplete-lhc.js'></script>
 
     @yield('head')