feat: Enhance week filter functionality with disabled state and target week highlight
This commit is contained in:
@@ -168,6 +168,58 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Week filter disabled state */
|
||||
.admin-node-card.week-disabled {
|
||||
opacity: 0.35;
|
||||
filter: grayscale(80%);
|
||||
transform: scale(0.95);
|
||||
box-shadow: none;
|
||||
border-color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
.admin-node-card.week-disabled:hover {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.admin-node-card.week-disabled .node-avatar {
|
||||
background: #bdbdbd !important;
|
||||
}
|
||||
|
||||
.admin-node-card.week-disabled .node-name {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.admin-node-card.week-disabled .club-status {
|
||||
color: #bdbdbd !important;
|
||||
}
|
||||
|
||||
/* Target week highlight (sparkle badge) */
|
||||
.admin-node-card .target-week-highlight {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
font-size: 18px;
|
||||
animation: pulse-highlight 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-highlight {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.2); opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* Enhanced styling for target week nodes */
|
||||
.admin-node-card:not(.week-disabled) {
|
||||
/* Normal nodes when filter is active get subtle enhancement */
|
||||
}
|
||||
|
||||
/* When week filter is active, make matching nodes stand out more */
|
||||
.admin-node-card.leg-left:not(.week-disabled),
|
||||
.admin-node-card.leg-right:not(.week-disabled) {
|
||||
/* These will naturally stand out against disabled ones */
|
||||
}
|
||||
|
||||
/* Expand button */
|
||||
.admin-expand-btn {
|
||||
width: 20px;
|
||||
|
||||
@@ -69,14 +69,25 @@ window.AdminOrgChart = {
|
||||
// Club status
|
||||
const clubClass = data.isClubActive ? 'club-active' : 'club-inactive';
|
||||
|
||||
// Week activation status (if filtering by week)
|
||||
// Week filter: check if this node is activated in target week
|
||||
const isTargetWeek = data.isActivatedInTargetWeek;
|
||||
const weekFilterActive = filterWeek && filterWeek > 0;
|
||||
const isDisabledByWeekFilter = weekFilterActive && !isTargetWeek;
|
||||
const disabledClass = isDisabledByWeekFilter ? 'week-disabled' : '';
|
||||
|
||||
// Week activation status badge
|
||||
let weekIndicator = '';
|
||||
if (filterWeek && data.activationWeekDefinitionId) {
|
||||
const isTargetWeek = data.isActivatedInTargetWeek;
|
||||
if (weekFilterActive && data.activationWeekDefinitionId) {
|
||||
weekIndicator = `<div class="week-badge ${isTargetWeek ? 'week-match' : 'week-other'}">
|
||||
W${data.activationWeekDefinitionId}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Highlight badge for target week matches
|
||||
let highlightBadge = '';
|
||||
if (weekFilterActive && isTargetWeek) {
|
||||
highlightBadge = '<div class="target-week-highlight">✨</div>';
|
||||
}
|
||||
|
||||
// Avatar - first letter of name
|
||||
const firstChar = data.userName ? data.userName.charAt(0).toUpperCase() : '?';
|
||||
@@ -103,14 +114,18 @@ window.AdminOrgChart = {
|
||||
if (data.activationWeekDefinitionId) {
|
||||
tooltipLines.push(`📆 هفته: ${data.activationWeekDefinitionId}`);
|
||||
}
|
||||
if (weekFilterActive) {
|
||||
tooltipLines.push(isTargetWeek ? '🎯 فعال در هفته انتخابی' : '⚪ خارج از هفته انتخابی');
|
||||
}
|
||||
|
||||
const tooltipText = tooltipLines.join(' ');
|
||||
|
||||
return `
|
||||
<div class="admin-node-card ${positionClass} ${clubClass}"
|
||||
<div class="admin-node-card ${positionClass} ${clubClass} ${disabledClass}"
|
||||
data-user-id="${data.userId}"
|
||||
title="${tooltipText}">
|
||||
${weekIndicator}
|
||||
${highlightBadge}
|
||||
<div class="node-header">
|
||||
<div class="node-avatar">${firstChar}</div>
|
||||
<div class="node-main-info">
|
||||
|
||||
Reference in New Issue
Block a user