Skip to content

Commit a5da817

Browse files
one-communityone-community
authored
Merge pull request #5030 from OneCommunityGlobal/sphurthy-fix-scrolling-in-all-events-page
Sphurthy fix: scrolling in all events page
2 parents b2f47d8 + 823cb8a commit a5da817

1 file changed

Lines changed: 142 additions & 5 deletions

File tree

‎src/components/CommunityPortal/CPDashboard.jsx‎

Lines changed: 142 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,19 @@
22
import { useState, useEffect, useMemo } from 'react';
33
import PropTypes from 'prop-types';
44
import { useSelector } from 'react-redux';
5-
import { Container, Row, Col, Card, CardBody, Button, Input, Label } from 'reactstrap';
5+
import {
6+
Container,
7+
Row,
8+
Alert,
9+
Col,
10+
Card,
11+
CardBody,
12+
Button,
13+
Input,
14+
FormGroup,
15+
Label,
16+
} from 'reactstrap';
17+
import Select from 'react-select';
618
import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt, FaSearch, FaTimes } from 'react-icons/fa';
719
import styles from './CPDashboard.module.css';
820
import { ENDPOINTS } from '../../utils/URL';
@@ -373,7 +385,16 @@ function CPDashboard() {
373385
const [searchQuery, setSearchQuery] = useState('');
374386
const [isLoading, setIsLoading] = useState(false);
375387
const [error, setError] = useState(null);
376-
const [pagination, setPagination] = useState({ currentPage: 1, total: 0, limit: 6 });
388+
const [failedLogos, setFailedLogos] = useState(new Set());
389+
const branchOptions = [{ value: '', label: 'Select branches', isDisabled: true }];
390+
const themeOptions = [{ value: '', label: 'Select themes', isDisabled: true }];
391+
const categoryOptions = [{ value: '', label: 'Select categories', isDisabled: true }];
392+
const [pagination, setPagination] = useState({
393+
currentPage: 1,
394+
totalPages: 5,
395+
total: 0,
396+
limit: 6,
397+
});
377398

378399
const FALLBACK_IMG =
379400
'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60';
@@ -457,9 +478,125 @@ function CPDashboard() {
457478
/>
458479
</header>
459480

460-
<Row className={styles['dashboard-row']}>
461-
<Col md={3} className={styles['dashboard-sidebar']}>
462-
<FiltersSidebar darkMode={darkMode} />
481+
<Row>
482+
<Col md={3} className={`${styles.dashboardSidebar} ${darkMode ? styles.darkSidebar : ''}`}>
483+
<div className={styles.filterSection}>
484+
<h4>Search Filters</h4>
485+
<div className={styles.filterSectionDivider}>
486+
<div className={styles.filterItem}>
487+
<label htmlFor="date-tomorrow"> Dates</label>
488+
<div className={styles.radioRow}>
489+
<FormGroup check className={styles.radioGroup + ' d-flex align-items-center'}>
490+
<Input
491+
id="date-tomorrow"
492+
type="radio"
493+
name="dates"
494+
checked={dateFilter === 'tomorrow'}
495+
onChange={() => setDateFilter('tomorrow')}
496+
className={styles.radioInput}
497+
/>
498+
<Label
499+
htmlFor="date-tomorrow"
500+
check
501+
className={styles.radioLabel + ' ms-2 mb-0'}
502+
>
503+
Tomorrow
504+
</Label>
505+
</FormGroup>
506+
<FormGroup check className={styles.radioGroup + ' d-flex align-items-center'}>
507+
<Input
508+
id="date-weekend"
509+
type="radio"
510+
name="dates"
511+
checked={dateFilter === 'weekend'}
512+
onChange={() => setDateFilter('weekend')}
513+
className={styles.radioInput}
514+
/>
515+
<Label
516+
htmlFor="date-weekend"
517+
check
518+
className={styles.radioLabel + ' ms-2 mb-0'}
519+
>
520+
This Weekend
521+
</Label>
522+
</FormGroup>
523+
</div>
524+
<Button
525+
color="primary"
526+
size="sm"
527+
onClick={() => {
528+
setDateFilter('');
529+
setSelectedDate('');
530+
}}
531+
>
532+
Clear date filter
533+
</Button>
534+
<Input
535+
type="date"
536+
placeholder="Select Date"
537+
className={styles.dateFilter}
538+
value={selectedDate}
539+
onChange={e => setSelectedDate(e.target.value)}
540+
style={{ marginTop: '10px' }}
541+
/>
542+
</div>
543+
544+
<div className={styles.filterItem}>
545+
<label htmlFor="online-only">Online</label>
546+
<div>
547+
<Input
548+
type="checkbox"
549+
id="online-only"
550+
checked={onlineOnly}
551+
onChange={e => {
552+
setOnlineOnly(e.target.checked);
553+
setPagination(prev => ({ ...prev, currentPage: 1 }));
554+
}}
555+
/>{' '}
556+
Online Only
557+
</div>
558+
</div>
559+
560+
<div className={styles.filterItem}>
561+
<label htmlFor="branches">Branches</label>
562+
<Select
563+
inputId="branches"
564+
classNamePrefix="cp-dashboard-filter"
565+
options={branchOptions}
566+
placeholder="Select branches"
567+
isSearchable={false}
568+
menuShouldBlockScroll={false}
569+
menuPlacement="auto"
570+
/>
571+
</div>
572+
573+
<div className={styles.filterItem}>
574+
<label htmlFor="themes">Themes</label>
575+
<Select
576+
inputId="themes"
577+
classNamePrefix="cp-dashboard-filter"
578+
options={themeOptions}
579+
placeholder="Select themes"
580+
isSearchable={false}
581+
menuShouldBlockScroll={false}
582+
menuPlacement="auto"
583+
/>
584+
</div>
585+
586+
<div className={styles.filterItem}>
587+
<label htmlFor="categories">Categories</label>
588+
<Select
589+
inputId="categories"
590+
classNamePrefix="cp-dashboard-filter"
591+
options={categoryOptions}
592+
placeholder="Select categories"
593+
isSearchable={false}
594+
menuShouldBlockScroll={false}
595+
menuPlacement="auto"
596+
/>
597+
</div>
598+
</div>
599+
</div>
463600
</Col>
464601

465602
<Col md={9} className={styles['dashboard-main']}>

0 commit comments

Comments
 (0)