[DEV] integrate menue on thack

front2/src/components/track/DisplayTrack.tsx

@@ -2,16 +2,24 @@ import { Suspense } from 'react';
 
 import { Flex, Text } from '@chakra-ui/react';
 import { LuMusic2, LuPlay } from 'react-icons/lu';
+import { useNavigate } from 'react-router-dom';
 
 import { Track } from '@/back-api';
 import { Covers } from '@/components/Cover';
+import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
 import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 
 export type DisplayTrackProps = {
   track: Track;
+  onClick?: () => void;
+  contextMenu?: MenuElement[];
 };
-export const DisplayTrack = ({ track }: DisplayTrackProps) => {
+export const DisplayTrack = ({
+  track,
+  onClick,
+  contextMenu,
+}: DisplayTrackProps) => {
   const { trackActive } = useActivePlaylistService();
   return (
     <Flex direction="row" width="full" height="full">
@@ -26,6 +34,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
             <LuMusic2 size="50" height="full" />
           )
         }
+        onClick={onClick}
       />
       <Flex
         direction="column"
@@ -33,6 +42,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
         height="full"
         paddingLeft="5px"
         overflowX="hidden"
+        onClick={onClick}
       >
         <Text
           as="span"
@@ -49,6 +59,7 @@ export const DisplayTrack = ({ track }: DisplayTrackProps) => {
           [{track.track}] {track.name}
         </Text>
       </Flex>
+      <ContextMenu elements={contextMenu} />
     </Flex>
   );
 };

front2/src/components/track/DisplayTrackFull.tsx

@@ -13,14 +13,14 @@ import { useSpecificGender } from '@/service/Gender';
 
 export type DisplayTrackProps = {
   track: Track;
+  onClick?: () => void;
 };
-export const DisplayTrackFull = ({ track }: DisplayTrackProps) => {
+export const DisplayTrackFull = ({ track, onClick }: DisplayTrackProps) => {
   const { trackActive } = useActivePlaylistService();
   const { dataAlbum } = useSpecificAlbum(track?.albumId);
   const { dataGender } = useSpecificGender(track?.genderId);
   const { dataArtists } = useSpecificArtists(track?.artists);
   return (
-    <Suspense fallback={<DisplayTrackSkeleton />}>
     <Flex direction="row" width="full" height="full">
       <Covers
         data={track?.covers}
@@ -34,6 +34,7 @@ export const DisplayTrackFull = ({ track }: DisplayTrackProps) => {
             <LuMusic2 size="50" />
           )
         }
+        onClick={onClick}
       />
       <Flex
         direction="column"
@@ -41,6 +42,7 @@ export const DisplayTrackFull = ({ track }: DisplayTrackProps) => {
         height="full"
         paddingLeft="5px"
         overflowX="hidden"
+        onClick={onClick}
       >
         <Text
           as="span"
@@ -105,6 +107,5 @@ export const DisplayTrackFull = ({ track }: DisplayTrackProps) => {
         )}
       </Flex>
     </Flex>
-    </Suspense>
   );
 };

front2/src/scene/album/AlbumDetailPage.tsx

@@ -97,9 +97,11 @@ export const AlbumDetailPage = () => {
                 boxShadow: 'outline-over',
                 bgColor: mode('#FFFFFFF7', '#000000F7'),
               }}
-              onClick={() => onSelectItem(data.id)}
             >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+              />
             </Box>
           ))}
           <EmptyEnd />

front2/src/scene/artist/ArtistAlbumDetailPage.tsx

@@ -1,12 +1,13 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { LuDisc3, LuUser } from 'react-icons/lu';
-import { useParams } from 'react-router-dom';
+import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
 
 import { Covers } from '@/components/Cover';
 import { EmptyEnd } from '@/components/EmptyEnd';
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
 import { TopBar } from '@/components/TopBar/TopBar';
+import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
 import { DisplayTrack } from '@/components/track/DisplayTrack';
 import { useActivePlaylistService } from '@/service/ActivePlaylist';
 import { useSpecificAlbum } from '@/service/Album';
@@ -23,8 +24,8 @@ export const ArtistAlbumDetailPage = () => {
   const { dataArtist } = useSpecificArtist(artistIdInt);
   const { dataAlbum } = useSpecificAlbum(albumIdInt);
   const { tracksOnAnAlbum } = useTracksOfAnAlbum(albumIdInt);
+  const navigate = useNavigate();
   const onSelectItem = (trackId: number) => {
-    //navigate(`/artist/${artistIdInt}/album/${albumId}`);
     let currentPlay = 0;
     const listTrackId: number[] = [];
     if (!tracksOnAnAlbum) {
@@ -126,13 +127,29 @@ export const ArtistAlbumDetailPage = () => {
                 boxShadow: 'outline-over',
                 bgColor: mode('#FFFFFFF7', '#000000F7'),
               }}
-              onClick={() => onSelectItem(data.id)}
             >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+                contextMenu={[
+                  {
+                    name: 'Edit',
+                    onClick: () => {
+                      navigate(
+                        `/artist/${artistIdInt}/album/${albumId}/edit/${data.id}`
+                      );
+                    },
+                  },
+                  { name: 'Add Playlist', onClick: () => {} },
+                ]}
+              />
             </Box>
           ))}
           <EmptyEnd />
         </Flex>
+        <Routes>
+          <Route path="edit/:trackId" element={<TrackEditPopUp />} />
+        </Routes>
       </PageLayout>
     </>
   );

front2/src/scene/artist/ArtistRoutes.tsx

@@ -12,7 +12,7 @@ export const ArtistRoutes = () => {
       <Route path="all" element={<ArtistsPage />} />
       <Route path=":artistId" element={<ArtistDetailPage />} />
       <Route
-        path=":artistId/album/:albumId"
+        path=":artistId/album/:albumId/*"
         element={<ArtistAlbumDetailPage />}
       />
       <Route path="*" element={<Error404 />} />

front2/src/scene/gender/GenderDetailPage.tsx

@@ -95,9 +95,11 @@ export const GenderDetailPage = () => {
                 boxShadow: 'outline-over',
                 bgColor: mode('#FFFFFFF7', '#000000F7'),
               }}
-              onClick={() => onSelectItem(data.id)}
             >
-              <DisplayTrack track={data} />
+              <DisplayTrack
+                track={data}
+                onClick={() => onSelectItem(data.id)}
+              />
             </Box>
           ))}
           <EmptyEnd />

front2/src/scene/track/TracksStartLetterDetailPage.tsx

@@ -90,9 +90,11 @@ export const TracksStartLetterDetailPage = () => {
                   boxShadow: 'outline-over',
                   bgColor: mode('#FFFFFFF7', '#000000F7'),
                 }}
-                onClick={() => onSelectItem(data.id)}
               >
-                <DisplayTrackFull track={data} />
+                <DisplayTrackFull
+                  track={data}
+                  onClick={() => onSelectItem(data.id)}
+                />
               </Box>
             ))}
           <EmptyEnd />