Use uib-datepicker-popup for tasks modals

ouranos · Aug 15, 2017 · 14904a9 · 14904a9
1 parent 0ddb36a
commit 14904a9
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/bower.json b/bower.json
@@ -26,7 +26,8 @@
     "angular-bootstrap": "^2.5.0",
     "bootstrap": "^3.3.6",
     "lodash": "^4.17.4",
-    "angular-smart-table": "^2.1.8"
+    "angular-smart-table": "^2.1.8",
+    "angular-moment": "~1.0.0"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.5",

diff --git a/src/components/create-task-modal/create-task-modal.component.coffee b/src/components/create-task-modal/create-task-modal.component.coffee
@@ -12,6 +12,10 @@ angular.module('mnoUiElements').component('mnoCreateTaskModal', {
     ctrl.$onInit = ->
       ctrl.task = {}
       ctrl.isDraft = !_.isEmpty(ctrl.resolve.draftTask)
+      ctrl.datepicker = {
+        options: { format: 'dd MMMM yyyy' }
+        opened: false
+      }
       ctrl.recipients = _.map(ctrl.resolve.recipients, (orgaRel) -> {id: orgaRel.id, name: ctrl.resolve.recipientFormater(orgaRel)})
       if ctrl.isDraft
         draft = ctrl.resolve.draftTask
@@ -32,5 +36,8 @@ angular.module('mnoUiElements').component('mnoCreateTaskModal', {
     ctrl.cancel = ->
       ctrl.dismiss()
 
+    ctrl.openDatepicker = ->
+      ctrl.datepicker.opened = true
+
     ctrl
 })
diff --git a/src/components/create-task-modal/create-task-modal.html b/src/components/create-task-modal/create-task-modal.html
@@ -9,9 +9,16 @@
       <label>Title</label>
       <input type="text" name="title" class="form-control" ng-model="$ctrl.task.title" required>
     </div>
-    <div class="form-group">
-      <label>Due Date (optional)</label>
-      <input type="date" name="date" class="form-control" ng-model="$ctrl.task.due_date" datetime-utc>
+    <div class="row">
+      <div class="col-xs-12 col-md-12">
+        <label>Due Date (optional)</label>
+        <p class="input-group">
+          <input type="text" class="form-control" uib-datepicker-popup="{{$ctrl.datepicker.options.format}}" ng-model="$ctrl.task.due_date" ng-model-options="{timezone: 'utc'}" is-open="$ctrl.datepicker.opened" close-text="Close" />
+          <span class="input-group-btn">
+            <button type="button" class="btn btn-default" ng-click="$ctrl.openDatepicker()"><i class="glyphicon glyphicon-calendar"></i></button>
+          </span>
+        </p>
+      </div>
     </div>
     <div class="form-group">
       <label>Message</label>

diff --git a/src/components/show-task-modal/show-task-modal.component.coffee b/src/components/show-task-modal/show-task-modal.component.coffee
@@ -22,6 +22,10 @@ angular.module('mnoUiElements').component('mnoShowTaskModal', {
       ctrl.dueDateFormat = ctrl.resolve.dueDateFormat || 'medium'
       ctrl.isReplying = false
       ctrl.isSettingReminder = false
+      ctrl.datepicker = {
+        options: { format: 'dd MMMM yyyy' }
+        opened: false
+      }
       ctrl.reply = { message: '' }
       ctrl.reminder = { date: null }
       ctrl.resolve.onReadTaskCb(hasBeenRead())
@@ -41,6 +45,9 @@ angular.module('mnoUiElements').component('mnoShowTaskModal', {
     ctrl.cancel = ->
       ctrl.dismiss()
 
+    ctrl.openDatepicker = ->
+      ctrl.datepicker.opened = true
+
     ctrl.reminderDate = ->
       recipient = getCurrentUserRecipient()
       recipient && recipient.reminder_date

diff --git a/src/components/show-task-modal/show-task-modal.html b/src/components/show-task-modal/show-task-modal.html
@@ -28,9 +28,16 @@
     <button class="btn btn-danger" type="button" ng-if="$ctrl.showUpdateReminderButton()" ng-click="$ctrl.deleteReminderOnClick()">Delete reminder</button>
     <div ng-if="$ctrl.isSettingReminder">
       <form name="$ctrl.reminderForm">
-        <div class="form-group">
-          <label>Reminder</label>
-          <input type="date" name="reminder" class="form-control" ng-model="$ctrl.reminder.date" required datetime-utc>
+        <div class="row">
+          <div class="col-xs-12 col-md-12">
+            <label>Reminder</label>
+            <p class="input-group">
+              <input type="text" class="form-control" uib-datepicker-popup="{{$ctrl.datepicker.options.format}}" ng-model="$ctrl.reminder.date" ng-model-options="{timezone: 'utc'}" is-open="$ctrl.datepicker.opened" close-text="Close" ng-required="true" />
+              <span class="input-group-btn">
+                <button type="button" class="btn btn-default" ng-click="$ctrl.openDatepicker()"><i class="glyphicon glyphicon-calendar"></i></button>
+              </span>
+            </p>
+          </div>
         </div>
         <button class="btn btn-default" ng-click="$ctrl.toggleReminderForm(false)">Cancel</button>
         <button class="btn btn-success" ng-click="$ctrl.setReminderOnClick()" ng-disabled="$ctrl.reminderForm.$invalid">Set Reminder</button>