ЛР4 теперь готова

Frontend/vue-project/src/components/Header.vue

@@ -20,6 +20,9 @@
                 <li class="nav-item">
                     <router-link to="/catalogs/collections" class="nav-link">Коллекции</router-link>
                 </li>
+                <li class="nav-item">
+                    <router-link to="/report" class="nav-link">Отчет</router-link>
+                </li>
             </ul>
             </div>
         </div>

Frontend/vue-project/src/components/Report.vue

@@ -0,0 +1,76 @@
+<script>
+	import 'axios';
+    import axios from "axios";
+    import Film from "../models/Film";
+    import Genre from "../models/Genre";
+
+    export default{
+        created() {
+            this.getFilms();
+            this.getGenres();
+        },
+        data() {
+            return{
+                films: [],
+                URL: "http://localhost:8080/",
+                genres: [],
+                genreId: undefined
+            }
+        },
+        methods: {
+            getFilms(){
+                axios.get(this.URL + "film")
+                    .then(response => {
+                        this.films = response.data;
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            getGenres(){
+                axios.get(this.URL + "genre")
+                    .then(response => {
+                        this.genres = response.data;
+                        console.log(response.data);
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            },
+            filter() {
+                let genreId = document.getElementById('genreFilterSelect').value;
+                axios.get(this.URL + `genre/film/${genreId}`)
+                    .then(response => {
+                        this.films = response.data;
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
+            }
+        }
+    }
+</script>
+<template>
+    <div class="mt-4">
+        <h2 class="text-danger">Выберите жанр для отчета</h2>
+        <select class="form-select" id="genreFilterSelect" required>
+        <option v-for="genre in this.genres" :value="genre.id">{{ genre.name }}</option>
+        </select>
+        <button class="btn btn-success" type="button" id="report-button"
+        @click.prevent="filter">Сформировать</button>
+        <button class="btn btn-danger" type="button" id="report-button"
+        @click.prevent="getFilms">Очистить</button>
+        <table class="table text-light">
+            <thead>
+            <tr>
+                <th>Название</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="flm in films" :key="flm.id">
+                <td>{{ flm.name }}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

Frontend/vue-project/src/main.js

@@ -5,13 +5,15 @@ import Index from './components/Index.vue'
 import CatalogGenres from './components/CatalogGenres.vue'
 import CatalogFilms from './components/CatalogFilms.vue'
 import CatalogCollections from './components/CatalogCollections.vue'
+import Report from './components/Report.vue'
 
 const routes = [
     { path: '/', redirect: '/index' },
     { path: '/index', component: Index},
     { path: '/catalogs/genres', component: CatalogGenres},
     { path: '/catalogs/films', component: CatalogFilms},
-    { path: '/catalogs/collections', component: CatalogCollections}
+    { path: '/catalogs/collections', component: CatalogCollections},
+    { path: '/report', component: Report}
 ]
 
 const router = createRouter({