Commit 37c0a087 authored by Martin Bebjak's avatar Martin Bebjak Committed by Jiri Novotny
Browse files

Add search for available agents FE base

parent 9e6076c0
......@@ -11,7 +11,7 @@ import java.util.List;
@NoArgsConstructor
public class AgentListDto {
private long id;
private String codename;
private String codeName;
private List<SkillDto> skills;
private List<TrainingDto> trainings;
}
......@@ -35,3 +35,8 @@
transform: rotate(360deg);
}
}
.agentList {
flex-direction: row;
display: flex;
}
\ No newline at end of file
......@@ -4,10 +4,23 @@ import { Link } from 'react-router-dom';
export function Agent (props: any){
return(
<div>
<p className="codeName">{ props.codeName }</p>
<img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64"></img>
<h3 className="codeName">{ props.codeName }</h3>
<div className="skills">
<h4>Skills</h4>
{ props.skills.map((skill: any) => {
return(
<p>{ skill.description }</p>
)
})}
</div>
<div>
<p>{ props.startDate }</p>
<p>{ props.endDate }</p>
<h4>Trainings</h4>
{ props.trainings.map((training: any) => {
return(
<p> { training.description } </p>
)
})}
</div>
<Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
</div>
......
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
export function AgentInMission (props: any){
return(
<div>
<p className="codeName">{ props.codeName }</p>
<div>
<p>{ props.startDate }</p>
<p>{ props.endDate }</p>
</div>
<Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
</div>
)
}
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Agent } from './Agent'
export function AgentsList () {
const [agents, setAgents] = useState(null);
const [agents, setAgents] = useState<any>(null);
const [page, setPage] = useState(0);
useEffect(() => {
// fetch data
});
axios.get(`/agents/allAgents?page=` + page + `&pageSize=20`)
.then(res => {
const agentData = res.data;
setAgents(agentData);
});
console.log(agents)
},[]);
if (agents === null) {
return(
......@@ -16,14 +25,15 @@ export function AgentsList () {
)
} else {
return(
<div>
<ul>
<li>Janko</li>
<li>Vanko</li>
<li>KAko</li>
<li>Kapo</li>
<li>Šakal Šakalovič český skaut a lámač ženských sŕdc</li>
</ul>
<div className="agentList">
{ agents.map((agent: any) => {
return(
<Agent codeName={ agent.codeName }
skills={ agent.skills }
trainings={ agent.trainings }
agentId={ agent.id }/>
);
}) }
</div>
)
}
......
import Combobox from "react-widgets/Combobox";
import { useState, useCallback } from "react";
import { useState, useCallback, useEffect } from "react";
import axios from 'axios'
import { Agent } from './Agent'
export function FindAvailableAgents() {
const [result, setResult] = useState(null);
const [result, setResult] = useState<any>([]);
const [picked, setPicked] = useState<any>({
country: null,
skill: null
})
const [countries, setCountries] = useState<any>(null)
const [skills, setSkills] = useState<any>(null)
const searchForAgent = useCallback (()=>{
//todo find result
},[result]);
if (picked.country !== null && (picked.skill === null || picked.skill === '')) {
console.log("country", picked.country)
axios.get(`/agents/countries/`+ picked.country.id + `?page=0&pageSize=5`)
.then(res => {
const agents = res.data;
setResult(agents);
});
}
if (picked.skill !== null && (picked.country === null || picked.country === '')){
console.log("skill", picked.skill.id)
axios.get(`/agents/allSkills?page=1&pageSize=0`)
.then(res => {
const skillsData = res.data;
setSkills(skillsData);
});
}
if ((picked.skill !== null && picked.skill !== '') && (picked.country !== null && picked.country !== '')){
console.log("both", picked.country.id, picked.skill.id);
axios.get(`/agents/allSkills?page=1&pageSize=0`)
.then(res => {
const skillsData = res.data;
setSkills(skillsData);
});
}
if (!(picked.skill !== null || picked.skill !== '') && !(picked.country !== null && picked.country !== '')) {
console.log("none");
setResult([]);
}
},[picked]);
useEffect(() => {
axios.get(`/agents/allSkills?page=1&pageSize=0`)
.then(res => {
const skillsData = res.data;
setSkills(skillsData);
});
axios.get(`/countries/allCountries?page=0&pageSize=0`)
.then(res => {
const countryData = res.data;
setCountries(countryData);
});
},[]);
// Set filtrede agents HTML
let content;
if (result === null) {
content = <h2>No items found</h2>
} else {
// todo content = db result
<ul>
<li>
<image></image> {/*moze byt nejaka agent ikonka*/}
<p>Name</p>
<p>Skills</p>
</li>
</ul>
}
return(
<div>
<div className="searchBar">
<Combobox
hideCaret
hideEmptyPopup
data={["Nigger", "Chad", "Belize", "Tramtaria", "Kekistan", "Bobri vrch", "Normandia"]}
placeholder="Choose a country"/>
<Combobox
hideCaret
hideEmptyPopup
data={["Bombenie", "Busenie", "Prebombenie", "Vybombenie", "Zabombenie", "Bombickovanie", "Bodovanie"]}
placeholder="Choose a skill"/>
<button onClick={ searchForAgent }>Search</button>
</div>
<div className="Content">
{ content }
if (skills === null && countries === null) {
return(
<h1>Loading....</h1>
)
} else {
return(
<div>
<div className="searchBar">
<Combobox
onChange={ value => {setPicked({country: value, skill: picked.skill})} }
hideCaret
hideEmptyPopup
data={ countries }
dataKey='id'
textField='name'
placeholder="Choose a country"/>
<Combobox
onChange={ value => {setPicked({country: picked.country, skill: value})} }
hideCaret
hideEmptyPopup
data={ skills }
dataKey='id'
textField='description'
placeholder="Choose a skill"/>
<button onClick={ () => {
searchForAgent()
} }>Search</button>
</div>
<div className="agentList">
{ result.map((agent: any) => {
return(
<Agent codeName={ agent.codeName }
skills={ agent.skills }
trainings={ agent.trainings }
agentId={ agent.id }/>
);
}) }
</div>
</div>
</div>
)
)
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment