/
QueueCard.js
116 lines (106 loc) · 2.95 KB
/
QueueCard.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react'
import PropTypes from 'prop-types'
import { Card, CardBody, CardTitle, CardSubtitle, Button } from 'reactstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faMapMarker,
faQuestionCircle,
} from '@fortawesome/free-solid-svg-icons'
import ShowForCourseStaff from './ShowForCourseStaff'
const QueueCard = ({
queue,
courseName,
open,
onDelete,
onUpdate,
...rest
}) => {
const { name: queueName, location, questionCount } = queue
const questionCountText = `${questionCount} Question${
questionCount !== 1 ? 's' : ''
}`
const locationText = location || 'No location specified'
const handleDelete = e => {
e.stopPropagation()
e.preventDefault()
onDelete()
}
const handleUpdate = e => {
e.stopPropagation()
e.preventDefault()
onUpdate()
}
const title = courseName || queueName
const showQueueNameInBody = !!courseName
return (
<Card
className={open ? 'queue-card' : 'closed-queue-card bg-light'}
{...rest}
>
<CardBody>
<CardTitle className="d-flex flex-wrap align-items-center">
<span className="h5 mb-2 mr-auto pr-3">{title}</span>
<div>
<ShowForCourseStaff courseId={queue.courseId}>
<Button color="danger" size="sm" outline onClick={handleDelete}>
Delete
</Button>
</ShowForCourseStaff>
<ShowForCourseStaff courseId={queue.courseId}>
<Button
color="primary"
size="sm"
className="mr-0 ml-1"
outline
onClick={handleUpdate}
>
Edit
</Button>
</ShowForCourseStaff>
</div>
</CardTitle>
{showQueueNameInBody && (
<CardSubtitle className="mb-2">{queueName}</CardSubtitle>
)}
<div className="text-muted">
<FontAwesomeIcon icon={faMapMarker} fixedWidth className="mr-2" />
{locationText}
<br />
<FontAwesomeIcon
icon={faQuestionCircle}
fixedWidth
className="mr-2"
/>
{questionCountText}
</div>
</CardBody>
<style global jsx>{`
.queue-card,
.closed-queue-card {
transition: all 200ms;
cursor: pointer;
}
.queue-card:hover {
transform: translateY(-1px);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}
`}</style>
</Card>
)
}
QueueCard.defaultProps = {
courseName: null,
open: PropTypes.bool,
}
QueueCard.propTypes = {
queue: PropTypes.shape({
courseId: PropTypes.number,
}).isRequired,
courseName: PropTypes.string,
open: PropTypes.bool,
onUpdate: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
}
export default QueueCard