Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactors customer detail and list page components

Browse source 
Enhances UI/UX with more dynamic toggle sliders
Improves tag management and interaction
Updates marketing consent toggles with new design

Adds more interactive customer information display
This commit is contained in:
Janus C. H. Knudsen 2025-12-22 15:00:38 +01:00
parent 0233e283e5
commit 9c77d1f556
2 changed files with 2170 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

99
wwwroot/poc-customer-list.html
View file

@ -603,6 +603,11 @@
text-decoration: underline;
}
swp-customer-header-contact swp-customer-tags {
margin-top: 4px;
justify-content: flex-end;
}
/* Fact Boxes */
swp-fact-boxes {
display: grid;
@ -721,35 +726,53 @@
color: var(--color-text);
}
swp-toggle {
width: 44px;
height: 24px;
background: var(--color-border);
border-radius: 12px;
swp-toggle-slider {
display: flex;
position: relative;
cursor: pointer;
transition: background 200ms ease;
background: var(--color-background);
border-radius: 6px;
padding: 3px;
gap: 0;
}
swp-toggle::after {
swp-toggle-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 200ms ease;
top: 3px;
left: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
background: color-mix(in srgb, var(--color-green) 18%, white);
border-radius: 4px;
transition: transform 200ms ease, background 200ms ease;
z-index: 0;
}
swp-toggle.active {
background: var(--color-teal);
swp-toggle-slider[data-value="no"]::before {
transform: translateX(100%);
background: color-mix(in srgb, var(--color-red) 18%, white);
}
swp-toggle.active::after {
transform: translateX(20px);
swp-toggle-option {
position: relative;
z-index: 1;
padding: 5px 16px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: color 200ms ease;
user-select: none;
}
swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
color: var(--color-green);
font-weight: 600;
}
swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
color: var(--color-red);
font-weight: 600;
}
/* Profile Boxes */
@ -1154,6 +1177,7 @@
<swp-customer-header-contact>
<a href="tel:+4523456789" id="cardPhoneLink">+45 23 45 67 89</a>
<a href="mailto:sofie@email.dk" id="cardEmailLink">sofie@email.dk</a>
<swp-customer-tags id="cardTags"></swp-customer-tags>
</swp-customer-header-contact>
</swp-customer-header-top>
</swp-customer-header-info>
@ -1207,11 +1231,17 @@
<swp-marketing-section>
<swp-toggle-row>
<swp-toggle-label>Email marketing</swp-toggle-label>
<swp-toggle id="toggleEmail" class="active" onclick="this.classList.toggle('active')"></swp-toggle>
<swp-toggle-slider id="toggleEmail" data-value="yes">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
<swp-toggle-row>
<swp-toggle-label>SMS marketing</swp-toggle-label>
<swp-toggle id="toggleSms" onclick="this.classList.toggle('active')"></swp-toggle>
<swp-toggle-slider id="toggleSms" data-value="no">
<swp-toggle-option>Ja</swp-toggle-option>
<swp-toggle-option>Nej</swp-toggle-option>
</swp-toggle-slider>
</swp-toggle-row>
</swp-marketing-section>
</div>
@ -1482,6 +1512,19 @@
document.getElementById('editPhone').value = phone;
document.getElementById('editEmail').value = email;
// Update tags
const tags = row.dataset.tags || '';
const cardTags = document.getElementById('cardTags');
cardTags.innerHTML = '';
if (tags) {
tags.split(',').forEach(tag => {
const tagEl = document.createElement('swp-tag');
tagEl.className = tag.trim();
tagEl.textContent = tag.trim().charAt(0).toUpperCase() + tag.trim().slice(1);
cardTags.appendChild(tagEl);
});
}
// Open panel
cardOverlay.classList.add('open');
customerCard.classList.add('open');
@ -1508,6 +1551,18 @@
if (e.key === 'Escape') closeCustomerCard();
});
// ==========================================
// TOGGLE SLIDER (Ja/Nej)
// ==========================================
document.querySelectorAll('swp-toggle-slider').forEach(slider => {
const options = slider.querySelectorAll('swp-toggle-option');
options.forEach((option, index) => {
option.addEventListener('click', () => {
slider.dataset.value = index === 0 ? 'yes' : 'no';
});
});
});
// Chart initialization
let chartInitialized = false;
function initCustomerChart() {