ferme automatiquement l'alert

index.php

@@ -336,13 +336,12 @@ if (!$isConfig and $hasSupplier) {
 		</header>
 		<main>
 		<?php if (!$hasSupplier) : ?>
-			<section class="container-fluid">
-				<div class="row my-3 g-3">
-					<div class="col-12">
-						<div class="alert alert-danger" role="alert">
-							Pas de fournisseur !
-						</div>
-					</div>
+			<section class="container-fluid pt-3">
+				<div class="alert alert-danger alert-dismissible mb-3" role="alert">
+					Pas de fournisseur !
+					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
+				</div>
+				<div class="row mb-3 g-3">
 					<div class="col-12">
 						<form action="<?php echo generateUrl(); ?>" method="post">
 							<datalist id="supplierList">
@@ -356,7 +355,7 @@ if (!$isConfig and $hasSupplier) {
 									<span class="d-inline d-sm-none" title="<?php echo generateUrl(); ?>">&hellip;</span>
 									/
 								</span>
-								<input type="text" class="form-control" name="supplier" list="supplierList" required />
+								<input type="text" class="form-control js-closealerts" name="supplier" list="supplierList" required />
 								<button class="btn btn-primary" type="submit">Aller</button>
 							</div>
 						</form>
@@ -592,7 +591,7 @@ if (!$isConfig and $hasSupplier) {
 					});
 				});
 
-				fields.forEach(function (field) {
+				fields.forEach(function (field) {e
 					if (
 						(form.elements[field].value === '')
 						&& (window.localStorage.getItem('mon_panier_bio_' + field) !== null)
@@ -601,6 +600,16 @@ if (!$isConfig and $hasSupplier) {
 					}
 				});
 			});
+			document.querySelectorAll('.js-closealerts').forEach(function (element) {
+				element.addEventListener('input', function (event) {
+					if (event.target.value !== '') {
+						document.querySelectorAll('.alert').forEach(function (alertElement) {
+							var alert = bootstrap.Alert.getOrCreateInstance(alertElement)
+							alert.close();
+						});
+					}
+				});
+			});
 		</script>
 	</body>
 </html>