Fix & integrate flatpickr

symfony · Apr 4, 2023 · 8879baf · 8879baf
1 parent 779ed96
commit 8879baf
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 12 deletions.
diff --git a/assets/admin.js b/assets/admin.js
@@ -2,6 +2,9 @@ import './styles/admin.scss';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
 import 'bootstrap-tagsinput';
+import 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+import moment from 'moment';
 
 $(function() {
     // Bootstrap-tagsinput initialization
@@ -24,6 +27,18 @@ $(function() {
             }
         });
     }
+
+    $('[data-toggle="datetimepicker"]').flatpickr({
+        enableTime: true,
+        dateFormat: $('#post_publishedAt').data('date-format'),
+        allowInput: true,
+        parseDate: (datestr, format) => {
+            return moment(datestr, format, true).toDate();
+        },
+        formatDate: (date, format, locale) => {
+            return moment(date).format(format);
+        }
+    });
 });
 
 // Handling the modal confirmation message.

diff --git a/assets/styles/bootstrap-tagsinput.scss b/assets/styles/bootstrap-tagsinput.scss
@@ -90,7 +90,7 @@
   flex: 1 1;
   width: 1%;
   height: 45px;
-  padding: 00.125rem 0 0 0;
+  padding: .125rem 0 0 0;
   font-size: 15px;
   line-height: 1.42857143;
   color: #2c3e50;

diff --git a/package.json b/package.json
@@ -12,12 +12,15 @@
         "bootstrap-tagsinput": "^0.7.1",
         "bootswatch": "^4.5.3",
         "core-js": "^3.23.0",
+        "flatpickr": "^4.6.9",
         "highlight.js": "^11.5.1",
         "imports-loader": "^0.8.0",
         "jquery": "^3.5.1",
         "lato-font": "^3.0.0",
-        "moment": "^2.10",
+        "moment": "^2.29.1",
         "moment-timezone": "^0.5.40",
+        "node-sass": "^4.9.3",
+        "popper.js": "^1.16.1",
         "regenerator-runtime": "^0.13.2",
         "sass": "^1.53.0",
         "sass-loader": "^13.2",

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -3,9 +3,6 @@
    common elements and decorates all the other templates.
    See https://symfony.com/doc/current/templates.html#template-inheritance-and-layouts
 #}
-
-{% set _route = app.request.get('_route') %}
-
 <!DOCTYPE html>
 <html lang="{{ app.request.locale }}">
     <head>
@@ -31,6 +28,7 @@
     <body id="{% block body_id %}{% endblock %}">
 
         {% block header %}
+            {% set _route = app.request.get('_route') %}
             <header>
                 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
                     <div class="container">

diff --git a/templates/form/fields.html.twig b/templates/form/fields.html.twig
@@ -11,9 +11,9 @@
     <div class="input-group date" data-toggle="datetimepicker">
         {{ block('datetime_widget') }}
         <div class="input-group-append">
-            <button class="btn btn-outline-secondary">
+            <span class="btn btn-outline-secondary">
                 <span class="fa fa-calendar" aria-hidden="true"></span>
-            </button>
+            </span>
         </div>
     </div>
 {% endblock %}

diff --git a/templates/form/layout.html.twig b/templates/form/layout.html.twig
@@ -2,15 +2,15 @@
 
 {# Errors #}
 
-{% block form_errors -%}
+{# {% block form_errors -%}
     {% if errors|length > 0 -%}
         {% if form is not rootform %}<span class="help-block">{% else %}<div class="alert alert-danger">{% endif %}
         <ul class="list-unstyled">
         {%- for error in errors -%}
-            {# use font-awesome icon library #}
+            {# use font-awesome icon library # }
             <li><span class="fa fa-exclamation-triangle"></span> {{ error.message }}</li>
         {%- endfor -%}
         </ul>
         {% if form is not rootform %}</span>{% else %}</div>{% endif %}
     {%- endif %}
-{%- endblock form_errors %}
+{%- endblock form_errors %} #}
diff --git a/tests/Controller/Admin/BlogControllerTest.php b/tests/Controller/Admin/BlogControllerTest.php
@@ -135,8 +135,8 @@ public function testAdminNewDuplicatedPost(): void
         // post titles must be unique, so trying to create the same post twice should result in an error
         $this->client->submit($form);
 
-        $this->assertSelectorTextSame('form .form-group.has-error label', 'Title');
-        $this->assertSelectorTextContains('form .form-group.has-error .help-block', 'This title was already used in another blog post, but they must be unique.');
+        $this->assertSelectorTextContains('form .invalid-feedback .form-error-message', 'This title was already used in another blog post, but they must be unique.');
+        $this->assertSelectorExists('form #post_title.is-invalid');
     }
 
     public function testAdminShowPost(): void