add datetime picker to expose dialog

Phraseanet-production-client/dist/production.js

@@ -11150,9 +11150,10 @@ var workzone = function workzone(services) {
             (0, _jquery2.default)('#DIALOG-expose-edit').dialog('close');
         });
 
+        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         _jquery2.default.ajax({
             type: "GET",
-            url: '/prod/expose/get-publication/' + edit.data("id") + '?exposeName=' + (0, _jquery2.default)("#expose_list").val(),
+            url: '/prod/expose/get-publication/' + edit.data("id") + '?exposeName=' + (0, _jquery2.default)("#expose_list").val() + '&timezone=' + timezone,
             success: function success(data) {
                 (0, _jquery2.default)('#DIALOG-expose-edit .expose-edit-content').empty().html(data);
             }

Phraseanet-production-client/dist/production.min.js

@@ -11150,9 +11150,10 @@ var workzone = function workzone(services) {
             (0, _jquery2.default)('#DIALOG-expose-edit').dialog('close');
         });
 
+        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         _jquery2.default.ajax({
             type: "GET",
-            url: '/prod/expose/get-publication/' + edit.data("id") + '?exposeName=' + (0, _jquery2.default)("#expose_list").val(),
+            url: '/prod/expose/get-publication/' + edit.data("id") + '?exposeName=' + (0, _jquery2.default)("#expose_list").val() + '&timezone=' + timezone,
             success: function success(data) {
                 (0, _jquery2.default)('#DIALOG-expose-edit .expose-edit-content').empty().html(data);
             }

Phraseanet-production-client/src/components/ui/workzone/index.js

@@ -1265,9 +1265,10 @@ const workzone = (services) => {
             $('#DIALOG-expose-edit').dialog('close');
         });
 
+        let timezone =  Intl.DateTimeFormat().resolvedOptions().timeZone;
         $.ajax({
             type: "GET",
-            url: `/prod/expose/get-publication/${edit.data("id")}?exposeName=${$("#expose_list").val()}` ,
+            url: `/prod/expose/get-publication/${edit.data("id")}?exposeName=${$("#expose_list").val()}&timezone=${timezone}` ,
             success: function (data) {
                 $('#DIALOG-expose-edit .expose-edit-content').empty().html(data);
             }

lib/Alchemy/Phrasea/PhraseanetService/Controller/PSExposeController.php

@@ -286,6 +286,7 @@ class PSExposeController extends Controller
         list($permissions, $listUsers, $listGroups) = $this->getPermissions($exposeClient, $request->get('publicationId'), $accessToken);
 
         return $this->render("prod/WorkZone/ExposeEdit.html.twig", [
+            'timezone'    => $request->get('timezone'),
             'publication' => $publication,
             'exposeName'  => $request->get('exposeName'),
             'permissions' => $permissions,

package.json

@@ -54,6 +54,7 @@
     "humane-js": "^3.0.6",
     "i18next": "^8.4.3",
     "jquery": "~1.11.3",
+    "jquery-datetimepicker": "^2.5.21",
     "jquery-lazyload": "^1.9.7",
     "jquery-simplecolorpicker": "^0.3.1",
     "jquery-treeview": "git+https://github.com/alchemy-fr/jquery-treeview.git#1e9e5a49d2875b878801e904cd08c2d25e85af1e",

resources/gulp/build.js

@@ -49,6 +49,7 @@ gulp.task('build-vendors', [
     'build-jquery-treeview',
     'build-jquery-lazyload',
     'build-jquery-test-paths',
-    'build-simple-colorpicker'
+    'build-simple-colorpicker',
+    'build-jquery-datetimepicker'
 ], function () {
 });

resources/gulp/components/vendors/jquery-datetimepicker.js

@@ -0,0 +1,19 @@
+var gulp = require('gulp');
+var config = require('../../config.js');
+var utils = require('../../utils.js');
+
+gulp.task('build-jquery-datetimepicker', function () {
+    gulp.start('copy-jquery-datetimepicker-js');
+});
+
+gulp.task('copy-jquery-datetimepicker-js', ['copy-jquery-datetimepicker-css'], function(){
+    return utils.buildJsGroup([
+        config.paths.nodes + 'jquery-datetimepicker/build/jquery.datetimepicker.full.js'
+    ], 'jquery-datetimepicker', 'vendors/jquery-datetimepicker');
+});
+
+gulp.task('copy-jquery-datetimepicker-css', function(){
+    return utils.buildCssGroup([
+        config.paths.nodes + 'jquery-datetimepicker/jquery.datetimepicker.css'
+    ], 'jquery-datetimepicker', 'vendors/jquery-datetimepicker');
+});

templates/web/common/index_bootstrap.html.twig

@@ -11,6 +11,8 @@
 
         {#<link type="text/css" rel="stylesheet" href="/assets/vendors/jquery-ui/css/{{ jquery_theme|default('ui-lightness') }}{% if not app.debug %}.min{% endif %}.css">#}
         <link type="text/css" rel="stylesheet" href="/assets/common/css/common{% if not app.debug %}.min{% endif %}.css">
+        <link type="text/css" rel="stylesheet" href="/assets/vendors/jquery-datetimepicker/jquery-datetimepicker{% if not app.debug %}.min{% endif %}.css">
+
         {% block stylesheet %}{% endblock %}
         <!--[if lte IE 8]>
             <link type="text/css" rel="stylesheet" href="/assets/common/css/font-awesome-ie7.min.css">
@@ -19,6 +21,7 @@
 
         <script type="text/javascript" src="/assets/vendors/modernizr/modernizr{% if not app.debug %}.min{% endif %}.js"></script>
         <script type="text/javascript" src="/assets/vendors/jquery/jquery{% if not app.debug %}.min{% endif %}.js"></script>
+        <script type="text/javascript" src="/assets/vendors/jquery-datetimepicker/jquery-datetimepicker{% if not app.debug %}.min{% endif %}.js"></script>
         <script type="text/javascript" src="/assets/common/js/common{% if not app.debug %}.min{% endif %}.js?v={{ jsFileVersion }}"></script>
         <script type="text/javascript" src="/assets/vendors/bootstrap/js/bootstrap{% if not app.debug %}.min{% endif %}.js"></script>
         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

templates/web/prod/WorkZone/ExposeEdit.html.twig

@@ -33,7 +33,7 @@
                     </div>
                     <div class="ui-widget">
                         <label>{{ 'prod:expose:publication:Slug' | trans }}</label>
-                        <input type="text" value="{{ publication.slug }}" name="slug" class="publication-field" id="slug-field"/>
+                        <input type="text" data-actual-slug="{{ publication.slug }}" value="{{ publication.slug }}" name="slug" class="publication-field" id="slug-field"/>
                         <input type="button" class="slug-availability" style="height: 31px;" value="{{ 'prod:expose:publication:check slug' }}">
                         <img class="expose-slug-ok" src="/assets/common/images/icons/ok.png" style="height: 32px;display:none;" >
                         <img class="expose-slug-nok" src="/assets/common/images/icons/red-cross.png" style="height: 32px;display:none;">
@@ -82,11 +82,11 @@
                         <label>{{ 'prod:expose:publication:Available (leave blank for permanet publication)' | trans }}</label>
                         <div class="available-widget">
                             <label>{{ 'prod:expose:publication:From' | trans }}</label>
-                            <input type="text" value="{% if publication.config.beginsAt %} {{ publication.config.beginsAt | date('Y/m/d') }} {% endif %}" name="beginsAt" class="use-datepicker publication-field"/>
+                            <input type="text" autocomplete="off" value="{% if publication.config.beginsAt %} {{ publication.config.beginsAt | date('Y/m/d H:i', timezone)}} {% endif %}" name="beginsAt" class="use-datepicker publication-field"/>
                         </div>
                         <div class="available-widget">
                             <label>{{ 'prod:expose:publication:To' | trans }} </label>
-                            <input type="text" value="{% if publication.config.expiresAt %} {{ publication.config.expiresAt | date('Y/m/d') }} {% endif %}" name="expiresAt" class="use-datepicker publication-field"/>
+                            <input type="text" autocomplete="off" value="{% if publication.config.expiresAt %} {{ publication.config.expiresAt | date('Y/m/d H:i') }} {% endif %}" name="expiresAt" class="use-datepicker publication-field"/>
                         </div>
                     </div>
                     <div class="ui-widget">
@@ -209,23 +209,6 @@
         var permissionList = publicationEdit.find("#permission-list");
         var slugField = publicationEdit.find('#slug-field');
 
-        $.datepicker.regional['default'] = {
-            closeText: "Close",
-            prevText: "{{ 'workzone:datepicker:prevText' | trans }}",
-            nextText: "{{ 'workzone:datepicker:nextText' | trans }}",
-            currentText: "Today",
-            monthNames: ["{{ 'workzone:datepicker:january' | trans }}", "{{ 'workzone:datepicker:february' | trans }}", "{{ 'workzone:datepicker:march' | trans }}", "{{ 'workzone:datepicker:april' | trans }}", "{{ 'workzone:datepicker:may' | trans }}", "{{ 'workzone:datepicker:june' | trans }}",
-                "{{ 'workzone:datepicker:july' | trans }}", "{{ 'workzone:datepicker:august' | trans }}", "{{ 'workzone:datepicker:september' | trans }}", "{{ 'workzone:datepicker:october' | trans }}", "{{ 'workzone:datepicker:november' | trans }}", "{{ 'workzone:datepicker:december' | trans }}"],
-            dayNames: ["{{ 'workzone:datepicker:sunday' | trans }}", "{{ 'workzone:datepicker:monday' | trans }}", "{{ 'workzone:datepicker:tuesday' | trans }}", "{{ 'workzone:datepicker:wednesday' | trans }}", "{{ 'workzone:datepicker:thursday' | trans }}", "{{ 'workzone:datepicker:friday' | trans }}", "{{ 'workzone:datepicker:saturday' | trans }}"],
-            dayNamesMin: ["D", "L", "M", "M", "J", "V", "S"],
-            dateFormat: "yy/mm/dd",
-            altField: ".alternate",
-            altFormat: "yy-mm-dd",
-            minDate: 0
-        };
-
-        $(".use-datepicker").datepicker($.datepicker.regional['default']);
-
         //generate publication list
         $(document).ready(function () {
             $( "#publication-tabs" ).tabs();
@@ -288,6 +271,63 @@
                 plugins: 'preview searchreplace visualblocks visualchars link table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern help',
                 toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
             });
+
+            $.datetimepicker.setLocale('{{ app['locale'] }}');
+
+            $(".use-datepicker").datetimepicker({
+                i18n:{
+                    de:{
+                        months:[
+                            'Januar','Februar','März','April',
+                            'Mai','Juni','Juli','August',
+                            'September','Oktober','November','Dezember',
+                        ],
+                        dayOfWeek:[
+                            'So','Mo','Di','Mi','Do','Fr','Sa'
+                        ]
+                    },
+                    fr:{
+                        months:[
+                            'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+                            'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
+                        ],
+                        dayOfWeek:[
+                            'dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'
+                        ]
+                    },
+                    du:{
+                        months:[
+                            'januari', 'februari', 'maart', 'april', 'mei', 'juni',
+                            'juli', 'augustus', 'september', 'oktober', 'november', 'december'
+                        ],
+                        dayOfWeek:[
+                            'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'
+                        ]
+                    },
+                    nl:{
+                        months:[
+                            'januari', 'februari', 'maart', 'april', 'mei', 'juni',
+                            'juli', 'augustus', 'september', 'oktober', 'november', 'december'
+                        ],
+                        dayOfWeek:[
+                            'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'
+                        ]
+                    },
+                    en:{
+                        months:[
+                            'January','February','March','April','May','June',
+                            'July','August','September','October','November','December'
+                        ],
+                        dayOfWeek:[
+                            'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
+                        ]
+                    }
+                },
+                format:'Y/m/d H:i',
+                theme: 'dark',
+                minDate:0,
+                closeOnWithoutClick :true
+            });
         });
 
         bindPermissionEvent();
@@ -631,13 +671,19 @@
                 if (dataValue.beginsAt == '') {
                     config = {...config, beginsAt: null};
                 } else {
-                    config = {...config, beginsAt: dataValue.beginsAt + ' 00:00:00'};
+                    try {
+                        config = {...config, beginsAt: new Date(dataValue.beginsAt).toISOString()};
+                    } catch (err) {
+                    }
                 }
 
                 if (dataValue.expiresAt == '') {
                     config = {...config, expiresAt: null};
                 } else {
-                    config = {...config, expiresAt: dataValue.expiresAt + ' 23:59:59'};
+                    try {
+                        config = {...config, expiresAt: new Date(dataValue.expiresAt).toISOString()};
+                    } catch (err) {
+                    }
                 }
 
                 config = {...config, layout: dataValue.layout};

templates/web/prod/WorkZone/ExposeNew.html.twig

@@ -45,11 +45,11 @@
                         <label>{{ 'prod:expose:publication:Available (leave blank for permanet publication)' | trans }}</label>
                         <div class="available-widget">
                             <label>{{ 'prod:expose:publication:From' | trans }}</label>
-                            <input type="text" value="" name="beginsAt" class="use-datepicker publication-field"/>
+                            <input type="text" autocomplete="off" value="" name="beginsAt" class="new-use-datepicker publication-field"/>
                         </div>
                         <div class="available-widget">
                             <label>{{ 'prod:expose:publication:To' | trans }} </label>
-                            <input type="text" value="" name="expiresAt" class="use-datepicker publication-field"/>
+                            <input type="text" autocomplete="off" value="" name="expiresAt" class="new-use-datepicker publication-field"/>
                         </div>
                     </div>
                     <div class="ui-widget">
@@ -158,6 +158,63 @@
         }
 
         $(document).ready(function () {
+            $.datetimepicker.setLocale('{{ app['locale'] }}');
+
+            $(".new-use-datepicker").datetimepicker({
+                i18n:{
+                    de:{
+                        months:[
+                            'Januar','Februar','März','April',
+                            'Mai','Juni','Juli','August',
+                            'September','Oktober','November','Dezember',
+                        ],
+                        dayOfWeek:[
+                            'So','Mo','Di','Mi','Do','Fr','Sa'
+                        ]
+                    },
+                    fr:{
+                        months:[
+                            'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+                            'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
+                        ],
+                        dayOfWeek:[
+                            'dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'
+                        ]
+                    },
+                    du:{
+                        months:[
+                            'januari', 'februari', 'maart', 'april', 'mei', 'juni',
+                            'juli', 'augustus', 'september', 'oktober', 'november', 'december'
+                        ],
+                        dayOfWeek:[
+                            'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'
+                        ]
+                    },
+                    nl:{
+                        months:[
+                            'januari', 'februari', 'maart', 'april', 'mei', 'juni',
+                            'juli', 'augustus', 'september', 'oktober', 'november', 'december'
+                        ],
+                        dayOfWeek:[
+                            'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'
+                        ]
+                    },
+                    en:{
+                        months:[
+                            'January','February','March','April','May','June',
+                            'July','August','September','October','November','December'
+                        ],
+                        dayOfWeek:[
+                            'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
+                        ]
+                    }
+                },
+                format:'Y/m/d H:i',
+                theme: 'dark',
+                minDate:0,
+                closeOnWithoutClick :true
+            });
+
             $("#DIALOG-expose-add .expose-more-setting").click(function (e) {
                 $(this).toggleClass('open');
                 $('#DIALOG-expose-add').find('#moreSettingInner').toggleClass('hidden');
@@ -189,11 +246,22 @@
                     config = {...config, password: dataValue.password};
                 }
 
-                if (dataValue.beginsAt) {
+                if (dataValue.beginsAt == '') {
-                    config = {...config, beginsAt: dataValue.beginsAt};
+                    config = {...config, beginsAt: null};
+                } else {
+                    try {
+                        config = {...config, beginsAt: new Date(dataValue.beginsAt).toISOString()};
+                    } catch (err) {
+                    }
                 }
-                if (dataValue.expiresAt) {
+
-                    config = {...config, expiresAt: dataValue.expiresAt};
+                if (dataValue.expiresAt == '') {
+                    config = {...config, expiresAt: null};
+                } else {
+                    try {
+                        config = {...config, expiresAt: new Date(dataValue.expiresAt).toISOString()};
+                    } catch (err) {
+                    }
                 }
 
                 config = {...config, layout: dataValue.layout};

yarn.lock

@@ -3435,11 +3435,25 @@ jake@^8.0.16:
     minimatch "3.x"
     utilities "1.0.x"
 
+jquery-datetimepicker@^2.5.21:
+  version "2.5.21"
+  resolved "https://registry.yarnpkg.com/jquery-datetimepicker/-/jquery-datetimepicker-2.5.21.tgz#00c388a78df2732fedfdb5c6529b6e84d53e0235"
+  integrity sha512-wDTpZ4f1PWd1XGaIIE0n6jLynlm+akBJ7/NjaB1bk2UJSS593CHJPZ3+FNEXoyvNVUeBlBC0oX6WTfCyfUhX/w==
+  dependencies:
+    jquery ">= 1.7.2"
+    jquery-mousewheel ">= 3.1.13"
+    php-date-formatter "^1.3.4"
+
 jquery-lazyload@^1.9.7:
   version "1.9.7"
   resolved "https://registry.yarnpkg.com/jquery-lazyload/-/jquery-lazyload-1.9.7.tgz#9982b388c533c0b611214b3c5aaa0b9fede071f7"
   integrity sha1-mYKziMUzwLYRIUs8WqoLn+3gcfc=
 
+"jquery-mousewheel@>= 3.1.13":
+  version "3.1.13"
+  resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
+  integrity sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU=
+
 jquery-simplecolorpicker@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/jquery-simplecolorpicker/-/jquery-simplecolorpicker-0.3.1.tgz#4f6befd380ab05470f585d5482e5180556e460eb"
@@ -3476,6 +3490,11 @@ jquery.fancytree@^2.27.0:
   dependencies:
     jquery ">=1.9"
 
+"jquery@>= 1.7.2":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 jquery@>=1.6, jquery@>=1.9, jquery@>=1.9.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
@@ -5348,6 +5367,11 @@ phantomjs-prebuilt@^2.1.3:
     request-progress "^2.0.1"
     which "^1.2.10"
 
+php-date-formatter@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/php-date-formatter/-/php-date-formatter-1.3.6.tgz#6d67359da890c742005fa89d20be3ded31cc1d2a"
+  integrity sha512-/CKsZYmAwXeNh8KpD/CF9hcJDZNhdb2ICN8+qgqOt5sUu9liZIxZ1R284TNj5MtPt8RjG5X0xn6WSqL0kcKMBg==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"