Merge pull request #49 from ecolabdata/feat/style-preview-list

feat: style preview search list

ecospheres_migrator/app.py

@@ -78,10 +78,10 @@ def select():
 def select_preview():
     url, username, password = connection_infos()
     if not url:
-        return "Veuillez entrer une URL de catalogue"
+        return "<em>Veuillez entrer une URL de catalogue.</em>"
     query = request.form.get("query")
     if not query:
-        return "Veuillez entrer une requête de recherche"
+        return "<em>Veuillez entrer une requête de recherche.</em>"
     migrator = Migrator(url=url, username=username, password=password)
     results = migrator.select(query=query)
     return render_template("fragments/select_preview.html.j2", results=results)

ecospheres_migrator/templates/fragments/select_preview.html.j2

@@ -1,12 +1,33 @@
-<pre>
 {% if results|length > 0 -%}
-  {{ results|length }} résultat(s)
-  <ul>
-  {%- for result in results -%}
-    <li>{{ result.uuid }} [{{ "T" if result.template else "R" }}] [{{ "d" if (result.state and result.state.stage == "working_copy") else "-" }}{{ result.state.status if result.state else "-" }}]: {{ result.title }}</li>
-  {%- endfor -%}
-  </ul>
+  <p>{{ results|length }} résultat(s)</p>
+  <div class="fr-table fr-mb-1w" id="table-md-component">
+    <div class="fr-table__wrapper">
+      <div class="fr-table__container">
+        <div class="fr-table__content">
+          <table id="table-md">
+            <thead>
+              <tr>
+                <th scope="col">Identifiant</th>
+                <th scope="col">Type</th>
+                <th scope="col">Statut</th>
+                <th scope="col">Titre</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for result in results %}
+              <tr id="table-md-row-key-{{ loop.index }}" data-row-key="{{ loop.index }}">
+                <td>{{ result.uuid }}</td>
+                <td>{{ "Template" if result.template else "Record" }}</td>
+                <td>{{ "Draft" if (result.state and result.state.stage == "working_copy") else "-" }}</td>
+                <td>{{ result.title }}</td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 {% else -%}
-  <em>Pas de résultats</em>
+  <em>Pas de résultats.</em>
 {% endif %}
-</pre>

ecospheres_migrator/templates/select.html.j2

@@ -21,6 +21,7 @@
         <button type="submit"
                 hx-post="{{ url_for('select_preview') }}"
                 hx-target="#select_preview"
+                hx-swap="innerHTML show:top"
                 class="fr-btn fr-btn--secondary fr-mr-1w">Prévisualiser la recherche</button>
       </div>
     </div>