-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Добавлены новые страницы и клиенты, реализован CRUD на Employees.
- Loading branch information
1 parent
d0ebd71
commit 625f0ea
Showing
19 changed files
with
679 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import '../../App.css' | ||
| import React, {useState} from "react"; | ||
| import "react-datepicker/dist/react-datepicker.css"; | ||
| import FilteredTable from "../FilteredTable.tsx"; | ||
| import {CastingClient} from "../../webclients/casting/CastingClient.ts"; | ||
| import {FilterCastingCriteria} from "../../webclients/casting/FilterCastingCriteria.ts"; | ||
| import {Casting} from "../../webclients/casting/Casting.ts"; | ||
| import FilterCastingsForm from "./FilterCastingsForm.tsx"; | ||
|
|
||
| function CastingsPage() { | ||
| const castingClient = new CastingClient() | ||
| const fetchData = async (filters: FilterCastingCriteria): Promise<Casting[]> => { | ||
| try { | ||
| const data = await castingClient.fetchData("castings/filter", filters) | ||
| if (data) { | ||
| setCastings(data) | ||
| return data | ||
| } | ||
| return [] | ||
| } catch (error) { | ||
| console.error('Error fetching data:', error); | ||
| return [] | ||
| } | ||
| } | ||
| const [castings, setCastings] = useState<Casting[]>([]); | ||
| const [editingCastingIndex, setEditingCastingIndex] = useState<number | null>(null); | ||
| const [editedCasting, setEditedCasting] = useState<Casting | null>(null); | ||
|
|
||
| const toggleEditMode = (index: number) => { | ||
| setEditingCastingIndex(index); | ||
| setEditedCasting(castings[index]); | ||
| }; | ||
| // | ||
| // const handleUpdateCasting = async () => { | ||
| // try { | ||
| // if (editedCasting) { | ||
| // const updatedEmployee = await castingClient.updateData("castings", editedCasting.id, editedCasting) | ||
| // if (updatedEmployee) { | ||
| // const updatedCastings = [...castings]; | ||
| // updatedCastings[editingCastingIndex!] = editedCasting; | ||
| // setCastings(updatedCastings); | ||
| // setEditingCastingIndex(null); | ||
| // setEditedCasting(null); | ||
| // } | ||
| // } | ||
| // } catch (error) { | ||
| // console.error('Error updating employee:', error); | ||
| // } | ||
| // }; | ||
| // | ||
| // const handleDeleteCasting = async (castingId: number) => { | ||
| // try { | ||
| // const deleted = await castingClient.deleteData("castings", castingId) | ||
| // if (deleted) { | ||
| // setCastings(castings.filter(casting => casting.id !== castingId)); | ||
| // setEditingCastingIndex(null); | ||
| // setEditedCasting(null); | ||
| // } | ||
| // } catch (error) { | ||
| // console.error('Error deleting employee:', error); | ||
| // } | ||
| // }; | ||
|
|
||
| const renderRow = (casting: Casting, index: number) => ( | ||
| <tr key={casting.actorId} | ||
| onClick={() => { | ||
| if (index !== editingCastingIndex) { | ||
| toggleEditMode(index); | ||
| } | ||
| }}> | ||
| <td>{casting.actorId}</td> | ||
| <td>{casting.actorFirstName}</td> | ||
| <td>{casting.actorSecondName}</td> | ||
| <td>{casting.playTitle}</td> | ||
| <td>{casting.performanceDate}</td> | ||
| <td>{casting.performanceId}</td> | ||
| <td>{casting.doubleId}</td> | ||
| <td>{casting.roleId}</td> | ||
| <td>{casting.roleName}</td> | ||
| <td>{casting.roleDescription}</td> | ||
| </tr> | ||
| ); | ||
|
|
||
|
|
||
| return ( | ||
| <FilteredTable<Casting, FilterCastingCriteria> | ||
| fetchData={fetchData} | ||
| filterInitialState={{ | ||
| actorId: undefined, | ||
| dateOfStart: undefined, | ||
| dateOfEnd: undefined, | ||
| playGenreId: undefined, | ||
| productionDirectorId: undefined, | ||
| ageCategory: undefined | ||
| }} | ||
| renderRow={renderRow} | ||
| FilterComponent={FilterCastingsForm} | ||
| tableHeaders={["ID актёра", "Имя актёра", "Фамилия актёра", "Название пьесы", "Дата спектакля", "ID спектакля", "ID дублёра", "ID роли", "Название роли", "Описание роли"]} | ||
| tableData={castings} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default CastingsPage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| import React, {useEffect, useState} from 'react'; | ||
| import '../../Filter.css'; | ||
| import {FilterProps} from "../../FilterProps.ts"; | ||
| import {FilterCastingCriteria} from "../../webclients/casting/FilterCastingCriteria.ts"; | ||
| import {GenreClient} from "../../webclients/genre/GenreClient.ts"; | ||
| import {Genre} from "../../webclients/genre/Genre.ts"; | ||
| import {ActorClient} from "../../webclients/actor/ActorClient.ts"; | ||
| import {DatePicker} from "antd"; | ||
| import {Actor} from "../../webclients/actor/Actor.ts"; | ||
|
|
||
| const FilterCastingsForm: React.FC<FilterProps<FilterCastingCriteria>> = ({onFilterChange}) => { | ||
| const [filters, setFilters] = useState<FilterCastingCriteria>({ | ||
| actorId: undefined, | ||
| dateOfStart: undefined, | ||
| dateOfEnd: undefined, | ||
| playGenreId: undefined, | ||
| productionDirectorId: undefined, | ||
| ageCategory: undefined | ||
| }); | ||
|
|
||
| const [actorsOptions, setActorsOptions] = useState<Actor[]>([]) | ||
| const [genresOptions, setGenresOptions] = useState<Genre[]>([]) | ||
| const [startDate, setStartDate] = useState<string | undefined | null>(); | ||
| const [endDate, setEndDate] = useState<string | undefined | null>(); | ||
| const [error, setError] = useState<string>(''); | ||
|
|
||
| const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { | ||
| const {name, value} = event.target; | ||
| setFilters({...filters, [name]: value}); | ||
| }; | ||
|
|
||
| const handleStartDateChange = (date: string | null) => { | ||
| setStartDate(date); | ||
| setFilters({ | ||
| ...filters, | ||
| dateOfStart: date ? formatDate(new Date(date)) : undefined | ||
| }); | ||
| }; | ||
|
|
||
| const handleEndDateChange = (date: string | null) => { | ||
| setEndDate(date); | ||
| setFilters({ | ||
| ...filters, | ||
| dateOfEnd: date ? formatDate(new Date(date)) : undefined | ||
| }); | ||
| }; | ||
|
|
||
| function formatDate(date: Date): string { | ||
| const year = date.getFullYear(); | ||
| const month = String(date.getMonth() + 1).padStart(2, '0'); | ||
| const day = String(date.getDate()).padStart(2, '0'); | ||
| return `${year}-${month}-${day}`; | ||
| } | ||
|
|
||
|
|
||
| const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| onFilterChange(filters); | ||
| console.log(filters) | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const fetchActorsOptions = async () => { | ||
| const countriesClient = ActorClient.getInstance() | ||
| try { | ||
| const actors = await countriesClient.fetchAllActors() | ||
| if (actors) { | ||
| setActorsOptions(actors); | ||
| } | ||
| } catch (error) { | ||
| console.error('There was a problem with the fetch operation:', error); | ||
| } | ||
| }; | ||
|
|
||
| const fetchGenresOptions = async () => { | ||
| const genresClient = GenreClient.getInstance() | ||
| try { | ||
| const genres = await genresClient.fetchAllGenres() | ||
| if (genres) { | ||
| setGenresOptions(genres); | ||
| } | ||
| } catch (error) { | ||
| console.error('There was a problem with the fetch operation:', error); | ||
| } | ||
| }; | ||
|
|
||
| fetchGenresOptions().then() | ||
| fetchActorsOptions().then() | ||
| }, []); | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit} className="filter-form"> | ||
| <label className="form-label"> | ||
| Актёр: | ||
| <select | ||
| name="actorId" | ||
| value={filters.actorId} | ||
| onChange={handleInputChange} | ||
| className="form-input"> | ||
| {actorsOptions.map(actor => ( | ||
| <option key={actor.id} value={actor.id}> | ||
| {actor.firstName} {actor.secondName} {actor.patronymic} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| </label> | ||
|
|
||
| <label className="form-label"> | ||
| Рассматривать спектакли, начиная с даты: | ||
| <DatePicker | ||
| allowClear={true} | ||
| name="dateOfStart" | ||
| onChange={handleStartDateChange} | ||
| value={startDate} | ||
| className="form-input" | ||
| /> | ||
| </label> | ||
|
|
||
| <label className="form-label"> | ||
| Рассматривать спектакли, заканчивая датой: | ||
| <DatePicker | ||
| allowClear={true} | ||
| name="dateOfEnd" | ||
| onChange={handleEndDateChange} | ||
| value={startDate} | ||
| className="form-input" | ||
| /> | ||
| </label> | ||
|
|
||
| <label className="form-label"> | ||
| Жанр: | ||
| <select | ||
| name="genreId" | ||
| value={filters.playGenreId} | ||
| onChange={handleInputChange} | ||
| className="form-input"> | ||
| {genresOptions.map(genre => ( | ||
| <option key={genre.id} value={genre.id}> | ||
| {genre.title} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| </label> | ||
|
|
||
| {/*<label className="form-label">*/} | ||
| {/* Режиссёр-постановщик:*/} | ||
| {/* <input type="number"*/} | ||
| {/* name="amountOfChildren"*/} | ||
| {/* value={filters.amountOfChildren}*/} | ||
| {/* onChange={handleInputChange}*/} | ||
| {/* className="form-input"/>*/} | ||
| {/*</label>*/} | ||
|
|
||
| <label className="form-label"> | ||
| Возрастная категория спектакля: | ||
| <select name="ageCategory" | ||
| value={filters.ageCategory} | ||
| onChange={handleInputChange} | ||
| className="form-select"> | ||
| <option value="">Любая</option> | ||
| <option value="0">0+</option> | ||
| <option value="6">6+</option> | ||
| <option value="12">12+</option> | ||
| <option value="16">16+</option> | ||
| <option value="18">18+</option> | ||
| </select> | ||
| </label> | ||
| <button type="submit" className="form-button">Применить фильтр</button> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default FilterCastingsForm; |
Oops, something went wrong.