css added

members/admin.py

@@ -430,6 +430,8 @@ def get_member_info(request,coop_id):
             'shift_type',
             'parent_id',
             'is_associated_people',
+            'parent_name',
+            'barcode_base',
         ]
         member = api.search_read('res.partner', [['barcode_base', '=', coop_id]], fields)
 

members/static/css/admin/manage_attached.css

@@ -31,29 +31,41 @@
     font-size: 1.3em;
 }
 
-/* Search membres area */
+.create_pair_button {
+    display: flex;
+    justify-content: center;
+    margin: 100px 0 100px 0;
+}
 
-#search_member_form_area {
-    align-items: center;
+@media screen and (max-width: 992px) {
+    .create_pair_button {
+        margin: auto;
+    }
 }
 
-#search_member_form {
-    margin-left: 10px;
+#createPair {
+    border-radius: 30px; 
 }
 
-.search_member_results_area {
-    margin-top: 15px;
-    display: flex;
+/* Search membres area */
+
+.search_member_form_area {
     align-items: center;
+    padding-bottom: 20px;
 }
 
-.search_results_text {
-    min-width: 150px;
+.search_member_form {
+    margin-left: 10px;
 }
 
-.search_member_results {
-    display: flex;
-    flex-wrap: wrap;
+/* Member infos */
+.tile_icon {
+    margin-right: 15px;
+    color: #00a573;
+}
+
+.member_info {
+    font-weight: bold;
 }
 
 /* -- Tiles */
@@ -70,17 +82,19 @@
 }
 
 .tile {
-    flex: 1 0 45%;
+    flex: 1 0 20%;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    text-align: center;
     border-radius: 30px;
     margin: 1rem 1rem;
+    padding: 1rem;
     box-shadow: 2px 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
 }
-.high_tile {
-    min-height: 350px;
-}
-.small_tile {
-    min-height: 250px;
+
+.tile_content {
+    height: 100%;
+    flex-direction: column;
+    text-align: center;
+    font-size: 1.6rem;
 }

members/static/js/admin/manage_attached.js

 var parentId = null;
 var childId = null;
 
+const possible_cooperative_state = {
+  suspended: "Rattrapage",
+  exempted: "Exempté.e",
+  alert: "En alerte",
+  up_to_date: "À jour",
+  unsubscribed: "Désinscrit.e des créneaux",
+  delay: "En délai",
+  gone: "Parti.e"
+};
+
 /**
  * Load member infos
  */
@@ -49,7 +59,15 @@ function ready_for_submission() {
 function display_member_infos(divId, memberData) {
   console.log(memberData)
   $("#" + divId).show()
-  $("#" + divId).find("#name").text(memberData.name)
+  $("#" + divId).find(".member_name").text(memberData.name)
+  $("#" + divId).find(".member_status").text(possible_cooperative_state[memberData.cooperative_state])
+  $("#" + divId).find(".member_shift_name").text(memberData.current_template_name);
+  $("#" + divId).find(".member_coop_number").text(memberData.barcode_base);
+
+  if (memberData.is_associated_people === false) {
+      $("#" + divId).find(".member_associated_partner_area").hide();
+  }
+
   if (parentId != null && childId != null) {
     $("#createPair").prop("disabled", false)
   }

templates/members/admin/manage_attached_create_pair.html

@@ -27,33 +27,83 @@
 
     <div class="page_content">
         <div class="tiles_container">
-            <div class="tile high_tile">
-              <div id="search_member_form_area">
+            <div class="tile">
+              <div class="search_member_form_area" id="search_member_form_area">
                   <h4>Rechercher le.a coopérateur.ice titulaire</h4>
-                  <form autocomplete="off" id="search_member_form" action="javascript:;" method="post">
+                  <form autocomplete="off" id="search_member_form" class="search_member_form" action="javascript:;" method="post">
                     <input name="searchParent" type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." required>
                   </form>
               </div>
               <div id="parentInfo" style="display:none;">
-                <div>Nom</div><div id="name"></div>
+                
+                <div class="tile_title">
+                  <i class="fas fa-user tile_icon"></i>
+                  <span class="member_info member_name"></span>
                 </div>
+                <div class="tile_content">
+                  <div class="member_status_text_container">
+                    <span>Mon statut : </span>
+                    <span class="member_info member_status"></span>
                   </div>
+                  <div class="member_shift_name_area">
+                    <span>Mon créneau : </span>
+                    <span class="member_shift_name member_info"></span>
                   </div>
-          <div class="tiles_container">
-            <div class="tile high_tile">
-              <div id="search_member_form_area">
+                  <div class="member_coop_number_area">
+                    <span>Mon numéro de coop : </span>
+                    <span class="member_coop_number member_info"></span>
+                  </div>
+                  <div class="member_associated_partner_area">
+                    <span>Je suis déjà en binôme ! </span>
+                    <span class="member_associated_partner member_info"></span>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+
+          <div class="create_pair_button">
+            <button id="createPair" type="button" name="button" disabled>Créer le binôme</button>
+          </div>
+
+
+            <div class="tile">
+              <div class="search_member_form_area" id="search_member_form_area">
                   <h4>Rechercher le.a coopérateur.ice co-titulaire</h4>
-                  <form autocomplete="off" id="search_member_form_child" action="javascript:;" method="post">
+                  <form autocomplete="off" id="search_member_form_child" class="search_member_form" action="javascript:;" method="post">
                     <input name="searchChild" type="text" id="search_child_input" value="" placeholder="Nom ou numéro du coop..." required>
                   </form>
               </div>
               <div id="childInfo" style="display:none;">
-                <div>Nom</div><div id="name"></div>
+
+                <div class="tile_title">
+                  <i class="fas fa-user tile_icon"></i>
+                  <span class="member_info member_name"></span>
+                </div>
+                <div class="tile_content">
+                  <div class="member_status_text_container">
+                    <span>Mon statut : </span>
+                    <span class="member_info member_status"></span>
+                  </div>
+                  <div class="member_shift_name_area">
+                    <span>Mon créneau : </span>
+                    <span class="member_shift_name member_info"></span>
+                  </div>
+                  <div class="member_coop_number_area">
+                    <span>Mon numéro de coop : </span>
+                    <span class="member_coop_number member_info"></span>
+                  </div>
+                  <div class="member_associated_partner_area">
+                    <span>Je suis déjà en binôme ! </span>
+                    <span class="member_associated_partner member_info"></span>
+                  </div>
+                </div>
+
+                </div>
               </div>
             </div>
           </div>
-          <div class="create-pair">
-            <button id="createPair" type="button" name="button" disabled>Créer le binôme</button>
     </div>
 </div>