-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Ube-Dev/Voluntree
- Loading branch information
Showing
10 changed files
with
303 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import { Container, Row, Col, Card, Button } from 'react-bootstrap'; | ||
| import '../css/AdminHome.css'; | ||
| import { COMPONENT_IDS } from '../utilities/ComponentIDs'; | ||
| import AdminHoursStats from './AdminHoursStats'; | ||
| import AdminSiteStats from './AdminSiteStats'; | ||
| import AdminRecentEvents from './AdminRecentEvents'; | ||
|
|
||
| /** Main component in home page upon logging in as admin. */ | ||
| const AdminHome = () => ( | ||
| <Container className="py-5" id={COMPONENT_IDS.ADMIN_HOME_PAGE}> | ||
| <Card className="admin-card-background rounded-4"> | ||
| <Row className="p-3"> | ||
| <Col className="col-4"> | ||
| <AdminSiteStats /> | ||
| <Card className="rounded-4"> | ||
| <Card.Header><h3 className="text-center">Site Management</h3></Card.Header> | ||
| <Card.Body className="mx-3"> | ||
| <Row className="text-center"> | ||
| <Button variant="outline-dark" href="/event-moderation" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_EVENT_MODERATION}> | ||
| Events | ||
| </Button> | ||
| <Button variant="outline-dark" href="/organization-moderation" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_ORGANIZATION_MODERATION}> | ||
| Organizations | ||
| </Button> | ||
| <Button variant="outline-dark" href="/user-moderation" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_USER_MODERATION}> | ||
| Users | ||
| </Button> | ||
| <Button variant="outline-dark" className="rounded-0 management-btn" id={COMPONENT_IDS.ADMIN_HOME_REVIEW_MODERATION}> | ||
| Reviews | ||
| </Button> | ||
| </Row> | ||
| </Card.Body> | ||
| </Card> | ||
| </Col> | ||
| <Col className="col-8 align-content-center"> | ||
| <AdminHoursStats /> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <AdminRecentEvents /> | ||
| </Row> | ||
| </Card> | ||
| </Container> | ||
| ); | ||
|
|
||
| export default AdminHome; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { useTracker } from 'meteor/react-meteor-data'; | ||
| import { Container, Row, Col } from 'react-bootstrap'; | ||
| import { Events } from '../../api/event/EventCollection'; | ||
| import LoadingSpinner from './LoadingSpinner'; | ||
| import EventCard from './EventCard'; | ||
|
|
||
| const AdminRecentEvents = () => { | ||
|
|
||
| const { ready, recentEvents } = useTracker(() => { | ||
| const subscription = Events.subscribeEvent(); | ||
| const recent = Events.find({}).fetch().reverse().slice(0, 6); | ||
| return { | ||
| ready: subscription.ready(), | ||
| recentEvents: recent, | ||
| }; | ||
| }); | ||
|
|
||
| return ready ? ( | ||
| <Container className="py-3"> | ||
| <Row className="text-center"> | ||
| <h2>Recent Events</h2> | ||
| </Row> | ||
| <Row className="px-3"> | ||
| {recentEvents.map((item) => ( | ||
| <Col key={item._id} md={4} className="py-2"> | ||
| <EventCard event={item} /> | ||
| </Col> | ||
| ))} | ||
| </Row> | ||
| </Container> | ||
| ) : ( | ||
| <LoadingSpinner /> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminRecentEvents; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import { Container, Row, Col, Card } from 'react-bootstrap'; | ||
| import { PAGE_IDS } from '../utilities/PageIDs'; | ||
| import '../css/UserHome.css'; | ||
| import UserDashboard from './UserDashboard'; | ||
| import UpcomingEventCard from './UpcomingEventCard'; | ||
| import UserCalendar from './UserCalendar'; | ||
|
|
||
| const UserHome = () => ( | ||
| <Container id={PAGE_IDS.HOME_PAGE} className="py-5"> | ||
| <Card className="user-card-background p-3 rounded-4"> | ||
| <Row className="align-content-center"> | ||
| <Col xs={12} md={5}> | ||
| <UserDashboard /> | ||
| <UpcomingEventCard /> | ||
| </Col> | ||
| <Col xs={12} md={7}> | ||
| <UserCalendar /> | ||
| </Col> | ||
| </Row> | ||
| </Card> | ||
| </Container> | ||
| ); | ||
|
|
||
| export default UserHome; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /* Define styles for larger screens */ | ||
| @media only screen and (min-width: 768px) { | ||
| .calendar-card { | ||
| width: 100% !important; | ||
| height: 100% !important; | ||
| } | ||
| } | ||
|
|
||
| /* Define styles for smaller screens */ | ||
| @media only screen and (max-width: 390px) { | ||
| .calendar-card { | ||
| width: 79vw !important; /* 90% of viewport width */ | ||
| height: 79vw !important; /* 90% of viewport width */ | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .user-card-background { | ||
| background-color: var(--color2) !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Container, Row, Col, Card, Form, Button, ButtonGroup, Modal, Image } from 'react-bootstrap'; | ||
| import Table from 'react-bootstrap/Table'; | ||
| import swal from 'sweetalert'; | ||
| import { Meteor } from 'meteor/meteor'; | ||
| import Fuse from 'fuse.js'; | ||
| import { useTracker } from 'meteor/react-meteor-data'; | ||
| import { PAGE_IDS } from '../utilities/PageIDs'; | ||
| import { COMPONENT_IDS } from '../utilities/ComponentIDs'; | ||
| import LoadingSpinner from '../components/LoadingSpinner'; | ||
| import { removeOrganization } from '../../startup/both/Methods'; | ||
| import { Organization } from '../../api/organization/OrganizationCollection'; | ||
| import '../css/AdminModeration.css'; | ||
|
|
||
| /** This admin-only page moderates organizations. Able to view, edit, and delete organizations. */ | ||
| const AdminOrganizationModeration = () => { | ||
| const { ready, organization } = useTracker(() => { | ||
| const subscription = Organization.subscribeOrganization(); // Subscribe to organization publication for the current user | ||
| const profile = Organization.find().fetch(); // Find the organization for the current user | ||
| return { | ||
| ready: subscription ? subscription.ready() : false, | ||
| organization: profile, | ||
| }; | ||
| }); | ||
|
|
||
| // Delete function variable definitions | ||
| const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false); | ||
| const [orgIdToDelete, setOrgIdToDelete] = useState(null); | ||
| const toggleDeleteConfirmation = (orgId) => { | ||
| setShowDeleteConfirmation(!showDeleteConfirmation); | ||
| setOrgIdToDelete(orgId); | ||
| }; | ||
|
|
||
| // Search variable definitions | ||
| let displayedOrganizations = organization; | ||
| const [searchQuery, setSearchQuery] = useState(''); | ||
| const [searchPerformed, setSearchPerformed] = useState(false); | ||
| const handleSearchChange = (event) => { | ||
| setSearchQuery(event.target.value); | ||
| setSearchPerformed(true); | ||
| }; | ||
|
|
||
| if (searchPerformed && searchQuery !== '') { | ||
| const fuseOptions = { | ||
| isCaseSensitive: false, | ||
| shouldSort: true, | ||
| includeMatches: true, | ||
| findAllMatches: true, | ||
| useExtendedSearch: false, | ||
| threshold: 0.2, | ||
| keys: ['name', 'type', 'email', 'phone'], | ||
| }; | ||
|
|
||
| const fuse = new Fuse(organization, fuseOptions); | ||
| const result = fuse.search(searchQuery); | ||
| displayedOrganizations = result.map((item) => item.item); | ||
| } | ||
|
|
||
| const confirmDelete = () => { | ||
| Meteor.call(removeOrganization, orgIdToDelete, (error) => { | ||
| if (error) { | ||
| swal('Error', error.message, 'error'); | ||
| } else { | ||
| swal('Success', 'Organization deleted successfully', 'success'); | ||
| setShowDeleteConfirmation(false); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| return ready ? ( | ||
| <Container fluid className="color1 py-5" id={PAGE_IDS.ADMIN_ORGANIZATION_MODERATION}> | ||
| <Container className=""> | ||
| <Row className="text-center pb-3"> | ||
| <h1>Organization Moderation</h1> | ||
| </Row> | ||
| <Card className="rounded-4 p-3 org-moderation-background"> | ||
| <Row className="justify-content-center"> | ||
| <Col className="col-7"> | ||
| <Form.Group className="search-bar"> | ||
| <Form.Control | ||
| id={COMPONENT_IDS.ADMIN_ORGANIZATION_MODERATION_SEARCH_BAR} | ||
| type="text" | ||
| placeholder="Search for organizations..." | ||
| className="align-content-center" | ||
| value={searchQuery} | ||
| onChange={handleSearchChange} | ||
| /> | ||
| </Form.Group> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <Card.Body> | ||
| <Table striped bordered hover> | ||
| <thead> | ||
| <tr> | ||
| <th>PFP</th> | ||
| <th>Organization</th> | ||
| <th>Category</th> | ||
| <th>Email</th> | ||
| <th>Phone</th> | ||
| <th>Rating</th> | ||
| <th>Actions</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {displayedOrganizations.map((org) => ( | ||
| <tr key={org._id}> | ||
| <td><Image src={org.image} className="org-mod-image" alt="Organization-submitted image" /></td> | ||
| <td>{org.name}</td> | ||
| <td>{org.type}</td> | ||
| <td>{org.contactEmail}</td> | ||
| <td>{org.phone}</td> | ||
| <td>{org.averageRating}</td> | ||
| <td className="text-center"> | ||
| <ButtonGroup> | ||
| <Button variant="success" href={`/org-profile/${org._id}`}>View</Button> | ||
| <Button variant="warning" href={`/admin-edit-organization/${org._id}`}>Edit</Button> | ||
| <Button variant="danger" onClick={() => toggleDeleteConfirmation(org._id)}>Delete</Button> | ||
| </ButtonGroup> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </Table> | ||
| </Card.Body> | ||
| </Col> | ||
| </Row> | ||
| </Card> | ||
| <Modal show={showDeleteConfirmation} onHide={() => setShowDeleteConfirmation(false)}> | ||
| <Modal.Header closeButton> | ||
| <Modal.Title>Confirm Delete</Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <p>Are you sure you want to delete this Organization?</p> | ||
| <p>The user will be notified of this deletion.</p> | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button variant="secondary" onClick={() => setShowDeleteConfirmation(false)}>Cancel</Button> | ||
| <Button variant="danger" onClick={confirmDelete}>Confirm Delete</Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| </Container> | ||
| </Container> | ||
| ) : ( | ||
| <LoadingSpinner /> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminOrganizationModeration; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters