From 5a50a1c92cbbb558549e8cbd1f5352ffb735f800 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 9 Apr 2026 19:50:34 +0000
Subject: [PATCH] dert

---
 Js/fonctions.js                  |  75 ++++++++-----
 Vue/Ajaxpaysterritoire/index.php | 181 +++++++++++++++++++------------
 2 files changed, 159 insertions(+), 97 deletions(-)

diff --git a/Js/fonctions.js b/Js/fonctions.js
index 27da000c..c28f1951 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -86157,32 +86157,55 @@ function ajax_police_context()
 	}
 }
 
-function affiche_pays_territoire()
-{
-	var codeTerritoire = $('#codeTerritoire').val();
-	
-	donnees = 'codeTerritoire='+codeTerritoire;
-	
-	div_pays=$("#div_pays");
-	
-	div_pays.html('<div style="padding-top:80px; text-align:center; font-size:14px; color: #0088cf; "><span><i class="fa fa-spinner fa-spin fa-5x" >' + '</span></div>');
-	
-	$.ajax({
-		url: $("#racineWeb").val()+"Ajaxpaysterritoire/",
-		type : 'post',
-		data: donnees,
-		error: function(errorData){			
-			//alert("Erreur : "+errorData);
-		},
-		success: function(data) {
-			
-			$('#div_pays').html(data);
-			datatab_plus();
-		},
-		complete: function() {
-			
-		}
-	}); 
+/**
+ * Affiche la liste des pays selon le territoire sélectionné
+ */
+function affiche_pays_territoire() {
+    const racineWeb = $("#racineWeb").val();
+    const codeTerritoire = $('#codeTerritoire').val();
+    const codeLangue = $("#codeLangue").val();
+    const $divPays = $("#div_pays");
+
+    // 1. Validation de la sélection
+    if (!codeTerritoire) return;
+
+    // 2. Feedback visuel (SaaS UX)
+    const loadingMsg = (codeLangue === "en_US") ? "Loading countries..." : "Chargement des pays...";
+    
+    $divPays.html(`
+        <div class="d-flex flex-column align-items-center justify-content-center p-5 text-primary animate__animated animate__fadeIn">
+            <div class="spinner-border mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
+            <h6 class="fw-bold text-uppercase small">${loadingMsg}</h6>
+        </div>
+    `);
+
+    // 3. Appel AJAX
+    $.ajax({
+        url: racineWeb + "Ajaxpaysterritoire/",
+        type: 'post',
+        data: { codeTerritoire: codeTerritoire }, // Utilisation d'un objet JSON
+        success: function(data) {
+            // Injection des données avec une transition fluide
+            $divPays.hide().html(data).fadeIn(300);
+
+            // 4. Initialisation de la SmartTable ESI
+            // On passe le titre pour les exports PDF/Excel
+            const titreExport = (codeLangue === "en_US") ? "Countries by Territory" : "Liste des Pays par Territoire";
+            
+            // On attend que le DOM soit prêt pour initialiser DataTables
+            setTimeout(() => {
+                initSmartTable('.datatable-inter', titreExport, [0, 'asc']);
+            }, 100);
+        },
+        error: function() {
+            $divPays.html(`
+                <div class="alert alert-warning border-0 shadow-sm text-center p-4">
+                    <i class="fas fa-exclamation-triangle fa-2x mb-2 opacity-50"></i>
+                    <p class="mb-0 fw-bold">${(codeLangue === "en_US") ? "Error retrieving data." : "Erreur lors de la récupération des données."}</p>
+                </div>
+            `);
+        }
+    });
 }
 
 
diff --git a/Vue/Ajaxpaysterritoire/index.php b/Vue/Ajaxpaysterritoire/index.php
index 6c97b84d..b6ee1aad 100755
--- a/Vue/Ajaxpaysterritoire/index.php
+++ b/Vue/Ajaxpaysterritoire/index.php
@@ -1,74 +1,113 @@
-<div id="div_garant">
-	<div class="row">	
-		<div id="div_sans_territoire" class="col-5" >
-			<legend> <?= _("Pays hors du territoire") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive datatabplus compact" style="font-size:10pt;">
-				<thead>
-				  <tr>
-					<th style='text-align:center'> <?= _("Pays") ?> </th>
-					<th width="20%" style='text-align:center'> => </th>
-				  </tr>
-				
-				  <tr>
-					<th colspan="2"> <button type="button" style="font-size:10pt;" class="form-control btn btn-primary" onclick="javascript:ajouter_tous_pays_territoire();" > <?= _("Ajouter tous"). " ==>" ?> </button> </th> 
-				  </tr>
-				
-				</thead>
+<div id="div_garant" class="animate__animated animate__fadeIn">
+    <div class="row g-4">
+        <div id="div_sans_territoire" class="col-md-5">
+            <div class="card border-0 shadow-sm">
+                <div class="card-header bg-white py-3 border-bottom-0">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <h6 class="mb-0 fw-bold text-uppercase text-danger small">
+                            <i class="fas fa-external-link-alt me-2"></i><?= _("Pays hors du territoire") ?>
+                        </h6>
+                        <button type="button" class="btn btn-primary btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="javascript:ajouter_tous_pays_territoire();">
+                            <?= _("Ajouter tous") ?> <i class="fas fa-angle-double-right ms-1"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle mb-0 datatable-inter compact" style="font-size: 9.5pt; width: 100%;">
+                            <thead class="table-light">
+                                <tr>
+                                    <th class="ps-3"><?= _("Désignation Pays") ?></th>
+                                    <th class="text-center" width="60px"><?= _("Action") ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($pays_sans_territoire as $v):
+                                    $codePays = $v['codePays'];
+                                    $pays = est_anglophone() ? $v['paysEng'] : $v['pays'];
+                                ?>
+                                <tr>
+                                    <td class="ps-3 fw-medium text-dark"><?= $pays ?></td>
+                                    <td class="text-center">
+                                        <button type="button" class="btn btn-outline-primary btn-xs rounded-circle shadow-none" 
+                                                onClick="javascript:ajouter_un_pays_territoire('<?=$codePays?>');" title="<?= _("Ajouter") ?>">
+                                            <i class="fas fa-arrow-right"></i>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-				<tbody>
-					<?php foreach ($pays_sans_territoire as $v):
-						$codePays	= $v['codePays'];
-						$pays 		= $v['pays'];
-						
-						if (est_anglophone()){
-							$pays 	= $v['paysEng'];
-						}
-					?>
-					<tr valign="top">
-						<td align='center'><?=  $pays ?></td>
-						<td align='center'> <input type="button" value="=>" onClick="javascript:ajouter_un_pays_territoire('<?=$codePays?>');" ></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
+        <div id="div_avec_seuil" class="col-md-7">
+            <div class="card border-0 shadow-sm border-start border-success border-4">
+                <div class="card-header bg-white py-3 border-bottom-0">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <h6 class="mb-0 fw-bold text-uppercase text-success small">
+                            <i class="fas fa-check-circle me-2"></i><?= _("Pays du territoire") ?>
+                        </h6>
+                        <button type="button" class="btn btn-danger btn-sm rounded-pill px-3 fw-bold shadow-sm" onclick="javascript:retirer_tous_pays_territoire();">
+                            <i class="fas fa-angle-double-left me-1"></i> <?= _("Retirer tous") ?>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle mb-0 datatable-inter compact" style="font-size: 9.5pt; width: 100%;">
+                            <thead class="table-light">
+                                <tr>
+                                    <th class="text-center" width="60px"><?= _("Action") ?></th>
+                                    <th class="ps-3"><?= _("Désignation Pays") ?></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php foreach ($pays_avec_territoire as $v):
+                                    $id = $v['id'];
+                                    $pays = est_anglophone() ? $v['paysEng'] : $v['pays'];
+                                ?>
+                                <tr>
+                                    <td class="text-center">
+                                        <button type="button" class="btn btn-outline-danger btn-xs rounded-circle shadow-none" 
+                                                onClick="javascript:retirer_un_pays_territoire('<?=$id?>');" title="<?= _("Retirer") ?>">
+                                            <i class="fas fa-arrow-left"></i>
+                                        </button>
+                                    </td>
+                                    <td class="ps-3 fw-bold text-primary"><?= $pays ?></td>
+                                </tr>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-		<div id="div_avec_seuil" class="col-7" >
-			<legend> <?= _("Pays du territoire") ?> </legend>
-			<table class="table table-striped table-bordered table-hover table-condensed table-responsive datatabplus compact" style="font-size:10pt;">
-				<thead>
-				
-				  <tr>
-					<th width="10%" style='text-align:center'> <= </th>
-					<th style='text-align:center'> <?= _("Pays") ?> </th>
-				  </tr>
-				  
-				  
-				  
-				  <tr>
-					<td colspan="2"> <button type="button" style="font-size:10pt;" class="form-control btn btn-danger" onclick="javascript:retirer_tous_pays_territoire();" > <?= "<== " . _("Retirer tous") ?> </button> </td>						
-				  </tr>
-				  
-				</thead>
+<style>
+    /* Style pour les boutons circulaires de transfert */
+    .btn-xs {
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+    }
+    
+    /* Hover effect sur les cartes de pays */
+    .card:hover {
+        transform: translateY(-2px);
+        transition: transform 0.2s ease-in-out;
+    }
 
-				<tbody>
-					<?php foreach ($pays_avec_territoire as $v):
-						$id	= $v['id'];
-						
-						$pays 		= $v['pays'];
-						
-						if (est_anglophone()){
-							$pays 	= $v['paysEng'];
-						}
-					?>
-					<tr valign="top">
-						<td align='center'> <input type="button" value="<=" onClick="javascript:retirer_un_pays_territoire('<?=$id?>');" ></td>
-						
-						<td align='center'><?=  $pays ?></td>
-					</tr>
-					<?php endforeach; ?>
-				</tbody>
-			</table>
-		</div>
-	</div>	
-</div>	
+    /* Ajustement DataTables pour ces tableaux compacts */
+    .compact.dataTable tbody td {
+        padding: 8px 4px !important;
+    }
+</style>
\ No newline at end of file