Merge pull request #1966 from all-of-us/sn/hpro-1875/update-aou-order-finalize-bs5

shyamzcode · web-flow · commit 555545bf9af5 · 2025-03-05T10:27:32.000-06:00
diff --git a/src/Form/OrderType.php b/src/Form/OrderType.php
@@ -131,7 +131,8 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'model_timezone' => 'UTC',
                 'constraints' => $constraints,
                 'attr' => [
-                    'autocomplete' => 'off'
+                    'autocomplete' => 'off',
+                    'class' => 'form-control-sm'
                 ]
             ]);
         }
@@ -209,9 +210,12 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                             'value' => $constraintDateTime,
                             'message' => 'Timestamp cannot be in the future'
                         ])
+                    ],
+                    'attr' => [
+                        'autocomplete' => 'off'
                     ]
                 ],
-                'required' => false
+                'required' => false,
             ]);
             // Display centrifuge type for kit orders only
             if ($options['order']->getType() === 'kit') {
@@ -267,10 +271,16 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                     'disabled' => $disabled,
                     'invalid_message' => 'Tracking numbers must match.',
                     'first_options' => [
-                        'label' => 'FedEx or UPS tracking number'
+                        'label' => 'FedEx or UPS tracking number',
+                        'attr' => [
+                            'class' => 'form-control-sm'
+                        ]
                     ],
                     'second_options' => [
                         'label' => 'Verify tracking number',
+                        'attr' => [
+                            'class' => 'form-control-sm'
+                        ]
                     ],
                     'required' => false,
                     'error_mapping' => [
diff --git a/templates/order/collect.html.twig b/templates/order/collect.html.twig
@@ -7,8 +7,9 @@
 {% block title %}Collect - Order {{ order.orderId }} - {% endblock %}
 {% block bodycontainer %}container-fluid{% endblock %}
 {% block body %}
+    {% form_theme collectForm 'custom_bootstrap_5_layout.html.twig' %}
     {% include 'order/header.html.twig' with { active: 'collect' } %}
-    {{ form_start(collectForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit' } }) }}
+    {{ form_start(collectForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit aou-order-form' } }) }}
     {% if updatedTubes == true %}
         <input type="hidden" hidden="hidden" id="tubesChanged" name="tubesChanged" value="true">
     {% endif %}
diff --git a/templates/order/create.html.twig b/templates/order/create.html.twig
@@ -5,6 +5,7 @@
 {% block title %}Order Create - {% endblock %}
 {% block bodycontainer %}container-fluid{% endblock %}
 {% block body %}
+    {% form_theme createForm 'custom_bootstrap_5_layout.html.twig' %}
     <div class="page-header mb-4 border-bottom">
         <h2>
             <i class="fa fa-medkit" aria-hidden="true"></i>
@@ -29,11 +30,11 @@
     <br />
 
     <div id="createOrder">
-        {{ form_start(createForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit' } }) }}
+        {{ form_start(createForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit aou-order-form' } }) }}
         {{ form_errors(createForm) }}
         <div class="row row-equal-height">
             {% if app.session.get('orderType') == 'hpo' and not isPediatricOrder %}
-                <div class="col-sm-6 col-md-6 {% if app.session.get('siteType') == 'dv' %} col-sm-offset-3 col-md-offset-3 {% endif %}">
+                <div class="col-sm-6 col-md-6 {% if app.session.get('siteType') == 'dv' %} offset-sm-3 offset-md-3 {% endif %}">
                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title text-center">HPO Biobank Order</h5>
@@ -89,7 +90,7 @@
                 </div>
             {% endif %}
             {% if app.session.get('orderType') == 'dv' %}
-                <div class="col-sm-8 col-sm-offset-2">
+                <div class="col-sm-8 offset-sm-2">
                     <div class="card">
                         <div class="card-header">
                             <h5 class="card-title text-center">DV Biobank Order</h5>
@@ -103,7 +104,7 @@
                             {% endif %}
                             <br />
                             {{ form_row(createForm.kitId) }}
-                            <p class="text-center">
+                            <p class="text-center mt-2">
                                 <button type="submit" name="existing" class="btn btn-primary">
                                     Create
                                     <span class="spinner-border spinner-border-sm-bs5" style="display: none;"></span>
diff --git a/templates/order/finalize.html.twig b/templates/order/finalize.html.twig
@@ -1,3 +1,4 @@
+{% set bootstrapVersion = 5 %}
 {% extends 'program/hpo/ppsc/base.html.twig' %}
 {% import 'order/samples.html.twig' as samples %}
 {% if order.type != 'saliva' %}
@@ -6,8 +7,9 @@
 {% block title %}Finalize - Order {{ order.orderId }} - {% endblock %}
 {% block bodycontainer %}container-fluid{% endblock %}
 {% block body %}
+    {% form_theme finalizeForm 'custom_bootstrap_5_layout.html.twig' %}
     {% include 'order/header.html.twig' with { active: 'finalize' } %}
-    {{ form_start(finalizeForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit finalize-form' } }) }}
+    {{ form_start(finalizeForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit finalize-form aou-order-form' } }) }}
     {{ form_errors(finalizeForm) }}
 
     <div class="form-group{% if not finalizeForm.finalizedTs.vars.valid %} has-error{% endif %}" id="order_finalize"
@@ -29,7 +31,7 @@
         {% endif %}
         {{ form_errors(finalizeForm.finalizedSamples) }}
         {% if finalizeForm.sampleShippingMethod is defined %}
-            {{ form_label(finalizeForm.sampleShippingMethod) }}
+            <label class="form-label required">{{ finalizeForm.sampleShippingMethod.vars.label }}</label>
             <span class="toggle-help-text" id="toggleShippingHelpModal">
                 <i class="fa fa-question-circle" aria-hidden="true"></i><span class="sr-only">Help</span>
             </span>
@@ -48,28 +50,28 @@
         {% endif %}
         <div id="shipping_fields" {% if order.hideTrackingFieldByDefault %} style="display:none;" {% endif %}>
             <ul class="nav nav-tabs">
-                <li role="presentation" class="active"><a href="#" id="enable-number">
+                <li role="presentation" class="nav-item"><a class="nav-link active" href="#" id="enable-number">
                         <i class="fa fa-keyboard-o" aria-hidden="true"></i>
                         Enter tracking number
                     </a></li>
-                <li role="presentation"><a href="#" id="enable-barcode">
+                <li role="presentation" class="nav-item"><a class="nav-link" href="#" id="enable-barcode">
                         <i class="fa fa-barcode" aria-hidden="true"></i>
                         Scan barcode
                     </a></li>
             </ul>
             <br />
             <div class="row">
-                <div class="col-xs-6" id="fedex-barcode" style="display:none">
+                <div class="col-6" id="fedex-barcode" style="display:none">
                     <div class="form-group">
                         <label class="control-label" for="fedex_barcode_first">FedEx or UPS barcode</label>
-                        <input type="text" id="fedex_barcode_first" class="form-control">
+                        <input type="text" id="fedex_barcode_first" class="form-control form-control-sm">
                     </div>
                     <div class="form-group">
                         <label class="control-label" for="fedex_barcode_second">Verify barcode</label>
-                        <input type="text" id="fedex_barcode_second" class="form-control">
+                        <input type="text" id="fedex_barcode_second" class="form-control form-control-sm">
                     </div>
                 </div>
-                <div class="col-xs-12" id="fedex-number">
+                <div class="col-12" id="fedex-number">
                     {{ form_row(finalizeForm.fedexTracking) }}
                 </div>
             </div>
@@ -89,15 +91,15 @@
     {{ form_rest(finalizeForm) }}
     {% set routePrefix = readOnlyView ? 'read_' : '' %}
     {% if not order.disabled and not readOnlyView and not inactiveSiteFormDisabled  %}
-        <p>
+        <p class="mt-2 mb-4">
             <button type="submit" {% if hasErrors %} class="btn btn-default" disabled="disabled" {% else %} class="btn btn-primary" {% endif %}>
                 Save and mark as finalized
-                <span class="spinner-border spinner-border-sm" style="display: none;"></span>
+                <span class="spinner-border spinner-border-sm-bs5" style="display: none;"></span>
             </button>
-            <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-default">Cancel</a>
+            <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-secondary">Cancel</a>
         </p>
     {% else %}
-        <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-default">Return to In-Person Enrollment</a>
+        <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-secondary mt-2 mb-4">Return to In-Person Enrollment</a>
     {% endif %}
     {{ form_end(finalizeForm) }}
     {% if order.status == 'unlock' %}
@@ -115,14 +117,14 @@
                     <p>A tracking number is not required for sites who use a courier service to ship biospecimen kits to the Biobank.</p>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
 
 {% block pagejs %}
-    {{ encore_entry_script_tags('order-sub') }}
+    {{ encore_entry_script_tags('order-sub-bs5') }}
     {{ encore_entry_script_tags('order-finalize') }}
 {% endblock %}
diff --git a/templates/order/header.html.twig b/templates/order/header.html.twig
@@ -53,7 +53,7 @@
         </div>
         {% endif %}
         {% if app.session.get('orderType') == 'dv'and reportKitUrl and order.type == 'kit' %}
-            <button type="button" data-href="{{ reportKitUrl }}" class="btn btn-danger pull-right external-link">Report Kit Problem</button>
+            <button type="button" data-href="{{ reportKitUrl }}" class="btn btn-danger float-end external-link">Report Kit Problem</button>
         {% endif %}
     {% endif %}
 </p>
@@ -97,9 +97,9 @@
                 {% endif %}
                 {# TODO: Replace with class constants #}
                 {% if activeStep == 'finalized' and order.submissionTs %}
-                    <h4 class="pull-right submission-label">
-                        <span class="label label-success">Order Submitted: {{ order.submissionTs|date('n/j/Y g:ia', app.user.timezone) }}</span>
-                    </h4>
+                    <h5 class="float-end">
+                        <span class="badge badge-success">Order Submitted: {{ order.submissionTs|date('n/j/Y g:ia', app.user.timezone) }}</span>
+                    </h5>
                 {% endif %}
             </div>
         {% endif %}
diff --git a/templates/order/process.html.twig b/templates/order/process.html.twig
@@ -8,9 +8,10 @@
 {% block title %}Process - Order {{ order.orderId }} - {% endblock %}
 {% block bodycontainer %}container-fluid{% endblock %}
 {% block body %}
+    {% form_theme processForm 'custom_bootstrap_5_layout.html.twig' %}
     {% include 'order/header.html.twig' with { active: 'process' } %}
     <div id="order_process" data-order-type="{{ order.type }}" data-order-finalized="{{ order.finalizedTs ? 1 : 0 }}">
-    {{ form_start(processForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit process-form' } }) }}
+    {{ form_start(processForm, { attr: { class: 'warn-unsaved disable-enter prevent-resubmit process-form aou-order-form' } }) }}
     {{ form_errors(processForm) }}
     {% if processForm.processedSamples is defined %}
         <div class="form-group{% if not processForm.processedSamples.vars.valid %} has-error{% endif %}">
@@ -42,7 +43,7 @@
     {{ form_rest(processForm) }}
     {% set routePrefix = readOnlyView ? 'read_' : '' %}
     {% if not order.formDisabled and not readOnlyView and not inactiveSiteFormDisabled %}
-        <p>
+        <p class="mt-2 mb-4">
             <button type="submit" class="btn btn-primary">
                 {% if order.processedTs %}
                     Update
@@ -54,7 +55,7 @@
             <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-secondary">Cancel</a>
         </p>
     {% else %}
-        <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-secondary">Cancel</a>
+        <a href="{{ path(routePrefix ~ 'participant', { id: participant.id }) }}" class="btn btn-secondary mt-2">Cancel</a>
     {% endif %}
     {{ form_end(processForm) }}
     {% if order.status == 'unlock' %}
diff --git a/templates/order/samples.html.twig b/templates/order/samples.html.twig
@@ -1,7 +1,7 @@
 {% macro form_widget(form, showCheckAll, samplesInfo, version, order, isCustom) %}
     <div class="row">
         <div class="{% if app.request.get('_route') != 'order_create' %} col-sm-8 {% else %} col-sm-12 {% endif %}">
-            <table id="{{ form.vars.id }}" class="table table-condensed table-auto-width table-samples table-borderless">
+            <table id="{{ form.vars.id }}" class="table table-sm table-auto-width table-samples table-borderless">
                 {% if showCheckAll or app.request.get('_route') == 'order_finalize' %}
                     <thead>
                     <tr>
diff --git a/web/assets/css/bs5.css b/web/assets/css/bs5.css
@@ -124,3 +124,20 @@ a {
 .text-purple {
     color: #6f42c1;
 }
+
+.aou-order-form .col-form-label, .aou-order-form .form-label {
+    font-weight: 700;
+}
+
+.aou-order-form .form-check-input {
+    border-color: #7a8086
+}
+
+.aou-order-form .form-check-input[disabled] ~ .form-check-label, .aou-order-form .form-check-input:disabled ~ .form-check-label {
+    opacity: 1;
+}
+
+.form-control[readonly] {
+    background-color: #eeeeee;
+    opacity: 1;
+}
diff --git a/web/assets/js/views/FinalizeOrder.js b/web/assets/js/views/FinalizeOrder.js
@@ -85,25 +85,30 @@ $(document).ready(function () {
         }
     }
 
-    $("#order_finalizedTs").pmiDateTimePicker();
+    let orderFinalizeTss = document.querySelector("#order_finalizedTs");
+    bs5DateTimepicker(orderFinalizeTss, {
+        clock: true,
+        sideBySide: true,
+        useCurrent: true
+    });
 
     new PMI.views["OrderSubPage"]({
         el: $("body")
     });
 
     $("#enable-number").on("click", function () {
-        $("#enable-number").parent().addClass("active");
-        $("#enable-barcode").parent().removeClass("active");
+        $("#enable-number").addClass("active");
+        $("#enable-barcode").removeClass("active");
         $("#fedex-barcode").hide();
-        $("#fedex-number").removeClass("col-xs-6").addClass("col-xs-12");
+        $("#fedex-number").removeClass("col-6").addClass("col-12");
         $("#fedex-number input").attr("readonly", false);
         return false;
     });
     $("#enable-barcode").on("click", function () {
-        $("#enable-barcode").parent().addClass("active");
-        $("#enable-number").parent().removeClass("active");
+        $("#enable-barcode").addClass("active");
+        $("#enable-number").removeClass("active");
         $("#fedex-barcode").show();
-        $("#fedex-number").removeClass("col-xs-12").addClass("col-xs-6");
+        $("#fedex-number").removeClass("col-12").addClass("col-6");
         $("#fedex-number input").attr("readonly", true);
         return false;
     });
@@ -179,6 +184,7 @@ $(document).ready(function () {
     handleShippingFields();
 
     $("#toggleShippingHelpModal").on("click", function () {
-        $("#shipping_method_help_modal").modal();
+        let helpModal = new bootstrap.Modal($("#shipping_method_help_modal"));
+        helpModal.show();
     });
 });
diff --git a/web/assets/js/views/OrderProcess.js b/web/assets/js/views/OrderProcess.js
@@ -51,11 +51,11 @@ $(document).ready(function () {
                 }
             }
             var checkBoxTr = $(this).closest("tr");
-            var timeTd = $('<td colspan="4">');
+            var timeTd = $('<td colspan="5">');
             var timeTr = $("<tr><td></td></tr>");
             var sample = $(this).val();
             $("#order_processedSamplesTs_" + sample)
-                .closest(".form-group")
+                .closest(".form-control")
                 .detach()
                 .css("margin-bottom", "10px")
                 .appendTo(timeTd);
@@ -67,7 +67,7 @@ $(document).ready(function () {
                 sideBySide: true,
                 useCurrent: true
             });
-            $("#order_processedSamplesTs_" + sample).addClass("input-sm");
+            $("#order_processedSamplesTs_" + sample).addClass("form-control-sm");
         });
         $("#order_processedSamplesTs").remove();
 
