add datetime picker to expose dialog

GunnarGillert · Jul 23, 2021 · 90f3e2a · 90f3e2a
1 parent c23d549
commit 90f3e2a
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 32 deletions.
diff --git a/Phraseanet-production-client/dist/production.js b/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);
             }

diff --git a/Phraseanet-production-client/dist/production.min.js b/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);
             }

diff --git a/Phraseanet-production-client/src/components/ui/workzone/index.js b/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);
             }

diff --git a/lib/Alchemy/Phrasea/PhraseanetService/Controller/PSExposeController.php b/lib/Alchemy/Phrasea/PhraseanetService/Controller/PSExposeController.php
@@ -286,6 +286,7 @@ public function getPublicationAction(PhraseaApplication $app, Request $request)
         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,

diff --git a/package.json b/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",

diff --git a/resources/gulp/build.js b/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 () {
 });
diff --git a/resources/gulp/components/vendors/jquery-datetimepicker.js b/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');
+});
diff --git a/templates/web/common/index_bootstrap.html.twig b/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>

diff --git a/templates/web/prod/WorkZone/ExposeEdit.html.twig b/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};

diff --git a/templates/web/prod/WorkZone/ExposeNew.html.twig b/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) {
-                    config = {...config, beginsAt: dataValue.beginsAt};
+                if (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};