search step

members/static/css/admin/manage_attached.css

+.header {
+    margin: 1rem 0;
+}
+
+.login_area {
+    position: absolute;
+    display: block;
+    top: 5px;
+    right: 5px;
+}
+
+#back_to_admin_index {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+}
+
+/* Search membres area */
+#search_member_area {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#search_member_form_area {
+    display:flex;
+    align-items: center;
+}
+
+#search_member_form {
+    margin-left: 10px;
+}
+
+.search_member_results_area {
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.search_results_text {
+    min-width: 150px;
+}
+
+.search_member_results {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.btn_possible_member {
+    margin: 0.5rem 1rem;
+}
\ No newline at end of file

members/static/js/admin/manage_attached.js

+$(document).ready(function() {
+    if (coop_is_connected()) {
+        $.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } });
+
+        $(".page_content").show();
+    } else {
+        $(".page_content").hide();
+    }
+
+    $('#back_to_admin_index').on('click', function() {
+        let base_location = window.location.href.split("manage_attached")[0].slice(0, -1);
+
+        window.location.assign(base_location);
+    });
+
+    /**
+ * Display the members from the search result
+ */
+function display_possible_members() {
+    $('.search_member_results_area').show();
+    $('.search_member_results').empty();
+    $('.btn_possible_member').off();
+
+    let no_result = true;
+
+    if (members_search_results.length > 0) {
+        for (member of members_search_results) {
+            $(".search_results_text").show();
+            no_result = false;
+
+            // Display results (possible members) as buttons
+            var member_button = '<button class="btn--success btn_possible_member" member_id="'
+                + member.id + '">'
+                + member.barcode_base + ' - ' + member.name
+                + '</button>';
+
+            $('.search_member_results').append(member_button);
+        }
+
+        // Set action on member button click
+        $('.btn_possible_member').on('click', function() {
+            for (member of members_search_results) {
+                if (member.id == $(this).attr('member_id')) {
+                    selected_member = member;
+                    load_member_future_shifts();
+                    $('.search_member_results').empty();
+                    $('.search_member_results_area').hide();
+                    $('#search_member_input').val('');
+
+                    break;
+                }
+            }
+        });
+    }
+
+    if (no_result === true) {
+        $(".search_results_text").hide();
+        $('.search_member_results').html(`<p>
+            <i>Aucun résultat ! Vérifiez votre recherche, ou si le.la membre n'est pas déjà dans le tableau...</i>
+        </p>`);
+    }
+}
+
+    // Set action to search for the member
+    $('#search_member_form').submit(function() {
+        let search_str = $('#search_member_input').val();
+
+        $.ajax({
+            url: '/members/search/' + search_str,
+            dataType : 'json',
+            success: function(data) {
+                members_search_results = [];
+
+                for (member of data.res) {
+                    if (member.is_member || member.is_associated_people) {
+                        members_search_results.push(member);
+                    }
+                }
+
+                display_possible_members();
+            },
+            error: function() {
+                err = {
+                    msg: "erreur serveur lors de la recherche de membres",
+                    ctx: 'search_member_form.search_members'
+                };
+                report_JS_error(err, 'members.admin');
+
+                $.notify("Erreur lors de la recherche de membre, il faut ré-essayer plus tard...", {
+                    globalPosition:"top right",
+                    className: "error"
+                });
+            }
+        });
+    });
+});
\ No newline at end of file

templates/members/admin/manage_attached.html

@@ -15,7 +15,34 @@
 
 {% block content %}
 <div class="page_body">
-BONJOUR MONDE
+    <div id="back_to_admin_index">
+        <button type="button" class="btn--danger"><i class="fas fa-arrow-left"></i>&nbsp; Retour</button>
+    </div>
+    <div class="login_area">
+        {% include "common/conn_admin.html" %}
+    </div>
+    <div class="header txtcenter">
+        <h1>Gestion des Binômes</h1>
+        <h2>Créer ou désolidariser un binôme</h2>
+    </div>
+
+    <div class="page_content">
+        <div id="search_member_area">
+          <div id="search_member_form_area">
+            <h4>Rechercher le.a coopérateur.ice titulaire</h4>
+            <form id="search_member_form" action="javascript:;" method="post">
+              <input type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." required>
+              <button type="submit" class="btn--primary" id="search_member_button">Recherche</button>
+            </form>
+          </div>
+        </div>
+        <div class="search_member_results_area" style="display:none;">
+            <div class="search_results_text">
+                <p><i>Choisissez parmi les membres trouvés :</i></p>
+            </div>
+            <div class="search_member_results"></div>
+        </div>
+    </div>
 </div>
 
 <script src='{% static "js/all_common.js" %}?v='></script>