vitalets / angular-xeditable

Edit in place for AngularJS
http://vitalets.github.io/angular-xeditable
MIT License
1.91k stars 403 forks source link

fix combodate not updating value if the combobox is not changed #680

Closed chiu0602 closed 7 years ago

chiu0602 commented 7 years ago

fix issue #679

eugef commented 7 years ago

Hi @chiu0602, thanks for your PR, could you add a test to prove code works as expected.

ckosloski commented 7 years ago

All tests pass with your change and adding the following to test your change:

Change dev-combodate/controller.js to

app.controller('DevCombodateCtrl', function($scope) {
  $scope.user = {
    dob: new Date(1984, 4, 15),
    dob2: new Date(1984, 4, 15, 10, 11, 0)
  };
})

Change dev-combodate/test.js to

describe('dev-combodate', function() {

  beforeEach(function() {
    browser().navigateTo(mainUrl);
  });

  it('should show editor including seconds and submit new value', function() {
    var s = '[ng-controller="DevCombodateCtrl"] ';

    expect(element(s+'a#seconds').css('display')).not().toBe('none');
    expect(element(s+'a#seconds').text()).toMatch('May 15, 1984 12:00:00 AM');
    element(s+'a#seconds').click();

    expect(element(s+'a#seconds').css('display')).toBe('none');
    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
    expect(element(s+'form select:visible').count()).toBe(6);
    expect(element(s+'form select.day').val()).toBe('15');
    expect(element(s+'form select.month').val()).toBe('4');
    expect(element(s+'form select.year').val()).toBe('1984');
    expect(element(s+'form select.hour').val()).toBe('0');
    expect(element(s+'form select.minute').val()).toBe('0');
    expect(element(s+'form select.second').val()).toBe('0');
    expect(element(s+'form .editable-buttons button[type="submit"]:visible').count()).toBe(1);
    expect(element(s+'form .editable-buttons button[type="button"]:visible').count()).toBe(1);

    //set 29 april
    element(s+'form select.day option[value=29]').click();
    element(s+'form select.month option[value=3]').click(); // month option numbers appear to be offset by 1
    element(s+'form select.minute option[value=4]').click();
    element(s+'form select.second option[value=5]').click();

    //submit
    element(s+'form button[type="submit"]').click();

    expect(element(s+'a#seconds').css('display')).not().toBe('none');
    expect(element(s+'a#seconds').text()).toMatch('Apr 29, 1984 12:04:05 AM');
    expect(element(s+'form').count()).toBe(0);
  });

  it('should show editor and submit new value when initial date does not match avaiable values in drop downs', function() {
    var s = '[ng-controller="DevCombodateCtrl"] ';

    expect(element(s+'a#minuteStep').css('display')).not().toBe('none');
    expect(element(s+'a#minuteStep').text()).toMatch('May 15, 1984 10:11:00 AM');
    element(s+'a#minuteStep').click();

    expect(element(s+'a#minuteStep').css('display')).toBe('none');
    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
    expect(element(s+'form select:visible').count()).toBe(5);
    expect(element(s+'form select.day').val()).toBe('15');
    expect(element(s+'form select.month').val()).toBe('4');
    expect(element(s+'form select.year').val()).toBe('1984');
    expect(element(s+'form select.hour').val()).toBe('10');
    expect(element(s+'form select.minute').val()).toBe('10');
    expect(element(s+'form .editable-buttons button[type="submit"]:visible').count()).toBe(1);
    expect(element(s+'form .editable-buttons button[type="button"]:visible').count()).toBe(1);

    //submit
    element(s+'form button[type="submit"]').click();

    expect(element(s+'a#minuteStep').css('display')).not().toBe('none');
    expect(element(s+'a#minuteStep').text()).toMatch('May 15, 1984 10:10:00 AM');
    expect(element(s+'form').count()).toBe(0);
  });
});

Change dev-combodate/view.html to

<div ng-controller="DevCombodateCtrl">
  <a href="#" id="seconds" editable-combodate="user.dob" e-format="MM-DD-YYYY HH:mm:ss" e-template="MM-DD-YYYY HH:mm:ss" e-minute-step="1" e-second-step="1">
    {{ (user.dob | date:"medium") || 'empty' }}
  </a>&nbsp;
  <a href="#" id="minuteStep" editable-combodate="user.dob2">
    {{ (user.dob2 | date:"medium") || 'empty' }}
  </a>
</div>