[FEAT] add basic page of the ADD media (kanva OK, no upload and check)

Dockerfile

@@ -3,14 +3,21 @@
 ## buyilding-end install applications:
 ##
 ######################################################################################
-FROM archlinux:base-devel AS builder
+FROM archlinux:base-devel AS common
 # update system
 RUN pacman -Syu --noconfirm && pacman-db-upgrade \
-    && pacman -S --noconfirm jdk-openjdk maven npm pnpm \
+    && pacman -S --noconfirm jdk-openjdk \
+    && pacman -Scc --noconfirm
+
+WORKDIR /tmp
+
+FROM common AS builder
+# update system
+RUN pacman -Syu --noconfirm && pacman-db-upgrade \
+    && pacman -S --noconfirm maven npm pnpm \
     && pacman -Scc --noconfirm
 
 ENV PATH /tmp/node_modules/.bin:$PATH
-WORKDIR /tmp
 
 ######################################################################################
 ##
@@ -73,9 +80,10 @@ RUN pnpm static:build
 ##
 ######################################################################################
 
-FROM bellsoft/liberica-openjdk-alpine:latest
-# add wget to manage the health check...
-RUN apk add --no-cache wget
+#FROM bellsoft/liberica-openjdk-alpine:latest
+## add wget to manage the health check...
+#RUN apk add --no-cache wget
+FROM common
 
 #FROM archlinux:base
 #RUN pacman -Syu --noconfirm && pacman-db-upgrade
@@ -86,7 +94,7 @@ RUN apk add --no-cache wget
 ## clean all the caches Need only on the release environment
 #RUN pacman -Scc --noconfirm
 
