From 1bbf9cfac95b0947d0d1bb614e4f76ab080227eb Mon Sep 17 00:00:00 2001 From: Serghei Date: Wed, 5 Apr 2023 23:27:14 +0300 Subject: [PATCH 01/15] Updated frontend --- frontend/src/App.js | 12 +++- frontend/src/components/ProjectForm.js | 74 +++++++++++++++++++ frontend/src/components/Projects.js | 86 ++++++++++++++++++++--- frontend/src/components/ProjectsDetail.js | 31 ++++++-- frontend/src/components/Todo.js | 20 ++++-- frontend/src/components/TodoForm.js | 68 ++++++++++++++++++ library/todo/models.py | 5 +- library/todo/serializers.py | 3 +- 8 files changed, 274 insertions(+), 25 deletions(-) create mode 100644 frontend/src/components/ProjectForm.js create mode 100644 frontend/src/components/TodoForm.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 2cfe827..5362f23 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -14,6 +14,7 @@ import axios from 'axios'; import Cookies from 'universal-cookie'; + class App extends React.Component { constructor(props) { super(props); @@ -65,6 +66,13 @@ class App extends React.Component { this.get_token_from_storage(); } + deleteItem(url, headers) { + axios.delete(url, { headers }) + .then(response => { + console.log(response); + }) + } + render() { return ( @@ -90,10 +98,10 @@ class App extends React.Component { this.is_authenticated() ? : this.get_headers()} /> } /> : this.get_headers()} /> + this.is_authenticated() ? : this.deleteItem(url, headers)} get_headers={() => this.get_headers()} /> } /> : this.get_headers()} /> + this.is_authenticated() ? : this.deleteItem(url, headers)} get_headers={() => this.get_headers()} /> } /> : this.get_headers()} /> diff --git a/frontend/src/components/ProjectForm.js b/frontend/src/components/ProjectForm.js new file mode 100644 index 0000000..5f400bd --- /dev/null +++ b/frontend/src/components/ProjectForm.js @@ -0,0 +1,74 @@ +import React from "react"; + +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Button from 'react-bootstrap/Button'; +import Form from 'react-bootstrap/Form'; +import axios from "axios"; + + +export default class ProjectForm extends React.Component { + constructor(props) { + super(props); + this.state = { + name: '', + repo_link: '', + users: 2, + headers: props.headers, + parent: props.parent + } + } + + handleChange(event) { + this.setState( + { + [event.target.name]: event.target.value + } + ); + } + + + + handleSubmit(event) { + const data = { + name: this.state.name, + repo_link: this.state.repo_link, + users: [`http://127.0.0.1:8000/api/users/${this.state.users}/`] + }; + const headers = this.state.headers; + axios.post(`http://127.0.0.1:8000/api/projects/`, data, { headers }) + .then((response) => { + this.state.parent.fetchData(); + }) + event.preventDefault() + } + + + render() { + return ( + + + +
this.handleSubmit(event)}> + + + Название проекта + this.handleChange(event)} /> + + + + Ссылка на репозиторий + this.handleChange(event)} /> + + + +
+ + + + ) + } +} \ No newline at end of file diff --git a/frontend/src/components/Projects.js b/frontend/src/components/Projects.js index 28a539c..a0944cf 100644 --- a/frontend/src/components/Projects.js +++ b/frontend/src/components/Projects.js @@ -2,7 +2,10 @@ import React from 'react'; import Table from 'react-bootstrap/Table'; import axios from 'axios'; import Nav from 'react-bootstrap/Nav'; - +import Button from 'react-bootstrap/Button'; +import Modal from 'react-bootstrap/Modal'; +import ProjectForm from './ProjectForm'; +import Form from 'react-bootstrap/Form' import { NavLink } from 'react-router-dom'; @@ -11,11 +14,13 @@ export default class Projects extends React.Component { super(props); this.state = { 'projects': [], - 'headers': this.props.get_headers() + 'headers': this.props.get_headers(), + 'show': false, + 'search': '' }; } - componentDidMount() { + fetchData() { const headers = this.state.headers; axios.get('http://127.0.0.1:8000/api/projects/', { headers }) .then(response => { @@ -28,23 +33,76 @@ export default class Projects extends React.Component { }).catch(error => console.log(error)) } + componentDidMount() { + this.fetchData(); + } + + searchGet() { + const headers = this.state.headers; + axios.get(`http://127.0.0.1:8000/api/projects/?name=${this.state.search}`, { headers }) + .then(response => { + const projects = response.data.results; + this.setState( + { + 'projects': projects, + } + ) + }).catch(error => console.log(error)) + } + + handleChange(event) { + this.setState( + { + [event.target.name]: event.target.value + } + ); + } + render() { return ( - + <> +
{ this.searchGet(); event.preventDefault(); }}> + this.handleChange(event)} + /> + + + this.props.deleteItem(url, headers)} headers={this.state.headers} projects={this.state.projects} /> + this.setState({ show: false })}> + + + Добавить проект + + + + + + + + ); } } -const ProjectsItem = ({ project, headers }) => { +const ProjectsItem = ({ project, headers, deleteItem }) => { + const url = `http://127.0.0.1:8000/api/projects/${project.pk}` let repoLink = '' if (project.repoLink.includes('http')) { repoLink = project.repoLink; } else { } return ( - +