ATLAS-2484 : UI - Need validation for Start Date and End Date while applying validity period

dashboardv2/public/js/templates/tag/AddTagModalView_tmpl.html

@@ -16,26 +16,24 @@
 -->
 <div>
     <div class="form-group hide">
-        {{#if tagModel}}
-        <h4>{{tagModel.typeName}}</h4> {{else}}
         <div class="row modalHeight">
-            <div class="col-md-8">
+            <div class="col-md-7">
+                {{#if tagModel}}
+                <h4>{{tagModel.typeName}}</h4> </div>{{else}}
                 <select class="form-control row-margin-bottom" data-id="addTagOptions" required>
                 </select>
             </div>
             {{/if}}
-            <div class="col-sm-2">
+            <div class="col-md-2">
                 <div class="inline">
                     <label class="checkbox-inline btn">
                         <input type="checkbox" data-id="checkModalTagProperty" class="input" checked /> Propagate</label>
                 </div>
             </div>
-            <div class="col-sm-2">
-                <div class="inline-content-fr table-action-btn">
-                    <div class="inline">
-                        <label class="checkbox-inline btn">
-                            <input type="checkbox" data-id="checkTimezoneProperty" class="input" /> Apply Validity Period</label>
-                    </div>
+            <div class="col-md-3">
+                <div class="inline">
+                    <label class="checkbox-inline btn">
+                        <input type="checkbox" data-id="checkTimezoneProperty" class="input" /> Apply Validity Period</label>
                 </div>
             </div>
         </div>
@@ -60,7 +58,7 @@
         </div>
         <div class="col-sm-12" style="display:none">
             <p>Classification Attributes(optional)</p>
-            <p class="text-gray">Add attribute values for this tag</p>
+            <p class="text-gray">Add attribute values for this classification</p>
             <div data-id="tagAttribute"></div>
         </div>
     </div>

dashboardv2/public/js/templates/tag/AddTimezoneView_tmpl.html

@@ -15,20 +15,16 @@
  * limitations under the License.
 -->
 <div class="form-group clearfix">
-        <div class="col-sm-4">
-            <label for="">Start Time</label>
-            <input type="text" class="form-control" name="startTime" data-id="startTime" />
-        </div>
-        <div class="col-sm-4">
-            <label for="">End Time</label>
-            <input type="text" class="form-control" name="endTime" data-id="endTime" />
+        <div class="col-sm-8">
+            <label for="">Start Time - End Time</label>
+            <input type="text" class="form-control" name="timeInterval" data-id="timeInterval" readonly="true" />
         </div>
         <div class="col-sm-3">
             <label for="">TimeZone</label>
             <select class="form-control row-margin-bottom" data-id="timeZone" required>
             </select>
         </div>
-        <div class="col-sm-1 attributePlusData" align="right">
+        <div class="col-sm-1 attributePlusData" align="right" style="margin-top: 25px;">
             <button type="button" class="btn btn-danger btn-sm closeInput" data-id="close"><i class="fa fa-times"></i></button>
         </div>
 </div>
\ No newline at end of file

dashboardv2/public/js/views/tag/AddTagModalView.js

@@ -63,6 +63,9 @@ define(['require',
             var events = {};
             events["change " + this.ui.addTagOptions] = 'onChangeTagDefination';
             events["change " + this.ui.checkTimeZone] = function(e) {
+                if(this.tagModel){
+                    this.buttonActive({isButtonActive: true});
+                }
                 if (e.target.checked) {
                     this.ui.timeZoneDiv.show();
                     this.ui.validityPeriodBody.show();
@@ -311,7 +314,7 @@ define(['require',
             });
         },
         buttonActive: function(option) {
-            if (option && option.isButtonActive) {
+            if (option) {
                 var isButton = option.isButtonActive;
                 this.modal.$el.find('button.ok').attr("disabled", isButton === true ? false : true);
             }

dashboardv2/public/js/views/tag/AddTimezoneItemView.js

@@ -36,19 +36,14 @@ define(['require',
             /** ui selector cache */
             ui: {
                 close: "[data-id='close']",
-                startTime: 'input[name="startTime"]',
-                endTime: 'input[name="endTime"]',
+                timeInterval: 'input[name="timeInterval"]',
                 timeZone: '[data-id="timeZone"]'
             },
             /** ui events hash */
             events: function() {
-                var events = {};
-                events["change " + this.ui.startTime] = function(e) {
-                    this.model.set({ "startTime": this.ui.startTime.val() });
-                    this.buttonActive({ isButtonActive: true });
-                };
-                events["change " + this.ui.endTime] = function(e) {
-                    this.model.set({ "endTime": this.ui.endTime.val() });
+                var events = {},
+                    that = this;
+                events["change " + this.ui.timeInterval] = function(e) {
                     this.buttonActive({ isButtonActive: true });
                 };
                 events["change " + this.ui.timeZone] = function(e) {
@@ -68,46 +63,45 @@ define(['require',
             },
             onRender: function() {
                 var that = this,
+                    minDate = new Date(),
                     dateObj = {
-                        "singleDatePicker": true,
                         "showDropdowns": true,
                         "timePicker": true,
+                        "timePicker24Hour": true,
                         "startDate": new Date(),
-                        "timePickerIncrement": 30,
                         "locale": {
-                            format: 'YYYY/MM/DD HH:MM:SS'
-                        }
+                            format: 'YYYY/MM/DD h:mm A'
+                        },
+                        "alwaysShowCalendars": true
                     },
                     tzstr = '<option selected="selected" disabled="disabled">-- Select Timezone --</option>';
 
                 if (this.model.get('startTime') !== "") {
-                    this.ui.startTime.daterangepicker({
-                        "singleDatePicker": true,
+                    this.ui.timeInterval.daterangepicker({
                         "showDropdowns": true,
                         "timePicker": true,
+                        "timePicker24Hour": true,
                         "startDate": this.model.get('startTime'),
-                        "timePickerIncrement": 30,
+                        "endDate": this.model.get('endTime'),
                         "locale": {
-                            format: 'YYYY/MM/DD HH:MM:SS'
-                        }
-                    });
-                    this.ui.endTime.daterangepicker({
-                        "singleDatePicker": true,
-                        "showDropdowns": true,
-                        "timePicker": true,
-                        "startDate": this.model.get('endTime'),
-                        "timePickerIncrement": 30,
-                        "locale": {
-                            format: 'YYYY/MM/DD HH:MM:SS'
-                        }
+                            format: 'YYYY/MM/DD h:mm A'
+                        },
+                        "alwaysShowCalendars": true
+                    }).on('apply.daterangepicker', function(fullDate) {
+                        var val = fullDate.currentTarget.value.split(' - ');
+                        that.model.set('startTime', val[0]);
+                        that.model.set('endTime', val[1]);
                     });
                     this.ui.timeZone.select2({
                         data: moment.tz.names()
                     });
                     this.ui.timeZone.val(this.model.get('timeZone')).trigger("change", { 'manual': true });
                 } else {
-                    this.ui.startTime.daterangepicker(dateObj);
-                    this.ui.endTime.daterangepicker(dateObj);
+                    this.ui.timeInterval.daterangepicker(dateObj).on('apply.daterangepicker', function(fullDate) {
+                        var val = fullDate.currentTarget.value.split(' - ');
+                        that.model.set('startTime', val[0]);
+                        that.model.set('endTime', val[1]);
+                    });
                     this.ui.timeZone.html(tzstr);
                     this.ui.timeZone.select2({
                         placeholder: "Select TimeZone",
@@ -115,6 +109,8 @@ define(['require',
                         data: moment.tz.names()
                     });
                 }
+                $('[name="daterangepicker_start"]').attr('readonly', true); +
+                $('[name="daterangepicker_end"]').attr('readonly', true);
             },
             buttonActive: function(option) {
                 var that = this;
@@ -129,8 +125,8 @@ define(['require',
                 }
                 if (this.parentView.collection.models.length <= 0) {
                     this.parentView.ui.timeZoneDiv.hide();
-                    this.parentView.ui.checkTimeZone.prop('checked',false);
-                    this.parentView.modal.$el.find('button.ok').attr("disabled",true);
+                    this.parentView.ui.checkTimeZone.prop('checked', false);
+                    this.parentView.modal.$el.find('button.ok').attr("disabled", true);
                 }
             }
         });