From 5941383734ecc5f3c576ad8be95e80ec0cd79fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Laporte?= <stephane.laporte@enercoop.org>
Date: Mon, 19 May 2025 14:16:56 +0200
Subject: [PATCH] [UPD] CSS, sticky, portal document nav-tabs

---
 templates/operation_templates_page.xml | 184 +++++++++++++++----------
 1 file changed, 113 insertions(+), 71 deletions(-)

diff --git a/templates/operation_templates_page.xml b/templates/operation_templates_page.xml
index f98d768..b482bff 100644
--- a/templates/operation_templates_page.xml
+++ b/templates/operation_templates_page.xml
@@ -4,43 +4,42 @@
 <odoo>
     <template id='sticky_nav_filters'>
         <div
-            class="sticky-top pb-2 bg-white"
+            class="sticky-top2 pb-2 bg-light"
             style="border-bottom: 1px solid rgb(244, 230, 236);"
         >
             <div class="d-block d-md-none">
                 <t t-call="oacc_portal.nav_menu_sm" />
             </div>
-            <div class="container-fluid">
-                <div class="row">
-                    <!-- Title + search -->
-                    <div class="col-12">
-                        <h3 class="text-center mt-2 text-uppercase">Mes documents</h3>
-                    </div>
-                    <div class="col-12">
-                        <form
-                            class=" pt-3"
+            <div>
+                <!-- Title + search -->
+                <div>
+                    <h3 class="text-center mt-2 text-uppercase">Mes documents</h3>
+                </div>
+                <div class="text-center">
+                <div class="text-center d-inline-block">
+                    <form
                             t-att-action="'/operation/%s/document' % (slug(operation))"
                             method="get"
                         >
-                            <div class="input-group input-group-sm mb-3">
-                                <input
+                        <div class="input-group input-group-sm mb-1">
+                            <input
                                     type="search"
                                     name="search-doc"
                                     class="search-query form-control oe_search_box"
                                     placeholder="Rechercher un document"
                                     t-att-value="search or searches['search-doc']"
                                 />
-                                <button
+                            <button
                                     type="submit"
                                     class="btn oe_search_button btn-primary"
                                     aria-label="Search"
                                     title="Rechercher"
                                 >
-                                    <i class="oi oi-search" />
-                                </button>
-                            </div>
-                        </form>
-                    </div>
+                                <i class="oi oi-search" />
+                            </button>
+                        </div>
+                    </form>
+                </div>
                 </div>
             </div>
         </div>
@@ -49,64 +48,107 @@
     <!-- Operation Document template -->
     <template id='operation_document' name="Operation Document">
         <t t-call="oacc_portal.layout_op">
-            <div class="row bg-white">
+            <div class="row">
                 <t t-call="oacc_portal_document.sticky_nav_filters" />
                 <!-- Documents -->
