seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

jamtracks related UI fixes

This commit is contained in:
Nuwan 2024-12-03 19:03:21 +05:30
parent f389250aa8
commit d3a9a7c1e5
7 changed files with 51 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
jam-ui/src/components/jamtracks/JKJamTrackArtists.js
View File

@ -21,6 +21,7 @@ const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
<Row> <Row>
<Col> <Col>
<strong>{t('search.search_results.artists')}</strong> <strong>{t('search.search_results.artists')}</strong>
show artists: {showArtists.toString()}
</Col> </Col>
</Row> </Row>
{artists.length > 0 ? ( {artists.length > 0 ? (

2
jam-ui/src/components/jamtracks/JKJamTrackPreview.js
View File

@ -14,7 +14,7 @@ const JKJamTrackPreview = ({ jamTrack }) => {
return ( return (
<Container> <Container>
<Row> <Row>
{jamTrack.tracks.map((track, index) => ( {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Fragment key={track.id} > <Fragment key={track.id} >
<Col className={ index + 1 > 6 && !expanded ? 'd-none' : null}> <Col className={ index + 1 > 6 && !expanded ? 'd-none' : null}>
<JKJamTrackTrack track={track} /> <JKJamTrackTrack track={track} />

3
jam-ui/src/components/jamtracks/JKJamTrackTrack.js
View File

@ -35,7 +35,8 @@ const JKJamTrackTrack = ({ track }) => {
if (track.part && track.part !== info['instrumentDescription']) { if (track.part && track.part !== info['instrumentDescription']) {
info['part'] = `(${track.part})`; info['part'] = `(${track.part})`;
} }
} else { } else if (track.track_type === 'Master' && track.part) {
info['instrumentDescription'] = track.part;
} }
let no_audio = true; let no_audio = true;

4
jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js
View File

@ -101,7 +101,7 @@ const JKJamTracksAutoComplete = ({
return ( return (
<Row className="mb-2"> <Row className="mb-2">
<Col md={8}> <Col md={12}>
<FormGroup className="mb-3"> <FormGroup className="mb-3">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<InputGroup> <InputGroup>
@ -158,7 +158,7 @@ const JKJamTracksAutoComplete = ({
alignContent: 'flex-start' alignContent: 'flex-start'
}} }}
> >
<div style={{ width: '50%' }}>{track.name}</div> <div style={{ width: '50%' }}>Song: {track.name}</div>
<div>{track.original_artist}</div> <div>{track.original_artist}</div>
</div> </div>
</ListGroupItem> </ListGroupItem>

91
jam-ui/src/components/jamtracks/JKJamTracksFilter.js
View File

@ -14,11 +14,11 @@ import { useResponsive } from '@farfetch/react-context-responsive';
const JKJamTracksFilter = () => { const JKJamTracksFilter = () => {
const { t } = useTranslation('jamtracks'); const { t } = useTranslation('jamtracks');
const [jamTracks, setJamTracks] = useState([]); const [jamTracks, setJamTracks] = useState([]);
const [artists, setArtists] = useState([]); //const [artists, setArtists] = useState([]);
const [selected, setSelected] = useState(null); const [selected, setSelected] = useState(null);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [showDropdown, setShowDropdown] = useState(false); const [showDropdown, setShowDropdown] = useState(false);
const [showArtists, setShowArtists] = useState(false); //const [showArtists, setShowArtists] = useState(false);
const [nextOffset, setNextOffset] = useState(null); const [nextOffset, setNextOffset] = useState(null);
const [autoCompleteInputValue, setAutoCompleteInputValue] = useState(''); const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
@ -58,10 +58,10 @@ const JKJamTracksFilter = () => {
const handleOnSelect = async selected => { const handleOnSelect = async selected => {
setPage(1); setPage(1);
setArtists([]); //setArtists([]);
setJamTracks([]); setJamTracks([]);
setSearchTerm(''); setSearchTerm('');
setShowArtists(false); //setShowArtists(false);
setSelected(selected); setSelected(selected);
const params = queryOptions(selected); const params = queryOptions(selected);
await fetchJamTracks(params); await fetchJamTracks(params);
@ -69,26 +69,27 @@ const JKJamTracksFilter = () => {
const handleOnEnter = async queryStr => { const handleOnEnter = async queryStr => {
setPage(1); setPage(1);
setArtists([]); //setArtists([]);
setJamTracks([]); setJamTracks([]);
setSelected(x => null); setSelected(x => null);
setSearchTerm(queryStr); setSearchTerm(queryStr);
fetchArtists(queryStr); //setShowArtists(false);
//fetchArtists(queryStr);
const params = queryOptions(queryStr); const params = queryOptions(queryStr);
console.log('handleOnEnter _params', params, selected); console.log('handleOnEnter _params', params, selected);
await fetchJamTracks(params); await fetchJamTracks(params);
}; };
const handleOnSelectArtist = async artist => { // const handleOnSelectArtist = async artist => {
setPage(1); // setPage(1);
const selectedOpt = { // const selectedOpt = {
type: 'artist', // type: 'artist',
original_artist: artist.original_artist // original_artist: artist.original_artist
}; // };
setShowDropdown(false); // setShowDropdown(false);
setAutoCompleteInputValue(''); // setAutoCompleteInputValue('');
await handleOnSelect(selectedOpt); // await handleOnSelect(selectedOpt);
}; // };
const handleOnNextJamTracksPage = async () => { const handleOnNextJamTracksPage = async () => {
const currentQuery = selected ? selected : searchTerm; const currentQuery = selected ? selected : searchTerm;
@ -96,25 +97,8 @@ const JKJamTracksFilter = () => {
await fetchJamTracks(params); await fetchJamTracks(params);
}; };
// const fetchJamTracks = options => {
// getJamTracks(options)
// .then(resp => {
// return resp.json();
// })
// .then(data => {
// console.log('jamtracks', data);
// setJamTracks(prev => [...prev, ...data.jamtracks]);
// setNextOffset(data.next);
// setPage(page => page + 1);
// })
// .catch(error => {
// console.error('error', error);
// });
// };
const fetchJamTracks = async options => { const fetchJamTracks = async options => {
try { try {
console.log('fetchJamTracks', options);
const resp = await getJamTracks(options); const resp = await getJamTracks(options);
const data = await resp.json(); const data = await resp.json();
console.log('jamtracks', data); console.log('jamtracks', data);
@ -125,25 +109,25 @@ const JKJamTracksFilter = () => {
} }
}; };
const fetchArtists = query => { // const fetchArtists = query => {
const options = { // const options = {
limit: 100 // limit: 100
}; // };
options.artist_search = query; // options.artist_search = query;
getJamTrackArtists(options) // getJamTrackArtists(options)
.then(resp => { // .then(resp => {
return resp.json(); // return resp.json();
}) // })
.then(data => { // .then(data => {
console.log('artists', data); // console.log('artists', data);
setArtists(data.artists); // setArtists(data.artists);
setShowArtists(true); // setShowArtists(true);
}) // })
.catch(error => { // .catch(error => {
console.error('error', error); // console.error('error', error);
}); // });
}; // };
return ( return (
<Card> <Card>
@ -178,14 +162,14 @@ const JKJamTracksFilter = () => {
)} )}
</Row> </Row>
<div className="mb-3"> {/* <div className="mb-3">
<JKJamTrackArtists <JKJamTrackArtists
artists={artists} artists={artists}
searchTerm={searchTerm} searchTerm={searchTerm}
onSelect={handleOnSelectArtist} onSelect={handleOnSelectArtist}
showArtists={showArtists} showArtists={showArtists}
/> />
</div> </div> */}
<JKJamTracksList <JKJamTracksList
selectedType={selected?.type} selectedType={selected?.type}
searchTerm={searchTerm} searchTerm={searchTerm}
@ -206,6 +190,7 @@ const JKJamTrackFilterLinks = ({ shoppingCart, wrapperClassNames, shoppingCartCl
<a <a
data-testid="download-pdf" data-testid="download-pdf"
href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf" href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf"
target='_blank'
> >
<strong>PDF file</strong> <strong>PDF file</strong>
</a> </a>

11
jam-ui/src/components/jamtracks/JKJamTracksList.js
View File

@ -31,12 +31,12 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
{jamTracks.length > 0 && ( {jamTracks.length > 0 && (
<Row> <Row>
<Col> <Col>
<Table striped bordered className="fs--1" data-testid="jamtracks-table"> <Table striped bordered className="fs-0" data-testid="jamtracks-table">
<thead className="bg-200 text-900"> <thead className="bg-200 text-900">
<tr> <tr>
<th width="30%">{t('search.list.song')}</th> <th width="30%">{t('search.list.song')}</th>
<th width="55%">{t('search.list.tracks')}</th> <th width="55%">{t('search.list.tracks')}</th>
<th>{t('search.list.shop')}</th> <th className='text-center' align='center'>{t('search.list.shop')} </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -44,12 +44,13 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
{jamTracks.map((jamTrack, index) => ( {jamTracks.map((jamTrack, index) => (
<tr key={`jamtrck-preview-row-${jamTrack.id}`}> <tr key={`jamtrck-preview-row-${jamTrack.id}`}>
<td className="track-name-col"> <td className="track-name-col">
{jamTrack.name} by {jamTrack.original_artist} {jamTrack.name} <br />
<span className='fs--1'>by {jamTrack.original_artist}</span>
</td> </td>
<td className="track-tracks-col"> <td className="track-tracks-col fs--1">
<JKJamTrackPreview jamTrack={jamTrack} /> <JKJamTrackPreview jamTrack={jamTrack} />
</td> </td>
<td className="purchase-button-col"> <td className="purchase-button-col text-center" align='center'>
<JKJamTrackPurchaseButton jamTrack={jamTrack} /> <JKJamTrackPurchaseButton jamTrack={jamTrack} />
</td> </td>
</tr> </tr>

2
jam-ui/src/i18n/locales/en/jamtracks.json
View File

@ -3,7 +3,7 @@
"page_title": "Find JamTracks", "page_title": "Find JamTracks",
"search_input": { "search_input": {
"title": "Search", "title": "Search",
"placeholder": "Search by artist, song, style, or keyword" "placeholder": "enter artist or song name"
}, },
"search_results": { "search_results": {
"artists": "Search Results: Artists", "artists": "Search Results: Artists",