From 7dccf9dc56e6309ca7f5512d85f50e0fc74f1279 Mon Sep 17 00:00:00 2001
From: Stephen Nielson <snielson@discoverandchange.com>
Date: Fri, 30 Aug 2024 16:21:33 -0400
Subject: [PATCH] Fixes #64 portal no appointments font update (#7653)

Changed up the appointments text when there are no appointments.
---
 templates/portal/home.html.twig               | 71 +----------------
 .../partial/cards/_appointment_card.html.twig | 77 +++++++++++++++++++
 2 files changed, 78 insertions(+), 70 deletions(-)
 create mode 100644 templates/portal/partial/cards/_appointment_card.html.twig

diff --git a/templates/portal/home.html.twig b/templates/portal/home.html.twig
index ee5108d8cef..6590c2ddd9b 100644
--- a/templates/portal/home.html.twig
+++ b/templates/portal/home.html.twig
@@ -314,53 +314,6 @@
             }
         }
 
-        function editAppointment(mode, deid) {
-            let mdata = {};
-            let title = '';
-
-            if (mode === 'add') {
-                title = {{ 'Request New Appointment' | xlj }};
-                mdata = {
-                    pid: deid
-                };
-            } else if (mode === 'recurring') {
-                let msg = {{ 'A Recurring Appointment. Please contact your appointment desk for any changes.' | xlj }};
-                signerAlertMsg(msg, 8000);
-                return false;
-            } else {
-                title = {{ 'Edit Appointment' | xlj }};
-                mdata = {
-                    eid: deid
-                };
-            }
-
-            var params = {
-                dialogId: 'editpop',
-                buttons: [
-                    {
-                        text: 'Cancel',
-                        close: true,
-                        style: 'btn-sm btn-secondary'
-                    }
-                ],
-                allowDrag: false,
-                size: 800,
-                title: title,
-                type: "GET",
-                url: './add_edit_event_user.php',
-                data: mdata
-            };
-            /*
-            * A couple notes on dialog.ajax .alert etc.
-            * opener is not required. library will handle for you.
-            * these run in the same scope as calling script.
-            * so same styles, dependencies are in scope.
-            * a promise is returned for doing other neat stuff.
-            *
-            * */
-            dialog.ajax(params);
-        }
-
         function changeCredentials(e) {
             title = {{ 'Please Enter New Credentials' | xlj }};
             dlgopen("./account/index_reset.php", '', 900, 750, null, title, {});
@@ -960,29 +913,7 @@
 
         <!-- Appointments Card -->
         {% if allow_portal_appointments %}
-            <div class="collapse mt-2 overflow-auto" data-parent="#cardgroup" id="appointmentcard">
-                <div class="container-fluid">
-                    <h3 class="text-center">{{ 'Appointments' | xlt }}</h3>
-                    <div class="row">
-                        {% if appointments|length > 0 %}
-                            {% for appt in appointments %}
-                                {% include 'portal/appointment-item.html.twig' with {appt: appt} %}
-                            {% endfor %}
-
-                            {% if appointmentLimit == appointmentCount %}
-                                <p>{{ 'Display limit reached' | xlt }}
-                                    <br>
-                                    {{ 'More appointments may exist' | xlt }}</p>
-                            {% endif %}
-                        {% else %}
-                            <h3 class='text-center'>{{ 'No Appointments' | xlt }}</h3>
-                        {% endif %}
-                    </div>
-                    <div class="mb-3">
-                        <a class='btn btn-primary btn-block' href='#' onclick="editAppointment('add',{{ patientID | attr_js }})">{{ 'Schedule A New Appointment' | xlt }}</a>
-                    </div>
-                </div>
-            </div>
+            {% include "portal/partial/cards/_appointment_card.html.twig" with {patientID: patientID} %}
         {% endif %}
 
         <!-- Payments Card -->
diff --git a/templates/portal/partial/cards/_appointment_card.html.twig b/templates/portal/partial/cards/_appointment_card.html.twig
new file mode 100644
index 00000000000..25d6676955c
--- /dev/null
+++ b/templates/portal/partial/cards/_appointment_card.html.twig
@@ -0,0 +1,77 @@
+<script>
+    // keeping this centralized here
+    function editAppointment(mode, deid) {
+        let mdata = {};
+        let title = '';
+
+        if (mode === 'add') {
+            title = {{ 'Request New Appointment' | xlj }};
+            mdata = {
+                pid: deid
+            };
+        } else if (mode === 'recurring') {
+            let msg = {{ 'A Recurring Appointment. Please contact your appointment desk for any changes.' | xlj }};
+            {# TODO: look at refactoring signerAlertMsg into a portalAlertMsg function, would better fit
+                Single Responsibility Principle to use that instead of the digital signature api here to show alert messages #}
+            signerAlertMsg(msg, 8000);
+            return false;
+        } else {
+            title = {{ 'Edit Appointment' | xlj }};
+            mdata = {
+                eid: deid
+            };
+        }
+
+        var params = {
+            dialogId: 'editpop',
+            buttons: [
+                {
+                    text: 'Cancel',
+                    close: true,
+                    style: 'btn-sm btn-secondary'
+                }
+            ],
+            allowDrag: false,
+            size: 800,
+            title: title,
+            type: "GET",
+            url: './add_edit_event_user.php',
+            data: mdata
+        };
+        /*
+        * A couple notes on dialog.ajax .alert etc.
+        * opener is not required. library will handle for you.
+        * these run in the same scope as calling script.
+        * so same styles, dependencies are in scope.
+        * a promise is returned for doing other neat stuff.
+        *
+        * */
+        {# this is coming from the dialog.js script #}
+        dialog.ajax(params);
+    }
+</script>
+<div class="collapse mt-2 overflow-auto" data-parent="#cardgroup" id="appointmentcard">
+    <div class="container-fluid">
+        <h3 class="text-center">{{ 'Appointments' | xlt }}</h3>
+        <div class="row">
+            {% if appointments|length > 0 %}
+                {% for appt in appointments %}
+                    {% include 'portal/appointment-item.html.twig' with {appt: appt} %}
+                {% endfor %}
+
+                {% if appointmentLimit == appointmentCount %}
+                    <p>{{ 'Display limit reached' | xlt }}
+                        <br>
+                        {{ 'More appointments may exist' | xlt }}</p>
+                {% endif %}
+            {% else %}
+                <div class="col-12">
+                    <div class="alert alert-info"><h5 class='text-center'>{{ 'No Appointments' | xlt }}</h5></div>
+                </div>
+            {% endif %}
+        </div>
+        <div class="mb-3">
+            <a class='btn btn-primary btn-block' href='#' onclick="editAppointment('add',{{ patientID | attr_js }})">{{ 'Schedule A New Appointment' | xlt }}</a>
+        </div>
+    </div>
+</div>