lab5 full

frontend/src/App.js

@@ -8,19 +8,15 @@ import Contacts from './components/pages/Contacts';
 import Catalogs from './components/pages/Catalogs';
 import CatalogFilms from './components/catalogs/CatalogFilms';
 import CatalogGenres from './components/catalogs/CatalogGenres';
-import Reports from './components/pages/Reports';
-import ReportsFilms from './components/reports/ReportsFilms';
+import CatalogActors from './components/catalogs/CatalogActors';
 
 const links = [
   {id: 1, text: "Главная", path: ""},
   {id: 2, text: "Фильмы", path: "films"},
   {id: 3, text: "Контакты", path: "contacts"},
   {id: 4, text: "Каталог", path: "catalogs"},
-  {id: 5, text: "Отчеты", path: "reports"},
 ];
 
-
-
 function App() {
   return (
     <>
@@ -34,8 +30,7 @@ function App() {
           <Route path="catalogs" element={<Catalogs/>}/>
           <Route path="catalogs/catalogFilms" element={<CatalogFilms />}/>
           <Route path="catalogs/catalogGenres" element={<CatalogGenres />}/>
-          <Route path="reports" element={<Reports />}/>
-          <Route path="reports/reportsFilms" element={<ReportsFilms />}/>
+          <Route path="catalogs/catalogActors" element={<CatalogActors />}/>
         </Routes>
       </BrowserRouter>
     </>

frontend/src/components/catalogs/CatalogActors.jsx

@@ -0,0 +1,51 @@
+import Catalog from "../common/Catalog";
+import { useEffect, useState } from "react";
+
+import DataService from "../../services/DataService";
+
+let headers = [
+  {label: "name", text: "Имя"},
+  {label: "surname", text: "Фамилия"}
+]
+
+export default function CatalogActors() {
+  const url = "/actors";
+
+  const [data, setData] = useState({
+    name: "",
+    surname: ""
+  });
+
+  const [actors, setActors] = useState([]);
+
+  function handleFormChange(e) {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+
+  function onAdd() {
+    setData({name: "", genre: actors[0]});
+  }
+
+  
+  function onChange(data) {
+    setData(data);
+  }
+
+  function validate(data) {
+    if(data.name === "") return false;
+    return true;
+  }
+
+  return (
+    <Catalog url={url} headers={headers} data={data} onAdd={onAdd} onChange={onChange} validate={validate}>
+      <div className="mb-3">
+          <label htmlFor="name" className="form-label">Имя</label>
+          <input type="text" value={data.name} id="name" className="form-control" required autoComplete="off"
+              onChange={handleFormChange}/>
+          <label htmlFor="surname" className="form-label">Фамилия</label>
+          <input type="text" value={data.surname} id="surname" className="form-control" required autoComplete="off"
+                  onChange={handleFormChange}/>
+      </div>
+    </Catalog>
+  )
+}

frontend/src/components/catalogs/CatalogFilms.jsx

@@ -5,7 +5,8 @@ import DataService from "../../services/DataService"
 
 let headers = [
   {label: "name", text: "Имя"},
-  {label: "genre", text: "Жанр"}
+  {label: "genre", text: "Жанр"},
+  {label: "fullNames", text: "Актеры"}
 ]
 
 
@@ -14,15 +15,28 @@ export default function CatalogFilms() {
 
   const [data, setData] = useState({
     name: "",
-    genre: ""
+    genre: [],
+    fullNames: []
+  });
+
+  const [selectedData, setSelectedData] = useState({
+    genre: "",
+    actor: ""
   });
 
   const [genres, setGenres] = useState([]);
+  const [actors, setActors] = useState([]);
 
   useEffect(() => {
+    let genre;
     DataService.readAll("/genres").then(res => {
       setGenres(res)
-      setData({...data, genre: res[0].genre})
+      genre = res[0].name;
+    }).then(() => (
+      DataService.readAll("/actors")
+    )).then(res => {
+      setActors(res)
+      setSelectedData({genre, actor: res[0].name + " " + res[0].surname});
     });
   }, [])
 
@@ -32,8 +46,42 @@ export default function CatalogFilms() {
     setData({ ...data, [e.target.id]: e.target.value })
   }
 
+  function handleChangeSelected(e) {
+    setSelectedData({...selectedData, [e.target.id]: e.target.value});
+  }
+
+  function addGenre() {
+    for(let g of data.genre) {
+      if(g == selectedData.genre) return;
+    }
+    let temp = data.genre.slice(0);
+    temp.push(selectedData.genre);
+    setData({...data, genre: temp});
+  }
+
+  function addActor() {
+    for(let a of data.fullNames) {
+      if(a == selectedData.actor) return;
+    }
+    let temp = data.fullNames.slice(0);
+    temp.push(selectedData.actor);
+    setData({...data, fullNames: temp});
+  }
+
+  function deleteGenre(e) {
+    let genreName = e.target.previousSibling.textContent;
+    let temp = data.genre.filter(x => (x != genreName));
+    setData({...data, genre: temp})
+  }
+
+  function deleteActor(e) {
+    let actorName = e.target.previousSibling.textContent;
+    let temp = data.fullNames.filter(x => (x != actorName));
+    setData({...data, fullNames: temp})
+  }
+
   function onAdd() {
-    setData({name: "", genre: genres[0].genre});
+    setData({name: "", genre: [], fullNames: []});
   }
 
   
@@ -55,14 +103,44 @@ export default function CatalogFilms() {
                 onChange={handleFormChange}/>
         </div>
         <select id="genre" className="form-select" required
-                value={data.genre} onChange={handleFormChange}>
+                value={selectedData.genre} onChange={handleChangeSelected}>
                 <option disabled value="">Укажите жанр</option>
                 { 
-                    genres.map(({genre, id}) => 
-                        <option key={id} value={genre}>{genre}</option>
+                    genres.map(({name, id}) => 
+                        <option key={id} value={name}>{name}</option>
                     )
                 }
         </select>
+        {
+          data.genre.map(value => (
+              <div className="badge bg-secondary m-1" key={value}>
+                <span>{value}</span>
+                <button className="btn-close bg-danger m-1" onClick={deleteGenre}></button>
+              </div>
+          ))
+        }
+        <br></br>
+        <button onClick={addGenre} className="btn btn-success">Добавить жанр</button>
+
+        <select id="actor" className="form-select" required
+                value={selectedData.actor} onChange={handleChangeSelected}>
+                <option disabled value="">Укажите актера</option>
+                { 
+                    actors.map(({name, surname, id}) => 
+                        <option key={id} value={name + " " + surname}>{name + " " + surname}</option>
+                    )
+                }
+        </select>
+        {
+          data.fullNames.map(value => (
+              <div className="badge bg-secondary m-1" key={value}>
+                <span>{value}</span>
+                <button className="btn-close bg-danger m-1" onClick={deleteActor}></button>
+              </div>
+          ))
+        }
+        <br></br>
+        <button onClick={addActor} className="btn btn-success">Добавить актера</button>
         </div>
     </Catalog>
   )

frontend/src/components/catalogs/CatalogGenres.jsx

@@ -4,14 +4,14 @@ import { useEffect, useState } from "react";
 import DataService from "../../services/DataService"
 
 let headers = [
-  {label: "genre", text: "Жанр"}
+  {label: "name", text: "Жанр"}
 ]
 
 export default function CatalogGenres() {
   const url = "/genres";
 
   const [data, setData] = useState({
-    genre: ""
+    name: ""
   });
 
   const [genres, setGenres] = useState([]);
@@ -30,15 +30,15 @@ export default function CatalogGenres() {
   }
 
   function validate(data) {
-    if(data.genre === "") return false;
+    if(data.name === "") return false;
     return true;
   }
 
   return (
     <Catalog url={url} headers={headers} data={data} onAdd={onAdd} onChange={onChange} validate={validate}>
       <div className="mb-3">
-          <label htmlFor="genre" className="form-label">Название</label>
-          <input type="text" value={data.genre} id="genre" className="form-control" required autoComplete="off"
+          <label htmlFor="name" className="form-label">Название</label>
+          <input type="text" value={data.name} id="name" className="form-control" required autoComplete="off"
               onChange={handleFormChange}/>
       </div>
     </Catalog>

frontend/src/components/common/Catalog.jsx

@@ -37,7 +37,7 @@ export default function Catalog(props) {
   }
 
   function addHandler() {
-    setModalHeader("Добавление фильма");
+    setModalHeader("Добавление");
     setModalConfirm("Добавить");
     setEdit(false);
     setVisible(true);
@@ -60,7 +60,7 @@ export default function Catalog(props) {
 
     selectedItems = new Set();
 
-    setModalHeader("Изменение фильма");
+    setModalHeader("Изменение");
     setModalConfirm("Изменить");
     setEdit(true);
     setVisible(true);
@@ -68,11 +68,13 @@ export default function Catalog(props) {
 
   function removeHandler() {
     let queries = [];
-    for(let id of selectedItems.keys()) {
+    for(let id of selectedItems.values()) {
       queries.push(DataService.remove(props.url, id));
     }
 
-    Promise.all(queries).then(() => loadItems());
+    Promise.all(queries).then(() => {
+      loadItems()
+    });
   }
 
   function confirmHandler() {

frontend/src/components/common/Table.jsx

@@ -27,11 +27,12 @@ export default function Table(props) {
           let trClass = "";
           if(props.selectable && props.selected.has(elem.id)) trClass = "selected";
           return (
-          <tr key={elem.id} onClick={click.bind(this, elem.id)} className={trClass}>
+            <tr key={elem.id} onClick={click.bind(this, elem.id)} className={trClass}>
             <td>{index + 1}</td>
-            {props.headers.map(({label}) => (
-              <td key={label}>{elem[label]}</td>
-            ))}
+            {props.headers.map(({label}) => {
+              return <td key={label}>{(Array.isArray(elem[label])) ? elem[label].join(", ") : elem[label]}</td>
+            }
+            )}
           </tr>
         )})}
       </tbody>

frontend/src/components/pages/Catalogs.jsx

@@ -2,7 +2,8 @@ import LinksList from "../common/LinksList";
 
 export default function Catalogs() {
   let items = [
-    {text: "фильмы", link: "catalogFilms"},
+    {text: "фильмы", link: "catalogFilms"},,
+    {text: "актеры", link: "catalogActors"},
     {text: "жанры", link: "catalogGenres"}
   ];
 

frontend/src/services/DataService.js

@@ -1,9 +1,10 @@
 export default class DataSirvice {
-  static urlPrefix = "http://localhost:8079";
+  static urlPrefix = "http://localhost:8080";
 
   static async readAll(url) {
     let data = await fetch(this.urlPrefix + url);
-    return data.json();
+    let res = await data.json();
+    return res;
   }
 
   static create(url, data) {
@@ -22,7 +23,7 @@ export default class DataSirvice {
     console.log(data);
     data.id = id;
     return fetch(this.urlPrefix + url + "/" + id, {
-      method: "PUT",
+      method: "PATCH",
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json'
@@ -32,7 +33,7 @@ export default class DataSirvice {
   }
 
   static remove(url, id) {
-    fetch(this.urlPrefix + url + "/" + id, {
+    return fetch(this.urlPrefix + url + "/" + id, {
       method: "DELETE"
     });
   }

src/main/java/ru/ip/labs/labs/films/controller/ActorController.java

@@ -32,7 +32,7 @@ public class ActorController {
         return new ActorDTO(actorService.addActor(actor.getName(), actor.getSurname()));
     }
 
-    @PatchMapping("")
+    @PatchMapping("/{id}")
     public ActorDTO updateActor(@PathVariable Long id, @RequestBody @Valid ActorDTO actor) {
         return new ActorDTO(actorService.updateActor(id, actor.getName(), actor.getSurname()));
     }

src/main/java/ru/ip/labs/labs/films/controller/FilmMvcController.java

@@ -49,7 +49,7 @@ public class FilmMvcController {
             model.addAttribute("errors", bindingResult.getAllErrors());
             return "films-catalog";
         }
-        Long filmId = filmDTO.getId();
+        Long filmId = id;
 
         if (id == null || id <= 0) {
             Film result = filmService.addFilm(filmDTO.getName());

src/main/java/ru/ip/labs/labs/films/dto/ActorDTO.java

@@ -16,7 +16,6 @@ public class ActorDTO {
     private String name;
     private String surname;
     private String fullName;
-    private byte[] photo;
 
     private List<Film> films;
 
@@ -26,7 +25,6 @@ public class ActorDTO {
         this.id = actor.getId();
         this.name = actor.getName();
         this.surname = actor.getSurname();
-        this.photo = actor.getPhoto();
         this.fullName = this.name + this.surname;
     }
     public ActorDTO(Long id, String name, String surname, byte[] photo) {
@@ -34,16 +32,6 @@ public class ActorDTO {
         this.name = name;
         this.surname = surname;
         this.fullName = this.name + this.surname;
-        this.photo = photo;
-    }
-
-    public byte[] getPhoto() {
-        return photo;
-    }
-
-    public void setPhoto(String path) throws IOException {
-        File f = new File(path);
-        photo = Files.readAllBytes(f.toPath());
     }
 
     public Long getId() {

src/main/resources/templates/actors-catalog.html

@@ -78,6 +78,9 @@
         editForm.action = "/actor";
         editForm.previousElementSibling.children[0].textContent = "Добавление";
         editForm.children[1].children[1].textContent = "Добавить";
+
+        editForm.name.value = "";
+        editForm.surname.value = "";
     }
 
     editBtn.onclick = () => {
@@ -92,6 +95,7 @@
         editForm.previousElementSibling.children[0].textContent = "Изменение";
         submitBtn.textContent = "Изменить";
         editForm.name.value = elem.children[1].textContent;
+        editForm.surname.value = elem.children[2].textContent;
 
     }
 

src/main/resources/templates/films-catalog.html

@@ -44,12 +44,34 @@
                             <label htmlFor="nameInput" class="form-label">Название</label>
                             <input id="nameInput" type="text" th:field="${filmDTO.name}" name="name" class="form-control" required autoComplete="off">
                         </div>
-                        <select name="genre" class="form-select" th:field="${filmDTO.genre}" multiple="multiple">
+                        <select name="selectedGenre" class="form-select">
+                            <option disabled value="">Укажите жанр</option>
                             <option th:each="g : ${allGenres}"
                                     th:value="${g}"
                                     th:text="${g}"></option>
                         </select>
-                        <select name="fullNames" class="form-select" th:field="${filmDTO.fullNames}" multiple="multiple">
+                        <div id="selectedGenres">
+                        </div>
+                        <br>
+                        <button type="button" class="btn btn-success" id="addGenre">Добавить жанр</button>
+
+                        <select name="selectedActor" class="form-select">
+                            <option disabled value="">Укажите актера</option>
+                            <option th:each="a : ${allActors}"
+                                    th:value="${a}"
+                                    th:text="${a}"></option>
+                        </select>
+                        <div id="selectedActors">
+                        </div>
+                        <br>
+                        <button type="button" class="btn btn-success" id="addActor">Добавить актера</button>
+
+                        <select name="genre" class="form-select" th:field="${filmDTO.genre}" multiple="multiple" hidden>
+                            <option th:each="g : ${allGenres}"
+                                    th:value="${g}"
+                                    th:text="${g}"></option>
+                        </select>
+                        <select name="fullNames" class="form-select" th:field="${filmDTO.fullNames}" multiple="multiple" hidden>
                             <option th:each="a : ${allActors}"
                                     th:value="${a}"
                                     th:text="${a}"></option>
@@ -74,6 +96,8 @@
     let editBtn = document.getElementById("editBtn");
     let submitBtn = document.getElementById("submitBtn");
     let closeBtn = document.getElementById("closeBtn");
+    let addGenreBtn = document.getElementById("addGenre");
+    let addActorBtn = document.getElementById("addActor");
     let editForm = document.getElementById("edit-form");
     let deleteForm = document.getElementById("delete-form");
 
@@ -84,7 +108,19 @@
     addBtn.onclick = (e) => {
         editForm.action = "/film";
         editForm.previousElementSibling.children[0].textContent = "Добавление";
-        editForm.children[1].children[1].textContent = "Добавить";
+        submitBtn.textContent = "Добавить";
+
+        editForm.name.value = "";
+
+        document.getElementById("selectedGenres").innerHTML = "";
+        for(let opt of editForm.genre.options) {
+            opt.selected = false;
+        }
+
+        document.getElementById("selectedActors").innerHTML = "";
+        for(let opt of editForm.fullNames.options) {
+            opt.selected = false;
+        }
     }
 
     editBtn.onclick = (e) => {
@@ -101,8 +137,44 @@
         editForm.name.value = elem.children[1].textContent;
 
         let genresArr = elem.children[2].textContent.split(", ");
+        document.getElementById("selectedGenres").innerHTML = "";
         for(let opt of editForm.genre.options) {
-            if(genresArr.indexOf(opt.value) != -1) opt.selected = true;
+            if(genresArr.indexOf(opt.value) == -1) continue;
+            let budge = document.createElement("div");
+            budge.className = "badge bg-secondary m-1";
+            budge.innerHTML = `
+                <span>${opt.value}</span>
+                <button type="button" class="btn-close bg-danger m-1"></button>
+            `;
+
+            budge.children[1].onclick = () => {
+                budge.remove();
+                opt.selected = false;
+            }
+
+            document.getElementById("selectedGenres").appendChild(budge);
+            opt.selected = true;
+        }
+
+        let actorsArr = elem.children[3].textContent.split(", ");
+        document.getElementById("selectedActors").innerHTML = "";
+
+        for(let opt of editForm.fullNames.options) {
+            if(actorsArr.indexOf(opt.value) == -1) continue;
+            let budge = document.createElement("div");
+            budge.className = "badge bg-secondary m-1";
+            budge.innerHTML = `
+                <span>${opt.value}</span>
+                <button type="button" class="btn-close bg-danger m-1"></button>
+            `;
+
+            budge.children[1].onclick = () => {
+                budge.remove();
+                opt.selected = false;
+            }
+
+            document.getElementById("selectedActors").appendChild(budge);
+            opt.selected = true;
         }
     }
     deleteBtn.onclick = () => {
@@ -114,6 +186,56 @@
         deleteForm.action = "/film/delete/" + elem.id;
         deleteForm.submit();
     }
+
+    addGenreBtn.onclick = () => {
+        let selectedIndex = editForm.selectedGenre.selectedIndex;
+        let g = editForm.selectedGenre.options[selectedIndex].value;
+
+        for(let elem of editForm.genre.options) {
+            if(g != elem.value) continue;
+            if(elem.selected) return;
+            elem.selected = true;
+
+            let budge = document.createElement("div");
+            budge.className = "badge bg-secondary m-1";
+            budge.innerHTML = `
+                <span>${g}</span>
+                <button type="button" class="btn-close bg-danger m-1"></button>
+            `;
+
+            budge.children[1].onclick = () => {
+                budge.remove();
+                elem.selected = false;
+            }
+
+            document.getElementById("selectedGenres").appendChild(budge);
+        }
+    }
+
+    addActorBtn.onclick = () => {
+        let selectedIndex = editForm.selectedActor.selectedIndex;
+        let a = editForm.selectedActor.options[selectedIndex].value;
+
+        for(let elem of editForm.fullNames.options) {
+            if(a != elem.value) continue;
+            if(elem.selected) return;
+            elem.selected = true;
+
+            let budge = document.createElement("div");
+            budge.className = "badge bg-secondary m-1";
+            budge.innerHTML = `
+                <span>${a}</span>
+                <button type="button" class="btn-close bg-danger m-1"></button>
+            `;
+
+            budge.children[1].onclick = () => {
+                budge.remove();
+                elem.selected = false;
+            }
+
+            document.getElementById("selectedActors").appendChild(budge);
+        }
+    }
     </script>
 </th:block>
 </body>

src/main/resources/templates/genres-catalog.html

@@ -71,6 +71,7 @@
         editForm.action = "/genre";
         editForm.previousElementSibling.children[0].textContent = "Добавление";
         editForm.children[1].children[1].textContent = "Добавить";
+        editForm.name.value = "";
     }
 
     editBtn.onclick = (e) => {