RIFFMASTER: FRONTEND: add selectable and searchable song list with info on click

Backend/Spring/.idea/workspace.xml

@@ -10,20 +10,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8315de53-8c15-472c-a710-45938463dc02" name="Changes" comment="RIFFMASTER: add frontend files">
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/0.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/1.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/1.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/2.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/3.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/3.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/4.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/5.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/6.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/6.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/7.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/9163ed2c587ff4665fb17ea4ebc8750a69df1e73/index.pack.old" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/Services/auth.service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -224,7 +215,7 @@
       <workItem from="1686758960546" duration="5072000" />
       <workItem from="1686767581715" duration="5877000" />
       <workItem from="1686820558130" duration="622000" />
-      <workItem from="1686836941887" duration="13975000" />
+      <workItem from="1686836941887" duration="14002000" />
     </task>
     <task id="LOCAL-00001" summary="add basic hello world and transfering data to server">
       <created>1679575346987</created>

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -6,15 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="d91bc08d-d968-4797-8fb3-ef602a37db2a" name="Changes" comment="RIFFMASTER: add frontend business logic (riff, song)">
       <change beforePath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/pom.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/pom.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/configuration/SecurityConfiguration.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AuthController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/AuthController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/ExampleController.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/controller/ExampleController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/service/MyAppUserDetailsService.java" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/src/main/java/pl/dmcs/jwoszczyk/service/MyAppUserDetailsService.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/AuthController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/AuthController.class" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SpringSecurityCustomPagesController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/Spring-1.0-SNAPSHOT/WEB-INF/classes/pl/dmcs/jwoszczyk/controller/SpringSecurityCustomPagesController.class" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/AuthController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/AuthController.class" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SpringSecurityCustomPagesController.class" beforeDir="false" afterPath="$PROJECT_DIR$/../../Backend/Spring/target/classes/pl/dmcs/jwoszczyk/controller/SpringSecurityCustomPagesController.class" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -103,7 +94,7 @@
       <workItem from="1686758969361" duration="2784000" />
       <workItem from="1686767850103" duration="4090000" />
       <workItem from="1686820564623" duration="521000" />
-      <workItem from="1686836939723" duration="2058000" />
+      <workItem from="1686836939723" duration="4708000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/src/app/app.module.ts

@@ -21,6 +21,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DatePipe } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 
+import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioChange } from '@angular/material/radio';
+
+
 
 @NgModule({
   declarations: [
@@ -44,6 +48,8 @@ import { HttpClientModule } from '@angular/common/http';
     MatFormFieldModule,
     BrowserAnimationsModule,
 
+    MatRadioModule,
+
     DatePipe,
   ],
   providers: [DatePipe ],

Frontend/RiffMasterFront/src/app/main-page/main-page.component.css

@@ -73,3 +73,13 @@ body {
 .card-title {
   color: orange;
 }
+
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.song-list {
+  overflow: hidden;
+}
+

Frontend/RiffMasterFront/src/app/main-page/main-page.component.html

@@ -20,11 +20,11 @@
         </mat-form-field>
 
         <div class="song-list">
-          <mat-list>
-            <mat-list-item *ngFor="let song of songs" (click)="displaySongInformation(song)">
+          <mat-radio-group class="vertical-radio-group" [(ngModel)]="selectedSong" (change)="displaySongInformation(selectedSong)">
+            <mat-radio-button *ngFor="let song of filteredSongs" [value]="song">
               {{ song.name }}
-            </mat-list-item>
-          </mat-list>
+            </mat-radio-button>
+          </mat-radio-group>
         </div>
 
       </mat-card-content>
@@ -61,8 +61,10 @@
 
       <div class="text-block-row">
         <div class="text-block">
-          <p>uploaded: {{ uploadDate | date:'short'}} ({{ userName }})</p>
-          <p>last update: {{ lastUpdateDate | date:'short' }} ({{ lastUpdateUser }})</p>
+          <p>uploaded: {{ selectedSong?.uploadDate | date:'short'}} ({{ selectedSong?.userId }})</p>
+          <p>last update: {{ selectedSong?.updateDate | date:'short' }} ({{ selectedSong?.lastUpdateUserId }})</p>
+          <p>Selected Song: {{ selectedSong?.name }}</p> <!-- Display selected song name -->
+          <!-- You can display other song information as needed -->
         </div>
       </div>
 

Frontend/RiffMasterFront/src/app/main-page/main-page.component.ts

@@ -2,20 +2,26 @@ import { Component, OnInit } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { Song } from '../models/song';
 import { SongService } from '../Services/song.service';
+import { MatSelectionList } from '@angular/material/list';
+
+import { ViewChild } from '@angular/core';
+
 
 @Component({
   selector: 'app-main-page',
   templateUrl: './main-page.component.html',
   styleUrls: ['./main-page.component.css'],
+  viewProviders: [MatSelectionList]
 })
 export class MainPageComponent implements OnInit {
   songs: Song[] = [];
   searchQuery: string = '';
+  selectedSong!: Song; // Variable to store the selected song
 
-  uploadDate: Date = new Date();
-  userName: string = 'John Doe';
-  lastUpdateDate: Date = new Date();
-  lastUpdateUser: string = 'John Smith';
+  // uploadDate: Date = new Date();
+  // userName: string = 'John Doe';
+  // lastUpdateDate: Date = new Date();
+  // lastUpdateUser: string = 'John Smith';
 
   constructor(
     private datePipe: DatePipe,
@@ -55,11 +61,12 @@ export class MainPageComponent implements OnInit {
   }
 
   displaySongInformation(song: Song): void {
-    // Logic to fetch and set the song information based on the selected song
-    // Replace the code below with your own implementation
-    console.log('Selected song:', song);
+    this.selectedSong = song; // Assign the selected song to the variable
+    console.log('Selected song:', this.selectedSong);
   }
 
+
+  
   download() {
     // Implement your download logic here
   }