☰

Azure DevOps Backlog Colorizer

Cambia el color de las filas en el backlog de Azure DevOps según el estado del trabajo

  1. // @license MIT
  2. // ==UserScript==
  3. // @name         Azure DevOps Backlog Colorizer
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.3
  6. // @description  Cambia el color de las filas en el backlog de Azure DevOps según el estado del trabajo
  7. // @author       Tu nombre
  8. // @match        https://dev.azure.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Función que revisa el estado y aplica el color correspondiente a toda la fila
  16.     function applyCustomColors() {
  17.         // Seleccionar las filas en el backlog
  18.         const backlogItems = document.querySelectorAll('.wit-tr'); // Selección de las filas de trabajo
  19.  
  20.         backlogItems.forEach(item => {
  21.             // Busca la columna o el elemento que contiene el estado de la tarea
  22.             const stateElement = item.querySelector('.work-item-state-cell');
  23.  
  24.             if (stateElement) {
  25.                 const state = stateElement.textContent.trim().toLowerCase(); // Obtener el estado y normalizar
  26.  
  27.                 // Aplica el color a toda la fila según el estado
  28.                 if (state === 'new') {
  29.                     item.style.backgroundColor = 'yellow'; // Estado "Nuevo" -> Amarillo
  30.                 } else if (state === 'active') {
  31.                     item.style.backgroundColor = 'blue'; // Estado "Activo" -> Azul
  32.                 } else if (state === 'resolved') {
  33.                     item.style.backgroundColor = 'green'; // Estado "Resuelto" -> Verde
  34.                 } else if (state === 'closed') {
  35.                     item.style.backgroundColor = 'green'; // Estado "Cerrado" -> Verde
  36.                 }
  37.             }
  38.         });
  39.     }
  40.  
  41.     // Espera que el contenido cargue completamente
  42.     setTimeout(applyCustomColors, 2000); // Espera 2 segundos para asegurarse que todo esté cargado
  43.  
  44.     // Observador para aplicar colores cuando haya cambios en la página (scroll, cambios de página, etc.)
  45.     const observer = new MutationObserver(() => {
  46.         applyCustomColors();
  47.     });
  48.  
  49.     // Observar el backlog para detectar cambios
  50.     const backlogContainer = document.querySelector('.backlog-container');
  51.     if (backlogContainer) {
  52.         observer.observe(backlogContainer, { childList: true, subtree: true });
  53.     }
  54. })();