Merge pull request #5995 from 4teamwork/es-5468-task-reminder-ui

Erweiterung der Reminder-Selectors um das neue absolute Datum.

docs/HISTORY.txt

@@ -7,6 +7,7 @@ Changelog
 - Bump ftw.keywordwidget version to fix missing titles on terms. [njohner]
 - Allow text field in task deadline modification through API. [njohner]
 - Make `issuer` filterable in the @lising endpoint. [elioschmutz]
+- Implement absolute reminder dates in the reminder-selector. [elioschmutz]
 - Downpin ftw.recipe.solr to 1.2.1 to have log4j configuration valid for solr < 7.4.X [deiferni]
 - Use plone.restapi summary serialization in the recently-touched endpoint. [phgross]
 - document_report: Add support for pseudo-relative paths. [lgraf]

opengever/base/browser/resources/base.js

@@ -8,6 +8,27 @@ $(window).load(function(){
   } else {
     firstFormElement.focus();
   }
+
+  // Handle reminder_option-date visibility in task response form
+  function handleReminderOptionsDateChooserVisiblity(optionType) {
+    var optionTypeCalendarField = $('#formfield-form-widgets-reminder_option_date');
+    if (optionType === 'on_date') {
+      optionTypeCalendarField.show();
+    } else {
+      optionTypeCalendarField.hide();
+    }
+  }
+  var reminderOptionsForm = $('#form-widgets-reminder_option');
+  if (reminderOptionsForm.length) {
+    var currentOptionType = reminderOptionsForm[0].options[reminderOptionsForm[0].selectedIndex].value;
+    handleReminderOptionsDateChooserVisiblity(currentOptionType);
+    reminderOptionsForm.on('change', function(e) {
+      var optionType = e.target.options[e.target.selectedIndex].value;
+      handleReminderOptionsDateChooserVisiblity(optionType);
+    });
+  }
+
+
 });
 
 $(document).delegate('body', 'tabbedview.unknownresponse', function(event, overview, jqXHR) {

opengever/base/browser/resources/task_reminder_selector.js

@@ -15,67 +15,79 @@ $(function() {
             currentErrorMsg: '',
             nextSelectedOption: null,
             noReminderIdentifier: 'no-reminder',
+            onDateReminderIdentifier: 'on_date',
           },
           computed: {
             currentTitle: function() {
               if (this.currentErrorMsg !== '') { return this.currentErrorMsg; }
-              return this.currentReminder().option_title;
+              if (this.currentReminder.option_type === this.onDateReminderIdentifier) {
+                return new Date(this.currentReminder.params.date).format('d.m.Y');
+              } else {
+                return this.currentReminder.option_title;
+              }
             },
             orderedOptions: function() {
               return this.reminderOptions.sort(function(a, b) {
                 return a.sort_order - b.sort_order;
               });
-            }
-          },
-          methods: {
+            },
             currentReminder: function() {
               return this.reminderOptions.filter(function(option) {
                 return option.selected === true;
               })[0];
             },
-            handleSetReminder: function(option) {
+          },
+          methods: {
+            handleSetReminder: function(option, params) {
               if (this.isLoading) { return; }
 
               this.resetErrorMsg();
 
               var previousOption;
-              previousOption = this.currentReminder();
-              if (previousOption === option) { return; }
+              previousOption = this.currentReminder;
+              if (previousOption.option_type === option.option_type && option.option_type !== this.onDateReminderIdentifier) { return; }
 
               this.isLoading = true;
               this.nextSelectedOption = option;
-              this.nextSelectedOption.showSpinner = true
+              this.nextSelectedOption.showSpinner = true;
 
               var request;
+
+              var payload = {option_type: option.option_type, params: {}};
+              if (typeof(params) !== 'undefined') {
+                Object.assign(payload, {params: params});
+              }
+
               if (option.option_type === this.noReminderIdentifier) {
                 request = this.requester.delete(this.endpoint);
               } else if (previousOption.option_type === this.noReminderIdentifier) {
-                request = this.requester.post(this.endpoint, option);
+                request = this.requester.post(this.endpoint, payload);
               } else {
-                request = this.requester.patch(this.endpoint, option);
+                request = this.requester.patch(this.endpoint, payload);
               }
 
               request.then(function() {
-                this.setReminder(option);
-                this.finish_request()
+                this.setReminder(option, params);
+                this.finish_request();
               }.bind(this));
 
               request.catch(function() {
                 this.setReminder(previousOption);
                 this.handleError();
-                this.finish_request()
+                this.finish_request();
               }.bind(this));
 
             },
             finish_request: function(){
               this.isLoading = false;
               this.longRequest = false;
-              this.nextSelectedOption.showSpinner = false
+              this.nextSelectedOption.showSpinner = false;
               this.nextSelectedOption = null;
             },
-            setReminder: function(option) {
+            setReminder: function(option, params) {
               this.reminderOptions.map(function(o) {
                 o.selected = o === option;
+                o.params = params;
               });
             },
             handleError: function(previousOption) {
@@ -93,12 +105,61 @@ $(function() {
           },
         });
         Vue.component('reminder-option', {
-          props: ['selected', 'title', 'showSpinner'],
+          props: ['option'],
           template: '#task-reminder-selector-option-vue-template',
           methods: {
             clicked: function() {
-              this.$emit('clicked');
+              this.$emit('clicked', this.option);
+            },
+          },
+        });
+        Vue.component('reminder-option-on-date', {
+          props: ['option'],
+          template: '#task-reminder-selector-option-on-date-vue-template',
+          computed: {
+            datepickerConfig: function() {
+              var tomorrow = new Date();
+              tomorrow.setDate(tomorrow.getDate() + 1);
+
+              var currentValue = '';
+              if (this.option.params) {
+                currentValue = this.toDatePickerValue(this.option.params.date)
+              }
+
+              return {
+                onChangeDateTime: this.onChangeDateTime.bind(this),
+                dayOfWeekStart: 1,
+                format: 'd.m.Y',
+                scrollInput: false,
+                scrollMonth: false,
+                scrollTime: false,
+                timepicker: false,
+                minDate: tomorrow,
+                value: currentValue,
+              };
+            },
+          },
+          mounted: function() {
+            $(this.$el).datetimepicker(this.datepickerConfig);
+          },
+          methods: {
+            reinitDateTimePicker: function(newDate) {
+              $(this.$el).datetimepicker('destroy');
+              $(this.$el).datetimepicker(
+                Object.assign({},
+                  this.datepickerConfig,
+                  {value: newDate}));
+            },
+            toDatePickerValue: function(value) {
+              return new Date(value).format('d.m.Y');
+            },
+            clicked: function() {
+              $(this.$el).datetimepicker('show');
             },
+            onChangeDateTime: function(date) {
+              this.$emit('clicked', this.option, {date: date.format('Y-m-d')});
+              this.reinitDateTimePicker(date);
+            }
           },
         });
         if (viewName && viewName === 'sharing') {

opengever/task/browser/overview.py

@@ -7,7 +7,6 @@
 from opengever.task import _
 from opengever.task.activities import TaskReminderActivity
 from opengever.task.reminder import REMINDER_TYPE_REGISTRY
-from opengever.task.reminder.model import REMINDER_TYPES_BLACKLISTED_FROM_UI
 from opengever.task.task import ITask
 from opengever.tasktemplates.interfaces import IFromParallelTasktemplate
 from opengever.tasktemplates.interfaces import IFromSequentialTasktemplate
@@ -236,8 +235,12 @@ def reminder_options(self):
             # be able to use the vocabulary as well, instead of directly
             # accessing REMINDER_TYPE_REGISTRY
 
-            if option in REMINDER_TYPES_BLACKLISTED_FROM_UI:
-                continue
+            selected = False
+            params = {}
+
+            if reminder_option and reminder_option.option_type == option.option_type:
+                selected = True
+                params = reminder_option.serialize(json_compat=True).get('params')
 
             selected = option.option_type == reminder_option.option_type if \
                 reminder_option else None
@@ -248,6 +251,7 @@ def reminder_options(self):
                     option.option_title, context=self.request),
                 'selected': selected,
                 'showSpinner': False,
+                'params': params
             })
 
         return options

opengever/task/browser/vue_templates/task_reminder_selector.html

@@ -9,10 +9,21 @@
               and show/hide the whole element.
               See https://github.com/FortAwesome/Font-Awesome/issues/7572 for
               more information about this bug. -->
-              <span v-if="showSpinner && !selected" class="fa fa-spinner fa-spin" />
-              <span v-if="selected && !showSpinner" class="fa fa-check" />
+              <span v-if="option.show_spinner && !option.selected" class="fa fa-spinner fa-spin" />
+              <span v-if="option.selected && !option.show_spinner" class="fa fa-check" />
             </span>
-            <span class="subMenuTitle actionText">{{title}}</span>
+            <span class="subMenuTitle actionText">{{option.option_title}}</span>
+        </a>
+    </li>
+</script>
+<script type="text/x-template" id="task-reminder-selector-option-on-date-vue-template">
+    <li>
+        <a href="#" @click.prevent="clicked">
+            <span class="taskReminderSelectorOptionIcon">
+              <span v-if="option.show_spinner && !option.selected" class="fa fa-spinner fa-spin" />
+              <span v-if="option.selected && !option.show_spinner" class="fa fa-check" />
+            </span>
+            <span class="subMenuTitle actionText">{{option.option_title}}</span>
         </a>
     </li>
 </script>
@@ -22,13 +33,20 @@
           <span class="taskReminderSelectorCurrent">{{currentTitle}}</span>
         </dt>
         <dd>
-            <ul class="taskReminderSelectorOptions">
-                <reminder-option v-for="option in orderedOptions"
-                                 @clicked="handleSetReminder(option)"
-                                 :selected="option.selected"
-                                 :showSpinner="option.showSpinner"
-                                 :title="option.option_title" />
-            </ul>
+          <ul class="taskReminderSelectorOptions">
+            <template v-for="option in orderedOptions">
+              <reminder-option-on-date
+                v-if="option.option_type === 'on_date'"
+                :option=option
+                @clicked="handleSetReminder"
+              ></reminder-option-on-date>
+              <reminder-option
+                v-else
+                :option=option
+                @clicked="handleSetReminder"
+              ></reminder-option>
+            </template>
+          </ul>
         </dd>
     </dl>
 </script>

opengever/task/locales/de/LC_MESSAGES/opengever.task.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: 1.0\n"
-"POT-Creation-Date: 2019-10-06 22:54+0000\n"
+"POT-Creation-Date: 2019-10-17 19:56+0000\n"
 "PO-Revision-Date: 2015-02-17 18:41+0100\n"
 "Last-Translator: Jonas Baumann <j.baumann@4teamwork.ch>\n"
 "Language-Team: 4teamwork <info@4teamwork.ch>\n"
@@ -699,6 +699,11 @@ msgstr "Status"
 msgid "label_workflow_state_byline"
 msgstr "Status"
 
+#. Default: "Choose remind date"
+#: ./opengever/task/response.py
+msgid "lable_reminder_choose_date"
+msgstr "Wählen Sie ein Erinnerungdatum aus"
+
 #. Default: "Deadline successfully changed."
 #: ./opengever/task/browser/modify_deadline.py
 msgid "msg_deadline_change_successfull"
@@ -757,6 +762,11 @@ msgstr "Meine Aufgaben"
 msgid "new_dossier"
 msgstr "neues Dossier"
 
+#. Default: "Please choose a remind date"
+#: ./opengever/task/response.py
+msgid "no_remind_date_error"
+msgstr "Bitte wählen Sie ein Erinnerungsdatum aus."
+
 #. Default: "No reminder"
 #: ./opengever/task/browser/overview.py
 msgid "no_reminder"

opengever/task/locales/fr/LC_MESSAGES/opengever.task.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2019-10-06 22:54+0000\n"
+"POT-Creation-Date: 2019-10-17 19:56+0000\n"
 "PO-Revision-Date: 2017-12-03 11:47+0000\n"
 "Last-Translator: Jacqueline Sposato <jacqueline.sposato@gmail.com>\n"
 "Language-Team: French <https://translations.onegovgever.ch/projects/onegov-gever/opengever-task/fr/>\n"
@@ -701,6 +701,11 @@ msgstr "Etat"
 msgid "label_workflow_state_byline"
 msgstr "Etat"
 
+#. Default: "Choose remind date"
+#: ./opengever/task/response.py
+msgid "lable_reminder_choose_date"
+msgstr ""
+
 #. Default: "Deadline successfully changed."
 #: ./opengever/task/browser/modify_deadline.py
 msgid "msg_deadline_change_successfull"
@@ -759,6 +764,11 @@ msgstr "Mes tâches"
 msgid "new_dossier"
 msgstr "Nouveau Dossier"
 
+#. Default: "Please choose a remind date"
+#: ./opengever/task/response.py
+msgid "no_remind_date_error"
+msgstr ""
+
 #. Default: "No reminder"
 #: ./opengever/task/browser/overview.py
 msgid "no_reminder"

opengever/task/locales/opengever.task.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: 1.0\n"
-"POT-Creation-Date: 2019-10-06 22:54+0000\n"
+"POT-Creation-Date: 2019-10-17 19:56+0000\n"
 "PO-Revision-Date: 2009-02-25 14:39+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: 4teamwork <info@4teamwork.ch>\n"
@@ -697,6 +697,11 @@ msgstr ""
 msgid "label_workflow_state_byline"
 msgstr ""
 
+#. Default: "Choose remind date"
+#: ./opengever/task/response.py
+msgid "lable_reminder_choose_date"
+msgstr ""
+
 #. Default: "Deadline successfully changed."
 #: ./opengever/task/browser/modify_deadline.py
 msgid "msg_deadline_change_successfull"
@@ -755,6 +760,11 @@ msgstr ""
 msgid "new_dossier"
 msgstr ""
 
+#. Default: "Please choose a remind date"
+#: ./opengever/task/response.py
+msgid "no_remind_date_error"
+msgstr ""
+
 #. Default: "No reminder"
 #: ./opengever/task/browser/overview.py
 msgid "no_reminder"

opengever/task/reminder/model.py

@@ -200,18 +200,11 @@ def calculate_trigger_date(self, deadline):
     klass.option_type: klass for klass in REMINDER_TYPES
 }
 
-# This type requires a special widget and would therefore break the UI
-# until that widget is implemented. Remove this blacklist to have it show up.
-REMINDER_TYPES_BLACKLISTED_FROM_UI = (ReminderOnDate, )
-
 
 def get_task_reminder_options_vocabulary():
     terms = []
     options = REMINDER_TYPE_REGISTRY.values()
     for option in sorted(options, key=lambda x: x.sort_order):
-        if option in REMINDER_TYPES_BLACKLISTED_FROM_UI:
-            continue
-
         terms.append(SimpleTerm(
             option.option_type, title=option.option_title))