From a9fdebb7ccb3e1acb23dfdd5c76db467f924d9c2 Mon Sep 17 00:00:00 2001
From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Sat, 20 Jan 2024 15:38:38 +0100
Subject: [PATCH] Fix social networks search dropdown

fixes #1760

Clear dropdown and text values after clone
Add new social network directly on input
---
 .../default/elements/edit_socials.html.twig   | 56 +++----------------
 .../default/elements/js/choose_social.js.twig | 40 +++++++++++++
 .../default/pages/member_form.html.twig       |  1 +
 .../default/pages/preferences.html.twig       |  2 +
 .../galette/modules/dropdown.overrides        |  7 ++-
 5 files changed, 56 insertions(+), 50 deletions(-)
 create mode 100644 galette/templates/default/elements/js/choose_social.js.twig

diff --git a/galette/templates/default/elements/edit_socials.html.twig b/galette/templates/default/elements/edit_socials.html.twig
index 84c7f14ca..7b795dffb 100644
--- a/galette/templates/default/elements/edit_socials.html.twig
+++ b/galette/templates/default/elements/edit_socials.html.twig
@@ -18,15 +18,19 @@
                 <label>{{ _T("Add new social network") }}</label>
                 <div class="combo-social fields">
                     <div class="field">
-                        <select name="social_new_type_1" id="social_new_type_1" class="socials_dropdown ui search dropdown">
-                            <option value="">{{ _T("Choose or enter your own...") }}</option>
+                        <div id="social_new_type_1" class="jsonly search-dropdown socials-dropdown ui input">
+                            <input id="social_new_type_input_1" type="hidden" name="social_new_type_1" value="">
+                            <i class="jsonly displaynone dropdown icon" aria-hidden="true"></i>
+                            <div class="jsonly displaynone default text">{{ _T("Choose or enter your own...") }}</div>
+                            <div class="jsonly displaynone menu">
                             {% for social_type in osocials.getSystemTypes(false) %}
-                                <option value="{{ social_type }}">{{ osocials.getSystemType(social_type) }}</option>
+                                <div class="item" data-value="{{ social_type }}">{{ osocials.getSystemType(social_type) }}</div>
                             {% endfor %}
-                        </select>
+                            </div>
+                        </div>
                     </div>
                     <div class="field">
-                        <input type="text" name="social_new_value_1" id="social_new_value_1" value="" size="50"/>
+                        <input type="text" name="social_new_value_1" id="social_new_value_1" value="" size="50" class="value"/>
                     </div>
                 </div>
                 <a href="#" class="ui tiny green labeled icon button action addsocial">
@@ -34,48 +38,6 @@
                     {{ _T("Add") }}
                 </a>
             </div>
-            <script type="text/javascript">
-                var _dropdown = function(selector) {
-                    if ( !selector ) {
-                        selector = '.socials_dropdown';
-                    }
-
-                    $(selector).dropdown({
-                        allowAdditions: true
-                    });
-                }
-
-                var _rmFilter = function(elt) {
-                    if ( typeof elt == 'undefined') {
-                        elt = $('#social .stored');
-                    }
-                    elt.find('.delsocial').click(function(e){
-                        e.preventDefault();
-                        var _this = $(this);
-                        _this.parents('.field.stored').remove();
-                    });
-                }
-
-                $(function(){
-                    _rmFilter();
-                    _dropdown();
-
-                    $('a.addsocial').click(function(e) {
-                        e.preventDefault();
-
-                        var _newindex = $(this).parents('.addsocial').find('.combo-social:last select').attr('id').replace('social_new_type_', '');
-                        ++_newindex;
-                        $(this).parents('.addsocial').find ('.combo-social:last')
-                            .clone() // copy
-                            .insertAfter('#social .combo-social:last') // where
-                            .find('select').attr('id', 'social_new_type_' + _newindex).attr('name', 'social_new_type_' + _newindex)
-                            .parent().parent().parent().find('input').attr('id', 'social_new_value_' + _newindex).attr('name', 'social_new_value_' + _newindex)
-                        ;
-
-                        _dropdown();
-                    });
-                });
-            </script>
     {% endblock %}
 </div>
 {% else %}
diff --git a/galette/templates/default/elements/js/choose_social.js.twig b/galette/templates/default/elements/js/choose_social.js.twig
new file mode 100644
index 000000000..1f3d69a39
--- /dev/null
+++ b/galette/templates/default/elements/js/choose_social.js.twig
@@ -0,0 +1,40 @@
+var _dropdownSocials = function() {
+    $('.socials-dropdown').dropdown({
+        allowAdditions: true,
+        onNoResults: function(searchValue) {
+            $(this).dropdown('set value', searchValue);
+        }
+    });
+}
+
+var _rmSocial = function(elt) {
+    if ( typeof elt == 'undefined') {
+        elt = $('#social .stored');
+    }
+    elt.find('.delsocial').click(function(e){
+        e.preventDefault();
+        var _this = $(this);
+        _this.parents('.field.stored').remove();
+    });
+}
+
+$(function(){
+    _rmSocial();
+    _dropdownSocials();
+
+    $('a.addsocial').click(function(e) {
+        e.preventDefault();
+
+        var _newindex = $(this).parents('.addsocial').find('.combo-social:last .socials-dropdown').attr('id').replace('social_new_type_', '');
+        ++_newindex;
+        $(this).parents('.addsocial').find ('.combo-social:last')
+            .clone() // copy
+            .insertAfter('#social .combo-social:last') // where
+            .find('.socials-dropdown').attr('id', 'social_new_type_' + _newindex).dropdown('clear')
+            .find('input:not(.search)').attr('id', 'social_new_type_input_' + _newindex).attr('name', 'social_new_type_' + _newindex)
+            .parent().parent().parent().find('input.value').attr('id', 'social_new_value_' + _newindex).attr('name', 'social_new_value_' + _newindex).val('')
+        ;
+
+        _dropdownSocials();
+    });
+});
diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index b126da53e..e3cd2b3ac 100644
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -198,6 +198,7 @@
 {% block javascripts %}
         <script type="text/javascript">
             {% include "elements/js/choose_adh.js.twig" with {"js_chosen_id": "#parent_id"} %}
+            {% include "elements/js/choose_social.js.twig" %}
 
             $(function() {
                 $('#company_field.nocompany').addClass('displaynone');
diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 965a44f94..5a8eef96b 100644
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -873,6 +873,8 @@
 
 {% block javascripts %}
         <script type="text/javascript">
+            {% include "elements/js/choose_social.js.twig" %}
+
             $(function(){
     {% if pref.pref_mail_method != constant('Galette\\Core\\GaletteMail::METHOD_SMTP') %}
                 $('#smtp_parameters').addClass('displaynone');
diff --git a/ui/semantic/galette/modules/dropdown.overrides b/ui/semantic/galette/modules/dropdown.overrides
index 6a4c7d4b8..62edaaead 100644
--- a/ui/semantic/galette/modules/dropdown.overrides
+++ b/ui/semantic/galette/modules/dropdown.overrides
@@ -32,13 +32,14 @@
 /*------------------------
      Search dropdown
 -------------------------*/
+.ui.form .fields .field .ui.input.search input,
+.ui.search.selection.dropdown > input.search {
+  width: 100%;
+}
 .ui.search.selection.paginated.dropdown {
     > .ui.mini.button {
         display: none;
     }
-    > input.search {
-        width: 100%;
-    }
     &.visible > .ui.mini.button {
         display: block;
         margin-right: 0;
-- 
2.39.2