Add hidden event types
This commit is contained in:
parent
b32a4c75c0
commit
c320b0f20d
5 changed files with 72 additions and 8 deletions
|
@ -3,7 +3,7 @@ import Link from 'next/link';
|
|||
import prisma from '../lib/prisma';
|
||||
|
||||
export default function User(props) {
|
||||
const eventTypes = props.user.eventTypes.map(type =>
|
||||
const eventTypes = props.eventTypes.map(type =>
|
||||
<li key={type.id}>
|
||||
<Link href={'/' + props.user.username + '/' + type.id.toString()}>
|
||||
<a className="block px-6 py-4">
|
||||
|
@ -49,6 +49,7 @@ export async function getServerSideProps(context) {
|
|||
username: context.query.user,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
bio: true,
|
||||
|
@ -63,9 +64,17 @@ export async function getServerSideProps(context) {
|
|||
}
|
||||
}
|
||||
|
||||
const eventTypes = await prisma.eventType.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
hidden: false
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
props: {
|
||||
user
|
||||
user,
|
||||
eventTypes
|
||||
},
|
||||
}
|
||||
}
|
|
@ -26,12 +26,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||
const title = req.body.title;
|
||||
const description = req.body.description;
|
||||
const length = parseInt(req.body.length);
|
||||
const hidden = req.body.hidden;
|
||||
|
||||
const createEventType = await prisma.eventType.create({
|
||||
data: {
|
||||
title: title,
|
||||
description: description,
|
||||
length: length,
|
||||
hidden: hidden,
|
||||
userId: user.id,
|
||||
},
|
||||
});
|
||||
|
@ -56,6 +58,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||
const title = req.body.title;
|
||||
const description = req.body.description;
|
||||
const length = parseInt(req.body.length);
|
||||
const hidden = req.body.hidden;
|
||||
|
||||
const updateEventType = await prisma.eventType.update({
|
||||
where: {
|
||||
|
@ -64,7 +67,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||
data: {
|
||||
title: title,
|
||||
description: description,
|
||||
length: length
|
||||
length: length,
|
||||
hidden: hidden
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -12,6 +12,7 @@ export default function EventType(props) {
|
|||
const titleRef = useRef();
|
||||
const descriptionRef = useRef();
|
||||
const lengthRef = useRef();
|
||||
const isHiddenRef = useRef();
|
||||
|
||||
if (loading) {
|
||||
return <p className="text-gray-400">Loading...</p>;
|
||||
|
@ -27,12 +28,13 @@ export default function EventType(props) {
|
|||
const enteredTitle = titleRef.current.value;
|
||||
const enteredDescription = descriptionRef.current.value;
|
||||
const enteredLength = lengthRef.current.value;
|
||||
const enteredIsHidden = isHiddenRef.current.checked;
|
||||
|
||||
// TODO: Add validation
|
||||
|
||||
const response = await fetch('/api/availability/eventtype', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({id: props.eventType.id, title: enteredTitle, description: enteredDescription, length: enteredLength}),
|
||||
body: JSON.stringify({id: props.eventType.id, title: enteredTitle, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
|
@ -88,6 +90,26 @@ export default function EventType(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-8">
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
ref={isHiddenRef}
|
||||
id="ishidden"
|
||||
name="ishidden"
|
||||
type="checkbox"
|
||||
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||||
defaultChecked={props.eventType.hidden}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="ishidden" className="font-medium text-gray-700">
|
||||
Hide this event type
|
||||
</label>
|
||||
<p className="text-gray-500">Hide the event type from your page, so it can only be booked through it's URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Update</button>
|
||||
<Link href="/availability"><a className="ml-2 btn btn-white">Cancel</a></Link>
|
||||
</form>
|
||||
|
@ -129,7 +151,8 @@ export async function getServerSideProps(context) {
|
|||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
length: true
|
||||
length: true,
|
||||
hidden: true
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -17,6 +17,7 @@ export default function Availability(props) {
|
|||
const titleRef = useRef();
|
||||
const descriptionRef = useRef();
|
||||
const lengthRef = useRef();
|
||||
const isHiddenRef = useRef();
|
||||
|
||||
const startHoursRef = useRef();
|
||||
const startMinsRef = useRef();
|
||||
|
@ -55,12 +56,13 @@ export default function Availability(props) {
|
|||
const enteredTitle = titleRef.current.value;
|
||||
const enteredDescription = descriptionRef.current.value;
|
||||
const enteredLength = lengthRef.current.value;
|
||||
const enteredIsHidden = isHiddenRef.current.checked;
|
||||
|
||||
// TODO: Add validation
|
||||
|
||||
const response = await fetch('/api/availability/eventtype', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({title: enteredTitle, description: enteredDescription, length: enteredLength}),
|
||||
body: JSON.stringify({title: enteredTitle, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
|
@ -139,6 +141,11 @@ export default function Availability(props) {
|
|||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{eventType.title}
|
||||
{eventType.hidden &&
|
||||
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
|
||||
Hidden
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{eventType.description}
|
||||
|
@ -221,6 +228,25 @@ export default function Availability(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-8">
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input
|
||||
ref={isHiddenRef}
|
||||
id="ishidden"
|
||||
name="ishidden"
|
||||
type="checkbox"
|
||||
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="ishidden" className="font-medium text-gray-700">
|
||||
Hide this event type
|
||||
</label>
|
||||
<p className="text-gray-500">Hide the event type from your page, so it can only be booked through it's URL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* TODO: Add an error message when required input fields empty*/}
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
|
@ -324,7 +350,8 @@ export async function getServerSideProps(context) {
|
|||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
length: true
|
||||
length: true,
|
||||
hidden: true
|
||||
}
|
||||
});
|
||||
return {
|
||||
|
|
|
@ -15,6 +15,7 @@ model EventType {
|
|||
title String
|
||||
description String?
|
||||
length Int
|
||||
hidden Boolean @default(false)
|
||||
user User? @relation(fields: [userId], references: [id])
|
||||
userId Int?
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue