Update page notices add/edit page to bs5

shyamzcode · shyamzcode · commit 0f9cc4fee957 · 2025-03-12T13:21:52.000-05:00
diff --git a/src/Form/NoticeType.php b/src/Form/NoticeType.php
@@ -20,9 +20,11 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'required' => false,
                 'attr' => [
                     'data-toggle' => 'toggle',
-                    'data-on' => 'Enable',
-                    'data-off' => 'Disable',
-                    'data-onstyle' => 'success'
+                    'data-onlabel' => 'Enable',
+                    'data-offlabel' => 'Disable',
+                    'data-onstyle' => 'success',
+                    'data-offstyle' => 'secondary'
+
                 ]
             ])
             ->add('url', Type\TextType::class, [
@@ -64,24 +66,30 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 'required' => false,
                 'label' => 'Start Time (optional)',
                 'widget' => 'single_text',
-                'format' => 'M/d/yyyy h:mm a',
+                'format' => 'MM/dd/yyyy h:mm a',
                 'html5' => false,
                 'view_timezone' => $options['timezone'],
                 'model_timezone' => 'UTC',
                 'constraints' => [
                     new Constraints\Type('datetime')
+                ],
+                'attr' => [
+                    'autocomplete' => 'off'
                 ]
             ])
             ->add('end_ts', Type\DateTimeType::class, [
                 'required' => false,
                 'label' => 'End Time (optional)',
                 'widget' => 'single_text',
-                'format' => 'M/d/yyyy h:mm a',
+                'format' => 'MM/dd/yyyy h:mm a',
                 'html5' => false,
                 'view_timezone' => $options['timezone'],
                 'model_timezone' => 'UTC',
                 'constraints' => [
                     new Constraints\Type('datetime')
+                ],
+                'attr' => [
+                    'autocomplete' => 'off'
                 ]
             ]);
 
diff --git a/templates/notice/edit.html.twig b/templates/notice/edit.html.twig
@@ -1,18 +1,22 @@
+{% set bootstrapVersion = 5 %}
 {% extends 'base.html.twig' %}
 {% block title %}Edit Notice - {% endblock %}
 {% block body %}
-    <ol class="breadcrumb">
-        <li><a href="{{ path(routePrefix ~ 'home') }}">Home</a></li>
-        <li><a href="{{ path(routePrefix ~ 'admin_home') }}">Admin</a></li>
-        <li><a href="{{ path(routePrefix ~ 'admin_notices') }}">Page Notices</a></li>
-        <li class="active">{{ notice.id ? 'Edit' : 'Create' }} Page Notice</li>
-    </ol>
-    <div class="page-header">
+    {% form_theme form 'bootstrap_5_layout.html.twig' %}
+    <nav class="mt-4" aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{ path(routePrefix ~ 'home') }}">Home</a></li>
+            <li class="breadcrumb-item"><a href="{{ path(routePrefix ~ 'admin_home') }}">Admin</a></li>
+            <li class="breadcrumb-item"><a href="{{ path(routePrefix ~ 'admin_notices') }}">Page Notices</a></li>
+            <li class="breadcrumb-item active">{{ notice.id ? 'Edit' : 'Create' }} Page Notice</li>
+        </ol>
+    </nav>
+    <div class="page-header pb-1 mb-3 border-bottom">
         <h2><i class="fa fa-info-circle" aria-hidden="true"></i> {{ notice.id ? 'Edit' : 'Create' }} Page Notice</h2>
     </div>
     <div class="row">
-        <div class="col-sm-8 col-sm-offset-2">
-            {{ form_start(form, { attr: { class: 'warn-unsaved prevent-resubmit', 'data-route': routePrefix } }) }}
+        <div class="col-sm-8 offset-sm-2">
+            {{ form_start(form, { attr: { class: 'warn-unsaved prevent-resubmit page-notice-form', 'data-route': routePrefix } }) }}
             {{ form_errors(form) }}
 
             {{ form_row(form.status) }}
@@ -26,11 +30,11 @@
                 </ul>
             </div>
 
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Timing</h3>
+            <div class="card">
+                <div class="card-header">
+                    <h5 class="card-title">Timing</h5>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <p><strong>Your time zone</strong>: {{ timezone_display(app.user.info.timezone)|default('Not set!') }} <a href="{{ path('settings', { return: settings_return_url }) }}" class="small">change</a></p>
                     {{ form_rest(form) }}
                     <div class="alert alert-info">
@@ -43,11 +47,11 @@
                     </div>
                 </div>
             </div>
-            <p>
+            <p class="my-3">
                 <button type="submit" class="btn btn-primary">Save</button>
-                <a class="btn btn-default" href="{{ path(routePrefix ~ 'admin_notices') }}">Cancel</a>
+                <a class="btn btn-secondary" href="{{ path(routePrefix ~ 'admin_notices') }}">Cancel</a>
                 {% if notice.id is defined and notice.id is not empty %}
-                    <button type="submit" name="delete" class="btn btn-danger pull-right confirm">Delete</button>
+                    <button type="submit" name="delete" class="btn btn-danger float-end confirm">Delete</button>
                 {% endif %}
             </p>
             {{ form_end(form) }}
diff --git a/web/assets/css/bs5.css b/web/assets/css/bs5.css
@@ -141,3 +141,7 @@ a {
     background-color: #eeeeee;
     opacity: 1;
 }
+
+.page-notice-form .form-check {
+    padding-left: 0;
+}
diff --git a/web/assets/js/app-bs5.js b/web/assets/js/app-bs5.js
@@ -13,7 +13,7 @@ require("datatables.net-responsive/js/dataTables.responsive.js");
 require("datatables.net-responsive-bs/js/responsive.bootstrap.js");
 require("jsbarcode/dist/barcodes/JsBarcode.code128.min.js");
 require("inputmask/dist/jquery.inputmask.bundle.js");
-require("bootstrap-toggle/js/bootstrap-toggle.js");
+require("bootstrap5-toggle/js/bootstrap5-toggle.jquery.min")
 require("./bootstrap-session-timeout-bs5.js");
 require("corejs-typeahead");
 window.Bloodhound = require("corejs-typeahead/dist/bloodhound.js");
@@ -30,7 +30,7 @@ require("@fortawesome/fontawesome-free/css/v4-shims.css");
 require("@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css");
 require("datatables.net-bs5/css/dataTables.bootstrap5.css");
 require("datatables.net-responsive-bs/css/responsive.bootstrap.css");
-require("bootstrap-toggle/css/bootstrap-toggle.css");
+require("bootstrap5-toggle/css/bootstrap5-toggle.min.css")
 require("../css/app.css");
 require("../css/bs5.css");
 
diff --git a/web/assets/js/global.js b/web/assets/js/global.js
@@ -227,7 +227,7 @@ $(document).ready(function () {
      ************************************************************************/
     $.fn.dropdownOther = function (choices) {
         var self = this;
-        var select = $('<select class="form-control">');
+        var select = $('<select class="form-select">');
         var optionSelected = false;
         var other = $('<option value="">-- Other --</option>');
         select.append(other);
diff --git a/web/assets/js/views/NoticeEdit.js b/web/assets/js/views/NoticeEdit.js
@@ -1,5 +1,15 @@
 $(document).ready(function () {
-    $("#notice_start_ts, #notice_end_ts").pmiDateTimePicker();
+    const startEndDates = ["notice_start_ts", "notice_end_ts"];
+
+    startEndDates.forEach(id => {
+        const element = document.querySelector(`#${id}`);
+        bs5DateTimepicker(element, {
+            clock: true,
+            sideBySide: true,
+            useCurrent: true
+        });
+    });
+
     let urlOptions = {
         All: "/*",
         "In-Person Enrollment": "/ppsc/participant/p",

Original file line number	Diff line number	Diff line change
`@@ -141,3 +141,7 @@ a {`
`141`	`141`	`background-color: #eeeeee;`
`142`	`142`	`opacity: 1;`
`143`	`143`	`}`
	`144`	`+`
	`145`	`+.page-notice-form .form-check {`
	`146`	`+ padding-left: 0;`
	`147`	`+}`