Skip to content
Snippets Groups Projects
Commit 48843b70 authored by Tomáš Havlíček's avatar Tomáš Havlíček
Browse files

feat: search interface

parent 2fde7c9e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/components/SearchPage.tsx
+ 267
− 41
View file @ 48843b70
import { AudioOutlined } from "@ant-design/icons"; import { AudioOutlined } from "@ant-design/icons";
import { Card, Input, List, Space, Table, Typography } from "antd"; import { SearchOutlined } from '@ant-design/icons';
import {
Button,
Card,
Col,
Form,
Input,
List,
Row,
Select,
Slider,
Space,
Table,
Typography,
} from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { cardsDataExample, MovieIO } from "./Preview"; import { cardsDataExample, CategoryIO, DirectorIO, MovieIO } from "./Preview";
const { Search } = Input; const { Search } = Input;
const { Option } = Select;
//TODO replace with result of input search and API call //TODO replace with result of input search and API call
const resultsExample: MovieIO[] = [ const resultsExample: MovieIO[] = [
...@@ -43,10 +57,112 @@ const resultsExample: MovieIO[] = [ ...@@ -43,10 +57,112 @@ const resultsExample: MovieIO[] = [
}, },
]; ];
//replace with api call only once
const categoriesList: CategoryIO[] = [
{
id: "123",
name: "Horror",
movies: [],
},
{
id: "1231",
name: "Comedy",
movies: [],
},
{
id: "1232",
name: "Drama",
movies: [],
},
{
id: "1234",
name: "Romcom",
movies: [],
},
{
id: "1235",
name: "Western",
movies: [],
},
{
id: "1236",
name: "Documentary",
movies: [],
},
{
id: "1237",
name: "Adam Sandler",
movies: [],
},
{
id: "1238",
name: "Czech",
movies: [],
},
];
//replace with api call only once
const directorsList: DirectorIO[] = [{
name: "Karel1",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1561",
},{
name: "Karel2",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1562",
},{
name: "Karel3",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1563",
},{
name: "Karel4",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1564",
},{
name: "Karel5",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1565",
},{
name: "Karel6",
surname: "Vomacka",
birthdate: "17.5.1979",
id: "1566",
},
]
const runtimeMarks = {
0: "0",
30: "30",
60: "60",
90: "90",
120: "120",
150: "150",
180: "180",
210: "210",
240: "240",
270: "270",
300: "300",
};
const yearMarks = {
1920: "1920",
1940: "1940",
1960: "1960",
1980: "1980",
2000: "2000",
2020: "2020",
};
//for searching movies //for searching movies
export const SearchPage = () => { export const SearchPage = () => {
const [pressed, setPressed] = useState(false); const [pressed, setPressed] = useState(true); //may modify or delte in future
const [searchValue, setSearch] = useState(''); const [searchValue, setSearch] = useState("");
//function that happens when search button is pressed //function that happens when search button is pressed
const onSearch = (value: string) => { const onSearch = (value: string) => {
...@@ -59,9 +175,13 @@ export const SearchPage = () => { ...@@ -59,9 +175,13 @@ export const SearchPage = () => {
{ {
title: "Name", title: "Name",
dataIndex: "name", dataIndex: "name",
sorter: (a:MovieIO, b:MovieIO) => { sorter: (a: MovieIO, b: MovieIO) => {
if(a.name < b.name){return -1;} if (a.name < b.name) {
if(a.name > b.name){return 1;} return -1;
}
if (a.name > b.name) {
return 1;
}
return 0; return 0;
}, },
render: (text: string, record: MovieIO) => ( render: (text: string, record: MovieIO) => (
...@@ -74,52 +194,75 @@ export const SearchPage = () => { ...@@ -74,52 +194,75 @@ export const SearchPage = () => {
title: "Original name", title: "Original name",
className: "original-name", className: "original-name",
dataIndex: "originalName", dataIndex: "originalName",
sorter: (a:MovieIO, b:MovieIO) => { sorter: (a: MovieIO, b: MovieIO) => {
if(a.originalName < b.originalName){return -1;} if (a.originalName < b.originalName) {
if(a.originalName > b.originalName){return 1;} return -1;
}
if (a.originalName > b.originalName) {
return 1;
}
return 0; return 0;
}, },
}, },
{ {
title: "Release Date", title: "Release Date",
dataIndex: "published", dataIndex: "published",
sorter: (a:MovieIO, b:MovieIO) => { sorter: (a: MovieIO, b: MovieIO) => {
const first = a.published.split('.').reverse(); const first = a.published.split(".").reverse();
const second = b.published.split('.').reverse(); const second = b.published.split(".").reverse();
if(first[0] > second[0]){return 1 ;} if (first[0] > second[0]) {
if(first[0] < second[0]){return -1 ;} return 1;
}
if (first[0] < second[0]) {
return -1;
}
if(first[1] > second[1]){return 1 ;} if (first[1] > second[1]) {
if(first[1] < second[1]){return -1 ;} return 1;
}
if (first[1] < second[1]) {
return -1;
}
if(first[2] > second[2]){return 1 ;} if (first[2] > second[2]) {
if(first[2] < second[2]){return -1 ;} return 1;
}
if (first[2] < second[2]) {
return -1;
}
return 0; return 0;
} },
}, },
{ {
title: "Runtime", title: "Runtime",
dataIndex: "runtimeMinutes", dataIndex: "runtimeMinutes",
sorter: (a:MovieIO, b:MovieIO) => a.runtimeMinutes - b.runtimeMinutes, sorter: (a: MovieIO, b: MovieIO) => a.runtimeMinutes - b.runtimeMinutes,
}, },
{ {
title: "Director", title: "Director",
dataIndex: ["director", "surname"], dataIndex: ["director", "surname"],
sorter: (a:MovieIO, b:MovieIO) => { sorter: (a: MovieIO, b: MovieIO) => {
//surname has higher priority //surname has higher priority
if(a.director.surname < b.director.surname){return -1;} if (a.director.surname < b.director.surname) {
if(a.director.surname > b.director.surname){return 1;} return -1;
}
if(a.director.name < b.director.name){return -1;} if (a.director.surname > b.director.surname) {
if(a.director.name > b.director.name){return 1;} return 1;
return 0; }
if (a.director.name < b.director.name) {
return -1;
}
if (a.director.name > b.director.name) {
return 1;
}
return 0;
}, },
render: (text: string, record: MovieIO) => ( render: (text: string, record: MovieIO) => (
<Link to={`/director/${record.director.id}`}> <Link to={`/director/${record.director.id}`}>
<a>{record.director.name} {record.director.surname}</a> <a>
{record.director.name} {record.director.surname}
</a>
</Link> </Link>
), ),
}, },
...@@ -130,15 +273,98 @@ export const SearchPage = () => { ...@@ -130,15 +273,98 @@ export const SearchPage = () => {
direction="vertical" direction="vertical"
style={{ display: "flex", padding: 24, textAlign: "center" }} style={{ display: "flex", padding: 24, textAlign: "center" }}
> >
<Search <Form>
placeholder="input search text" <Row>
allowClear <Col span={6}>
enterButton="Search" <div>Name</div> <Input></Input>
size="large" </Col>
onChange={(e) => setSearch(e.target.value)} <Col span={6}>
onSearch={onSearch} <div>Original name</div>
width="400 px" <Input></Input>
/> </Col>
</Row>
<Col span={12}>
<div>Runtime</div>
<Slider
marks={runtimeMarks}
range={{ draggableTrack: true }}
step={10}
max={300}
defaultValue={[60, 120]}
></Slider>
</Col>
<Row>
<Col span={12}>
<div>Year published</div>
<Slider
marks={yearMarks}
range={{ draggableTrack: true }}
min={1920}
max={2022}
defaultValue={[2000, 2010]}
></Slider>
</Col>
<Col></Col>
</Row>
<Row>
<Col span={6}>
<div>Category</div>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Search to Select"
optionFilterProp="children"
filterOption={(input, option) =>
(option!.children as unknown as string).includes(input)
}
filterSort={(optionA, optionB) =>
(optionA!.children as unknown as string)
.toLowerCase()
.localeCompare(
(optionB!.children as unknown as string).toLowerCase()
)
}
>
{categoriesList.map((cat: CategoryIO) => {
return <Option value={cat.id}>{cat.name}</Option>;
})}
</Select>
</Col>
<Col span={6}>
<div>Directors</div>
<Select
showSearch
style={{ width: "100%" }}
placeholder="Search to Select"
optionFilterProp="children"
filterOption={(input, option) =>
(option!.children as unknown as string).includes(input)
}
filterSort={(optionA, optionB) =>
(optionA!.children as unknown as string)
.toLowerCase()
.localeCompare(
(optionB!.children as unknown as string).toLowerCase()
)
}
>
{directorsList.map((dir:DirectorIO) => {
return(<Option value={dir.id}>{dir.name + " " + dir.surname}</Option>)
})}
</Select>
</Col>
</Row>
<Row>
<Col span={12}>
<Button style={{width: "100%"}} type="primary" icon={<SearchOutlined />} size="large">
Search
</Button>
</Col>
</Row>
</Form>
</Space> </Space>
{pressed && ( {pressed && (
<Space <Space
......
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