🚸 Adicionando um indicador visual na ordenação

src/app/pages/record/record.component.css

@@ -1,5 +1,5 @@
 .header-title {
-    color: green; /* Azul escuro para o título */
+    color: green; /* Verde escuro para o título */
     text-align: center;
     margin-bottom: 20px;
     font-size: 2rem;
@@ -79,7 +79,7 @@
     border: none;
     padding: 12px 24px;
     margin: 5px;
-    border-radius: 5px;
+    border-radius:25px;
     cursor: pointer;
     font-size: 1.1rem;
     transition: background-color 0.3s ease, transform 0.2s ease;
@@ -113,3 +113,9 @@
 .delete-btn:hover {
     background-color: rgba(255, 0, 0, 1);
 }
+
+.record-controls button.active {
+    background-color: #51A452; /* Cor verde quando o botão está ativo */
+    color: white;
+    border-radius: 25px;
+}

src/app/pages/record/record.component.html

@@ -3,18 +3,26 @@
         <h1 class="header-title">Histórico de Vídeos</h1>
     </header>
 
-
     <!-- Controle de Rastreamento com Checkbox -->
     <div class="record-controls my-4">
         <label class="checkbox-label">
             <input type="checkbox" [(ngModel)]="trackingEnabled" (change)="toggleTracking(trackingEnabled)" />
             Rastreamento do Histórico
         </label>
-        <button (click)="sortRecord(true)" class="btn btn-secondary mr-2">Ordenar Crescente</button>
-        <button (click)="sortRecord(false)" class="btn btn-secondary">Ordenar Decrescente</button>
+        <button 
+            (click)="sortRecord(true)" 
+            class="btn btn-secondary mr-2" 
+            [class.active]="isAscendingActive">
+            Ordenar Crescente
+        </button>
+        <button 
+            (click)="sortRecord(false)" 
+            class="btn btn-secondary" 
+            [class.active]="!isAscendingActive">
+            Ordenar Decrescente
+        </button>
     </div>
 
-
     <main class="videos-container my-4">
         <br>
         <div class="videos">

src/app/pages/record/record.component.ts

@@ -6,7 +6,6 @@ import { Catalog } from 'src/shared/model/catalog.model';
 import { IVideo } from 'src/shared/model/video.model';
 import jwt_decode from 'jwt-decode';
 
-
 @Component({
   selector: 'app-record',
   templateUrl: './record.component.html',
@@ -22,11 +21,10 @@ export class RecordComponent {
   userId: string = '';
   recordVideos: any = {}; // Inicializado como um objeto vazio
   trackingEnabled: boolean = true; // Estado da checkbox de rastreamento
-
+  isAscendingActive: boolean | null = null; // Estado para o botão ativo
 
   constructor(private videoService: VideoService, private router: Router) {}
 
-
   async ngOnInit(): Promise<void> {
     this.setUserIdFromToken(localStorage.getItem('token') as string);
     this.checkTrackingStatus(); // Verifica o estado inicial do rastreamento
@@ -45,7 +43,6 @@ export class RecordComponent {
     this.userId = decodedToken.id;
   }
 
-
   addToRecord(videoId: string): void {
     if (this.trackingEnabled) {
         this.videoService.addToRecord(this.userId, videoId).subscribe({
@@ -67,7 +64,6 @@ export class RecordComponent {
     }
   }
 
-
   checkTrackingStatus(): void {
     const storedTrackingStatus = localStorage.getItem('trackingEnabled');
 
@@ -87,12 +83,10 @@ export class RecordComponent {
     this.trackingEnabled = enabled;
     this.saveTrackingStatus(); // Salva o estado atualizado
 
-
     this.videoService.toggleTracking(this.userId, enabled).subscribe({
         next: (response) => {
             console.log(response.message);
 
-
             if (!enabled) {
                 // Se o rastreamento foi desabilitado, limpar os vídeos filtrados e o estado do histórico
                 this.filteredVideos = [];
@@ -108,7 +102,6 @@ export class RecordComponent {
     });
   }
 
-
   checkRecord(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.videoService.checkRecord(this.userId.toString()).subscribe({
@@ -124,7 +117,6 @@ export class RecordComponent {
     });
   }
 
-
   findAll(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.videoService.findAll().subscribe({
@@ -148,69 +140,56 @@ export class RecordComponent {
     videos.forEach((video) => {
       const channel = video?.channels;
 
-
       if (channel)
         if (channel[0].id === this.unbTvChannelId) this.unbTvVideos.push(video);
     });
   }
 
-
   filterVideosByRecord(): void {
     if (this.recordVideos && this.recordVideos.videos && Object.keys(this.recordVideos.videos).length > 0) {
         console.log('Filtering videos with recordVideos:', this.recordVideos);
         const keys = Object.keys(this.recordVideos.videos).map(id => id.toString());
         console.log('Keys from recordVideos:', keys);
         console.log('All Videos:', this.unbTvVideos);
 
-
         this.filteredVideos = this.unbTvVideos.filter(video =>
             video.id !== undefined && keys.includes(video.id.toString()));
 
-
         console.log('Filtered Videos:', this.filteredVideos);
     } else {
         console.log('No recordVideos available or tracking is disabled');
         this.filteredVideos = []; // Se não houver vídeos no histórico ou se o rastreamento estiver desabilitado
     }
   }
 
-
   trackByVideoId(index: number, video: IVideo): string {
     return video.id ? video.id.toString() : index.toString();
   }
 
-
   sortRecord(ascending: boolean): void {
+      this.isAscendingActive = ascending; // Atualiza o botão ativo
       console.log('Sorting records, ascending:', ascending);
       this.videoService.getRecordSorted(this.userId, ascending).subscribe({
           next: (response) => {
               console.log('Response from backend:', response.videos);
 
-
               this.recordVideos = { videos: response.videos };
 
-
-              // Criação de uma nova lista de vídeos filtrados
+              // Atualiza a lista filtrada
               this.filteredVideos = [];
               const videoIds = Object.keys(this.recordVideos.videos);
-              console.log('Video IDs from backend:', videoIds);
-
 
-              // Mapeamento de IDs para os vídeos correspondentes
               videoIds.forEach(id => {
                   const video = this.unbTvVideos.find(v => v.id?.toString() === id);
                   if (video) {
                       this.filteredVideos.push(video);
                   }
               });
 
-
-              // Se não estiver em ordem ascendente, reverter a ordem dos vídeos
               if (!ascending) {
                   this.filteredVideos.reverse();
               }
 
-
               console.log('Filtered videos after processing:', this.filteredVideos);
           },
           error: (err) => {
@@ -230,5 +209,4 @@ export class RecordComponent {
       }
     });
   }
-
-}
+}