perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajustement tableau gift

Browse Source
This commit is contained in:
FeFeClochette
2026-01-26 09:05:40 +01:00
parent 6c8a7ab1b4
commit c3ba14c8b0
3 changed files with 332 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
christmas-list.php
+169 -41
View File
@@ -153,37 +153,76 @@ foreach ($gifts as $gift) {
<td>
<?php if ($gift): ?>
<?php
$giftId = (int)$gift['id'];
$desc = htmlspecialchars($gift['gift_description']);
$amt = (float)$gift['amount'];
$plink = trim($gift['product_link'] ?? '');
$payer = $gift['payer_name'] ?? $gift['adult_name']; // sécurité si colonne manquante
$payer = $gift['payer_name'] ?? $gift['adult_name'];
?>
<div class="cl-gift-line">
<?php if ($plink !== ''): ?>
<a href="<?= htmlspecialchars($plink) ?>"
target="_blank"
rel="noopener noreferrer"
class="cl-gift-link"><?= $desc ?></a>
<?php else: ?>
<span class="cl-gift-desc"><?= $desc ?></span>
<?php endif; ?>
<div class="cl-gift-item">
<div class="cl-gift-line">
<!-- Nom du cadeau (lien ou texte) -->
<?php if ($plink !== ''): ?>
<a href="<?= htmlspecialchars($plink) ?>"
target="_blank"
rel="noopener noreferrer"
class="cl-gift-link"><?= $desc ?></a>
<?php else: ?>
<span class="cl-gift-desc"><?= $desc ?></span>
<?php endif; ?>
<?php if ($amt > 0): ?>
<span class="cl-gift-amount">(<?= number_format($amt, 0, ',', ' ') ?> €)</span>
<!-- Zone de droite: prix ou icônes (selon hover/clic) -->
<div class="cl-gift-right">
<span class="cl-gift-amount">(<?= number_format($amt, 0, ',', ' ') ?> €)</span>
<span class="cl-gift-actions">
<!-- Edit -->
<button type="button"
class="cl-gift-action-btn cl-gift-edit"
title="Edita"
aria-label="Edita"
data-id="<?= $giftId ?>"
data-year="<?= $year ?>"
data-child="<?= htmlspecialchars($childName) ?>"
data-occasion="<?= htmlspecialchars($occCode) ?>"
data-adult="<?= htmlspecialchars($gift['adult_name']) ?>"
data-payer="<?= htmlspecialchars($payer) ?>"
data-desc="<?= htmlspecialchars($gift['gift_description']) ?>"
data-amount="<?= htmlspecialchars($gift['amount']) ?>"
data-link="<?= htmlspecialchars($gift['product_link'] ?? '') ?>">
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/>
</svg>
</button>
<!-- Delete -->
<button type="button"
class="cl-gift-action-btn cl-gift-delete"
title="Eliminar"
aria-label="Eliminar"
data-id="<?= $giftId ?>">
<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" aria-hidden="true">
<path d="M9 3h6a1 1 0 0 1 1 1v2h3a1 1 0 1 1 0 2h-1l-1 12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 8H4a1 1 0 1 1 0-2h3V4a1 1 0 0 1 1-1zm-1 5h2v10H8V8zm4 0h2v10h-2V8z"/>
</svg>
</button>
</span>
</div>
</div>
<?php if (!empty($payer) && $payer !== $gift['adult_name']): ?>
<small style="color:#b91c1c; font-style:italic;">
(pagat per <?= htmlspecialchars($payer) ?>)
</small>
<?php endif; ?>
</div>
<?php if (!empty($payer) && $payer !== $gift['adult_name']): ?>
<small style="color:#b91c1c; font-style:italic;">
(pagat per <?= htmlspecialchars($payer) ?>)
</small>
<?php endif; ?>
<?php else: ?>
<span class="cl-empty">—</span>
<?php endif; ?>
</td>
<?php endforeach; ?>
</tr>
<?php endfor; ?>
@@ -375,40 +414,119 @@ foreach ($gifts as $gift) {
<!-- JS inline : modale d'ajout de cadeau -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Modale d'ajout de cadeau (bouton + à côté du nom de l'enfant)
const modal = document.getElementById('cl-gift-modal');
const backdrop = modal.querySelector('.cl-modal-backdrop');
const cancelBtn = modal.querySelector('.clm-cancel');
// Ouverture modale en mode création (bouton + enfant)
document.querySelectorAll('.cl-child-add-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
const year = btn.getAttribute('data-year');
const child = btn.getAttribute('data-child');
const occasion = btn.getAttribute('data-occasion');
modal.classList.add('cl-open');
// Contexte
document.getElementById('clm-year').value = year;
document.getElementById('clm-child').value = child;
document.getElementById('clm-occasion').value = occasion;
// Reset
document.getElementById('clm-adult').selectedIndex = 0;
document.getElementById('clm-gift').value = '';
document.getElementById('clm-amount').value = '';
document.getElementById('clm-link').value = '';
// Titre dynamique
const titleEl = document.getElementById('cl-modal-title');
titleEl.textContent = `Afegeix un regal per ${child}`;
});
});
btn.addEventListener('click', function () {
const year = btn.getAttribute('data-year');
const child = btn.getAttribute('data-child');
const occasion = btn.getAttribute('data-occasion');
function closeModal() {
modal.classList.remove('cl-open');
}
modal.classList.add('cl-open');
// Mode création
document.getElementById('clm-action').value = 'create';
document.getElementById('clm-id').value = '';
// Contexte
document.getElementById('clm-year').value = year;
document.getElementById('clm-child').value = child;
document.getElementById('clm-occasion').value = occasion;
// Reset
const adultSelect = document.getElementById('clm-adult');
const payerSelect = document.getElementById('clm-payer');
adultSelect.selectedIndex = 0;
payerSelect.value = adultSelect.value;
document.getElementById('clm-gift').value = '';
document.getElementById('clm-amount').value = '';
document.getElementById('clm-link').value = '';
// Titre
const titleEl = document.getElementById('cl-modal-title');
titleEl.textContent = `Afegeix un regal per ${child}`;
});
});
// Ouverture modale en mode édition (icône crayon)
document.querySelectorAll('.cl-gift-edit').forEach(function (btn) {
btn.addEventListener('click', function () {
const dataset = btn.dataset;
modal.classList.add('cl-open');
// Mode édition
document.getElementById('clm-action').value = 'update';
document.getElementById('clm-id').value = dataset.id;
// Contexte
document.getElementById('clm-year').value = dataset.year;
document.getElementById('clm-child').value = dataset.child;
document.getElementById('clm-occasion').value = dataset.occasion;
// Champs visibles
document.getElementById('clm-adult').value = dataset.adult;
document.getElementById('clm-payer').value = dataset.payer;
document.getElementById('clm-gift').value = dataset.desc;
document.getElementById('clm-amount').value = dataset.amount || '';
document.getElementById('clm-link').value = dataset.link || '';
// Titre
const titleEl = document.getElementById('cl-modal-title');
titleEl.textContent = `Edita un regal per ${dataset.child}`;
});
});
// Suppression (icône poubelle)
const deleteForm = document.getElementById('cl-delete-form');
const deleteIdInput = document.getElementById('cld-id');
document.querySelectorAll('.cl-gift-delete').forEach(function (btn) {
btn.addEventListener('click', function () {
const giftId = btn.getAttribute('data-id');
if (!giftId) return;
if (confirm('Vols eliminar aquest regal?')) {
deleteIdInput.value = giftId;
deleteForm.submit();
}
});
});
function closeModal() { modal.classList.remove('cl-open'); }
cancelBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', closeModal);
});
document.addEventListener('DOMContentLoaded', function () {
// Toggle mobile: tap sur la zone droite bascule les icônes
document.querySelectorAll('.cl-gift-right').forEach(function (zone) {
zone.addEventListener('click', function (e) {
// Si on clique une icône (bouton), ne pas toggler la zone
if (e.target.closest('.cl-gift-action-btn')) return;
// Fermer les autres
document.querySelectorAll('.cl-gift-right.is-active').forEach(function (z) {
if (z !== zone) z.classList.remove('is-active');
});
// Bascule sur la zone courante
zone.classList.toggle('is-active');
});
});
// Option: clic en dehors -> referme
document.addEventListener('click', function (e) {
if (!e.target.closest('.cl-gift-right')) {
document.querySelectorAll('.cl-gift-right.is-active').forEach(function (z) {
z.classList.remove('is-active');
});
}
}, true);
});
</script>
<!-- Modal d'ajout de cadeau -->
<div id="cl-gift-modal" class="cl-modal" aria-hidden="true">
<div class="cl-modal-backdrop"></div>
@@ -419,6 +537,9 @@ document.addEventListener('DOMContentLoaded', function () {
<input type="hidden" name="year" id="clm-year" value="<?= $year ?>">
<input type="hidden" name="child_name" id="clm-child" value="">
<input type="hidden" name="occasion" id="clm-occasion" value="">
<input type="hidden" name="action" id="clm-action" value="create">
<input type="hidden" name="gift_id" id="clm-id" value="">
<label class="clm-label">
Adult
@@ -462,5 +583,12 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</div>
<form id="cl-delete-form" method="post" action="/modules/christmas-list/save-gift.php" style="display:none">
<input type="hidden" name="year" value="<?= $year ?>">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="gift_id" id="cld-id" value="">
</form>
<?php
require __DIR__ . '/footer.php';
modules/christmas-list/christmas-list.css
+112 -17
View File
@@ -37,7 +37,7 @@
.cl-occasion-children-tables {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
gap: 12px; /* espacement léger entre mini-tableaux */
gap: 7px;
align-items: start;
margin-top: 8px;
}
@@ -156,13 +156,11 @@
/* Corps: séparateurs + gestion des noms longs */
.cl-child-table tbody td {
vertical-align: top;
padding: 6px 8px;
padding: 6px 4px;
border-top: 1px solid #edf2f7;
border-right: 1px solid #e5e7eb;
font-size: 12px;
line-height: 1.35;
word-break: break-word;
overflow-wrap: anywhere;
}
.cl-child-table tbody td:last-child {
border-right: none;
@@ -176,19 +174,6 @@
color: #9ca3af;
}
/* Ligne cadeau: description à gauche, montant complètement à droite */
.cl-gift-line {
display: flex;
align-items: baseline;
gap: 8px;
width: 100%;
}
.cl-gift-desc,
.cl-gift-link {
flex: 1 1 auto;
min-width: 0; /* autorise le wrapping du texte si très long */
}
.cl-gift-amount {
margin-left: auto; /* pousse le montant à droite */
text-align: right;
@@ -344,6 +329,43 @@
margin: 0;
}
/* Icônes d’action (éditer / supprimer) à côté du nom du cadeau */
/* Conteneur de la ligne cadeau: réserve un espace à gauche pour les icônes overlay */
.cl-gift-item {
position: relative;
padding-left: 2px;
}
/* Icônes en overlay coin haut-gauche */
.cl-gift-actions--overlay {
position: absolute;
top: 2px;
left: 2px;
display: flex;
gap: 4px;
opacity: 0.65; /* discrètes */
transition: opacity 120ms ease;
}
.cl-gift-item:hover .cl-gift-actions--overlay {
opacity: 1; /* plus visibles au survol */
}
.cl-gift-action-btn {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
color: #374151;
line-height: 1;
}
.cl-gift-action-btn svg {
width: 12px;
height: 12px;
display: block;
}
.cl-gift-delete {
color: #b91c1c;
} /* poubelle rouge */
/* ========================================================= */
/* Résumé du budget et Liste détaillée */
/* ========================================================= */
@@ -409,3 +431,76 @@
.cl-debt-matrix td.cl-mtx-empty {
color: #9ca3af;
}
/* Ligne cadeau: gauche (nom) / droite (prix ou icônes) */
.cl-gift-line {
display: flex;
align-items: baseline;
width: 100%;
}
.cl-gift-desc,
.cl-gift-link {
flex: 1 1 auto;
min-width: 40px;
}
/* Zone droite: prix visible par défaut; icônes masquées */
.cl-gift-right {
position: relative;
min-width: 35px; /* réserve un petit espace */
display: flex;
justify-content: flex-end;
}
/* Prix */
.cl-gift-amount {
margin-left: auto;
text-align: right;
color: #627d98;
white-space: nowrap;
transition: opacity 120ms ease;
}
/* Icônes (même zone, positionnées à droite) */
.cl-gift-actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
}
/* Survol (desktop) ou état actif (mobile): cacher prix, montrer icônes */
.cl-gift-right:hover .cl-gift-amount,
.cl-gift-right.is-active .cl-gift-amount {
opacity: 0;
}
.cl-gift-right:hover .cl-gift-actions,
.cl-gift-right.is-active .cl-gift-actions {
opacity: 1;
pointer-events: auto;
}
/* Boutons icônes compacts et couleurs */
.cl-gift-action-btn {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
color: #374151; /* crayon par défaut */
line-height: 1;
}
.cl-gift-action-btn svg {
width: 12px;
height: 12px;
display: block;
color: inherit;
fill: currentColor;
}
.cl-gift-delete {
color: #b91c1c !important;
} /* poubelle rouge forcé */
modules/christmas-list/save-gift.php
+51 -5
View File
@@ -5,9 +5,23 @@ require_login('/christmas-list.php');
require __DIR__ . '/../../includes/db.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$action = trim($_POST['action'] ?? 'create');
if ($action === 'delete') {
$gift_id = (int)($_POST['gift_id'] ?? 0);
if ($gift_id > 0) {
$stmt = $pdo->prepare("DELETE FROM pf_christmas_gifts WHERE id = :id");
$stmt->execute(['id' => $gift_id]);
}
header('Location: /christmas-list.php');
exit;
}
// Champs communs
$year = (int)($_POST['year'] ?? date('Y'));
$adult_name = trim($_POST['adult_name'] ?? '');
$payer_name = trim($_POST['payer_name'] ?? '');
$payer_name = trim($_POST['payer_name'] ?? ''); // nouveau champ
$child_name = trim($_POST['child_name'] ?? '');
$occasion = trim($_POST['occasion'] ?? '');
$gift_desc = trim($_POST['gift_description'] ?? '');
@@ -18,6 +32,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$payer_name = $adult_name;
}
if ($action === 'update') {
$gift_id = (int)($_POST['gift_id'] ?? 0);
if ($gift_id > 0 && $adult_name && $payer_name && $child_name && $occasion && $gift_desc) {
$stmt = $pdo->prepare("
UPDATE pf_christmas_gifts
SET year = :year,
adult_name = :adult_name,
payer_name = :payer_name,
child_name = :child_name,
occasion = :occasion,
gift_description = :gift_description,
product_link = :product_link,
amount = :amount
WHERE id = :id
");
$stmt->execute([
'id' => $gift_id,
'year' => $year,
'adult_name' => $adult_name,
'payer_name' => $payer_name,
'child_name' => $child_name,
'occasion' => $occasion,
'gift_description' => $gift_desc,
'product_link' => $product_link ?: null,
'amount' => $amount,
]);
}
header('Location: /christmas-list.php');
exit;
}
// create (par défaut)
if ($adult_name && $payer_name && $child_name && $occasion && $gift_desc) {
$stmt = $pdo->prepare("
INSERT INTO pf_christmas_gifts
@@ -25,7 +72,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
VALUES
(:year, :adult_name, :payer_name, :child_name, :occasion, :gift_description, :product_link, :amount)
");
$stmt->execute([
'year' => $year,
'adult_name' => $adult_name,
@@ -37,7 +83,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
'amount' => $amount,
]);
}
}
header('Location: /christmas-list.php');
exit;
header('Location: /christmas-list.php');
exit;
}