ЛР4 сдано, но плохо отображаются зависимости

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

@@ -19,7 +19,9 @@
                 ],
                 selectedGenres: [],
                 genreUrl: 'genre/',
-                genres: []
+                genres: [],
+                open: [],
+                len: undefined
             }
         },
         created() {
@@ -44,6 +46,22 @@
                 for(var j=0; j<genreIds.length; j++){
                     await this.addGenre(filmId, genreIds[j]);
                 }
+            },
+            funct(filmId, genreIds, genreId){
+                this.selectedGenres = [];
+                this.open
+                if(genreIds != undefined){
+                    this.len =  genreIds.length;
+                }
+                else{
+                    this.len = 0;
+                }
+                for (var i = 0; i < this.len; i++) {
+                    if (genreIds[i] === genreId) {
+                        this.selectedGenres.push(genreId);
+                    }
+                }
+                return this.selectedGenres;
             }
         }
     }

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

@@ -0,0 +1,126 @@
+<script>
+import axios from 'axios';
+import CatalogMixins from '../mixins/CatalogMixins.js';
+import Film from "../models/Film";
+import Genre from "../models/Genre";
+import DataService from '../services/DataService';
+
+export default {
+mixins: [
+CatalogMixins
+],
+data() {
+return {
+getAllUrl: 'film/',
+dataUrl: 'film',
+transformer: (data) => new Film(data),
+headers: [
+{ name: 'name', label: 'Название' }
+],
+headersGenres: [
+{ name: 'name', label: 'Жанр' }
+],
+selectedItemsGenres: [],
+genreUrl: 'genre/',
+genres: [],
+dataFilterUrl: 'genre/film/'
+}
+},
+created() {
+DataService.readAll(this.genreUrl, (data) => new Genre(data))
+.then(data => {
+this.genres = data;
+});
+},
+methods: {
+addGenre(filmId) {
+let genreId = document.getElementById('genres').value;
+let response = axios.post(`http://localhost:8080/film/add_genre/${filmId}?genre_id=${genreId}`);
+console.log(response);
+},
+delGenre(filmId) {
+let genreId = document.getElementById('genres').value;
+let response = axios.delete(`http://localhost:8080/film/del_genre/${filmId}?genre_id=${genreId}`);
+console.log(response);
+},
+itemsGenres(genreIds) {
+let result = [];
+if (typeof genreIds === 'undefined') {
+return;
+}
+this.genres.forEach(genre => {
+for (let i = 0; i < genreIds.length; i++) {
+if (genre.id === genreIds[i]) {
+result.push(genre);
+}
+}
+});
+return result;
+},
+    filter() {
+        let genreId = document.getElementById('genreFilterSelect').value;
+        DataService.readAll(this.dataFilterUrl + this.genreId, (data) => new Genre(data))
+        .then(data => {
+        this.items = data;
+        });
+    },
+clearFilters() {
+this.loadItems();
+this.id = null;
+this.name = null;
+this.genreId = null;
+}
+}
+}
+</script>
+
+<template>
+<div>
+<select class="form-select" id="genreFilterSelect" v-model="genreId">
+<option disabled value="" selected>Выберите жанр</option>
+<option v-for="genre in this.genres" :value="genre.id">{{ genre.name }}</option>
+</select>
+
+    <button class="btn btn-primary" type="button" id="report-button"
+    @click.prevent="filter">Сформировать</button>
+    <button class="btn btn-outline-secondary" type="button" id="report-button"
+    @click.prevent="clearFilters">Очистить</button>
+</div>
+<DataTable
+:headers="this.headers"
+:items="this.items"
+:selectedItems="this.selectedItems"
+@dblclick="showEditModalDblClick">
+</DataTable>
+<Modal
+:header="this.modal.header"
+:confirm="this.modal.confirm"
+v-model:visible="this.modalShow"
+@done="saveItem">
+<div class="mb-3">
+<label for="name" class="form-label">Название фильма</label>
+<input type="text" class="form-control" id="name" required v-model="data.name">
+</div>
+<DataTable
+:headers="this.headersGenres"
+:items="itemsGenres(data.genreIds)"
+:selectedItems="this.selectedItemsGenres">
+</DataTable>
+<div class="mb-3">
+<label for="genres" class="form-label">Жанры</label>
+<select class="form-select" id="genres" required>
+<option disabled value="">Выберите жанр</option>
+<option v-for="genre in this.genres"
+:value="genre.id">
+{{ genre.name }}
+</option>
+</select>
+</div>
+<div class="d-flex justify-content-between">
+<button class="btn btn-outline-secondary" type="button" id="addGenreButton"
+@click.prevent="addGenre(data.id)">Добавить</button>
+<button class="btn btn-outline-secondary" type="button" id="delGenreButton"
+@click.prevent="delGenre(data.id)">Удалить</button>
+</div>
+</Modal>
+</template>

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

@@ -1,5 +1,6 @@
 <template>
     <router-link to="/catalogs" class="nav-link"><button class="btn btn-success my-1" type="submit">Каталоги</button></router-link>
+    <router-link to="/report" class="nav-link"><button class="btn btn-success my-1" type="submit">Отчет</button></router-link>
 </template>
 
 <style scoped>

Frontend/vue-project/src/main.js

@@ -11,6 +11,7 @@ import Catalogs from './components/Catalogs.vue'
 import CatalogGenres from './components/CatalogGenres.vue'
 import CatalogFilms from './components/CatalogFilms.vue'
 import CatalogCollections from './components/CatalogCollections.vue'
+import ReportGenre from './components/ReportGenre.vue'
 
 const routes = [
     { path: '/', redirect: '/index' },
@@ -23,7 +24,8 @@ const routes = [
     { path: '/catalogs', component: Catalogs},
     { path: '/catalogs/genres', component: CatalogGenres},
     { path: '/catalogs/films', component: CatalogFilms},
-    { path: '/catalogs/collections', component: CatalogCollections}
+    { path: '/catalogs/collections', component: CatalogCollections},
+    { path: '/report', component: ReportGenre}
 ]
 
 const router = createRouter({