BartekGit/magico.prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tryb komentowania ekranów

Browse Source
This commit is contained in:
Bartek
2026-02-18 21:17:24 +01:00
parent c0beb640e6
commit a282dd2080
7 changed files with 1028 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

509
prototype/travel/travel-zapytanie-dialog.php
View File

@@ -1,4 +1,7 @@
<?php include '../../header-sneat.php'; ?>
<?php
$enablePrototypeComments = true;
include '../../header-sneat.php';
?>
<style>
.bg-light {
@@ -39,7 +42,7 @@
</div>
<div class="d-flex gap-2 mb-4 overflow-auto pb-2" id="inquiryTabs" role="tablist">
<button class="btn btn-primary btn-sm d-flex align-items-center text-nowrap"
<button class="btn btn-primary btn-sm d-flex align-items-center text-nowrap active"
id="tab-general-btn" data-bs-toggle="tab" data-bs-target="#tab-general" type="button"
role="tab" aria-selected="true">
<i class="bi bi-info-circle me-2"></i> Ogólne
@@ -66,8 +69,9 @@
<div class="tab-pane fade show active" id="tab-general" role="tabpanel">
<div class="mb-4">
<h5 class="d-flex align-items-center gap-1 text-primary mb-3" style="cursor: pointer;"
data-bs-toggle="collapse" data-bs-target="#descCollapse" aria-expanded="true">
<h5 class="d-flex align-items-center gap-1 text-primary mb-3"
style="cursor: pointer;" data-bs-toggle="collapse"
data-bs-target="#descCollapse" aria-expanded="true">
<i class="bi bi-chevron-down fs-5"></i> Opis oferty
</h5>
<div class="collapse show" id="descCollapse">
@@ -82,141 +86,137 @@
<hr class="my-4">
<div>
<h5 class="d-flex align-items-center gap-1 text-primary mb-4" style="cursor: pointer;"
data-bs-toggle="collapse" data-bs-target="#timelineCollapse" aria-expanded="true">
<h5 class="d-flex align-items-center gap-1 text-primary mb-4"
style="cursor: pointer;" data-bs-toggle="collapse"
data-bs-target="#timelineCollapse" aria-expanded="true">
<i class="bi bi-chevron-down fs-5"></i> Historia operacji
</h5>
<div class="collapse show" id="timelineCollapse">
<ul class="timeline timeline-outline mb-0 pb-0">
<div id="timeline-initial">
<!-- Item 1: Komentarz -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-warning"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<h6 class="mb-0">Mateusz Travel dodał komentarz</h6>
<!-- Item 1: Komentarz -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-warning"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<small class="text-muted">15 min temu</small>
<h6 class="mb-0">Mateusz Travel dodał komentarz</h6>
</div>
<div class="bg-lighter p-2 rounded ms-1">
<p class="mb-0 small fst-italic">"Klient prosi o zmianę
terminu na
czerwiec. Do weryfikacji dostępność hoteli."</p>
<small class="text-muted">15 min temu</small>
</div>
<div class="bg-lighter p-2 rounded ms-1">
<p class="mb-0 small fst-italic">"Klient prosi o zmianę
terminu na
czerwiec. Do weryfikacji dostępność hoteli."</p>
</div>
</div>
</li>
<!-- Item 2: Błąd SMS -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-danger"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-secondary">SY</span>
</div>
<h6 class="mb-0 text-danger">Błąd wysyłki SMS (System)
</h6>
</div>
<small class="text-muted">Dziś, 12:21</small>
</div>
<p class="mb-0 text-danger small ms-1">Limit środków wyczerpany.
</p>
</div>
</li>
<!-- Item 3: Email -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-secondary"></span>
<div class="timeline-event">
<div
class="timeline-header mb-1 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/avatars/1.png"
alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Wysłano e-mail (Automat)</h6>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<small class="text-muted">Dziś, 12:20</small>
<button class="btn btn-xs btn-label-secondary p-1 px-2"
type="button" data-bs-toggle="collapse"
data-bs-target="#emailContent1" aria-expanded="false">
<i class="bi bi-eye"></i>
</button>
</div>
</div>
</li>
<!-- Item 2: Błąd SMS -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-danger"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-secondary">SY</span>
</div>
<h6 class="mb-0 text-danger">Błąd wysyłki SMS (System)
</h6>
</div>
<small class="text-muted">Dziś, 12:21</small>
</div>
<p class="mb-0 text-danger small ms-1">Limit środków wyczerpany.
</p>
</div>
</li>
<div class="ms-1">
<p class="mb-1 small">Temat: <strong>Propozycja wycieczki w
Tatry</strong> <span class="text-muted mx-1">|</span>
do:
jan@jan.pl</p>
<!-- Item 3: Email -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-secondary"></span>
<div class="timeline-event">
<div
class="timeline-header mb-1 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/avatars/1.png"
alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Wysłano e-mail (Automat)</h6>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<small class="text-muted">Dziś, 12:20</small>
<button class="btn btn-xs btn-label-secondary p-1 px-2"
type="button" data-bs-toggle="collapse"
data-bs-target="#emailContent1" aria-expanded="false">
<i class="bi bi-eye"></i>
</button>
</div>
</div>
<div class="ms-1">
<p class="mb-1 small">Temat: <strong>Propozycja wycieczki w
Tatry</strong> <span class="text-muted mx-1">|</span>
do:
jan@jan.pl</p>
<div class="collapse mt-1" id="emailContent1">
<div
class="bg-lighter p-2 rounded border small text-muted">
<p class="mb-1">Dzień dobry,</p>
<p class="mb-1">W załączeniu przesyłam wstępną
ofertę
wyjazdu w
Tatry dla grupy szkolnej. Proszę o zapoznanie
się z
programem.</p>
<p class="mb-0">Pozdrawiam, Zespół Mateusz Travel
</p>
</div>
<div class="collapse mt-1" id="emailContent1">
<div class="bg-lighter p-2 rounded border small text-muted">
<p class="mb-1">Dzień dobry,</p>
<p class="mb-1">W załączeniu przesyłam wstępną
ofertę
wyjazdu w
Tatry dla grupy szkolnej. Proszę o zapoznanie
się z
programem.</p>
<p class="mb-0">Pozdrawiam, Zespół Mateusz Travel
</p>
</div>
</div>
</div>
</li>
</div>
</li>
<!-- Item 4: Załączniki -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-dark"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<h6 class="mb-0">Mateusz Travel wgrał załączniki</h6>
<!-- Item 4: Załączniki -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-dark"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<small class="text-muted">Dziś, 12:15</small>
</div>
<div class="d-flex align-items-center gap-2 ms-1">
<i class="bi bi-file-earmark-pdf text-danger"></i>
<span class="small">Oferta_Wstepna_v1.pdf</span>
<h6 class="mb-0">Mateusz Travel wgrał załączniki</h6>
</div>
<small class="text-muted">Dziś, 12:15</small>
</div>
</li>
<div class="d-flex align-items-center gap-2 ms-1">
<i class="bi bi-file-earmark-pdf text-danger"></i>
<span class="small">Oferta_Wstepna_v1.pdf</span>
</div>
</div>
</li>
<!-- Item 5: Zadanie -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-warning"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<h6 class="mb-0">Utworzono zadanie</h6>
<!-- Item 5: Zadanie -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-warning"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar avatar-xs">
<span
class="avatar-initial rounded-circle bg-label-primary">MT</span>
</div>
<small class="text-muted">Dziś, 11:00</small>
<h6 class="mb-0">Utworzono zadanie</h6>
</div>
<div
class="bg-label-warning rounded p-1 px-2 d-inline-block ms-1">
@@ -225,24 +225,29 @@
kalkulację</span>
</div>
</div>
</li>
</div>
</div>
</li>
</ul>
<div id="load-more-container" class="text-center py-2 border-left-dashed"
style="margin-left: 14px; border-left: 1px dashed #d9dee3;">
<button id="btn-load-more"
class="btn btn-xs btn-outline-primary rounded-pill">
<span class="spinner-border spinner-border-sm me-1 d-none"
role="status" aria-hidden="true"></span>
<i class="bi bi-arrow-down-circle me-1"></i> Wczytaj wcześniejsze
(2)
</button>
</div>
<!-- Load More Action -->
<div id="load-more-container" class="text-center py-2 border-left-dashed"
style="margin-left: 14px; border-left: 1px dashed #d9dee3;">
<button id="btn-load-more"
class="btn btn-xs btn-outline-primary rounded-pill">
<span class="spinner-border spinner-border-sm me-1 d-none" role="status"
aria-hidden="true"></span>
<i class="bi bi-arrow-down-circle me-1"></i> Wczytaj wcześniejsze
(2)
</button>
</div>
<div id="timeline-extra" class="d-none">
<!-- Extra items (initially hidden) -->
<div id="timeline-extra" class="d-none">
<ul class="timeline timeline-outline mb-0 pb-0 pt-0">
<!-- Item 6: Zmiana danych -->
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<li
class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-1">
@@ -279,39 +284,190 @@
</div>
</div>
</li>
</div>
</ul>
</ul>
</div>
</div>
</div>
</div>
<!-- Tap Pane: Komentarze -->
<div class="tab-pane fade" id="tab-comments" role="tabpanel">
<div class="text-center py-5 text-muted">
<i class="bi bi-chat-left-text fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak komentarzy</h5>
<p class="mb-0 small">Komentarze pojawią się w tym miejscu.</p>
</div>
</div>
<!-- Tap Pane: Zadania -->
<div class="tab-pane fade" id="tab-tasks" role="tabpanel">
<div class="text-center py-5 text-muted">
<i class="bi bi-check2-circle fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak zadań</h5>
<p class="mb-0 small">Zadania przypisane do tego zapytania pojawią się tutaj.</p>
<i class="bi bi-chat-left-text fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak komentarzy</h5>
<p class="mb-0 small">Komentarze pojawią się w tym miejscu.</p>
</div>
</div>
<!-- Tap Pane: Inne zapytania -->
<div class="tab-pane fade" id="tab-other" role="tabpanel">
<div class="text-center py-5 text-muted">
<i class="bi bi-briefcase fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak powiązanych zapytań</h5>
<p class="mb-0 small">Inne zapytania tego klienta pojawią się tutaj.</p>
<!-- Tap Pane: Zadania -->
<div class="tab-pane fade" id="tab-tasks" role="tabpanel">
<div class="text-center py-5 text-muted">
<i class="bi bi-check2-circle fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak zadań</h5>
<p class="mb-0 small">Zadania przypisane do tego zapytania pojawią się tutaj.</p>
</div>
</div>
</div>
<!-- Tap Pane: Inne zapytania -->
<div class="tab-pane fade" id="tab-other" role="tabpanel">
<div class="text-center py-5 text-muted">
<i class="bi bi-briefcase fs-1 d-block mb-3"></i>
<h5 class="mb-1">Brak powiązanych zapytań</h5>
<p class="mb-0 small">Inne zapytania tej Organizacji pojawią się tutaj.</p>
</div>
<hr>
lub
<hr>
<div class="p-3">
<div class="alert alert-primary d-flex align-items-center p-3 mb-4" role="alert">
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
<div class="small">
Poniżej znajdują się inne zapytania powiązane z tym klientem (Jan Jan) lub
organizacją.
</div>
</div>
<div class="table-responsive text-nowrap border rounded mb-3">
<table class="table table-sm table-hover mb-0">
<thead class="table-light">
<tr>
<th style="width: 40px;" class="text-center">
<input class="form-check-input" type="checkbox" id="chkAll">
</th>
<th>Zapytanie / Data</th>
<th>Opiekun</th>
<th class="text-center">Status</th>
<th style="width: 50px;"></th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
<tr>
<td class="text-center align-middle">
<input class="form-check-input inquiry-chk" type="checkbox">
</td>
<td class="align-middle">
<div class="d-flex flex-column" style="max-width: 280px;">
<a href="#" class="fw-semibold text-truncate text-body"
title="#135 - Wycieczka Bieszczady">#135 - Wycieczka
Bieszczady</a>
<small class="text-muted"
style="font-size: 0.75rem;">12.02.2026</small>
</div>
</td>
<td class="align-middle">
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
title="Mateusz Travel">
<div class="avatar avatar-xs me-2">
<span
class="avatar-initial rounded-circle bg-label-primary"
style="font-size: 0.65rem;">MT</span>
</div>
<small class="text-muted">M. Travel</small>
</div>
</td>
<td class="text-center align-middle">
<span class="badge bg-label-info"
style="font-size: 0.7rem; padding: 4px 8px;">Nowa</span>
</td>
<td class="align-middle text-center">
<a href="#"
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
data-bs-toggle="tooltip" title="Przejdź do zapytania">
<i class="bi bi-arrow-right-short fs-4"></i>
</a>
</td>
</tr>
<tr>
<td class="text-center align-middle">
<input class="form-check-input inquiry-chk" type="checkbox">
</td>
<td class="align-middle">
<div class="d-flex flex-column" style="max-width: 280px;">
<a href="#" class="fw-semibold text-truncate text-body">#120
- Zapytanie ogólne</a>
<small class="text-muted"
style="font-size: 0.75rem;">28.01.2026</small>
</div>
</td>
<td class="align-middle">
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
title="Adam Admin">
<div class="avatar avatar-xs me-2">
<span
class="avatar-initial rounded-circle bg-label-secondary"
style="font-size: 0.65rem;">AD</span>
</div>
<small class="text-muted">A. Admin</small>
</div>
</td>
<td class="text-center align-middle">
<span class="badge bg-label-secondary"
style="font-size: 0.7rem; padding: 4px 8px;">Nie
zainter.</span>
</td>
<td class="align-middle text-center">
<a href="#"
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
data-bs-toggle="tooltip" title="Przejdź do zapytania">
<i class="bi bi-arrow-right-short fs-4"></i>
</a>
</td>
</tr>
<tr>
<td class="text-center align-middle">
<input class="form-check-input inquiry-chk" type="checkbox">
</td>
<td class="align-middle">
<div class="d-flex flex-column" style="max-width: 280px;">
<a href="#" class="fw-semibold text-truncate text-body">#115
- Kolonie Lato 2026</a>
<small class="text-muted"
style="font-size: 0.75rem;">15.01.2026</small>
</div>
</td>
<td class="align-middle">
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
title="Kasia Kowalska">
<div class="avatar avatar-xs me-2">
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/avatars/5.png"
alt="Avatar" class="rounded-circle">
</div>
<small class="text-muted">K. Kowalska</small>
</div>
</td>
<td class="text-center align-middle">
<span class="badge bg-label-success"
style="font-size: 0.7rem; padding: 4px 8px;">Wysłana</span>
</td>
<td class="align-middle text-center">
<a href="#"
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
data-bs-toggle="tooltip" title="Przejdź do zapytania">
<i class="bi bi-arrow-right-short fs-4"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">Wybrano: <strong id="merge-count">0</strong></small>
<button class="btn btn-sm btn-primary disabled" id="btn-merge-selection">
<i class="bi bi-intersect me-1"></i> Scal zaznaczone
</button>
</div>
</div>
</div>
</div>
</div>
@@ -744,4 +900,49 @@
}, 0);
});
}
// ==========================================
// 6. TABS: AKTUALIZACJA STYLI PRZYCISKÓW
// ==========================================
const tabButtons = document.querySelectorAll('#inquiryTabs button[data-bs-toggle="tab"]');
tabButtons.forEach(btn => {
btn.addEventListener('shown.bs.tab', function (event) {
// Reset styli dla wszystkich przycisków w tej grupie
tabButtons.forEach(b => {
b.classList.remove('btn-primary');
b.classList.add('btn-outline-secondary');
});
// Aktywacja klikniętego przycisku
event.target.classList.remove('btn-outline-secondary');
event.target.classList.add('btn-primary');
});
});
(function () {
const checkboxes = document.querySelectorAll('.inquiry-checkbox');
const btnMerge = document.getElementById('btnMergeInquiries');
const countSpan = document.getElementById('selectedCount');
const selectAll = document.getElementById('selectAllInquiries');
function updateState() {
const count = Array.from(checkboxes).filter(c => c.checked).length;
countSpan.textContent = count;
if (count > 0) {
btnMerge.removeAttribute('disabled');
} else {
btnMerge.setAttribute('disabled', 'true');
}
}
checkboxes.forEach(cb => cb.addEventListener('change', updateState));
if (selectAll) {
selectAll.addEventListener('change', function () {
checkboxes.forEach(cb => cb.checked = this.checked);
updateState();
});
}
})();
</script>