-ENV LANG=C.UTF-8
+ENV LANG C.UTF-8
 
 COPY --from=build_back /tmp/out/maven/*.jar /application/application.jar
 COPY --from=build_front /tmp/dist /application/front/

front/.env.production

@@ -1,2 +1,2 @@
 # URL for database connection
-VITE_API_BASE_URL=api/
+VITE_API_BASE_URL=karusic/api/

front/src/components/TopBar/TopBar.tsx

@@ -75,6 +75,9 @@ export const TopBar = ({ title, children }: TopBarProps) => {
     clearToken();
     requestSignOut();
   };
+  const onSelectAdd = () => {
+    navigate('/add');
+  };
   const onSelectHome = () => {
     navigate('/');
   };
@@ -208,7 +211,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
             <Button
               background="#00000000"
               borderRadius="0px"
-              onClick={onSelectHome}
+              onClick={onSelectAdd}
               width="full"
             >
               <LuArrowUpSquare />

front/src/scene/AppRoutes.tsx

@@ -9,11 +9,13 @@ import { Error401, Error404 } from '@/errors';
 import { AlbumRoutes } from '@/scene/album/AlbumRoutes';
 import { ArtistRoutes } from '@/scene/artist/ArtistRoutes';
 import { GenderRoutes } from '@/scene/gender/GenderRoutes';
-import { HelpPage } from '@/scene/home/Help';
+import { HelpPage } from '@/scene/home/HelpPage';
 import { HomePage } from '@/scene/home/HomePage';
 import { SSORoutes } from '@/scene/sso/SSORoutes';
 import { TrackRoutes } from '@/scene/track/TrackRoutes';
 import { useHasRight } from '@/service/session';
+import { SettingsPage } from './home/SettingsPage';
+import { AddPage } from './home/AddPage';
 
 export const AppRoutes = () => {
   const { isReadable } = useHasRight('user');
@@ -29,7 +31,9 @@ export const AppRoutes = () => {
         {isReadable ? (
           <>
             <Route path="/" element={<HomePage />} />
-            <Route path="/help" element={<HelpPage />} />
+            <Route path="help" element={<HelpPage />} />
+            <Route path="settings" element={<SettingsPage />} />
+            <Route path="add" element={<AddPage />} />
             <Route path="artist/*" element={<ArtistRoutes />} />
             <Route path="album/*" element={<AlbumRoutes />} />
             <Route path="gender/*" element={<GenderRoutes />} />

front/src/scene/home/AddPage.tsx

@@ -0,0 +1,683 @@
+import { useFormidable } from '@/components/form/Formidable';
+import { FormInput } from '@/components/form/FormInput';
+import { FormSelect } from '@/components/form/FormSelect';
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { TopBar } from '@/components/TopBar/TopBar';
+import { useOrderedAlbums } from '@/service/Album';
+import { useOrderedArtists } from '@/service/Artist';
+import { useGenderService, useOrderedGenders } from '@/service/Gender';
+import { isNullOrUndefined } from '@/utils/validator';
+import { Flex, Text, Input, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr, Button } from '@chakra-ui/react';
+import { useState } from 'react';
+import { LuTrash } from 'react-icons/lu';
+import { MdCloudUpload, MdRemove } from 'react-icons/md';
+
+
+
+export class ElementList {
+  constructor(
+    public id?: number,
+    public label?: string) {
+    // nothing to do.
+  }
+}
+export class FileParsedElement {
+  public isSended: boolean = false;
+  public nameDetected: boolean = false;
+  public trackIdDetected: boolean = false;
+  constructor(
+    public file: File,
+    public title: string,
+    public artist?: string,
+    public album?: string,
+    public trackId?: number) {
+    // nothing to do.
+  }
+}
+export class FileFailParsedElement {
+  constructor(
+    public id: number,
+    public file: File,
+    public reason: string) {
+    // nothing to do.
+  }
+}
+
+type FormInsertData = {
+  genderId?: number;
+  artistId?: number[];
+  titleAlbum?: string;
+}
+
+
+export const AddPage = () => {
+
+  const [parsedElement, setParsedElement] = useState<FileParsedElement[]>([]);
+  const [parsedFailedElement, setParsedFailedElement] = useState<FileFailParsedElement[] | undefined>(undefined);
+
+  const [uploadFileValue, setUploadFileValue] = useState<string>('');
+  const [selectedFiles, setSelectedFiles] = useState<FileList | undefined>(undefined);
+  const [genderId, setGenderId] = useState<number | undefined>(undefined);
+  const [artistId, setArtistId] = useState<number | undefined>(undefined);
+  const [albumId, setAlbumId] = useState<number | undefined>(undefined);
+  const [needSend, setNeedSend] = useState<boolean>(false);
+
+  const [globalGender, setGlobalGender] = useState<string | undefined>(undefined);
+  const [globalArtist, setGlobalArtist] = useState<string | undefined>(undefined);
+  const [globalAlbum, setGlobalAlbum] = useState<string | undefined>(undefined);
+
+  // list of all files already registered in the bdd to compare with the current list of files.
+  const [listFileInBdd, setListFileInBdd] = useState<any[] | undefined>(undefined);
+
+  const { dataGenders } = useOrderedGenders();
+  const { dataArtist } = useOrderedArtists();
+  const { dataAlbums } = useOrderedAlbums();
+
+  const updateNeedSend = () => {
+    if (parsedElement.length === 0) {
+      setNeedSend(false);
+      return;
+    }
+    let tmp = true;
+    for (let iii = 0; iii < parsedElement.length; iii++) {
+      if (isNullOrUndefined(parsedElement[iii].title) || parsedElement[iii].title === '') {
+        tmp = false;
+      }
+    }
+    setNeedSend(tmp);
+  }
+
+  const onGender = (value: any): void => {
+    // this.globalGender = value;
+    // let self = this;
+    // if (this.globalGender !== '') {
+    // 	this.genderService.getLike(this.globalGender)
+    // 		.then((response: any[]) => {
+    // 			console.log(`find element: ${response.length}`);
+    // 			for (let iii = 0; iii < response.length; iii++) {
+    // 				console.log(`    - ${JSON.stringify(response[iii])}`);
+    // 			}
+    // 			if (response.length === 0) {
+    // 				self.genderId = undefined;
+    // 			} else if (response.length === 1) {
+    // 				self.genderId = response[0].id;
+    // 			}
+    // 		}).catch((response) => {
+    // 			console.log('CAN NOT find element: ');
+    // 			self.genderId = undefined;
+    // 		});
+    // }
+    // updateNeedSend();
+  }
+
+
+  const onChangeGender = (value: any): void => {
+    // this.globalGender = value;
+    // if (!isNullOrUndefined(value)) {
+    // 	for (let iii = 0; iii < this.listGender.length; iii++) {
+    // 		if (this.listGender[iii].value === value) {
+    // 			this.globalGender = this.listGender[iii].label;
+    // 			break;
+    // 		}
+    // 	}
+    // }
+    // updateNeedSend();
+  }
+
+  const updateTheListOfAlbum = () => {
+    // this.listAlbum = [{ value: null, label: '---' }];
+    // if (isNullOrUndefined(this.artistId)) {
+    // 	return;
+    // }
+    // let self = this;
+    // this.trackService.getAlbumIdsOfAnArtist(this.artistId)
+    // 	.then((listAlbumIds: number[]) => {
+    // 		this.albumService.getAll(listAlbumIds)
+    // 			.then((response2) => {
+    // 				for (let iii = 0; iii < response2.length; iii++) {
+    // 					self.listAlbum.push({ value: response2[iii].id, label: response2[iii].name });
+    // 				}
+    // 			}).catch((response2) => {
+    // 				console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
+    // 			});
+    // 	});
+  }
+  const onArtist = (value: any): void => {
+    // this.globalArtist = value;
+    // let self = this;
+    // if (this.globalArtist !== '') {
+    // 	console.log(`update artist List Element: ${this.globalArtist}`);
+    // 	this.artistService.getLike(this.globalArtist)
+    // 		.then((response: any[]) => {
+    // 			console.log(`  ==> find artist like ${this.globalArtist} : ${JSON.stringify(response, null, 2)}`);
+    // 			if (response.length === 0) {
+    // 				self.artistId = undefined;
+    // 			} else if (response.length === 1) {
+    // 				self.artistId = response[0].id;
+    // 				self.updateTheListOfAlbum();
+    // 			}
+    // 			if (!isNullOrUndefined(this.globalAlbum)) {
+    // 				this.onAlbum(this.globalAlbum)
+    // 			} else {
+    // 				self.updateListOfTrackToCheck();
+    // 			}
+    // 		}).catch((response) => {
+    // 			console.log(`  ==> CAN NOT find artist like ${this.globalArtist} : ${response.length}`);
+    // 			self.artistId = undefined;
+    // 		});
+    // }
+    // updateNeedSend();
+  }
+  const onChangeArtist = (value: any): void => {
+    // this.artistId = value;
+    // if (!isNullOrUndefined(value)) {
+    // 	for (let iii = 0; iii < this.listArtist.length; iii++) {
+    // 		if (this.listArtist[iii].value === value) {
+    // 			this.globalArtist = this.listArtist[iii].label;
+    // 			break;
+    // 		}
+    // 	}
+    // }
+    // updateNeedSend();
+    // updateListOfTrackToCheck();
+  }
+  const onAlbum = (value: any): void => {
+    // this.globalAlbum = value;
+    // // console.log("change episode ID: " + value + " ==> " + this.parseAlbum.toString());
+    // updateNeedSend();
+    // updateListOfTrackToCheck();
+  }
+
+  const onTitle = (data: FileParsedElement, value: any): void => {
+    data.title = value;
+    setParsedElement([...parsedElement]);
+    updateNeedSend();
+  }
+
+  const removeElementFromList = (data: FileParsedElement, value: any): void => {
+    const parsedElementTmp = [...parsedElement];
+    for (let iii = 0; iii < parsedElementTmp.length; iii++) {
+      if (parsedElementTmp[iii] === data) {
+        parsedElementTmp.splice(iii, 1);
+        break;
+      }
+    }
+    setParsedElement(parsedElementTmp);
+    setParsedFailedElement((previous) => [...previous ?? [], new FileFailParsedElement(previous?.length ?? 0, data.file, 'Removed by user.')]);
+    updateNeedSend();
+  }
+
+  const onTrackId = (data: FileParsedElement, value: any): void => {
+    data.trackId = value;
+    setParsedElement([...parsedElement]);
+    // // console.log("change episode ID: " + value + " ==> " + this.parseEpisode.toString());
+    updateNeedSend();
+  }
+
+
+  const clearData = () => {
+    setGlobalGender(undefined);
+    setGlobalArtist(undefined);
+    setGlobalAlbum(undefined);
+    setParsedElement([]);
+    setParsedFailedElement(undefined);
+    setListFileInBdd(undefined);
+
+    setGenderId(undefined);
+    setArtistId(undefined);
+    setAlbumId(undefined);
+  }
+
+  const addFileWithMetaData = (file: File) => {
+    // parsedElement: FileParsedElement[] = [];
+    let artist: string | undefined = undefined;
+    let album: string | undefined = undefined;
+    let trackIdNumber: number | undefined = undefined;
+    let title: string = '';
+
+    console.log(`select file ${file.name}`);
+    let tmpName = file.name.replace(/[ \t]*-[ \t]*/g, '-');
+    //tmpName = tmpName.replace(/_/g, '-');
+    //tmpName = tmpName.replace(/--/g, '-');
+    console.log(`select file ${tmpName}`);
+    const splitElement = tmpName.split('~');
+    if (splitElement.length > 1) {
+      artist = splitElement[0];
+      tmpName = tmpName.substring(artist.length + 1);
+    }
+    const splitElement2 = tmpName.split('\#');
+    if (splitElement2.length > 1) {
+      album = splitElement2[0];
+      tmpName = tmpName.substring(album.length + 1);
+    }
+    //console.log("ploppppp " + tmpName);
+    const splitElement3 = tmpName.split('-');
+    if (splitElement3.length > 1) {
+      trackIdNumber = parseInt(splitElement3[0], 10);
+      tmpName = tmpName.substring(splitElement3[0].length + 1);
+    }
+    //console.log("KKKppppp " + tmpName);
+    //console.log("    ===> " + splitElement3[0]);
+    title = tmpName;
+
+    if (trackIdNumber && isNaN(trackIdNumber)) {
+      trackIdNumber = undefined;
+    }
+    // remove extension
+    title = title.replace(new RegExp('\\.(webm|WEBM|Webm)'), '');
+    let tmp = new FileParsedElement(file, title, artist, album, trackIdNumber);
+    console.log(`==>${JSON.stringify(tmp)}`);
+    // add it in the list.
+    return tmp;
+  }
+
+
+  const onChangeFile = (value: any): void => {
+    clearData();
+
+    const parsedElementTmp: FileParsedElement[] = [];
+    const parsedFailedElementTmp: FileFailParsedElement[] = [];
+
+    for (let iii = 0; iii < value.target.files?.length; iii++) {
+      parsedElementTmp.push(addFileWithMetaData(value.target.files[iii]));
+    }
+    // check if all global parameters are generic:
+    if (parsedElementTmp.length === 0) {
+      updateNeedSend();
+      return;
+    }
+    // we verify with the first value to remove all unknown ...
+    // clean different gender:
+
+    // clean different artist:
+    for (let iii = 1; iii < parsedElementTmp.length; iii++) {
+      console.log(`check artist [${iii + 1}/${parsedElementTmp.length}] '${parsedElementTmp[0].artist} !== ${parsedElementTmp[iii].artist}'`);
+      if (parsedElementTmp[0].artist !== parsedElementTmp[iii].artist) {
+        parsedFailedElementTmp.push(new FileFailParsedElement(parsedFailedElementTmp.length, parsedElementTmp[iii].file, 'Remove from list due to wrong artist value'));
+        console.log(`Remove from list (!= artist) : [${iii + 1}/${parsedElementTmp.length}] '${parsedElementTmp[iii].file.name}'`);
+        parsedElementTmp.splice(iii, 1);
+        iii--;
+      }
+    }
+    // clean different album:
+    for (let iii = 1; iii < parsedElementTmp.length; iii++) {
+      console.log(`check album [${iii + 1}/${parsedElementTmp.length}] '${parsedElementTmp[0].album} !== ${parsedElementTmp[iii].album}'`);
+      if (parsedElementTmp[0].album !== parsedElementTmp[iii].album) {
+        parsedFailedElementTmp.push(new FileFailParsedElement(parsedFailedElementTmp.length, parsedElementTmp[iii].file, 'Remove from list due to wrong album value'));
+        console.log(`Remove from list (!= album) : [${iii + 1}/${parsedElementTmp.length}] '${parsedElementTmp[iii].file.name}'`);
+        parsedElementTmp.splice(iii, 1);
+        iii--;
+      }
+    }
+    setParsedElement(parsedElementTmp);
+    setParsedFailedElement(parsedFailedElementTmp);
+    console.log(`check : ${JSON.stringify(parsedElementTmp[0])}`)
+    setGlobalArtist(parsedElementTmp[0].artist);
+    // find artistId:
+    console.log(`try find artist : ${parsedElementTmp[0].artist}`);
+    dataArtist.forEach((data) => {
+      if (data.name?.toLowerCase() === parsedElementTmp[0].artist?.toLowerCase()) {
+        console.log(`    find artist : ${data.id}`);
+        form.setValues({ artistId: data.id });
+      }
+    })
+    setGlobalAlbum(parsedElementTmp[0].album);
+    console.log(`try find album : ${parsedElementTmp[0].album}`);
+    dataAlbums.forEach((data) => {
+      if (data.name?.toLowerCase() === parsedElementTmp[0].album?.toLowerCase()) {
+        console.log(`    find album : ${data.id}`);
+        form.setValues({ albumId: data.id });
+      }
+    })
+
+    updateNeedSend();
+    setArtistId(undefined);
+    setAlbumId(undefined);
+    onArtist(globalArtist);
+  }
+
+  const sendFile = (): void => {
+    // console.log(`Send file requested ... ${this.parsedElement.length}`);
+    // this.upload = new UploadProgress();
+    // // display the upload pop-in
+    // this.popInService.open('popin-upload-progress');
+    // this.globalUpLoad(0, this.parsedElement.length);
+  }
+
+  const globalUpLoad = (id: number, total: number): void => {
+    // let self = this;
+    // this.uploadFile(this.parsedElement[id], id, total, () => {
+    // 	let id2 = id + 1;
+    // 	if (id2 < total) {
+    // 		self.globalUpLoad(id2, total);
+    // 	} else {
+    // 		self.upload.result = 'Media creation done';
+    // 	}
+    // }, (value: string) => {
+    // 	self.upload.error = `Error in the upload of the data...${value}`;
+    // });
+  }
+  const uploadFile = (element: FileParsedElement, id: number, total: number, sendDone: any, errorOccurred: any): void => {
+    // let self = this;
+
+    // self.upload.labelMediaTitle = '';
+    // // add gender
+    // /*
+    // if(self.globalGender !== null) {
+    // 	self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalGender;
+    // }
+    // */
+    // // add artist
+    // if (!isNullOrUndefined(self.globalArtist)) {
+    // 	if (self.upload.labelMediaTitle.length !== 0) {
+    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}:`;
+    // 	}
+    // 	self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalArtist;
+    // }
+    // // add album
+    // if (!isNullOrUndefined(self.globalAlbum) && self.globalAlbum.toString().length !== 0) {
+    // 	if (self.upload.labelMediaTitle.length !== 0) {
+    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
+    // 	}
+    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}s${self.globalAlbum.toString()}`;
+    // }
+    // // add episode ID
+    // if (!isNullOrUndefined(element.trackId) && element.trackId.toString().length !== 0) {
+    // 	if (self.upload.labelMediaTitle.length !== 0) {
+    // 		self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
+    // 	}
+    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}e${element.trackId.toString()}`;
+    // }
+    // // add title
+    // if (self.upload.labelMediaTitle.length !== 0) {
+    // 	self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
+    // }
+    // self.upload.labelMediaTitle = `[${id + 1}/${total}]${self.upload.labelMediaTitle}${element.title}`;
+
+    // self.trackService.uploadFile(element.file,
+    // 	self.globalGender,
+    // 	self.globalArtist,
+    // 	self.globalAlbum,
+    // 	element.trackId,
+    // 	element.title,
+    // 	(count, totalTmp) => {
+    // 		// console.log("upload : " + count*100/totalTmp);
+    // 		self.upload.mediaSendSize = count;
+    // 		self.upload.mediaSize = totalTmp;
+    // 	})
+    // 	.then((response) => {
+    // 		console.log(`get response of track : ${JSON.stringify(response, null, 2)}`);
+    // 		sendDone();
+    // 	}).catch((response) => {
+    // 		// self.error = "Can not get the data";
+    // 		console.log('Can not add the data in the system...');
+    // 		errorOccurred(JSON.stringify(response, null, 2));
+    // 	});
+  }
+
+  const checkSimilarString = (valueA: string, valueB: string): boolean => {
+    // let valueAL = valueA.toLowerCase();
+    // let valueBL = valueB.toLowerCase();
+    // valueAL = valueAL.replace(/[ \t\n\r-_#~@]/g, '');
+    // valueBL = valueBL.replace(/[ \t\n\r-_#~@]/g, '');
+    // if (valueAL === valueBL) {
+    // 	return true;
+    // }
+    // if (valueAL.startsWith(valueBL)) {
+    // 	return true;
+    // }
+    // if (valueBL.startsWith(valueAL)) {
+    // 	return true;
+    // }
+    return false;
+  }
+
+  const checkConcordance = (): void => {
+    // if (isNullOrUndefined(this.parsedElement)) {
+    // 	return;
+    // }
+    // // ckear checker
+    // for (let iii = 0; iii < this.parsedElement.length; iii++) {
+    // 	this.parsedElement[iii].nameDetected = false;
+    // 	this.parsedElement[iii].trackIdDetected = false;
+    // }
+    // if (isNullOrUndefined(this.listFileInBdd)) {
+    // 	return;
+    // }
+    // for (let iii = 0; iii < this.listFileInBdd.length; iii++) {
+    // 	this.listFileInBdd[iii].nameDetected = false;
+    // 	this.listFileInBdd[iii].trackIdDetected = false;
+    // }
+    // for (let iii = 0; iii < this.parsedElement.length; iii++) {
+    // 	for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
+    // 		if (this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) {
+    // 			this.parsedElement[iii].nameDetected = true;
+    // 			this.listFileInBdd[jjj].nameDetected = true;
+    // 		}
+    // 		if (this.parsedElement[iii].trackId === this.listFileInBdd[jjj].episode) {
+    // 			this.parsedElement[iii].trackIdDetected = true;
+    // 			this.listFileInBdd[jjj].trackIdDetected = true;
+    // 		}
+    // 	}
+    // }
+  }
+
+  const updateListOfTrackToCheck = (): void => {
+    // // No artist ID set ==> nothing to do.
+    // if (isNullOrUndefined(this.artistId)) {
+    // 	this.listFileInBdd = undefined;
+    // 	return;
+    // }
+    // let self = this;
+    // // no album check only the artist files.
+    // if (isNullOrUndefined(this.globalAlbum)) {
+    // 	console.error(`NO ALBUM ==> check artist ID...`);
+    // 	self.trackService.getTracksOfAnArtist(self.artistId)
+    // 		.then((response: any[]) => {
+    // 			self.listFileInBdd = response;
+    // 			console.error(`find track: ${JSON.stringify(response, null, 2)}`);
+    // 			// for (let iii = 0; iii<response.length; iii++) {
+    // 			//	console.log("    - " + JSON.stringify(response[iii]));
+    // 			// }
+    // 			self.checkConcordance();
+    // 		}).catch((response) => {
+    // 			self.listFileInBdd = undefined;
+    // 		});
+    // 	return;
+    // }
+
+    // self.albumId = undefined;
+    // console.error(`ALBUM ==> check album values...`);
+    // // set 1 find the ID of the album:
+    // this.trackService.getAlbumIdsOfAnArtist(this.artistId)
+    // 	.then((listAlbumIds: number[]) => {
+    // 		this.artistService.getAll(listAlbumIds)
+    // 			.then((response: Artist[]) => {
+    // 				for (let iii = 0; iii < response.length; iii++) {
+    // 					// console.log("    - " + JSON.stringify(response[iii]) + 'compare with : ' + JSON.stringify(self.globalAlbum));
+    // 					if (response[iii].name === `${self.globalAlbum}`) {
+    // 						self.albumId = response[iii].id;
+    // 						break;
+    // 					}
+    // 				}
+    // 				if (isNullOrUndefined(self.albumId)) {
+    // 					return;
+    // 				}
+    // 				self.trackService.getTracksWithAlbumId(self.albumId)
+    // 					.then((response2: any[]) => {
+    // 						self.listFileInBdd = response2;
+    // 						console.log(`find album: ${JSON.stringify(response, null, 2)}`);
+    // 						// console.log("find track: " + response2.length);
+    // 						// for (let iii = 0; iii<response2.length; iii++) {
+    // 						//	console.log("    - " + JSON.stringify(response2[iii]));
+    // 						// }
+    // 						self.checkConcordance();
+    // 					}).catch((response3) => {
+    // 						self.listFileInBdd = undefined;
+    // 					});
+    // 			})
+    // 	}).catch((response4) => {
+    // 		self.listFileInBdd = undefined;
+    // 	});
+  }
+
+  const eventPopUpAlbum = (event: string): void => {
+    console.log(`GET event: ${event}`);
+    // this.popInService.close('popin-new-album');
+  }
+  const eventPopUpArtist = (event: string): void => {
+    console.log(`GET event: ${event}`);
+    //this.popInService.close('popin-new-artist');
+  }
+  const eventPopUpType = (event: string): void => {
+    console.log(`GET event: ${event}`);
+    // this.popInService.close('popin-new-type');
+  }
+  const eventPopUpPlaylist = (event: string): void => {
+    console.log(`GET event: ${event}`);
+    // this.popInService.close('popin-new-playlist');
+  }
+
+  const newAlbum = (): void => {
+    console.log('Request new Album...');
+    // this.popInService.open('popin-new-album');
+  }
+  const newArtist = (): void => {
+    console.log('Request new Artist...');
+    // this.popInService.open('popin-new-artist');
+  }
+  const newType = (): void => {
+    console.log('Request new Type...');
+    // this.popInService.open('popin-create-type');
+  }
+  const newPlaylist = () => {
+    console.log('Request new Playlist...');
+    // this.popInService.open('popin-new-playlist');
+  }
+  const form = useFormidable<FormInsertData>({});
+
+  return (
+    <>
+      <TopBar title="Add new media" />
+      <PageLayout>
+
+        <Flex
+          direction="column"
+          width="80%"
+          marginX="auto"
+          padding="10px"
+          gap="10px"
+        >
+          <Flex direction="column" width="full">
+            <Flex>
+              <Text flex={1}>format:</Text>
+              <Text flex={4}>
+                The format of the media permit to automatic find meta-data:<br />
+                Artist~album#idTrack-my name of my media.webm<br />
+                <b>example:</b> Clarika~Moi En Mieux#22-des bulles.webm</Text>
+            </Flex>
+            <Flex>
+              <Text flex={1}>Media:</Text>
+              <Input flex={4} type="file" placeholder="Select a media file"
+                accept=".webm" multiple onChange={onChangeFile} />
+            </Flex>
+          </Flex>
+          {parsedElement && parsedElement.length !== 0 && (<>
+            <Text fontSize="30px">Meta-data:</Text>
+            <FormSelect label="Gender" form={form} variableName='genderId' options={dataGenders} keyInputValue='name' />
+            <FormSelect label="Artist" form={form} variableName='artistId' options={dataArtist} keyInputValue='name' />
+            <FormInput label="Album Title (TODO: fusion with next)" isRequired form={form} variableName='title' />
+            <FormSelect label="Album" form={form} variableName='albumId' options={dataAlbums} keyInputValue='name' />
+            <TableContainer>
+              <Table variant='striped' colorScheme='teal' background="gray.700">
+                <Thead>
+                  <Tr>
+                    <Th>track ID</Th>
+                    <Th width="full">Title</Th>
+                    <Th>actions</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {parsedElement.map((data) => (
+                    <Tr key={data.file.name}>
+                      <Td><Input type="number"
+                        pattern="[0-9]{0-4}"
+                        placeholder="e?"
+                        value={data.trackId}
+                        onChange={e => onTrackId(data, e.target.value)}
+                      //[class.error]="data.trackIdDetected === true"
+                      /></Td>
+                      <Td><Input type="text"
+                        placeholder="Name of the Media"
+                        value={data.title}
+                        onChange={e => onTitle(data, e.target.value)}
+                      //[class.error]="data.title === ''"
+                      />
+                        {data.nameDetected === true &&
+                          <><br />
+                            <Text as="span" color="@danger">
+                              ^^^This title already exist !!!
+                            </Text>
+                          </>
+                        }</Td>
+                      <Td><Button onClick={e => removeElementFromList(data, e.target)}>
+                        <LuTrash /> Remove
+                      </Button></Td>
+                    </Tr>))}
+                </Tbody>
+              </Table>
+              <Flex marginY="15px">
+                <Button variant="@primary" onClick={sendFile} disabled={!needSend} marginLeft="auto" marginRight="30px">
+                  <MdCloudUpload /> Upload
+                </Button>
+              </Flex>
+            </TableContainer>
+          </>)}
+
+          {listFileInBdd && (<>
+            <TableContainer>
+              <Table variant='striped' colorScheme='teal' background="gray.700">
+                <Thead>
+                  <Tr>
+                    <Th>track ID</Th>
+                    <Th width="full">Title</Th>
+                    <Th>actions</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {listFileInBdd.map((data) => (
+                    <Tr>
+                      <Td><Text color={data.episodeDetected === true ? "red" : undefined}>{data.trackId}</Text></Td>
+                      <Td><Text color={data.nameDetected === true ? "red" : undefined}>{data.title}</Text></Td>
+                      <Td></Td>
+                    </Tr>))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </>)}
+
+          {parsedFailedElement && (<>
+            <Text fontSize="30px">Rejected:</Text>
+            <TableContainer>
+              <Table variant='striped' colorScheme='teal' background="gray.700">
+                <Thead>
+                  <Tr>
+                    <Th maxWidth='80%'>file</Th>
+                    <Th>Reason</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {parsedFailedElement.map((data) => (
+                    <Tr key={data.file.name}>
+                      <Td>{data.file.name}</Td>
+                      <Td>{data.reason}</Td>
+                    </Tr>))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </>)}
+        </Flex>
+      </PageLayout >
+    </>
+  );
+};

front/src/scene/home/Help.tsx

@@ -1,91 +0,0 @@
-import { ReactElement } from 'react';
-
-import { Center, Flex, Text, Wrap, WrapItem } from '@chakra-ui/react';
-import { LuCrown, LuDisc3, LuEar, LuFileAudio, LuUser } from 'react-icons/lu';
-import { useNavigate } from 'react-router-dom';
-
-import { PageLayout } from '@/components/Layout/PageLayout';
-import { TopBar } from '@/components/TopBar/TopBar';
-import { DataTools, TypeCheck } from '@/utils/data-tools';
-import { useThemeMode } from '@/utils/theme-tools';
-
-type HelpListType = {
-  id: number;
-  name: string;
-  icon: ReactElement;
-  to: string;
-};
-const helpList: HelpListType[] = [
-  {
-    id: 1,
-    name: 'plouf',
-    icon: <LuCrown size="60%" height="full" />,
-    to: 'gender',
-  },
-];
-
-export const HelpPage = () => {
-  const { mode } = useThemeMode();
-  const navigate = useNavigate();
-  const onSelectItem = (data: HelpListType) => {
-    navigate(data.to);
-  };
-  const testData = [
-    {
-      name: 'lkjlkj',
-    },
-  ];
-  const result = DataTools.getsWhere(
-    testData,
-    [
-      {
-        check: TypeCheck.STARTS_WITH,
-        key: 'name',
-        value: ['ll', 'k'],
-      },
-    ],
-    ['track', 'name']
-  );
-  console.log(`startsWith : ${JSON.stringify(result, null, 2)}`);
-
-  return (
-    <>
-      <TopBar title="Help" />
-      <PageLayout>
-        <Wrap spacing="20px" marginX="auto" padding="20px" justify="center">
-          {helpList.map((data) => (
-            <WrapItem
-              width="200px"
-              height="190px"
-              border="1px"
-              borderColor="brand.900"
-              backgroundColor={mode('#FFFFFF88', '#00000088')}
-              key={data.id}
-              padding="5px"
-              as="button"
-              _hover={{
-                boxShadow: 'outline-over',
-                bgColor: mode('#FFFFFFF7', '#000000F7'),
-              }}
-              onClick={() => onSelectItem(data)}
-            >
-              <Flex direction="column" width="full" height="full">
-                <Center height="full">{data.icon}</Center>
-                <Center>
-                  <Text
-                    fontSize="25px"
-                    fontWeight="bold"
-                    textTransform="uppercase"
-                    userSelect="none"
-                  >
-                    {data.name}
-                  </Text>
-                </Center>
-              </Flex>
-            </WrapItem>
-          ))}
-        </Wrap>
-      </PageLayout>
-    </>
-  );
-};

front/src/scene/home/HelpPage.tsx

@@ -0,0 +1,13 @@
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { TopBar } from '@/components/TopBar/TopBar';
+
+export const HelpPage = () => {
+  return (
+    <>
+      <TopBar title="Help" />
+      <PageLayout>
+        No help available right now
+      </PageLayout>
+    </>
+  );
+};

front/src/scene/home/SettingsPage.tsx

@@ -0,0 +1,14 @@
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { TopBar } from '@/components/TopBar/TopBar';
+
+
+export const SettingsPage = () => {
+  return (
+    <>
+      <TopBar title="Help" />
+      <PageLayout>
+        No settings available right now
+      </PageLayout>
+    </>
+  );
+};

front/src/service/Album.ts

@@ -36,7 +36,7 @@ export const useAlbumServiceWrapped = (
   return { store };
 };
 
-export const useOrderedAlbums = (titleFilter: string | undefined) => {
+export const useOrderedAlbums = (titleFilter?: string) => {
   const { store } = useAlbumService();
   const dataAlbums = useMemo(() => {
     let tmpData = store.data;

front/src/service/Artist.ts

@@ -36,7 +36,7 @@ export const useArtistServiceWrapped = (
   return { store };
 };
 
-export const useOrderedArtists = (nameFilter: string | undefined) => {
+export const useOrderedArtists = (nameFilter?: string) => {
   const { store } = useArtistService();
   const dataArtist = useMemo(() => {
     let tmpData = store.data;

front/src/service/Gender.ts

@@ -36,7 +36,7 @@ export const useGenderServiceWrapped = (
   return { store };
 };
 
-export const useOrderedGenders = (titleFilter: string | undefined) => {
+export const useOrderedGenders = (titleFilter?: string) => {
   const { store } = useGenderService();
   const dataGenders = useMemo(() => {
     let tmpData = store.data;