From 6af6da358b3bb4140cdee4b6c5ced64278e44f40 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Tue, 21 May 2024 09:59:51 -0500 Subject: [PATCH] updated select category on menu item page, and added user and edit user page functionality --- .../src/app/api/models/MenuItem.js | 5 +- .../src/app/api/users/route.js | 9 +++ donutshop_ecommerce/src/app/globals.css | 2 +- .../src/app/users/[id]/page.js | 25 ++++++++ donutshop_ecommerce/src/app/users/page.js | 57 +++++++++++++++++++ .../src/components/layout/MenuItemForm.js | 25 ++++++-- .../src/components/layout/UserTab.js | 5 +- 7 files changed, 120 insertions(+), 8 deletions(-) create mode 100644 donutshop_ecommerce/src/app/api/users/route.js create mode 100644 donutshop_ecommerce/src/app/users/[id]/page.js create mode 100644 donutshop_ecommerce/src/app/users/page.js diff --git a/donutshop_ecommerce/src/app/api/models/MenuItem.js b/donutshop_ecommerce/src/app/api/models/MenuItem.js index 11df751..ba2c7f1 100644 --- a/donutshop_ecommerce/src/app/api/models/MenuItem.js +++ b/donutshop_ecommerce/src/app/api/models/MenuItem.js @@ -1,4 +1,4 @@ -import { Schema, model, models } from "mongoose"; +import mongoose, { Schema, model, models } from "mongoose"; const ExtraPriceSchema = new Schema({ itemName: String, @@ -15,6 +15,9 @@ const MenuItemSchema = new Schema({ description:{ type: String }, + category:{ + type: mongoose.Types.ObjectId + }, basePrice:{ type: Number }, diff --git a/donutshop_ecommerce/src/app/api/users/route.js b/donutshop_ecommerce/src/app/api/users/route.js new file mode 100644 index 0000000..e010514 --- /dev/null +++ b/donutshop_ecommerce/src/app/api/users/route.js @@ -0,0 +1,9 @@ +import mongoose from "mongoose"; +import { User } from "../models/User"; + +export async function GET(){ + mongoose.connect(process.env.MONGO_URL); + const users = await User.find(); + + return Response.json(users); +} \ No newline at end of file diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css index b3520ad..dd2d5e6 100644 --- a/donutshop_ecommerce/src/app/globals.css +++ b/donutshop_ecommerce/src/app/globals.css @@ -34,7 +34,7 @@ input[type="email"], input[type="password"], input[type="text"], input[type="tel } /*===== profile =====*/ div.tabs > *{ - @apply py-1 px-2 sm:py-2 sm:px-4 bg-gray-200 text-gray-700 rounded-md + @apply py-1 px-2 sm:py-2 sm:px-3 bg-gray-200 text-gray-700 rounded-md text-sm sm:text-base } div.tabs > *.active{ @apply bg-pink-500 text-white font-semibold diff --git a/donutshop_ecommerce/src/app/users/[id]/page.js b/donutshop_ecommerce/src/app/users/[id]/page.js new file mode 100644 index 0000000..bbe84af --- /dev/null +++ b/donutshop_ecommerce/src/app/users/[id]/page.js @@ -0,0 +1,25 @@ +"use client" +import React from 'react' +import UserTab from '../../../components/layout/UserTab' +import useProfile from '../../../components/UseProfile'; + +const EditUsersPage = () => { + const {data, loading} = useProfile(); + + + + if(loading){ + return

Loading...

+ } + if(!data.admin){ + return

Please login as an admin

+ } + + return ( +
+ +
+ ) +} + +export default EditUsersPage \ No newline at end of file diff --git a/donutshop_ecommerce/src/app/users/page.js b/donutshop_ecommerce/src/app/users/page.js new file mode 100644 index 0000000..93bedc8 --- /dev/null +++ b/donutshop_ecommerce/src/app/users/page.js @@ -0,0 +1,57 @@ +"use client" +import React, { useEffect, useState } from 'react' +import UserTab from '../../components/layout/UserTab' +import useProfile from '../../components/UseProfile' +import { LiaEditSolid } from "react-icons/lia"; +import Link from 'next/link'; + +const Userspage = () => { + const {data, loading} = useProfile(); + const [users, setUser] = useState([]); + + + useEffect(() => { + fetch('api/users').then(response => { + response.json().then(users => { + setUser(users) + }) + }) + }, []) + + + if(loading){ + return

Loading...

+ } + if(!data.admin){ + return

Please login as an admin

+ } + + + return ( +
+ +
+ {users?.length > 0 && users.map(user => ( +
+
+
+ {!!user.name && ( + {user.name} + )} + {!user.name && ( + No username + )} +
+ {user.email} +
+
+ +
+
+ ))} +
+
+ ) +} + +export default Userspage \ No newline at end of file diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js index a4cf748..9d867c8 100644 --- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js +++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js @@ -1,7 +1,6 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import EditImage from './EditImage'; import MenuItemProps from './MenuItemProps' -import toast from 'react-hot-toast'; const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => { @@ -10,14 +9,32 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => { const [description, setDescription] = useState(menuItem?.description || ''); const [basePrice, setBasePrice] = useState(menuItem?.basePrice || ''); const [sizes, setSizes] = useState(menuItem?.sizes || []); - + const [category, setCategory] = useState(menuItem?.category || ''); + const [categories, setCategories] = useState([]); + + + useEffect(() => { + fetch('/api/categories').then(res => { + res.json().then(categories => { + setCategories(categories) + }) + }) + }, []) return ( -
handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes})}> + handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes, category,})}>
+
+ + +
setItemName(ev.target.value)}/> diff --git a/donutshop_ecommerce/src/components/layout/UserTab.js b/donutshop_ecommerce/src/components/layout/UserTab.js index 065a1e8..3b12e11 100644 --- a/donutshop_ecommerce/src/components/layout/UserTab.js +++ b/donutshop_ecommerce/src/components/layout/UserTab.js @@ -8,13 +8,14 @@ const UserTab = ({isAdmin}) => { return ( -
+
Profile {isAdmin && ( <> Categories Items - Users + Users + Orders )}