RTM protocol builder drag sort

config/app.php

@@ -65,7 +65,7 @@ return [
 
     'hrm2_url' => env('HRM2_URL'),
 
-    'asset_version' => 106,
+    'asset_version' => 107,
 
 
     'temp_dir' => env('TEMP_DIR'),

public/css/style.css

@@ -3749,3 +3749,6 @@ table.v-top th {
     height: 20px !important;
     padding-left: 3px;
 }
+.mcp-theme-1 .sort-handle {
+    cursor: move;
+}

resources/views/app/patient/rtm.blade.php

@@ -1,5 +1,7 @@
 @extends ('layouts.patient')
 @section('inner-content')
+    <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
     <div class="">
         <div class="d-flex align-items-baseline">
             <h4 class="font-weight-bold m-0 font-size-16" id="vitals-settings">Remote Therapeutic Monitoring</h4>

resources/views/app/patient/rtm/protocol-builder.blade.php

@@ -108,24 +108,30 @@ if($patient->rtm_msk_protocol_detail_json) {
     </div>
     <div v-if="!protocol.activities || !protocol.activities.length" class="text-secondary min-height-300px">No exercises defined yet!</div>
     <div v-else class="min-height-300px">
-        <div v-for="(activity, activityIndex) in protocol.activities">
-            <div class="d-flex align-items-baseline p-2 border mb-2">
-                <img v-if="activity.image" :src="activity.image" :alt="activity.name" class="image-w90px mr-2 align-self-start">
-                <div class="flex-grow-1">
-                    <div class="font-weight-bold">@{{activity.name}}</div>
-                    <div class="d-flex align-items-baseline mt-2">
-                        <div v-for="(prop, propIndex) in activity.props" class="d-inline-flex align-items-end mr-3">
-                            <label class="d-inline-flex align-items-end m-0">
-                                <input type="checkbox" v-model="activity.props[propIndex].index" class="align-self-end mb-1">
-                                <span class="ml-2">@{{activity.props[propIndex].name}}</span>
-                            </label>
-                            <input type="text" class="form-control form-control-sm min-width-unset width-70px ml-2 rtm-prop-input" v-model="activity.props[propIndex].value">
+
+        <draggable v-model="protocol.activities" group="activities" @start="drag=true" @end="drag=false" handle=".sort-handle">
+            <div v-for="(activity, activityIndex) in protocol.activities" :key="activity.name">
+                <div class="d-flex align-items-baseline p-2 border mb-2">
+                    <span class="sort-handle text-secondary mr-2 c-pointer px-1 bg-light"><i class="fa fa-sort"></i></span>
+                    <img v-if="activity.image" :src="activity.image" :alt="activity.name" class="image-w90px mr-2 align-self-start">
+                    <div class="flex-grow-1">
+                        <div class="d-flex align-items-baseline">
+                            <div class="font-weight-bold">@{{activity.name}}</div>
+                            <a href="#" class="text-danger on-hover-opaque ml-auto" v-on:click.prevent="protocol.activities.splice(activityIndex, 1)">Remove</a>
+                        </div>
+                        <div class="d-flex align-items-baseline mt-2">
+                            <div v-for="(prop, propIndex) in activity.props" class="d-inline-flex align-items-end mr-3">
+                                <label class="d-inline-flex align-items-end m-0">
+                                    <input type="checkbox" v-model="activity.props[propIndex].index" class="align-self-end mb-1">
+                                    <span class="ml-2">@{{activity.props[propIndex].name}}</span>
+                                </label>
+                                <input type="text" class="form-control form-control-sm min-width-unset width-70px ml-2 rtm-prop-input" v-model="activity.props[propIndex].value">
+                            </div>
                         </div>
                     </div>
                 </div>
-                <a href="#" class="text-danger on-hover-opaque" v-on:click.prevent="protocol.activities.splice(activityIndex, 1)">Remove</a>
             </div>
-        </div>
+        </draggable>
     </div>
     <div class="d-flex align-items-baseline my-3">
         <button class="btn btn-sm btn-primary font-weight-bold" v-on:click.prevent="saveProtocol()">Save</button>