##// END OF EJS Templates
extended functionality on users groups select box
marcink -
r985:4e38b2bc beta
parent child Browse files
Show More
@@ -1,166 +1,215 b''
1 ## -*- coding: utf-8 -*-
1 ## -*- coding: utf-8 -*-
2 <%inherit file="/base/base.html"/>
2 <%inherit file="/base/base.html"/>
3
3
4 <%def name="title()">
4 <%def name="title()">
5 ${_('Edit users group')} ${c.users_group.users_group_name} - ${c.rhodecode_name}
5 ${_('Edit users group')} ${c.users_group.users_group_name} - ${c.rhodecode_name}
6 </%def>
6 </%def>
7
7
8 <%def name="breadcrumbs_links()">
8 <%def name="breadcrumbs_links()">
9 ${h.link_to(_('Admin'),h.url('admin_home'))}
9 ${h.link_to(_('Admin'),h.url('admin_home'))}
10 &raquo;
10 &raquo;
11 ${h.link_to(_('UsersGroups'),h.url('users_groups'))}
11 ${h.link_to(_('UsersGroups'),h.url('users_groups'))}
12 &raquo;
12 &raquo;
13 ${_('edit')} "${c.users_group.users_group_name}"
13 ${_('edit')} "${c.users_group.users_group_name}"
14 </%def>
14 </%def>
15
15
16 <%def name="page_nav()">
16 <%def name="page_nav()">
17 ${self.menu('admin')}
17 ${self.menu('admin')}
18 </%def>
18 </%def>
19
19
20 <%def name="main()">
20 <%def name="main()">
21 <div class="box">
21 <div class="box">
22 <!-- box / title -->
22 <!-- box / title -->
23 <div class="title">
23 <div class="title">
24 ${self.breadcrumbs()}
24 ${self.breadcrumbs()}
25 </div>
25 </div>
26 <!-- end box / title -->
26 <!-- end box / title -->
27 ${h.form(url('users_group', id=c.users_group.users_group_id),method='put', id='edit_users_group')}
27 ${h.form(url('users_group', id=c.users_group.users_group_id),method='put', id='edit_users_group')}
28 <div class="form">
28 <div class="form">
29 <!-- fields -->
29 <!-- fields -->
30 <div class="fields">
30 <div class="fields">
31 <div class="field">
31 <div class="field">
32 <div class="label">
32 <div class="label">
33 <label for="users_group_name">${_('Group name')}:</label>
33 <label for="users_group_name">${_('Group name')}:</label>
34 </div>
34 </div>
35 <div class="input">
35 <div class="input">
36 ${h.text('users_group_name',class_='small')}
36 ${h.text('users_group_name',class_='small')}
37 </div>
37 </div>
38 </div>
38 </div>
39
39
40 <div class="field">
40 <div class="field">
41 <div class="label label-checkbox">
41 <div class="label label-checkbox">
42 <label for="users_group_active">${_('Active')}:</label>
42 <label for="users_group_active">${_('Active')}:</label>
43 </div>
43 </div>
44 <div class="checkboxes">
44 <div class="checkboxes">
45 ${h.checkbox('users_group_active',value=True)}
45 ${h.checkbox('users_group_active',value=True)}
46 </div>
46 </div>
47 </div>
47 </div>
48 <div class="field">
48 <div class="field">
49 <div class="label label-checkbox">
49 <div class="label">
50 <label for="users_group_active">${_('Members')}:</label>
50 <label for="users_group_active">${_('Members')}:</label>
51 </div>
51 </div>
52 <div class="checkboxes">
52 <div class="select">
53 <table>
53 <table>
54 <tr>
54 <tr>
55 <td>
55 <td>
56 <div>
56 <div>
57 <div style="float:left">
57 <div style="float:left">
58 <div class="text">${_('Group members')}</div>
58 <div class="text" style="padding: 0px 0px 6px;">${_('Choosen group members')}</div>
59 ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,style="min-width:210px")}
59 ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,style="min-width:210px")}
60 <div id="remove_all_elements" style="cursor:pointer;text-align:center">
61 ${_('Remove all elements')}
62 <img alt="remove" src="/images/icons/arrow_right.png">
63 </div>
60 </div>
64 </div>
61 <div style="float:left;width:20px;padding-top:50px">
65 <div style="float:left;width:20px;padding-top:50px">
62 <img alt="add" id="add_element"
66 <img alt="add" id="add_element"
63 style="padding:2px;cursor:pointer"
67 style="padding:2px;cursor:pointer"
64 src="/images/icons/arrow_left.png">
68 src="/images/icons/arrow_left.png">
65 <br />
69 <br />
66 <img alt="remove" id="remove_element"
70 <img alt="remove" id="remove_element"
67 style="padding:2px;cursor:pointer"
71 style="padding:2px;cursor:pointer"
68 src="/images/icons/arrow_right.png">
72 src="/images/icons/arrow_right.png">
69 </div>
73 </div>
70 <div style="float:left">
74 <div style="float:left">
71 <div class="text">${_('Available members')}</div>
75 <div class="text" style="padding: 0px 0px 6px;">${_('Available members')}</div>
72 ${h.select('available_members',[],c.available_members,multiple=True,size=8,style="min-width:210px")}
76 ${h.select('available_members',[],c.available_members,multiple=True,size=8,style="min-width:210px")}
77 <div id="add_all_elements" style="cursor:pointer;text-align:center">
78 <img alt="add" src="/images/icons/arrow_left.png">
79 ${_('Add all elements')}
80 </div>
73 </div>
81 </div>
74 </div>
82 </div>
75 </td>
83 </td>
76 </tr>
84 </tr>
77 </table>
85 </table>
78 </div>
86 </div>
79
87
80 </div>
88 </div>
81 <div class="buttons">
89 <div class="buttons">
82 ${h.submit('save','save',class_="ui-button")}
90 ${h.submit('save','save',class_="ui-button")}
83 </div>
91 </div>
84 </div>
92 </div>
85 </div>
93 </div>
86 ${h.end_form()}
94 ${h.end_form()}
87 </div>
95 </div>
88
96
89 <script type="text/javascript">
97 <script type="text/javascript">
90 YAHOO.util.Event.onDOMReady(function(){
98 YAHOO.util.Event.onDOMReady(function(){
91 var D = YAHOO.util.Dom;
99 var D = YAHOO.util.Dom;
92 var E = YAHOO.util.Event;
100 var E = YAHOO.util.Event;
93
101
94 //definition of containers ID's
102 //definition of containers ID's
95 var available_container = 'available_members';
103 var available_container = 'available_members';
96 var selected_container = 'users_group_members';
104 var selected_container = 'users_group_members';
97 //form containing containers id
105 //form containing containers id
98 var form_id = 'edit_users_group';
106 var form_id = 'edit_users_group';
99
107
100 //temp container for storage.
108 //temp container for selected storage.
101 var cache = new Array();
109 var cache = new Array();
102 var c = D.get(selected_container);
110 var c = D.get(selected_container);
103
111
104 //get only selected options for further fullfilment
112 //get only selected options for further fullfilment
105 for(var i = 0;node =c.options[i];i++){
113 for(var i = 0;node =c.options[i];i++){
106 if(node.selected){
114 if(node.selected){
107 //push selected to my temp storage left overs :)
115 //push selected to my temp storage left overs :)
108 cache.push(node);
116 cache.push(node);
109 }
117 }
110 }
118 }
111
119
112 //clear 'selected' select
120 //clear 'selected' select
113 c.options.length = 0;
121 c.options.length = 0;
114
122
115 //fill it with remembered options
123 //fill it with remembered options
116 for(var i = 0;node = cache[i];i++){
124 for(var i = 0;node = cache[i];i++){
117 c.options[i]=new Option(node.text, node.value, false, false);
125 c.options[i]=new Option(node.text, node.value, false, false);
118 }
126 }
119
127
120 function prompts_action_callback(e){
128 function prompts_action_callback(e){
121
129
122 var choosen = D.get(selected_container);
130 var choosen = D.get(selected_container);
123 var availible = D.get(available_container);
131 var available = D.get(available_container);
124
132
125 if (this.id=='add_element'){
133 //get checked and unchecked options from field
126 for(var i=0; node = availible.options[i];i++){
134 function get_checked(from_field){
127 if(node.selected){
128 choosen.appendChild(new Option(node.text, node.value, false, false));
129 }
130 }
131 }
132 else if (this.id=='remove_element'){
133
134 //temp container for storage.
135 //temp container for storage.
135 cache = new Array();
136 var sel_cache = new Array();
137 var oth_cache = new Array();
136
138
137 for(var i = 0;node = choosen.options[i];i++){
139 for(var i = 0;node = from_field.options[i];i++){
138 if(!node.selected){
140 if(node.selected){
139 //push left overs :)
141 //push selected fields :)
140 cache.push(node);
142 sel_cache.push(node);
141 }
142 }
143 //clear select
144 choosen.options.length = 0;
145 for(var i = 0;node = cache[i];i++){
146 choosen.options[i]=new Option(node.text, node.value, false, false);
147 }
148 }
143 }
149 else{
144 else{
150
145 oth_cache.push(node)
151 }
146 }
152 }
147 }
153
148
149 return [sel_cache,oth_cache]
150 }
154
151
155 E.addListener(['add_element','remove_element'],'click',prompts_action_callback)
152 //fill the field with given options
153 function fill_with(field,options){
154 //clear firtst
155 field.options.length=0;
156 for(var i = 0;node = options[i];i++){
157 field.options[i]=new Option(node.text, node.value,
158 false, false);
159 }
160
161 }
162 //adds to current field
163 function add_to(field,options){
164 for(var i = 0;node = options[i];i++){
165 field.appendChild(new Option(node.text, node.value,
166 false, false));
167 }
168 }
169
170 // add action
171 if (this.id=='add_element'){
172 var c = get_checked(available);
173 add_to(choosen,c[0]);
174 fill_with(available,c[1]);
175 }
176 // remove action
177 if (this.id=='remove_element'){
178 var c = get_checked(choosen);
179 add_to(available,c[0]);
180 fill_with(choosen,c[1]);
181 }
182 // add all elements
183 if(this.id=='add_all_elements'){
184 for(var i=0; node = available.options[i];i++){
185 choosen.appendChild(new Option(node.text,
186 node.value, false, false));
187 }
188 available.options.length = 0;
189 }
190 //remove all elements
191 if(this.id=='remove_all_elements'){
192 for(var i=0; node = choosen.options[i];i++){
193 available.appendChild(new Option(node.text,
194 node.value, false, false));
195 }
196 choosen.options.length = 0;
197 }
198
199 }
200
201
202 E.addListener(['add_element','remove_element',
203 'add_all_elements','remove_all_elements'],'click',
204 prompts_action_callback)
156
205
157 E.addListener(form_id,'submit',function(){
206 E.addListener(form_id,'submit',function(){
158 var choosen = D.get(selected_container);
207 var choosen = D.get(selected_container);
159 for (var i = 0; i < choosen.options.length; i++) {
208 for (var i = 0; i < choosen.options.length; i++) {
160 choosen.options[i].selected = 'selected';
209 choosen.options[i].selected = 'selected';
161 }
210 }
162 })
211 })
163 });
212 });
164 </script>
213 </script>
165
214
166 </%def> No newline at end of file
215 </%def>
General Comments 0
You need to be logged in to leave comments. Login now