-                <div class="col-12 p-4" t-if="contracts">
-                    <t t-foreach="contracts_type" t-as="type">
-                        <t
-                            t-set="selected_contacts"
-                            t-value="contracts.filtered(lambda c: c.type == type[0])"
-                        />
-                        <t t-if="selected_contacts">
-                            <h5 class="mt-4"><t t-out="type[1]" /></h5>
-                            <div class="table-responsive">
-                            <div class="container">
-                            <div
-                                class="table-datatable"
-                                data-searching="1"
-                                data-ordering="1"
-                                data-paging="1"
-                                data-info="1"
-                                data-order="[[1, 'desc'], [2, 'asc']]"
-                                data-page-length="10"
-                                data-columndefs="[{'target': 0, 'orderable': false }]"
-                            >
-                                <table class="table">
-                                    <thead>
-                                        <tr>
-                                            <th />
-                                            <th>Date de création</th>
-                                            <th>Nom du fichier</th>
-                                        </tr>
-                                    </thead>
-                                    <tr t-foreach="selected_contacts" t-as="c">
-                                        <td>
-                                            <a
-                                                t-att-href="c.access_url"
-                                                target="_blank"
+                <div class="col-12" t-if="contracts">
+                    <ul class="my-2 nav nav-tabs" id="myTab" role="tablist">
+                        <t t-foreach="contracts_type" t-as="type" t-key="type_index">
+                            <t
+                                t-set="selected_contacts"
+                                t-value="contracts.filtered(lambda c: c.type == type[0])"
+                            />
+                            <t t-if="selected_contacts">
+
+                                <li class="nav-item" role="presentation">
+                                <button
+                                        t-attf-class="nav-link #{'active' if type_index == 0 else ''}"
+                                        t-att-id="'%s-tab' % type[0]"
+                                        data-bs-toggle="tab"
+                                        t-att-data-bs-target="'#%s' % type[0]"
+                                        type="button"
+                                        role="tab"
+                                        t-att-aria-controls="type[0]"
+                                        t-attf-aria-selected="#{'true' if type_index == 0 else 'false'}"
+                                    >
+                                    <t t-out="type[1]" />
+                                </button>
+                                </li>
+
+                            </t>
+                        </t>
+                    </ul>
+                    <div class="tab-content" id="myTabContent">
+                        <t t-foreach="contracts_type" t-as="type">
+                            <t
+                                t-set="selected_contacts"
+                                t-value="contracts.filtered(lambda c: c.type == type[0])"
+                            />
+                            <t t-if="selected_contacts">
+
+
+                                <div
+                                    t-attf-class="tab-pane fade #{'show active' if type_index == 0 else ''}"
+                                    t-att-id="type[0]"
+                                    role="tabpanel"
+                                    t-att-aria-labelledby="'%s-tab' % type[0]"
+                                >
+
+
+                                    <div class="table-responsive">
+                                    <div class="container">
+                                    <div
+                                                class="table-datatable"
+                                                data-searching="1"
+                                                data-ordering="1"
+                                                data-paging="1"
+                                                data-info="1"
+                                                data-order="[[1, 'desc'], [2, 'asc']]"
+                                                data-page-length="10"
+                                                data-columndefs="[{'target': 0, 'orderable': false }]"
                                             >
-                                                <i class="fa fa-download" />
-                                            </a>
-                                        </td>
-                                        <td t-att-data-order="c.date_app">
-                                            <t
-                                                t-out="c.date_app.strftime('%d/%m/%Y') if c.date_app else ''"
-                                            />
-                                        </td>
-                                        <td>
-                                            <t t-out="c.name" />
-                                        </td>
-                                    </tr>
-                                </table>
-                            </div>
-                            </div>
-                            </div>
+                                        <table class="table">
+                                            <thead>
+                                                <tr>
+                                                    <th />
+                                                    <th>Date de création</th>
+                                                    <th>Nom du fichier</th>
+                                                </tr>
+                                            </thead>
+                                            <tr t-foreach="selected_contacts" t-as="c">
+                                                <td>
+                                                    <a
+                                                                t-att-href="c.access_url"
+                                                                target="_blank"
+                                                            >
+                                                        <i class="fa fa-download" />
+                                                    </a>
+                                                </td>
+                                                <td t-att-data-order="c.date_app">
+                                                    <t
+                                                                t-out="c.date_app.strftime('%d/%m/%Y') if c.date_app else ''"
+                                                            />
+                                                </td>
+                                                <td>
+                                                    <t t-out="c.name" />
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </div>
+                                    </div>
+                                    </div>
+
+
+
+
+                                </div>
+
+                            </t>
                         </t>
-                    </t>
+                    </div>
                 </div>
-                <div t-else="" class="row">
-                    <p style="padding-top: 10px;">Aucun document trouvé.</p>
+                <div t-else="" class="col-12 text-center text-muted">
+                    Aucun document trouvé
                 </div>
             </div>
         </t>
-- 
GitLab