[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,98 +13,99 @@ 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">
-      <Flex direction="row" width="full" height="full">
+      <Covers
-        <Covers
+        data={track?.covers}
-          data={track?.covers}
+        size="50"
-          size="50"
+        //height="full"
-          //height="full"
+        marginY="auto"
-          marginY="auto"
+        iconEmpty={
-          iconEmpty={
+          trackActive?.id === track.id ? (
-            trackActive?.id === track.id ? (
+            <LuPlay size="50" />
-              <LuPlay size="50" />
+          ) : (
-            ) : (
+            <LuMusic2 size="50" />
-              <LuMusic2 size="50" />
+          )
-            )
+        }
-          }
+        onClick={onClick}
-        />
+      />
-        <Flex
+      <Flex
-          direction="column"
+        direction="column"
-          width="full"
+        width="full"
-          height="full"
+        height="full"
-          paddingLeft="5px"
+        paddingLeft="5px"
-          overflowX="hidden"
+        overflowX="hidden"
+        onClick={onClick}
+      >
+        <Text
+          as="span"
+          align="left"
+          fontSize="20px"
+          fontWeight="bold"
+          userSelect="none"
+          marginRight="auto"
+          overflow="hidden"
+          noOfLines={1}
+          color={trackActive?.id === track.id ? 'green.700' : undefined}
         >
+          {track.name} {track.track && ` [${track.track}]`}
+        </Text>
+        {dataAlbum && (
           <Text
             as="span"
             align="left"
-            fontSize="20px"
+            fontSize="15px"
             fontWeight="bold"
             userSelect="none"
             marginRight="auto"
             overflow="hidden"
             noOfLines={1}
+            marginY="auto"
             color={trackActive?.id === track.id ? 'green.700' : undefined}
           >
-            {track.name} {track.track && ` [${track.track}]`}
+            Album {dataAlbum.name}
           </Text>
-          {dataAlbum && (
+        )}
-            <Text
+        {dataArtists && (
-              as="span"
+          <Text
-              align="left"
+            as="span"
-              fontSize="15px"
+            align="left"
-              fontWeight="bold"
+            fontSize="15px"
-              userSelect="none"
+            fontWeight="bold"
-              marginRight="auto"
+            userSelect="none"
-              overflow="hidden"
+            marginRight="auto"
-              noOfLines={1}
+            overflow="hidden"
-              marginY="auto"
+            noOfLines={1}
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
+            marginY="auto"
-            >
+            color={trackActive?.id === track.id ? 'green.700' : undefined}
-              Album {dataAlbum.name}
+          >
-            </Text>
+            Artist(s): {dataArtists.map((data) => data.name).join(', ')}
-          )}
+          </Text>
-          {dataArtists && (
+        )}
-            <Text
+        {dataGender && (
-              as="span"
+          <Text
-              align="left"
+            as="span"
-              fontSize="15px"
+            align="left"
-              fontWeight="bold"
+            fontSize="15px"
-              userSelect="none"
+            fontWeight="bold"
-              marginRight="auto"
+            userSelect="none"
-              overflow="hidden"
+            marginRight="auto"
-              noOfLines={1}
+            overflow="hidden"
-              marginY="auto"
+            noOfLines={1}
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
+            marginY="auto"
-            >
+            color={trackActive?.id === track.id ? 'green.700' : undefined}
-              Artist(s): {dataArtists.map((data) => data.name).join(', ')}
+          >
-            </Text>
+            Gender: {dataGender.name}
-          )}
+          </Text>
-          {dataGender && (
+        )}
-            <Text
-              as="span"
-              align="left"
-              fontSize="15px"
-              fontWeight="bold"
-              userSelect="none"
-              marginRight="auto"
-              overflow="hidden"
-              noOfLines={1}
-              marginY="auto"
-              color={trackActive?.id === track.id ? 'green.700' : undefined}
-            >
-              Gender: {dataGender.name}
-            </Text>
-          )}
-        </Flex>
       </Flex>
-    </Suspense>
+    </Flex>
   );
 };

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 />