Visit UI - goals - category-specific help-text

resources/views/app/patient/segment-templates/intake_goals/edit.blade.php

@@ -103,7 +103,7 @@ $goals = Point::getIntakePointsOfCategory($patient, 'GOAL', $note);
 
     <div visit-moe class="mt-1">
         <a href="#" start show class="btn btn-sm btn btn-outline-primary">+ Add goal patient is ALREADY having, prior to this visit</a>
-        <form url="/api/visitPoint/addTopLevelOnIntake" class="mcp-theme-1">
+        <form url="/api/visitPoint/addTopLevelOnIntake" class="mcp-theme-1 max-width-500px min-width-500px">
             <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
             <input type="hidden" name="category" value="GOAL">
             <input type="hidden" name="data">
@@ -123,6 +123,65 @@ $goals = Point::getIntakePointsOfCategory($patient, 'GOAL', $note);
                     <option value="OTHER">OTHER</option>
                 </select>
             </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="NUTRITION">
+                <div class="mb-1">Specific - What specific food would you like to add/change?</div>
+                <div class="mb-1">Measurable - How much or how many will you add or change?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you do? (improvement over perfection)</div>
+                <div class="mb-2">Time-Connected - How often or for how long will you make this change?</div>
+                <div class="font-italic"><b>Example:</b> "I will add 1 cup of berries to breakfast and a small apple or orange as an afternoon snack at least five days this week."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="ACTIVITY">
+                <div class="mb-1">Specific - What specific activity would you like to add/change?</div>
+                <div class="mb-1">Measurable - How much activity, how many sessions?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you actually do? (know your limits, start small, build)</div>
+                <div class="mb-2">Time-Connected - How frequent or how long will you do the activity?</div>
+                <div class="font-italic"><b>Example:</b> "I will walk with a friend or family member for at least 20 minutes after dinner, every weekday for the next two months."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="SLEEP">
+                <div class="mb-1">Specific - What are you going to do to improve your sleep quality/quantity?</div>
+                <div class="mb-1">Measurable - How much time, how many sessions?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you actually do? (improvement over perfection)</div>
+                <div class="mb-2">Time-Connected - How frequent? How long will you commit?</div>
+                <div class="font-italic"><b>Example:</b> "I will begin a new bedtime routine of shutting off the television and instead, read a book for at least 30 minutes before bed, four nights this week."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="SOCIAL CONNECTION">
+                <div class="mb-1">Specific - What are you going to do to improve feelings of connectedness?</div>
+                <div class="mb-1">Measurable - How much time, how many sessions?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you actually do? (improvement over perfection)</div>
+                <div class="mb-2">Time-Connected - How frequent? How long will you commit?</div>
+                <div class="font-italic"><b>Example:</b> "I will increase my feeling of social connectedness by joining a group fitness class that meets for an hour, three nights of the week."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="STRESS REDUCTION">
+                <div class="mb-1">Specific - What are you going to do to manage your stress?</div>
+                <div class="mb-1">Measurable - How much time, how many sessions?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you actually do? (improvement over perfection)</div>
+                <div class="mb-2">Time-Connected - How frequent? How long will you commit?</div>
+                <div class="font-italic"><b>Example:</b> "I will write about what I am thankful for at least 10 minutes three times per week."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="RISKY SUBSTANCE AVOIDANCE">
+                <div class="mb-1">Specific - What are you going to do to decrease your substance use?</div>
+                <div class="mb-1">Measurable - How much will you reduce it by?</div>
+                <div class="mb-1">Attainable - Do you have what it takes to follow through?</div>
+                <div class="mb-1">Realistic - What can you actually do? (improvement over perfection)</div>
+                <div class="mb-2">Time-Connected - How frequent? How long will you commit?</div>
+                <div class="font-italic"><b>Example:</b> "I will swap my morning cigarette with chewing gum at least 5 days this week for the next four weeks. I will ask my partner to help keep me on track and use the free texting service for more support."</div>
+            </div>
+
+            <div class="bg-light border mb-2 p-2 help-text d-none" data-category="OTHER">
+                <div class="">Ensure that the goal is Specific, Measurable, Attainable, Realistic and Time-Connected.</div>
+            </div>
+
             <div class="mb-2">
                 <label class="text-sm text-secondary mb-1">Goal</label>
                 <textarea type="text" data-name="goal" class="form-control form-control-sm" rows="3"></textarea>
@@ -136,3 +195,18 @@ $goals = Point::getIntakePointsOfCategory($patient, 'GOAL', $note);
     </div>
 </div>
 
+<script>
+    window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = function() {
+        // any JS can come here
+        // will be run on page-load as well as whenever this segment is refreshed
+
+        let parentSegment = $('[data-segment-template-name="<?= $segment->segmentTemplate->internal_name ?>"] ');
+        parentSegment.find('select[data-name="category"]')
+            .off('change')
+            .on('change', function() {
+                parentSegment.find('.help-text').addClass('d-none');
+                parentSegment.find('.help-text[data-category="' + this.value + '"]').removeClass('d-none');
+            });
+
+    };
+</script>

resources/views/app/patient/segment-templates/intake_goals/summary.blade.php

@@ -22,7 +22,7 @@ foreach($goals as $goal) {
     <?php foreach($grouped as $k => $group): ?>
         <b><?= $k ?></b>
         <?php foreach($group as $goal): ?>
-            <div class="mb-2">
+            <div class="pl-2 mb-2">
                 <div class="d-flex align-items-baseline">
                     <div class="<?= $goal->is_removed ? 'strike-through' : '' ?>">
                         <?= !!@($goal->data->goal) ? @($goal->data->goal) : '' ?>