My text shortcuts page overhaul (wip)

app/Http/Controllers/PracticeManagementController.php

@@ -337,7 +337,7 @@ class PracticeManagementController extends Controller
     public function myTextShortcuts(Request $request)
     {
 
-        $myTextShortcuts = DB::table('pro_text_shortcut')
+        $personalShortcuts = DB::table('pro_text_shortcut')
             ->leftJoin('pro', 'pro_text_shortcut.pro_id', '=', 'pro.id')
             ->select(
                 'pro_text_shortcut.uid',
@@ -349,15 +349,27 @@ class PracticeManagementController extends Controller
             ->where('pro_text_shortcut.is_removed', false);
 
         if($this->performer()->pro->pro_type !== 'ADMIN') {
-            $myTextShortcuts = $myTextShortcuts->where('pro_id', $this->performer()->pro_id);
+            $personalShortcuts = $personalShortcuts->where('pro_id', $this->performer()->pro_id);
         }
 
-        $myTextShortcuts = $myTextShortcuts
+        $personalShortcuts = $personalShortcuts
             ->orderBy('pro.name_last')
             ->orderBy('pro.name_first')
+            ->orderBy('pro_text_shortcut.shortcut')
             ->get();
 
-        return view('app.practice-management.my-text-shortcuts', compact('myTextShortcuts'));
+        $globalTextShortcuts = DB::table('pro_text_shortcut')
+            ->select(
+                'pro_text_shortcut.uid',
+                'pro_text_shortcut.shortcut',
+                'pro_text_shortcut.text'
+            )
+            ->whereNull('pro_id')
+            ->where('pro_text_shortcut.is_removed', false)
+            ->orderBy('pro_text_shortcut.shortcut')
+            ->get();
+
+        return view('app.practice-management.my-text-shortcuts', compact('personalShortcuts', 'globalTextShortcuts'));
     }
 
     public function myFavorites(Request $request, $filter = 'all')

resources/views/app/practice-management/my-text-shortcuts.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="p-3 mcp-theme-1">
+<div class="p-3 mcp-theme-1">
     <div class="card">
 
         <div class="card-header px-3 py-2 d-flex align-items-center">
@@ -10,102 +10,205 @@
                 <i class="fas fa-user"></i>
                 Text Shortcuts
             </strong>
-            <span class="mx-2 text-secondary">|</span>
-            <div moe wide class="mr-2">
-                <a start show>
-                    Add
-                </a>
-                <form url="/api/proTextShortcut/create">
-                    @if($performer->pro->pro_type !== 'ADMIN')
-                        <input type="hidden" name="proUid" value="{{$pro->uid}}">
-                    @else
-                        <p><b>Add Global Shortcut</b></p>
-                    @endif
-                    <div class="mb-2">
-                        <input type="text" class="form-control form-control-sm" name="shortcut"
-                               placeholder="Shortcut *">
-                    </div>
-                    <div class="mb-2">
-                        <textarea type="text"
-                                  rows="10" class="form-control form-control-sm" name="text"
-                                  placeholder="Content *"></textarea>
-                    </div>
-                    <div class="form-group m-0">
-                        <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
-                        <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
-                    </div>
-                </form>
-            </div>
         </div>
-        <div class="card-body p-0">
-            <table class="table table-condensed table-hover p-0 m-0">
-                <thead class="bg-light">
-                <tr>
-                    <th class="px-3 border-0">Pro</th>
-                    <th class="border-0 width-200px">Shortcut</th>
-                    <th class="border-0">Text</th>
-                    <th class="border-0 width-200px">&nbsp;</th>
-                </tr>
-                </thead>
-                <tbody>
-                @foreach($myTextShortcuts as $textShortcut)
-                    <tr>
-                        <td class="px-3 text-nowrap">
-                            @if($textShortcut->name_first || $textShortcut->name_last)
-                                {{ $textShortcut->name_first ? $textShortcut->name_first : '' }}
-                                {{ $textShortcut->name_last ? $textShortcut->name_last : '' }}
-                            @else
-                                <span class="text-secondary">(global)</span>
-                            @endif
-                        </td>
-                        <td>{{ $textShortcut->shortcut }}</td>
-                        <td><pre class="max-width-700px my-0" style="white-space: break-spaces;">{{ $textShortcut->text }}</pre></td>
-                        <td>
-                            <div class="d-flex align-items-center">
-                                <div moe large relative class="mr-3">
-                                    <a start show>
-                                        <i class="fa fa-pencil-alt"></i>
-                                    </a>
-                                    <form url="/api/proTextShortcut/update" right>
-                                        <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
-                                        <div class="mb-2">
-                                            <input type="text" class="form-control form-control-sm" name="shortcut"
-                                                   value="{{$textShortcut->shortcut}}"
-                                                   placeholder="Shortcut *">
-                                        </div>
-                                        <div class="mb-2">
-                                            <textarea type="text" rows="10" class="form-control form-control-sm" name="text"
-                                                      placeholder="Content *">{{$textShortcut->text}}</textarea>
+        <div class="card-body p-3">
+
+            <div class="d-flex align-items-baseline" tab-links="">
+                <a class="{{$performer->pro->pro_type !== 'ADMIN' ? 'tab-link-active' : ''}}" href="#" tab-link="personal">My Text Shortcuts</a>
+                <a class="{{$performer->pro->pro_type === 'ADMIN' ? 'tab-link-active' : ''}}" href="#" tab-link="global">Global Text Shortcuts</a>
+            </div>
+
+            <!-- personal shortcuts -->
+            <div tab-key="personal" class="cm-tab {{$performer->pro->pro_type === 'ADMIN' ? 'd-none' : ''}}">
+                <div class="d-flex align-items-baseline">
+                    <div class="py-3 font-weight-bold font-size-14">My Text Shortcuts</div>
+                    <span class="mx-2 text-secondary">|</span>
+                    <div moe wide class="mr-2">
+                        <a start show>Add</a>
+                        <form url="/api/proTextShortcut/create">
+                            <input type="hidden" name="proUid" value="{{$pro->uid}}">
+                            <p><b>Add Personal Shortcut</b></p>
+                            <div class="mb-2">
+                                <input type="text" class="form-control form-control-sm" name="shortcut" placeholder="Shortcut *" required>
+                            </div>
+                            <div class="mb-2">
+                                <textarea type="text" rows="10" class="form-control form-control-sm" name="text" placeholder="Content *" required></textarea>
+                            </div>
+                            <div class="form-group m-0">
+                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
+                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                @if($personalShortcuts && count($personalShortcuts))
+                    <table class="table table-condensed table-hover table-bordered p-0 m-0">
+                        <thead class="bg-light">
+                        <tr>
+                            <th class="px-3 border-0">Pro</th>
+                            <th class="border-0 width-200px">Shortcut</th>
+                            <th class="border-0">Text</th>
+                            <th class="border-0 width-200px">&nbsp;</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        @foreach($personalShortcuts as $textShortcut)
+                            <tr>
+                                <td class="px-3 text-nowrap">
+                                    @if($textShortcut->name_first || $textShortcut->name_last)
+                                        {{ $textShortcut->name_first ? $textShortcut->name_first : '' }}
+                                        {{ $textShortcut->name_last ? $textShortcut->name_last : '' }}
+                                    @else
+                                        <span class="text-secondary">(global)</span>
+                                    @endif
+                                </td>
+                                <td>{{ $textShortcut->shortcut }}</td>
+                                <td><pre class="max-width-700px my-0" style="white-space: break-spaces;">{{ $textShortcut->text }}</pre></td>
+                                <td>
+                                    <div class="d-flex align-items-center">
+                                        <div moe large relative class="mr-3">
+                                            <a start show>
+                                                <i class="fa fa-pencil-alt"></i>
+                                            </a>
+                                            <form url="/api/proTextShortcut/update" right>
+                                                <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
+                                                <div class="mb-2">
+                                                    <input type="text" class="form-control form-control-sm" name="shortcut"
+                                                           value="{{$textShortcut->shortcut}}"
+                                                           placeholder="Shortcut *">
+                                                </div>
+                                                <div class="mb-2">
+                                                <textarea type="text" rows="10" class="form-control form-control-sm" name="text"
+                                                          placeholder="Content *">{{$textShortcut->text}}</textarea>
+                                                </div>
+                                                <div class="form-group m-0">
+                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
+                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
+                                                </div>
+                                            </form>
                                         </div>
-                                        <div class="form-group m-0">
-                                            <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
-                                            <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
+                                        <div moe relative wide class="mr-2">
+                                            <a start show class="text-danger">
+                                                <i class="fa fa-trash-alt"></i>
+                                            </a>
+                                            <form url="/api/proTextShortcut/remove" right>
+                                                <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
+                                                <p>
+                                                    Are you sure you want to remove this shortcut?
+                                                </p>
+                                                <div class="form-group m-0">
+                                                    <button submit class="btn btn-danger btn-sm mr-2">Yes</button>
+                                                    <button cancel class="btn btn-default border btn-sm mr-2">No</button>
+                                                </div>
+                                            </form>
                                         </div>
-                                    </form>
+                                    </div>
+                                </td>
+                            </tr>
+                        @endforeach
+                        </tbody>
+                    </table>
+                @else
+                    <div class="px-3 py-3 text-secondary">No personal shortcuts</div>
+                @endif
+            </div>
+
+            <!-- global shortcuts -->
+            <div tab-key="global" class="cm-tab {{$performer->pro->pro_type !== 'ADMIN' ? 'd-none' : ''}}">
+                <div class="d-flex align-items-baseline">
+                    <div class="py-3 font-weight-bold font-size-14">Global Text Shortcuts</div>
+                    @if($performer->pro->pro_type === 'ADMIN')
+                        <span class="mx-2 text-secondary">|</span>
+                        <div moe wide class="mr-2">
+                            <a start show>Add</a>
+                            <form url="/api/proTextShortcut/create">
+                                <p><b>Add Global Shortcut</b></p>
+                                <div class="mb-2">
+                                    <input type="text" class="form-control form-control-sm" name="shortcut" placeholder="Shortcut *" required>
                                 </div>
-                                <div moe relative wide class="mr-2">
-                                    <a start show class="text-danger">
-                                        <i class="fa fa-trash-alt"></i>
-                                    </a>
-                                    <form url="/api/proTextShortcut/remove" right>
-                                        <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
-                                        <p>
-                                            Are you sure you want to remove this shortcut?
-                                        </p>
-                                        <div class="form-group m-0">
-                                            <button submit class="btn btn-danger btn-sm mr-2">Yes</button>
-                                            <button cancel class="btn btn-default border btn-sm mr-2">No</button>
-                                        </div>
-                                    </form>
+                                <div class="mb-2">
+                                    <textarea type="text" rows="10" class="form-control form-control-sm" name="text" placeholder="Content *" required></textarea>
                                 </div>
-                            </div>
-                        </td>
-                    </tr>
-                @endforeach
-                </tbody>
-            </table>
+                                <div class="form-group m-0">
+                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
+                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
+                                </div>
+                            </form>
+                        </div>
+                    @endif
+                </div>
+                @if($globalTextShortcuts && count($globalTextShortcuts))
+                    <table class="table table-condensed table-hover table-bordered p-0 m-0">
+                        <thead class="bg-light">
+                        <tr>
+                            <th class="px-3 border-0">Pro</th>
+                            <th class="border-0 width-200px">Shortcut</th>
+                            <th class="border-0">Text</th>
+                            @if($performer->pro->pro_type === 'ADMIN')
+                                <th class="border-0 width-200px">&nbsp;</th>
+                            @endif
+                        </tr>
+                        </thead>
+                        <tbody>
+                        @foreach($globalTextShortcuts as $textShortcut)
+                            <tr>
+                                <td class="px-3 text-nowrap">
+                                    <span class="text-secondary">(global)</span>
+                                </td>
+                                <td>{{ $textShortcut->shortcut }}</td>
+                                <td><pre class="max-width-700px my-0" style="white-space: break-spaces;">{{ $textShortcut->text }}</pre></td>
+                                @if($performer->pro->pro_type === 'ADMIN')
+                                    <td>
+                                        <div class="d-flex align-items-center">
+                                            <div moe large relative class="mr-3">
+                                                <a start show>
+                                                    <i class="fa fa-pencil-alt"></i>
+                                                </a>
+                                                <form url="/api/proTextShortcut/update" right>
+                                                    <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
+                                                    <div class="mb-2">
+                                                        <input type="text" class="form-control form-control-sm" name="shortcut"
+                                                               value="{{$textShortcut->shortcut}}"
+                                                               placeholder="Shortcut *">
+                                                    </div>
+                                                    <div class="mb-2">
+                                                    <textarea type="text" rows="10" class="form-control form-control-sm" name="text"
+                                                              placeholder="Content *">{{$textShortcut->text}}</textarea>
+                                                    </div>
+                                                    <div class="form-group m-0">
+                                                        <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
+                                                        <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                            <div moe relative wide class="mr-2">
+                                                <a start show class="text-danger">
+                                                    <i class="fa fa-trash-alt"></i>
+                                                </a>
+                                                <form url="/api/proTextShortcut/remove" right>
+                                                    <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
+                                                    <p>
+                                                        Are you sure you want to remove this shortcut?
+                                                    </p>
+                                                    <div class="form-group m-0">
+                                                        <button submit class="btn btn-danger btn-sm mr-2">Yes</button>
+                                                        <button cancel class="btn btn-default border btn-sm mr-2">No</button>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </td>
+                                @endif
+                            </tr>
+                        @endforeach
+                        </tbody>
+                    </table>
+                @else
+                    <div class="px-3 py-3 text-secondary">No global shortcuts</div>
+                @endif
+            </div>
         </div>
     </div>
-    </div>
+</div>
 
 @endsection