104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { Box, Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
|
|
import React, { useEffect, useState } from "react";
|
|
import { postSearchList, } from "../../APIs/SearchAPIs/postSearchList";
|
|
import AdvancedFilters from "./AdvancedFilters";
|
|
|
|
export default function Search() {
|
|
const [searchText, setSearchText] = useState('');
|
|
const [advanceFilterData, setAdvanceFilterData] = useState<any>(
|
|
{
|
|
searchByValue:searchText,
|
|
rights: "0",
|
|
asset_type: "0",
|
|
territory: '',
|
|
genre: 'All',
|
|
language: 'All',
|
|
mood: 'All',
|
|
validity: "0",
|
|
artist: ''
|
|
}
|
|
);
|
|
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
|
|
|
|
// useEffect(()=>{
|
|
// postSearchList(advanceFilterData)
|
|
// },[advanceFilterData])
|
|
|
|
const handleSearch = () => {
|
|
postSearchList(advanceFilterData)
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setSearchText('');
|
|
setShowAdvancedFilters(false);
|
|
};
|
|
|
|
const handleAdvancedFilter = () => {
|
|
setShowAdvancedFilters(!showAdvancedFilters);
|
|
if (showAdvancedFilters==false){
|
|
setAdvanceFilterData({
|
|
searchText,
|
|
rights: "0",
|
|
asset_type: "0",
|
|
territory: '',
|
|
genre: 'All',
|
|
language: 'All',
|
|
mood: 'All',
|
|
validity: "0",
|
|
artist: ''
|
|
})
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ backgroundColor: "#0d0d0d", minHeight: "100vh" }}>
|
|
<Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
|
|
<Paper className='projectScreen-background' sx={{ margin: '1%', width: '100%', overflow: 'hidden', textAlign: 'center' }}>
|
|
<Grid container spacing={2} sx={{ bgcolor: '#181818' }} justifyContent="center">
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
placeholder="Search By Project Title, Asset Title, Artist, Track Grid, ISRC"
|
|
variant="outlined"
|
|
value={searchText}
|
|
onChange={(e) => setSearchText(e.target.value)}
|
|
sx={{
|
|
width: '50%',
|
|
'& label.Mui-focused': {
|
|
color: 'white',
|
|
},
|
|
'& .MuiOutlinedInput-root': {
|
|
'& fieldset': {
|
|
borderColor: 'white',
|
|
},
|
|
'&:hover fieldset': {
|
|
borderColor: 'white',
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
borderColor: 'white',
|
|
},
|
|
},
|
|
'& input': {
|
|
color: 'white',
|
|
},
|
|
marginTop:2,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button variant="contained" onClick={handleSearch} sx={{ marginRight: '1%', bgcolor: 'red' }}>
|
|
Search
|
|
</Button>
|
|
<Button variant="contained" onClick={handleClear} sx={{ marginRight: '1%', bgcolor: 'red' }}>
|
|
Clear
|
|
</Button>
|
|
<Button variant="contained" onClick={handleAdvancedFilter} sx={{ bgcolor: 'red' }}>
|
|
Advanced Filter
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
{showAdvancedFilters && <AdvancedFilters advanceFilterData={advanceFilterData} setAdvanceFilterData={setAdvanceFilterData}/>}
|
|
</Paper>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
} |