Merge pull request #491 from HS2-SOLUTIONS/master

Added popover functionality
vitalets · Jun 24, 2016 · 245c528 · 245c528
2 parents 26bb911 + e161b1d
commit 245c528
Show file tree

Hide file tree

Showing 16 changed files with 296 additions and 22 deletions.
diff --git a/docs/demos/dev-uiselect/controller.js b/docs/demos/dev-uiselect/controller.js
@@ -1,8 +1,11 @@
 app.controller('DevUiSelectCtrl', function($scope) {
   $scope.user = {
     state: 'Arizona',
-    state2: 'Kansas'
+    state2: 'Kansas',
+    tag: []
   };
 
   $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
+
+  $scope.tags = ['JavaScript', 'Angular', 'TypeScript'];
 });
diff --git a/docs/demos/dev-uiselect/test.js b/docs/demos/dev-uiselect/test.js
@@ -9,19 +9,19 @@ describe('uiselect', function() {
 
     //edit button initially shown, form initially hidden
     expect(element(s+'div#state:visible').count()).toBe(1);
-    expect(element(s+'.buttons > button:visible').count()).toBe(1);
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
     expect(element(s+'.buttons > span:visible').count()).toBe(0);
 
     //show form
-    element(s+'form > div > button').click();
+    element(s+'form[name=uiSelectForm] > div > button').click();
     //second click to test that controls not duplicated!
-    element(s+'form > div > button').click();
+    element(s+'form[name=uiSelectForm] > div > button').click();
     //also click outside to check blur = ignore
     element('body').click();
 
     //form shown in disabled state (loading)
-    expect(element(s+'div#name:visible').count()).toBe(0);
-    expect(element(s+'.buttons > button:visible').count()).toBe(0);
+    expect(element(s+'div#state:visible').count()).toBe(0);
+    expect(element(s+'.buttons > button:visible').count()).toBe(1);
 
     sleep(delay);
 
@@ -30,23 +30,23 @@ describe('uiselect', function() {
 
     //form enabled when data loaded
     expect(element(s+'div#state:visible').count()).toBe(0);
-    expect(element(s+'.buttons > button:visible').count()).toBe(0);
-    expect(element(s+'.buttons > span button:enabled').count()).toBe(2);
+    expect(element(s+'.buttons > button:visible').count()).toBe(1);
+    expect(element(s+'.buttons > span button:enabled').count()).toBe(4);
 
     //click cancel
-    element(s+'form > div > span button[type="button"]').click();
+    element(s+'form[name=uiSelectForm] > div > span button[type="button"]').click();
 
     //form closed
     expect(element(s+'div#state:visible').count()).toBe(1);
-    expect(element(s+'.buttons > button:visible').count()).toBe(1);
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
     expect(element(s+'.buttons > span:visible').count()).toBe(0);
   });
 
   it('should show form and save new values', function() {
     var s = '[ng-controller="DevUiSelectCtrl"] ';
 
     //show form
-    element(s+'form > div > button').click();
+    element(s+'form[name=uiSelectForm] > div > button').click();
 
     sleep(delay);
 
@@ -61,12 +61,12 @@ describe('uiselect', function() {
     element(s+'#ui-select-choices-row-1-').click();
 
     //click submit
-    element(s+'span button[type="submit"]').click();
+    element(s+'span button[name="submitState"]').click();
     //second click to check that it works correctly
-    element(s+'span button[type="submit"]').click();
+    element(s+'span button[name="submitState"]').click();
 
     //saving
-    expect(element(s+'form > div:eq(0) .editable-error:visible').count()).toBe(0);
+    expect(element(s+'form[name=uiSelectForm] > div:eq(0) .editable-error:visible').count()).toBe(0);
 
     sleep(delay);
 
@@ -75,8 +75,98 @@ describe('uiselect', function() {
     expect(element(s+'div#state:visible').text()).toMatch('Illinois');
     expect(element(s+'div#state2:visible').count()).toBe(1);
     expect(element(s+'div#state2:visible').text()).toMatch('Arizona');
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
+    expect(element(s+'.buttons > span:visible').count()).toBe(0);
+  });
+
+
+  it('should show form by `edit` button click and close by `cancel` for tag select', function() {
+    var s = '[ng-controller="DevUiSelectCtrl"] ';
+
+    //edit button initially shown, form initially hidden
+    expect(element(s+'div#tag:visible').count()).toBe(1);
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
+    expect(element(s+'.buttons > span:visible').count()).toBe(0);
+
+    //show form
+    element(s+'form[name=uiTagsform] > div > button').click();
+    //second click to test that controls not duplicated!
+    element(s+'form[name=uiTagsform]  > div > button').click();
+    //also click outside to check blur = ignore
+    element('body').click();
+
+    //form shown in disabled state (loading)
+    expect(element(s+'div#tag:visible').count()).toBe(0);
+    expect(element(s+'.buttons > button:visible').count()).toBe(1);
+
+    sleep(delay);
+
+    //also click outside to check blur = ignore
+    element('body').click();
+
+    //form enabled when data loaded
+    expect(element(s+'div#tag:visible').count()).toBe(0);
     expect(element(s+'.buttons > button:visible').count()).toBe(1);
+    expect(element(s+'.buttons > span button:enabled').count()).toBe(4);
+
+    //click cancel
+    element(s+'form[name=uiTagsform]  > div > span button[type="button"]').click();
+
+    //form closed
+    expect(element(s+'div#tag:visible').count()).toBe(1);
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
     expect(element(s+'.buttons > span:visible').count()).toBe(0);
   });
 
+  it('should show form and save new values for tag select', function() {
+    var s = '[ng-controller="DevUiSelectCtrl"] ';
+
+    //show form
+    element(s+'form[name=uiSelectForm] > div > button').click();
+    element(s+'form[name=uiTagsform] > div > button').click();
+
+    sleep(delay);
+
+    //select a value for the first dropdown
+    element(s+'div[name=state] > div > span').click();
+    input('$select.search').enter('Illinois');
+    element(s+'#ui-select-choices-row-0-').click();
+
+    //select a value for the second dropdown
+    element(s+'div[name=state2] > div > span').click();
+    input('$select.search').enter('Arizona');
+    element(s+'#ui-select-choices-row-1-').click();
+
+    //select a value for the tag dropdown
+    element(s+'div[name=tag] > div > span').click();
+    input('$select.search').enter('Angular');
+    element(s+'#ui-select-choices-row-2-').click();
+
+    //click submit for state form
+    element(s+'span button[name="submitState"]').click();
+    //second click to check that it works correctly
+    element(s+'span button[name="submitState"]').click();
+
+
+    //click submit for tag form
+    element(s+'span button[name="submitTag"]').click();
+    //second click to check that it works correctly
+    element(s+'span button[name="submitTag"]').click();
+
+    //saving
+    expect(element(s+'form[name=uiTagsform] > div:eq(0) .editable-error:visible').count()).toBe(0);
+    expect(element(s+'form[name=uiSelectForm] > div:eq(0) .editable-error:visible').count()).toBe(0);
+
+    sleep(delay);
+
+    //form closed, new values shown
+    expect(element(s+'div#state:visible').count()).toBe(1);
+    expect(element(s+'div#state:visible').text()).toMatch('Illinois');
+    expect(element(s+'div#state2:visible').count()).toBe(1);
+    expect(element(s+'div#state2:visible').text()).toMatch('Arizona');
+    expect(element(s+'div#tag:visible').count()).toBe(1);
+    expect(element(s+'div#tag:visible').text()).toMatch('Angular');
+    expect(element(s+'.buttons > button:visible').count()).toBe(2);
+    expect(element(s+'.buttons > span:visible').count()).toBe(0);
+  });
 });
diff --git a/docs/demos/dev-uiselect/view.html b/docs/demos/dev-uiselect/view.html
@@ -27,7 +27,7 @@
       <!-- buttons to submit / cancel form -->
       <span ng-show="uiSelectForm.$visible">
         <br/>
-        <button type="submit" class="btn btn-primary" ng-disabled="uiSelectForm.$waiting">
+        <button type="submit" class="btn btn-primary" name="submitState" ng-disabled="uiSelectForm.$waiting">
           Save
         </button>
         <button type="button" class="btn btn-default" ng-disabled="uiSelectForm.$waiting" ng-click="uiSelectForm.$cancel()">
@@ -36,4 +36,33 @@
       </span>
     </div>
   </form>
+
+  <form data-editable-form name="uiTagsform">
+    <div editable-ui-select="user.tag" data-e-form="uiTagsform" data-e-name="tag" name="tag" id="tag" theme="bootstrap" data-e-tagging data-e-ng-model="user.tag">
+      {{user.tag}}
+      <editable-ui-select-match placeholder="Tags">
+        {{$select.selected}}
+      </editable-ui-select-match>
+      <editable-ui-select-choices repeat="tag in tags | filter: $select.search track by $index">
+        {{tag}}
+      </editable-ui-select-choices>
+    </div>
+    <br/>
+    <div class="buttons">
+      <!-- button to show form -->
+      <button type="button" class="btn btn-default" ng-click="uiTagsform.$show()" ng-show="!uiTagsform.$visible">
+        Edit
+      </button>
+      <!-- buttons to submit / cancel form -->
+      <span ng-show="uiTagsform.$visible">
+        <br/>
+        <button type="submit" class="btn btn-primary" name="submitTag" ng-disabled="uiTagsform.$waiting">
+          Save
+        </button>
+        <button type="button" class="btn btn-default" ng-disabled="uiTagsform.$waiting" ng-click="uiTagsform.$cancel()">
+          Cancel
+        </button>
+      </span>
+    </div>
+  </form>
 </div>
diff --git a/docs/demos/editable-form/desc.md b/docs/demos/editable-form/desc.md
@@ -49,4 +49,6 @@ The result of form's `onaftersave` is also important for next step:
 
 Commonly you should define `onbeforesave` for child elements to perform validation and `onaftersave` for whole form to send data on server.
 
+Note:  `e-required` will not work since HTML5 validation only works if submitting a form with a submit button and `editable-form` submits via a script.
+
 Please have a look at examples.
diff --git a/docs/demos/editable-popover/controller.js b/docs/demos/editable-popover/controller.js
@@ -0,0 +1,5 @@
+app.controller('EditPopoverCtrl', function($scope) {
+  $scope.user = {
+    name: 'awesome user'
+  };  
+});
diff --git a/docs/demos/editable-popover/desc.md b/docs/demos/editable-popover/desc.md
@@ -0,0 +1 @@
+To made an editable field display in a popover, wrap the editable in `<div class="item-wrapper">`.
diff --git a/docs/demos/editable-popover/test.js b/docs/demos/editable-popover/test.js
@@ -0,0 +1,86 @@
+describe('editable-popover', function() {
+
+  beforeEach(function() {
+    browser().navigateTo(mainUrl);
+  });
+
+
+  it('should show editor and submit new value', function() {
+    var s = '[ng-controller="EditPopoverCtrl"] ';
+
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toMatch('awesome user');
+    element(s+'a').click();
+
+    expect(element(s+'a').css('display')).toBe('inline');
+    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
+    expect(element(s+'form input[type="text"]:visible').count()).toBe(1);
+    expect(element(s+'form input[type="text"]').val()).toBe('awesome user');
+    expect(element(s+'form button[type="submit"]:visible').count()).toBe(1);
+    expect(element(s+'form button[type="button"]:visible').count()).toBe(1);
+
+    using(s).input('$data').enter('username2');
+    element(s+'form button[type="submit"]').click();
+
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toBe('username2');
+    expect(element(s+'form').count()).toBe(0);
+  });
+
+  it('should not save by cancel button', function() {
+    var s = '[ng-controller="EditPopoverCtrl"] ';
+    element(s+'a').click();
+
+    using(s).input('$data').enter('username2');
+    element(s+'form button[type="button"]').click();
+
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toMatch('awesome user');
+    expect(element(s+'form').count()).toBe(0);
+  });
+
+  it('should attach `editable-empty` class', function() {
+    var s = '[ng-controller="EditPopoverCtrl"] ';
+
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toMatch('awesome user');
+    expect(element(s+'a').attr('class')).not().toMatch('editable-empty');
+    element(s+'a').click();
+
+    expect(element(s+'a').css('display')).toBe('inline');
+    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
+    expect(element(s+'form input[type="text"]:visible').count()).toBe(1);
+    expect(element(s+'form input[type="text"]').val()).toBe('awesome user');
+    expect(element(s+'form button[type="submit"]:visible').count()).toBe(1);
+    expect(element(s+'form button[type="button"]:visible').count()).toBe(1);
+
+    using(s).input('$data').enter('');
+    element(s+'form button[type="submit"]').click();
+
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toBe('empty');
+    expect(element(s+'a').attr('class')).toMatch('editable-empty');
+    expect(element(s+'form').count()).toBe(0);
+  });
+
+  it('should cancel by click on body', function() {
+    var s = '[ng-controller="EditPopoverCtrl"] ';
+    element(s+'a').click();
+
+    expect(element(s+'a').css('display')).toBe('inline');
+    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
+    expect(element(s+'form input[type="text"]:visible').count()).toBe(1);
+
+    // click on input - still visible
+    element(s+'form input[type="text"]').click();
+    expect(element(s+'a').css('display')).toBe('inline');
+    expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
+    expect(element(s+'form input[type="text"]:visible').count()).toBe(1);
+
+    // click on body - close
+    element('body').click();
+    expect(element(s+'a').css('display')).not().toBe('none');
+    expect(element(s+'a').text()).toMatch('awesome user');
+    expect(element(s+'form').count()).toBe(0);
+  });
+});
diff --git a/docs/demos/editable-popover/view.html b/docs/demos/editable-popover/view.html
@@ -0,0 +1,5 @@
+<div ng-controller="EditPopoverCtrl">
+  <div class="popover-wrapper">
+    <a href="#" editable-text="user.name">{{user.name || 'empty' }}</a>
+  </div>
+</div>
diff --git a/docs/demos/editable-row/view.html b/docs/demos/editable-row/view.html
@@ -9,7 +9,7 @@
     <tr ng-repeat="user in users">
       <td>
         <!-- editable username (text with validation) -->
-        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
+        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
           {{ user.name || 'empty' }}
         </span>
       </td>

diff --git a/docs/demos/radiolist/view.html b/docs/demos/radiolist/view.html
@@ -1,5 +1,5 @@
 <div ng-controller="RadiolistCtrl">
-  <a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in statuses">
+  <a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in ::statuses track by s.value">
     {{ showStatus() }}
   </a>
 </div>  
diff --git a/docs/demos/text-simple/test.js b/docs/demos/text-simple/test.js
@@ -70,7 +70,7 @@ describe('text-simple', function() {
     expect(element(s+'form[editable-form="$form"]').count()).toBe(1);
     expect(element(s+'form input[type="text"]:visible').count()).toBe(1);
 
-    // click on input - stil visible
+    // click on input - still visible
     element(s+'form input[type="text"]').click();
     expect(element(s+'a').css('display')).toBe('none');
     expect(element(s+'form[editable-form="$form"]').count()).toBe(1);

diff --git a/docs/js/structure.js b/docs/js/structure.js
@@ -24,7 +24,8 @@ module.exports = [
         {id: 'select-multiple', text: 'Select multiple', fiddle: 'http://jsfiddle.net/NfPcH/30/'},
         {id: 'validate-local', text: 'Validate local', fiddle: 'http://jsfiddle.net/NfPcH/35/'},
         {id: 'validate-remote', text: 'Validate remote', fiddle: 'http://jsfiddle.net/NfPcH/36/'},
-        {id: 'edit-disabled', text: 'Disable editing'}
+        {id: 'edit-disabled', text: 'Disable editing'},
+        {id: 'editable-popover', text: 'Editable Popover'}
     ]},
 
     {id: 'onbeforesave', text: 'Submit', type: 'demos', items: [
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,4 +49,6 @@ The result of form's `onaftersave` is also important for next step:

		Commonly you should define `onbeforesave` for child elements to perform validation and `onaftersave` for whole form to send data on server.

		Note: `e-required` will not work since HTML5 validation only works if submitting a form with a submit button and `editable-form` submits via a script.

		Please have a look at examples.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		To made an editable field display in a popover, wrap the editable in `<div class="item-wrapper">`.