feat: Enhance week filter functionality with disabled state and target week highlight
This commit is contained in:
@@ -168,6 +168,58 @@
|
|||||||
color: white;
|
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 */
|
/* Expand button */
|
||||||
.admin-expand-btn {
|
.admin-expand-btn {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|||||||
@@ -69,14 +69,25 @@ window.AdminOrgChart = {
|
|||||||
// Club status
|
// Club status
|
||||||
const clubClass = data.isClubActive ? 'club-active' : 'club-inactive';
|
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 = '';
|
let weekIndicator = '';
|
||||||
if (filterWeek && data.activationWeekDefinitionId) {
|
if (weekFilterActive && data.activationWeekDefinitionId) {
|
||||||
const isTargetWeek = data.isActivatedInTargetWeek;
|
|
||||||
weekIndicator = `<div class="week-badge ${isTargetWeek ? 'week-match' : 'week-other'}">
|
weekIndicator = `<div class="week-badge ${isTargetWeek ? 'week-match' : 'week-other'}">
|
||||||
W${data.activationWeekDefinitionId}
|
W${data.activationWeekDefinitionId}
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Highlight badge for target week matches
|
||||||
|
let highlightBadge = '';
|
||||||
|
if (weekFilterActive && isTargetWeek) {
|
||||||
|
highlightBadge = '<div class="target-week-highlight">✨</div>';
|
||||||
|
}
|
||||||
|
|
||||||
// Avatar - first letter of name
|
// Avatar - first letter of name
|
||||||
const firstChar = data.userName ? data.userName.charAt(0).toUpperCase() : '?';
|
const firstChar = data.userName ? data.userName.charAt(0).toUpperCase() : '?';
|
||||||
@@ -103,14 +114,18 @@ window.AdminOrgChart = {
|
|||||||
if (data.activationWeekDefinitionId) {
|
if (data.activationWeekDefinitionId) {
|
||||||
tooltipLines.push(`📆 هفته: ${data.activationWeekDefinitionId}`);
|
tooltipLines.push(`📆 هفته: ${data.activationWeekDefinitionId}`);
|
||||||
}
|
}
|
||||||
|
if (weekFilterActive) {
|
||||||
|
tooltipLines.push(isTargetWeek ? '🎯 فعال در هفته انتخابی' : '⚪ خارج از هفته انتخابی');
|
||||||
|
}
|
||||||
|
|
||||||
const tooltipText = tooltipLines.join(' ');
|
const tooltipText = tooltipLines.join(' ');
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="admin-node-card ${positionClass} ${clubClass}"
|
<div class="admin-node-card ${positionClass} ${clubClass} ${disabledClass}"
|
||||||
data-user-id="${data.userId}"
|
data-user-id="${data.userId}"
|
||||||
title="${tooltipText}">
|
title="${tooltipText}">
|
||||||
${weekIndicator}
|
${weekIndicator}
|
||||||
|
${highlightBadge}
|
||||||
<div class="node-header">
|
<div class="node-header">
|
||||||
<div class="node-avatar">${firstChar}</div>
|
<div class="node-avatar">${firstChar}</div>
|
||||||
<div class="node-main-info">
|
<div class="node-main-info">
|
||||||
|
|||||||
Reference in New Issue
Block a user