a
This commit is contained in:
parent
0a0ffac502
commit
272ee08610
|
|
@ -164,157 +164,306 @@
|
|||
|
||||
<!-- Section des documents joints -->
|
||||
<?php if($idDemandeRemboursement > "0"): ?>
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light py-3">
|
||||
<h4 class="mb-0 text-primary">
|
||||
<i class="fas fa-paperclip me-2"></i>
|
||||
<?= _("Factures des prestations") ?>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<?php if($codeEtatDemandeRemboursement == "0"): ?>
|
||||
<form enctype="multipart/form-data" action="Remboursement" method="post">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light py-3">
|
||||
<h4 class="mb-0 text-primary">
|
||||
<i class="fas fa-paperclip me-2"></i>
|
||||
<?= _("Factures des prestations") ?>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<?php if($codeEtatDemandeRemboursement == "0"): ?>
|
||||
|
||||
<!-- <input type="hidden" id="csrf_token_upload" name="csrf_token_upload" value="<?= htmlspecialchars($token) ?>"> -->
|
||||
<input class="form-control" type="text" id="csrf_token_upload" name="csrf_token_upload" value="<?= htmlspecialchars($token) ?>">
|
||||
|
||||
<div class="alert alert-info mb-4">
|
||||
<small>
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<?= _("Vous pouvez joindre vos factures ci-dessous mais assurez-vous qu'elles soient lisibles. Formats acceptés: bmp, gif, jpeg, jpg, pdf, png.") ?>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 align-items-end">
|
||||
<!-- Upload de fichier -->
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label fw-bold">
|
||||
<?= _("Ajouter facture(s)") ?> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input class="form-control" name="fichier_upload" type="file"
|
||||
id="fichier_upload" required />
|
||||
<!-- DEBUT CLAUDE -->
|
||||
<div class="progress mt-2 mb-3 d-none" id="upload-progress-container">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
|
||||
id="upload-progress-bar" role="progressbar"
|
||||
style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
0%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message de retour -->
|
||||
<div id="upload-feedback" class="mb-3"></div>
|
||||
|
||||
<form id="form-upload" enctype="multipart/form-data">
|
||||
|
||||
<input type="hidden" id="csrf_token_upload" name="csrf_token_upload"
|
||||
value="<?= htmlspecialchars($token) ?>">
|
||||
|
||||
<div class="alert alert-info mb-4">
|
||||
<small>
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<?= _("Vous pouvez joindre vos factures ci-dessous mais assurez-vous qu'elles soient lisibles. Formats acceptés: bmp, gif, jpeg, jpg, pdf, png.") ?>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 align-items-end">
|
||||
|
||||
<!-- Upload de fichier -->
|
||||
<div class="col-12 col-md-6">
|
||||
<label for="fichier_upload" class="form-label fw-bold">
|
||||
<?= _("Ajouter facture(s)") ?> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input class="form-control" name="fichier_upload" type="file"
|
||||
id="fichier_upload"
|
||||
accept=".bmp,.gif,.jpeg,.jpg,.pdf,.png"
|
||||
required />
|
||||
<div class="invalid-feedback" id="fichier-error"></div>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="d-grid gap-2 d-md-flex">
|
||||
<button type="submit" id="btn-upload"
|
||||
class="btn btn-primary flex-fill btn_autre">
|
||||
<i class="fas fa-upload me-2"></i><?= _("Envoyer") ?>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary flex-fill btn_autre"
|
||||
onclick="actualiser_remboursement();">
|
||||
<i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const ALLOWED_EXTENSIONS = ['bmp', 'gif', 'jpeg', 'jpg', 'pdf', 'png'];
|
||||
const MAX_SIZE_MB = 10;
|
||||
const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
|
||||
|
||||
const form = document.getElementById('form-upload');
|
||||
const fileInput = document.getElementById('fichier_upload');
|
||||
const btnUpload = document.getElementById('btn-upload');
|
||||
const feedback = document.getElementById('upload-feedback');
|
||||
const progressBar = document.getElementById('upload-progress-bar');
|
||||
const progressCtn = document.getElementById('upload-progress-container');
|
||||
|
||||
/* ---------- Validation côté client ---------- */
|
||||
function validateFile(file) {
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (!ALLOWED_EXTENSIONS.includes(ext)) {
|
||||
return `Format non accepté. Formats autorisés : ${ALLOWED_EXTENSIONS.join(', ')}.`;
|
||||
}
|
||||
if (file.size > MAX_SIZE_BYTES) {
|
||||
return `Fichier trop volumineux (max ${MAX_SIZE_MB} Mo).`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
fileInput.classList.add('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = msg;
|
||||
feedback.innerHTML = '';
|
||||
}
|
||||
|
||||
function clearError() {
|
||||
fileInput.classList.remove('is-invalid');
|
||||
document.getElementById('fichier-error').textContent = '';
|
||||
}
|
||||
|
||||
function setFeedback(type, msg) {
|
||||
feedback.innerHTML = `
|
||||
<div class="alert alert-${type} py-2">
|
||||
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
|
||||
${msg}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function setButtonLoading(loading) {
|
||||
btnUpload.disabled = loading;
|
||||
btnUpload.innerHTML = loading
|
||||
? '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span><?= _("Envoi en cours...") ?>'
|
||||
: '<i class="fas fa-upload me-2"></i><?= _("Envoyer") ?>';
|
||||
}
|
||||
|
||||
function setProgress(pct) {
|
||||
progressBar.style.width = pct + '%';
|
||||
progressBar.textContent = pct + '%';
|
||||
progressBar.setAttribute('aria-valuenow', pct);
|
||||
}
|
||||
|
||||
/* ---------- Soumission AJAX ---------- */
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
clearError();
|
||||
feedback.innerHTML = '';
|
||||
|
||||
const file = fileInput.files[0];
|
||||
if (!file) {
|
||||
showError('Veuillez sélectionner un fichier.');
|
||||
return;
|
||||
}
|
||||
|
||||
const validationError = validateFile(file);
|
||||
if (validationError) {
|
||||
showError(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
/* Progression */
|
||||
xhr.upload.addEventListener('progress', function (e) {
|
||||
if (e.lengthComputable) {
|
||||
progressCtn.classList.remove('d-none');
|
||||
setProgress(Math.round((e.loaded / e.total) * 100));
|
||||
}
|
||||
});
|
||||
|
||||
/* Succès */
|
||||
xhr.addEventListener('load', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setProgress(0);
|
||||
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
setFeedback('success', '<?= _("Fichier envoyé avec succès.") ?>');
|
||||
form.reset();
|
||||
clearError();
|
||||
actualiser_remboursement();
|
||||
} else {
|
||||
setFeedback('danger', `<?= _("Erreur lors de l'envoi.") ?> (HTTP ${xhr.status})`);
|
||||
}
|
||||
});
|
||||
|
||||
/* Erreur réseau */
|
||||
xhr.addEventListener('error', function () {
|
||||
setButtonLoading(false);
|
||||
progressCtn.classList.add('d-none');
|
||||
setFeedback('danger', '<?= _("Erreur réseau. Veuillez réessayer.") ?>');
|
||||
});
|
||||
|
||||
xhr.open('POST', 'Remboursement');
|
||||
setButtonLoading(true);
|
||||
xhr.send(formData);
|
||||
});
|
||||
|
||||
/* Validation à la sélection du fichier */
|
||||
fileInput.addEventListener('change', function () {
|
||||
clearError();
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
const err = validateFile(file);
|
||||
if (err) showError(err);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="d-grid gap-2 d-md-flex">
|
||||
<button type="submit" name="submit" class="btn btn-primary flex-fill btn_autre">
|
||||
<i class="fas fa-upload me-2"></i><?= _("Envoyer") ?>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-outline-secondary flex-fill btn_autre"
|
||||
onclick="javascript:actualiser_remboursement();">
|
||||
<i class="fas fa-sync-alt me-2"></i><?= _("Actualiser") ?>
|
||||
</button>
|
||||
<!-- FIN CLAUDE -->
|
||||
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if((isset($msgErreurGed)) && ($msgErreurGed>" ")) : ?>
|
||||
<div class="alert alert-success mt-3" role="alert">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
<?= $msgErreurGed ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Liste des documents -->
|
||||
<?php if(count($geds) > 0): ?>
|
||||
<div class="mt-4">
|
||||
<div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 text-dark">
|
||||
<i class="fas fa-list me-2"></i>
|
||||
<span class="hide-on-mobile"><?= _("Liste des factures")?></span>
|
||||
<span class="badge bg-primary view-end"><?= format_N(count($geds)).' '._("facture(s)") ?> </span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if((isset($msgErreurGed)) && ($msgErreurGed>" ")) : ?>
|
||||
<!-- <div class="alert alert-danger mt-3" role="alert"> -->
|
||||
<div class="alert alert-success mt-3" role="alert">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
<?= $msgErreurGed ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Liste des documents -->
|
||||
<?php if(count($geds) > 0): ?>
|
||||
<div class="mt-4">
|
||||
<div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 text-dark">
|
||||
<i class="fas fa-list me-2"></i>
|
||||
<span class="hide-on-mobile"><?= _("Liste des factures")?></span>
|
||||
<span class="badge bg-primary view-end"><?= format_N(count($geds)).' '._("facture(s)") ?> </span>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="d-none d-md-block">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover" style="font-size:9pt; white-space: nowrap;">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th width="20%" class="text-center">Date</th>
|
||||
<th class="text-center"><?= _("Facture") ?></th>
|
||||
<th width="15%" class="text-center"><?= _("Action") ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($geds as $ged):
|
||||
$idGed = $this->nettoyer($ged['idGed']);
|
||||
$cheminFichier = $this->nettoyer($ged['cheminFichier']);
|
||||
?>
|
||||
<tr>
|
||||
<td class="text-center"><?= dateheureLang($this->nettoyer($ged['dateSysteme']), $_SESSION['lang']) ?></td>
|
||||
<td class="text-truncate" style="max-width: 200px;"
|
||||
data-bs-toggle="tooltip" title="<?= $this->nettoyer($ged['nomOrigine']) ?>">
|
||||
<?= $this->nettoyer($ged['nomOrigine']) ?>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="<?= $cheminFichier ?>" target="_blank"
|
||||
class="btn btn-sm btn-outline-danger">
|
||||
<i class="fas fa-download me-1 d-none d-sm-inline"></i>
|
||||
<?= _("Télécharger") ?>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Affichage mobile (cartes) -->
|
||||
<div class="d-md-none">
|
||||
<?php foreach ($geds as $ged):
|
||||
$idGed = $this->nettoyer($ged['idGed']);
|
||||
$cheminFichier = $this->nettoyer($ged['cheminFichier']);
|
||||
?>
|
||||
<div class="card-body py-2">
|
||||
<div class="row mb-2">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small me-3">Date</span>
|
||||
<span class="fw-bold me-2"><?= dateheureLang($this->nettoyer($ged['dateSysteme']), $_SESSION['lang']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-10 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small me-3"><?= _("Facture") ?></span>
|
||||
<span class="text-truncate" style="max-width: 200px;"><?= $this->nettoyer($ged['nomOrigine']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="<?= $cheminFichier ?>"
|
||||
class="btn btn-sm btn-danger w-100">
|
||||
<i class="fas fa-download me-1 d-sm-inline" style="font-size:1.8rem !important"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-none d-md-block">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover" style="font-size:9pt; white-space: nowrap;">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th width="20%" class="text-center">Date</th>
|
||||
<th class="text-center"><?= _("Facture") ?></th>
|
||||
<th width="15%" class="text-center"><?= _("Action") ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($geds as $ged):
|
||||
$idGed = $this->nettoyer($ged['idGed']);
|
||||
$cheminFichier = $this->nettoyer($ged['cheminFichier']);
|
||||
?>
|
||||
<tr>
|
||||
<td class="text-center"><?= dateheureLang($this->nettoyer($ged['dateSysteme']), $_SESSION['lang']) ?></td>
|
||||
<td class="text-truncate" style="max-width: 200px;"
|
||||
data-bs-toggle="tooltip" title="<?= $this->nettoyer($ged['nomOrigine']) ?>">
|
||||
<?= $this->nettoyer($ged['nomOrigine']) ?>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="<?= $cheminFichier ?>" target="_blank"
|
||||
class="btn btn-sm btn-outline-danger">
|
||||
<i class="fas fa-download me-1 d-none d-sm-inline"></i>
|
||||
<?= _("Télécharger") ?>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Affichage mobile (cartes) -->
|
||||
<div class="d-md-none">
|
||||
<?php foreach ($geds as $ged):
|
||||
$idGed = $this->nettoyer($ged['idGed']);
|
||||
$cheminFichier = $this->nettoyer($ged['cheminFichier']);
|
||||
?>
|
||||
<div class="card-body py-2">
|
||||
<div class="row mb-2">
|
||||
<div class="col-12 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small me-3">Date</span>
|
||||
<span class="fw-bold me-2"><?= dateheureLang($this->nettoyer($ged['dateSysteme']), $_SESSION['lang']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-10 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small me-3"><?= _("Facture") ?></span>
|
||||
<span class="text-truncate" style="max-width: 200px;"><?= $this->nettoyer($ged['nomOrigine']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2 mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="<?= $cheminFichier ?>"
|
||||
class="btn btn-sm btn-danger w-100">
|
||||
<i class="fas fa-download me-1 d-sm-inline" style="font-size:1.8rem !important"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="text-center text-muted py-4">
|
||||
<div class="alert alert-info mt-3" style="margin-bottom:15px;">
|
||||
<small>
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<?= _("Aucune facture trouvée pour les critères sélectionnés") ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="text-center text-muted py-4">
|
||||
<div class="alert alert-info mt-3" style="margin-bottom:15px;">
|
||||
<small>
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
<?= _("Aucune facture trouvée pour les critères sélectionnés") ?>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div id="div_ged_0"></div>
|
||||
<div id="div_ged_0"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user