Delay based retirement

ManageIQ · Oct 4, 2017 · b60b0a9 · b60b0a9
1 parent 7ed9fbf
commit b60b0a9
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 7 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -50,6 +50,7 @@
 //= require bootstrap-select
 //= require bootstrap-hover-dropdown
 //= require bootstrap-switch
+//= require bootstrap-touchspin
 //= require angular-bootstrap-switch
 //= require angular-ui-codemirror
 //= require patternfly-bootstrap-treeview

diff --git a/app/assets/javascripts/components/datetime-delay-picker.js b/app/assets/javascripts/components/datetime-delay-picker.js
@@ -0,0 +1,59 @@
+ManageIQ.angular.app.component('datetimeDelayPicker', {
+  bindings: {
+    model: '=',
+    start_date: '<',
+  },
+
+  controllerAs: 'vm',
+
+  controller: ['$scope', '$element', function($scope, $element) {
+    $scope.__ = __;
+
+    this.months = 0;
+    this.weeks = 0;
+    this.days = 0;
+    this.hours = 0;
+
+    this.setRetirementDate = function() {
+      this.model = moment(this.start_date)
+        .add(this.months, 'month')
+        .add(this.weeks, 'week')
+        .add(this.days, 'day')
+        .add(this.hours, 'hour')
+        .toDate();
+    };
+
+    this.$onInit = function() {
+      if (! this.start_date) {
+        this.start_date = new Date();
+      }
+    };
+
+    this.$postLink = function() {
+      var commonAttrs = {min: 0, verticalbuttons: true, buttondown_class: "btn btn-link", buttonup_class: "btn btn-link"};
+      var attrs = {months: __('Months'), weeks: __('Weeks'), days: __('Days'), hours: __('Hours')}
+
+      for (var key in attrs) {
+        $element.find('input[name=' + key + ']').TouchSpin(Object.assign({}, commonAttrs, {'prefix': attrs[key]}));
+      }
+    };
+  }],
+
+  template: [
+    '<div class="form-group">',
+    '  <label class="control-label col-md-2">{{ __("Time Delay:") }}</label>',
+    '  <div class="col-md-2">',
+    '    <input class="form-control" name="months" type="text" ng-model="vm.months" ng-change="vm.setRetirementDate()">',
+    '  </div>',
+    '  <div class="col-md-2">',
+    '    <input class="form-control" name="weeks" type="text" ng-model="vm.weeks" ng-change="vm.setRetirementDate()">',
+    '  </div>',
+    '  <div class="col-md-2">',
+    '    <input class="form-control" name="days" type="text" ng-model="vm.days" ng-change="vm.setRetirementDate()">',
+    '  </div>',
+    '  <div class="col-md-2">',
+    '    <input class="form-control" name="hours" type="text" ng-model="vm.hours" ng-change="vm.setRetirementDate()">',
+    '  </div>',
+    '</div>',
+  ].join('\n'),
+});
diff --git a/app/views/shared/views/_retire.html.haml b/app/views/shared/views/_retire.html.haml
@@ -10,15 +10,29 @@
     = _('Set/Remove Retirement Date')
   %tbody
     .form-group
+      %label.col-md-2.control-label
+        = _('Enter Retirement Date as')
+      .col-md-4{"ng-init" => "formMode = 'date'"}
+        = select_tag("formMode",
+                     options_for_select(_("Specific Date and Time") => 'date', _("Time Delay from Now") => 'delay'),
+                     "ng-model"  => "formMode",
+                     "pf-select" => true)
+    .form-group{"ng-if" => "formMode == 'date'"}
       %label.col-md-2.control-label
         = _('Retirement Date and Time')
       .col-md-4#retirement_date_div
-        .form-group
-          = datetimepicker_input_tag('retirement_date', nil,
-                                     'id'         => 'retirement_date',
-                                     'class'      => 'form-control',
-                                     'ng-model'   => 'vm.retirementInfo.retirementDate',
-                                     'start-date' => 'vm.datepickerStartDate')
+        = datetimepicker_input_tag('retirement_date_datepicker', nil,
+                                   'class'      => 'form-control',
+                                   'ng-model'   => 'vm.retirementInfo.retirementDate',
+                                   'start-date' => 'vm.datepickerStartDate')
+    %datetime-delay-picker{'ng-if'      => "formMode == 'delay'",
+                           'model'      => 'vm.retirementInfo.retirementDate',
+                           'start-date' => 'vm.datepickerStartDate'}
+    .form-group{"ng-if" => "formMode == 'delay'"}
+      %label.col-md-2.control-label
+        = _('Retirement Date and Time')
+      .col-md-4#retirement_date_result_div
+        %input.form-control#retirement_date{'readonly' => true, 'ng-model' => 'vm.retirementInfo.retirementDate'}
     .form-group
       %label.col-md-2.control-label
         = _('Retirement Warning')
@@ -35,7 +49,8 @@
                      "pf-select"   => true)
         :javascript
           miqInitSelectPicker();
-  = _('* Saving a blank date will remove all retirement dates')
+  %div{"ng-if" => "formMode == 'date'"}
+    = _('* Saving a blank date will remove all retirement dates')
 
   %hr
   %h3