diff --git a/src/BackOffice/wwwroot/css/admin-org-chart.css b/src/BackOffice/wwwroot/css/admin-org-chart.css index 64a37bb..c1c55fa 100644 --- a/src/BackOffice/wwwroot/css/admin-org-chart.css +++ b/src/BackOffice/wwwroot/css/admin-org-chart.css @@ -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; diff --git a/src/BackOffice/wwwroot/js/admin-org-chart.js b/src/BackOffice/wwwroot/js/admin-org-chart.js index 9c7b408..61c82e7 100644 --- a/src/BackOffice/wwwroot/js/admin-org-chart.js +++ b/src/BackOffice/wwwroot/js/admin-org-chart.js @@ -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 = `