Initialize search selection dropdowns with js

Without js, the field is a simple input asking for a member's ID.

diff --git a/galette/templates/default/pages/contribution_form.html.twig b/galette/templates/default/pages/contribution_form.html.twig
index c8e14738514d878156075310295be512626ce52f..56e90b52f26639874b22e31fd5f2c8ec7c225db5 100644 (file)
--- a/galette/templates/default/pages/contribution_form.html.twig
+++ b/galette/templates/default/pages/contribution_form.html.twig
@@ -47,7 +47,7 @@
     {% endif %}
             <div class="ui styled fluid accordion field">
                 <div class="active title">
-                    <i class="icon dropdown"></i>
+                    <i class="jsonly hidden icon dropdown"></i>
     {% if type == constant('Galette\\Entity\\Contribution::TYPE_FEE') %}
                     {{ _T("Select contributor and membership fee type") }}
     {% else %}
@@ -74,17 +74,17 @@
                 <div class="active content">
                     <div class="field inline">
                         <label for="id_adh">{{ _T("Contributor:") }}</label>
-                        <div id="id_adh" class="ui search selection dropdown nochosen">
-                            <input type="hidden" name="id_adh" value="{{ contribution.member is not null ? contribution.member }}">
-                            <i class="dropdown icon"></i>
-                            <div class="default text">{% if adh_selected == 0 %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
-                            <div class="menu">
+                        <div id="id_adh" class="jsonly search-dropdown ui input nochosen">
+                            <input type="text" name="id_adh" value="{{ contribution.member is not null ? contribution.member }}" placeholder="{{ _T("Members' ID") }}">
+                            <i class="jsonly hidden dropdown icon"></i>
+                            <div class="jsonly hidden default text">{% if adh_selected == 0 %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
+                            <div class="jsonly hidden menu">
                     {% for k, v in members.list %}
                                 <div class="item" data-value="{{ k }}">{{ v }}</div>
                     {% endfor %}
                             </div>
                         </div>
-                        <div class="ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
+                        <div class="jsonly hidden ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
                     </div>
     {% endif %}
                     <div class="field inline">
@@ -102,7 +102,7 @@
                     </div>
     {% if type == constant('Galette\\Entity\\Contribution::TYPE_FEE') %}
                     <noscript>
-                        <div class="button-container" id="reloadcont">
+                        <div class="ui basic fitted segment" id="reloadcont">
                             <input type="submit" id="btnreload" name="btnreload" value="{{ _T("Reload") }}" title="{{ _T("Reload date information according to selected member and contribution type") }}" class="ui button"/>
                         </div>
                     </noscript>
@@ -112,7 +112,7 @@
 
             <div class="ui styled fluid accordion field">
                 <div class="active title">
-                    <i class="icon dropdown"></i>
+                    <i class="jsonly hidden icon dropdown"></i>
     {% if type == constant('Galette\\Entity\\Contribution::TYPE_FEE') %}
                     {{ _T("Details of membership fee") }}
     {% else %}
@@ -183,7 +183,7 @@
     {% if contribution.isTransactionPart() and contribution.transaction.getMissingAmount() %}
             <div class="ui styled fluid accordion field">
                 <div class="active title">
-                    <i class="icon dropdown"></i>
+                    <i class="jsonly hidden icon dropdown"></i>
                     {{ _T("Transaction related") }}
                 </div>
                 <div class="active content field">

diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index a9e8b1bd835e55f1c2c795acfec75eb402ff0537..23da3bd4909d5f315ab447327d7d82e8cc33e620 100644 (file)
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -36,27 +36,26 @@
                 </div>
             {% endif %}
         {% elseif (login.isAdmin() or login.isStaff()) and not member.hasChildren() and members.list is defined %}
-            <div id="attach-checkbox" class="ui jsonly read-only{% if member.isDuplicate() %} checked{% endif %} toggle checkbox">
+            <div id="attach-checkbox" class="ui{% if member.isDuplicate() %} checked{% endif %} toggle checkbox">
                 <input type="checkbox" name="attach" id="attach" value="1"{% if member.isDuplicate() %} checked="checked"{% endif %}/>
                 <label for="attach"><i class="linkify icon"></i> {{ _T("Attach member") }}</label>
             </div>
             <span id="parent_id_elt" class="">
-                <div id="parent_id" class="ui search selection dropdown nochosen">
-                    <input type="hidden" name="parent_id" value="{{ member.isDuplicate() and member.parent is defined and member.parent is not null ? member.parent.id }}">
-                    <i class="dropdown icon"></i>
-                    <div class="default text">{{ _T("-- select a name --") }}</div>
-                    <div class="menu">
+                <div id="parent_id" class="jsonly search-dropdown ui input nochosen">
+                    <input id="parent_id_input" type="text" name="parent_id" value="{{ member.isDuplicate() and member.parent is defined and member.parent is not null ? member.parent.id }}" placeholder="{{ _T("Members' ID") }}">
+                    <i class="jsonly hidden dropdown icon"></i>
+                    <div class="jsonly hidden default text">{{ _T("-- select a name --") }}</div>
+                    <div class="jsonly hidden menu">
             {% for k, v in members.list %}
                         <div class="item" data-value="{{ k }}">{{ v }}</div>
             {% endfor %}
                     </div>
                 </div>
-                <div class="ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
+                <div class="jsonly hidden ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
             </span>
             {% if member.isDuplicate() %}
                 <input type="hidden" name="duplicate" value="1" />
             {% endif %}
-                <noscript><div class="ui message">{{ _T("This function requires javascript.") }}</div></noscript>
         {% elseif member.hasChildren() %}
                 <div class="inline field">
                     <span class="ui primary ribbon label">{{ _T("Parent of:") }}</span>
@@ -160,6 +159,9 @@
 {% block javascripts %}
         <script type="text/javascript">
             {% include "elements/js/choose_adh.js.twig" with {"js_chosen_id": "#parent_id"} %}
+
+            document.getElementById('parent_id_input').type = 'hidden';
+
             $(function() {
                 $('#company_field.nocompany').addClass('hidden');
                 $('#is_company').change(function(){

diff --git a/galette/templates/default/pages/transaction_form.html.twig b/galette/templates/default/pages/transaction_form.html.twig
index 97a9a5d5804b7d5473b857ff00959febbb5b656e..a1c2eeafd33c569f3e7c50e88e90fe911c445efc 100644 (file)
--- a/galette/templates/default/pages/transaction_form.html.twig
+++ b/galette/templates/default/pages/transaction_form.html.twig
@@ -14,17 +14,17 @@
                 </div>
                 <div class="field inline">
                     <label for="id_adh" >{{ _T("Originator:") }}</label>
-                    <div id="id_adh" class="ui search selection dropdown nochosen"{% if required.id_adh == 1 %} required="required"{% endif %}>
-                        <input type="hidden" name="id_adh" value="{{ transaction.member is not null ? transaction.member }}">
-                        <i class="dropdown icon"></i>
-                        <div class="default text">{% if not transaction.member %}{{ _T("-- select a name --") }}{% endif %}</div>
-                        <div class="menu">
+                    <div id="id_adh" class="jsonly search-dropdown ui input nochosen"{% if required.id_adh == 1 %} required="required"{% endif %}>
+                        <input type="text" name="id_adh" value="{{ transaction.member is not null ? transaction.member }}" placeholder="{{ _T("Members' ID") }}">
+                        <i class="jsonly hidden dropdown icon"></i>
+                        <div class="jsonly hidden default text">{% if not transaction.member %}{{ _T("-- select a name --") }}{% endif %}</div>
+                        <div class="jsonly hidden menu">
     {% for k, v in members.list %}
                             <div class="item" data-value="{{ k }}">{{ v }}</div>
     {% endfor %}
                         </div>
                     </div>
-                    <div class="ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
+                    <div class="jsonly hidden ui tiny icon button" id="reset-contributor"><i class="redo icon"></i><span class="hidden">{{ _T("Reset") }}</span></div>
                 </div>
                 <div class="field inline">
                     <label for="trans_date">{{ _T("Date:") }}</label>
@@ -43,7 +43,7 @@
     {% if transaction.id == null or transaction.getMissingAmount() > 0 %}
                 <div class="field inline">
                     <label class="inline" title="{{ _T("Select a contribution type to create for dispatch transaction") }}">{{ _T("Dispatch type:") }}</label>
-                    <i class="circular inverted primary small icon info tooltip" data-html="{{ _T("Select a contribution type to create for dispatch transaction") }}"></i>
+                    <i class="circular inverted primary small icon info tooltip" title="{{ _T("Select a contribution type to create for dispatch transaction") }}"></i>
                     <input type="radio" name="contrib_type" id="contrib_type_fee" value="{{ constant('Galette\\Entity\\Contribution::TYPE_FEE') }}"/> <label for="contrib_type_fee">{{ _T("Membership fee") }}</label>
                     <input type="radio" name="contrib_type" id="contrib_type_donation" value="{{ constant('Galette\\Entity\\Contribution::TYPE_DONATION') }}"/> <label for="contrib_type_donation">{{ _T("Donation") }}</label>
                 </div>
@@ -174,8 +174,13 @@
 
 {% block javascripts %}
     <script type="text/javascript">
-    {% include "elements/js/choose_adh.js.twig" %}
+        {% include "elements/js/choose_adh.js.twig" %}
         $(function(){
+            document.getElementById('id_adh').type = 'hidden';
+            document.getElementById('id_adh').removeClass('input');
+            document.getElementById('id_adh').removeClass('search-dropdown');
+            document.getElementById('id_adh').addClass('search selection dropdown');
+
 {% if transaction.id %}
             $('#contribslist').click(function(){
                 $.ajax({

diff --git a/ui/js/common.js b/ui/js/common.js
index d4612ed1e122b8b19bdf06ba6fa5aef43ad413c6..0764807043565f9cfcde3f48965390e6abcb8531 100644 (file)
--- a/ui/js/common.js
+++ b/ui/js/common.js
@@ -75,6 +75,7 @@ $(function() {
     $('.jsenabled .jsonly.hidden').removeClass('hidden');
     $('.jsenabled .jsonly.disabled').removeClass('disabled');
     $('.jsenabled .jsonly.read-only').removeClass('read-only');
+    $('.jsenabled .jsonly.search-dropdown').removeClass('search-dropdown');
 
     $('.debuginfos span').hide();
     /** TODO: find a way to translate this message ==> ajax ? */