sonika/sony_intranet_remake2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

advanced filter menu styling and functionality

Browse Source
This commit is contained in:
Sonika 2024-01-02 19:26:07 +05:30
parent 56b75203e6
commit d4ec2b154a
2 changed files with 166 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
src/components/search/AdvancedFilters.tsx
View File

@ -6,210 +6,225 @@ import {
MenuItem, MenuItem,
InputLabel, InputLabel,
FormControl, FormControl,
Button,
TextField, TextField,
} from '@mui/material'; } from '@mui/material';
const DarkModeFilters = () => { const commonStyles = {
const [filterValues, setFilterValues] = useState({ fontSize: '13px', // Adjust the font size as needed
filter1: '', };
filter2: '',
filter3: '', const AdvancedFilters = ({ advanceFilterData, setAdvanceFilterData }:any) => {
filter4: '',
filter5: '',
filter6: '',
filter7: '',
});
const handleFilterChange = (filterName:any, value:any) => { const handleFilterChange = (filterName:any, value:any) => {
setFilterValues((prevValues) => ({ ...prevValues, [filterName]: value })); setAdvanceFilterData((prevData:any) => ({ ...prevData, [filterName]: value }));
}; };
const handleApplyFilters = () => {
// Handle the logic to apply filters
console.log('Filter Values:', filterValues);
};
return ( return (
<Paper square sx={{ width:'100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}> <Paper square sx={{ width:'100%', overflow: 'hidden', backgroundColor: 'rgb(13 13 13)' }}>
<Grid container spacing={2} justifyContent="center" sx={{margin:'1%'}} > <Grid container spacing={2} justifyContent="center" sx={{marginTop:'1%',marginBottom:'1%'}} >
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Assets</InputLabel> <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Assets</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.asset_type}
label="Assets" label="Assets"
onChange={(e) =>{ onChange={(e) => {
handleFilterChange('asset_type', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value={0} sx={commonStyles}>All</MenuItem>
<MenuItem value="Audio Song">Audio Song</MenuItem> <MenuItem value={1} sx={commonStyles}>Audio Song</MenuItem>
<MenuItem value="Video Song">Video Song</MenuItem> <MenuItem value={2} sx={commonStyles}>Video Song</MenuItem>
<MenuItem value="Audio visual">Audio visual</MenuItem> <MenuItem value={3} sx={commonStyles}>Audio visual</MenuItem>
<MenuItem value="Story">Story</MenuItem> <MenuItem value={4} sx={commonStyles}>Story</MenuItem>
<MenuItem value="Score">Score</MenuItem> <MenuItem value={5} sx={commonStyles}>Score</MenuItem>
<MenuItem value="Dialogue">Dialogue</MenuItem> <MenuItem value={6} sx={commonStyles}>Dialogue</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Rights</InputLabel> <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Rights</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.rights}
label="Rights" label="Rights"
onChange={(e) =>{ onChange={(e) =>{
handleFilterChange('rights', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value="All" sx={commonStyles}>All</MenuItem>
<MenuItem value="Physical">Physical</MenuItem> <MenuItem value="Physical" sx={commonStyles}>Physical</MenuItem>
<MenuItem value="Digital">Digital</MenuItem> <MenuItem value="Digital" sx={commonStyles}>Digital</MenuItem>
<MenuItem value="Adaptation">Adaptation</MenuItem> <MenuItem value="Adaptation" sx={commonStyles}>Adaptation</MenuItem>
<MenuItem value="Synchronisation">Synchronisation</MenuItem> <MenuItem value="Synchronisation" sx={commonStyles}>Synchronisation</MenuItem>
<MenuItem value="Copyright Registration">Copyright Registration</MenuItem> <MenuItem value="Copyright Registration" sx={commonStyles}>Copyright Registration</MenuItem>
<MenuItem value="Public Performance">Public Performance</MenuItem> <MenuItem value="Public Performance" sx={commonStyles}>Public Performance</MenuItem>
<MenuItem value="Compilation">Compilation</MenuItem> <MenuItem value="Compilation" sx={commonStyles}>Compilation</MenuItem>
<MenuItem value="Games">Games</MenuItem> <MenuItem value="Games" sx={commonStyles}>Games</MenuItem>
<MenuItem value="GamesDuplicate">GamesDuplicate</MenuItem> <MenuItem value="GamesDuplicate" sx={commonStyles}>GamesDuplicate</MenuItem>
<MenuItem value="Literary Work">Literary Work</MenuItem> <MenuItem value="Literary Work" sx={commonStyles}>Literary Work</MenuItem>
<MenuItem value="Musical Work">Musical Work</MenuItem> <MenuItem value="Musical Work" sx={commonStyles}>Musical Work</MenuItem>
<MenuItem value="Performances/Singer">Performances/Singer</MenuItem> <MenuItem value="Performances/Singer" sx={commonStyles}>Performances/Singer</MenuItem>
<MenuItem value="Background Score">Background Score</MenuItem> <MenuItem value="Background Score" sx={commonStyles}>Background Score</MenuItem>
<MenuItem value="Dialogue">Dialogue</MenuItem> <MenuItem value="Dialogue" sx={commonStyles}>Dialogue</MenuItem>
<MenuItem value="Synchronisation">Synchronisation</MenuItem> <MenuItem value="Synchronisation" sx={commonStyles}>Synchronisation</MenuItem>
<MenuItem value="Composition">Composition</MenuItem> <MenuItem value="Composition" sx={commonStyles}>Composition</MenuItem>
<MenuItem value="Lyrics">Lyrics</MenuItem> <MenuItem value="Lyrics" sx={commonStyles}>Lyrics</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Validity</InputLabel> <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Validity</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.validity}
label="Validity" label="validity"
onChange={(e) =>{ onChange={(e) =>{
handleFilterChange('validity', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value="0" sx={commonStyles}>All</MenuItem>
<MenuItem value="6 Months">6 Months</MenuItem> <MenuItem value="6" sx={commonStyles}>6 Months</MenuItem>
<MenuItem value="12 Months">12 Months</MenuItem> <MenuItem value="12" sx={commonStyles}>12 Months</MenuItem>
<MenuItem value="24 Months">24 Months</MenuItem> <MenuItem value="24" sx={commonStyles}>24 Months</MenuItem>
<MenuItem value="60 Months">60 Months</MenuItem> <MenuItem value="60" sx={commonStyles}>60 Months</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Mood</InputLabel> <InputLabel sx={{ color: 'white', paddingLeft: 1 }}>Territory</InputLabel>
<TextField
variant="standard"
value={advanceFilterData.territory}
onChange={(e) => {
handleFilterChange('territory', e.target.value);
}}
InputProps={{
style: { marginLeft:2 }, // Set the color and font size
}}
sx={{ color: 'white', border: '1px solid white', marginTop: 2,'& input': {
color: 'white',
}, }}
/>
</FormControl>
</Grid>
<Grid item xs={1.6}>
<FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Mood</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.mood}
label="Mood" label="Mood"
onChange={(e) =>{ onChange={(e) =>{
handleFilterChange('mood', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value="All" sx={commonStyles}>All</MenuItem>
<MenuItem value="Happy">Happy</MenuItem> <MenuItem value="Happy" sx={commonStyles}>Happy</MenuItem>
<MenuItem value="Sad">Sad</MenuItem> <MenuItem value="Sad" sx={commonStyles}>Sad</MenuItem>
<MenuItem value="Romantic">Romantic</MenuItem> <MenuItem value="Romantic" sx={commonStyles}>Romantic</MenuItem>
<MenuItem value="Bored">Bored</MenuItem> <MenuItem value="Bored" sx={commonStyles}>Bored</MenuItem>
<MenuItem value="Upbeat">Upbeat</MenuItem> <MenuItem value="Upbeat" sx={commonStyles}>Upbeat</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Language</InputLabel> <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Language</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.language}
label="Language" label="Language"
onChange={(e) =>{ onChange={(e) =>{
handleFilterChange('language', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value="All" sx={commonStyles}>All</MenuItem>
<MenuItem value="English">English</MenuItem> <MenuItem value="English" sx={commonStyles}>English</MenuItem>
<MenuItem value="Punjabi">Punjabi </MenuItem> <MenuItem value="Punjabi" sx={commonStyles}>Punjabi </MenuItem>
<MenuItem value="Gujarati">Gujarati </MenuItem> <MenuItem value="Gujarati" sx={commonStyles}>Gujarati </MenuItem>
<MenuItem value="Telugu">Telugu </MenuItem> <MenuItem value="Telugu" sx={commonStyles}>Telugu </MenuItem>
<MenuItem value="Bahasa Indonesia">Bahasa Indonesia </MenuItem> <MenuItem value="Bahasa Indonesia" sx={commonStyles}>Bahasa Indonesia </MenuItem>
<MenuItem value="Tamil">Tamil </MenuItem> <MenuItem value="Tamil" sx={commonStyles}>Tamil </MenuItem>
<MenuItem value="Kannada">Kannada </MenuItem> <MenuItem value="Kannada" sx={commonStyles}>Kannada </MenuItem>
<MenuItem value="Marathi">Marathi </MenuItem> <MenuItem value="Marathi" sx={commonStyles}>Marathi </MenuItem>
<MenuItem value="Bahasa Malaysia">Bahasa Malaysia </MenuItem> <MenuItem value="Bahasa Malaysia" sx={commonStyles}>Bahasa Malaysia </MenuItem>
<MenuItem value="Malayalam">Malayalam </MenuItem> <MenuItem value="Malayalam" sx={commonStyles}>Malayalam </MenuItem>
<MenuItem value="Hindi">Hindi </MenuItem> <MenuItem value="Hindi" sx={commonStyles}>Hindi </MenuItem>
<MenuItem value="Bengali">Bengali </MenuItem> <MenuItem value="Bengali" sx={commonStyles}>Bengali </MenuItem>
<MenuItem value="Assamese">Assamese </MenuItem> <MenuItem value="Assamese" sx={commonStyles}>Assamese </MenuItem>
<MenuItem value="Carnatic">Carnatic </MenuItem> <MenuItem value="Carnatic" sx={commonStyles}>Carnatic </MenuItem>
<MenuItem value="Spanish">Spanish </MenuItem> <MenuItem value="Spanish" sx={commonStyles}>Spanish </MenuItem>
<MenuItem value="Urdu">Urdu </MenuItem> <MenuItem value="Urdu" sx={commonStyles}>Urdu </MenuItem>
<MenuItem value="Rajasthani">Rajasthani </MenuItem> <MenuItem value="Rajasthani" sx={commonStyles}>Rajasthani </MenuItem>
<MenuItem value="Multi Language">Multi Language </MenuItem> <MenuItem value="Multi Language" sx={commonStyles}>Multi Language </MenuItem>
<MenuItem value="Other">Other </MenuItem> <MenuItem value="Other" sx={commonStyles}>Other </MenuItem>
<MenuItem value="Arabic">Arabic </MenuItem> <MenuItem value="Arabic" sx={commonStyles}>Arabic </MenuItem>
<MenuItem value="Sanskrit">Sanskrit </MenuItem> <MenuItem value="Sanskrit" sx={commonStyles}>Sanskrit </MenuItem>
<MenuItem value="Not Applicable">Not Applicable </MenuItem> <MenuItem value="Not Applicable" sx={commonStyles}>Not Applicable </MenuItem>
<MenuItem value="Maithili">Maithili </MenuItem> <MenuItem value="Maithili" sx={commonStyles}>Maithili </MenuItem>
<MenuItem value="Greek">Greek </MenuItem> <MenuItem value="Greek" sx={commonStyles}>Greek </MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={1.5}> <Grid item xs={1.6}>
<FormControl fullWidth variant="standard"> <FormControl fullWidth variant="standard">
<InputLabel sx={{ color: 'white',paddingLeft:1 }}>Genre</InputLabel> <InputLabel sx={{ color: 'white',paddingLeft:1,fontSize: '12px' }}>Genre</InputLabel>
<Select <Select
// value={filterValues[`filter${filterNumber}`]} value={advanceFilterData.genre}
label="Genre" label="Genre"
onChange={(e) =>{ onChange={(e) =>{
handleFilterChange('genre', e.target.value);
}} }}
IconComponent={() => <div style={{ color: 'white', fontSize: '10px' }}>▼</div>}
sx={{ color: 'white', border: '1px solid white', }} sx={{ color: 'white', border: '1px solid white', }}
> >
<MenuItem value="All">All</MenuItem> <MenuItem value="All" sx={commonStyles}>All</MenuItem>
<MenuItem value="Childrens Music">Childrens Music</MenuItem> <MenuItem value="Childrens Music" sx={commonStyles}>Childrens Music</MenuItem>
<MenuItem value="Pop">Pop</MenuItem> <MenuItem value="Pop" sx={commonStyles}>Pop</MenuItem>
<MenuItem value="Soundtrack (Bollywood)">Soundtrack (Bollywood)</MenuItem> <MenuItem value="Soundtrack (Bollywood)" sx={commonStyles}>Soundtrack (Bollywood)</MenuItem>
<MenuItem value="Ghazals, Sufi &amp; Qawwali">Ghazals, Sufi &amp; Qawwali</MenuItem> <MenuItem value="Ghazals, Sufi &amp; Qawwali" sx={commonStyles}>Ghazals, Sufi &amp; Qawwali</MenuItem>
<MenuItem value="Regional Indian">Regional Indian</MenuItem> <MenuItem value="Regional Indian" sx={commonStyles}>Regional Indian</MenuItem>
<MenuItem value="Classical - Carnatic">Classical - Carnatic</MenuItem> <MenuItem value="Classical - Carnatic" sx={commonStyles}>Classical - Carnatic</MenuItem>
<MenuItem value="Soundtrack (Punjabi)">Soundtrack (Punjabi)</MenuItem> <MenuItem value="Soundtrack (Punjabi)" sx={commonStyles}>Soundtrack (Punjabi)</MenuItem>
<MenuItem value="Soundtrack (Telugu)">Soundtrack (Telugu)</MenuItem> <MenuItem value="Soundtrack (Telugu)" sx={commonStyles}>Soundtrack (Telugu)</MenuItem>
<MenuItem value="World Music">World Music</MenuItem> <MenuItem value="World Music" sx={commonStyles}>World Music</MenuItem>
<MenuItem value="Qawwali">Qawwali</MenuItem> <MenuItem value="Qawwali" sx={commonStyles}>Qawwali</MenuItem>
<MenuItem value="Indian Pop">Indian Pop</MenuItem> <MenuItem value="Indian Pop" sx={commonStyles}>Indian Pop</MenuItem>
<MenuItem value="Classical - Hindustani">Classical - Hindustani</MenuItem> <MenuItem value="Classical - Hindustani" sx={commonStyles}>Classical - Hindustani</MenuItem>
<MenuItem value="Soundtrack (Bengali)">Soundtrack (Bengali)</MenuItem> <MenuItem value="Soundtrack (Bengali)" sx={commonStyles}>Soundtrack (Bengali)</MenuItem>
<MenuItem value="Soundtrack (Kannada)">Soundtrack (Kannada)</MenuItem> <MenuItem value="Soundtrack (Kannada)" sx={commonStyles}>Soundtrack (Kannada)</MenuItem>
<MenuItem value="Folk">Folk</MenuItem> <MenuItem value="Folk" sx={commonStyles}>Folk</MenuItem>
<MenuItem value="Miscellaneous/Other">Miscellaneous/Other</MenuItem> <MenuItem value="Miscellaneous/Other" sx={commonStyles}>Miscellaneous/Other</MenuItem>
<MenuItem value="Fusion">Fusion</MenuItem> <MenuItem value="Fusion" sx={commonStyles}>Fusion</MenuItem>
<MenuItem value="Electronica">Electronica</MenuItem> <MenuItem value="Electronica" sx={commonStyles}>Electronica</MenuItem>
<MenuItem value="Soundtrack (Malayalam)">Soundtrack (Malayalam)</MenuItem> <MenuItem value="Soundtrack (Malayalam)" sx={commonStyles}>Soundtrack (Malayalam)</MenuItem>
<MenuItem value="IndiPop">IndiPop</MenuItem> <MenuItem value="IndiPop" sx={commonStyles}>IndiPop</MenuItem>
<MenuItem value="Devotional &amp; Spiritual">Devotional &amp; Spiritual</MenuItem> <MenuItem value="Devotional &amp; Spiritual" sx={commonStyles}>Devotional &amp; Spiritual</MenuItem>
<MenuItem value="Soundtrack (Other)">Soundtrack (Other)</MenuItem> <MenuItem value="Soundtrack (Other)" sx={commonStyles}>Soundtrack (Other)</MenuItem>
<MenuItem value="Western Pop/Rock">Western Pop/Rock</MenuItem> <MenuItem value="Western Pop/Rock" sx={commonStyles}>Western Pop/Rock</MenuItem>
<MenuItem value="International">International</MenuItem> <MenuItem value="International" sx={commonStyles}>International</MenuItem>
<MenuItem value="Soundtrack (Marathi)">Soundtrack (Marathi)</MenuItem> <MenuItem value="Soundtrack (Marathi)" sx={commonStyles}>Soundtrack (Marathi)</MenuItem>
<MenuItem value="Punjabi/Bhangra">Punjabi/Bhangra</MenuItem> <MenuItem value="Punjabi/Bhangra" sx={commonStyles}>Punjabi/Bhangra</MenuItem>
<MenuItem value="Soundtrack (Tamil)">Soundtrack (Tamil)</MenuItem> <MenuItem value="Soundtrack (Tamil)" sx={commonStyles}>Soundtrack (Tamil)</MenuItem>
<MenuItem value="Indian Folk">Indian Folk</MenuItem> <MenuItem value="Indian Folk" sx={commonStyles}>Indian Folk</MenuItem>
<MenuItem value="Devotional">Devotional</MenuItem> <MenuItem value="Devotional" sx={commonStyles}>Devotional</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
@ -220,4 +235,4 @@ const DarkModeFilters = () => {
); );
}; };
export default DarkModeFilters; export default AdvancedFilters;

34
src/components/search/Search.tsx
View File

@ -1,27 +1,12 @@
import { Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material"; import { Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { postSearchList, } from "../../APIs/SearchAPIs/postSearchList"; import { postSearchList, } from "../../APIs/SearchAPIs/postSearchList";
import DarkModeFilters from "./AdvancedFilters"; import AdvancedFilters from "./AdvancedFilters";
export default function Search() { export default function Search() {
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
const [advanceFilterData, setAdvanceFilterData] = useState<any>(); const [advanceFilterData, setAdvanceFilterData] = useState<any>(
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false); {
// useEffect(() => {
// if (showAdvancedFilters) {
// // Fetch data or perform actions when advanced filters are applied
// postSearchList(advanceFilterData);
// }
// }, [advanceFilterData, showAdvancedFilters]);
useEffect(()=>{
postSearchList(advanceFilterData)
},[advanceFilterData])
const handleSearch = () => {
setAdvanceFilterData({
searchText, searchText,
rights: 0, rights: 0,
asset_type: 0, asset_type: 0,
@ -31,7 +16,16 @@ export default function Search() {
mood: '', mood: '',
validity: 0, validity: 0,
artist: '' artist: ''
}); }
);
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
useEffect(()=>{
postSearchList(advanceFilterData)
},[advanceFilterData])
const handleSearch = () => {
}; };
const handleClear = () => { const handleClear = () => {
@ -87,7 +81,7 @@ export default function Search() {
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
{showAdvancedFilters && <DarkModeFilters />} {showAdvancedFilters && <AdvancedFilters advanceFilterData={advanceFilterData} setAdvanceFilterData={setAdvanceFilterData}/>}
</Paper> </Paper>
</Paper> </Paper>
) )